Creating a Website Clone: Apple.com with HTML, CSS, and JS
Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
📙Table Of Content
- Project Folder Structure
- Apple.com HTML CODE
- Apple.com CSS CODE
- Apple.com Javascript CODE
- Live Preview of Apple.com Clone
Project Folder Structure:
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
Apple.com HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Apple Clone</title>
</head>
<body>
<div id="main">
<nav>
<i class="ri-apple-fill"></i>
<a id="store" href="">Store</a>
<a href="">Mac</a>
<a href="">iPad</a>
<a href="">iPhone</a>
<a href="">Watch</a>
<a href="">AirPods</a>
<a href="">TV & Home</a>
<a href="">Entertainment</a>
<a href="">Accessories</a>
<a href="">Support</a>
<i class="ri-search-line"></i>
<i class="ri-shopping-bag-line"></i>
<i class="ri-menu-3-line"></i>
</nav>
<div class="respo-nav">
<i class="ri-close-fill"></i>
<a href="">Store</a>
<a href="">Mac</a>
<a href="">iPad</a>
<a href="">iPhone</a>
<a href="">Watch</a>
<a href="">AirPods</a>
<a href="">TV & Home</a>
<a href="">Entertainment</a>
<a href="">Accessories</a>
<a href="">Support</a>
</div>
<!-- <div class="submenu">
<div class="sub-top">
<a href="">Gravity Coding</a>
<a href="">Gravity Coding</a>
<a href="">Gravity Coding</a>
<a href="">Gravity Coding</a>
<a href="">Gravity Coding</a>
<a href="">Gravity Coding</a>
</div>
<div class="sub-btm"></div>
</div> -->
<div id="partO" class="part-1">
<div class="text-part-1">
<h1>iPhone 15 Pro</h1>
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
<div class="part-1 part-2">
<div class="text-part-1 text-part-2">
<h1>iPhone 15 Pro</h1>
<p>New Camera. New Design. Newphoria.</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
<div class="part-1 part-3">
<div class="text-part-1 text-part-3">
<img src="Assets/image3-1.png" alt="" />
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
<div class="part-4">
<div class="part-1 part-4-1">
<div class="text-part-1 text-part-3">
<img src="Assets/4-1-1.png" alt="" />
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
<div class="part-1 part-4-2">
<div class="text-part-1 text-part-3">
<img src="Assets/4-2-1.png" alt="" />
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
</div>
<div class="part-4">
<div class="part-1 part-4-1">
<div class="text-part-1 text-part-3">
<img src="Assets/4-1-1.png" alt="" />
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
<div class="part-1 part-4-2">
<div class="text-part-1 text-part-3">
<img src="Assets/4-2-1.png" alt="" />
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
</div>
<div class="part-4">
<div class="part-1 part-4-1">
<div class="text-part-1 text-part-3">
<img src="Assets/4-1-1.png" alt="" />
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
<div class="part-1 part-4-2">
<div class="text-part-1 text-part-3">
<img src="Assets/4-2-1.png" alt="" />
<p>Titanium. So Strong. So Light. So Pro</p>
<div class="link">
<a href="">Learn More ></a>
<a href="">Buy ></a>
</div>
</div>
</div>
</div>
<div class="slider-part">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-1"></div>
<div class="swiper-slide swiper-2"></div>
<div class="swiper-slide swiper-3"></div>
<div class="swiper-slide swiper-4"></div>
<div class="swiper-slide swiper-5"></div>
<div class="swiper-slide swiper-6"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Apple.com CSS CODE
@font-face {
font-family: FontRegular;
src: url(Assets/Fonts/sf-pro-display_regular.ttf);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: FontRegular;
}
html , body{
height: 100%;
width: 100%;
}
#main{
width: 100%;
min-height: 100vh;
}
nav{
display: flex;
align-items: center;
justify-content: center;
gap: 2vw;
width: 100%;
height: 5vh;
background-color: #f2f2f2;
z-index: 50;
}
nav a{
text-decoration: none;
color: #333;
}
nav i{
font-size: 1.1vw;
}
.part-1{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 70vh;
background-image: url(Assets/hero_iphone15pro__i70z9oz3hj2i_largetall.jpg);
background-position: center;
}
.text-part-1{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
gap: 1vh;
top: 10%;
color: #fff;
}
.text-part-1 h1{
font-size: 3vw;
}
.text-part-1 p{
font-size: 1.6vw;
}
.link{
display: flex;
align-items: center;
justify-content: center;
gap: 2vw;
}
.link a{
text-decoration: none;
color: rgb(26, 141, 242);
font-size: 1.2vw;
}
.link a:hover{
border-bottom: 1px solid rgb(26, 141, 242);
}
.part-2{
background-image: url(Assets/hero_iphone15_announce__uuemlcwczn6u_largetall.jpg);
}
.text-part-2{
color: #333;
}
.part-3{
background-image: url(Assets/image3.jpg);
}
.part-4{
display: flex;
width: 100%;
}
.part-4-1{
height: 60vh;
width: 50%;
background-repeat: no-repeat;
background-image: url(Assets/4-1.jpg);
}
.part-4-2{
height: 60vh;
width: 50%;
background-repeat: no-repeat;
background-image: url(Assets/4-2.jpg);
}
.part-4 .text-part-1{
color: #333;
}
.part-4 .text-part-1 p{
font-size: 1vw;
}
.slider-part{
padding: 2vh 0vw;
width: 100%;
height: 70vh;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide {
width: 90%;
background-position: center;
background-size: cover;
}
.swiper-1{
background-image: url(Assets/1.jpg);
}
.swiper-2{
background-image: url(Assets/2.jpg);
}
.swiper-3{
background-image: url(Assets/3.jpg);
}
.swiper-4{
background-image: url(Assets/4.jpg);
}
.swiper-5{
background-image: url(Assets/5.jpg);
}
.swiper-6{
background-image: url(Assets/6.jpg);
}
.ri-menu-3-line{
display: none;
}
.respo-nav{
position: absolute;
top: -120%;
width: 100%;
height: 100vh;
background-color: rgb(255, 255, 255);
display: none;
z-index: 99;
transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
}
.submenu{
top: -100%;
position: absolute;
width: 100%;
height: 95vh;
z-index: 999;
transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
pointer-events: none;
}
.sub-top{
display: flex;
flex-direction: column;
gap: 2vh;
width: 100%;
height: 50vh;
background-color: #ffffff;
padding: 5vw 20vw;
}
.sub-top a{
text-decoration: none;
font-size: 1vw;
color: #333;
}
.sub-btm{
width: 100%;
height: 45vh;
background: rgba(0, 0, 0, 0.085);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
}
@media (max-width:500px) {
.submenu{
display: none;
}
#partO{
background-image: url(Assets/resp1.jpg);
}
.slider-part{
height: 50vh;
}
nav{
gap: 5vw;
}
nav a{
display: none;
}
nav i{
font-size: 5vw;
}
.ri-apple-fill{
margin-right: 60vw;
}
.ri-menu-3-line{
display: initial;
}
.respo-nav{
padding: 10vw 10vw;
display: flex;
flex-direction: column;
gap: 3vh;
}
.respo-nav a{
font-size: 6vw;
text-decoration: none;
color: #333;
}
.respo-nav i{
position: absolute;
top: 1%;
right: 3%;
font-size: 7vw;
}
.text-part-1{
gap: 2vh;
}
.text-part-1 h1{
font-size: 10vw;
}
.text-part-1 p{
font-size: 5vw;
}
.link a{
font-size: 5.2vw;
}
.part-2{
background-image: url(Assets/resp2.jpg);
}
.part-4{
flex-direction: column;
}
.part-4-1{
width: 100%;
}
.part-4-2{
width: 100%;
}
.part-4 .text-part-1 p{
font-size: 4vw;
}
}
Apple.com Javascript CODE
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1.5,
centeredSlides: true,
spaceBetween: 30,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
loop: true,
});
var menu = document.querySelector(".ri-menu-3-line");
var clo = document.querySelector(".ri-close-fill");
var nav = document.querySelector(".respo-nav");
menu.addEventListener("click",function(){
nav.style.top = "0%";
})
clo.addEventListener("click",function(){
nav.style.top = "-120%";
})
var store = document.querySelector("#store");
var subMenu = document.querySelector(".submenu");
store.addEventListener("mousemove", function(){
subMenu.style.top = "5%"
})
store.addEventListener("mouseleave", function(){
subMenu.style.top = "-100%"
})
Live Preview of Apple.com Clone
See the Pen Untitled by Codewithshobhit (@Codewithshobhit) on CodePen.
Star
Fork
Download
How to run this Html Css and Js Project in Our Browser?
first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.
Which Code Editor do you use to create those projects?
I am using VS Code Studio.
is this project responsive or not?
Yes! this project is a responsive project.
If you enjoyed reading this post and have found it useful for you, then please give share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram
if you have any confusion Comment below or you can contact us by filling out our Contact Us form from the home section. 🤞🎉
No comments:
Post a Comment