NammaRation/home.html at main · KingBobSpongebob/NammaRation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" type="image/png" href="images/logo.jpg"/>
    <link rel="stylesheet" href="stylesheets/styles.css">
    <link rel="stylesheet" href="stylesheets/responsive.css">
    <title>Namma Ration - Home</title>
</head>
<body>
    <header>
        <div class="nav-container">
            <div class="logo">
                <img src="images/logo-transperant.png" alt="Namma Ration Logo">
                <h1>Namma Ration</h1>
            </div>
            <div class="nav-links">
                <a href="home.html" class="active"><i class="fas fa-home"></i> Home</a>
                <a href="cart.html"><i class="fas fa-shopping-cart"></i> Cart <span id="cart-count" class="cart-count"></span></a>
                <a href="location.html"><i class="fas fa-map-marker-alt"></i> Location</a>
                <a href="profile.html"><i class="fas fa-user"></i> Profile</a>
            </div>
        </div>
    </header>

    <div class="search-container">
        <div class="search-bar">
            <input type="text" placeholder="Search for products, categories, or offers...">
            <div class="search-icon">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </div>

    <main>
        <h1 class="page-title">Our Products</h1>

        <div class="categories">
            <div class="category active" data-category="all">
                <img src="https://cdn-icons-png.flaticon.com/512/992/992700.png" alt="All Products">
                <span>All</span>
            </div>
            <div class="category" data-category="rice">
                <img src="https://media.istockphoto.com/id/153737841/photo/rice.jpg?s=612x612&w=0&k=20&c=lfO7iLT0UsDDzra0uBOsN1rvr2d5OEtrG2uwbts33_c=" alt="Rice">
                <span>Rice</span>
            </div>
            <div class="category" data-category="dal">
                <img src="https://tiimg.tistatic.com/fp/1/007/565/100-pure-raw-organic-yellow-toor-dal-for-cooking-uses-648.jpg" alt="Dal">
                <span>Dal</span>
            </div>
            <div class="category" data-category="oil">
                <img src="https://naturelandorganics.com/cdn/shop/articles/organic-sunflower-oil-Natureland_organics_1200x1200.jpg?v=1673681164" alt="Oil">
                <span>Oil</span>
            </div>
            <div class="category" data-category="soap">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpBhsNbkrw-qzAFle7GzIOUES6avcxxckLcw&s" alt="Soap">
                <span>Soap</span>
            </div>
        </div>

        <div id="products-grid" class="products-grid">
            <!-- Products will be loaded dynamically -->
        </div>
    </main>

    <footer>
        <p>&copy; 2025 Namma Ration. All rights reserved.</p>
    </footer>

    <script src="scripts/script.js"></script>
    <script src="scripts/home.js"></script>
</body>
</html>