DEV Community

Cover image for Create an Exclusive Product Landing Page using HTML CSS & JS
Aniket
Aniket

Posted on • Edited on

Create an Exclusive Product Landing Page using HTML CSS & JS

#html #css #javascript #webdev

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 !!!!!!

Top comments (12)

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ • • Edited 
.right_container {
    width: 100%;
    height: 100%;
    /* ... */
}
Enter fullscreen mode Exit fullscreen mode

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:

.wrapper {
   display: grid;
   place-items: stretch;
   place-items: stretch;
   /* ... */
}
Enter fullscreen mode Exit fullscreen mode

πŸ˜‰

Collapse
 
ananiket profile image
Aniket •

That's a great change ! Thanks a lot for enriching my knowledge as well...

Happy Coding πŸ™πŸ»

Collapse
 
shikkaba profile image
Me •

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.

Collapse
 
ananiket profile image
Aniket •

Yuppp ! Got it sir, will make it more smooth but thanks for watching πŸ™πŸ»

Happy Coding πŸ€“

Collapse
 
diegojeptha profile image
Diego •

Looks insanely awesome, may I ask does it scale well on mobile view?

Collapse
 
ananiket profile image
Aniket •

Not yet sir ! But I will work on it to make it responsive. Thank for watching πŸ™‚

Collapse
 
dillonheadley profile image
Dillon Headley • • Edited

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

Collapse
 
ananiket profile image
Aniket •

Yup I knew it ! But to keep all the tags differently so I used it..

But thank u for enriching my knowledge πŸ‘
Happy coding πŸ™‚

Collapse
 
craftogrammer profile image
Rahul •

Bro, link live-preview of the site.

Collapse
 
ananiket profile image
Aniket •

Yes Sir, Extremly Sorry ! But not yet decided to make it live, beacause webpage isn't mobile first for now...

Collapse
 
obaino82 profile image
Obaino82 •

Nice work

Collapse
 
ananiket profile image
Aniket •

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 πŸ€“

View full discussion (12 comments)

Read next

shieldstring profile image

Vite + React app MIME error when reloading the page

Agbo, Daniel Onuoha -

keploy profile image

JSON Diff: Comparing JSON Data Effectively

keploy -

husniddin6939 profile image

Vue JS props

Husniddin6939 -

parthprajapatispan profile image

TypeScript vs. JavaScript: Which One Is Better?

Parth -