TheLazy.Dev
Portfolio GitHub

Blog

html |css |javascript |webdev

Create an Exclusive Product Landing Page using HTML CSS & JS

ananiket

Aniket

Posted on September 1, 2021

Create an Exclusive Product Landing Page using HTML CSS & JS

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

Source Code Link

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Output from the above code ! Great we are making Only Progress !!!

Base

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
Result of the Left Container

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>
Enter fullscreen mode Exit fullscreen mode
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;
}
Enter fullscreen mode Exit fullscreen mode
Result of Right Container

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>
Enter fullscreen mode Exit fullscreen mode

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"});
Enter fullscreen mode Exit fullscreen mode

Overall End Result

final

Final Words :
Thank you so much watching my post ! Please consider subscribing it motivates making more content just like these...

Happy Coding !!!!!!

💖 💪 🙅 🚩
ananiket
Aniket

Posted on September 1, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier
html HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier

November 25, 2024

Deploying Your First Full-Stack Application with Vercel and Heroku
html Deploying Your First Full-Stack Application with Vercel and Heroku

November 21, 2024

Contact us page in HTML and CSS
html Contact us page in HTML and CSS

November 7, 2024

Modern HTML5 Boilerplate
html Modern HTML5 Boilerplate

November 2, 2024

Social Media Icons with Hover Effects Using HTML and CSS
html Social Media Icons with Hover Effects Using HTML and CSS

September 24, 2024