├── app.js
├── app_cart.js
├── css
    ├── style.css
    └── style_cart.css
├── images
    ├── amazon_logo.png
    ├── hero-img.jpg
    ├── img-1.png
    ├── img-2.png
    ├── img-3.png
    └── img-4.png
├── index.html
└── pages
    ├── cart.html
    └── procuct.html


/app.js:
--------------------------------------------------------------------------------
  1 | 
  2 | const m_data = [{
  3 |     id: 1,
  4 |     product_name: "camera",
  5 |     img: "https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-980x653.jpg",
  6 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
  7 |     price: "$250",
  8 | },
  9 | {
 10 |     id: 2,
 11 |     product_name: "headphone",
 12 |     img: "https://i.pinimg.com/564x/8c/db/e1/8cdbe123010c380e20f264a8fdd57938.jpg",
 13 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 14 |     price: "$250",
 15 | },
 16 | {
 17 |     id: 3,
 18 |     product_name: "mouse",
 19 |     img: "https://i.pinimg.com/564x/80/17/a2/8017a2f48d590c7f2f664198f18230c6.jpg",
 20 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 21 |     price: "$250",
 22 | },
 23 | {
 24 |     id: 4,
 25 |     product_name: "mobile",
 26 |     img: "https://i.pinimg.com/564x/8c/1b/12/8c1b1208fca4933dad3f3916cae2caee.jpg",
 27 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 28 |     price: "$250",
 29 | },
 30 | {
 31 |     id: 5,
 32 |     product_name: "laptop",
 33 |     img: "https://i.pinimg.com/736x/8a/29/01/8a2901ff5b2aacab1bf74601f124d835.jpg",
 34 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 35 |     price: "$250",
 36 | },
 37 | {
 38 |     id: 6,
 39 |     product_name: "tabs",
 40 |     img: "https://i.pinimg.com/564x/7c/3c/83/7c3c83c6b48f242524b08fe1a7f00766.jpg",
 41 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 42 |     price: "$250",
 43 | },
 44 | {
 45 |     id: 7,
 46 |     product_name: "Keyboard",
 47 |     img: "https://i.pinimg.com/236x/4a/77/2f/4a772f7b4df1435642192c33cb8c9cc9.jpg",
 48 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 49 |     price: "$250",
 50 | },
 51 | {
 52 |     id: 8,
 53 |     product_name: "mac-mini",
 54 |     img: "https://i.pinimg.com/564x/70/ac/93/70ac9331047949fa63fe80650029b219.jpg",
 55 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 56 |     price: "$250",
 57 | },
 58 | {
 59 |     id: 9,
 60 |     product_name: "wire less charging",
 61 |     img: "https://i.pinimg.com/564x/b4/68/78/b46878b22592ec105102d26b3d336593.jpg",
 62 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 63 |     price: "$250",
 64 | },
 65 | {
 66 |     id: 10,
 67 |     product_name: "i Watch",
 68 |     img: "https://i.pinimg.com/564x/4f/b7/ba/4fb7ba89d8fdbae6ed3a21c977a4d121.jpg",
 69 |     description: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, reiciendis",
 70 |     price: "$250",
 71 | }]
 72 | 
 73 | localStorage.setItem('products', JSON.stringify(m_data))
 74 | 
 75 | let data = JSON.parse(localStorage.getItem("products")) || [];
 76 | 
 77 | function product() {
 78 | 
 79 |     // data.clear()
 80 |     const card = document.getElementById('card');
 81 |     
 82 |     card.innerHTML = ""
 83 |     data.map((val, ind) => {
 84 |         const div = document.createElement("div");
 85 |         div.className = "card_main"
 86 |         div.innerHTML = `
 87 |        <div id="card_img">
 88 |         ${"<img src='" + val.img + "'>"}
 89 |         </div>
 90 |         <div class="card-body">
 91 |             <div class="row">
 92 |                 <div class="card-title">
 93 |                     ${"<h1>" + val.product_name + "</h1>"}
 94 |                     ${"<h3>" + val.price + "</h3>"}
 95 |                 </div>
 96 |             </div>
 97 |             <hr/>
 98 |             ${"<p>" + val.description + "</p>"}
 99 |             <div class="btn-group">
100 |                 <div class="btn">
101 |                     <a onclick = "addcart(${ind})" >Add To Cart</a>
102 |                 </div>
103 |             </div>
104 |         </div>
105 |         `;
106 |         card.appendChild(div);
107 |     })
108 | }
109 | product()
110 | 
111 | 
112 | let item = JSON.parse(localStorage.getItem("mycart")) || [];
113 | function addcart(index) {
114 |     cart_item = data[index];
115 |     item.push(cart_item)
116 |     localStorage.setItem("mycart", JSON.stringify(item))
117 |     alert("Product added to the cart");
118 |     location.reload();
119 | }
120 | 
121 | 


--------------------------------------------------------------------------------
/app_cart.js:
--------------------------------------------------------------------------------
 1 | const mycart = JSON.parse(localStorage.getItem("mycart"));
 2 | 
 3 | function cart_item() {
 4 | 
 5 |     // data.clear()
 6 |     
 7 |     const card = document.getElementById('cart_card');
 8 |     card.innerHTML = ""
 9 | 
10 |     mycart.map((val, ind) => {
11 |         const div = document.createElement("div");
12 |         div.className = "card_main"
13 |         div.innerHTML = `
14 |        <div id="card_img">
15 |         ${"<img src='" + val.img + "'>"}
16 |         </div>
17 |         <div class="card-body">
18 |             <div class="row">
19 |                 <div class="card-title">
20 |                     ${"<h1>" + val.product_name + "</h1>"}
21 |                     ${"<h3>" + val.price + "</h3>"}
22 |                 </div>
23 |                 <div class="view-btn">
24 |                     <a href="">View Details</a>
25 |                 </div>
26 |             </div>
27 |             <hr/>
28 |             ${"<p>" + val.description + "</p>"}
29 |             <div class="btn-group">
30 |                 <div class="btn">
31 |                     <a onclick="del(${ind})">Cancel</a>
32 |                 </div>
33 |             </div>
34 |         </div>
35 |         `;
36 |         card.appendChild(div);
37 |     })
38 | }
39 | cart_item();
40 | 
41 | function del(index) {
42 |     mycart.splice(index, 1)
43 |     console.log(index);
44 |     localStorage.setItem("mycart", JSON.stringify(mycart));
45 |     location.reload();
46 | }
47 | 
48 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Open Sans", sans-serif;
  8 | }
  9 | 
 10 | html {
 11 |   scroll-behavior: smooth;
 12 | }
 13 | 
 14 | a {
 15 |   text-decoration: none;
 16 |   color: #fff;
 17 | }
 18 | 
 19 | a:hover {
 20 |   color: #ddd;
 21 | }
 22 | 
 23 | /* Header or Navbar */
 24 | header {
 25 |   width: 100%;
 26 |   background-color: #0f1111;
 27 | }
 28 | 
 29 | .navbar {
 30 |   height: 60px;
 31 |   display: flex;
 32 |   align-items: center;
 33 |   justify-content: space-between;
 34 |   cursor: pointer;
 35 |   color: #fff;
 36 |   max-width: 1280px;
 37 |   margin: 0 auto;
 38 | }
 39 | 
 40 | .nav-logo img {
 41 |   margin-top: 10px;
 42 |   width: 128px;
 43 | }
 44 | 
 45 | .address .deliver {
 46 |   margin-left: 20px;
 47 |   font-size: 0.75rem;
 48 |   color: #ccc;
 49 | }
 50 | 
 51 | .address .map-icon {
 52 |   display: flex;
 53 |   align-items: center;
 54 | }
 55 | 
 56 | 
 57 | .nav-search {
 58 |   display: flex;
 59 |   justify-content: space-evenly;
 60 |   max-width: 620px;
 61 |   width: 100%;
 62 |   height: 40px;
 63 |   border-radius: 4px;
 64 | }
 65 | 
 66 | .select-search {
 67 |   background: #f3f3f3;
 68 |   width: 50px;
 69 |   text-align: center;
 70 |   border-top-left-radius: 4px;
 71 |   border-bottom-left-radius: 4px;
 72 |   border: none;
 73 | }
 74 | 
 75 | .search-input {
 76 |   max-width: 600px;
 77 |   width: 100%;
 78 |   font-size: 1rem;
 79 |   border: none;
 80 |   outline: none;
 81 |   padding-left: 10px;
 82 | }
 83 | 
 84 | .search-icon {
 85 |   max-width: 45px;
 86 |   width: 100%;
 87 |   display: flex;
 88 |   justify-content: center;
 89 |   align-items: center;
 90 |   font-size: 1.2rem;
 91 |   background: #febd68;
 92 |   color: #000;
 93 |   cursor: pointer;
 94 |   border-top-right-radius: 4px;
 95 |   border-bottom-right-radius: 4px;
 96 | }
 97 | 
 98 | .sign-in p,
 99 | .returns p {
100 |   font-size: 0.75rem;
101 | }
102 | 
103 | .sign-in,
104 | .returns span {
105 |   font-size: 0.875rem;
106 |   font-weight: 600;
107 | }
108 | 
109 | .cart {
110 |   display: flex;
111 | }
112 | 
113 | .cart .cart-icon {
114 |   font-size: 2.5rem
115 | }
116 | 
117 | .cart p {
118 |   margin-top: 20px;
119 |   font-weight: 500;
120 | }
121 | 
122 | .banner {
123 |   padding: 10px 20px;
124 |   background: #222f3d;
125 |   color: #fff;
126 |   font-size: 0.875rem;
127 | }
128 | 
129 | .banner-content {
130 |   margin: 0 auto;
131 |   max-width: 1280px;
132 |   display: flex;
133 |   align-items: center;
134 |   justify-content: space-between;
135 | }
136 | 
137 | .panel {
138 |   max-width: 1280px;
139 |   display: flex;
140 |   align-items: center;
141 |   gap: 5px;
142 |   cursor: pointer;
143 | }
144 | 
145 | .panel span {
146 |   margin-right: 7px;
147 | }
148 | 
149 | .links {
150 |   display: flex;
151 |   align-items: center;
152 |   list-style: none;
153 |   gap: 15px;
154 |   flex-grow: 1;
155 |   margin-left: 15px;
156 | }
157 | 
158 | .links a {
159 |   padding: 10px 0;
160 | }
161 | 
162 | .deals a {
163 |   font-size: 0.9rem;
164 |   font-weight: 500;
165 |   white-space: nowrap;
166 | }
167 | 
168 | /* Hero Section */
169 | .hero-section {
170 |   height: 400px;
171 |   background-image: url("../images/hero-img.jpg");
172 |   background-position: center;
173 |   background-size: cover;
174 | }
175 | 
176 | /* Shop Section */
177 | .shop-section {
178 |   display: flex;
179 |   align-items: center;
180 |   flex-direction: column;
181 |   background-color: #c3bdbd8c;
182 |   padding: 50px 0;
183 | }
184 | 
185 | .shop-images {
186 |   display: grid;
187 |   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
188 |   gap: 40px;
189 |   max-width: 1280px;
190 |   width: 100%;
191 | }
192 | 
193 | .shop-link {
194 |   background-color: #fff;
195 |   padding: 30px;
196 |   display: flex;
197 |   cursor: pointer;
198 |   flex-direction: column;
199 |   white-space: nowrap;
200 |   border-radius: 10px;
201 | }
202 | 
203 | 
204 | .shop-link img {
205 |   width: 100%;
206 |   height: 280px;
207 |   object-fit: cover;
208 |   margin-bottom: 10px;
209 | }
210 | 
211 | .shop-link h3 {
212 |   margin-bottom: 10px;
213 | }
214 | 
215 | .shop-link a {
216 |   display: inline-block;
217 |   margin-top: 10px;
218 |   font-size: 0.9rem;
219 |   color: blue;
220 |   font-weight: 500;
221 |   transition: color 0.3s ease;
222 | }
223 | 
224 | .shop-link:hover a {
225 |   color: #c7511f;
226 |   text-decoration: underline;
227 | }
228 | 
229 | /* Footer */
230 | .footer-title {
231 |   display: flex;
232 |   align-items: center;
233 |   justify-content: center;
234 |   background-color: #37475a;
235 |   color: #fff;
236 |   font-size: 0.875rem;
237 |   font-weight: 600;
238 |   height: 60px;
239 | }
240 | 
241 | .footer-items {
242 |   display: flex;
243 |   justify-content: space-evenly;
244 |   width: 100%;
245 |   margin: 0 auto;
246 |   background: #232f3e;
247 | }
248 | 
249 | .footer-items h3 {
250 |   font-size: 1rem;
251 |   font-weight: 500;
252 |   color: #fff;
253 |   margin: 20px 0 10px 0;
254 | }
255 | 
256 | .footer-items ul {
257 |   list-style: none;
258 |   margin-bottom: 20px;
259 | }
260 | 
261 | .footer-items li a {
262 |   color: #ddd;
263 |   font-size: 0.875rem;
264 | }
265 | 
266 | .footer-items li a:hover {
267 |   text-decoration: underline;
268 | }
269 | 
270 | 
271 | /* product-page */
272 | #shop-section {
273 |   padding: 100px 0;
274 | }
275 | 
276 | .container {
277 |   max-width: 1300px;
278 |   margin: 0 auto;
279 | }
280 | 
281 | #card {
282 |   overflow: hidden;
283 |   display: flex;
284 |   flex-wrap: wrap;
285 |   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
286 | }
287 | 
288 | .card_main {
289 |   box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
290 |   background-color: #eeeeee;
291 |   margin: 10px;
292 |   border-radius: 10px;
293 |   overflow: hidden;
294 | }
295 | 
296 | #card img {
297 |   width: 100%;
298 |   height: 180px;
299 |   object-fit: cover;
300 | }
301 | 
302 | .card-body {
303 |   padding: 0 20px 20px;
304 |   width: 300px;
305 |   border-radius: 0 0 20px 20px;
306 | 
307 | }
308 | 
309 | .row {
310 |   display: flex;
311 |   justify-content: space-between;
312 |   align-items: center;
313 |   padding: 5px;
314 | }
315 | 
316 | .card-body p {
317 |   color: #3d3d3d;
318 |   margin: 20px 0;
319 |   font-size: 14px;
320 | }
321 | 
322 | .view-btn a {
323 |   padding: 5px 15px;
324 |   border: 1.5px solid #007bff;
325 |   border-radius: 3px;
326 |   text-decoration: none;
327 |   color: #007bff;
328 |   display: inline-block;
329 |   transition: all 0.3s ease-in-out;
330 | }
331 | 
332 | .view-btn :hover {
333 |   background-color: #007bff;
334 |   color: white;
335 | }
336 | 
337 | .btn-group {
338 |   display: flex;
339 | }
340 | 
341 | .btn-group .btn a {
342 |   padding: 5px 15px;
343 |   border: 2px solid #28a745;
344 |   color: #28a745;
345 |   border-radius: 5px;
346 |   margin-left: -2px;
347 |   transition: all 0.3s ease-in-out;
348 | }
349 | 
350 | .btn-group .btn a:hover {
351 |   background-color: #28a745;
352 |   color: #ffff;
353 | }
354 | 
355 | .btn-group a {
356 |   margin: 0 10px;
357 |   text-decoration: none;
358 |   color: #000;
359 | }


--------------------------------------------------------------------------------
/css/style_cart.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: "Open Sans", sans-serif;
  8 | }
  9 | 
 10 | html {
 11 |     scroll-behavior: smooth;
 12 | }
 13 | 
 14 | a {
 15 |     text-decoration: none;
 16 |     color: #fff;
 17 | }
 18 | 
 19 | a:hover {
 20 |     color: #ddd;
 21 | }
 22 | 
 23 | /* Header or Navbar */
 24 | header {
 25 |     width: 100%;
 26 |     background-color: #0f1111;
 27 | }
 28 | 
 29 | .navbar {
 30 |     height: 60px;
 31 |     display: flex;
 32 |     align-items: center;
 33 |     justify-content: space-between;
 34 |     cursor: pointer;
 35 |     color: #fff;
 36 |     max-width: 1280px;
 37 |     margin: 0 auto;
 38 | }
 39 | 
 40 | .nav-logo img {
 41 |     margin-top: 10px;
 42 |     width: 128px;
 43 | }
 44 | 
 45 | .address .deliver {
 46 |     margin-left: 20px;
 47 |     font-size: 0.75rem;
 48 |     color: #ccc;
 49 | }
 50 | 
 51 | .address .map-icon {
 52 |     display: flex;
 53 |     align-items: center;
 54 | }
 55 | 
 56 | 
 57 | .nav-search {
 58 |     display: flex;
 59 |     justify-content: space-evenly;
 60 |     max-width: 620px;
 61 |     width: 100%;
 62 |     height: 40px;
 63 |     border-radius: 4px;
 64 | }
 65 | 
 66 | .select-search {
 67 |     background: #f3f3f3;
 68 |     width: 50px;
 69 |     text-align: center;
 70 |     border-top-left-radius: 4px;
 71 |     border-bottom-left-radius: 4px;
 72 |     border: none;
 73 | }
 74 | 
 75 | .search-input {
 76 |     max-width: 600px;
 77 |     width: 100%;
 78 |     font-size: 1rem;
 79 |     border: none;
 80 |     outline: none;
 81 |     padding-left: 10px;
 82 | }
 83 | 
 84 | .search-icon {
 85 |     max-width: 45px;
 86 |     width: 100%;
 87 |     display: flex;
 88 |     justify-content: center;
 89 |     align-items: center;
 90 |     font-size: 1.2rem;
 91 |     background: #febd68;
 92 |     color: #000;
 93 |     cursor: pointer;
 94 |     border-top-right-radius: 4px;
 95 |     border-bottom-right-radius: 4px;
 96 | }
 97 | 
 98 | .sign-in p,
 99 | .returns p {
100 |     font-size: 0.75rem;
101 | }
102 | 
103 | .sign-in,
104 | .returns span {
105 |     font-size: 0.875rem;
106 |     font-weight: 600;
107 | }
108 | 
109 | .cart {
110 |     display: flex;
111 | }
112 | 
113 | .cart .cart-icon {
114 |     font-size: 2.5rem
115 | }
116 | 
117 | .cart p {
118 |     margin-top: 20px;
119 |     font-weight: 500;
120 | }
121 | 
122 | .banner {
123 |     padding: 10px 20px;
124 |     background: #222f3d;
125 |     color: #fff;
126 |     font-size: 0.875rem;
127 | }
128 | 
129 | .banner-content {
130 |     margin: 0 auto;
131 |     max-width: 1280px;
132 |     display: flex;
133 |     align-items: center;
134 |     justify-content: space-between;
135 | }
136 | 
137 | .panel {
138 |     max-width: 1280px;
139 |     display: flex;
140 |     align-items: center;
141 |     gap: 5px;
142 |     cursor: pointer;
143 | }
144 | 
145 | .panel span {
146 |     margin-right: 7px;
147 | }
148 | 
149 | .links {
150 |     display: flex;
151 |     align-items: center;
152 |     list-style: none;
153 |     gap: 15px;
154 |     flex-grow: 1;
155 |     margin-left: 15px;
156 | }
157 | 
158 | .links a {
159 |     padding: 10px 0;
160 | }
161 | 
162 | .deals a {
163 |     font-size: 0.9rem;
164 |     font-weight: 500;
165 |     white-space: nowrap;
166 | }
167 | 
168 | /* Footer */
169 | .footer-title {
170 |     display: flex;
171 |     align-items: center;
172 |     justify-content: center;
173 |     background-color: #37475a;
174 |     color: #fff;
175 |     font-size: 0.875rem;
176 |     font-weight: 600;
177 |     height: 60px;
178 | }
179 | 
180 | .footer-items {
181 |     display: flex;
182 |     justify-content: space-evenly;
183 |     width: 100%;
184 |     margin: 0 auto;
185 |     background: #232f3e;
186 | }
187 | 
188 | .footer-items h3 {
189 |     font-size: 1rem;
190 |     font-weight: 500;
191 |     color: #fff;
192 |     margin: 20px 0 10px 0;
193 | }
194 | 
195 | .footer-items ul {
196 |     list-style: none;
197 |     margin-bottom: 20px;
198 | }
199 | 
200 | .footer-items li a {
201 |     color: #ddd;
202 |     font-size: 0.875rem;
203 | }
204 | 
205 | .footer-items li a:hover {
206 |     text-decoration: underline;
207 | }
208 | 
209 | 
210 | /* product-page */
211 | #shop-section {
212 |     padding: 100px 0;
213 | }
214 | 
215 | .container {
216 |     max-width: 1300px;
217 |     margin: 0 auto;
218 | }
219 | 
220 | #cart_card {
221 |     overflow: hidden;
222 |     display: flex;
223 |     flex-wrap: wrap;
224 | }
225 | 
226 | .card_main {
227 |     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
228 |     background-color: #e9e9e9;
229 |     margin: 0 20px 20px 0;
230 |     border-radius: 10px;
231 |     overflow: hidden;
232 | }
233 | 
234 | #cart_card img{
235 |     width: 100%;
236 |     height: 180px;
237 |     object-fit: cover;
238 | }
239 | 
240 | .card-body {
241 |     padding: 0 20px 20px;
242 |     width: 300px;
243 |     /* border-radius: 0 0 20px 20px; */
244 | 
245 | }
246 | 
247 | .row {
248 |     display: flex;
249 |     justify-content: space-between;
250 |     align-items: center;
251 |     padding: 5px;
252 | }
253 | 
254 | .card-body p {
255 |     color: #3d3d3d;
256 |     margin: 20px 0;
257 |     font-size: 14px;
258 | }
259 | 
260 | .view-btn a {
261 |     padding: 5px 15px;
262 |     border: 1.5px solid #007bff;
263 |     border-radius: 3px;
264 |     text-decoration: none;
265 |     color: #007bff;
266 |     display: inline-block;
267 |     transition: all 0.3s ease-in-out;
268 | }
269 | 
270 | .view-btn :hover {
271 |     background-color: #007bff;
272 |     color: white;
273 | }
274 | 
275 | .btn-group {
276 |     display: flex;
277 | }
278 | 
279 | .btn-group .btn a {
280 |     padding: 5px 15px;
281 |     border: 2px solid #28a745;
282 |     color: #28a745;
283 |     border-radius: 5px;
284 |     margin-left: -2px;
285 |     transition: all 0.3s ease-in-out;
286 | }
287 | 
288 | .btn-group .btn a:hover {
289 |     background-color: #28a745;
290 |     color: #ffff;
291 | }
292 | 
293 | .btn-group a {
294 |     margin: 0 10px;
295 |     text-decoration: none;
296 |     color: #000;
297 | }
298 | 


--------------------------------------------------------------------------------
/images/amazon_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeveloperRJ49/AddToCartMain/454d02f5d64454331bc67f934cba4d06d18d5175/images/amazon_logo.png


--------------------------------------------------------------------------------
/images/hero-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeveloperRJ49/AddToCartMain/454d02f5d64454331bc67f934cba4d06d18d5175/images/hero-img.jpg


--------------------------------------------------------------------------------
/images/img-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeveloperRJ49/AddToCartMain/454d02f5d64454331bc67f934cba4d06d18d5175/images/img-1.png


--------------------------------------------------------------------------------
/images/img-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeveloperRJ49/AddToCartMain/454d02f5d64454331bc67f934cba4d06d18d5175/images/img-2.png


--------------------------------------------------------------------------------
/images/img-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeveloperRJ49/AddToCartMain/454d02f5d64454331bc67f934cba4d06d18d5175/images/img-3.png


--------------------------------------------------------------------------------
/images/img-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeveloperRJ49/AddToCartMain/454d02f5d64454331bc67f934cba4d06d18d5175/images/img-4.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!-- Coding By CodingNepal - www.codingnepalweb.com -->
  3 | <html lang="en">
  4 | 
  5 | <head>
  6 |   <meta charset="UTF-8">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Amazon Website Clone | CodingNepal</title>
  9 |   <link rel="stylesheet" href="./css/style.css">
 10 |   <link rel="stylesheet"
 11 |     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
 12 | </head>
 13 | 
 14 | <body>
 15 |   <header>
 16 |     <nav class="navbar">
 17 |       <div class="nav-logo">
 18 |         <a href="index.html"><img src="./images/amazon_logo.png" alt="logo"></a>
 19 |       </div>
 20 |       <div class="address">
 21 |         <a href="#" class="deliver">Deliver</a>
 22 |         <div class="map-icon">
 23 |           <span class="material-symbols-outlined">location_on</span>
 24 |           <a href="#" class="location">Gujarat</a>
 25 |         </div>
 26 |       </div>
 27 | 
 28 |       <div class="nav-search">
 29 |         <select class="select-search">
 30 |           <option>All</option>
 31 |           <option>All Categories</option>
 32 |           <option>Amazon Devices</option>
 33 |         </select>
 34 |         <input type="text" placeholder="Search Amazon" class="search-input">
 35 |         <div class="search-icon">
 36 |           <span class="material-symbols-outlined">search</span>
 37 |         </div>
 38 |       </div>
 39 | 
 40 |       <div class="sign-in">
 41 |         <a href="#">
 42 |           <p>Hello, sign in</p>
 43 |           <span>Account &amp; Lists</span>
 44 |         </a>
 45 |       </div>
 46 | 
 47 |       <div class="returns">
 48 |         <a href="./pages/procuct.html">
 49 |           <h3>Products</h3>
 50 |         </a>
 51 |       </div>
 52 | 
 53 |       <div class="cart">
 54 |         <a href="./pages/cart.html">
 55 |           <span class="material-symbols-outlined cart-icon">shopping_cart</span>
 56 |         </a>
 57 |         <p>Cart</p>
 58 |       </div>
 59 |     </nav>
 60 | 
 61 |     <div class="banner">
 62 |       <div class="banner-content">
 63 |         <div class="panel">
 64 |           <span class="material-symbols-outlined">menu</span>
 65 |           <a href="#">All</a>
 66 |         </div>
 67 | 
 68 |         <ul class="links">
 69 |           <li><a href="#">Today's Deals</a></li>
 70 |           <li><a href="#">Customer Service</a></li>
 71 |           <li><a href="#">Registry</a></li>
 72 |           <li><a href="#">Gift Cards</a></li>
 73 |           <li><a href="#">Sell</a></li>
 74 |         </ul>
 75 |         <div class="deals">
 76 |           <a href="#">Shop deals in Electronics</a>
 77 |         </div>
 78 |       </div>
 79 |     </div>
 80 |   </header>
 81 | 
 82 |   <section class="hero-section">
 83 |   </section>
 84 | 
 85 |   <section class="shop-section">
 86 |     <div class="shop-images">
 87 |       <div class="shop-link">
 88 |         <h3>Shop Laptops &amp; Tables</h3>
 89 |         <img src="./images/img-1.png" alt="card">
 90 |         <a href="#">Shop now</a>
 91 |       </div>
 92 |       <div class="shop-link">
 93 |         <h3>Shop Smartwatches</h3>
 94 |         <img src="./images/img-2.png" alt="card">
 95 |         <a href="#">Shop now</a>
 96 |       </div>
 97 |       <div class="shop-link">
 98 |         <h3>Create with Strip Lights</h3>
 99 |         <img src="./images/img-3.png" alt="card">
100 |         <a href="#">Shop now</a>
101 |       </div>
102 |       <div class="shop-link">
103 |         <h3>Home Refresh Ideas</h3>
104 |         <img src="./images/img-4.png" alt="card">
105 |         <a href="#">Shop now</a>
106 |       </div>
107 |     </div>
108 |   </section>
109 |   <button onclick="product()">click</button>
110 |   <footer>
111 |     <a href="#" class="footer-title">
112 |       Back to top
113 |     </a>
114 |     <div class="footer-items">
115 |       <ul>
116 |         <h3>Get to Know Us</h3>
117 |         <li><a href="#">About us</a></li>
118 |         <li><a href="#">Careers</a></li>
119 |         <li><a href="#">Press Release</a></li>
120 |         <li><a href="#">Amazon Science</a></li>
121 |       </ul>
122 |       <ul>
123 |         <h3>Connect with Us</h3>
124 |         <li><a href="#">Facebook</a></li>
125 |         <li><a href="#">Twitter</a></li>
126 |         <li><a href="#">Instagram</a></li>
127 |       </ul>
128 |       <ul>
129 |         <h3>Make Money with Us</h3>
130 |         <li><a href="#">Sell on Amazon</a></li>
131 |         <li><a href="#">Sell under Amazon Accelerator</a></li>
132 |         <li><a href="#">Protect and Build Your Brand</a></li>
133 |         <li><a href="#">Amazon Global Selling</a></li>
134 |         <li><a href="#">Become an Affiliate</a></li>
135 |         <li><a href="#">Fulfillment by Amazon</a></li>
136 |         <li><a href="#">Advertise Your Products</a></li>
137 |         <li><a href="#">Amazon Pay on Merchants</a></li>
138 |       </ul>
139 |       <ul>
140 |         <h3>Let Us Help You</h3>
141 |         <li><a href="#">COVID-19 and Amazon</a></li>
142 |         <li><a href="#">Your Account</a></li>
143 |         <li><a href="#">Return Centre</a></li>
144 |         <li><a href="#">100% Purchase Protection</a></li>
145 |         <li><a href="#">Amazon App Download</a></li>
146 |         <li><a href="#">Help</a></li>
147 |       </ul>
148 |     </div>
149 |   </footer>
150 | 
151 | </body>
152 | 
153 | </html>


--------------------------------------------------------------------------------
/pages/cart.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <link rel="stylesheet"
  9 |         href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
 10 |     <link rel="stylesheet" href="../css/style_cart.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <header>
 15 |         <nav class="navbar">
 16 |             <div class="nav-logo">
 17 |                 <a href="../index.html"><img src="../images/amazon_logo.png" alt="logo"></a>
 18 |             </div>
 19 |             <div class="address">
 20 |                 <a href="#" class="deliver">Deliver</a>
 21 |                 <div class="map-icon">
 22 |                     <span class="material-symbols-outlined">location_on</span>
 23 |                     <a href="#" class="location">Gujarat</a>
 24 |                 </div>
 25 |             </div>
 26 | 
 27 |             <div class="nav-search">
 28 |                 <select class="select-search">
 29 |                     <option>All</option>
 30 |                     <option>All Categories</option>
 31 |                     <option>Amazon Devices</option>
 32 |                 </select>
 33 |                 <input type="text" placeholder="Search Amazon" class="search-input">
 34 |                 <div class="search-icon">
 35 |                     <span class="material-symbols-outlined">search</span>
 36 |                 </div>
 37 |             </div>
 38 | 
 39 |             <div class="sign-in">
 40 |                 <a href="#">
 41 |                     <p>Hello, sign in</p>
 42 |                     <span>Account &amp; Lists</span>
 43 |                 </a>
 44 |             </div>
 45 | 
 46 |             <div class="returns">
 47 |                 <a href="./procuct.html">
 48 |                     <h3>Products</h3>
 49 |                 </a>
 50 |             </div>
 51 | 
 52 |             <div class="cart">
 53 |                 <a href="./cart.html">
 54 |                     <span class="material-symbols-outlined cart-icon">shopping_cart</span>
 55 |                 </a>
 56 |                 <p>Cart</p>
 57 |             </div>
 58 |         </nav>
 59 |     </header>
 60 |     <section id="shop-section">
 61 |         <div class="container row">
 62 |             <div id="cart_card">
 63 |             </div>
 64 |         </div>
 65 |     </section>
 66 | 
 67 |     <footer>
 68 |         <a href="#" class="footer-title">
 69 |             Back to top
 70 |         </a>
 71 |         <div class="footer-items">
 72 |             <ul>
 73 |                 <h3>Get to Know Us</h3>
 74 |                 <li><a href="#">About us</a></li>
 75 |                 <li><a href="#">Careers</a></li>
 76 |                 <li><a href="#">Press Release</a></li>
 77 |                 <li><a href="#">Amazon Science</a></li>
 78 |             </ul>
 79 |             <ul>
 80 |                 <h3>Connect with Us</h3>
 81 |                 <li><a href="#">Facebook</a></li>
 82 |                 <li><a href="#">Twitter</a></li>
 83 |                 <li><a href="#">Instagram</a></li>
 84 |             </ul>
 85 |             <ul>
 86 |                 <h3>Make Money with Us</h3>
 87 |                 <li><a href="#">Sell on Amazon</a></li>
 88 |                 <li><a href="#">Sell under Amazon Accelerator</a></li>
 89 |                 <li><a href="#">Protect and Build Your Brand</a></li>
 90 |                 <li><a href="#">Amazon Global Selling</a></li>
 91 |                 <li><a href="#">Become an Affiliate</a></li>
 92 |                 <li><a href="#">Fulfillment by Amazon</a></li>
 93 |                 <li><a href="#">Advertise Your Products</a></li>
 94 |                 <li><a href="#">Amazon Pay on Merchants</a></li>
 95 |             </ul>
 96 |             <ul>
 97 |                 <h3>Let Us Help You</h3>
 98 |                 <li><a href="#">COVID-19 and Amazon</a></li>
 99 |                 <li><a href="#">Your Account</a></li>
100 |                 <li><a href="#">Return Centre</a></li>
101 |                 <li><a href="#">100% Purchase Protection</a></li>
102 |                 <li><a href="#">Amazon App Download</a></li>
103 |                 <li><a href="#">Help</a></li>
104 |             </ul>
105 |         </div>
106 |     </footer>
107 | 
108 |     <script src="../app_cart.js"></script>
109 | </body>
110 | 
111 | </html>


--------------------------------------------------------------------------------
/pages/procuct.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Document</title>
  8 |     <link rel="stylesheet"
  9 |         href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
 10 |     <link rel="stylesheet" href="../css/style.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <header>
 15 |         <nav class="navbar">
 16 |             <div class="nav-logo">
 17 |                 <a href="../index.html"><img src="../images/amazon_logo.png" alt="logo"></a>
 18 |             </div>
 19 |             <div class="address">
 20 |                 <a href="#" class="deliver">Deliver</a>
 21 |                 <div class="map-icon">
 22 |                     <span class="material-symbols-outlined">location_on</span>
 23 |                     <a href="#" class="location">Gujarat</a>
 24 |                 </div>
 25 |             </div>
 26 | 
 27 |             <div class="nav-search">
 28 |                 <select class="select-search">
 29 |                     <option>All</option>
 30 |                     <option>All Categories</option>
 31 |                     <option>Amazon Devices</option>
 32 |                 </select>
 33 |                 <input type="text" placeholder="Search Amazon" class="search-input">
 34 |                 <div class="search-icon">
 35 |                     <span class="material-symbols-outlined">search</span>
 36 |                 </div>
 37 |             </div>
 38 | 
 39 |             <div class="sign-in">
 40 |                 <a href="#">
 41 |                     <p>Hello, sign in</p>
 42 |                     <span>Account &amp; Lists</span>
 43 |                 </a>
 44 |             </div>
 45 | 
 46 |             <div class="returns">
 47 |                 <a href="./procuct.html">
 48 |                     <h3>Products</h3>
 49 |                 </a>
 50 |             </div>
 51 | 
 52 |             <div class="cart">
 53 |                 <a href="./cart.html">
 54 |                     <span class="material-symbols-outlined cart-icon">shopping_cart</span>
 55 |                 </a>
 56 |                 <p>Cart</p>
 57 |             </div>
 58 |         </nav>
 59 |     </header>
 60 |     <section id="shop-section">
 61 |         <div class="container row">
 62 |             <div id="card">
 63 |             </div>
 64 |         </div>
 65 |     </section>
 66 | 
 67 |     <footer>
 68 |         <a href="#" class="footer-title">
 69 |             Back to top
 70 |         </a>
 71 |         <div class="footer-items">
 72 |             <ul>
 73 |                 <h3>Get to Know Us</h3>
 74 |                 <li><a href="#">About us</a></li>
 75 |                 <li><a href="#">Careers</a></li>
 76 |                 <li><a href="#">Press Release</a></li>
 77 |                 <li><a href="#">Amazon Science</a></li>
 78 |             </ul>
 79 |             <ul>
 80 |                 <h3>Connect with Us</h3>
 81 |                 <li><a href="#">Facebook</a></li>
 82 |                 <li><a href="#">Twitter</a></li>
 83 |                 <li><a href="#">Instagram</a></li>
 84 |             </ul>
 85 |             <ul>
 86 |                 <h3>Make Money with Us</h3>
 87 |                 <li><a href="#">Sell on Amazon</a></li>
 88 |                 <li><a href="#">Sell under Amazon Accelerator</a></li>
 89 |                 <li><a href="#">Protect and Build Your Brand</a></li>
 90 |                 <li><a href="#">Amazon Global Selling</a></li>
 91 |                 <li><a href="#">Become an Affiliate</a></li>
 92 |                 <li><a href="#">Fulfillment by Amazon</a></li>
 93 |                 <li><a href="#">Advertise Your Products</a></li>
 94 |                 <li><a href="#">Amazon Pay on Merchants</a></li>
 95 |             </ul>
 96 |             <ul>
 97 |                 <h3>Let Us Help You</h3>
 98 |                 <li><a href="#">COVID-19 and Amazon</a></li>
 99 |                 <li><a href="#">Your Account</a></li>
100 |                 <li><a href="#">Return Centre</a></li>
101 |                 <li><a href="#">100% Purchase Protection</a></li>
102 |                 <li><a href="#">Amazon App Download</a></li>
103 |                 <li><a href="#">Help</a></li>
104 |             </ul>
105 |         </div>
106 |     </footer>
107 | 
108 |     <script src="../app.js"></script>
109 | </body>
110 | 
111 | </html>


--------------------------------------------------------------------------------