Shoes website using html and css - procoder09
Shoes Website Using HTML and CSS
.png)
Explore our selection of premium brands renowned for their quality craftsmanship and innovative designs. Whether you're seeking the latest trends or timeless classics, our website is your one-stop destination for all your shoe needs.
Browse through our user-friendly interface, where you can effortlessly search, filter, and compare styles to find the perfect fit. With detailed product descriptions, high-resolution images, and customer reviews, you can shop with confidence, knowing you're making an informed decision.
Experience the convenience of online shopping with our seamless checkout process and secure payment options. Plus, enjoy fast and reliable shipping to your doorstep, so you can start strutting in your new shoes in no time.
Watch Full Tutorial :-
Step 1: Set Up Your HTML Structure:
Begin by creating a new HTML file. You can use any code editor, such as Visual Studio Code or Sublime Text, to write your code. Here's a basic HTML structure to start with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css">
<title>Shoes Website</title>
</head>
<body>
<nav>
<div class="nav-container">
<div class="logo">
<img src="logo.png" alt="">
</div>
<div class="links">
<a href="">NEW RELEASES</a>
<a href="">MEN</a>
<a href="">WOMEN</a>
<a href="">KIDS</a>
<a href="">COLLECTIONS</a>
<i class="fa-brands fa-shopify"></i>
</div>
</div>
</nav>
<section>
<div class="main-container">
<div class="heading">
<h1 data-aos="fade-right" data-aos-duration="1500">NIKE</h1>
<span data-aos="fade-left" data-aos-duration="1500">AIRMAX 370</span>
</div>
<div class="star">
<i class="fa-solid fa-star" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="200"></i>
<i class="fa-solid fa-star" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="400"></i>
<i class="fa-solid fa-star" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="600"></i>
<i class="fa-solid fa-star" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="800"></i>
<i class="fa-regular fa-star" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="1000"></i>
</div>
<p data-aos="flip-down" data-aos-duration="1200" data-aos-delay="1300" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum molestiae corrupti repudiandae voluptas modi at unde animi explicabo illum cum aspernatur aut alias ipsum quos reiciendis, consequatur odio tempore quisquam?</p>
<span data-aos="fade-right" data-aos-duration="1200" data-aos-delay="1400">80/100</span>
<div class="sizes">
<div class="size" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1500">34</div>
<div class="size" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1600">37</div>
<div class="size" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1700">38</div>
<div class="size" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1800">39</div>
<div class="size" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="1900">40</div>
<div class="size" data-aos="fade-left" data-aos-duration="1500" data-aos-delay="2000">41</div>
</div>
<button data-aos="zoom-out" data-aos-duration="1500" data-aos-delay="1500">ADD TO CART</button>
<div class="shoes">
<div class="extra" data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="1600"><img src="extra1.png" alt=""></div>
<div class="extra" data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="1700"><img src="extra2.png" alt=""></div>
</div>
</div>
<div class="image">
<img src="main.png" data-aos="fade-left" data-aos-duration="3000">
</div>
</section>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
Step 2: Create a Stylesheet (CSS):
Now, create a CSS file (style.css) to style your login page. You can customize it to match Instagram's visual aesthetics. Below are some basic CSS styles to get you started:
*{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background-image:url(background.png) ;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
nav{
width: 100%;
height: 10vh;
}
nav .nav-container{
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-container .logo{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nav-container .logo img{
width: 120px;
height: 50px;
}
.nav-container .links a{
color: white;
text-decoration: none;
margin: 0 20px;
font-size: 1.2rem;
transition: 0.2s linear;
}
.nav-container .links a:hover{
color: #ff4a09;
}
.nav-container .links i{
color: white;
font-size: 1.7rem;
margin: 0 20px;
}
section{
width: 100%;
height: 90vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.main-container{
width: 35%;
color: white;
}
.main-container .heading{
display: flex;
align-items: top;
}
.heading h1{
font-size: clamp(1rem, 1rem + 5vw, 7rem);
}
.heading span{
margin-top: 10px;
margin-left: 10px;
font-size: clamp(1rem, 1rem + 5vw, 3rem);
}
.main-container .star{
color: #ff4a09;
font-size: 1.3rem;
margin: -5px 0 20px 0;
}
.main-container p{
width: 90%;
margin: 10px 0;
}
.main-container .sizes{
width: 70%;
height: 3vh;
margin: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.main-container .sizes div{
border: 3px solid #5e6c9c;
border-radius: 15px;
padding: 5px 15px;
cursor: pointer;
transition: 0.2s linear;
}
.main-container .sizes div:hover{
background-color: #5e6c9c;
border: 1px solid white;
}
.main-container button{
width: 50%;
height: 6vh;
margin: 20px 0;
font-size: 1.3rem;
font-weight: 700;
border-radius: 20px;
border: 3px solid #ff4a09;
background-color: transparent;
color: #ff4a09;
transition: 0.2s linear;
}
.main-container button:hover{
background-color: #ff4a09;
color: white;
box-shadow: 0 0 10px 1px #ff4a09;
}
.main-container .shoes{
width: 50%;
display: flex;
justify-content: space-around;
align-items: center;
}
.shoes .extra img{
width: 100px;
transform: rotate(-30deg);
filter: drop-shadow(2px 2px 10px white);
transition: 0.2s linear;
}
.shoes .extra img:hover{
scale: 1.2;
}
.image img{
width: 700px;
filter: drop-shadow(0 0 200px white);
}
.png)
.png)
nice
ReplyDeletenice
ReplyDelete