index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div id="main">
<!-- //nav -->
<div id="nav">
<img src="assets/logo (2).png" alt="">
<div>
<a href="">MAN</a>
<a href="">WOMAN</a>
<a href="">KIDS</a>
<a href="">CUSTOMIZE</a>
<a href="">COLLECTION</a>
</div>
<i class="ri-search-line"></i>
</div>
<!-- //center -->
<div id="center">
<!-- // left -->
<div class="cLeft">
<div class="content">
<h1>Nike</h1>
<h2>Air Max Plus</h2>
<h3>MAKE THE GROUND SHAKE</h3>
<P>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id rem quos sequi harum! Architecto cum atque dolore, minima sed itaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, officiis.</P>
<div>
<h1>$999</h1>
<button>PRE-ORDER NOW</button>
</div>
</div>
</div>
<!-- // left -->
<div class="cLeft">
<div class="back">
<img src="assets/back.png" alt="" id="circle">
<img width="80%" src="assets/kisspng-nike-air-max-sneakers-shoe-air-jordan-nike-air-max-plus-tn-tuned-air-men-amp-apos-s-prem-5b681c62644fb2.2960684115335496664109-removebg-preview.png" alt="" id="nike">
</div>
</div>
</div>
<!-- //footer -->
<footer>
<div>
<i class="ri-play-circle-line"></i>
<p>WATCH PREVIEW</p>
</div>
</footer>
</div>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: gilroy;
}
html,body{
width: 100%;
height: 100%;
background:radial-gradient(rgba(255, 85, 0, 0.769),black);
}
#main{
width: 100%;
height: 100%;
}
#nav{
width: 90%;
height: 10vh;
justify-content: space-between;
align-items: center;
display: flex;
margin-left: 5%;
}
#nav img{
width: 5%;
}
#nav div{
display: flex;
justify-content: space-between;
align-items: center;
width: 30%;
}
#nav div a{
text-decoration: none;
color: white;
font-size: 14px;
font-weight: 600;
}#nav div a:hover{
text-decoration: underline;
color: white;
font-size: 14px;
font-weight: 600;
}
#nav i{
font-size: 1.5rem;
color: white;
}
#center{
width: 100%;
height: 80vh;
/* background-color: aliceblue; */
display: flex;
justify-content: space-between;
gap: 1px;
}
#center .cLeft{
width: 50%;
height: 100%;
/* background-color: aquamarine; */
}
#center .cLeft .content{
margin-top: 15%;
margin-left: 10%;
width: 50%;
}
#center .cLeft .content h1{
font-size: 3rem;
color: white;
font-weight: 700;
}
#center .cLeft .content h2{
font-size: 1.5rem;
color: rgb(226, 68, 0);
font-weight: 700;
margin-top: 10px;
}
#center .cLeft .content h3{
font-size: 0.8rem;
color: rgb(217, 217, 217);
font-weight: 700;
margin-top:20px;
}
#center .cLeft .content p{
font-size: 0.8rem;
color: rgb(147, 147, 147);
font-weight: 600;
margin-top: 10px;
}
#center .cLeft .content div{
display: flex;
justify-content: space-between;
width: 80%;
align-items:center;
margin-top: 30px;
}
#center .cLeft .content div h1{
font-size: 35px;
font-weight: 600;
letter-spacing: 3px;
}
#center .cLeft .content div button{
background: linear-gradient(230deg,rgb(255, 102, 0),rgb(231, 165, 129));
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: 5s;
color: aliceblue;
font-size: 16px;
font-weight: 600;
}#center .cLeft .content div button:hover{
background: linear-gradient(230deg,rgb(231, 165, 129),rgb(255, 102, 0));
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: 5s;
color: aliceblue;
}
#center .cLeft .back{
margin-top: 7%;
width: 100%;
/* margin-left: 10%; */
position: relative;
}
#center .cLeft .back img{
position: absolute;
}
#circle{
animation: ki 3s linear infinite;
}
@keyframes ki{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#center .cLeft .back #nike{
margin-top: 13%;
transform: rotate(340deg);
margin-left: -10%;
}
#center .cLeft .back #nike:hover{
margin-top: 13%;
transform: rotate(30deg);
margin-left: -10%;
}
footer{
width: 100%;
justify-content: space-between;
align-items: center;
text-align: center;
display: flex;
height:10vh;
/* background-color: aqua; */
}
footer div{
display: flex;
margin: auto;
align-items:center;
color:wheat;
}
footer div i{
font-size: 30px;
text-shadow: 0 0 20px black;
}
footer div p{
width: 10px;
font-weight: 600;
text-align: center;
text-shadow: 0 0 20px black;
margin-left: 10px;
}
output: -
Post a Comment