Amazon Clone

/* Importing Open Sans font from Google Fonts with various weights for typography versatility */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

/* Global settings */
* {
    margin: 0; /* Remove default margin from all elements */
    padding: 0; /* Remove default padding from all elements */
    box-sizing: border-box; /* Include padding and border in the width and height of all elements */
    font-family: "Open Sans", sans-serif; /* Set a consistent font family throughout the site */
}

/* Enhance link navigation smoothness on click */
html {
    scroll-behavior: smooth;
}

/* Link styles */
a {
    text-decoration: none; /* Remove underline from links */
    color: #fff; /* Set link color to white */
}

/* Change link color on hover to a light gray for visual feedback */
a:hover {
    color: #ddd;
}

/* Header styles */
header {
    width: 100%; /* Ensure header spans full width of the viewport */
    background-color: #0f1111; /* Dark background for the header */
}

/* Navbar container */
.navbar {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Distribute space between items */
    cursor: pointer; /* Indicate clickable items */
    color: #fff; /* White text color for readability */
    max-width: 1280px; /* Maximum width of navbar */
    margin: 0 auto; /* Center navbar horizontally */
}

/* Logo styles */
.nav-logo img {
    margin-top: 10px; /* Space above the logo */
    width: 128px; /* Set fixed width for the logo */
}

/* Delivery section styles */
.address .deliver {
    margin-left: 20px; /* Space to the left of the deliver element */
    font-size: 0.75rem; /* Smaller font size for the text */
    color: #ccc; /* Light gray color for text */
}

/* Address icon and text alignment */
.address .map-icon {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically in the center */
}

/* Search bar container */
.nav-search {
    display: flex; /* Use flexbox for layout */
    justify-content: space-evenly; /* Distribute space evenly among children */
    max-width: 620px; /* Maximum width of the search bar */
    width: 100%; /* Full width of the container */
    height: 40px; /* Fixed height for the search bar */
    border-radius: 4px; /* Rounded corners */
}

/* Search select dropdown styling */
.select-search {
    background: #f3f3f3; /* Light gray background */
    width: 50px; /* Width of the dropdown */
    text-align: center; /* Center text horizontally */
    border-top-left-radius: 4px; /* Rounded top-left corner */
    border-bottom-left-radius: 4px; /* Rounded bottom-left corner */
    border: none; /* No border */
}

/* Search input field styling */
.search-input {
    max-width: 600px; /* Maximum width */
    width: 100%; /* Full width */
    font-size: 1rem; /* Size of text */
    border: none; /* No border */
    outline: none; /* Remove outline on focus */
    padding-left: 10px; /* Padding inside the input field */
}

/* Search icon styling */
.search-icon {
    max-width: 45px; /* Maximum width */
    width: 100%; /* Full width */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    font-size: 1.2rem; /* Icon size */
    background: #febd68; /* Background color */
    color: #000; /* Text color */
    cursor: pointer; /* Indicate clickable item */
    border-top-right-radius: 4px; /* Rounded top-right corner */
    border-bottom-right-radius: 4px; /* Rounded bottom-right corner */
}

/* Sign-in and returns text styling */
.sign-in p, .returns p {
  font-size: 0.75rem; /* Smaller font size */
}

.sign-in,
.returns span {
  font-size: 0.875rem; /* Slightly larger font size */
  font-weight: 600; /* Bold text for emphasis */
}

/* Cart icon and text styling */
.cart {
    display: flex; /* Use flexbox for layout */
}

.cart .cart-icon {
    font-size: 2.5rem; /* Large size for the cart icon */
}

.cart p {
    margin-top: 20px; /* Margin above the text */
    font-weight: 500; /* Medium font weight */
}

/* Styling for the banner */
.banner {
    padding: 10px 20px; /* Padding around content */
    background: #222f3d; /* Darker background for contrast */
    color: #fff; /* White text for readability */
    font-size: 0.875rem; /* Text size */
}

.banner-content {
    margin: 0 auto; /* Center content horizontally */
    max-width: 1280px; /* Maximum width */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Distribute space between items */
}

.panel {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
    gap: 5px; /* Space between items */
    cursor: pointer; /* Indicate clickable items */
}

.panel span {
    margin-right: 7px; /* Space to the right of the icon */
}

.links {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Align items vertically */
    list-style: none; /* Remove default list styling */
    gap: 15px; /* Space between links */
    flex-grow: 1; /* Allow the list to fill space */
    margin-left: 15px; /* Space to the left of the list */
}

.links a {
    padding: 10px 0; /* Padding above and below links */
}

.deals a {
    font-size: 0.9rem; /* Text size */
    font-weight: 500; /* Medium font weight */
    white-space: nowrap; /* Prevent text wrapping */
}
/* Hero Section Styles */
.hero-section {
    height: 400px; /* Set fixed height for visual impact and consistency */
    background-image: url("images/hero-img.jpg"); /* Background image for hero section */
    background-position: center; /* Center the background image */
    background-size: cover; /* Ensure the image covers the entire section, cropping if necessary */
}

/* Shop Section Styles */
.shop-section {
    display: flex; /* Use flexbox to align children vertically in a column */
    align-items: center; /* Center items horizontally */
    flex-direction: column; /* Stack children elements vertically */
    background-color: #f3f3f3; /* Light gray background for the section, enhances readability */
    padding: 50px 0; /* Vertical padding for spacing around content */
}

/* Grid layout for product images, responsive to varying screen sizes */
.shop-images {
    display: grid; /* Grid layout for placing children elements in a matrix */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Create as many columns as fit, minimum width of 250px */
    gap: 40px; /* Space between grid items */
    max-width: 1280px; /* Maximum width of the grid */
    width: 100%; /* Full width to utilize available space */
}

/* Individual product link styling */
.shop-link {
    background-color: #fff; /* White background for each product block */
    padding: 30px; /* Padding around the content */
    display: flex; /* Use flexbox for layout */
    cursor: pointer; /* Indicate that the block is clickable */
    flex-direction: column; /* Organize content vertically */
    white-space: nowrap; /* Prevent text wrapping */
}

/* Product images */
.shop-link img {
    width: 100%; /* Full width to expand to the container's width */
    height: 280px; /* Fixed height for images */
    object-fit: cover; /* Ensure the image covers the space without distorting */
    margin-bottom: 10px; /* Space below the image */
}

/* Product titles */
.shop-link h3 {
    margin-bottom: 10px; /* Space below the title */
}

/* Links within shop-link */
.shop-link a {
    display: inline-block; /* Make link block-level but inline for styling */
    margin-top: 10px; /* Space above the link */
    font-size: 0.9rem; /* Slightly smaller font size */
    color: blue; /* Blue color for links, traditional for web */
    font-weight: 500; /* Medium font weight for emphasis */
    transition: color 0.3s ease; /* Smooth transition for color change on hover */
}

/* Hover effect for links */
.shop-link:hover a {
    color: #c7511f; /* Change color on hover to provide feedback */
    text-decoration: underline; /* Underline to indicate it's clickable */
}

/* Footer Styles */
.footer-title {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    background-color: #37475a; /* Dark blue background for contrast */
    color: #fff; /* White text for readability */
    font-size: 0.875rem; /* Standard font size for footer titles */
    font-weight: 600; /* Bold text for emphasis */
    height: 60px; /* Fixed height for uniform appearance */
}

/* Footer link container */
.footer-items {
    display: flex; /* Use flexbox to distribute space among children */
    justify-content: space-evenly; /* Even spacing between columns */
    width: 100%; /* Full width to use available space */
    margin: 0 auto; /* Center horizontally */
    background: #232f3e; /* Dark background for footer */
}

/* Footer headings */
.footer-items h3 {
    font-size: 1rem; /* Slightly larger font size for visibility */
    font-weight: 500; /* Medium font weight for clarity */
    color: #fff; /* White text for contrast */
    margin: 20px 0 10px 0; /* Margins for spacing around headings */
}

/* Footer links list */
.footer-items ul {
    list-style: none; /* Remove default list style */
    margin-bottom: 20px; /* Space below each list */
}

/* Footer links */
.footer-items li a {
    color: #ddd; /* Light gray for text, less contrast than white */
    font-size: 0.875rem; /* Standard font size for footer links */
}

/* Hover effect for footer links */
.footer-items li a:hover {
    text-decoration: underline; /* Underline on hover for visual feedback */
}