protonicswebsite.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portronics</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #nav {
            background-color: black;
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        ul {
            list-style: none;
            display: flex;
            color: white;
            gap: 25px;
            padding-right: 50px;
            font-size: 19px;
            padding-top: 18px;

        }

        #first-heading {
            margin-left: 80px;
            margin-top: 50px;
            color: black
        }

        #card1 {
            height: 400px;
            width: 400px;
            margin-left: 80px;
            margin-top: 20px;

        }

        #card2 {
            height: 400px;
            width: 400px;
            margin-left: 80px;
            margin-top: 20px;

        }

        #card3 {
            height: 400px;
            width: 400px;
            margin-left: 80px;
            margin-top: 20px;
        }

        #banner {
            margin-bottom: 90px;
        }

        #second-heading {
            margin-left: 80px;
            margin-top: 50px;
            color: black;
        }

        #button {
            background-color: red;
            text-align: center;
            padding-top: 4px;
            border-radius: 8px;
            /* position: relative; */
            color: white;
            height: 24px;
            width: 380px;
            margin-left: 50px;

        }

        #para {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 190px;

        }

        #box {
            background-color: black;
            color: white;
            font-size: 14px;
            width: 320px;
            height: 40px;
            border-radius: 5px;
            border: none;
            padding-left: 100px;
            padding-top: 10px;
            margin-left: 80px;

        }

        #button1 {
            background-color: red;
            text-align: center;
            padding-top: 4px;
            border-radius: 8px;
            /* position: relative; */
            color: white;
            height: 24px;
            width: 380px;
            margin-left: 50px;
        }

        #para1 {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 190px;

        }

        #box1 {
            background-color: black;
            color: white;
            font-size: 14px;
            width: 320px;
            height: 40px;
            border-radius: 5px;
            border: none;
            padding-left: 100px;
            padding-top: 10px;
            margin-left: 80px;
            margin-bottom: 20px;

        }

        #main{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 500px;
            margin-top: 80px;
             
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/8.0.0/mdb.min.css" rel="stylesheet" />

</head>

<body>

    <!-- navbar start -->

    <div id="nav">
        <img style="height: 40px; padding-left: 80px;"
            src="https://www.portronics.com/cdn/shop/files/logo_f6f5e2d7-11ef-46f4-b9b8-4d4c99fe098f.png?v=1707295711&width=315"
            alt="">

        <ul>
            <li>Categories</li>
            <li>New Arrivals</li>
            <li>Daily Deals</li>
            <li>Corporate Gifting</li>
            <li>Support</li>
        </ul>
    </div>


    <!-- navbar end -->

    <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://www.portronics.com/cdn/shop/files/Diwali_Prime_Banner_Web.png?v=1729770284"
                    class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://www.portronics.com/cdn/shop/files/Diwali_Gifting_Banner_Web.png?v=1729770370"
                    class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://www.portronics.com/cdn/shop/files/Diwali_Gifting_Banner_Web.png?v=1729770370"
                    class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying "
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- 1flex box start -->
    <h1 id="first-heading">POPULAR CATEGORIES</h1>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div id="card1">
                <img src="https://media.istockphoto.com/id/1194814887/photo/apple-airpods-wireless-bluetooth-headphones-and-charging-case.jpg?s=612x612&w=0&k=20&c=SJWyv7d3oBYyJBBpFzLCMWX5_yiT7siVb63O-Ctqv-Q="
                    class="card-img-top" alt="Skyscrapers" />
                <h5 style="margin-left: 10px; text-align: center; font-size: 30px; color: black;">Audio</h5>

            </div>
        </div>
        <div class="col">
            <div id="card2">
                <img style="height: 266.66px; width: 400px;"
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcuWDseCvdzJDX-YI-VUawoZUj3gaEpk1x5Dy2KlGbgcU-3k7ZVkeoRwDavUcaJQcmLKQ&usqp=CAU"
                    class="card-img-top" alt="Los Angeles Skyscrapers" />
                <h5 style="margin-left: 10px; text-align: center; font-size: 30px; color: black;">Mobile Accessories
                </h5>

            </div>
        </div>
        <div class="col">
            <div id="card3">
                <img src="https://media.istockphoto.com/id/635790376/photo/computer-peripherals-laptop-accessories-composition-on-stone.jpg?s=612x612&w=0&k=20&c=EIu4Pmadacbq6Kk2iSezHUZFiCeLEGP5BhYjajTCSBU="
                    class="card-img-top" alt="Palm Springs Road" />
                <h5 style="margin-left: 10px; text-align: center; font-size: 30px; color: black;">Computer Accessories
                </h5>


            </div>
        </div>
    </div>
    <!-- 1flexbox end -->

    <!-- banner image start -->
    <div id="banner">
        <img style="height: 185px; width: 1200px; margin-left: 160px;"
            src=" //www.portronics.com/cdn/shop/files/Wireless_Chargers_2b553a9d-9200-42ad-84eb-8a84b5aa054d.png?v=1729774490 "
            alt="">

    </div>

    <!-- banner image end -->

    <!-- 2 flex box start -->
    <h1 id="second-heading">POPULAR CATEGORIES</h1>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-100">
                <img style="height: 266.66px; width: 400px;"
                    src="https://media.croma.com/image/upload/v1685020179/Croma%20Assets/Computers%20Peripherals/Tablets%20and%20iPads/Images/250398_0_tixng8.png"
                    class="card-img-top" alt="Skyscrapers" />
                <div id="button">

                    <h4 style="font-size: 15px;">12 inches screen</h4>


                </div>
                <h4 style="margin-top: 14px; font-size: 19px; color: black; margin-left: 50px;"><strong>RUFFAD
                        15</strong></h4>
                <p style="margin-left: 50px;">Green LCD | One-Press Erase</p>
                <h3 style="color: black; margin-left: 50px; ">$299</h3>
                <div id="para">

                    <p style="font-size: 14px;">or Rs. 100/Month <img style="height: 17px; width: 17px;"
                            src="https://assets.snapmint.com/assets/express_checkout/snap-logo-circle.png" alt="">
                    <p style="font-size: 12px; color: blue;">Buy on EMI></p>
                    </p>
                </div>

                <div id="box">
                    <p>ADD TO CART</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img style="height: 266.66px; width: 400px;"
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgPJi_JYMWqZReTzZObxq9swBqZSiRPDxDGA&s"
                    class="card-img-top" alt="Los Angeles Skyscrapers" />
                <div id="button1">

                    <h4 style="font-size: 14px;">80 Watts Output</h4>
                </div>
                <h4 style="margin-top: 14px; font-size: 19px; color: black; margin-left: 50px;"><strong>CAR POWER 80
                    </strong></h4>
                <p style="margin-left: 50px;">45W Type-C PD | 35W USB</p>
                <h3 style="color: black; margin-left: 50px; ">$540</h3>
                <div id="para1">

                    <p style="font-size: 14px;">or Rs. 183/Month <img style="height: 17px; width: 17px;"
                            src="https://assets.snapmint.com/assets/express_checkout/snap-logo-circle.png" alt="">
                    <p style="font-size: 12px; color: blue;">Buy on EMI></p>
                    </p>
                </div>

                <div id="box1">
                    <p>ADD TO CART</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img style="height: 266.66px; width: 400px;"
                    src="https://www.portronics.com/cdn/shop/files/Artboard1_ffc721c0-d076-478a-a52d-6989d0ad2663.jpg?v=1729507685"
                    class="card-img-top" alt="Palm Springs Road" />

                <div id="button1">

                    <h4 style="font-size: 14px;">USB Wired interface</h4>

                </div>
                <h4 style="margin-top: 14px; font-size: 19px; color: black; margin-left: 50px;"><strong>KEYTONIC
                    </strong></h4>
                <p style="margin-left: 50px;">2.4 GHz Wireless | Tenkeyless Size</p>
                <h3 style="color: black; margin-left: 50px; ">$649</h3>
                <div id="para1">

                    <p style="font-size: 14px;">or Rs. 216/Month <img style="height: 17px; width: 17px;"
                            src="https://assets.snapmint.com/assets/express_checkout/snap-logo-circle.png" alt="">
                    <p style="font-size: 12px; color: blue;">Buy on EMI></p>
                    </p>
                </div>

                <div id="box1">
                    <p>ADD TO CART</p>
                </div>


            </div>
        </div>

                







        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>

        <!-- MDB -->
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/8.0.0/mdb.umd.min.js"></script>

</body>

</html>