Hello dear developers, In today's blog, we'll see how to make an exclusive Product landing page using HTML CSS & JavaScript for your website.
Making a landing page with HTML & CSS is pretty easy & simple task, but did you know what makes our post more exclusive ! Okay will discuss it…
But Before that, For demo with code tutorial. You can watch the video below.
Code Tutorial
If you want to see more web design tutorial just like these ! Please consider out YT Channel.
So, without wasting more time let's see how to code this.
Source Code for this Post is available on github with all images and much more so please visit the below given link to get source code
Starting with the first will require basically 3 files only including : index.html, style.css & main.js .
So after creating these files in your favorite code editor let, jump into making some HTML reset in our CSS file by considering Root elements as well.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body{
height: 100vh;
width: 100%;
overflow: hidden;
}
ul li {
list-style-type: none;
}
a {
text-decoration: none;
}
button{
cursor: pointer;
outline: none;
border: none;
}
So after resetting the HTML let's jump into making our beautiful grid Layout based Wrapper with its children components container's :
1st Making Structure with HTML
<section class="wrapper">
<! ---- LEFT-CONTAINER --->
<main class="left_container">
</main>
<! ---- RIGHT-CONTAINER --->
<main class="right_container">
</main>
</section>
2nd Adding Style in it with CSS
.wrapper{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 65% 35%;
}
.left_container{
width: 100%;
background-color: #EDF3F8;
height: 100%;
z-index: 1;
}
.right_container{
width: 100%;
height: 100%;
background-color: #B6E2F8;
z-index: 10;
}
Output from the above code ! Great we are making Only Progress !!!
So Now starting with our Left Container, in which we have various children's carrying different tags and info about our landing page.
So let's quickly at first we will cover all the HTML & CSS Part for our Left Container then will look for our Right Container....
HTML for Left Container
<div class="left_container">
<nav>
<div class="logo_content">
<img src="./logo.png" alt="logo" class="nike_logo">
</div>
<ul class="nav_content">
<li><a class="nav_links active" href="javascript:void(0)">man</a></li>
<li><a class="nav_links" href="javascript:void(0)">women</a></li>
<li><a class="nav_links" href="javascript:void(0)">kids</a></li>
<li><a class="nav_links" href="javascript:void(0)">customize</a></li>
</ul>
</nav>
<br>
<main class="tools">
<div class="search">
<input type="text" class="search_input" placeholder="Search here....">
<button class="search_btn">
<div class="slider">
<i class="ri-search-line"></i>
</div>
</button>
</div>
<div class="discount">
<span class="discount_percentage">60%</span>
<div class="seprator"></div>
<span class="save_up">save up to</span>
</div>
</main>
<section>
<main class="brand_type">
<div class="large_text">
<h2>stylist <br>sneakers</h2>
</div>
<div class="sliders">
<button class="slider_btn" disabled>
<i class="ri-arrow-left-s-line"></i>
</button>
<button class="slider_btn">
<i class="ri-arrow-right-s-line"></i>
</button>
</div>
</main>
</section>
<br>
<section class="bottom_shoes_slider">
<ul class="bottom_shoes_card">
<li class="card_shoe">
<div class="shoe_content">
<img src="./shoe_img/nike-air-force.png" alt="nike-air-force" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">nike air force</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: #c93849;">
<img src="./shoe_img/nike-air-force-1-high.png" alt="nike-air-force-1-high" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: #c93849;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">air force 1 high</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: #78787C;">
<img src="./shoe_img/air-max-270.png" alt="air-max-270" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: #78787C;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">air max 270</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: black;">
<img src="./shoe_img/air-max-excee-.png" alt="air-max-excee-" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: black;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">air max excee</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
<li class="card_shoe">
<div class="shoe_content" style="background-color: #959ebd;">
<img src="./shoe_img/nike-span-2.png" alt="nike-span-2" class="shoe">
</div>
<div class="desc_product">
<div class="transparent_bg">
<div class="add_to_cart" style="background-color: #959ebd;">
<i class="ri-add-line"></i>
</div>
</div>
<div class="desc">
<span class="card_product_name">nike span 2</span>
<span>3 colors</span>
<span class="price"><i class="ri-money-euro-circle-line"></i> 230.00</span>
</div>
</div>
</li>
</ul>
</section>
</div>
CSS for Left Container
nav{
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.logo_content{
width: 100px;
height: 100px;
}
.logo_content .nike_logo{
width: 100%;
height: 100%;
object-fit: cover;
}
.nav_content{
display: flex;
}
.nav_content .nav_links{
padding: 0 20px;
color: rgb(99, 99, 99);
text-transform: capitalize;
font-size: 16px;
letter-spacing: 0.5px;
transition: 0.5s;
}
.nav_links:hover{
color: black;
}
.nav_links.active{
color: black;
font-weight: 600;
}
.tools{
margin-top: 1rem;
width: 100%;
height: 90px;
display: flex;
align-items: center;
justify-content: space-between;
}
.search{
display: flex;
}
.search_input{
width: 299px;
height: 47px;
border-radius: 7px;
border: none;
padding-left: 12px;
font-size: 16px;
margin-left: 2.5rem;
margin-right: -1.1rem;
outline: none;
}
.search_btn{
width: 45px;
height: 45px;
border-radius: 7px;
border: none;
padding-left: 12px;
font-size: 16px;
background-color: black;
}
.slider{
margin-left: -0.8rem;
margin-top: .2rem;
text-align: center;
overflow: hidden;
}
.slider i{
color: white;
font-size: 18px;
}
.discount{
display: flex;
flex-direction: column;
position: relative;
}
.discount_percentage{
font-size: 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-bottom: 2px;
width: 100px;
}
.seprator{
width: 100%;
height: 2px;
background-color: black;
position: relative;
}
.seprator::before{
content: "";
position: absolute;
top: -3px;
left: -2px;
background-color: black;
width: 7px;
height: 7px;
border-radius: 50%;
}
.save_up{
font-size: 12px;
color: black;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 7px;
}
.brand_type{
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
padding: 2rem;
}
.sliders{
margin-top: 5rem;
}
.large_text{
font-size: 50px;
text-transform: capitalize;
letter-spacing: 0.5px;
text-shadow: 4px 10px #d6eefc;
line-height: 1;
}
.slider_btn{
width: 35px;
height: 35px;
border-radius: 50%;
outline: none;
border: 1px solid gray;
background-color: transparent;
cursor: pointer;
}
.slider_btn i {
font-size: 22px;
}
.bottom_shoes_slider{
width: 940px;
height: 200px;
position: absolute;
right: 30%;
z-index: -1;
margin-top: 1rem;
}
.bottom_shoes_card{
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
}
.card_shoe{
width: 150px;
height: 200px;
max-height: 100%;
border-radius: 20px;
box-shadow: 1px 0px 19px 2px rgba(202, 202, 202, 1);
}
.shoe_content{
width: 150px;
height: 100px;
position: relative;
background-color: #f5ddc9;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.shoe_content .shoe{
width: 100%;
height: 111px;
object-fit: cover;
transform: rotate(-25deg);
position: absolute;
top: -2.5rem;
right: 1rem;
overflow: hidden;
filter: drop-shadow(2px 2px 0.10rem rgb(82,82,82));
}
.desc_product{
width: 98.5%;
min-height: 50%;
background-color: white;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
justify-content: center;
position: relative;
}
.transparent_bg{
content: "";
position: absolute;
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
top: -13.6px;
}
.add_to_cart{
width: 20px;
height: 20px;
background-color: #f5ddc9;
border-radius: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.add_to_cart i {
color: white;
font-size: 12px;
margin-top: 2px;
}
.desc{
margin-top: 0.50rem;
z-index: 100;
position: absolute;
top: 20%;
text-align: center;
}
.card_product_name
{
font-size: 15px;
text-transform: uppercase;
font-family: 'Poppins';
letter-spacing: 0.5px;
display: block;
font-weight: 600;
}
.desc > span:nth-child(2){
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
color: gray;
}
.price{
font-size: 16px;
text-transform: uppercase;
font-family: 'Poppins';
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
}
.price i{
margin-right: 3px;
color: gray;
}
Result of the Left Container
I know it is some how going fast but if you want to see the step tuorial on youtube whose link is at starting of this post !
Now Right Container to end with HTML & CSS Part
HTML For Right Container
<main class="right_container">
<nav class="right_nav">
<ul class="right_nav_content">
<li class="r_nav_links">
model : ck5828-400
</li>
<button class="cart_btn"><i class="ri-shopping-bag-fill"></i></button>
</ul>
</nav>
<section class="selected_product">
<div class="circle1">
<div class="icon_">
<i class="ri-add-line"></i>
<div class="product_tag">
<p class="offer1">99%</p>
<p>comfortable</p>
</div>
</div>
</div>
<div class="circle2">
<div class="icon_">
<i class="ri-add-line"></i>
<div class="product_tag">
<p class="offer2">rare high percentage</p>
</div>
</div>
</div>
<div class="selected_product_content">
<img src="./shoe_img/air-max-90.png" alt="nike-air-max-90" class="selected_product_img">
</div>
<div class="size_product">
<main class="content">
<ul class="size_list">
<li class="size_item">
<span>39</span>
</li>
<li class="size_item">
<span>40</span>
</li>
<li class="size_item">
<span>41</span>
</li>
<li class="size_item">
<span>42</span>
</li>
<li class="size_item">
<span>43</span>
</li>
</ul> <br><br>
<div class="text">
<h3 class="selected_product_text">nike air max 90</h3>
</div>
<div class="reviews">
<span>reviews 1k+</span>
<ul class="stars_list">
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
<li><i class="ri-star-fill"></i></li>
</ul>
</div>
</main>
</div>
</section>
</main>
CSS For Right Container
.right_nav_content{
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.r_nav_links{
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
}
.cart_btn{
width: 40px;
height: 40px;
background-color: black;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cart_btn i {
color:white;
font-size: 20px;
}
.selected_product{
width: 100%;
height: 380px;
position: relative;
}
.selected_product_content{
width: 100%;
height: 380px;
padding: 1rem;
position: relative;
}
.selected_product_img{
width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
transform: rotate(-25deg);
position: absolute;
top: -3rem;
right: 1.5rem;
}
.size_product{
width: 100%;
min-height: 210px;
background-color: black;
}
.content{
width: 100%;
height: 100%;
padding: 2rem;
}
.text{
width: 100%;
height: 50px;
display: flex;
align-items: center;
margin-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgb(92, 92, 92);
}
.selected_product_text{
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 28px;
}
.size_list{
color: rgb(155, 155, 155);
list-style: none;
display: flex;
justify-content: space-between;
}
.size_item{
font-size: 17px;
}
.size_item:nth-child(3){
transform: translateY(-1rem);
color: #eee;
font-size: 20px;
position: relative;
}
.size_item:nth-child(3)::after{
content: "";
position: absolute;
top: 3rem;
right: 0.1rem;
font-size: 10px;
width: 10px;
height: 10px;
background-color: #eee;
border-radius: 50%;
}
.reviews{
margin-top: 0.5rem;
width: 100%;
padding: 10px;
height: fit-content;
display: flex;
align-items: center;
justify-content: space-between;
}
.reviews span{
text-transform: capitalize;
color: rgb(209, 209, 209);
letter-spacing: 1px;
}
.stars_list{
display: flex;
}
.stars_list li i{
color: rgba(223, 223, 2, 0.89);
font-size: 15px;
padding: 0 5px;
}
.circle1, .circle2{
position: absolute;
width: 40px;
height: 40px;
background-color: #fffafa2c;
border-radius: 50%;
border: 2px;
border-style: solid;
border-color: #eee;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.circle1{
left: 144px;
top: 65%;
}
.circle2{
right: 100px;
top: 25%;
}
.icon_{
width: 15px;
height: 15px;
background-color:white;
border-radius: 50%;
position: relative;
}
.icon_ i{
font-size: 15px;
}
.circle1 .product_tag, .circle2 .product_tag{
width: 100px;
height: 60px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.37);
position: absolute;
bottom: 35px;
right: -2.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product_tag p:nth-child(1){
color: white;
}
.product_tag p:nth-child(2){
font-size: 13.5px;
color: #eee;
text-transform: capitalize;
}
.offer2{
display: block;
text-align: center;
font-size: 13px;
text-transform: capitalize;
color: #eee;
}
Result of Right Container
So here you are thinking we are done but not yet, remember we started this post as keyword Exclusive, so that's time for it..
So inorder to make website more desirable we implements some fancy animations so again in this post we are using The one of the Powerful animation Library for JS animations is GSAP
GSAP is free and very simple & easy to use, you may can userstand more on this by visiting their website, but for this post we are using the CDN ( Content Delivery Network) from cdnjs.com
<!-- ==== GSAP CDN ==== -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
So in our main.js we write below given scripts to implement those animations :
gsap.from('nav', {opacity:0, delay:1.6, duration:2.5, ease: "elastic.out(1,0.3)", y:-100});
gsap.from('.search', {opacity:0, delay:1.8, duration:2.8, ease: "elastic.out(1,0.3)", y:-100});
gsap.from('.brand_type', {opacity:0, delay:2.2, duration:3, ease: "elastic.out(1,0.3)", y:-100});
gsap.from('.discount', {opacity:0, delay:1, scale:.1, duration:2.4, rotation:180,
ease: "expo.inOut", x:100});
gsap.from('.bottom_shoes_card', {opacity:0, delay:2.6, duration:3.5, ease: "elastic.out(1,0.3)", x:100});
gsap.from('.selected_product_img', {opacity:0, delay:3, duration:4, ease:"elastic.out(1,0.3)", y:100});
gsap.from('.size_product', {opacity:0, delay:3.5, duration:0.5, ease:"Expo.In", y:100});
gsap.from('.circle1', {opacity:0, delay:4.5, scale:.1, duration:.7, ease:"expo.In"});
gsap.from('.circle2', {opacity:0, delay:4.8, scale:.1, duration:.7, ease:"expo.In"});
Overall End Result
Final Words :
Thank you so much watching my post ! Please consider subscribing it motivates making more content just like these...
Happy Coding !!!!!!
Top comments (12)
This right here tells me you haven't completely given your soul to the grid 😆
You don't need to (nor should you 😖) set the width and height on the children; the grid should set a default for how the elements are aligned and stretched within.
This is how I'd do it instead:
😉
That's a great change ! Thanks a lot for enriching my knowledge as well...
Happy Coding 🙏🏻
My only issue with this awesomeness is that there is sooooo much movement. It's distracting. Make sure you add the ability to turn off or minimize movement for prefers-reduced-motion.
Yuppp ! Got it sir, will make it more smooth but thanks for watching 🙏🏻
Happy Coding 🤓
Looks insanely awesome, may I ask does it scale well on mobile view?
Not yet sir ! But I will work on it to make it responsive. Thank for watching 🙂
Nice! One small thing, according to html spec you should only have one < main > element in an HTML document. You could move the main tag higher up and use < article > tags instead where you have main
Yup I knew it ! But to keep all the tags differently so I used it..
But thank u for enriching my knowledge 👍
Happy coding 🙂
Bro, link live-preview of the site.
Yes Sir, Extremly Sorry ! But not yet decided to make it live, beacause webpage isn't mobile first for now...
Nice work
Thank you sir ! If you want to see more coding tutorial's please check out channel link in the top of the post.
Happy coding 🤓