Unlock the potential of web design with our free source code for creating a stunning shoe website page using HTML and CSS. Ideal for beginners and professionals, our step-by-step guide helps you craft a responsive and stylish landing page. Ensure your website stands out in the crowded digital landscape with our easy-to-follow tutorial. Download the free source code and start designing a captivating shoes website page and portfolio website and gaming website too which showcases your collection beautifully. Enhance your web development skills with our resources, perfect for building or refining a shoes website page..
Step by Step Guide to Creating a Shoes Website Page
Step 1: Setting Up the Basic HTML Structure of Shoes Website
Begin by creating a new HTML train( e.g., index.html) and also set up the introductory structure of your HTML document of shoes website.
<!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 Store</title>
</head>
<body>
</body>
</html>
Step 2: Let’s Create the Navigation Bar
Next, produce the navigation bar. This includes a logo with some navigation links.
<nav>
<div class="container">
<div class="logo">
<img src="NikeLogoPNGImage.png" alt="Nike Logo">
</div>
<div class="links">
<a href="">MEN</a>
<a href="">WOMEN</a>
<a href="">KIDS</a>
<a href="">CUSTOMIZE</a>
<a href="">COLLECTIONS</a>
</div>
<div class="search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</nav>
Step 3: Now focus on the Main Content Section
Now, produce the main content section, which includes headlines, a paragraph describing the product
<section>
<div class="content">
<div class="main-content">
<h1 data-aos="fade-right" data-aos-duration="2000">Nike</h1>
<h2 data-aos="fade-left" data-aos-duration="2000" data-aos-delay="200">Air Max Plus</h2>
<h4 data-aos="fade-right" data-aos-duration="2000" data-aos-delay="400">MAKE THE GROUND SHAKE</h4>
<p data-aos="flip-down" data-aos-duration="2000" data-aos-delay="600">
Let the attitude have the edge in your Nike Air Max Plus, a Tuned Air experience that offers premium stability and unbelievable cushioning. Featuring the OG's wavy design lines, TPU accents, and airy mesh on the upper, it celebrates defiant style.
</p>
<div class="order">
<h3 data-aos="zoom-in-right" data-aos-duration="2000" data-aos-delay="800">$249.99</h3>
<button data-aos="zoom-in-left" data-aos-duration="2000" data-aos-delay="800">PRE-ORDER NOW</button>
</div>
</div>
<div class="image">
<img src="shoes.png" data-aos="zoom-in" data-aos-duration="2000">
</div>
</div>
</section>
Step 4: Adding Animation with AOS
To add Animation to your website, include the AOS( Animation On Scroll) library. Initialize AOS in a script at the bottom above you close body tag.
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
offset: 1
});
</script>
Step 5: Final HTML Structure of the Website
Here the complete HTML structure of the Shoes Website
<!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 Store</title>
</head>
<body>
<nav>
<div class="container">
<div class="logo">
<img src="NikeLogoPNGImage.png" alt="Nike Logo">
</div>
<div class="links">
<a href="">MEN</a>
<a href="">WOMEN</a>
<a href="">KIDS</a>
<a href="">CUSTOMIZE</a>
<a href="">COLLECTIONS</a>
</div>
<div class="search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</nav>
<section>
<div class="content">
<div class="main-content">
<h1 data-aos="fade-right" data-aos-duration="2000">Nike</h1>
<h2 data-aos="fade-left" data-aos-duration="2000" data-aos-delay="200">Air Max Plus</h2>
<h4 data-aos="fade-right" data-aos-duration="2000" data-aos-delay="400">MAKE THE GROUND SHAKE</h4>
<p data-aos="flip-down" data-aos-duration="2000" data-aos-delay="600">
Let the attitude have the edge in your Nike Air Max Plus, a Tuned Air experience that offers premium stability and unbelievable cushioning. Featuring the OG's wavy design lines, TPU accents, and airy mesh on the upper, it celebrates defiant style.
</p>
<div class="order">
<h3 data-aos="zoom-in-right" data-aos-duration="2000" data-aos-delay="800">$249.99</h3>
<button data-aos="zoom-in-left" data-aos-duration="2000" data-aos-delay="800">PRE-ORDER NOW</button>
</div>
</div>
<div class="image">
<img src="shoes.png" data-aos="zoom-in" data-aos-duration="2000">
</div>
</div>
</section>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
offset: 1
});
</script>
</body>
</html>
Adding CSS to Style the Shoes Website page
the CSS law to enhance its appearance and insure responsiveness Creating a website is now easier than ever with our free source code
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
*{
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
overflow-x: hidden;
background-color: black;
}
nav{
width: 100%;
height: 10vh;
}
.container{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .logo img{
margin-left: 20px;
width: 100px;
filter: drop-shadow(2px 2px 2px white);
}
.container .links a{
color: white;
text-decoration: none;
cursor: pointer;
position: relative;
margin: 0 20px;
transition: 0.3s linear;
}
.links a::before{
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
background-color: #f74f10;
height: 3.5px;
transition: 0.3s linear;
}
.links a:hover::before,
.links a:hover{
color: #f74f10;
width: 100%;
}
.container .search i{
color: white;
cursor: pointer;
font-size: 1.3rem;
margin-right: 20px;
}
/* Section Starts */
section{
width: 100%;
height: 90vh;
}
section .content{
display: flex;
width: 100%;
height: 100%;
justify-content: space-around;
align-items: center;
}
.content .main-content{
color: white;
max-width: 600px;
width: 100%;
margin: 0 auto;
}
.main-content h1{
font-size: clamp(2rem, 1rem + 5vw, 4rem);
}
.main-content h2{
color: #f74f10;
font-size: clamp(2rem, 1rem + 5vw, 3.5rem);
}
.main-content p{
margin-top: 10px;
color: #635e5c;
}
.main-content .order{
display: flex;
margin: 20px 10px;
width: 100%;
justify-content: space-around;
min-height: 7vh;
}
.order h3{
font-size: 1.8rem;
}
.order button{
min-width: 50%;
margin-left: 10px;
border: none;
outline: none;
border-radius: 10px;
background: linear-gradient(to bottom right, #f74f10 40%, #8a3313) ;
color: white;
font-weight: 700;
padding: 0 2px;
font-size: clamp(0.6rem, 1rem 5vw, 3rem);
transition: 0.1s linear;
}
.order button:hover{
box-shadow: 0 0 30px #f74f10;
background: linear-gradient(to bottom right, #8a3313 , #f74f10 40%) ;
}
.content .image img{
max-width: 450px;
width: 100%;
margin-right: 100px;
transform: rotate(40deg) translateX(900px);
filter: drop-shadow(-10px -10px 200px #f74f10);
}
@media (max-width:800px){
.content{
display: flex;
width: 100%;
flex-direction: column-reverse;
}
.main-content{
margin: 0 10px;
}
}
@media (min-width:884px){
.content .image img{
min-width: 500px;
}
}
@media (max-width:440px){
.links{
display: none;
}
.content .image img{
width: 100%;
margin-right: none;
}
}
Conclusion
Begin your journey today by creating a website page that not only highlights your shoe collection in a stunning manner but also distinguishes itself in the bustling digital marketplace. Therefore, utilize our resources to guarantee that your website page is both visually captivating and highly efficient, putting you on the path to web design success. Download the free source code and start developing your ideal website immediately!