├── amazon.html
├── backend
    └── products.json
├── checkout.html
├── data
    └── products.js
├── images
    ├── amazon-logo-white.png
    ├── amazon-logo.png
    ├── amazon-mobile-logo-white.png
    ├── amazon-mobile-logo.png
    ├── appliance-instructions.png
    ├── appliance-warranty.png
    ├── clothing-size-chart.png
    ├── icons
    │   ├── buy-again.png
    │   ├── cart-icon.png
    │   ├── checkmark.png
    │   ├── checkout-lock-icon.png
    │   ├── hamburger-menu.png
    │   └── search-icon.png
    ├── products
    │   ├── 6-piece-non-stick-baking-set.webp
    │   ├── 6-piece-white-dinner-plate-set.jpg
    │   ├── adults-plain-cotton-tshirt-2-pack-teal.jpg
    │   ├── athletic-cotton-socks-6-pairs.jpg
    │   ├── backpack.jpg
    │   ├── bathroom-rug.jpg
    │   ├── black-2-slot-toaster.jpg
    │   ├── blackout-curtain-set-beige.webp
    │   ├── blackout-curtains-black.jpg
    │   ├── coffeemaker-with-glass-carafe-black.jpg
    │   ├── cotton-bath-towels-teal.webp
    │   ├── countertop-blender-64-oz.jpg
    │   ├── double-elongated-twist-french-wire-earrings.webp
    │   ├── duvet-cover-set-blue-twin.jpg
    │   ├── electric-glass-and-steel-hot-water-kettle.webp
    │   ├── facial-tissue-2-ply-18-boxes.jpg
    │   ├── floral-mixing-bowl-set.jpg
    │   ├── intermediate-composite-basketball.jpg
    │   ├── kitchen-paper-towels-30-pack.jpg
    │   ├── knit-athletic-sneakers-gray.jpg
    │   ├── knit-athletic-sneakers-pink.webp
    │   ├── liquid-laundry-detergent-plain.jpg
    │   ├── luxury-tower-set-6-piece.jpg
    │   ├── men-athletic-shoes-green.jpg
    │   ├── men-chino-pants-beige.jpg
    │   ├── men-cozy-fleece-zip-up-hoodie-red.jpg
    │   ├── men-golf-polo-t-shirt-blue.jpg
    │   ├── men-navigator-sunglasses-brown.jpg
    │   ├── men-slim-fit-summer-shorts-gray.jpg
    │   ├── non-stick-cooking-set-15-pieces.webp
    │   ├── plain-hooded-fleece-sweatshirt-yellow.jpg
    │   ├── round-airtight-food-storage-containers.jpg
    │   ├── round-sunglasses-black.jpg
    │   ├── sky-flower-stud-earrings.webp
    │   ├── straw-sunhat.webp
    │   ├── trash-can-with-foot-pedal-50-liter.jpg
    │   ├── umbrella.jpg
    │   ├── vanity-mirror-silver.jpg
    │   ├── variations
    │   │   ├── adults-plain-cotton-tshirt-2-pack-black.jpg
    │   │   ├── adults-plain-cotton-tshirt-2-pack-plus-black.jpg
    │   │   ├── adults-plain-cotton-tshirt-2-pack-red.jpg
    │   │   ├── adults-plain-cotton-tshirt-2-pack-teal.jpg
    │   │   ├── duvet-cover-set-blue-queen.jpg
    │   │   ├── duvet-cover-set-blue-twin.jpg
    │   │   ├── duvet-cover-set-red-queen.jpg
    │   │   ├── duvet-cover-set-red-twin.jpg
    │   │   ├── liquid-laundry-detergent-lavender.jpg
    │   │   ├── liquid-laundry-detergent-plain.jpg
    │   │   ├── luxury-tower-set-4-piece.jpg
    │   │   ├── luxury-tower-set-6-piece.jpg
    │   │   ├── men-athletic-shoes-black.jpg
    │   │   ├── men-athletic-shoes-green.jpg
    │   │   ├── men-chino-pants-beige.jpg
    │   │   ├── men-chino-pants-black.jpg
    │   │   ├── men-chino-pants-green.jpg
    │   │   ├── men-cozy-fleece-zip-up-hoodie-black.jpg
    │   │   ├── men-cozy-fleece-zip-up-hoodie-red.jpg
    │   │   ├── men-golf-polo-t-shirt-black.jpg
    │   │   ├── men-golf-polo-t-shirt-blue.jpg
    │   │   ├── men-golf-polo-t-shirt-red.jpg
    │   │   ├── men-navigator-sunglasses-brown.jpg
    │   │   ├── men-navigator-sunglasses-silver.jpg
    │   │   ├── men-slim-fit-summer-shorts-beige.jpg
    │   │   ├── men-slim-fit-summer-shorts-black.jpg
    │   │   ├── men-slim-fit-summer-shorts-gray.jpg
    │   │   ├── plain-hooded-fleece-sweatshirt-teal.jpg
    │   │   ├── plain-hooded-fleece-sweatshirt-yellow.jpg
    │   │   ├── round-sunglasses-black.jpg
    │   │   ├── round-sunglasses-gold.jpg
    │   │   ├── trash-can-with-foot-pedal-30-liter-tall.jpg
    │   │   ├── trash-can-with-foot-pedal-50-liter.jpg
    │   │   ├── women-french-terry-fleece-jogger-camo.jpg
    │   │   ├── women-french-terry-fleece-jogger-gray.jpg
    │   │   ├── women-knit-ballet-flat-black.jpg
    │   │   ├── women-knit-ballet-flat-gray.jpg
    │   │   ├── women-knit-ballet-flat-leopard.jpg
    │   │   ├── women-stretch-popover-hoodie-black.jpg
    │   │   ├── women-stretch-popover-hoodie-blue.jpg
    │   │   └── women-stretch-popover-hoodie-gray.jpg
    │   ├── women-beach-sandals.jpg
    │   ├── women-chiffon-beachwear-coverup-black.jpg
    │   ├── women-chunky-beanie-gray.webp
    │   ├── women-french-terry-fleece-jogger-camo.jpg
    │   ├── women-knit-ballet-flat-black.jpg
    │   └── women-stretch-popover-hoodie-black.jpg
    └── ratings
    │   ├── rating-0.png
    │   ├── rating-05.png
    │   ├── rating-10.png
    │   ├── rating-15.png
    │   ├── rating-20.png
    │   ├── rating-25.png
    │   ├── rating-30.png
    │   ├── rating-35.png
    │   ├── rating-40.png
    │   ├── rating-45.png
    │   └── rating-50.png
├── orders.html
├── styles
    ├── pages
    │   ├── amazon.css
    │   ├── checkout
    │   │   ├── checkout-header.css
    │   │   └── checkout.css
    │   ├── orders.css
    │   └── tracking.css
    └── shared
    │   ├── amazon-header.css
    │   └── general.css
└── tracking.html


/amazon.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Amazon Project</title>
  5 | 
  6 |     <!-- This code is needed for responsive design to work.
  7 |       (Responsive design = make the website look good on
  8 |       smaller screen sizes like a phone or a tablet). -->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 10 | 
 11 |     <!-- Load a font called Roboto from Google Fonts. -->
 12 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 13 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 15 | 
 16 |     <!-- Here are the CSS files for this page. -->
 17 |     <link rel="stylesheet" href="styles/shared/general.css">
 18 |     <link rel="stylesheet" href="styles/shared/amazon-header.css">
 19 |     <link rel="stylesheet" href="styles/pages/amazon.css">
 20 |   </head>
 21 |   <body>
 22 |     <div class="amazon-header">
 23 |       <div class="amazon-header-left-section">
 24 |         <a href="amazon.html" class="header-link">
 25 |           <img class="amazon-logo"
 26 |             src="images/amazon-logo-white.png">
 27 |           <img class="amazon-mobile-logo"
 28 |             src="images/amazon-mobile-logo-white.png">
 29 |         </a>
 30 |       </div>
 31 | 
 32 |       <div class="amazon-header-middle-section">
 33 |         <input class="search-bar" type="text" placeholder="Search">
 34 | 
 35 |         <button class="search-button">
 36 |           <img class="search-icon" src="images/icons/search-icon.png">
 37 |         </button>
 38 |       </div>
 39 | 
 40 |       <div class="amazon-header-right-section">
 41 |         <a class="orders-link header-link" href="orders.html">
 42 |           <span class="returns-text">Returns</span>
 43 |           <span class="orders-text">& Orders</span>
 44 |         </a>
 45 | 
 46 |         <a class="cart-link header-link" href="checkout.html">
 47 |           <img class="cart-icon" src="images/icons/cart-icon.png">
 48 |           <div class="cart-quantity">3</div>
 49 |           <div class="cart-text">Cart</div>
 50 |         </a>
 51 |       </div>
 52 |     </div>
 53 |     
 54 |     <div class="main">
 55 |       <div class="products-grid">
 56 |         <div class="product-container">
 57 |           <div class="product-image-container">
 58 |             <img class="product-image"
 59 |               src="images/products/athletic-cotton-socks-6-pairs.jpg">
 60 |           </div>
 61 | 
 62 |           <div class="product-name limit-text-to-2-lines">
 63 |             Black and Gray Athletic Cotton Socks - 6 Pairs
 64 |           </div>
 65 | 
 66 |           <div class="product-rating-container">
 67 |             <img class="product-rating-stars"
 68 |               src="images/ratings/rating-45.png">
 69 |             <div class="product-rating-count link-primary">
 70 |               87
 71 |             </div>
 72 |           </div>
 73 | 
 74 |           <div class="product-price">
 75 |             $10.90
 76 |           </div>
 77 | 
 78 |           <div class="product-quantity-container">
 79 |             <select>
 80 |               <option selected value="1">1</option>
 81 |               <option value="2">2</option>
 82 |               <option value="3">3</option>
 83 |               <option value="4">4</option>
 84 |               <option value="5">5</option>
 85 |               <option value="6">6</option>
 86 |               <option value="7">7</option>
 87 |               <option value="8">8</option>
 88 |               <option value="9">9</option>
 89 |               <option value="10">10</option>
 90 |             </select>
 91 |           </div>
 92 | 
 93 |           <div class="product-spacer"></div>
 94 | 
 95 |           <div class="added-to-cart">
 96 |             <img src="images/icons/checkmark.png">
 97 |             Added
 98 |           </div>
 99 | 
100 |           <button class="add-to-cart-button button-primary">
101 |             Add to Cart
102 |           </button>
103 |         </div>
104 | 
105 |         <div class="product-container">
106 |           <div class="product-image-container">
107 |             <img class="product-image"
108 |               src="images/products/intermediate-composite-basketball.jpg">
109 |           </div>
110 | 
111 |           <div class="product-name limit-text-to-2-lines">
112 |             Intermediate Size Basketball
113 |           </div>
114 | 
115 |           <div class="product-rating-container">
116 |             <img class="product-rating-stars"
117 |               src="images/ratings/rating-40.png">
118 |             <div class="product-rating-count link-primary">
119 |               127
120 |             </div>
121 |           </div>
122 | 
123 |           <div class="product-price">
124 |             $20.95
125 |           </div>
126 | 
127 |           <div class="product-quantity-container">
128 |             <select>
129 |               <option selected value="1">1</option>
130 |               <option value="2">2</option>
131 |               <option value="3">3</option>
132 |               <option value="4">4</option>
133 |               <option value="5">5</option>
134 |               <option value="6">6</option>
135 |               <option value="7">7</option>
136 |               <option value="8">8</option>
137 |               <option value="9">9</option>
138 |               <option value="10">10</option>
139 |             </select>
140 |           </div>
141 | 
142 |           <div class="product-spacer"></div>
143 | 
144 |           <div class="added-to-cart">
145 |             <img src="images/icons/checkmark.png">
146 |             Added
147 |           </div>
148 | 
149 |           <button class="add-to-cart-button button-primary">
150 |             Add to Cart
151 |           </button>
152 |         </div>
153 | 
154 |         <div class="product-container">
155 |           <div class="product-image-container">
156 |             <img class="product-image"
157 |               src="images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg">
158 |           </div>
159 | 
160 |           <div class="product-name limit-text-to-2-lines">
161 |             Adults Plain Cotton T-Shirt - 2 Pack
162 |           </div>
163 | 
164 |           <div class="product-rating-container">
165 |             <img class="product-rating-stars"
166 |               src="images/ratings/rating-45.png">
167 |             <div class="product-rating-count link-primary">
168 |               56
169 |             </div>
170 |           </div>
171 | 
172 |           <div class="product-price">
173 |             $7.99
174 |           </div>
175 | 
176 |           <div class="product-quantity-container">
177 |             <select>
178 |               <option selected value="1">1</option>
179 |               <option value="2">2</option>
180 |               <option value="3">3</option>
181 |               <option value="4">4</option>
182 |               <option value="5">5</option>
183 |               <option value="6">6</option>
184 |               <option value="7">7</option>
185 |               <option value="8">8</option>
186 |               <option value="9">9</option>
187 |               <option value="10">10</option>
188 |             </select>
189 |           </div>
190 | 
191 |           <div class="product-spacer"></div>
192 | 
193 |           <div class="added-to-cart">
194 |             <img src="images/icons/checkmark.png">
195 |             Added
196 |           </div>
197 | 
198 |           <button class="add-to-cart-button button-primary">
199 |             Add to Cart
200 |           </button>
201 |         </div>
202 |       </div>
203 |     </div>
204 |   </body>
205 | </html>
206 | 


--------------------------------------------------------------------------------
/backend/products.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
  4 |     "image": "images/products/athletic-cotton-socks-6-pairs.jpg",
  5 |     "name": "Black and Gray Athletic Cotton Socks - 6 Pairs",
  6 |     "rating": {
  7 |       "stars": 4.5,
  8 |       "count": 87
  9 |     },
 10 |     "priceCents": 1090,
 11 |     "keywords": [
 12 |       "socks",
 13 |       "sports",
 14 |       "apparel"
 15 |     ]
 16 |   },
 17 |   {
 18 |     "id": "15b6fc6f-327a-4ec4-896f-486349e85a3d",
 19 |     "image": "images/products/intermediate-composite-basketball.jpg",
 20 |     "name": "Intermediate Size Basketball",
 21 |     "rating": {
 22 |       "stars": 4,
 23 |       "count": 127
 24 |     },
 25 |     "priceCents": 2095,
 26 |     "keywords": [
 27 |       "sports",
 28 |       "basketballs"
 29 |     ]
 30 |   },
 31 |   {
 32 |     "id": "83d4ca15-0f35-48f5-b7a3-1ea210004f2e",
 33 |     "image": "images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg",
 34 |     "name": "Adults Plain Cotton T-Shirt - 2 Pack",
 35 |     "rating": {
 36 |       "stars": 4.5,
 37 |       "count": 56
 38 |     },
 39 |     "priceCents": 799,
 40 |     "keywords": [
 41 |       "tshirts",
 42 |       "apparel",
 43 |       "mens"
 44 |     ],
 45 |     "type": "clothing",
 46 |     "sizeChartLink": "images/clothing-size-chart.png"
 47 |   },
 48 |   {
 49 |     "id": "54e0eccd-8f36-462b-b68a-8182611d9add",
 50 |     "image": "images/products/black-2-slot-toaster.jpg",
 51 |     "name": "2 Slot Toaster - Black",
 52 |     "rating": {
 53 |       "stars": 5,
 54 |       "count": 2197
 55 |     },
 56 |     "priceCents": 1899,
 57 |     "keywords": [
 58 |       "toaster",
 59 |       "kitchen",
 60 |       "appliances"
 61 |     ]
 62 |   },
 63 |   {
 64 |     "id": "3ebe75dc-64d2-4137-8860-1f5a963e534b",
 65 |     "image": "images/products/6-piece-white-dinner-plate-set.jpg",
 66 |     "name": "6 Piece White Dinner Plate Set",
 67 |     "rating": {
 68 |       "stars": 4,
 69 |       "count": 37
 70 |     },
 71 |     "priceCents": 2067,
 72 |     "keywords": [
 73 |       "plates",
 74 |       "kitchen",
 75 |       "dining"
 76 |     ]
 77 |   },
 78 |   {
 79 |     "id": "8c9c52b5-5a19-4bcb-a5d1-158a74287c53",
 80 |     "image": "images/products/6-piece-non-stick-baking-set.webp",
 81 |     "name": "6-Piece Nonstick, Carbon Steel Oven Bakeware Baking Set",
 82 |     "rating": {
 83 |       "stars": 4.5,
 84 |       "count": 175
 85 |     },
 86 |     "priceCents": 3499,
 87 |     "keywords": [
 88 |       "kitchen",
 89 |       "cookware"
 90 |     ]
 91 |   },
 92 |   {
 93 |     "id": "dd82ca78-a18b-4e2a-9250-31e67412f98d",
 94 |     "image": "images/products/plain-hooded-fleece-sweatshirt-yellow.jpg",
 95 |     "name": "Plain Hooded Fleece Sweatshirt",
 96 |     "rating": {
 97 |       "stars": 4.5,
 98 |       "count": 317
 99 |     },
100 |     "priceCents": 2400,
101 |     "keywords": [
102 |       "hoodies",
103 |       "sweaters",
104 |       "apparel"
105 |     ]
106 |   },
107 |   {
108 |     "id": "77919bbe-0e56-475b-adde-4f24dfed3a04",
109 |     "image": "images/products/luxury-tower-set-6-piece.jpg",
110 |     "name": "Luxury Towel Set - Graphite Gray",
111 |     "rating": {
112 |       "stars": 4.5,
113 |       "count": 144
114 |     },
115 |     "priceCents": 3599,
116 |     "keywords": [
117 |       "bathroom",
118 |       "washroom",
119 |       "restroom",
120 |       "towels",
121 |       "bath towels"
122 |     ]
123 |   },
124 |   {
125 |     "id": "3fdfe8d6-9a15-4979-b459-585b0d0545b9",
126 |     "image": "images/products/liquid-laundry-detergent-plain.jpg",
127 |     "name": "Liquid Laundry Detergent, 110 Loads, 82.5 Fl Oz",
128 |     "rating": {
129 |       "stars": 4.5,
130 |       "count": 305
131 |     },
132 |     "priceCents": 2899,
133 |     "keywords": [
134 |       "bathroom",
135 |       "cleaning"
136 |     ]
137 |   },
138 |   {
139 |     "id": "58b4fc92-e98c-42aa-8c55-b6b79996769a",
140 |     "image": "images/products/knit-athletic-sneakers-gray.jpg",
141 |     "name": "Waterproof Knit Athletic Sneakers - Gray",
142 |     "rating": {
143 |       "stars": 4,
144 |       "count": 89
145 |     },
146 |     "priceCents": 3390,
147 |     "keywords": [
148 |       "shoes",
149 |       "running shoes",
150 |       "footwear"
151 |     ]
152 |   },
153 |   {
154 |     "id": "5968897c-4d27-4872-89f6-5bcb052746d7",
155 |     "image": "images/products/women-chiffon-beachwear-coverup-black.jpg",
156 |     "name": "Women's Chiffon Beachwear Cover Up - Black",
157 |     "rating": {
158 |       "stars": 4.5,
159 |       "count": 235
160 |     },
161 |     "priceCents": 2070,
162 |     "keywords": [
163 |       "robe",
164 |       "swimsuit",
165 |       "swimming",
166 |       "bathing",
167 |       "apparel"
168 |     ],
169 |     "type": "clothing",
170 |     "sizeChartLink": "images/clothing-size-chart.png"
171 |   },
172 |   {
173 |     "id": "aad29d11-ea98-41ee-9285-b916638cac4a",
174 |     "image": "images/products/round-sunglasses-black.jpg",
175 |     "name": "Round Sunglasses",
176 |     "rating": {
177 |       "stars": 4.5,
178 |       "count": 30
179 |     },
180 |     "priceCents": 1560,
181 |     "keywords": [
182 |       "accessories",
183 |       "shades"
184 |     ]
185 |   },
186 |   {
187 |     "id": "04701903-bc79-49c6-bc11-1af7e3651358",
188 |     "image": "images/products/women-beach-sandals.jpg",
189 |     "name": "Women's Two Strap Buckle Sandals - Tan",
190 |     "rating": {
191 |       "stars": 4.5,
192 |       "count": 562
193 |     },
194 |     "priceCents": 2499,
195 |     "keywords": [
196 |       "footwear",
197 |       "sandals",
198 |       "womens",
199 |       "beach",
200 |       "summer"
201 |     ]
202 |   },
203 |   {
204 |     "id": "901eb2ca-386d-432e-82f0-6fb1ee7bf969",
205 |     "image": "images/products/blackout-curtain-set-beige.webp",
206 |     "name": "Blackout Curtains Set 4-Pack - Beige",
207 |     "rating": {
208 |       "stars": 4.5,
209 |       "count": 232
210 |     },
211 |     "priceCents": 4599,
212 |     "keywords": [
213 |       "bedroom",
214 |       "curtains",
215 |       "home"
216 |     ]
217 |   },
218 |   {
219 |     "id": "82bb68d7-ebc9-476a-989c-c78a40ee5cd9",
220 |     "image": "images/products/men-slim-fit-summer-shorts-gray.jpg",
221 |     "name": "Men's Slim-Fit Summer Shorts",
222 |     "rating": {
223 |       "stars": 4,
224 |       "count": 160
225 |     },
226 |     "priceCents": 1699,
227 |     "keywords": [
228 |       "shorts",
229 |       "apparel",
230 |       "mens"
231 |     ]
232 |   },
233 |   {
234 |     "id": "c2a82c5e-aff4-435f-9975-517cfaba2ece",
235 |     "image": "images/products/electric-glass-and-steel-hot-water-kettle.webp",
236 |     "name": "Electric Glass and Steel Hot Tea Water Kettle - 1.7-Liter",
237 |     "rating": {
238 |       "stars": 5,
239 |       "count": 846
240 |     },
241 |     "priceCents": 3074,
242 |     "keywords": [
243 |       "water boiler",
244 |       "appliances",
245 |       "kitchen"
246 |     ]
247 |   },
248 |   {
249 |     "id": "6b07d4e7-f540-454e-8a1e-363f25dbae7d",
250 |     "image": "images/products/facial-tissue-2-ply-18-boxes.jpg",
251 |     "name": "Ultra Soft Tissue 2-Ply - 18 Box",
252 |     "rating": {
253 |       "stars": 4,
254 |       "count": 99
255 |     },
256 |     "priceCents": 2374,
257 |     "keywords": [
258 |       "kleenex",
259 |       "tissues",
260 |       "kitchen",
261 |       "tissues box",
262 |       "napkins"
263 |     ]
264 |   },
265 |   {
266 |     "id": "a82c6bac-3067-4e68-a5ba-d827ac0be010",
267 |     "image": "images/products/straw-sunhat.webp",
268 |     "name": "Straw Lifeguard Sun Hat",
269 |     "rating": {
270 |       "stars": 4,
271 |       "count": 215
272 |     },
273 |     "priceCents": 2200,
274 |     "keywords": [
275 |       "hats",
276 |       "straw hats",
277 |       "summer",
278 |       "apparel"
279 |     ]
280 |   },
281 |   {
282 |     "id": "e4f64a65-1377-42bc-89a5-e572d19252e2",
283 |     "image": "images/products/sky-flower-stud-earrings.webp",
284 |     "name": "Sterling Silver Sky Flower Stud Earrings",
285 |     "rating": {
286 |       "stars": 4.5,
287 |       "count": 52
288 |     },
289 |     "priceCents": 1799,
290 |     "keywords": [
291 |       "jewelry",
292 |       "accessories",
293 |       "womens"
294 |     ]
295 |   },
296 |   {
297 |     "id": "b0f17cc5-8b40-4ca5-9142-b61fe3d98c85",
298 |     "image": "images/products/women-stretch-popover-hoodie-black.jpg",
299 |     "name": "Women's Stretch Popover Hoodie",
300 |     "rating": {
301 |       "stars": 4.5,
302 |       "count": 2465
303 |     },
304 |     "priceCents": 1374,
305 |     "keywords": [
306 |       "hooded",
307 |       "hoodies",
308 |       "sweaters",
309 |       "womens",
310 |       "apparel"
311 |     ],
312 |     "type": "clothing",
313 |     "sizeChartLink": "images/clothing-size-chart.png"
314 |   },
315 |   {
316 |     "id": "a93a101d-79ef-4cf3-a6cf-6dbe532a1b4a",
317 |     "image": "images/products/bathroom-rug.jpg",
318 |     "name": "Bathroom Bath Rug Mat 20 x 31 Inch - Grey",
319 |     "rating": {
320 |       "stars": 4.5,
321 |       "count": 119
322 |     },
323 |     "priceCents": 1250,
324 |     "keywords": [
325 |       "bathmat",
326 |       "bathroom",
327 |       "home"
328 |     ]
329 |   },
330 |   {
331 |     "id": "4f4fbcc2-4e72-45cc-935c-9e13d79cc57f",
332 |     "image": "images/products/women-knit-ballet-flat-black.jpg",
333 |     "name": "Women's Knit Ballet Flat",
334 |     "rating": {
335 |       "stars": 4,
336 |       "count": 326
337 |     },
338 |     "priceCents": 2640,
339 |     "keywords": [
340 |       "shoes",
341 |       "flats",
342 |       "womens",
343 |       "footwear"
344 |     ]
345 |   },
346 |   {
347 |     "id": "8b5a2ee1-6055-422a-a666-b34ba28b76d4",
348 |     "image": "images/products/men-golf-polo-t-shirt-blue.jpg",
349 |     "name": "Men's Regular-Fit Quick-Dry Golf Polo Shirt",
350 |     "rating": {
351 |       "stars": 4.5,
352 |       "count": 2556
353 |     },
354 |     "priceCents": 1599,
355 |     "keywords": [
356 |       "tshirts",
357 |       "shirts",
358 |       "apparel",
359 |       "mens"
360 |     ],
361 |     "type": "clothing",
362 |     "sizeChartLink": "images/clothing-size-chart.png"
363 |   },
364 |   {
365 |     "id": "b86ddc8b-3501-4b17-9889-a3bad6fb585f",
366 |     "image": "images/products/trash-can-with-foot-pedal-50-liter.jpg",
367 |     "name": "Trash Can with Foot Pedal - Brushed Stainless Steel",
368 |     "rating": {
369 |       "stars": 4.5,
370 |       "count": 2286
371 |     },
372 |     "priceCents": 8300,
373 |     "keywords": [
374 |       "garbage",
375 |       "bins",
376 |       "cans",
377 |       "kitchen"
378 |     ]
379 |   },
380 |   {
381 |     "id": "19c6a64a-5463-4d45-9af8-e41140a4100c",
382 |     "image": "images/products/duvet-cover-set-blue-twin.jpg",
383 |     "name": "Duvet Cover Set with Zipper Closure",
384 |     "rating": {
385 |       "stars": 4,
386 |       "count": 456
387 |     },
388 |     "priceCents": 2399,
389 |     "keywords": [
390 |       "bedroom",
391 |       "bed sheets",
392 |       "sheets",
393 |       "covers",
394 |       "home"
395 |     ]
396 |   },
397 |   {
398 |     "id": "d2785924-743d-49b3-8f03-ec258e640503",
399 |     "image": "images/products/women-chunky-beanie-gray.webp",
400 |     "name": "Women's Chunky Cable Beanie - Gray",
401 |     "rating": {
402 |       "stars": 5,
403 |       "count": 83
404 |     },
405 |     "priceCents": 1250,
406 |     "keywords": [
407 |       "hats",
408 |       "winter hats",
409 |       "beanies",
410 |       "tuques",
411 |       "apparel",
412 |       "womens"
413 |     ]
414 |   },
415 |   {
416 |     "id": "ee1f7c56-f977-40a4-9642-12ba5072e2b0",
417 |     "image": "images/products/men-chino-pants-beige.jpg",
418 |     "name": "Men's Classic-fit Pleated Chino Pants",
419 |     "rating": {
420 |       "stars": 4.5,
421 |       "count": 9017
422 |     },
423 |     "priceCents": 2290,
424 |     "keywords": [
425 |       "pants",
426 |       "apparel",
427 |       "mens"
428 |     ]
429 |   },
430 |   {
431 |     "id": "1c079479-8586-494f-ab53-219325432536",
432 |     "image": "images/products/men-athletic-shoes-green.jpg",
433 |     "name": "Men's Athletic Sneaker",
434 |     "rating": {
435 |       "stars": 4,
436 |       "count": 229
437 |     },
438 |     "priceCents": 3890,
439 |     "keywords": [
440 |       "shoes",
441 |       "running shoes",
442 |       "footwear",
443 |       "mens"
444 |     ]
445 |   },
446 |   {
447 |     "id": "4df68c27-fd59-4a6a-bbd1-e754ddb6d53c",
448 |     "image": "images/products/men-navigator-sunglasses-brown.jpg",
449 |     "name": "Men's Navigator Sunglasses Pilot",
450 |     "rating": {
451 |       "stars": 3.5,
452 |       "count": 42
453 |     },
454 |     "priceCents": 1690,
455 |     "keywords": [
456 |       "sunglasses",
457 |       "glasses",
458 |       "accessories",
459 |       "shades"
460 |     ]
461 |   },
462 |   {
463 |     "id": "4e37dd03-3b23-4bc6-9ff8-44e112a92c64",
464 |     "image": "images/products/non-stick-cooking-set-15-pieces.webp",
465 |     "name": "Non-Stick Cookware Set, Pots, Pans and Utensils - 15 Pieces",
466 |     "rating": {
467 |       "stars": 4.5,
468 |       "count": 511
469 |     },
470 |     "priceCents": 6797,
471 |     "keywords": [
472 |       "cooking set",
473 |       "kitchen"
474 |     ]
475 |   },
476 |   {
477 |     "id": "a434b69f-1bc1-482d-9ce7-cd7f4a66ce8d",
478 |     "image": "images/products/vanity-mirror-silver.jpg",
479 |     "name": "Vanity Mirror with Heavy Base - Chrome",
480 |     "rating": {
481 |       "stars": 4.5,
482 |       "count": 130
483 |     },
484 |     "priceCents": 1649,
485 |     "keywords": [
486 |       "bathroom",
487 |       "washroom",
488 |       "mirrors",
489 |       "home"
490 |     ]
491 |   },
492 |   {
493 |     "id": "a45cfa0a-66d6-4dc7-9475-e2b01595f7d7",
494 |     "image": "images/products/women-french-terry-fleece-jogger-camo.jpg",
495 |     "name": "Women's Fleece Jogger Sweatpant",
496 |     "rating": {
497 |       "stars": 4.5,
498 |       "count": 248
499 |     },
500 |     "priceCents": 2400,
501 |     "keywords": [
502 |       "pants",
503 |       "sweatpants",
504 |       "jogging",
505 |       "apparel",
506 |       "womens"
507 |     ]
508 |   },
509 |   {
510 |     "id": "d339adf3-e004-4c20-a120-40e8874c66cb",
511 |     "image": "images/products/double-elongated-twist-french-wire-earrings.webp",
512 |     "name": "Double Oval Twist French Wire Earrings - Gold",
513 |     "rating": {
514 |       "stars": 4.5,
515 |       "count": 117
516 |     },
517 |     "priceCents": 2400,
518 |     "keywords": [
519 |       "accessories",
520 |       "womens"
521 |     ]
522 |   },
523 |   {
524 |     "id": "d37a651a-d501-483b-aae6-a9659b0757a0",
525 |     "image": "images/products/round-airtight-food-storage-containers.jpg",
526 |     "name": "Round Airtight Food Storage Containers - 5 Piece",
527 |     "rating": {
528 |       "stars": 4,
529 |       "count": 126
530 |     },
531 |     "priceCents": 2899,
532 |     "keywords": [
533 |       "boxes",
534 |       "food containers",
535 |       "kitchen"
536 |     ]
537 |   },
538 |   {
539 |     "id": "0d7f9afa-2efe-4fd9-b0fd-ba5663e0a524",
540 |     "image": "images/products/coffeemaker-with-glass-carafe-black.jpg",
541 |     "name": "Coffeemaker with Glass Carafe and Reusable Filter - 25 Oz, Black",
542 |     "rating": {
543 |       "stars": 4.5,
544 |       "count": 1211
545 |     },
546 |     "priceCents": 2250,
547 |     "keywords": [
548 |       "coffeemakers",
549 |       "kitchen",
550 |       "appliances"
551 |     ]
552 |   },
553 |   {
554 |     "id": "02e3a47e-dd68-467e-9f71-8bf6f723fdae",
555 |     "image": "images/products/blackout-curtains-black.jpg",
556 |     "name": "Blackout Curtains Set 42 x 84-Inch - Black, 2 Panels",
557 |     "rating": {
558 |       "stars": 4.5,
559 |       "count": 363
560 |     },
561 |     "priceCents": 3099,
562 |     "keywords": [
563 |       "bedroom",
564 |       "home"
565 |     ]
566 |   },
567 |   {
568 |     "id": "8a53b080-6d40-4a65-ab26-b24ecf700bce",
569 |     "image": "images/products/cotton-bath-towels-teal.webp",
570 |     "name": "100% Cotton Bath Towels - 2 Pack, Light Teal",
571 |     "rating": {
572 |       "stars": 4.5,
573 |       "count": 93
574 |     },
575 |     "priceCents": 2110,
576 |     "keywords": [
577 |       "bathroom",
578 |       "home",
579 |       "towels"
580 |     ]
581 |   },
582 |   {
583 |     "id": "10ed8504-57db-433c-b0a3-fc71a35c88a1",
584 |     "image": "images/products/knit-athletic-sneakers-pink.webp",
585 |     "name": "Waterproof Knit Athletic Sneakers - Pink",
586 |     "rating": {
587 |       "stars": 4,
588 |       "count": 89
589 |     },
590 |     "priceCents": 3390,
591 |     "keywords": [
592 |       "shoes",
593 |       "running shoes",
594 |       "footwear",
595 |       "womens"
596 |     ]
597 |   },
598 |   {
599 |     "id": "77a845b1-16ed-4eac-bdf9-5b591882113d",
600 |     "image": "images/products/countertop-blender-64-oz.jpg",
601 |     "name": "Countertop Blender - 64oz, 1400 Watts",
602 |     "rating": {
603 |       "stars": 4,
604 |       "count": 3
605 |     },
606 |     "priceCents": 10747,
607 |     "keywords": [
608 |       "food blenders",
609 |       "kitchen",
610 |       "appliances"
611 |     ]
612 |   },
613 |   {
614 |     "id": "36c64692-677f-4f58-b5ec-0dc2cf109e27",
615 |     "image": "images/products/floral-mixing-bowl-set.jpg",
616 |     "name": "10-Piece Mixing Bowl Set with Lids - Floral",
617 |     "rating": {
618 |       "stars": 5,
619 |       "count": 679
620 |     },
621 |     "priceCents": 3899,
622 |     "keywords": [
623 |       "mixing bowls",
624 |       "baking",
625 |       "cookware",
626 |       "kitchen"
627 |     ]
628 |   },
629 |   {
630 |     "id": "aaa65ef3-8d6f-4eb3-bc9b-a6ea49047d8f",
631 |     "image": "images/products/kitchen-paper-towels-30-pack.jpg",
632 |     "name": "2-Ply Kitchen Paper Towels - 30 Pack",
633 |     "rating": {
634 |       "stars": 4.5,
635 |       "count": 1045
636 |     },
637 |     "priceCents": 5799,
638 |     "keywords": [
639 |       "kitchen",
640 |       "kitchen towels",
641 |       "tissues"
642 |     ]
643 |   },
644 |   {
645 |     "id": "bc2847e9-5323-403f-b7cf-57fde044a955",
646 |     "image": "images/products/men-cozy-fleece-zip-up-hoodie-red.jpg",
647 |     "name": "Men's Full-Zip Hooded Fleece Sweatshirt",
648 |     "rating": {
649 |       "stars": 4.5,
650 |       "count": 3157
651 |     },
652 |     "priceCents": 2400,
653 |     "keywords": [
654 |       "sweaters",
655 |       "hoodies",
656 |       "apparel",
657 |       "mens"
658 |     ]
659 |   }
660 | ]


--------------------------------------------------------------------------------
/checkout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Checkout</title>
  5 | 
  6 |     <!-- This code is needed for responsive design to work.
  7 |       (Responsive design = make the website look good on
  8 |       smaller screen sizes like a phone or a tablet). -->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 10 | 
 11 |     <!-- Load a font called Roboto from Google Fonts. -->
 12 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 13 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 15 | 
 16 |     <!-- Here are the CSS files for this page. -->
 17 |     <link rel="stylesheet" href="styles/shared/general.css">
 18 |     <link rel="stylesheet" href="styles/pages/checkout/checkout-header.css">
 19 |     <link rel="stylesheet" href="styles/pages/checkout/checkout.css">
 20 |   </head>
 21 |   <body>
 22 |     <div class="checkout-header">
 23 |       <div class="header-content">
 24 |         <div class="checkout-header-left-section">
 25 |           <a href="amazon.html">
 26 |             <img class="amazon-logo" src="images/amazon-logo.png">
 27 |             <img class="amazon-mobile-logo" src="images/amazon-mobile-logo.png">
 28 |           </a>
 29 |         </div>
 30 | 
 31 |         <div class="checkout-header-middle-section">
 32 |           Checkout (<a class="return-to-home-link"
 33 |             href="amazon.html">3 items</a>)
 34 |         </div>
 35 | 
 36 |         <div class="checkout-header-right-section">
 37 |           <img src="images/icons/checkout-lock-icon.png">
 38 |         </div>
 39 |       </div>
 40 |     </div>
 41 | 
 42 |     <div class="main">
 43 |       <div class="page-title">Review your order</div>
 44 | 
 45 |       <div class="checkout-grid">
 46 |         <div class="order-summary">
 47 |           <div class="cart-item-container">
 48 |             <div class="delivery-date">
 49 |               Delivery date: Tuesday, June 21
 50 |             </div>
 51 | 
 52 |             <div class="cart-item-details-grid">
 53 |               <img class="product-image"
 54 |                 src="images/products/athletic-cotton-socks-6-pairs.jpg">
 55 | 
 56 |               <div class="cart-item-details">
 57 |                 <div class="product-name">
 58 |                   Black and Gray Athletic Cotton Socks - 6 Pairs
 59 |                 </div>
 60 |                 <div class="product-price">
 61 |                   $10.90
 62 |                 </div>
 63 |                 <div class="product-quantity">
 64 |                   <span>
 65 |                     Quantity: <span class="quantity-label">2</span>
 66 |                   </span>
 67 |                   <span class="update-quantity-link link-primary">
 68 |                     Update
 69 |                   </span>
 70 |                   <span class="delete-quantity-link link-primary">
 71 |                     Delete
 72 |                   </span>
 73 |                 </div>
 74 |               </div>
 75 | 
 76 |               <div class="delivery-options">
 77 |                 <div class="delivery-options-title">
 78 |                   Choose a delivery option:
 79 |                 </div>
 80 |                 <div class="delivery-option">
 81 |                   <input type="radio" checked
 82 |                     class="delivery-option-input"
 83 |                     name="delivery-option-1">
 84 |                   <div>
 85 |                     <div class="delivery-option-date">
 86 |                       Tuesday, June 21
 87 |                     </div>
 88 |                     <div class="delivery-option-price">
 89 |                       FREE Shipping
 90 |                     </div>
 91 |                   </div>
 92 |                 </div>
 93 |                 <div class="delivery-option">
 94 |                   <input type="radio"
 95 |                     class="delivery-option-input"
 96 |                     name="delivery-option-1">
 97 |                   <div>
 98 |                     <div class="delivery-option-date">
 99 |                       Wednesday, June 15
100 |                     </div>
101 |                     <div class="delivery-option-price">
102 |                       $4.99 - Shipping
103 |                     </div>
104 |                   </div>
105 |                 </div>
106 |                 <div class="delivery-option">
107 |                   <input type="radio"
108 |                     class="delivery-option-input"
109 |                     name="delivery-option-1">
110 |                   <div>
111 |                     <div class="delivery-option-date">
112 |                       Monday, June 13
113 |                     </div>
114 |                     <div class="delivery-option-price">
115 |                       $9.99 - Shipping
116 |                     </div>
117 |                   </div>
118 |                 </div>
119 |               </div>
120 |             </div>
121 |           </div>
122 | 
123 |           <div class="cart-item-container">
124 |             <div class="delivery-date">
125 |               Delivery date: Wednesday, June 15
126 |             </div>
127 | 
128 |             <div class="cart-item-details-grid">
129 |               <img class="product-image"
130 |                 src="images/products/intermediate-composite-basketball.jpg">
131 | 
132 |               <div class="cart-item-details">
133 |                 <div class="product-name">
134 |                   Intermediate Size Basketball
135 |                 </div>
136 |                 <div class="product-price">
137 |                   $20.95
138 |                 </div>
139 |                 <div class="product-quantity">
140 |                   <span>
141 |                     Quantity: <span class="quantity-label">1</span>
142 |                   </span>
143 |                   <span class="update-quantity-link link-primary">
144 |                     Update
145 |                   </span>
146 |                   <span class="delete-quantity-link link-primary">
147 |                     Delete
148 |                   </span>
149 |                 </div>
150 |               </div>
151 | 
152 |               <div class="delivery-options">
153 |                 <div class="delivery-options-title">
154 |                   Choose a delivery option:
155 |                 </div>
156 | 
157 |                 <div class="delivery-option">
158 |                   <input type="radio" class="delivery-option-input"
159 |                     name="delivery-option-2">
160 |                   <div>
161 |                     <div class="delivery-option-date">
162 |                       Tuesday, June 21
163 |                     </div>
164 |                     <div class="delivery-option-price">
165 |                       FREE Shipping
166 |                     </div>
167 |                   </div>
168 |                 </div>
169 |                 <div class="delivery-option">
170 |                   <input type="radio" checked class="delivery-option-input"
171 |                     name="delivery-option-2">
172 |                   <div>
173 |                     <div class="delivery-option-date">
174 |                       Wednesday, June 15
175 |                     </div>
176 |                     <div class="delivery-option-price">
177 |                       $4.99 - Shipping
178 |                     </div>
179 |                   </div>
180 |                 </div>
181 |                 <div class="delivery-option">
182 |                   <input type="radio" class="delivery-option-input"
183 |                     name="delivery-option-2">
184 |                   <div>
185 |                     <div class="delivery-option-date">
186 |                       Monday, June 13
187 |                     </div>
188 |                     <div class="delivery-option-price">
189 |                       $9.99 - Shipping
190 |                     </div>
191 |                   </div>
192 |                 </div>
193 |               </div>
194 |             </div>
195 |           </div>
196 |         </div>
197 | 
198 |         <div class="payment-summary">
199 |           <div class="payment-summary-title">
200 |             Order Summary
201 |           </div>
202 | 
203 |           <div class="payment-summary-row">
204 |             <div>Items (3):</div>
205 |             <div class="payment-summary-money">$42.75</div>
206 |           </div>
207 | 
208 |           <div class="payment-summary-row">
209 |             <div>Shipping &amp; handling:</div>
210 |             <div class="payment-summary-money">$4.99</div>
211 |           </div>
212 | 
213 |           <div class="payment-summary-row subtotal-row">
214 |             <div>Total before tax:</div>
215 |             <div class="payment-summary-money">$47.74</div>
216 |           </div>
217 | 
218 |           <div class="payment-summary-row">
219 |             <div>Estimated tax (10%):</div>
220 |             <div class="payment-summary-money">$4.77</div>
221 |           </div>
222 | 
223 |           <div class="payment-summary-row total-row">
224 |             <div>Order total:</div>
225 |             <div class="payment-summary-money">$52.51</div>
226 |           </div>
227 | 
228 |           <button class="place-order-button button-primary">
229 |             Place your order
230 |           </button>
231 |         </div>
232 |       </div>
233 |     </div>
234 |   </body>
235 | </html>
236 | 


--------------------------------------------------------------------------------
/data/products.js:
--------------------------------------------------------------------------------
  1 | const products = [
  2 |   {
  3 |     id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
  4 |     image: "images/products/athletic-cotton-socks-6-pairs.jpg",
  5 |     name: "Black and Gray Athletic Cotton Socks - 6 Pairs",
  6 |     rating: {
  7 |       stars: 4.5,
  8 |       count: 87
  9 |     },
 10 |     priceCents: 1090,
 11 |     keywords: [
 12 |       "socks",
 13 |       "sports",
 14 |       "apparel"
 15 |     ]
 16 |   },
 17 |   {
 18 |     id: "15b6fc6f-327a-4ec4-896f-486349e85a3d",
 19 |     image: "images/products/intermediate-composite-basketball.jpg",
 20 |     name: "Intermediate Size Basketball",
 21 |     rating: {
 22 |       stars: 4,
 23 |       count: 127
 24 |     },
 25 |     priceCents: 2095,
 26 |     keywords: [
 27 |       "sports",
 28 |       "basketballs"
 29 |     ]
 30 |   },
 31 |   {
 32 |     id: "83d4ca15-0f35-48f5-b7a3-1ea210004f2e",
 33 |     image: "images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg",
 34 |     name: "Adults Plain Cotton T-Shirt - 2 Pack",
 35 |     rating: {
 36 |       stars: 4.5,
 37 |       count: 56
 38 |     },
 39 |     priceCents: 799,
 40 |     keywords: [
 41 |       "tshirts",
 42 |       "apparel",
 43 |       "mens"
 44 |     ],
 45 |     type: "clothing",
 46 |     sizeChartLink: "images/clothing-size-chart.png"
 47 |   },
 48 |   {
 49 |     id: "54e0eccd-8f36-462b-b68a-8182611d9add",
 50 |     image: "images/products/black-2-slot-toaster.jpg",
 51 |     name: "2 Slot Toaster - Black",
 52 |     rating: {
 53 |       stars: 5,
 54 |       count: 2197
 55 |     },
 56 |     priceCents: 1899,
 57 |     keywords: [
 58 |       "toaster",
 59 |       "kitchen",
 60 |       "appliances"
 61 |     ]
 62 |   },
 63 |   {
 64 |     id: "3ebe75dc-64d2-4137-8860-1f5a963e534b",
 65 |     image: "images/products/6-piece-white-dinner-plate-set.jpg",
 66 |     name: "6 Piece White Dinner Plate Set",
 67 |     rating: {
 68 |       stars: 4,
 69 |       count: 37
 70 |     },
 71 |     priceCents: 2067,
 72 |     keywords: [
 73 |       "plates",
 74 |       "kitchen",
 75 |       "dining"
 76 |     ]
 77 |   },
 78 |   {
 79 |     id: "8c9c52b5-5a19-4bcb-a5d1-158a74287c53",
 80 |     image: "images/products/6-piece-non-stick-baking-set.webp",
 81 |     name: "6-Piece Nonstick, Carbon Steel Oven Bakeware Baking Set",
 82 |     rating: {
 83 |       stars: 4.5,
 84 |       count: 175
 85 |     },
 86 |     priceCents: 3499,
 87 |     keywords: [
 88 |       "kitchen",
 89 |       "cookware"
 90 |     ]
 91 |   },
 92 |   {
 93 |     id: "dd82ca78-a18b-4e2a-9250-31e67412f98d",
 94 |     image: "images/products/plain-hooded-fleece-sweatshirt-yellow.jpg",
 95 |     name: "Plain Hooded Fleece Sweatshirt",
 96 |     rating: {
 97 |       stars: 4.5,
 98 |       count: 317
 99 |     },
100 |     priceCents: 2400,
101 |     keywords: [
102 |       "hoodies",
103 |       "sweaters",
104 |       "apparel"
105 |     ]
106 |   },
107 |   {
108 |     id: "77919bbe-0e56-475b-adde-4f24dfed3a04",
109 |     image: "images/products/luxury-tower-set-6-piece.jpg",
110 |     name: "Luxury Towel Set - Graphite Gray",
111 |     rating: {
112 |       stars: 4.5,
113 |       count: 144
114 |     },
115 |     priceCents: 3599,
116 |     keywords: [
117 |       "bathroom",
118 |       "washroom",
119 |       "restroom",
120 |       "towels",
121 |       "bath towels"
122 |     ]
123 |   },
124 |   {
125 |     id: "3fdfe8d6-9a15-4979-b459-585b0d0545b9",
126 |     image: "images/products/liquid-laundry-detergent-plain.jpg",
127 |     name: "Liquid Laundry Detergent, 110 Loads, 82.5 Fl Oz",
128 |     rating: {
129 |       stars: 4.5,
130 |       count: 305
131 |     },
132 |     priceCents: 2899,
133 |     keywords: [
134 |       "bathroom",
135 |       "cleaning"
136 |     ]
137 |   },
138 |   {
139 |     id: "58b4fc92-e98c-42aa-8c55-b6b79996769a",
140 |     image: "images/products/knit-athletic-sneakers-gray.jpg",
141 |     name: "Waterproof Knit Athletic Sneakers - Gray",
142 |     rating: {
143 |       stars: 4,
144 |       count: 89
145 |     },
146 |     priceCents: 3390,
147 |     keywords: [
148 |       "shoes",
149 |       "running shoes",
150 |       "footwear"
151 |     ]
152 |   },
153 |   {
154 |     id: "5968897c-4d27-4872-89f6-5bcb052746d7",
155 |     image: "images/products/women-chiffon-beachwear-coverup-black.jpg",
156 |     name: "Women's Chiffon Beachwear Cover Up - Black",
157 |     rating: {
158 |       stars: 4.5,
159 |       count: 235
160 |     },
161 |     priceCents: 2070,
162 |     keywords: [
163 |       "robe",
164 |       "swimsuit",
165 |       "swimming",
166 |       "bathing",
167 |       "apparel"
168 |     ],
169 |     type: "clothing",
170 |     sizeChartLink: "images/clothing-size-chart.png"
171 |   },
172 |   {
173 |     id: "aad29d11-ea98-41ee-9285-b916638cac4a",
174 |     image: "images/products/round-sunglasses-black.jpg",
175 |     name: "Round Sunglasses",
176 |     rating: {
177 |       stars: 4.5,
178 |       count: 30
179 |     },
180 |     priceCents: 1560,
181 |     keywords: [
182 |       "accessories",
183 |       "shades"
184 |     ]
185 |   },
186 |   {
187 |     id: "04701903-bc79-49c6-bc11-1af7e3651358",
188 |     image: "images/products/women-beach-sandals.jpg",
189 |     name: "Women's Two Strap Buckle Sandals - Tan",
190 |     rating: {
191 |       stars: 4.5,
192 |       count: 562
193 |     },
194 |     priceCents: 2499,
195 |     keywords: [
196 |       "footwear",
197 |       "sandals",
198 |       "womens",
199 |       "beach",
200 |       "summer"
201 |     ]
202 |   },
203 |   {
204 |     id: "901eb2ca-386d-432e-82f0-6fb1ee7bf969",
205 |     image: "images/products/blackout-curtain-set-beige.webp",
206 |     name: "Blackout Curtains Set 4-Pack - Beige",
207 |     rating: {
208 |       stars: 4.5,
209 |       count: 232
210 |     },
211 |     priceCents: 4599,
212 |     keywords: [
213 |       "bedroom",
214 |       "curtains",
215 |       "home"
216 |     ]
217 |   },
218 |   {
219 |     id: "82bb68d7-ebc9-476a-989c-c78a40ee5cd9",
220 |     image: "images/products/men-slim-fit-summer-shorts-gray.jpg",
221 |     name: "Men's Slim-Fit Summer Shorts",
222 |     rating: {
223 |       stars: 4,
224 |       count: 160
225 |     },
226 |     priceCents: 1699,
227 |     keywords: [
228 |       "shorts",
229 |       "apparel",
230 |       "mens"
231 |     ]
232 |   },
233 |   {
234 |     id: "c2a82c5e-aff4-435f-9975-517cfaba2ece",
235 |     image: "images/products/electric-glass-and-steel-hot-water-kettle.webp",
236 |     name: "Electric Glass and Steel Hot Tea Water Kettle - 1.7-Liter",
237 |     rating: {
238 |       stars: 5,
239 |       count: 846
240 |     },
241 |     priceCents: 3074,
242 |     keywords: [
243 |       "water boiler",
244 |       "appliances",
245 |       "kitchen"
246 |     ]
247 |   },
248 |   {
249 |     id: "6b07d4e7-f540-454e-8a1e-363f25dbae7d",
250 |     image: "images/products/facial-tissue-2-ply-18-boxes.jpg",
251 |     name: "Ultra Soft Tissue 2-Ply - 18 Box",
252 |     rating: {
253 |       stars: 4,
254 |       count: 99
255 |     },
256 |     priceCents: 2374,
257 |     keywords: [
258 |       "kleenex",
259 |       "tissues",
260 |       "kitchen",
261 |       "tissues box",
262 |       "napkins"
263 |     ]
264 |   },
265 |   {
266 |     id: "a82c6bac-3067-4e68-a5ba-d827ac0be010",
267 |     image: "images/products/straw-sunhat.webp",
268 |     name: "Straw Lifeguard Sun Hat",
269 |     rating: {
270 |       stars: 4,
271 |       count: 215
272 |     },
273 |     priceCents: 2200,
274 |     keywords: [
275 |       "hats",
276 |       "straw hats",
277 |       "summer",
278 |       "apparel"
279 |     ]
280 |   },
281 |   {
282 |     id: "e4f64a65-1377-42bc-89a5-e572d19252e2",
283 |     image: "images/products/sky-flower-stud-earrings.webp",
284 |     name: "Sterling Silver Sky Flower Stud Earrings",
285 |     rating: {
286 |       stars: 4.5,
287 |       count: 52
288 |     },
289 |     priceCents: 1799,
290 |     keywords: [
291 |       "jewelry",
292 |       "accessories",
293 |       "womens"
294 |     ]
295 |   },
296 |   {
297 |     id: "b0f17cc5-8b40-4ca5-9142-b61fe3d98c85",
298 |     image: "images/products/women-stretch-popover-hoodie-black.jpg",
299 |     name: "Women's Stretch Popover Hoodie",
300 |     rating: {
301 |       stars: 4.5,
302 |       count: 2465
303 |     },
304 |     priceCents: 1374,
305 |     keywords: [
306 |       "hooded",
307 |       "hoodies",
308 |       "sweaters",
309 |       "womens",
310 |       "apparel"
311 |     ],
312 |     type: "clothing",
313 |     sizeChartLink: "images/clothing-size-chart.png"
314 |   },
315 |   {
316 |     id: "a93a101d-79ef-4cf3-a6cf-6dbe532a1b4a",
317 |     image: "images/products/bathroom-rug.jpg",
318 |     name: "Bathroom Bath Rug Mat 20 x 31 Inch - Grey",
319 |     rating: {
320 |       stars: 4.5,
321 |       count: 119
322 |     },
323 |     priceCents: 1250,
324 |     keywords: [
325 |       "bathmat",
326 |       "bathroom",
327 |       "home"
328 |     ]
329 |   },
330 |   {
331 |     id: "4f4fbcc2-4e72-45cc-935c-9e13d79cc57f",
332 |     image: "images/products/women-knit-ballet-flat-black.jpg",
333 |     name: "Women's Knit Ballet Flat",
334 |     rating: {
335 |       stars: 4,
336 |       count: 326
337 |     },
338 |     priceCents: 2640,
339 |     keywords: [
340 |       "shoes",
341 |       "flats",
342 |       "womens",
343 |       "footwear"
344 |     ]
345 |   },
346 |   {
347 |     id: "8b5a2ee1-6055-422a-a666-b34ba28b76d4",
348 |     image: "images/products/men-golf-polo-t-shirt-blue.jpg",
349 |     name: "Men's Regular-Fit Quick-Dry Golf Polo Shirt",
350 |     rating: {
351 |       stars: 4.5,
352 |       count: 2556
353 |     },
354 |     priceCents: 1599,
355 |     keywords: [
356 |       "tshirts",
357 |       "shirts",
358 |       "apparel",
359 |       "mens"
360 |     ],
361 |     type: "clothing",
362 |     sizeChartLink: "images/clothing-size-chart.png"
363 |   },
364 |   {
365 |     id: "b86ddc8b-3501-4b17-9889-a3bad6fb585f",
366 |     image: "images/products/trash-can-with-foot-pedal-50-liter.jpg",
367 |     name: "Trash Can with Foot Pedal - Brushed Stainless Steel",
368 |     rating: {
369 |       stars: 4.5,
370 |       count: 2286
371 |     },
372 |     priceCents: 8300,
373 |     keywords: [
374 |       "garbage",
375 |       "bins",
376 |       "cans",
377 |       "kitchen"
378 |     ]
379 |   },
380 |   {
381 |     id: "19c6a64a-5463-4d45-9af8-e41140a4100c",
382 |     image: "images/products/duvet-cover-set-blue-twin.jpg",
383 |     name: "Duvet Cover Set with Zipper Closure",
384 |     rating: {
385 |       stars: 4,
386 |       count: 456
387 |     },
388 |     priceCents: 2399,
389 |     keywords: [
390 |       "bedroom",
391 |       "bed sheets",
392 |       "sheets",
393 |       "covers",
394 |       "home"
395 |     ]
396 |   },
397 |   {
398 |     id: "d2785924-743d-49b3-8f03-ec258e640503",
399 |     image: "images/products/women-chunky-beanie-gray.webp",
400 |     name: "Women's Chunky Cable Beanie - Gray",
401 |     rating: {
402 |       stars: 5,
403 |       count: 83
404 |     },
405 |     priceCents: 1250,
406 |     keywords: [
407 |       "hats",
408 |       "winter hats",
409 |       "beanies",
410 |       "tuques",
411 |       "apparel",
412 |       "womens"
413 |     ]
414 |   },
415 |   {
416 |     id: "ee1f7c56-f977-40a4-9642-12ba5072e2b0",
417 |     image: "images/products/men-chino-pants-beige.jpg",
418 |     name: "Men's Classic-fit Pleated Chino Pants",
419 |     rating: {
420 |       stars: 4.5,
421 |       count: 9017
422 |     },
423 |     priceCents: 2290,
424 |     keywords: [
425 |       "pants",
426 |       "apparel",
427 |       "mens"
428 |     ]
429 |   },
430 |   {
431 |     id: "1c079479-8586-494f-ab53-219325432536",
432 |     image: "images/products/men-athletic-shoes-green.jpg",
433 |     name: "Men's Athletic Sneaker",
434 |     rating: {
435 |       stars: 4,
436 |       count: 229
437 |     },
438 |     priceCents: 3890,
439 |     keywords: [
440 |       "shoes",
441 |       "running shoes",
442 |       "footwear",
443 |       "mens"
444 |     ]
445 |   },
446 |   {
447 |     id: "4df68c27-fd59-4a6a-bbd1-e754ddb6d53c",
448 |     image: "images/products/men-navigator-sunglasses-brown.jpg",
449 |     name: "Men's Navigator Sunglasses Pilot",
450 |     rating: {
451 |       stars: 3.5,
452 |       count: 42
453 |     },
454 |     priceCents: 1690,
455 |     keywords: [
456 |       "sunglasses",
457 |       "glasses",
458 |       "accessories",
459 |       "shades"
460 |     ]
461 |   },
462 |   {
463 |     id: "4e37dd03-3b23-4bc6-9ff8-44e112a92c64",
464 |     image: "images/products/non-stick-cooking-set-15-pieces.webp",
465 |     name: "Non-Stick Cookware Set, Pots, Pans and Utensils - 15 Pieces",
466 |     rating: {
467 |       stars: 4.5,
468 |       count: 511
469 |     },
470 |     priceCents: 6797,
471 |     keywords: [
472 |       "cooking set",
473 |       "kitchen"
474 |     ]
475 |   },
476 |   {
477 |     id: "a434b69f-1bc1-482d-9ce7-cd7f4a66ce8d",
478 |     image: "images/products/vanity-mirror-silver.jpg",
479 |     name: "Vanity Mirror with Heavy Base - Chrome",
480 |     rating: {
481 |       stars: 4.5,
482 |       count: 130
483 |     },
484 |     priceCents: 1649,
485 |     keywords: [
486 |       "bathroom",
487 |       "washroom",
488 |       "mirrors",
489 |       "home"
490 |     ]
491 |   },
492 |   {
493 |     id: "a45cfa0a-66d6-4dc7-9475-e2b01595f7d7",
494 |     image: "images/products/women-french-terry-fleece-jogger-camo.jpg",
495 |     name: "Women's Fleece Jogger Sweatpant",
496 |     rating: {
497 |       stars: 4.5,
498 |       count: 248
499 |     },
500 |     priceCents: 2400,
501 |     keywords: [
502 |       "pants",
503 |       "sweatpants",
504 |       "jogging",
505 |       "apparel",
506 |       "womens"
507 |     ]
508 |   },
509 |   {
510 |     id: "d339adf3-e004-4c20-a120-40e8874c66cb",
511 |     image: "images/products/double-elongated-twist-french-wire-earrings.webp",
512 |     name: "Double Oval Twist French Wire Earrings - Gold",
513 |     rating: {
514 |       stars: 4.5,
515 |       count: 117
516 |     },
517 |     priceCents: 2400,
518 |     keywords: [
519 |       "accessories",
520 |       "womens"
521 |     ]
522 |   },
523 |   {
524 |     id: "d37a651a-d501-483b-aae6-a9659b0757a0",
525 |     image: "images/products/round-airtight-food-storage-containers.jpg",
526 |     name: "Round Airtight Food Storage Containers - 5 Piece",
527 |     rating: {
528 |       stars: 4,
529 |       count: 126
530 |     },
531 |     priceCents: 2899,
532 |     keywords: [
533 |       "boxes",
534 |       "food containers",
535 |       "kitchen"
536 |     ]
537 |   },
538 |   {
539 |     id: "0d7f9afa-2efe-4fd9-b0fd-ba5663e0a524",
540 |     image: "images/products/coffeemaker-with-glass-carafe-black.jpg",
541 |     name: "Coffeemaker with Glass Carafe and Reusable Filter - 25 Oz, Black",
542 |     rating: {
543 |       stars: 4.5,
544 |       count: 1211
545 |     },
546 |     priceCents: 2250,
547 |     keywords: [
548 |       "coffeemakers",
549 |       "kitchen",
550 |       "appliances"
551 |     ]
552 |   },
553 |   {
554 |     id: "02e3a47e-dd68-467e-9f71-8bf6f723fdae",
555 |     image: "images/products/blackout-curtains-black.jpg",
556 |     name: "Blackout Curtains Set 42 x 84-Inch - Black, 2 Panels",
557 |     rating: {
558 |       stars: 4.5,
559 |       count: 363
560 |     },
561 |     priceCents: 3099,
562 |     keywords: [
563 |       "bedroom",
564 |       "home"
565 |     ]
566 |   },
567 |   {
568 |     id: "8a53b080-6d40-4a65-ab26-b24ecf700bce",
569 |     image: "images/products/cotton-bath-towels-teal.webp",
570 |     name: "100% Cotton Bath Towels - 2 Pack, Light Teal",
571 |     rating: {
572 |       stars: 4.5,
573 |       count: 93
574 |     },
575 |     priceCents: 2110,
576 |     keywords: [
577 |       "bathroom",
578 |       "home",
579 |       "towels"
580 |     ]
581 |   },
582 |   {
583 |     id: "10ed8504-57db-433c-b0a3-fc71a35c88a1",
584 |     image: "images/products/knit-athletic-sneakers-pink.webp",
585 |     name: "Waterproof Knit Athletic Sneakers - Pink",
586 |     rating: {
587 |       stars: 4,
588 |       count: 89
589 |     },
590 |     priceCents: 3390,
591 |     keywords: [
592 |       "shoes",
593 |       "running shoes",
594 |       "footwear",
595 |       "womens"
596 |     ]
597 |   },
598 |   {
599 |     id: "77a845b1-16ed-4eac-bdf9-5b591882113d",
600 |     image: "images/products/countertop-blender-64-oz.jpg",
601 |     name: "Countertop Blender - 64oz, 1400 Watts",
602 |     rating: {
603 |       stars: 4,
604 |       count: 3
605 |     },
606 |     priceCents: 10747,
607 |     keywords: [
608 |       "food blenders",
609 |       "kitchen",
610 |       "appliances"
611 |     ]
612 |   },
613 |   {
614 |     id: "36c64692-677f-4f58-b5ec-0dc2cf109e27",
615 |     image: "images/products/floral-mixing-bowl-set.jpg",
616 |     name: "10-Piece Mixing Bowl Set with Lids - Floral",
617 |     rating: {
618 |       stars: 5,
619 |       count: 679
620 |     },
621 |     priceCents: 3899,
622 |     keywords: [
623 |       "mixing bowls",
624 |       "baking",
625 |       "cookware",
626 |       "kitchen"
627 |     ]
628 |   },
629 |   {
630 |     id: "aaa65ef3-8d6f-4eb3-bc9b-a6ea49047d8f",
631 |     image: "images/products/kitchen-paper-towels-30-pack.jpg",
632 |     name: "2-Ply Kitchen Paper Towels - 30 Pack",
633 |     rating: {
634 |       stars: 4.5,
635 |       count: 1045
636 |     },
637 |     priceCents: 5799,
638 |     keywords: [
639 |       "kitchen",
640 |       "kitchen towels",
641 |       "tissues"
642 |     ]
643 |   },
644 |   {
645 |     id: "bc2847e9-5323-403f-b7cf-57fde044a955",
646 |     image: "images/products/men-cozy-fleece-zip-up-hoodie-red.jpg",
647 |     name: "Men's Full-Zip Hooded Fleece Sweatshirt",
648 |     rating: {
649 |       stars: 4.5,
650 |       count: 3157
651 |     },
652 |     priceCents: 2400,
653 |     keywords: [
654 |       "sweaters",
655 |       "hoodies",
656 |       "apparel",
657 |       "mens"
658 |     ]
659 |   }
660 | ];


--------------------------------------------------------------------------------
/images/amazon-logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/amazon-logo-white.png


--------------------------------------------------------------------------------
/images/amazon-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/amazon-logo.png


--------------------------------------------------------------------------------
/images/amazon-mobile-logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/amazon-mobile-logo-white.png


--------------------------------------------------------------------------------
/images/amazon-mobile-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/amazon-mobile-logo.png


--------------------------------------------------------------------------------
/images/appliance-instructions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/appliance-instructions.png


--------------------------------------------------------------------------------
/images/appliance-warranty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/appliance-warranty.png


--------------------------------------------------------------------------------
/images/clothing-size-chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/clothing-size-chart.png


--------------------------------------------------------------------------------
/images/icons/buy-again.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/icons/buy-again.png


--------------------------------------------------------------------------------
/images/icons/cart-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/icons/cart-icon.png


--------------------------------------------------------------------------------
/images/icons/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/icons/checkmark.png


--------------------------------------------------------------------------------
/images/icons/checkout-lock-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/icons/checkout-lock-icon.png


--------------------------------------------------------------------------------
/images/icons/hamburger-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/icons/hamburger-menu.png


--------------------------------------------------------------------------------
/images/icons/search-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/icons/search-icon.png


--------------------------------------------------------------------------------
/images/products/6-piece-non-stick-baking-set.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/6-piece-non-stick-baking-set.webp


--------------------------------------------------------------------------------
/images/products/6-piece-white-dinner-plate-set.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/6-piece-white-dinner-plate-set.jpg


--------------------------------------------------------------------------------
/images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg


--------------------------------------------------------------------------------
/images/products/athletic-cotton-socks-6-pairs.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/athletic-cotton-socks-6-pairs.jpg


--------------------------------------------------------------------------------
/images/products/backpack.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/backpack.jpg


--------------------------------------------------------------------------------
/images/products/bathroom-rug.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/bathroom-rug.jpg


--------------------------------------------------------------------------------
/images/products/black-2-slot-toaster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/black-2-slot-toaster.jpg


--------------------------------------------------------------------------------
/images/products/blackout-curtain-set-beige.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/blackout-curtain-set-beige.webp


--------------------------------------------------------------------------------
/images/products/blackout-curtains-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/blackout-curtains-black.jpg


--------------------------------------------------------------------------------
/images/products/coffeemaker-with-glass-carafe-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/coffeemaker-with-glass-carafe-black.jpg


--------------------------------------------------------------------------------
/images/products/cotton-bath-towels-teal.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/cotton-bath-towels-teal.webp


--------------------------------------------------------------------------------
/images/products/countertop-blender-64-oz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/countertop-blender-64-oz.jpg


--------------------------------------------------------------------------------
/images/products/double-elongated-twist-french-wire-earrings.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/double-elongated-twist-french-wire-earrings.webp


--------------------------------------------------------------------------------
/images/products/duvet-cover-set-blue-twin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/duvet-cover-set-blue-twin.jpg


--------------------------------------------------------------------------------
/images/products/electric-glass-and-steel-hot-water-kettle.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/electric-glass-and-steel-hot-water-kettle.webp


--------------------------------------------------------------------------------
/images/products/facial-tissue-2-ply-18-boxes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/facial-tissue-2-ply-18-boxes.jpg


--------------------------------------------------------------------------------
/images/products/floral-mixing-bowl-set.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/floral-mixing-bowl-set.jpg


--------------------------------------------------------------------------------
/images/products/intermediate-composite-basketball.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/intermediate-composite-basketball.jpg


--------------------------------------------------------------------------------
/images/products/kitchen-paper-towels-30-pack.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/kitchen-paper-towels-30-pack.jpg


--------------------------------------------------------------------------------
/images/products/knit-athletic-sneakers-gray.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/knit-athletic-sneakers-gray.jpg


--------------------------------------------------------------------------------
/images/products/knit-athletic-sneakers-pink.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/knit-athletic-sneakers-pink.webp


--------------------------------------------------------------------------------
/images/products/liquid-laundry-detergent-plain.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/liquid-laundry-detergent-plain.jpg


--------------------------------------------------------------------------------
/images/products/luxury-tower-set-6-piece.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/luxury-tower-set-6-piece.jpg


--------------------------------------------------------------------------------
/images/products/men-athletic-shoes-green.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/men-athletic-shoes-green.jpg


--------------------------------------------------------------------------------
/images/products/men-chino-pants-beige.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/men-chino-pants-beige.jpg


--------------------------------------------------------------------------------
/images/products/men-cozy-fleece-zip-up-hoodie-red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/men-cozy-fleece-zip-up-hoodie-red.jpg


--------------------------------------------------------------------------------
/images/products/men-golf-polo-t-shirt-blue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/men-golf-polo-t-shirt-blue.jpg


--------------------------------------------------------------------------------
/images/products/men-navigator-sunglasses-brown.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/men-navigator-sunglasses-brown.jpg


--------------------------------------------------------------------------------
/images/products/men-slim-fit-summer-shorts-gray.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/men-slim-fit-summer-shorts-gray.jpg


--------------------------------------------------------------------------------
/images/products/non-stick-cooking-set-15-pieces.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/non-stick-cooking-set-15-pieces.webp


--------------------------------------------------------------------------------
/images/products/plain-hooded-fleece-sweatshirt-yellow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/plain-hooded-fleece-sweatshirt-yellow.jpg


--------------------------------------------------------------------------------
/images/products/round-airtight-food-storage-containers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/round-airtight-food-storage-containers.jpg


--------------------------------------------------------------------------------
/images/products/round-sunglasses-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/round-sunglasses-black.jpg


--------------------------------------------------------------------------------
/images/products/sky-flower-stud-earrings.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/sky-flower-stud-earrings.webp


--------------------------------------------------------------------------------
/images/products/straw-sunhat.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/straw-sunhat.webp


--------------------------------------------------------------------------------
/images/products/trash-can-with-foot-pedal-50-liter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/trash-can-with-foot-pedal-50-liter.jpg


--------------------------------------------------------------------------------
/images/products/umbrella.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/umbrella.jpg


--------------------------------------------------------------------------------
/images/products/vanity-mirror-silver.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/vanity-mirror-silver.jpg


--------------------------------------------------------------------------------
/images/products/variations/adults-plain-cotton-tshirt-2-pack-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/adults-plain-cotton-tshirt-2-pack-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/adults-plain-cotton-tshirt-2-pack-plus-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/adults-plain-cotton-tshirt-2-pack-plus-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/adults-plain-cotton-tshirt-2-pack-red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/adults-plain-cotton-tshirt-2-pack-red.jpg


--------------------------------------------------------------------------------
/images/products/variations/adults-plain-cotton-tshirt-2-pack-teal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/adults-plain-cotton-tshirt-2-pack-teal.jpg


--------------------------------------------------------------------------------
/images/products/variations/duvet-cover-set-blue-queen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/duvet-cover-set-blue-queen.jpg


--------------------------------------------------------------------------------
/images/products/variations/duvet-cover-set-blue-twin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/duvet-cover-set-blue-twin.jpg


--------------------------------------------------------------------------------
/images/products/variations/duvet-cover-set-red-queen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/duvet-cover-set-red-queen.jpg


--------------------------------------------------------------------------------
/images/products/variations/duvet-cover-set-red-twin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/duvet-cover-set-red-twin.jpg


--------------------------------------------------------------------------------
/images/products/variations/liquid-laundry-detergent-lavender.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/liquid-laundry-detergent-lavender.jpg


--------------------------------------------------------------------------------
/images/products/variations/liquid-laundry-detergent-plain.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/liquid-laundry-detergent-plain.jpg


--------------------------------------------------------------------------------
/images/products/variations/luxury-tower-set-4-piece.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/luxury-tower-set-4-piece.jpg


--------------------------------------------------------------------------------
/images/products/variations/luxury-tower-set-6-piece.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/luxury-tower-set-6-piece.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-athletic-shoes-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-athletic-shoes-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-athletic-shoes-green.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-athletic-shoes-green.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-chino-pants-beige.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-chino-pants-beige.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-chino-pants-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-chino-pants-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-chino-pants-green.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-chino-pants-green.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-cozy-fleece-zip-up-hoodie-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-cozy-fleece-zip-up-hoodie-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-cozy-fleece-zip-up-hoodie-red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-cozy-fleece-zip-up-hoodie-red.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-golf-polo-t-shirt-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-golf-polo-t-shirt-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-golf-polo-t-shirt-blue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-golf-polo-t-shirt-blue.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-golf-polo-t-shirt-red.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-golf-polo-t-shirt-red.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-navigator-sunglasses-brown.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-navigator-sunglasses-brown.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-navigator-sunglasses-silver.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-navigator-sunglasses-silver.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-slim-fit-summer-shorts-beige.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-slim-fit-summer-shorts-beige.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-slim-fit-summer-shorts-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-slim-fit-summer-shorts-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/men-slim-fit-summer-shorts-gray.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/men-slim-fit-summer-shorts-gray.jpg


--------------------------------------------------------------------------------
/images/products/variations/plain-hooded-fleece-sweatshirt-teal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/plain-hooded-fleece-sweatshirt-teal.jpg


--------------------------------------------------------------------------------
/images/products/variations/plain-hooded-fleece-sweatshirt-yellow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/plain-hooded-fleece-sweatshirt-yellow.jpg


--------------------------------------------------------------------------------
/images/products/variations/round-sunglasses-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/round-sunglasses-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/round-sunglasses-gold.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/round-sunglasses-gold.jpg


--------------------------------------------------------------------------------
/images/products/variations/trash-can-with-foot-pedal-30-liter-tall.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/trash-can-with-foot-pedal-30-liter-tall.jpg


--------------------------------------------------------------------------------
/images/products/variations/trash-can-with-foot-pedal-50-liter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/trash-can-with-foot-pedal-50-liter.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-french-terry-fleece-jogger-camo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-french-terry-fleece-jogger-camo.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-french-terry-fleece-jogger-gray.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-french-terry-fleece-jogger-gray.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-knit-ballet-flat-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-knit-ballet-flat-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-knit-ballet-flat-gray.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-knit-ballet-flat-gray.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-knit-ballet-flat-leopard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-knit-ballet-flat-leopard.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-stretch-popover-hoodie-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-stretch-popover-hoodie-black.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-stretch-popover-hoodie-blue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-stretch-popover-hoodie-blue.jpg


--------------------------------------------------------------------------------
/images/products/variations/women-stretch-popover-hoodie-gray.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/variations/women-stretch-popover-hoodie-gray.jpg


--------------------------------------------------------------------------------
/images/products/women-beach-sandals.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/women-beach-sandals.jpg


--------------------------------------------------------------------------------
/images/products/women-chiffon-beachwear-coverup-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/women-chiffon-beachwear-coverup-black.jpg


--------------------------------------------------------------------------------
/images/products/women-chunky-beanie-gray.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/women-chunky-beanie-gray.webp


--------------------------------------------------------------------------------
/images/products/women-french-terry-fleece-jogger-camo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/women-french-terry-fleece-jogger-camo.jpg


--------------------------------------------------------------------------------
/images/products/women-knit-ballet-flat-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/women-knit-ballet-flat-black.jpg


--------------------------------------------------------------------------------
/images/products/women-stretch-popover-hoodie-black.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/products/women-stretch-popover-hoodie-black.jpg


--------------------------------------------------------------------------------
/images/ratings/rating-0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-0.png


--------------------------------------------------------------------------------
/images/ratings/rating-05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-05.png


--------------------------------------------------------------------------------
/images/ratings/rating-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-10.png


--------------------------------------------------------------------------------
/images/ratings/rating-15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-15.png


--------------------------------------------------------------------------------
/images/ratings/rating-20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-20.png


--------------------------------------------------------------------------------
/images/ratings/rating-25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-25.png


--------------------------------------------------------------------------------
/images/ratings/rating-30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-30.png


--------------------------------------------------------------------------------
/images/ratings/rating-35.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-35.png


--------------------------------------------------------------------------------
/images/ratings/rating-40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-40.png


--------------------------------------------------------------------------------
/images/ratings/rating-45.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-45.png


--------------------------------------------------------------------------------
/images/ratings/rating-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SuperSimpleDev/javascript-amazon-project/8ae6fabf3c37c2d055f046e09871b87242c1f73e/images/ratings/rating-50.png


--------------------------------------------------------------------------------
/orders.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Orders</title>
  5 | 
  6 |     <!-- This code is needed for responsive design to work.
  7 |       (Responsive design = make the website look good on
  8 |       smaller screen sizes like a phone or a tablet). -->
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 10 | 
 11 |     <!-- Load a font called Roboto from Google Fonts. -->
 12 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 13 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 14 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 15 | 
 16 |     <!-- Here are the CSS files for this page. -->
 17 |     <link rel="stylesheet" href="styles/shared/general.css">
 18 |     <link rel="stylesheet" href="styles/shared/amazon-header.css">
 19 |     <link rel="stylesheet" href="styles/pages/orders.css">
 20 |   </head>
 21 |   <body>
 22 |     <div class="amazon-header">
 23 |       <div class="amazon-header-left-section">
 24 |         <a href="amazon.html" class="header-link">
 25 |           <img class="amazon-logo"
 26 |             src="images/amazon-logo-white.png">
 27 |           <img class="amazon-mobile-logo"
 28 |             src="images/amazon-mobile-logo-white.png">
 29 |         </a>
 30 |       </div>
 31 | 
 32 |       <div class="amazon-header-middle-section">
 33 |         <input class="search-bar" type="text" placeholder="Search">
 34 | 
 35 |         <button class="search-button">
 36 |           <img class="search-icon" src="images/icons/search-icon.png">
 37 |         </button>
 38 |       </div>
 39 | 
 40 |       <div class="amazon-header-right-section">
 41 |         <a class="orders-link header-link" href="orders.html">
 42 |           <span class="returns-text">Returns</span>
 43 |           <span class="orders-text">& Orders</span>
 44 |         </a>
 45 | 
 46 |         <a class="cart-link header-link" href="checkout.html">
 47 |           <img class="cart-icon" src="images/icons/cart-icon.png">
 48 |           <div class="cart-quantity">3</div>
 49 |           <div class="cart-text">Cart</div>
 50 |         </a>
 51 |       </div>
 52 |     </div>
 53 | 
 54 |     <div class="main">
 55 |       <div class="page-title">Your Orders</div>
 56 | 
 57 |       <div class="orders-grid">
 58 |         <div class="order-container">
 59 |           
 60 |           <div class="order-header">
 61 |             <div class="order-header-left-section">
 62 |               <div class="order-date">
 63 |                 <div class="order-header-label">Order Placed:</div>
 64 |                 <div>August 12</div>
 65 |               </div>
 66 |               <div class="order-total">
 67 |                 <div class="order-header-label">Total:</div>
 68 |                 <div>$35.06</div>
 69 |               </div>
 70 |             </div>
 71 | 
 72 |             <div class="order-header-right-section">
 73 |               <div class="order-header-label">Order ID:</div>
 74 |               <div>27cba69d-4c3d-4098-b42d-ac7fa62b7664</div>
 75 |             </div>
 76 |           </div>
 77 | 
 78 |           <div class="order-details-grid">
 79 |             <div class="product-image-container">
 80 |               <img src="images/products/athletic-cotton-socks-6-pairs.jpg">
 81 |             </div>
 82 | 
 83 |             <div class="product-details">
 84 |               <div class="product-name">
 85 |                 Black and Gray Athletic Cotton Socks - 6 Pairs
 86 |               </div>
 87 |               <div class="product-delivery-date">
 88 |                 Arriving on: August 15
 89 |               </div>
 90 |               <div class="product-quantity">
 91 |                 Quantity: 1
 92 |               </div>
 93 |               <button class="buy-again-button button-primary">
 94 |                 <img class="buy-again-icon" src="images/icons/buy-again.png">
 95 |                 <span class="buy-again-message">Buy it again</span>
 96 |               </button>
 97 |             </div>
 98 | 
 99 |             <div class="product-actions">
100 |               <a href="tracking.html">
101 |                 <button class="track-package-button button-secondary">
102 |                   Track package
103 |                 </button>
104 |               </a>
105 |             </div>
106 | 
107 |             <div class="product-image-container">
108 |               <img src="images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg">
109 |             </div>
110 | 
111 |             <div class="product-details">
112 |               <div class="product-name">
113 |                 Adults Plain Cotton T-Shirt - 2 Pack
114 |               </div>
115 |               <div class="product-delivery-date">
116 |                 Arriving on: August 19
117 |               </div>
118 |               <div class="product-quantity">
119 |                 Quantity: 2
120 |               </div>
121 |               <button class="buy-again-button button-primary">
122 |                 <img class="buy-again-icon" src="images/icons/buy-again.png">
123 |                 <span class="buy-again-message">Buy it again</span>
124 |               </button>
125 |             </div>
126 | 
127 |             <div class="product-actions">
128 |               <a href="tracking.html">
129 |                 <button class="track-package-button button-secondary">
130 |                   Track package
131 |                 </button>
132 |               </a>
133 |             </div>
134 |           </div>
135 |         </div>
136 | 
137 |         <div class="order-container">
138 | 
139 |           <div class="order-header">
140 |             <div class="order-header-left-section">
141 |               <div class="order-date">
142 |                 <div class="order-header-label">Order Placed:</div>
143 |                 <div>June 10</div>
144 |               </div>
145 |               <div class="order-total">
146 |                 <div class="order-header-label">Total:</div>
147 |                 <div>$41.90</div>
148 |               </div>
149 |             </div>
150 | 
151 |             <div class="order-header-right-section">
152 |               <div class="order-header-label">Order ID:</div>
153 |               <div>b6b6c212-d30e-4d4a-805d-90b52ce6b37d</div>
154 |             </div>
155 |           </div>
156 | 
157 |           <div class="order-details-grid">
158 |             <div class="product-image-container">
159 |               <img src="images/products/intermediate-composite-basketball.jpg">
160 |             </div>
161 | 
162 |             <div class="product-details">
163 |               <div class="product-name">
164 |                 Intermediate Size Basketball
165 |               </div>
166 |               <div class="product-delivery-date">
167 |                 Arriving on: June 17
168 |               </div>
169 |               <div class="product-quantity">
170 |                 Quantity: 2
171 |               </div>
172 |               <button class="buy-again-button button-primary">
173 |                 <img class="buy-again-icon" src="images/icons/buy-again.png">
174 |                 <span class="buy-again-message">Buy it again</span>
175 |               </button>
176 |             </div>
177 | 
178 |             <div class="product-actions">
179 |               <a href="tracking.html">
180 |                 <button class="track-package-button button-secondary">
181 |                   Track package
182 |                 </button>
183 |               </a>
184 |             </div>
185 |           </div>
186 |         </div>
187 |       </div>
188 |     </div>
189 |   </body>
190 | </html>
191 | 


--------------------------------------------------------------------------------
/styles/pages/amazon.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   margin-top: 60px;
  3 | }
  4 | 
  5 | .products-grid {
  6 |   display: grid;
  7 | 
  8 |   /* - In CSS Grid, 1fr means a column will take up the
  9 |        remaining space in the grid.
 10 |      - If we write 1fr 1fr ... 1fr; 8 times, this will
 11 |        divide the grid into 8 columns, each taking up an
 12 |        equal amount of the space.
 13 |      - repeat(8, 1fr); is a shortcut for repeating "1fr"
 14 |        8 times (instead of typing out "1fr" 8 times).
 15 |        repeat(...) is a special property that works with
 16 |        display: grid; */
 17 |   grid-template-columns: repeat(8, 1fr);
 18 | }
 19 | 
 20 | /* @media is used to create responsive design (making the
 21 |    website look good on any screen size). This @media
 22 |    means when the screen width is 2000px or less, we
 23 |    will divide the grid into 7 columns instead of 8. */
 24 | @media (max-width: 2000px) {
 25 |   .products-grid {
 26 |     grid-template-columns: repeat(7, 1fr);
 27 |   }
 28 | }
 29 | 
 30 | /* This @media means when the screen width is 1600px or
 31 |    less, we will divide the grid into 6 columns. */
 32 | @media (max-width: 1600px) {
 33 |   .products-grid {
 34 |     grid-template-columns: repeat(6, 1fr);
 35 |   }
 36 | }
 37 | 
 38 | @media (max-width: 1300px) {
 39 |   .products-grid {
 40 |     grid-template-columns: repeat(5, 1fr);
 41 |   }
 42 | }
 43 | 
 44 | @media (max-width: 1000px) {
 45 |   .products-grid {
 46 |     grid-template-columns: repeat(4, 1fr);
 47 |   }
 48 | }
 49 | 
 50 | @media (max-width: 800px) {
 51 |   .products-grid {
 52 |     grid-template-columns: repeat(3, 1fr);
 53 |   }
 54 | }
 55 | 
 56 | @media (max-width: 575px) {
 57 |   .products-grid {
 58 |     grid-template-columns: repeat(2, 1fr);
 59 |   }
 60 | }
 61 | 
 62 | @media (max-width: 450px) {
 63 |   .products-grid {
 64 |     grid-template-columns: 1fr;
 65 |   }
 66 | }
 67 | 
 68 | .product-container {
 69 |   padding-top: 40px;
 70 |   padding-bottom: 25px;
 71 |   padding-left: 25px;
 72 |   padding-right: 25px;
 73 | 
 74 |   border-right: 1px solid rgb(231, 231, 231);
 75 |   border-bottom: 1px solid rgb(231, 231, 231);
 76 | 
 77 |   display: flex;
 78 |   flex-direction: column;
 79 | }
 80 | 
 81 | .product-image-container {
 82 |   display: flex;
 83 |   justify-content: center;
 84 |   align-items: center;
 85 | 
 86 |   height: 180px;
 87 |   margin-bottom: 20px;
 88 | }
 89 | 
 90 | .product-image {
 91 |   /* Images will overflow their container by default. To
 92 |     prevent this, we set max-width and max-height to 100%
 93 |     so they stay inside their container. */
 94 |   max-width: 100%;
 95 |   max-height: 100%;
 96 | }
 97 | 
 98 | .product-name {
 99 |   height: 40px;
100 |   margin-bottom: 5px;
101 | }
102 | 
103 | .product-rating-container {
104 |   display: flex;
105 |   align-items: center;
106 |   margin-bottom: 10px;
107 | }
108 | 
109 | .product-rating-stars {
110 |   width: 100px;
111 |   margin-right: 6px;
112 | }
113 | 
114 | .product-rating-count {
115 |   color: rgb(1, 124, 182);
116 |   cursor: pointer;
117 |   margin-top: 3px;
118 | }
119 | 
120 | .product-price {
121 |   font-weight: 700;
122 |   margin-bottom: 10px;
123 | }
124 | 
125 | .product-quantity-container {
126 |   margin-bottom: 17px;
127 | }
128 | 
129 | .product-spacer {
130 |   flex: 1;
131 | }
132 | 
133 | .added-to-cart {
134 |   color: rgb(6, 125, 98);
135 |   font-size: 16px;
136 | 
137 |   display: flex;
138 |   align-items: center;
139 |   margin-bottom: 8px;
140 | 
141 |   /* At first, the "Added to cart" message will
142 |      be invisible. Use JavaScript to change the
143 |      opacity and make it visible. */
144 |   opacity: 0;
145 | }
146 | 
147 | .added-to-cart img {
148 |   height: 20px;
149 |   margin-right: 5px;
150 | }
151 | 
152 | .add-to-cart-button {
153 |   width: 100%;
154 |   padding: 8px;
155 |   border-radius: 50px;
156 | }
157 | 


--------------------------------------------------------------------------------
/styles/pages/checkout/checkout-header.css:
--------------------------------------------------------------------------------
  1 | .checkout-header {
  2 |   height: 60px;
  3 |   padding-left: 30px;
  4 |   padding-right: 30px;
  5 |   background-color: white;
  6 | 
  7 |   display: flex;
  8 |   justify-content: center;
  9 | 
 10 |   position: fixed;
 11 |   top: 0;
 12 |   left: 0;
 13 |   right: 0;
 14 |   z-index: 1000;
 15 | }
 16 | 
 17 | .header-content {
 18 |   width: 100%;
 19 |   max-width: 1100px;
 20 | 
 21 |   display: flex;
 22 |   align-items: center;
 23 | }
 24 | 
 25 | .checkout-header-left-section {
 26 |   width: 150px;
 27 | }
 28 | 
 29 | .amazon-logo {
 30 |   width: 100px;
 31 |   margin-top: 12px;
 32 | }
 33 | 
 34 | .amazon-mobile-logo {
 35 |   display: none;
 36 | }
 37 | 
 38 | /* @media is used to create responsive design (making the
 39 |    website look good on any screen size). This @media
 40 |    means when the screen width is 575px or less, different
 41 |    styles (inside the {...}) will be applied. */
 42 | @media (max-width: 575px) {
 43 |   .checkout-header-left-section {
 44 |     width: auto;
 45 |   }
 46 | 
 47 |   .amazon-logo {
 48 |     display: none;
 49 |   }
 50 | 
 51 |   .amazon-mobile-logo {
 52 |     display: inline-block;
 53 |     height: 35px;
 54 |     margin-top: 5px;
 55 |   }
 56 | }
 57 | 
 58 | .checkout-header-middle-section {
 59 |   flex: 1;
 60 |   flex-shrink: 0;
 61 |   text-align: center;
 62 | 
 63 |   font-size: 25px;
 64 |   font-weight: 500;
 65 | 
 66 |   display: flex;
 67 |   justify-content: center;
 68 | }
 69 | 
 70 | .return-to-home-link {
 71 |   color: rgb(0, 113, 133);
 72 |   font-size: 23px;
 73 |   text-decoration: none;
 74 |   cursor: pointer;
 75 | }
 76 | 
 77 | @media (max-width: 1000px) {
 78 |   .checkout-header-middle-section {
 79 |     font-size: 20px;
 80 |     margin-right: 60px;
 81 |   }
 82 | 
 83 |   .return-to-home-link {
 84 |     font-size: 18px;
 85 |   }
 86 | }
 87 | 
 88 | @media (max-width: 575px) {
 89 |   .checkout-header-middle-section {
 90 |     margin-right: 5px;
 91 |   }
 92 | }
 93 | 
 94 | .checkout-header-right-section {
 95 |   text-align: right;
 96 |   width: 150px;
 97 | }
 98 | 
 99 | @media (max-width: 1000px) {
100 |   .checkout-header-right-section {
101 |     width: auto;
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/styles/pages/checkout/checkout.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   max-width: 1100px;
  3 |   padding-left: 30px;
  4 |   padding-right: 30px;
  5 | 
  6 |   margin-top: 140px;
  7 |   margin-bottom: 100px;
  8 | 
  9 |   /* margin-left: auto;
 10 |      margin-right auto;
 11 |      Is a trick for centering an element horizontally
 12 |      without needing a container. */
 13 |   margin-left: auto;
 14 |   margin-right: auto;
 15 | }
 16 | 
 17 | .page-title {
 18 |   font-weight: 700;
 19 |   font-size: 22px;
 20 |   margin-bottom: 18px;
 21 | }
 22 | 
 23 | .checkout-grid {
 24 |   display: grid;
 25 |   /* Here, 1fr means the first column will take
 26 |      up the remaining space in the grid. */
 27 |   grid-template-columns: 1fr 350px;
 28 |   column-gap: 12px;
 29 | 
 30 |   /* Use align-items: start; to prevent the elements
 31 |      in the grid from stretching vertically. */
 32 |   align-items: start;
 33 | }
 34 | 
 35 | @media (max-width: 1000px) {
 36 |   .main {
 37 |     max-width: 500px;
 38 |   }
 39 | 
 40 |   .checkout-grid {
 41 |     grid-template-columns: 1fr;
 42 |   }
 43 | }
 44 | 
 45 | .cart-item-container,
 46 | .payment-summary {
 47 |   border: 1px solid rgb(222, 222, 222);
 48 |   border-radius: 4px;
 49 |   padding: 18px;
 50 | }
 51 | 
 52 | .cart-item-container {
 53 |   margin-bottom: 12px;
 54 | }
 55 | 
 56 | .payment-summary {
 57 |   padding-bottom: 5px;
 58 | }
 59 | 
 60 | @media (max-width: 1000px) {
 61 |   .payment-summary {
 62 |     /* grid-row: 1 means this element will be placed into row
 63 |       1 in the grid. (Normally, the row that an element is
 64 |       placed in is determined by the order of the elements in
 65 |       the HTML. grid-row overrides this default ordering). */
 66 |     grid-row: 1;
 67 |     margin-bottom: 12px;
 68 |   }
 69 | }
 70 | 
 71 | .delivery-date {
 72 |   color: rgb(0, 118, 0);
 73 |   font-weight: 700;
 74 |   font-size: 19px;
 75 |   margin-top: 5px;
 76 |   margin-bottom: 22px;
 77 | }
 78 | 
 79 | .cart-item-details-grid {
 80 |   display: grid;
 81 |   /* 100px 1fr 1fr; means the 2nd and 3rd column will
 82 |      take up half the remaining space in the grid
 83 |      (they will divide up the remaining space evenly). */
 84 |   grid-template-columns: 100px 1fr 1fr;
 85 |   column-gap: 25px;
 86 | }
 87 | 
 88 | @media (max-width: 1000px) {
 89 |   .cart-item-details-grid {
 90 |     grid-template-columns: 100px 1fr;
 91 |     row-gap: 30px;
 92 |   }
 93 | }
 94 | 
 95 | .product-image {
 96 |   max-width: 100%;
 97 |   max-height: 120px;
 98 | 
 99 |   /* margin-left: auto;
100 |      margin-right auto;
101 |      Is a trick for centering an element horizontally
102 |      without needing a container. */
103 |   margin-left: auto;
104 |   margin-right: auto;
105 | }
106 | 
107 | .product-name {
108 |   font-weight: 700;
109 |   margin-bottom: 8px;
110 | }
111 | 
112 | .product-price {
113 |   color: rgb(177, 39, 4);
114 |   font-weight: 700;
115 |   margin-bottom: 5px;
116 | }
117 | 
118 | .product-quantity .link-primary {
119 |   margin-left: 3px;
120 | }
121 | 
122 | @media (max-width: 1000px) {
123 |   .delivery-options {
124 |     /* grid-column: 1 means this element will be placed
125 |        in column 1 in the grid. (Normally, the column that
126 |        an element is placed in is determined by the order
127 |        of the elements in the HTML. grid-column overrides
128 |        this default ordering).
129 |        
130 |        / span 2 means this element will take up 2 columns
131 |        in the grid (Normally, each element takes up 1
132 |        column in the grid). */
133 |     grid-column: 1 / span 2;
134 |   }
135 | }
136 | 
137 | .delivery-options-title {
138 |   font-weight: 700;
139 |   margin-bottom: 10px;
140 | }
141 | 
142 | .delivery-option {
143 |   display: grid;
144 |   grid-template-columns: 24px 1fr;
145 |   margin-bottom: 12px;
146 |   cursor: pointer;
147 | }
148 | 
149 | .delivery-option-input {
150 |   margin-left: 0px;
151 |   cursor: pointer;
152 | }
153 | 
154 | .delivery-option-date {
155 |   color: rgb(0, 118, 0);
156 |   font-weight: 500;
157 |   margin-bottom: 3px;
158 | }
159 | 
160 | .delivery-option-price {
161 |   color: rgb(120, 120, 120);
162 |   font-size: 15px;
163 | }
164 | 
165 | .payment-summary-title {
166 |   font-weight: 700;
167 |   font-size: 18px;
168 |   margin-bottom: 12px;
169 | }
170 | 
171 | .payment-summary-row {
172 |   display: grid;
173 |   /* 1fr auto; means the width of the 2nd column will be
174 |      determined by the elements inside the column (auto).
175 |      The 1st column will take up the remaining space. */
176 |   grid-template-columns: 1fr auto;
177 | 
178 |   font-size: 15px;
179 |   margin-bottom: 9px;
180 | }
181 | 
182 | .payment-summary-money {
183 |   text-align: right;
184 | }
185 | 
186 | .subtotal-row .payment-summary-money {
187 |   border-top: 1px solid rgb(222, 222, 222);
188 | }
189 | 
190 | .subtotal-row div {
191 |   padding-top: 9px;
192 | }
193 | 
194 | .total-row {
195 |   color: rgb(177, 39, 4);
196 |   font-weight: 700;
197 |   font-size: 18px;
198 | 
199 |   border-top: 1px solid rgb(222, 222, 222);
200 |   padding-top: 18px;
201 | }
202 | 
203 | .place-order-button {
204 |   width: 100%;
205 |   padding-top: 12px;
206 |   padding-bottom: 12px;
207 |   border-radius: 8px;
208 | 
209 |   margin-top: 11px;
210 |   margin-bottom: 15px;
211 | }
212 | 


--------------------------------------------------------------------------------
/styles/pages/orders.css:
--------------------------------------------------------------------------------
  1 | .main {
  2 |   max-width: 850px;
  3 |   margin-top: 90px;
  4 |   margin-bottom: 100px;
  5 |   padding-left: 20px;
  6 |   padding-right: 20px;
  7 | 
  8 |   /* margin-left: auto;
  9 |      margin-right auto;
 10 |      Is a trick for centering an element horizontally
 11 |      without needing a container. */
 12 |   margin-left: auto;
 13 |   margin-right: auto;
 14 | }
 15 | 
 16 | .page-title {
 17 |   font-weight: 700;
 18 |   font-size: 26px;
 19 |   margin-bottom: 25px;
 20 | }
 21 | 
 22 | .orders-grid {
 23 |   display: grid;
 24 |   grid-template-columns: 1fr;
 25 |   row-gap: 50px;
 26 | }
 27 | 
 28 | .order-header {
 29 |   background-color: rgb(240, 242, 242);
 30 |   border: 1px solid rgb(213, 217, 217);
 31 | 
 32 |   display: flex;
 33 |   align-items: center;
 34 |   justify-content: space-between;
 35 | 
 36 |   padding: 20px 25px;
 37 |   border-top-left-radius: 8px;
 38 |   border-top-right-radius: 8px;
 39 | }
 40 | 
 41 | .order-header-left-section {
 42 |   display: flex;
 43 |   flex-shrink: 0;
 44 | }
 45 | 
 46 | .order-header-label {
 47 |   font-weight: 500;
 48 | }
 49 | 
 50 | .order-date,
 51 | .order-total {
 52 |   margin-right: 45px;
 53 | }
 54 | 
 55 | .order-header-right-section {
 56 |   flex-shrink: 1;
 57 | }
 58 | 
 59 | @media (max-width: 575px) {
 60 |   .order-header {
 61 |     flex-direction: column;
 62 |     align-items: start;
 63 |     line-height: 23px;
 64 |     padding: 15px;
 65 |   }
 66 | 
 67 |   .order-header-left-section {
 68 |     flex-direction: column;
 69 |   }
 70 | 
 71 |   .order-header-label {
 72 |     margin-right: 5px;
 73 |   }
 74 | 
 75 |   .order-date,
 76 |   .order-total {
 77 |     display: grid;
 78 |     grid-template-columns: auto 1fr;
 79 |     margin-right: 0;
 80 |   }
 81 | 
 82 |   .order-header-right-section {
 83 |     display: grid;
 84 |     grid-template-columns: auto 1fr;
 85 |   }
 86 | }
 87 | 
 88 | .order-details-grid {
 89 |   padding: 40px 25px;
 90 |   border: 1px solid rgb(213, 217, 217);
 91 |   border-top: none;
 92 |   border-bottom-left-radius: 8px;
 93 |   border-bottom-right-radius: 8px;
 94 | 
 95 |   display: grid;
 96 |   grid-template-columns: 110px 1fr 220px;
 97 |   column-gap: 35px;
 98 |   row-gap: 60px;
 99 |   align-items: center;
100 | }
101 | 
102 | @media (max-width: 800px) {
103 |   .order-details-grid {
104 |     grid-template-columns: 110px 1fr;
105 |     row-gap: 0;
106 |     padding-bottom: 8px;
107 |   }
108 | }
109 | 
110 | @media (max-width: 450px) {
111 |   .order-details-grid {
112 |     grid-template-columns: 1fr;
113 |   }
114 | }
115 | 
116 | .product-image-container {
117 |   text-align: center;
118 | }
119 | 
120 | .product-image-container img {
121 |   max-width: 110px;
122 |   max-height: 110px;
123 | }
124 | 
125 | .product-name {
126 |   font-weight: 700;
127 |   margin-bottom: 5px;
128 | }
129 | 
130 | .product-delivery-date {
131 |   margin-bottom: 3px;
132 | }
133 | 
134 | .product-quantity {
135 |   margin-bottom: 8px;
136 | }
137 | 
138 | .buy-again-button {
139 |   font-size: 15px;
140 |   width: 140px;
141 |   height: 36px;
142 |   border-radius: 8px;
143 | 
144 |   display: flex;
145 |   align-items: center;
146 |   justify-content: center;
147 | }
148 | 
149 | .buy-again-icon {
150 |   width: 25px;
151 |   margin-right: 15px;
152 | }
153 | 
154 | .product-actions {
155 |   align-self: start;
156 | }
157 | 
158 | .track-package-button {
159 |   width: 100%;
160 |   font-size: 15px;
161 |   padding: 8px;
162 | }
163 | 
164 | @media (max-width: 800px) {
165 |   .buy-again-button {
166 |     margin-bottom: 10px;
167 |   }
168 | 
169 |   .product-actions {
170 |     /* grid-column: 2 means this element will be placed
171 |        in column 2 in the grid. (Normally, the column that
172 |        an element is placed in is determined by the order
173 |        of the elements in the HTML. grid-column overrides
174 |        this default ordering). */
175 |     grid-column: 2;
176 |     margin-bottom: 30px;
177 |   }
178 | 
179 |   .track-package-button {
180 |     width: 140px;
181 |   }
182 | }
183 | 
184 | @media (max-width: 450px) {
185 |   .product-image-container {
186 |     text-align: center;
187 |     margin-bottom: 25px;
188 |   }
189 | 
190 |   .product-image-container img {
191 |     max-width: 150px;
192 |     max-height: 150px;
193 |   }
194 | 
195 |   .product-name {
196 |     margin-bottom: 10px;
197 |   }
198 | 
199 |   .product-quantity {
200 |     margin-bottom: 15px;
201 |   }
202 | 
203 |   .buy-again-button {
204 |     width: 100%;
205 |     margin-bottom: 15px;
206 |   }
207 | 
208 |   .product-actions {
209 |     /* grid-column: auto; undos grid-column: 2; from above.
210 |        This element will now be placed in its normal column
211 |        in the grid. */
212 |     grid-column: auto;
213 |     margin-bottom: 70px;
214 |   }
215 | 
216 |   .track-package-button {
217 |     width: 100%;
218 |     padding: 12px;
219 |   }
220 | }
221 | 


--------------------------------------------------------------------------------
/styles/pages/tracking.css:
--------------------------------------------------------------------------------
 1 | .main {
 2 |   max-width: 850px;
 3 |   margin-top: 90px;
 4 |   margin-bottom: 100px;
 5 |   padding-left: 30px;
 6 |   padding-right: 30px;
 7 | 
 8 |   /* margin-left: auto;
 9 |      margin-right auto;
10 |      Is a trick for centering an element horizontally
11 |      without needing a container. */
12 |   margin-left: auto;
13 |   margin-right: auto;
14 | }
15 | 
16 | .back-to-orders-link {
17 |   display: inline-block;
18 |   margin-bottom: 30px;
19 | }
20 | 
21 | .delivery-date {
22 |   font-size: 25px;
23 |   font-weight: 700;
24 |   margin-bottom: 10px;
25 | }
26 | 
27 | .product-info {
28 |   margin-bottom: 3px;
29 | }
30 | 
31 | .product-image {
32 |   max-width: 150px;
33 |   max-height: 150px;
34 |   margin-top: 25px;
35 |   margin-bottom: 50px;
36 | }
37 | 
38 | .progress-labels-container {
39 |   display: flex;
40 |   justify-content: space-between;
41 |   font-size: 20px;
42 |   font-weight: 500;
43 |   margin-bottom: 15px;
44 | }
45 | 
46 | .current-status {
47 |   color: rgb(6, 125, 98);
48 | }
49 | 
50 | @media (max-width: 575px) {
51 |   .progress-labels-container {
52 |     font-size: 16px;
53 |   }
54 | }
55 | 
56 | @media (max-width: 450px) {
57 |   .progress-labels-container {
58 |     flex-direction: column;
59 |     margin-bottom: 5px;
60 |   }
61 | 
62 |   .progress-label {
63 |     margin-bottom: 3px;
64 |   }
65 | }
66 | 
67 | .progress-bar-container {
68 |   height: 25px;
69 |   width: 100%;
70 | 
71 |   border: 1px solid rgb(200, 200, 200);
72 |   border-radius: 50px;
73 |   overflow: hidden;
74 | }
75 | 
76 | .progress-bar {
77 |   height: 100%;
78 |   background-color: green;
79 |   border-radius: 50px;
80 |   width: 50%;
81 | }
82 | 


--------------------------------------------------------------------------------
/styles/shared/amazon-header.css:
--------------------------------------------------------------------------------
  1 | .amazon-header {
  2 |   background-color: rgb(19, 25, 33);
  3 |   color: white;
  4 |   padding-left: 15px;
  5 |   padding-right: 15px;
  6 | 
  7 |   display: flex;
  8 |   align-items: center;
  9 |   justify-content: space-between;
 10 | 
 11 |   position: fixed;
 12 |   top: 0;
 13 |   left: 0;
 14 |   right: 0;
 15 |   height: 60px;
 16 | }
 17 | 
 18 | .amazon-header-left-section {
 19 |   width: 180px;
 20 | }
 21 | 
 22 | @media (max-width: 800px) {
 23 |   .amazon-header-left-section {
 24 |     width: unset;
 25 |   }
 26 | }
 27 | 
 28 | .header-link {
 29 |   display: inline-block;
 30 |   padding: 6px;
 31 |   border-radius: 2px;
 32 |   cursor: pointer;
 33 |   text-decoration: none;
 34 |   border: 1px solid rgba(0, 0, 0, 0);
 35 | }
 36 | 
 37 | .header-link:hover {
 38 |   border: 1px solid white;
 39 | }
 40 | 
 41 | .amazon-logo {
 42 |   width: 100px;
 43 |   margin-top: 5px;
 44 | }
 45 | 
 46 | .amazon-mobile-logo {
 47 |   display: none;
 48 | }
 49 | 
 50 | @media (max-width: 575px) {
 51 |   .amazon-logo {
 52 |     display: none;
 53 |   }
 54 | 
 55 |   .amazon-mobile-logo {
 56 |     display: block;
 57 |     height: 35px;
 58 |     margin-top: 5px;
 59 |   }
 60 | }
 61 | 
 62 | .amazon-header-middle-section {
 63 |   flex: 1;
 64 |   max-width: 850px;
 65 |   margin-left: 10px;
 66 |   margin-right: 10px;
 67 |   display: flex;
 68 | }
 69 | 
 70 | .search-bar {
 71 |   flex: 1;
 72 |   width: 0;
 73 |   font-size: 16px;
 74 |   height: 38px;
 75 |   padding-left: 15px;
 76 |   border: none;
 77 |   border-top-left-radius: 4px;
 78 |   border-bottom-left-radius: 4px;
 79 |   border-top-right-radius: 0;
 80 |   border-bottom-right-radius: 0;
 81 | }
 82 | 
 83 | .search-button {
 84 |   background-color: rgb(254, 189, 105);
 85 |   border: none;
 86 |   width: 45px;
 87 |   height: 40px;
 88 |   border-top-right-radius: 4px;
 89 |   border-bottom-right-radius: 4px;
 90 |   flex-shrink: 0;
 91 | }
 92 | 
 93 | .search-icon {
 94 |   height: 22px;
 95 |   margin-left: 2px;
 96 |   margin-top: 3px;
 97 | }
 98 | 
 99 | .amazon-header-right-section {
100 |   width: 180px;
101 |   flex-shrink: 0;
102 |   display: flex;
103 |   justify-content: end;
104 | }
105 | 
106 | .orders-link {
107 |   color: white;
108 | }
109 | 
110 | .returns-text {
111 |   display: block;
112 |   font-size: 13px;
113 | }
114 | 
115 | .orders-text {
116 |   display: block;
117 |   font-size: 15px;
118 |   font-weight: 700;
119 | }
120 | 
121 | .cart-link {
122 |   color: white;
123 |   display: flex;
124 |   align-items: center;
125 |   position: relative;
126 | }
127 | 
128 | .cart-icon {
129 |   width: 50px;
130 | }
131 | 
132 | .cart-text {
133 |   margin-top: 12px;
134 |   font-size: 15px;
135 |   font-weight: 700;
136 | }
137 | 
138 | .cart-quantity {
139 |   color: rgb(240, 136, 4);
140 |   font-size: 16px;
141 |   font-weight: 700;
142 | 
143 |   position: absolute;
144 |   top: 4px;
145 |   left: 22px;
146 |   
147 |   width: 26px;
148 |   text-align: center;
149 | }
150 | 


--------------------------------------------------------------------------------
/styles/shared/general.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: Roboto, Arial;
  3 |   color: rgb(33, 33, 33);
  4 |   /* The <body> element has a default margin of 8px
  5 |      on all sides. This removes the default margins. */
  6 |   margin: 0;
  7 | }
  8 | 
  9 | /* <p> elements have a default margin on the top
 10 |    and bottom. This removes the default margins. */
 11 | p {
 12 |   margin: 0;
 13 | }
 14 | 
 15 | button {
 16 |   cursor: pointer;
 17 | }
 18 | 
 19 | select {
 20 |   cursor: pointer;
 21 | }
 22 | 
 23 | input, select, button {
 24 |   font-family: Roboto, Arial;
 25 | }
 26 | 
 27 | .button-primary {
 28 |   color: rgb(33, 33, 33);
 29 |   background-color: rgb(255, 216, 20);
 30 |   border: 1px solid rgb(252, 210, 0);
 31 |   border-radius: 8px;
 32 |   cursor: pointer;
 33 |   box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
 34 | }
 35 | 
 36 | .button-primary:hover {
 37 |   background-color: rgb(247, 202, 0);
 38 |   border: 1px solid rgb(242, 194, 0);
 39 | }
 40 | 
 41 | .button-primary:active {
 42 |   background: rgb(255, 216, 20);
 43 |   border-color: rgb(252, 210, 0);
 44 |   box-shadow: none;
 45 | }
 46 | 
 47 | .button-secondary {
 48 |   color: rgb(33, 33, 33);
 49 |   background: white;
 50 |   border: 1px solid rgb(213, 217, 217);
 51 |   border-radius: 8px;
 52 |   cursor: pointer;
 53 |   box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
 54 | }
 55 | 
 56 | .button-secondary:hover {
 57 |   background-color: rgb(247, 250, 250);
 58 | }
 59 | 
 60 | .button-secondary:active {
 61 |   background-color: rgb(237, 253, 255);
 62 |   box-shadow: none;
 63 | }
 64 | 
 65 | /* These styles will limit text to 2 lines. Anything
 66 |    beyond 2 lines will be replaced with "..."
 67 |    You can find this code by using an A.I. tool or by
 68 |    searching in Google.
 69 |    https://css-tricks.com/almanac/properties/l/line-clamp/ */
 70 | .limit-text-to-2-lines {
 71 |   display: -webkit-box;
 72 |   -webkit-line-clamp: 2;
 73 |   -webkit-box-orient: vertical;
 74 |   overflow: hidden;
 75 | }
 76 | 
 77 | .link-primary {
 78 |   color: rgb(1, 124, 182);
 79 |   cursor: pointer;
 80 | }
 81 | 
 82 | .link-primary:hover {
 83 |   color: rgb(196, 80, 0);
 84 | }
 85 | 
 86 | /* Styles for dropdown selectors. */
 87 | select {
 88 |   color: rgb(33, 33, 33);
 89 |   background-color: rgb(240, 240, 240);
 90 |   border: 1px solid rgb(213, 217, 217);
 91 |   border-radius: 8px;
 92 |   padding: 3px 5px;
 93 |   font-size: 15px;
 94 |   cursor: pointer;
 95 |   box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
 96 | }
 97 | 
 98 | select:focus,
 99 | input:focus {
100 |   outline: 2px solid rgb(255, 153, 0);
101 | }


--------------------------------------------------------------------------------
/tracking.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Tracking</title>
 5 | 
 6 |     <!-- This code is needed for responsive design to work.
 7 |       (Responsive design = make the website look good on
 8 |       smaller screen sizes like a phone or a tablet). -->
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1">
10 | 
11 |     <!-- Load a font called Roboto from Google Fonts. -->
12 |     <link rel="preconnect" href="https://fonts.googleapis.com">
13 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
15 | 
16 |     <!-- Here are the CSS files for this page. -->
17 |     <link rel="stylesheet" href="styles/shared/general.css">
18 |     <link rel="stylesheet" href="styles/shared/amazon-header.css">
19 |     <link rel="stylesheet" href="styles/pages/tracking.css">
20 |   </head>
21 |   <body>
22 |     <div class="amazon-header">
23 |       <div class="amazon-header-left-section">
24 |         <a href="amazon.html" class="header-link">
25 |           <img class="amazon-logo"
26 |             src="images/amazon-logo-white.png">
27 |           <img class="amazon-mobile-logo"
28 |             src="images/amazon-mobile-logo-white.png">
29 |         </a>
30 |       </div>
31 | 
32 |       <div class="amazon-header-middle-section">
33 |         <input class="search-bar" type="text" placeholder="Search">
34 | 
35 |         <button class="search-button">
36 |           <img class="search-icon" src="images/icons/search-icon.png">
37 |         </button>
38 |       </div>
39 | 
40 |       <div class="amazon-header-right-section">
41 |         <a class="orders-link header-link" href="orders.html">
42 |           <span class="returns-text">Returns</span>
43 |           <span class="orders-text">& Orders</span>
44 |         </a>
45 | 
46 |         <a class="cart-link header-link" href="checkout.html">
47 |           <img class="cart-icon" src="images/icons/cart-icon.png">
48 |           <div class="cart-quantity">3</div>
49 |           <div class="cart-text">Cart</div>
50 |         </a>
51 |       </div>
52 |     </div>
53 | 
54 |     <div class="main">
55 |       <div class="order-tracking">
56 |         <a class="back-to-orders-link link-primary" href="orders.html">
57 |           View all orders
58 |         </a>
59 | 
60 |         <div class="delivery-date">
61 |           Arriving on Monday, June 13
62 |         </div>
63 | 
64 |         <div class="product-info">
65 |           Black and Gray Athletic Cotton Socks - 6 Pairs
66 |         </div>
67 | 
68 |         <div class="product-info">
69 |           Quantity: 1
70 |         </div>
71 | 
72 |         <img class="product-image" src="images/products/athletic-cotton-socks-6-pairs.jpg">
73 | 
74 |         <div class="progress-labels-container">
75 |           <div class="progress-label">
76 |             Preparing
77 |           </div>
78 |           <div class="progress-label current-status">
79 |             Shipped
80 |           </div>
81 |           <div class="progress-label">
82 |             Delivered
83 |           </div>
84 |         </div>
85 | 
86 |         <div class="progress-bar-container">
87 |           <div class="progress-bar"></div>
88 |         </div>
89 |       </div>
90 |     </div>
91 |   </body>
92 | </html>
93 | 


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