test.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H.A.D.E.S</title>

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- Owl-carousel CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
    <link rel="stylesheet" href="htpmgtps://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha256-kksNxjDRxd/5+jGurZUJd1sdR2v+ClrCl3svESBaJqw=" crossorigin="anonymous" />

    <!-- font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Custom CSS file -->
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!-- start #header -->
    <header id="header">
        <div class="strip d-flex justify-content-between px-4 py-1 bg-dark">
            <p class="font-rale font-size-12 text-white-50 m-0">𝙰 𝙳𝙱𝙼𝚂 𝙿𝚛𝚘𝚓𝚎𝚌𝚝 𝚋𝚢: 𝚃𝚎𝚊𝚖 𝙷𝙰𝙳𝙴𝚂</p>
            <div class="font-rale font-size-14">
                <a href="#" class="px-3 border-right border-left text-light">𝕃𝕠𝕘𝕚𝕟</a>
                <a href="#" class="px-3 border-right text-light">𝕎𝕚𝕤𝕙𝕝𝕚𝕤𝕥 (𝟘)</a>
            </div>
        </div>

        <!-- Primary Navigation -->
        <nav class="navbar navbar-expand-lg navbar-dark color-primary-bg">
            <a class="navbar-brand" href="#">꧁༒𝐇.𝐀.𝐃.𝐄.𝐒༒꧂</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav m-auto font-rubik">
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">𝐀𝐥𝐥 𝐂𝐚𝐭𝐞𝐠𝐨𝐫𝐢𝐞𝐬 <i class="fa fa-chevron-circle-down"></i></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">𝐍𝐞𝐚𝐫 𝐘𝐨𝐮</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">𝐁𝐞𝐬𝐭 𝐒𝐞𝐥𝐥𝐞𝐫𝐬</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">𝐇𝐨𝐦𝐞 & 𝐊𝐢𝐭𝐜𝐡𝐞𝐧</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">𝐅𝐫𝐞𝐬𝐡 𝐇𝐚𝐫𝐯𝐞𝐬𝐭𝐬</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">𝐃𝐚𝐢𝐫𝐲 & 𝐏𝐨𝐮𝐥𝐭𝐫𝐲</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">𝐅𝐥𝐚𝐬𝐡 𝐒𝐚𝐥𝐞𝐬</a>
                    </li>
                </ul>
                <form action="#" class="font-size-14 font-rale">
                    <a href="cart.html" class="py-2 rounded-pill color-primary-bg">
                        <span class="font-size-16 px-2 text-white"><i class="fas fa-shopping-cart"></i></span>
                        <span class="px-3 py-2 rounded-pill text-dark bg-light">0</span>
                    </a>
                </form>
            </div>
        </nav>
        <!-- !Primary Navigation -->

    </header>
    <!-- !start #header -->

    <!-- start #main-site -->
    <main id="main-site">

        <!-- Owl-carousel -->
        <section id="banner-area">
            <div class="owl-carousel owl-theme">
                <div class="item">
                    <img src="../assets/Banner1.png" alt="Banner1">
                </div>
                <div class="item">
                    <img src="../assets/Banner2.png" alt="Banner2">
                </div>
                <div class="item">
                    <img src="../assets/Banner3.png" alt="Banner3">
                </div>
                <div class="item">
                    <img src="../assets/Banner4.png" alt="Banner4">
                </div>
                <div class="item">
                    <img src="../assets/Banner5.png" alt="Banner5">
                </div>
                <div class="item">
                    <img src="../assets/Banner6.png" alt="Banner6">
                </div>
                <div class="item">
                    <img src="../assets/Banner7.png" alt="Banner7">
                </div>
        </section>
        <!-- !Owl-carousel -->

        <!-- On Sale -->
        <section id="on-sale">
            <div class="container py-5">
                <h4 class="font-rubik font-size-20">ᴅᴀɪʀʏ & ᴘᴏᴜʟᴛʀʏ</h4>
                <hr>
                <!-- owl carousel -->
                <div class="owl-carousel owl-theme">
                    <div class="item py-2">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/16.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Chocolate Milk</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹25</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/19.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Coconut Milk</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹30</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/20.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Yogurt</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹20</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/17.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Skimmed Milk</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹60</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/21.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Flavoured Milk</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹35</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2">
                        <div class="product font-rale">
                            <div class="d-flex flex-column">
                                <a href="#"><img src="../assets/products/22.png" class="img-fluid" alt="pro1"></a>
                                <div class="text-center">
                                    <h6>Almond Milk</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹60</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2">
                        <div class="product font-rale">
                            <div class="d-flex flex-column">
                                <a href="#"><img src="../assets/products/23.png" class="img-fluid" alt="pro1"></a>
                                <div class="text-center">
                                    <h6>Non-lactose Milk</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹90</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- !owl carousel -->
            </div>
        </section>
        <!-- !On Sale -->

        <!-- Special Price -->
        <section id="special-price">
            <div class="container">
                <h4 class="font-rubik font-size-20">ꜰʟᴀꜱʜ ꜱᴀʟᴇꜱ</h4>
                <div id="filters" class="button-group text-right font-baloo font-size-16">
                    <button class="btn is-checked" data-filter="*">All Items</button>
                    <button class="btn" data-filter=".Fruits">Fruits & Vegetables</button>
                    <button class="btn" data-filter=".Dairy">Dairy Products</button>
                    <button class="btn" data-filter=".Essential">Essential Items</button>

                </div>

                <div class="grid">
                    <div class="grid-item Essential Items border">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <a href="#"><img src="../assets/products/13.png" alt="product1" class="img-fluid"></a>
                                <div class="text-center">
                                    <h6>Tea Powder</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹40</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item Fruits & Vegetables border">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <a href="#"><img src="../assets/products/11.png" alt="product1" class="img-fluid"></a>
                                <div class="text-center">
                                    <h6>Onions</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹40</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item Fruits & Vegetables border">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a>
                                <div class="text-center">
                                    <h6>Raw Mangoes</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹30</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item Dairy Products border">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <a href="#"><img src="../assets/products/21.png" alt="product1" class="img-fluid"></a>
                                <div class="text-center">
                                    <h6>Flavoured Milk</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹50</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item Dairy Products border">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <a href="#"><img src="../assets/products/20.png" alt="product1" class="img-fluid"></a>
                                <div class="text-center">
                                    <h6>Yogurt</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹35</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item  Essential Items border ">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <div class="d-flex flex-column">
                                    <a href="#"><img src="../assets/products/4.png" class="img-fluid" alt="pro1"></a>
                                    <div class="text-center">
                                        <h6>Salt</h6>
                                        <div class="rating text-warning font-size-12">
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="far fa-star"></i></span>
                                        </div>
                                        <div class="price py-2">
                                            <span>₹40</span>
                                        </div>
                                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item  Fruits & Vegetables border ">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <div class="d-flex flex-column">
                                    <a href="#"><img src="../assets/products/5.png" class="img-fluid" alt="pro1"></a>
                                    <div class="text-center">
                                        <h6>Bell Peppers</h6>
                                        <div class="rating text-warning font-size-12">
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="far fa-star"></i></span>
                                        </div>
                                        <div class="price py-2">
                                            <span>₹60</span>
                                        </div>
                                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item Essential Items border ">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <div class="d-flex flex-column">
                                    <a href="#"><img src="../assets/products/6.png" class="img-fluid" alt="pro1"></a>
                                    <div class="text-center">
                                        <h6>Detergent</h6>
                                        <div class="rating text-warning font-size-12">
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="far fa-star"></i></span>
                                        </div>
                                        <div class="price py-2">
                                            <span>₹70</span>
                                        </div>
                                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item Essential Items border">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <div class="d-flex flex-column">
                                    <a href="#"><img src="../assets/products/10.png" class="img-fluid" alt="pro1"></a>
                                    <div class="text-center">
                                        <h6>Quaker Oats</h6>
                                        <div class="rating text-warning font-size-12">
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="far fa-star"></i></span>
                                        </div>
                                        <div class="price py-2">
                                            <span>₹90</span>
                                        </div>
                                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid-item Dairy Products  border  ">
                        <div class="item py-2" style="width: 200px;">
                            <div class="product font-rale">
                                <div class="d-flex flex-column">
                                    <a href="#"><img src="../assets/products/23.png" class="img-fluid" alt="pro1"></a>
                                    <div class="text-center">
                                        <h6>Non-lactose Milk</h6>
                                        <div class="rating text-warning font-size-12">
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="fas fa-star"></i></span>
                                            <span><i class="far fa-star"></i></span>
                                        </div>
                                        <div class="price py-2">
                                            <span>₹80</span>
                                        </div>
                                        <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- !Special Price -->

        <!-- Banner Ads  -->
        <section id="banner_adds">
            <div class="container py-5 text-center">
                <img src="../assets/banner1-cr-500x150.jpg" alt="banner1" class="img-fluid">
                <img src="../assets/banner2-cr-500x150.jpg" alt="banner1" class="img-fluid">
            </div>
        </section>
        <!-- !Banner Ads  -->

        <!-- New Stuff -->
        <section id="fresh-harvests">
            <div class="container">
                <h4 class="font-rubik font-size-20">ɴᴇᴡʟʏ ᴀʀʀɪᴠᴇᴅ</h4>
                <hr>

                <!-- owl carousel -->
                <div class="owl-carousel owl-theme">
                    <div class="item py-2 bg-light">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/1.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Tomatoes</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹50</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2 bg-light">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/2.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Bananas</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹40</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2 bg-light">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/3.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Raw Mangoes</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹45</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2 bg-light">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/6.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Detergent</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹90</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2 bg-light">
                        <div class="product font-rale">
                            <a href="#"><img src="../assets/products/19.png" alt="product1" class="img-fluid"></a>
                            <div class="text-center">
                                <h6>Coconut Milk</h6>
                                <div class="rating text-warning font-size-12">
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="fas fa-star"></i></span>
                                    <span><i class="far fa-star"></i></span>
                                </div>
                                <div class="price py-2">
                                    <span>₹60</span>
                                </div>
                                <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2 bg-light">
                        <div class="product font-rale">
                            <div class="d-flex flex-column">
                                <a href="#"><img src="../assets/products/7.png" class="img-fluid" alt="pro1"></a>
                                <div class="text-center">
                                    <h6>Coconuts</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹40</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item py-2 bg-light">
                        <div class="product font-rale">
                            <div class="d-flex flex-column">
                                <a href="#"><img src="../assets/products/8.png" class="img-fluid" alt="pro1"></a>
                                <div class="text-center">
                                    <h6>Butter</h6>
                                    <div class="rating text-warning font-size-12">
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="fas fa-star"></i></span>
                                        <span><i class="far fa-star"></i></span>
                                    </div>
                                    <div class="price py-2">
                                        <span>₹30</span>
                                    </div>
                                    <button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- !owl carousel -->

            </div>
        </section>
        <!-- !New Stuff -->

        <!-- Blogs -->
        <section id="blogs">
            <div class="container py-4">
                <h4 class="font-rubik font-size-28">𝔏𝔞𝔱𝔢𝔰𝔱 𝔅𝔩𝔬𝔤𝔰</h4>
                <hr>

                <div class="owl-carousel owl-theme">
                    <div class="item">
                        <div class="card border-0 font-rale mr-5" style="width: 18rem;">
                            <h5 class="card-title font-size-16">𝗩𝗲𝗴𝗲𝘁𝗮𝗯𝗹𝗲 𝗧𝗶𝗺𝗲𝘀</h5>
                            <img src="../assets/blog/blog1.jpg" alt="cart image" class="card-img-top">
                            <p class="card-text font-size-14 text-black-50 py-1">𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑔𝑖𝑣𝑒 𝑦𝑜𝑢 𝑢𝑝, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑙𝑒𝑡 𝑦𝑜𝑢 𝑑𝑜𝑤𝑛, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑟𝑢𝑛 𝑎𝑟𝑜𝑢𝑛𝑑 𝑎𝑛𝑑 𝑑𝑒𝑠𝑒𝑟𝑡 𝑦𝑜𝑢, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑚𝑎𝑘𝑒 𝑦𝑜𝑢 𝑐𝑟𝑦, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑠𝑎𝑦 𝑔𝑜𝑜𝑑𝑏𝑦𝑒, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑡𝑒𝑙𝑙 𝑎 𝑙𝑖𝑒 𝑎𝑛𝑑 ℎ𝑢𝑟𝑡 𝑦𝑜𝑢!</p>
                            <a href="#" class="color-second text-left">𝗥𝗲𝗮𝗱 𝗠𝗼𝗿𝗲</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="card border-0 font-rale mr-5" style="width: 18rem;">
                            <h5 class="card-title font-size-16">𝗗𝗮𝗶𝗿𝘆 𝗙𝗮𝗻𝘁𝗮𝘀𝘆</h5>
                            <img src="../assets/blog/blog2.jpg" alt="cart image" class="card-img-top">
                            <p class="card-text font-size-14 text-black-50 py-1">𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑔𝑖𝑣𝑒 𝑦𝑜𝑢 𝑢𝑝, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑙𝑒𝑡 𝑦𝑜𝑢 𝑑𝑜𝑤𝑛, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑟𝑢𝑛 𝑎𝑟𝑜𝑢𝑛𝑑 𝑎𝑛𝑑 𝑑𝑒𝑠𝑒𝑟𝑡 𝑦𝑜𝑢, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑚𝑎𝑘𝑒 𝑦𝑜𝑢 𝑐𝑟𝑦, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑠𝑎𝑦 𝑔𝑜𝑜𝑑𝑏𝑦𝑒, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑡𝑒𝑙𝑙 𝑎 𝑙𝑖𝑒 𝑎𝑛𝑑 ℎ𝑢𝑟𝑡 𝑦𝑜𝑢!</p>
                            <a href="#" class="color-second text-left">𝗥𝗲𝗮𝗱 𝗠𝗼𝗿𝗲</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="card border-0 font-rale mr-5" style="width: 18rem;">
                            <h5 class="card-title font-size-16">𝗠𝗲𝗱𝗶𝗰𝗶𝗻𝗮𝗹 𝗠𝘂𝗻𝗰𝗵𝗲𝘀</h5>
                            <img src="../assets/blog/blog3.jpg" alt="cart image" class="card-img-top">
                            <p class="card-text font-size-14 text-black-50 py-1">𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑔𝑖𝑣𝑒 𝑦𝑜𝑢 𝑢𝑝, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑙𝑒𝑡 𝑦𝑜𝑢 𝑑𝑜𝑤𝑛, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑟𝑢𝑛 𝑎𝑟𝑜𝑢𝑛𝑑 𝑎𝑛𝑑 𝑑𝑒𝑠𝑒𝑟𝑡 𝑦𝑜𝑢, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑚𝑎𝑘𝑒 𝑦𝑜𝑢 𝑐𝑟𝑦, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑠𝑎𝑦 𝑔𝑜𝑜𝑑𝑏𝑦𝑒, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑡𝑒𝑙𝑙 𝑎 𝑙𝑖𝑒 𝑎𝑛𝑑 ℎ𝑢𝑟𝑡 𝑦𝑜𝑢!</p>
                            <a href="#" class="color-second text-left">𝗥𝗲𝗮𝗱 𝗠𝗼𝗿𝗲</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- !Blogs -->

    </main>
    <!-- !start #main-site -->

    <!-- start #footer -->
    <footer id="footer" class="bg-dark text-white py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-12">
                    <h4 class="font-rubik font-size-20">꧁༒𝐇.𝐀.𝐃.𝐄.𝐒༒꧂</h4>
                    <p class="font-size-14 font-rale text-white-50">𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑔𝑖𝑣𝑒 𝑦𝑜𝑢 𝑢𝑝, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑙𝑒𝑡 𝑦𝑜𝑢 𝑑𝑜𝑤𝑛, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑟𝑢𝑛 𝑎𝑟𝑜𝑢𝑛𝑑 𝑎𝑛𝑑 𝑑𝑒𝑠𝑒𝑟𝑡 𝑦𝑜𝑢, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑚𝑎𝑘𝑒 𝑦𝑜𝑢 𝑐𝑟𝑦, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑠𝑎𝑦 𝑔𝑜𝑜𝑑𝑏𝑦𝑒, 𝑁𝑒𝑣𝑒𝑟 𝑔𝑜𝑛𝑛𝑎 𝑡𝑒𝑙𝑙 𝑎 𝑙𝑖𝑒 𝑎𝑛𝑑 ℎ𝑢𝑟𝑡 𝑦𝑜𝑢!</p>
                </div>
                <div class="col-lg-4 col-12">
                    <h4 class="font-rubik font-size-20">Newsletter</h4>
                    <form class="form-row">
                        <div class="col">
                            <input type="text" class="form-control" placeholder="𝙴-𝙼𝚊𝚒𝚕: ">
                        </div>
                        <div class="col">
                            <button type="submit" class="btn btn-primary mb-2">Subscribe</button>
                        </div>
                    </form>
                </div>
                <div class="col-lg-2 col-12">
                    <h4 class="font-rubik font-size-20">𝐈𝐧𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧</h4>
                    <div class="d-flex flex-column flex-wrap">
                        <a href="#" class="font-rale font-size-14 text-white-50 pb-1">About Us</a>
                        <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Delivery Information</a>
                        <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Privacy Policy</a>
                        <a href="#" class="font-rale font-size-14 text-white-50 pb-1">Terms & Conditions</a>
                    </div>
                </div>
                <div class="col-lg-2 col-12">
                    <h4 class="font-rubik font-size-20">𝐀𝐜𝐜𝐨𝐮𝐧𝐭</h4>
                    <div class="d-flex flex-column flex-wrap">
                        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley" class="font-rale font-size-14 text-white-50 pb-1">My Account</a>
                        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley" class="font-rale font-size-14 text-white-50 pb-1">Order History</a>
                        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley" class="font-rale font-size-14 text-white-50 pb-1">Wish List</a>
                        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley" class="font-rale font-size-14 text-white-50 pb-1">Newsletters</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <div class="copyright text-center bg-dark text-white py-2">
        <p class="font-rale font-size-14">&copy; Copyrights 2021. Design By <a href="#" class="color-second">Abdul Of Team HADES</a></p>
    </div>
    <!-- !start #footer -->

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <!-- Owl Carousel Js file -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

    <!--  isotope plugin cdn  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script>

    <!-- Custom Javascript -->
    <script src="index.js"></script>
</body>

</html>