This content originally appeared on DEV Community and was authored by Aniket
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 an 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.
Starting with the first will require basically 3 files only including : index.html, style.css & main.js .
So after creating these files in your favourite 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 reseting the HTML let's jump into making our beautiful grid Layout based Wrapper with its childern componets 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 childern's carrying diffrent 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
Last Words :
Thank you so much watching my post ! Please consider subscribing it motivates making more content just like these...
This content originally appeared on DEV Community and was authored by Aniket
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Aniket | Sciencx (2021-09-01T13:05:40+00:00) Create an Exclusive Product Landing Page using HTML CSS & JS. Retrieved from https://www.scien.cx/2021/09/01/create-an-exclusive-product-landing-page-using-html-css-js/
" » Create an Exclusive Product Landing Page using HTML CSS & JS." Aniket | Sciencx - Wednesday September 1, 2021, https://www.scien.cx/2021/09/01/create-an-exclusive-product-landing-page-using-html-css-js/
HARVARDAniket | Sciencx Wednesday September 1, 2021 » Create an Exclusive Product Landing Page using HTML CSS & JS., viewed ,<https://www.scien.cx/2021/09/01/create-an-exclusive-product-landing-page-using-html-css-js/>
VANCOUVERAniket | Sciencx - » Create an Exclusive Product Landing Page using HTML CSS & JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/01/create-an-exclusive-product-landing-page-using-html-css-js/
CHICAGO" » Create an Exclusive Product Landing Page using HTML CSS & JS." Aniket | Sciencx - Accessed . https://www.scien.cx/2021/09/01/create-an-exclusive-product-landing-page-using-html-css-js/
IEEE" » Create an Exclusive Product Landing Page using HTML CSS & JS." Aniket | Sciencx [Online]. Available: https://www.scien.cx/2021/09/01/create-an-exclusive-product-landing-page-using-html-css-js/. [Accessed: ]
rf:citation » Create an Exclusive Product Landing Page using HTML CSS & JS | Aniket | Sciencx | https://www.scien.cx/2021/09/01/create-an-exclusive-product-landing-page-using-html-css-js/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.