Beauty Product's Website Using HTML CSS And JS

Ecommerce Beauty Product Website Using HTML CSS And JS

How To Create A Multi Pages Ecommerce Cosmetic Website Using HTML CSS And JS

If you want to learn how to create Store Website Using HTML and CSS, then you are Ecommerce Cosmetic Website Using HTML CSS And JS. This website is fully Responsive and has all browser compatibility.

I used HTML, CSS, and JavaScript to create this Cosmetic Website. If you follow this tutorial step by step, you will be able to make this Awesome Website Using HTML and CSS.

I have more than Four years experience in Frontend(HTML, CSS, and JS). I promise you, I will try to provide you best way to create Store Website Using HTML and CSS.

Create A Beauty Product Website Using HTML CSS And JS

Home HTML Code


   <!--DOCTYPE html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--==title======================-->
    <title>Beauty Website HTML</title>
    <!--==CSS========================-->
    <link rel="stylesheet" href="css/style.css"/>
    <!--==fav-icon===================-->
    <link rel="shortcut icon" href="images/fav-icon.png"/>
    <!--==import-poppins-font========-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <!--==Font-Awesome-for-icons=====-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>

    <!--==navigation=======================-->
    <nav class="navigation">

        <!--**logo*****************-->
        <a href="index.html" class="logo">
            <img alt="" src="images/logo.png">
        </a>
        <!--**search***************-->
        <form class="search-box">
            <input type="text" placeholder="Search Product's Here" required/>
            <button>
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </form>
        <!--**btns*****************-->
        <div class="nav-btns">
            <a href="#" class="nav-user">
                <i class="fa-regular fa-user"></i>
            </a>
            <a href="#" class="nav-cart">
                <i class="fa-solid fa-cart-shopping"></i>
            </a>
        </div>

    </nav>


    <!--==main==========================-->
    <section id="main">
        
        <!--**text*****************-->
        <div class="main-text">
            <span>New Collection</span>
            <h1>Ecommerce <font>Beauty Product's Website</font> Using HTML, CSS, and JavaScript.</h1>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae facere doloribus similique aliquid, non deleniti eum aut. Doloremque mollitia est quos nobis deleniti! Asperiores, soluta laboriosam facere modi expedita fugiat.</p>
            <a href="#">Shop Now</a>
        </div>
        <!--**img******************-->
        <div class="main-img">
            <img alt="Main Img" src="images/main.png">
        </div>

    </section>


    <!--==product-grid-3=======================-->
    <section class="product-grid-3">

        <!--**box*************-->
        <div class="product-grid-box product-grid-box1">
            <!--img-->
            <img src="images/s1.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>Natural Green Lotion</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

        <!--**box*************-->
        <div class="product-grid-box product-grid-box2">
            <!--img-->
            <img src="images/s2.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>3 in 1 Novage Lotion's</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

        <!--**box*************-->
        <div class="product-grid-box product-grid-box3">
            <!--img-->
            <img src="images/s3.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>Gold FaceWash & Perfume</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

    </section>


    <!--==New-Products-->
    <section id="new_products">

        <!--**heading*********************-->
        <div class="new-p-heading">
            <!--heading-->
            <h3>New Product's</h3>
            <!--filter-->
            <ul>
                <li class="filter-list active" data-filter="all">All</li>
                <li class="filter-list" data-filter="skin">Skin</li>
                <li class="filter-list" data-filter="mackup">Mackup</li>
                <li class="filter-list" data-filter="nail">Nail's</li>
            </ul>
        </div>

        <!--**container******************-->
        <div class="new-product-container">

            <!--**box**-->
            <div class="new-product-box-wrapper skin">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Skin</span>
                    <img src="images/n1.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">FaceWash For Women</a>
                    <span>20$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->

            <!--**box**-->
            <div class="new-product-box-wrapper skin">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <img src="images/n2.png" />
                    <span>Skin</span>
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Element Small FaceWash</a>
                    <span>10$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->

            <!--**box**-->
            <div class="new-product-box-wrapper nail">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Nail</span>
                    <img src="images/n3.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Blue Fake Nail's For Women</a>
                    <span>25$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->

            <!--**box**-->
            <div class="new-product-box-wrapper nail">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Nail</span>
                    <img src="images/n4.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Shiny Red Nail Polish</a>
                    <span>21$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->

            <!--**box**-->
            <div class="new-product-box-wrapper mackup">
            <div class="new-product-box">
                <!--img-->
                <a href="product_page.html" class="new-product-img">
                    <span>Mackup</span>
                    <img src="images/n5.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="product_page.html" class="new-product-title">Set of Bridel Eye Lashies</a>
                    <span>11$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->

            <!--**box**-->
            <div class="new-product-box-wrapper nail">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Nail</span>
                    <img src="images/n6.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Nail Polish For Women</a>
                    <span>12$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->

            <!--**box**-->
            <div class="new-product-box-wrapper mackup">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Mackup</span>
                    <img src="images/n7.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Permanent Lipstick</a>
                    <span>30$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->


            <!--**box**-->
            <div class="new-product-box-wrapper skin">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Skin</span>
                    <img src="images/n8.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Women's FaceWash</a>
                    <span>14$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->

            <!--**box**-->
            <div class="new-product-box-wrapper skin">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Skin</span>
                    <img src="images/n9.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Skin Car Lotion For Women</a>
                    <span>9$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->


            <!--**box**-->
            <div class="new-product-box-wrapper mackup">
            <div class="new-product-box">
                <!--img-->
                <a href="#" class="new-product-img">
                    <span>Mackup</span>
                    <img src="images/n10.png" />
                </a>
                <!--text-->
                <div class="new-product-text">
                    <a href="#" class="new-product-title">Face Powder For Women</a>
                    <span>8$</span>
                    <a href="#" class="new-p-cart-btn">Add To Cart</a>
                </div>
            </div>
            </div><!--end-box-->
        
        </div><!--end-container-->

    </section>



    <!--==product-grid-1.5=======================-->
    <section class="product-grid-half">

        <!--**box*************-->
        <div class="product-grid-box product-grid-box2">
            <!--img-->
            <img src="images/h1.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>All Type of Mackup</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

        <!--**box*************-->
        <div class="product-grid-box product-grid-box1">
            <!--img-->
            <img src="images/s1.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>Natural Lotion</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

        <!--**box*************-->
        <div class="product-grid-box product-grid-box3">
            <!--img-->
            <img src="images/s3.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>Gold Natural Lotion</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

    </section>



    <!--==popular-products=============================-->
    <section id="popular-product">
        
        <!--**heading*******************-->
        <div class="popular-heading">
            <h3>Popular Product</h3>
            <a>All</a>
        </div>

        <!--**container****************-->
        <div class="popular-container">

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n1.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Hair Shampo For Heathly Hair For Women</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n2.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Natrually Created FaceWash For Women</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n3.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Girls Mix Blue Fake Nail's Avalibale For Buy</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n4.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Shiny Red Nail Polish For Women, Buy Now</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n5.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Bridle Eyes Lashies For Sell With 20% Discount</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n6.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Red Nail Polish For Women</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n7.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Women Red LipStick For Sell, Buy Now</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n8.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">FaceWash For Heathly Skin For Women</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n9.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Hair Shampo For Heathly Hair For Women</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n8.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">FaceWash For Heathly Skin For Women</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n1.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Hair Shampo For Heathly Hair For Women</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

            <!--**box**********-->
            <div class="popular-box">
                <!--img-->
                <a href="#" class="popular-box-img">
                    <img alt="" src="images/n3.png">
                </a>
                <!--text-->
                <div class="popular-box-text">
                    <a href="#">Mix Color Nail Polish Avalibale For Sell, Buy Now</a>
                    <span class="p-category">Hair Product's</span>
                    <span class="p-price">10$ <del>15$</del></span>
                </div>
            </div>

        </div>

    </section><!--popular-end-->


    <!--==Partnre-logo================================-->
    <section id="partner">

        <!--**heading****************-->
        <div class="partner-heading">
            <h3>Our Trusted Partner</h3>
        </div>

        <!--**logo-container*******-->
        <div class="logo-container">
            <img alt="logo" src="images/logo-1.png">
            <img alt="logo" src="images/logo-2.png">
            <img alt="logo" src="images/logo-3.png">
            <img alt="logo" src="images/logo-4.png">
        </div>

    </section>
    <!--**logo-section-end**-->

    <!--==product-grid-2=======================-->
    <section class="product-grid-2">

        <!--**box*************-->
        <div class="product-grid-box product-grid-box3">
            <!--img-->
            <img src="images/g1.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>Mackup Collection</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

        <!--**box*************-->
        <div class="product-grid-box product-grid-box2">
            <!--img-->
            <img src="images/g2.jpg" />
            <!--text-->
            <div class="product-grid-text">
                <strong>Discounted Product's</strong>
                <span>Skin Care Product</span>
                <a href="">Shop Now</a>
            </div>
        </div>

    </section>


    <footer>
        <div class="footer-container">
            <!--**comoany-box**-->
            <div class="footer-company-box">
                <!--logo-->
                <a href="#" class="footer-logo">Logo</a>
                <!--details-->
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quas neque repudiandae nihil.</p>
                <!--social-box-->
                <div class="footer-social">
                    <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    <a href="#"><i class="fa-brands fa-twitter"></i></a>
                    <a href="#"><i class="fa-brands fa-youtube"></i></a>
                </div>
            </div>
            <!--**link-box***-->
            <div class="footer-link-box">
                <strong>Main Link's</strong>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                </ul>
            </div>
            <!--**link-box***-->
            <div class="footer-link-box">
                <strong>External Link's</strong>
                <ul>
                    <li><a href="#">Our Product's</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Disclaimer</a></li>
                    <li><a href="#">Trem's and Condition's</a></li>
                </ul>
            </div>
            <!--**link-box***-->
            <div class="footer-link-box">
                <strong>Our Product's</strong>
                <ul>
                    <li><a href="#">Skin Care</a></li>
                    <li><a href="#">Hair Care</a></li>
                    <li><a href="#">Nail's Polish</a></li>
                    <li><a href="#">Eye Liner's</a></li>
                </ul>
            </div>

        </div>

        <!--**bottom**********************-->
        <div class="footer-bottom">
            <span class="footer-owner">Made By Going-To Internet</span>
            <span class="copyright">&#169; Copyright 2022 -  Going-To Internet</span>
        </div>
    </footer>



<!--==Jquery==========================-->
<script src="js/jquery-3.6.1.js"></script>

<script>
/*==li active color===================*/
var selector = '.new-p-heading li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});
/*==filter=============================*/
$(document).ready(function(){
            $('.filter-list').click(function(){
                const value = $(this).attr('data-filter');
                if(value == 'all'){
                    $('.new-product-box-wrapper').show('1000');
                }
                else{
                    $('.new-product-box-wrapper').not('.'+value).hide('1000');
                    $('.new-product-box-wrapper').filter('.'+value).show('1000');
                }
            });
        });
</script>

</body>
</html>

Product Page HTML Code


   <!--DOCTYPE html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--==title======================-->
    <title>Beauty Website HTML</title>
    <!--==CSS========================-->
    <link rel="stylesheet" href="css/style.css"/>
    <!--==fav-icon===================-->
    <link rel="shortcut icon" href="images/fav-icon.png"/>
    <!--==import-poppins-font========-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <!--==Font-Awesome-for-icons=====-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>

    <!--==navigation=======================-->
    <nav class="navigation">

        <!--**logo*****************-->
        <a href="index.html" class="logo">
            <img alt="" src="images/logo.png">
        </a>
        <!--**search***************-->
        <form class="search-box">
            <input type="text" placeholder="Search Product's Here" required/>
            <button>
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </form>
        <!--**btns*****************-->
        <div class="nav-btns">
            <a href="#" class="nav-user">
                <i class="fa-regular fa-user"></i>
            </a>
            <a href="#" class="nav-cart">
                <i class="fa-solid fa-cart-shopping"></i>
            </a>
        </div>

    </nav>


    <!--==Product-Details============================-->
    <section id="product_details">

        <!--**img*************-->
        <div class="d-product-img">
            <img alt="" src="images/n5.png"/>
        </div>
        <!--**text************-->
        <div class="d-product-text">
            <!--category-->
            <span class="category">Cosmetic > Face Mackup</span>
            <!--title-->
            <strong>Bridal Eyelashies With Glue</strong>
            <!--rating-->
            <span class="rating">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-regular fa-star-half-stroke"></i>
                <span>200 Review's</span>
            </span>
            <!--details-->
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. odio excepturi nemo! Ea vero architecto quod, inventore eum eius reprehenderit repellat voluptate expedita dolor perspiciatis!</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas dicta doloribus porro expedita tempora</p>
            <!--price-->
            <span class="price">50$ <del>60$</del></span>
            <!--quantity-->
            <div class="quantity">
                <span>Quantity: </span>
                <input type="number" value="1"/>
            </div>
            <!--btn-->
            <a href="#">Add To Cart</a>
        </div>

    </section><!--details-end-->


    
    <footer>
        <div class="footer-container">
            <!--**comoany-box**-->
            <div class="footer-company-box">
                <!--logo-->
                <a href="#" class="footer-logo">Logo</a>
                <!--details-->
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quas neque repudiandae nihil.</p>
                <!--social-box-->
                <div class="footer-social">
                    <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#"><i class="fa-brands fa-instagram"></i></a>
                    <a href="#"><i class="fa-brands fa-twitter"></i></a>
                    <a href="#"><i class="fa-brands fa-youtube"></i></a>
                </div>
            </div>
            <!--**link-box***-->
            <div class="footer-link-box">
                <strong>Main Link's</strong>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                </ul>
            </div>
            <!--**link-box***-->
            <div class="footer-link-box">
                <strong>External Link's</strong>
                <ul>
                    <li><a href="#">Our Product's</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Disclaimer</a></li>
                    <li><a href="#">Trem's and Condition's</a></li>
                </ul>
            </div>
            <!--**link-box***-->
            <div class="footer-link-box">
                <strong>Our Product's</strong>
                <ul>
                    <li><a href="#">Skin Care</a></li>
                    <li><a href="#">Hair Care</a></li>
                    <li><a href="#">Nail's Polish</a></li>
                    <li><a href="#">Eye Liner's</a></li>
                </ul>
            </div>

        </div>

        <!--**bottom**********************-->
        <div class="footer-bottom">
            <span class="footer-owner">Made By Going-To Internet</span>
            <span class="copyright">&#169; Copyright 2022 -  Going-To Internet</span>
        </div>
    </footer>

</body>
</html>

All CSS Code

 *{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
/*==nav================*/
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    max-width: 1100px;
    width: 90%;
    margin: auto;
}
.logo{
    font-size: 1.8rem;
    color: #333333;
    font-weight: 800;
    text-transform: uppercase;
    height: 70px;
}
.logo img{
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.search-box{
    width: 280px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f3f3f3;
    border-radius: 30px;
    padding: 0px 20px;
    margin-left: auto;
}
.search-box input{
    width: 95%;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
}
.search-box button{
    color: #333333;
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
}
.nav-btns{
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-btns a{
    width:35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #fed2d1;
    color: #383838;
    font-size: 0.8rem;
    margin-left: 10px;
}
.nav-btns a i{
    margin-top: 2px;
}
/*==main===========================*/
#main{
    max-width: 1200px;
    width: 90%;
    background-color: #ffedf6;
    padding: 50px;
    border-radius: 30px;
    min-height: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    align-items: center;
}
.main-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.main-text span{
    color: #ec26b1;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}
.main-text h1{
    font-size: 2.4rem;
    color: #333333;
    font-weight: 800;
}
.main-text h1 font{
    background-color: #fed2d1;
    padding: 0px 5px;
}
.main-text p{
    color: #5a5a5a;
    margin: 10px 0px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.main-text a{
    font-weight: 800;
    color: #333333;
    border-bottom: 1px solid #646464;
    margin-top: 30px;
}
.main-img img{
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: contain;
    object-position: center;
}
/*==grid-product-3=================*/
.product-grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
    max-width: 1200px;
    width: 90%;
    margin: 15px auto;
}
.product-grid-box{
    position: relative;
    height: 210px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
}
.product-grid-box img{
    height: 100%;
    object-fit: cover;
    object-position: center right;
}
.product-grid-text{
    position: absolute;
    left: 14%;
    top: 50%;
    transform: translate(-14%,-50%);
    max-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.product-grid-text strong{
    color: #1d1d1d;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.5rem;
}
.product-grid-text span{
    color: #5a5a5a;
    font-size: 0.8rem;
    font-weight: 500;
}
.product-grid-text a{
    font-weight: 600;
    color: #272727;
    margin-top: 10px;
}
.product-grid-box1{
    background-color: #dffbe2;
}
.product-grid-box2{
    background-color: #fbeae3;
}
.product-grid-box3{
    background-color: #faf4e4;
}
/*==grid-2===================*/
.product-grid-2{
    max-width: 1200px;
    width: 90%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}
/*==grid-half=================*/
.product-grid-half{
    max-width: 1200px;
    width: 90%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    max-height: 300px;
}
.product-grid-half .product-grid-box1,
.product-grid-half .product-grid-box2,
.product-grid-half .product-grid-box3{
    height: 100%;
} 
.product-grid-half .product-grid-box2{
    grid-row: 1/3;
}
.product-grid-half .product-grid-box2 .product-grid-text{
    max-width: 220px;
}
.product-grid-half .product-grid-box2 .product-grid-text strong{
    font-size: 1.4rem;
    line-height: 1.8rem;
}
/*==new_products===================*/
#new_products{
    max-width: 1200px;
    width: 90%;
    margin: 50px auto;
}
.new-p-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fafafa;
    padding: 10px 20px;
    border-radius: 10px;
}
.new-p-heading h3{
    font-size: 1.8rem;
    color: #1d1d1d;
    font-weight: 800;
}
.new-p-heading ul{
    display: flex;
    justify-content: center;
    align-items: center;

    flex-wrap: wrap;
}
.new-p-heading li{
    padding: 2px 20px;
    border-radius: 4px;
    margin: 0px 3px;
    color: #333333;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1px;
}
.new-p-heading li.active{
    background-color: #f4ad43;
}
.new-product-box{
    max-width: 100%;/*250px*/
    width: 100%;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #f1f1f1;
}
.new-product-box:hover{
    box-shadow: 2px 2px 30px rgba(148, 24, 96, 0.05);
}
.new-product-img{
    width: 100%;
    height: 250px;
    padding: 20px;
    display: flex;
    margin: auto;
    position: relative;
}
.new-product-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.new-product-img span{
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #fed2d1;
    color: #333333;
    padding: 3px 10px;
    font-weight: 600;
    border-radius: 4px;
    font-size: 0.8rem;
}
.new-product-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    text-align: center;
    padding: 5px 20px;
}
.new-product-text .new-product-title{
    color: #1d1d1d;
    font-weight: 600;
    font-size: 1rem;
}
.new-product-text span{
    color: #8b3d74;
    font-size: 1.4rem;
    font-weight: 500;
}
.new-p-cart-btn{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: #0f0f0f;
    margin-top: 10px;
    display: none;
}
.new-product-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    margin-top: 20px;
}
/*==popular-product=====================*/
#popular-product{
    max-width: 1200px;
    width: 90%;
    margin: 50px auto;
}
.popular-heading{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fafafa;
    padding: 10px 20px;
    border-radius: 10px;
}
.popular-heading h3{
    font-size: 1.8rem;
    color: #1d1d1d;
    font-weight: 800;
}
.popular-heading a{
    color: #5a5a5a;
    font-size: 0.9rem;
}
.popular-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
    margin-top: 30px;
}
.popular-box{
    width: 100%;
    display: grid;
    grid-template-columns: 100px 1fr;
}
.popular-box-img{
    width: 100%;
    height: 120px;
    padding: 10px;
    background-color: #fff8f8;
    border-radius: 6px;
}
.popular-box-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.popular-box-text{
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: flex-start;
    margin-left: 10px;
    width: 100%;
}
.popular-box-text a{
    color: #363636;
    font-size: 1rem;
    font-weight: 600;
}
.popular-box-text .p-category{
    color: #8b3d74;
    font-size: 0.9rem;
    font-weight: 500;
}
.popular-box-text .p-price{
    color: #1d1d1d;
    font-size: 1.4rem;
    font-size: 700;
    margin-top: auto;
}
.popular-box-text .p-price del{
    font-size: 1rem;
    color: #8b3d74
}
/*==partner-logo=================================*/
#partner{
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    width: 90%;
    margin: 50px auto;
}
.partner-heading h3{
    font-size: 1.56rem;
    font-weight: 700;
    color: #202020;
    letter-spacing: 0.5px;
}
.logo-container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 40px;
    grid-gap: 15px;
}
.logo-container img{
    height: 50px;
    object-fit: contain;
    object-position: center;
    filter: grayscale(1);
    opacity: 0.3;
    transition: all ease 0.3s;
}
.logo-container img:hover{
    filter: grayscale(0);
    opacity: 1;
    transition: all ease 0.3s;
}
/*==footer================================*/
footer{
    width: 100%;
    border-top: 1px solid #e9e9e9;
}
.footer-container{
    max-width: 1200px;
    width: 90%;
    margin: 0px auto;
    padding: 50px 0px;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
}
.footer-company-box,
.footer-subscribe{
    max-width: 330px;
}
.footer-company-box .footer-logo{
    color: #333333;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 900;
}
.footer-company-box p,
.footer-subscribe p{
    color: #585858;
    margin: 5px 0px;
    line-height: 1.6rem;
    font-size: 0.9rem;
}
.footer-social{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.footer-social a{
    margin-top: 10px;
    margin-right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e9e9e9;
    color: #333333;
    font-size: 0.9rem;
}
.footer-link-box strong,
.footer-subscribe strong{
    font-size: 1.2rem;
    color: #333333;
    font-weight: 600;
}
.footer-link-box ul{
    margin-top: 5px;
}
.footer-container ul li a{
    color: #797979;
    display: flex;
    margin-bottom: 5px;
    transition: all ease 0.3s;
    font-weight: 500;
}
.footer-container ul li a:hover{
    color: #0f0f0f;
}
.subscribe-box{
    width: 100%;
    border: 1px solid #dadada;
    display: flex;
    justify-content: center;
    height: 100%;
    margin-top: 10px;
}
.subscribe-box input{
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    padding: 0px 15px;
}
.subscribe-box button{
    border: none;
    outline:none;
    background-color: #000000;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 500;
    height: 40px;
    padding: 0px 20px;
    cursor: pointer;
}
.footer-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: 10px;
    border-top: 1px solid #e9e9e9;
    padding: 20px 0px;
    max-width: 1200px;
    width: 90%;
    margin: auto;
}
.footer-bottom span{
    color: #252525;
    font-size: 0.9rem;
}

/*==making-responsive==============================*/
@media(max-width:1200px){
    .footer-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
}
@media(max-width:1100px){
    .product-grid-3{
        grid-template-columns: 1fr 1fr;
    }
    .new-product-container{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media(max-width:1000px){
    .product-grid-half{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 200px;
        max-height: 100%;
    }
    .product-grid-half .product-grid-box2{
        grid-column: 1/3;
        grid-row: 1/2;
        height: 300px;
    }
}
@media(max-width:900px){
    #main{
        display: flex;
        flex-direction: column-reverse;
    }
    .main-text{
        margin-top: 40px;
        margin-bottom: 10px;
    }
    .popular-container{
        grid-template-columns: 1fr 1fr;
    }
    .logo-container{
        margin-top: 20px;
        justify-content:flex-start;}
    .logo-container img{
    height: 40px;}
}
@media(max-width:760px){
    .navigation{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .search-box{
        grid-row: 2/3;
        grid-column: 1/3;
        width: 100%;
        border-radius: 4px;
        margin-top: 10px;
    }
    .nav-btns{
        margin-left: auto;
    }
    .logo{
        height: 40px;
    }
    #main{
        padding: 20px;
    }
    .main-text h1{
        font-size: 1.8rem;
    }
    .new-p-heading h3,
    .popular-heading h3,
    .partner-heading h3{
        font-size: 1.2rem;
    }
    .product-grid-3{
        grid-template-columns: 1fr;
    }
    .new-product-container{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .product-grid-half{
        grid-template-columns: 1fr;
        grid-template-rows:auto;
        grid-auto-rows: auto;
    }
    .product-grid-half .product-grid-box2{
        grid-column: 1/2;
        height: auto;
    }
    .product-grid-half .product-grid-box2 .product-grid-text strong{
        font-size: 1.2rem;
    }
    .product-grid-2{
        grid-template-columns: 1fr;
    }
}
@media(max-width:620px){
    .new-p-heading{
        flex-direction: column;
    }
    .new-p-heading ul{
        margin-top: 10px;
    }
    .new-product-container{
        grid-template-columns: 1fr 1fr;
    }
    .popular-container{
        grid-template-columns: 1fr;
    }
    .product-grid-box{
        padding: 20px 20px 0px 20px;
    }
    .product-grid-box img{
        height: 90%;
        width: 70%;
        object-position: bottom right;
        margin-top: auto;
        object-fit: contain;
    }
    .product-grid-half .product-grid-box2 .product-grid-text strong{
        max-width: 120px;
        font-size: 1rem;
        line-height: 1.2rem;
    }
    .footer-container{
        grid-template-columns: 1fr;
    }
}
@media(max-width:320px){
    .new-product-container{
        grid-template-columns: 1fr;
    }
}

/*==product-page========================*/
#product_details{
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    max-width: 1000px;
    width: 90%;
    margin: 30px auto 50px auto;
}
.d-product-img{
    border: 1px solid #dfdfdf;
    display: flex;
    justify-content: center;
    align-items: center;
}
.d-product-img img{
    width: 100%;
    max-height: 350px;
    height: 90%;
    object-fit: contain;
    object-position: center;
}
.d-product-text{
    display: flex;
    flex-direction: column;
    padding: 0px 30px;
    justify-content: flex-start;
}
.d-product-text .category{
    color: #ec26b1;
    font-size: 0.9rem;
}
.d-product-text strong{
    color: #1b1b1d;
    font-weight: 800;
    font-size: 1.8rem;
}
.d-product-text .rating{
    color: #f3a006;
    font-size: 0.8rem;
    margin-top: 5px;
}
.d-product-text .rating span{
    color: #161616;
    margin-left: 2px;
    font-weight: 500;
}
.d-product-text p{
    color: #4d4d4d;
    margin: 10px 0px;
    font-size: 0.9rem;
}
.d-product-text .price{
    color: #181818;
    font-size: 1.8rem;
    font-weight: 700;
}
.d-product-text .price del{
    color: #f80f0f;
    font-weight: 500;
    font-size: 1rem;
}
.d-product-text .quantity{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}
.d-product-text .quantity span{
    color: #363636;
    margin-right: 10px;
    font-weight: 500;
}
.d-product-text .quantity input{
    width: 70px;
    height: 40px;
    background-color: #f3f3f3;
    text-align: center;
    border: 1px solid #ebebeb;
    border-radius: 3px;
}
.d-product-text a{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #ffffff;
    background-color: #161616;
    margin-top: 20px;
}
.relative-products .product-heading{
    background-color: #f5f5f5;
    border: 1px solid rgb(236,236,236);
    padding: 10px 20px;
    border-radius: 5px;
}
/*==making-product-page-responsive============*/
@media(max-width:820px){
    #product_details{
        grid-template-columns: 1fr;
    }
    .d-product-img{
        max-height: 400px;
    }
    .d-product-text{
        padding: 0px;
        margin-top: 30px;
    }
}
@media(max-width:724px){
    .d-product-text strong{
        font-size: 1.4rem;
    }
}

Download Images Download Source Code

Beauty Product's Website Using HTML CSS And JS

Create A Beauty Product Website Using HTML CSS And JS

Comments

Followers

Search This Blog

Labels

Popular Posts

Archive

Labels

Contact Form