tracking.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tracking</title>

		<!-- This code is needed for responsive design to work.
      (Responsive design = make the website look good on
      smaller screen sizes like a phone or a tablet). -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<!-- Load a font called Roboto from Google Fonts. -->
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
			rel="stylesheet" />

		<!-- Here are the CSS files for this page. -->
		<link rel="stylesheet" href="styles/shared/general.css" />
		<link rel="stylesheet" href="styles/shared/amazon-header.css" />
		<link rel="stylesheet" href="styles/pages/tracking.css" />

		<link rel="icon" type="image/svg" href="images/icons/amazon-favicon.svg" />
	</head>
	<body>
		<div class="amazon-header">
			<div class="amazon-header-left-section">
				<a href="index.html" class="header-link">
					<img
						class="amazon-logo"
						src="images/amazon-logo-white.png"
						alt="Amazon Logo" />
					<img
						class="amazon-mobile-logo"
						src="images/amazon-mobile-logo-white.png"
						alt="Amazon Mobile Logo" />
				</a>
			</div>

			<div class="amazon-header-middle-section">
				<input class="search-bar" type="text" placeholder="Search" />

				<button class="search-button">
					<img
						class="search-icon"
						src="images/icons/search-icon.png"
						alt="Search Icon" />
				</button>
			</div>

			<div class="amazon-header-right-section">
				<a class="orders-link header-link" href="orders.html">
					<span class="returns-text">Returns</span>
					<span class="orders-text">& Orders</span>
				</a>

				<a class="cart-link header-link" href="checkout.html">
					<img
						class="cart-icon"
						src="images/icons/cart-icon.png"
						alt="Cart Icon" />
					<div class="cart-quantity">3</div>
					<div class="cart-text">Cart</div>
				</a>
			</div>
		</div>

		<div class="main">
			<div class="order-tracking">
				<a class="back-to-orders-link link-primary" href="orders.html">
					View all orders
				</a>

				<div class="delivery-date">Arriving on Monday, June 13</div>

				<div class="product-info">
					Black and Gray Athletic Cotton Socks - 6 Pairs
				</div>

				<div class="product-info">Quantity: 1</div>

				<img
					class="product-image"
					src="images/products/athletic-cotton-socks-6-pairs.jpg"
					alt="Cotton Socks Image" />

				<div class="progress-labels-container">
					<div class="progress-label">Preparing</div>
					<div class="progress-label current-status">Shipped</div>
					<div class="progress-label">Delivered</div>
				</div>

				<div class="progress-bar-container">
					<div class="progress-bar"></div>
				</div>
			</div>
		</div>
	</body>
</html>