Frontend-HTML-CSS-JavaScript-/shopping1.html at main · Pad96pages/Frontend-HTML-CSS-JavaScript- · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Website</title>
    <style>
        /* Basic Reset */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9fafb; /* Soft grayish white */
        }
        header {
            background-color: #1e3a8a; /* Deep blue */
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            background-color: #2563eb; /* Lighter blue */
            text-align: center;
            padding: 10px 0;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            margin: 0 15px;
        }
        nav a:hover {
            color: #d1d5db; /* Light gray on hover */
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
        }
        .product {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 15px;
            padding: 15px;
            width: 300px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .product img {
            max-width: 100%;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }
        .product h3 {
            font-size: 18px;
            margin: 10px 0;
        }
        .product .price {
            color: #10b981; /* Vibrant green */
            font-size: 20px;
            font-weight: bold;
        }
        .product button {
            background-color: #10b981; /* Vibrant green */
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            cursor: pointer;
            margin-top: 10px;
        }
        .product button:hover {
            background-color: #059669; /* Darker green on hover */
        }
        footer {
            background-color: #1e3a8a; /* Deep blue */
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
       <h1>Shopping Website</h1>
    </header>
    <nav>
       <a href="#home">Home</a>
       <a href="#products">Products</a>
       <a href="#contact">Contact Us</a>
    </nav>
    <main>
       <section id="products" class="container">
            <div class="product">
              <img src="https://jamesclear.com/wp-content/uploads/2020/11/atomic-habits_gallery_hi-res_01.jpg" alt="Product 1">
              <h3>Product 1</h3>
              <p>ATOMIC HABITS by James Clear: An Easy & Proven Way to Build Good Habits & Break Bad Ones.</p>
              <p class="price">$20.00</p>
              <button onclick="addToCart('Product 1', 20)">Add to Cart</button>
            </div>
            <div class="product">
              <img src="https://cdn.prod.website-files.com/624377e20c9e225e2e55e2ed/63f7c9ccf28d7d7ba5f1c1ff_football-1396740_1280.jpg" alt="Product 2">
              <h3>Product 2</h3>
              <p>Buy football NIVIA India to discover the perfect balance of form and function for the modern football enthusiast.</p>
              <p class="price">$30.00</p>
              <button onclick="addToCart('Product 2', 30)">Add to Cart</button>
            </div>
            <div class="product">
              <img src="https://cdn.dotpe.in/longtail/store-items/8794550/QdD8bnRn.webp" alt="Product 3">
              <h3>Product 3</h3>
              <p>High-quality metal print, galaxy-look-alike water bottles. {Set of four}</p>
              <p class="price">$25.00</p>
              <button onclick="addToCart('Product 3', 25)">Add to Cart</button>
            </div>
       </section>
    </main>
    <footer>
       <p>&copy; 2025 Shopping Website. All Rights Reserved.</p>
    </footer>
    <script>
       // JavaScript function to add products to the cart
       function addToCart(productName, productPrice) {
           alert(`${productName} added to the cart at $${productPrice}`);
       }
    </script>
</body>
</html>