Amazon Clone

Notes

Comprehensive Amazon Clone Project: HTML & CSS Study Notes for Complete Beginners

Section 1: Introduction to the Project

(Video Timestamp: 00:00 - 01:50)

1.1 What are we building?

• We are creating a CSS-based clone of the Amazon.com (global version) homepage.

• This means our primary focus is on replicating the look and feel of the website’s homepage, emphasizing its visual design using HTML for structure and CSS for styling.

• Important Note: This project will not include interactive functionality (like adding items to a cart, user login, or a live search feature). These functionalities require JavaScript, which is beyond the scope of this HTML & CSS focused clone.

1.2 Why build this project?

This project offers significant benefits, especially for beginners in web development:

• Understanding “Projects” for Resumes: For many aspiring developers, it’s often unclear what a “project” suitable for a resume actually looks like. This project provides a foundational, practical example.

• Learning the Development Process: You will learn the step-by-step practical process involved in building a front-end website from start to finish.

• HTML & CSS Application: It serves as an excellent opportunity to apply and solidify your basic knowledge of HTML and CSS in a real-world context.

• New CSS Concepts: Beyond just revising previously learned concepts, you will be introduced to and learn 3-4 new, important CSS concepts that are frequently used in modern web development.

• Resume Booster: A well-executed front-end clone like this is a valuable addition to your resume, effectively showcasing your practical web development skills to potential employers.

• Future Expansion Capabilities: Completing this project will equip you with the foundational understanding to potentially add more features and functionalities (e.g., using JavaScript) in the future. It also prepares you to implement your own original project ideas using HTML and CSS.

1.3 Prerequisites (What you should ideally know first):

To get the most out of this project, a basic understanding of the following is highly recommended:

• Basic knowledge of HTML (Hyper-Text Markup Language).

• Basic knowledge of CSS (Cascading Style Sheets).

• Don’t worry if you’re completely new! The video suggests referring to separate “one-shot” tutorials specifically designed for HTML and CSS fundamentals before diving into this project.

1.4 Project Scope:

We will focus on cloning specific, key elements of the Amazon.com homepage to achieve a recognizable and realistic look:

• We will primarily focus on replicating the homepage layout and design.

• Specific components that will be replicated include:

  • The navigation bar (header) at the very top of the page.

  • The secondary panel located directly below the header (often containing “All” and category links).

  • The prominent hero section (the main large background image/banner).

  • The product boxes or shop section (displaying various product categories).

  • The footer (the bottom-most section with links and copyright information).

• Important Version Note: We are specifically cloning the amazon.com (the global version) and not amazon.in (the Indian version).

• While there might be similarities, our replication will follow the global site’s design.

• Due to the vastness of the Amazon website, the project focuses on replicating the most important parts that define the website’s core look and feel.

---

Section 2: Project Setup and Foundational CSS

(Video Timestamp: 05:25 - 14:50)

This section covers setting up your project files and applying essential, universal CSS rules that lay the groundwork for your entire website.

2.1 Setting up Files and Folders

(Video Timestamp: 05:25)

1. Create a Project Folder: Begin by creating a new folder on your computer dedicated to this project. You have the flexibility to name it anything you prefer, such as “Amazon Clone,” “My Website Project,” or “Classroom”.

2. Create HTML File: Inside your newly created project folder, create a new file and name it index.html. This file will serve as the primary structure for your entire webpage.

3. Create CSS File: Also within your project folder, create another new file and name it style.css. This file will contain all the styling rules that define the appearance of your HTML elements.

4. Add Images: Download all necessary images required for the project, such as the Amazon logo, the hero section’s main background image, and various product images for different sections. Place all these downloaded images directly inside your project folder, alongside your index.html and style.css files.

   • Tip for Downloading Images from Websites: You can often download images directly from existing websites. Simply right-click (or double-click on a Mac) on the desired image within your browser, then select the “Save Image As…” option. This allows you to easily reuse existing images for your clone. All images specifically needed for this project are typically provided via a download link in the video description.

2.2 Basic HTML Boilerplate

(Video Timestamp: 07:14)

• In your index.html file, you can quickly generate the basic HTML boilerplate code. Type ! (exclamation mark) and then press Tab or Enter. This action will generate the standard foundational structure for an HTML document, which includes:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
   
  </body>
  </html>

• Modify the Title: Change the content within the <title> tag from “Document” to Amazon Clone. This text will appear in the browser tab or window title bar.

2.3 Linking Your CSS File

(Video Timestamp: 07:44)

• To ensure that the styling rules defined in your style.css file are applied to your index.html document, you need to establish a link between them.

• Place the following line of code inside the <head> section of your index.html file:

  <link rel="stylesheet" href="style.css">

  • rel="stylesheet": This attribute specifies the relationship of the linked document to the current document. Here, it clearly indicates that the linked file is a stylesheet.

  • href="style.css": This attribute defines the URL (or path) of the linked resource. In this case, it points directly to your style.css file, assuming it’s in the same directory as your index.html.

2.4 Integrating Icons with Font Awesome

(Video Timestamp: 08:00 - 11:40)

Icons are small graphical symbols (like a magnifying glass for search or a shopping cart) that significantly enhance the user interface of a website. Font Awesome is a widely popular and convenient library that provides a vast collection of free, easy-to-use icons.

• Concept: CDN (Content Delivery Network)

  • A CDN is essentially a distributed network of servers strategically located in various geographical regions around the world.

  • These servers store copies of common web resources, such as images, videos, JavaScript libraries, and, in our case, icon libraries like Font Awesome.

  • How it works: When a user accesses your website, the CDN intelligently identifies the server closest to that user’s geographical location. It then delivers the requested content from this nearest server.

  • Benefit: The primary advantage of using a CDN is significantly faster website loading times. Because data travels a shorter distance, your website’s performance improves, leading to a better user experience. Even the video you are watching, or any streaming video, is often delivered via a CDN.

• Steps to Use Font Awesome in Your Project:

  1. Find the CDN Link for Font Awesome:
     • Open your web browser and search on Google for “CDN Font Awesome”.
     • Look for results that originate from cdnjs.com (CDNJS). This is a highly reliable and commonly used source for CDN links to a wide variety of web libraries.
     • On the CDNJS page for Font Awesome, you will find a <link> tag. Copy this entire <link> tag.
  2. Paste into Your HTML File:
     • Paste the copied Font Awesome <link> tag into the <head> section of your index.html file.
     • Crucial Placement: It’s important to place this Font Awesome link before your own style.css link. This order ensures that if you decide to define any custom CSS styles for icons in your style.css, those custom styles will correctly override Font-Awesome’s default styles, giving you more control.
     • The link tag will typically look something like this (the version number and integrity attribute might differ as libraries update):

  <link rel="stylesheet" href="[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css)" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />

• Notice that this is also a rel="stylesheet" attribute, indicating it’s a CSS file, but its href points to an external URL, meaning it’s hosted and delivered by the CDN.

1. Insert an Icon into Your HTML:

• Go to the official Font Awesome website (fontawesome.com).

• Click on the “Icons” section.

• Use the search bar to find the specific icon you want to use (e.g., “heart,” “magnifying glass,” “cart,” “house,” “Instagram,” “TikTok”).

• Filter for “Free” icons. This is crucial to ensure you are using icons that are legally permissible and copyright-free for your projects.

• Click on the desired icon. You will see a code snippet (it usually starts with <i class="...">). Click on this snippet to copy it to your clipboard.

• Paste this <i> tag directly into your index.html file precisely where you want the icon to appear on your webpage.

• Example for a Heart Icon:

	<i class="fa-regular fa-heart"></i>

• The class attributes (e.g., fa-regular, fa-heart) are specific to Font Awesome. They instruct the browser which icon to display based on the CSS rules loaded from the CDN.

• To See Your Icon: Save your index.html file and then refresh your browser page to see the icon displayed.

2.5 Universal CSS Reset & Properties

(Video Timestamp: 12:54 - 14:50)

These are fundamental CSS rules that should be applied to the entire page for consistent behavior and appearance across different browsers. It’s a best practice to place these rules at the very top of your style.css file.

1. Universal Margin and Padding Reset:

   * { /* The asterisk (*) is a universal selector that applies styles to ALL elements on the page */
       margin: 0;       /* Removes default outer spacing around all elements */
       padding: 0;      /* Removes default inner spacing within all elements */
   }

   • Explanation: Web browsers typically apply their own default margin and padding to various HTML elements (e.g., paragraphs, headings, lists). These defaults can vary slightly between browsers, leading to inconsistencies in your layout. Resetting them to 0 gives you complete, explicit control over all spacing on your page, preventing unexpected gaps or misalignments.

2. Setting a Default Font Family:

   * {
       /* ... other properties like margin and padding ... */
       font-family: Arial, sans-serif; /* Sets a common, readable font for the entire page */
   }

   • Explanation: While the original Amazon website uses a custom font called “Amazon Ember”, Arial is a widely available, highly readable, and professional-looking sans-serif font that serves as an excellent default or fallback for your project.

3. box-sizing: border-box; (Crucial for Predictable Layout!):

   * {
       /* ... other properties ... */
       box-sizing: border-box; /* This is a crucial property for consistent box model behavior */
   }

   • Understanding the Default CSS Box Model (without border-box):
     • By default, in CSS, an element’s total width and height are calculated as: content width/height + padding + border.
     • Example: If you set width: 100px; for a <div>, and then add padding: 10px; (on all sides) and border: 2px; (on all sides), the element’s actual rendered width in the browser would become 100px (content) + 10px (left padding) + 10px (right padding) + 2px (left border) + 2px (right border) = 124px.
     • This can make it very challenging to predict the final dimensions of your elements and accurately align them, especially in complex layouts.
   • How box-sizing: border-box; Changes the Model:
     • When you apply box-sizing: border-box;, the width and height you set for an element include its padding and border.
     • Example: If you set width: 100px; and then add padding: 10px; and border: 2px;, the content area of the element will shrink internally to accommodate that padding and border, but the total rendered width of the element will remain exactly 100px.
   • Benefit: This property makes CSS layout far more predictable and significantly easier to manage. It prevents elements from unexpectedly growing larger than their specified dimensions, which is a common source of layout issues. It is considered a highly recommended and almost standard best practice in modern CSS development.

---

Section 3: Building the Navigation Bar (Header)

(Video Timestamp: 14:50 - 55:00)

The navigation bar is the very top section of the Amazon homepage. It’s a crucial component as it contains the logo, search bar, and various navigation links. We’ll break it down into several logical parts.

3.1 Overall Navbar Structure (HTML)

(Video Timestamp: 14:50)

We will create a main div with the class navbar to house all elements of our top navigation bar.

<body>
    <div class="navbar">
        </div>
</body>

3.2 Styling the Navbar (CSS)

(Video Timestamp: 15:00)

• CSS

/* style.css */
.navbar {
    height: 60px; /* Standard height for Amazon's top bar */
    background-color: #0F1111; /* Dark background color, almost black */
    color: white; /* Default text color for elements inside is white */
    display: flex; /* Use flexbox for horizontal arrangement of items */
    align-items: center; /* Vertically center items within the navbar */
    justify-content: space-evenly; /* Distribute space evenly between items */
}

• height: 60px;: Sets a fixed height for the navigation bar, consistent with the Amazon design.

• background-color: #0F1111;: Applies the specific dark background color found on Amazon’s header.

• color: white;: Sets the default text color for all direct children of navbar to white, ensuring readability against the dark background.

• display: flex;: This is a core CSS Flexbox property. It turns the navbar into a flex container, allowing its direct children (flex items) to be arranged easily in a row or column. In this case, they will be arranged in a row by default.

  • Explanation of Flexbox: Flexbox is a one-dimensional layout method for arranging items in rows or columns. It makes designing flexible, responsive layouts much easier by distributing space and aligning items within a container.

• align-items: center;: When display: flex; is set on the container, align-items controls how flex items are aligned along the cross axis. For a row (default flex-direction), the cross axis is vertical. center will vertically center all items within the navbar.

• justify-content: space-evenly;: This property controls how flex items are distributed along the main axis (horizontal in a row). space-evenly distributes space such that there is equal space between each item and also equal space at both ends of the container.

3.3 Amazon Logo

(Video Timestamp: 16:00)

HTML Structure

The Amazon logo will be placed inside a div to create a clickable area.

• HTML

<div class="navbar">
    <div class="nav-logo border"> <div class="logo"></div>
    </div>
    </div>

• nav-logo: A container for the logo, allowing us to define its dimensions and apply hover effects.

• border: This is a reusable utility class that we’ll define once and apply to multiple navigation elements to give them a consistent subtle border on hover, mimicking Amazon’s UI.

• logo: An inner div that will actually display the Amazon logo image using CSS background-image. This approach is common when you want to use CSS properties (like background-size, background-repeat) to control image display without relying on an <img> tag directly.

CSS Styling

(Video Timestamp: 17:00)

• CSS

/* style.css */
.nav-logo {
    height: 50px; /* Height for the logo container */
    width: 100px; /* Width for the logo container */
}
 
.logo {
    background-image: url("amazon_logo.png"); /* Path to your downloaded Amazon logo */
    background-size: cover; /* Ensures the image covers the entire container, potentially cropping */
    height: 50px;
    width: 100%; /* Makes the logo image fill the width of its parent (.nav-logo) */
}

• background-image: url("amazon_logo.png");: Points to the Amazon logo image you downloaded and placed in your project folder. Ensure the filename matches.

• background-size: cover;: A common CSS property for background images. It scales the image to be as large as possible without stretching, ensuring the image covers the entire background area. If the aspect ratio of the image doesn’t match the container, it will crop the image to fit.

• width: 100%;: Makes the logo div take up the full width of its parent (nav-logo).

3.4 The border Utility Class (Hover Effect)

(Video Timestamp: 18:20)

To replicate Amazon’s subtle hover effect on its clickable elements, we create a generic border class that can be applied to multiple components.

• CSS

/* style.css */
.border {
    border: 1.5px solid transparent; /* Initial transparent border */
    border-radius: 2px; /* Slightly rounded corners */
}
 
.border:hover {
    border: 1.5px solid white; /* White border on hover */
}

• border: 1.5px solid transparent;: Initially, elements with the border class will have a transparent border. This ensures that when the border appears on hover, the element doesn’t suddenly jump or change size (which would happen if there was no border at all initially).

• border-radius: 2px;: Adds a very slight rounding to the corners of the border, matching Amazon’s subtle design.

• .border:hover: This is a CSS pseudo-class that applies styles only when the mouse cursor is hovering over the element. When hovered, the transparent border changes to a solid white border, creating the visual feedback.

3.5 Delivery Location (Deliver to)

(Video Timestamp: 19:15)

This section typically shows a location icon and “Deliver to” with a country or city.

HTML Structure

• HTML

<div class="navbar">
    <div class="nav-address border"> <p class="add-first">Deliver to</p>
        <div class="add-icon">
            <i class="fa-solid fa-location-dot"></i> <p class="add-second">India</p>
        </div>
    </div>
    </div>

• nav-address: Main container for the delivery information.

• add-first: Paragraph for “Deliver to”.

• add-icon: A container for the location icon and the country name.

• <i class="fa-solid fa-location-dot"></i>: The Font Awesome location icon.

• add-second: Paragraph for the country (e.g., “India”).

CSS Styling

(Video Timestamp: 20:00)

• CSS

/* style.css */
.nav-address {
    padding-left: 9px; /* Inner spacing on the left */
    padding-right: 9px; /* Inner spacing on the right */
    height: 50px; /* Match height of logo for alignment */
    display: flex; /* Use flexbox */
    align-items: center; /* Vertically center icon and text */
}
 
.add-first {
    color: #CCCCCC; /* Lighter grey text */
    font-size: 0.85rem; /* Smaller font size */
    margin-left: 15px; /* Space from left edge */
}
 
.add-second {
    font-size: 1rem; /* Standard font size */
    font-weight: 700; /* Bold text for emphasis */
    margin-left: 3px; /* Space from the icon */
}
 
.add-icon {
    display: flex; /* Flexbox for icon and text inside */
    align-items: center; /* Vertically center icon and text */
}

• padding-left/right: Adds internal spacing to the address container.

• height: 50px;: Ensures consistent height with the logo for vertical alignment in the navbar.

• display: flex; align-items: center; (for nav-address and add-icon): Essential for arranging the icon and text horizontally and centering them vertically.

• font-size: 0.85rem; / 1rem;: rem (root em) is a relative unit. 1rem equals the font size of the root HTML element (usually 16px by default). Using rem makes your text scalable relative to the base font size, which is good for responsiveness.

• font-weight: 700;: Makes the country name bold.

3.6 Search Bar

(Video Timestamp: 22:00)

The search bar is a prominent feature in the Amazon navbar, consisting of a dropdown, an input field, and a search icon button.

HTML Structure

HTML

<div class="navbar">
    <div class="nav-search">
        <select class="search-select">
            <option>All</option>
            <option>Electronics</option>
            <option>Books</option>
            </select>
        <input placeholder="Search Amazon" class="search-input">
        <div class="search-icon">
            <i class="fa-solid fa-magnifying-glass"></i> </div>
    </div>
    </div>

• nav-search: Main container for the entire search component.
• <select class="search-select">: The dropdown for selecting search categories.
• <input placeholder="Search Amazon" class="search-input">: The actual text input field where users type their search query. placeholder provides a hint.
• search-icon: Container for the magnifying glass icon.
• <i class="fa-solid fa-magnifying-glass"></i>: The Font Awesome search icon.

CSS Styling

(Video Timestamp: 23:00)

CSS

/* style.css */
.nav-search {
    display: flex; /* Arrange dropdown, input, and button horizontally */
    background-color: pink; /* Temporary, will change */
    width: 620px; /* Fixed width for the entire search bar */
    height: 40px; /* Fixed height */
    border-radius: 4px; /* Slightly rounded corners for the entire search bar */
    justify-content: space-evenly; /* Distribute items evenly */
}

.nav-search:hover {
    border: 2px solid orange; /* Highlight with orange border on hover */
}

.search-select {
    background-color: #F3F3F3; /* Light grey background for the dropdown */
    width: 50px; /* Fixed width for the dropdown */
    text-align: center; /* Center the "All" text */
    border-top-left-radius: 4px; /* Rounded corners only on the left side */
    border-bottom-left-radius: 4px;
    border: none; /* Remove default border */
}

.search-input {
    width: 100%; /* Make input fill available space within nav-search */
    font-size: 1rem; /* Standard font size */
    border: none; /* Remove default border */
}

.search-icon {
    width: 45px; /* Width of the search icon button */
    display: flex; /* Use flexbox to center icon */
    justify-content: center; /* Horizontally center the icon */
    align-items: center; /* Vertically center the icon */
    font-size: 1.2rem; /* Size of the icon */
    background-color: #F8BC6A; /* Amazon's distinct orange color */
    border-top-right-radius: 4px; /* Rounded corners only on the right side */
    border-bottom-right-radius: 4px;
    color: #0F1111; /* Dark icon color */
}

• nav-search (Flex Container):
  • display: flex;: Arranges the dropdown, input, and icon side-by-side.
  • width: 620px; height: 40px;: Specific dimensions to match Amazon’s search bar.
  • border-radius: 4px;: Applies rounded corners to the whole search bar container.
  • :hover effect: Adds an orange border when hovered, mimicking Amazon’s interactive feedback.
• search-select:
  • background-color: #F3F3F3;: Light grey background.
  • width: 50px;: Fixed width for the dropdown.
  • border-top-left-radius / border-bottom-left-radius: Applies rounding only to the left corners, creating a continuous rounded shape with the input and icon.
  • border: none;: Removes the default browser border, giving you full control over its appearance.
• search-input:
  • width: 100%;: Crucial! This makes the input field expand to fill all remaining available space within the nav-search flex container, after the dropdown and icon button have taken their fixed widths.
  • border: none;: Removes the default border.
• search-icon:
  • width: 45px;: Fixed width for the button area.
  • display: flex; justify-content: center; align-items: center;: Uses flexbox to perfectly center the magnifying glass icon both horizontally and vertically within its container.
  • background-color: #F8BC6A;: Applies Amazon’s characteristic orange color.
  • border-top-right-radius / border-bottom-right-radius: Applies rounding only to the right corners.
  • color: #0F1111;: Sets the icon color to a dark tone.

3.7 Language and Account & Lists

(Video Timestamp: 30:00 - 37:00)

This section covers the language selection and the “Hello, sign in Accounts & Lists” section, both of which often feature dropdowns and multiple lines of text.

HTML Structure for Language

<div class="navbar">
    <div class="nav-language border"> <i class="fa-solid fa-flag-usa"></i> <select class="lang-select">
            <option>EN</option>
            <option>HI</option>
            </select>
        <i class="fa-solid fa-caret-down"></i> </div>
 
    </div>

• nav-language: Container for the language selection.
• <i class="fa-solid fa-flag-usa"></i>: Font Awesome icon for the US flag.
• <select class="lang-select">: Dropdown for language selection.
• <i class="fa-solid fa-caret-down"></i>: Font Awesome icon for a down arrow, commonly used to indicate a dropdown menu.

CSS Styling for Language

(Video Timestamp: 30:50)

CSS

/* style.css */
.nav-language {
    display: flex; /* Arrange flag, dropdown, and arrow horizontally */
    align-items: flex-end; /* Align items to the bottom, useful for text baselines */
    height: 50px;
    padding-left: 9px;
    padding-right: 9px;
}

.nav-language i { /* Target icons directly within nav-language */
    font-size: 0.85rem; /* Smaller size for flag icon */
    margin-right: 4px; /* Space between flag and dropdown */
}

.nav-language .fa-caret-down {
    font-size: 0.7rem; /* Smaller size for the dropdown arrow */
    margin-left: 2px; /* Small space from the dropdown */
}

.lang-select {
    background-color: transparent; /* Make background transparent */
    color: white; /* White text for options */
    border: none; /* Remove default border */
    font-size: 1rem; /* Standard font size */
    font-weight: 700; /* Bold text for "EN" */
    -webkit-appearance: none; /* Remove default dropdown arrow for Safari/Chrome */
    -moz-appearance: none; /* Remove default dropdown arrow for Firefox */
    appearance: none; /* Standard way to remove default dropdown arrow */
}

.lang-select option {
    background-color: #0F1111; /* Dark background for dropdown options */
    color: white; /* White text for options */
}

• nav-language (display: flex; align-items: flex-end;): align-items: flex-end is chosen to align the text elements to their baseline, which often looks better for mixed text and icons.
• Icon Styling: Specific font sizes and margins are applied to the icons for visual balance.
• lang-select (background-color: transparent; border: none; appearance: none;): These are crucial for styling dropdowns.
  • background-color: transparent;: Makes the background of the select box invisible, allowing the navbar’s background to show through.
  • border: none;: Removes the default ugly browser border.
  • -webkit-appearance: none; -moz-appearance: none; appearance: none;: These properties remove the default dropdown arrow provided by the browser. We then use our own Font Awesome fa-caret-down icon for a consistent custom look.
• lang-select option: Styles for the individual options within the dropdown, which appear when the dropdown is clicked.

HTML Structure for Account & Lists

HTML

<div class="navbar">
    <div class="nav-signin border"> <p><span>Hello, sign in</span></p> <p class="nav-second">Account & Lists <i class="fa-solid fa-caret-down"></i></p>
    </div>

    </div>

• nav-signin: Main container for this section.
• <span> for “Hello, sign in”: A <span> is an inline element used to apply styles to a small part of a text or for semantic purposes without breaking the flow. Here, it allows styling “Hello, sign in” separately.
• nav-second: Contains “Account & Lists” and its dropdown arrow.

CSS Styling for Account & Lists

(Video Timestamp: 35:00)

CSS

/* style.css */
.nav-signin {
    padding-left: 9px;
    padding-right: 9px;
    height: 50px;
    display: flex; /* Arrange text lines vertically using flex-direction column */
    flex-direction: column; /* Stacks items vertically */
    justify-content: center; /* Vertically centers the column of text */
}

.nav-signin p span { /* Target the span specifically */
    font-size: 0.7rem; /* Smaller font for "Hello, sign in" */
}

.nav-second {
    font-size: 0.85rem; /* Slightly larger font for "Account & Lists" */
    font-weight: 700; /* Bold text */
}

• nav-signin (display: flex; flex-direction: column; justify-content: center;): This is a powerful combination for multi-line text.
  • display: flex;: Makes it a flex container.
  • flex-direction: column;: Changes the main axis to vertical, so items (the two paragraphs) stack on top of each other.
  • justify-content: center;: Centers these stacked items vertically within the nav-signin container.
• Font Sizing: Different font sizes are applied to the two lines of text to mimic Amazon’s hierarchy.

3.8 Returns & Orders and Cart

(Video Timestamp: 37:00 - 45:00)

These are the final two major elements in the main navigation bar.

HTML Structure for Returns & Orders

HTML

<div class="navbar">
    <div class="nav-return border"> <p><span>Returns</span></p>
        <p class="nav-second">& Orders</p>
    </div>

    </div>

• nav-return: Container for returns and orders information. The structure and styling will be very similar to “Account & Lists”.

CSS Styling for Returns & Orders

(Video Timestamp: 37:30)

CSS

/* style.css */
.nav-return {
    padding-left: 9px;
    padding-right: 9px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav-return p span {
    font-size: 0.7rem;
}

.nav-return .nav-second { /* Reusing nav-second class */
    font-size: 0.85rem;
    font-weight: 700;
}

• The CSS for nav-return is intentionally very similar to nav-signin because their visual presentation (two lines of text, one smaller and one larger/bolder) is the same. This highlights how reusable CSS classes and consistent styling can simplify development.

HTML Structure for Cart

HTML

<div class="navbar">
    <div class="nav-cart border"> <i class="fa-solid fa-cart-shopping"></i> Cart
    </div>
</div>

• nav-cart: Container for the cart icon and text.
• <i class="fa-solid fa-cart-shopping"></i>: Font Awesome shopping cart icon.

CSS Styling for Cart

(Video Timestamp: 38:00)

CSS

/* style.css */
.nav-cart {
    padding-left: 11px;
    padding-right: 11px;
    height: 50px;
    display: flex; /* Arrange icon and text horizontally */
    align-items: flex-end; /* Align to the bottom to match Amazon's cart icon baseline */
    font-weight: 700; /* Bold text for "Cart" */
    font-size: 0.85rem; /* Standard font size for "Cart" */
}

.nav-cart i {
    font-size: 25px; /* Larger size for the cart icon */
}

• nav-cart (display: flex; align-items: flex-end;): Uses flexbox to place the icon and text side-by-side. align-items: flex-end is particularly important here to ensure the cart icon’s baseline aligns well with the “Cart” text, which is a common Amazon design detail.
• Icon Size: The cart icon is made significantly larger to match its prominence on the actual Amazon site.

---

Section 4: The Secondary Panel (Panel)

(Video Timestamp: 45:00 - 55:00)

Below the main navigation bar, Amazon has a narrower panel containing categories like “All,” “Today’s Deals,” “Customer Service,” etc.

4.1 Overall Panel Structure (HTML)

(Video Timestamp: 45:10)

We will create a div with the class panel to hold all the elements of this secondary navigation bar.

<body>
    <div class="panel">
        </div>
</body>

4.2 Styling the Panel (CSS)

(Video Timestamp: 45:30)

CSS

/* style.css */
.panel {
    height: 40px; /* Standard height for this panel */
    background-color: #222F3D; /* Darker blue background color */
    display: flex; /* Use flexbox for horizontal arrangement of items */
    align-items: center; /* Vertically center items */
    justify-content: flex-start; /* Align items to the start (left) */
    color: white; /* Default text color for elements inside is white */
    font-size: 0.85rem; /* Standard font size for panel links */
}

• height: 40px;: Sets a fixed height.
• background-color: #222F3D;: Applies Amazon’s specific dark blue panel color.
• display: flex; align-items: center; justify-content: flex-start;: Uses flexbox to arrange items horizontally, center them vertically, and align them to the left of the panel.
• color: white; font-size: 0.85rem;: Sets default text color and size for consistency.

4.3 The “All” Section (Hamburger Menu Icon)

(Video Timestamp: 46:30)

This is the first item in the panel, typically featuring a “hamburger” menu icon and the text “All”.

HTML Structure

HTML

<div class="panel">
    <div class="panel-all">
        <i class="fa-solid fa-bars"></i> All
    </div>
    </div>

• panel-all: Container for the “All” icon and text.
• <i class="fa-solid fa-bars"></i>: The Font Awesome “bars” icon, commonly known as the hamburger menu.

CSS Styling

(Video Timestamp: 47:00)

CSS

/* style.css */
.panel-all {
    font-weight: 700; /* Bold text for "All" */
    padding-left: 10px; /* Space from the left edge of the panel */
    padding-right: 10px; /* Space for hover effect */
    height: 100%; /* Make it fill the full height of the panel for click area */
    display: flex;
    align-items: center; /* Vertically center icon and text */
}

.panel-all i {
    margin-right: 5px; /* Space between icon and text */
}

/* Reusing the .border class for hover effect on panel items */
.panel-all.border,
.panel-ops p.border { /* Apply hover to individual paragraphs for panel ops */
    /* Adjust padding for panel items if needed to accommodate border */
    padding: 0 9px; /* Example padding to fit the border without changing size too much */
}

• panel-all: font-weight: 700; makes the “All” text bold. height: 100%; makes the hover area span the full height of the panel. display: flex; align-items: center; centers the icon and text.
• panel-all i: Adds a small margin to the right of the icon for spacing.
• Reusing .border: While the video might show applying .border directly to panel-all and panel-ops p, the combined notes suggest the border class is already defined globally. If you want this hover effect, you’d apply the .border class to the panel-all div in your HTML.

4.4 Panel Options / Navigation Links

(Video Timestamp: 48:30)

These are the textual links like “Today’s Deals”, “Customer Service”, “Registry”, etc.

HTML Structure

HTML

<div class="panel">
    <div class="panel-ops">
        <p class="border">Today's Deals</p>
        <p class="border">Customer Service</p>
        <p class="border">Registry</p>
        <p class="border">Gift Cards</p>
        <p class="border">Sell</p>
        </div>
    </div>

• panel-ops: A container div for all the individual paragraph links.
• <p class="border">: Each link is a paragraph element. The border class is applied to each p tag directly so that each link gets its own hover border, mimicking Amazon’s behavior.

CSS Styling

(Video Timestamp: 49:00)

CSS

/* style.css */
.panel-ops {
    width: 70%; /* Takes up a significant portion of the panel's width */
    font-size: 0.9rem; /* Slightly smaller font size than default */
    display: flex; /* Arrange links horizontally */
    gap: 15px; /* Creates space between the links */
    /* Note: justify-content is not needed here if using gap as the main spacing method */
    /* If you prefer justify-content: space-around; or space-between; on .panel-ops, you can use that instead of gap. */
}

.panel-ops p {
    padding: 0 9px; /* Apply padding to each individual link for hover effect */
    display: flex; /* Make p tags flex containers to vertically center text if needed */
    align-items: center; /* Vertically center text if the p has height */
    height: 100%; /* Make it fill the full height of the panel for hover area */
}

• panel-ops (width: 70%; display: flex; gap: 15px;):
  • width: 70%;: Gives this section a defined width within the panel.
  • display: flex;: Arranges the child p elements horizontally.
  • gap: 15px;: This CSS property is excellent for adding space between flex items without adding extra margin to the ends. It’s often preferred over margin-left for individual items when using flexbox.
• panel-ops p (padding: 0 9px; display: flex; align-items: center; height: 100%;):
  • padding: 0 9px;: Crucial padding for the hover effect on each individual link, ensuring the border appears neatly around the text.
  • display: flex; align-items: center; height: 100%;: These ensure that the text within each p is perfectly centered vertically and that the hoverable area extends the full height of the panel.

4.5 Shop Deals Section

(Video Timestamp: 50:00)

This is the last element in the panel, typically showing a link like “Shop deals in Electronics”.

HTML Structure

HTML

<div class="panel">
    <div class="panel-deals border"> Shop deals in Electronics
    </div>
</div>

• panel-deals: Container for the shop deals link.

CSS Styling

(Video Timestamp: 50:30)

CSS

/* style.css */
.panel-deals {
    padding-left: 9px;
    padding-right: 9px;
    height: 100%; /* Fill the full height of the panel */
    display: flex;
    align-items: center; /* Vertically center the text */
    font-weight: 700; /* Bold text */
}

• panel-deals: The styling is similar to panel-all, ensuring it takes up the full height of the panel, centers its content, and has the border hover effect.

---

Section 5: Building the Hero Section (Main Banner)

(Video Timestamp: 58:30 - 1:07:50)

The hero section is the large, prominent image area at the top of the Amazon homepage, often featuring promotional content or key messages. It typically includes a large background image with a message box overlaid[cite: 300].

5.1 Overall Hero Section Structure (HTML)

(Video Timestamp: 59:03)

We will create a div with the class hero-section to serve as the main container for our hero banner. Inside it, we’ll place another div for the message that appears on top of the image[cite: 302, 309].

<body>
    <div class="hero-section">
        <div class="hero-message">
            </div>
    </div>
    </body>

• hero-section: The main container for the hero image and its content.
• hero-message: A div that will contain the text message and a clickable link displayed on the hero image.

5.2 Styling the Hero Section (CSS)

(Video Timestamp: 59:50)

CSS

/* style.css */
.hero-section {
    background-image: url('hero_image.jpg'); /* Path to your downloaded hero image */ [cite: 303, 304]
    background-size: cover; /* Ensures the image covers the entire section */ [cite: 306]
    height: 350px; /* Adjusted height for optimal visual balance */ [cite: 337, 338]
    display: flex; /* Use flexbox to position the hero-message box */ [cite: 324, 327]
    align-items: flex-end; /* Aligns content (hero-message) to the bottom of the section */ [cite: 328]
    justify-content: center; /* Horizontally centers content within the section */ [cite: 332]
}

• background-image: url('hero_image.jpg');: Sets the background image for this section to your downloaded hero_image.jpg. Make sure the file path is correct.

• background-size: cover;: This property scales the background image to cover the entire container. It ensures no empty space is left, even if it means cropping parts of the image.

• height: 350px;: Sets a fixed height for the hero section. This value was adjusted for a better visual fit, allowing the message box to be visible while keeping the section compact.

• display: flex;: Makes the hero-section a flex container, allowing its child (hero-message) to be easily positioned.

• align-items: flex-end;: When display: flex; is set on a row-oriented container (the default flex-direction), align-items controls alignment along the cross-axis (vertical). flex-end pushes the flex items to the very bottom of the container. This is used here to position the hero-message div at the bottom of the hero image.

• justify-content: center;: This property controls alignment along the main-axis (horizontal in a row). center will horizontally center the hero-message div within the hero-section.

5.3 The Hero Message Box (HTML Content)

(Video Timestamp: 60:56)

The hero-message div will contain a paragraph of text and a clickable link.

HTML

<div class="hero-section">
    <div class="hero-message">
        <p>You are on amazon.com. You can also shop on Amazon India for millions of products with fast local delivery. <a href="#">Click here to go to amazon.in</a></p> [cite: 638, 639]
    </div>
</div>

• The text “You are on amazon.com…” is placed in a paragraph tag.
• The phrase “Click here to go to amazon.in” is wrapped in an <a> (anchor) tag to make it a clickable link. The href="#" is a placeholder, as the link won’t be functional in this static clone.

5.4 Styling the Hero Message Box (CSS)

(Video Timestamp: 61:44)

CSS

/* style.css */
.hero-message {
    background-color: white; /* White background for the message box */ [cite: 312, 313]
    height: 40px; /* Fixed height for the message box */ [cite: 312, 314]
    width: 80%; /* Takes up 80% of the hero-section's width */ [cite: 331, 333]
    display: flex; /* Use flexbox to center its own text content */ [cite: 315, 318]
    align-items: center; /* Vertically centers the text within the message box */ [cite: 316, 319]
    justify-content: center; /* Horizontally centers the text within the message box */ [cite: 317, 319]
    margin-bottom: 25px; /* Pushes the message box up from the very bottom of the hero section */ [cite: 335, 336]
    font-size: 0.85rem; /* Standard font size for the message text */ [cite: 322, 323]
}

.hero-message a { /* Styling for the clickable link within the message box */
    color: #007185; /* Amazon's characteristic blue link color */ [cite: 320, 321]
    text-decoration: none; /* Removes the default underline from the link */ [cite: 320]
}

• background-color: white;: Gives the message box a distinct white background.

• height: 40px;: Sets a fixed height for the message box.

• width: 80%;: The message box will occupy 80% of its parent’s (hero-section) width, allowing for some spacing on the sides when centered.

• display: flex; align-items: center; justify-content: center;: This powerful Flexbox combination is used within the hero-message div itself to perfectly center its text content (the paragraph and link) both horizontally and vertically.

• margin-bottom: 25px;: Adds space between the bottom of the hero-message box and the very bottom of the hero-section image. This subtle margin helps in positioning the box effectively.

• font-size: 0.85rem;: Sets a consistent font size for the text within the message box.

• hero-message a:

  • color: #007185;: Applies Amazon’s signature blue color to the clickable link.

  • text-decoration: none;: Removes the default underline that browsers typically apply to links, making it look cleaner.

---

Section 6: Building the Shop Section

(Video Timestamp: 1:07:50 - 1:28:00)

The shop section displays various product categories in a grid-like layout, often in groups of four boxes. This is where we’ll apply concepts like Flexbox or Grid for more complex layout.

6.1 Overall Shop Section Structure (HTML)

(Video Timestamp: 1:08:00)

The shop section will contain multiple “shop boxes,” each representing a product category. We’ll use a main container div for the entire section and individual divs for each box.

<body>
    <div class="shop-section">
        <div class="box">
            </div>
        <div class="box">
            </div>
        <div class="box">
            </div>
        <div class="box">
            </div>
        </div>
    </body>

• shop-section: The main container that will arrange all the individual product boxes.
• box: A generic class for each individual product category box.

6.2 Styling the Shop Section Container (CSS)

(Video Timestamp: 1:09:00)

CSS

/* style.css */
.shop-section {
    display: flex; /* Use flexbox to arrange shop boxes */
    flex-wrap: wrap; /* Allow boxes to wrap to the next line if space runs out */
    justify-content: space-evenly; /* Distribute space evenly between and around boxes */
    background-color: #e2e7e6; /* Light grey background for the entire shop section */
    padding-bottom: 25px; /* Padding at the bottom for spacing */
}

• display: flex;: Makes shop-section a flex container, allowing its child box elements to be laid out horizontally.
• flex-wrap: wrap;: This is crucial! When flex-wrap: wrap; is applied, if the flex items (box elements) collectively exceed the width of their container (shop-section), they will automatically wrap to the next line, creating a multi-row layout. This is essential for our grid of products.
• justify-content: space-evenly;: Distributes space evenly between the boxes and at the ends of the container on each row. This creates a balanced visual appearance for the grid.
• background-color: #e2e7e6;: A light grey background for the entire shop section, contrasting with the hero section and creating a visual separation.
• padding-bottom: 25px;: Adds space below the last row of boxes, preventing the footer from appearing too close.

6.3 Building an Individual Shop Box (HTML Content)

(Video Timestamp: 1:10:00)

Each box will contain a heading, a background image (using CSS), and a link to “Shop now”.

HTML

<div class="box">
    <h2>Electronics</h2>
    <div class="box-img" style="background-image: url('box1_image.jpg');"></div>
    <p>Shop now</p>
</div>

• <h2>: A heading for the product category (e.g., “Electronics”).
• box-img: A div that will display the category image using CSS background-image.
  • Inline Style for background-image: Notice style="background-image: url('box1_image.jpg');". While generally it’s better to put all CSS in style.css, for unique background images per box, this inline style allows you to easily change the image for each box without creating a new CSS class for every single image.
• <p>Shop now</p>: A paragraph with a call to action. You might want to wrap this in an <a> tag to make it a clickable link, though for a clone, the href can be #.

6.4 Styling an Individual Shop Box (CSS)

(Video Timestamp: 1:11:00)

CSS

/* style.css */
.box {
    /* border: 2px solid black; */ /* Optional: for debugging layout */
    height: 400px; /* Fixed height for each box */
    width: 23%; /* Approx. 23% width to fit 4 boxes per row with space */
    background-color: white; /* White background for each box */
    padding: 20px 0px 15px; /* Top, left/right, bottom padding */
    margin-top: 15px; /* Space between rows of boxes */
}

.box-img {
    height: 300px; /* Height for the image area within the box */
    background-size: cover; /* Ensure image covers its container */
    margin-top: 1rem; /* Space above the image */
    margin-bottom: 1rem; /* Space below the image */
    background-repeat: no-repeat; /* Prevent image repetition if container is larger */
}

.box h2 {
    font-size: 1.3rem; /* Slightly larger heading font */
    margin-left: 1rem; /* Indent heading from the left */
}

.box p {
    color: #007185; /* Amazon's blue link color */
    margin-left: 1rem; /* Indent link from the left */
}

• .box:
  • height: 400px;: Gives each box a consistent height.
  • width: 23%;: This percentage is chosen to allow approximately 4 boxes to fit on a single row, leaving some space for justify-content: space-evenly; to distribute. If you had 3 boxes, you might use around 32%. This makes the boxes responsive to the screen width.
  • background-color: white;: Each product box has a white background, making it stand out against the light grey shop-section background.
  • padding: 20px 0px 15px;: Adds internal spacing: 20px top, 0px left/right (as we’ll use margin-left for content), 15px bottom.
  • margin-top: 15px;: This creates vertical spacing between rows of boxes when they wrap. The first row won’t have a top margin, but subsequent rows will.
• .box-img:
  • height: 300px;: Sets the height for the image area.
  • background-size: cover;: Ensures the image fills the box-img area, potentially cropping.
  • margin-top: 1rem; margin-bottom: 1rem;: Adds vertical spacing around the image within the box.
  • background-repeat: no-repeat;: Prevents the background image from tiling if its dimensions are smaller than the container.
• .box h2 and .box p:
  • margin-left: 1rem;: Adds left indentation to the heading and the “Shop now” link for visual appeal within the box.
  • color: #007185;: Applies Amazon’s signature blue to the “Shop now” link.

6.5 Populating Multiple Shop Boxes

(Video Timestamp: 1:15:00)

To create the full grid, simply repeat the HTML structure for the box div. You will need to change the <h2> text and the background-image URL for each box to reflect different product categories.

Example for more boxes:

HTML

<div class="box">
    <h2>Clothing</h2>
    <div class="box-img" style="background-image: url('box2_image.jpg');"></div>
    <p>Shop now</p>
</div>

<div class="box">
    <h2>Home & Kitchen</h2>
    <div class="box-img" style="background-image: url('box3_image.jpg');"></div>
    <p>Shop now</p>
</div>

<div class="box">
    <h2>Beauty Picks</h2>
    <div class="box-img" style="background-image: url('box4_image.jpg');"></div>
    <p>Shop now</p>
</div>

<div class="box">
    <h2>Health & Personal Care</h2>
    <div class="box-img" style="background-image: url('box5_image.jpg');"></div>
    <p>Shop now</p>
</div>

• Remember to download and name your image files correctly (e.g., box1_image.jpg, box2_image.jpg, etc.) and ensure the paths in the url() function are accurate.

---

Section 7: Building the Footer

(Video Timestamp: 1:28:00 - 1:39:00)

The footer is the bottom-most section of the webpage. On Amazon, it’s typically divided into several panels containing navigation links, legal information, and copyright details. We will build a four-panel footer.

7.1 Overall Footer Structure (HTML)

(Video Timestamp: 1:28:10)

All footer content will be contained within the <footer> semantic HTML tag.

<body>
    <footer>
        </footer>
</body>

• <footer>: The semantic tag clearly indicates the bottom section of the document, which usually contains copyright information, navigation links, etc.

7.2 Back to Top Panel (.foot-panel1)

(Video Timestamp: 1:28:20)

This is the very first panel in the footer, a simple strip that typically allows users to scroll back to the top of the page.

HTML Structure

HTML

<footer>
    <div class="foot-panel1">
        Back to Top
    </div>
    </footer>

• foot-panel1: The container for the “Back to Top” text.

CSS Styling

(Video Timestamp: 1:28:50)

CSS

/* style.css */
.foot-panel1 {
    background-color: #37475A; /* Dark bluish-grey background */
    color: white; /* White text color */
    height: 50px; /* Fixed height for the panel */
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Horizontally centers content */
    align-items: center; /* Vertically centers content */
    font-size: 0.85rem; /* Smaller font size for "Back to Top" */
}

• background-color: #37475A;: A specific dark blue-grey background for this panel.
• height: 50px;: Sets a consistent height.
• display: flex; justify-content: center; align-items: center;: This Flexbox combination perfectly centers the “Back to Top” text within the panel.
• font-size: 0.85rem;: Applies a slightly smaller font size for the text.

7.3 Links Panel (.foot-panel2)

(Video Timestamp: 1:29:10)

This panel typically contains multiple columns of categorized links (e.g., “Get to Know Us”, “Make Money with Us”), similar to how Amazon organizes its extensive footer links.

HTML Structure

HTML

<footer>
    <div class="foot-panel2">
        <ul> <p>Get to Know Us</p> <li><a href="#">Careers</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About Amazon</a></li>
            <li><a href="#">Investor Relations</a></li>
            <li><a href="#">Amazon Devices</a></li>
            <li><a href="#">Amazon Science</a></li>
        </ul>
        <ul> <p>Make Money with Us</p>
            <li><a href="#">Sell on Amazon</a></li>
            <li><a href="#">Sell on Amazon Business</a></li>
            </ul>
        <ul> <p>Amazon Payment Products</p>
            <li><a href="#">Amazon Business Card</a></li>
            </ul>
        <ul> <p>Let Us Help You</p>
            <li><a href="#">Amazon and COVID-19</a></li>
            </ul>
    </div>
    </footer>

• foot-panel2: The main container for all the link columns.
• <ul>: Each <ul> (unordered list) represents a column of links.
• <p> (for headings): The main heading for each column (e.g., “Get to Know Us”).
• <li> with <a>: Each <li> (list item) contains an <a> (anchor) tag for a clickable link.

CSS Styling

(Video Timestamp: 1:30:00)

CSS

/* style.css */
.foot-panel2 {
    background-color: #222F3D; /* Dark grey background */
    color: white; /* Default text color for the panel */
    height: 300px; /* Example height for the panel, adjust as needed */
    display: flex; /* Arrange the <ul> (link columns) in a row */
    justify-content: space-evenly; /* Evenly distributes space between link columns */
    padding: 50px 0 0 0; /* Padding from the top to give space from the panel above */
}

.foot-panel2 p { /* Styling for the main heading in each column */
    font-weight: 700; /* Bolder text for headings */
    margin-bottom: 10px; /* Space below the heading */
    font-size: 1rem; /* Adjust as needed */
}

.foot-panel2 ul a { /* Styling for individual links within each column */
    display: block; /* Makes each link take its own line */
    font-size: 0.85rem; /* Smaller font size for links */
    margin-top: 10px; /* Space between links */
    color: #DDDDDD; /* Light grey color for links */
    text-decoration: none; /* Removes default underline */
}

• foot-panel2 (display: flex; justify-content: space-evenly;): Uses Flexbox to arrange the <ul> (link columns) horizontally and distribute them with even spacing.
• height: 300px;: Provides ample height for the list of links.
• padding: 50px 0 0 0;: Adds significant padding from the top to create space below the “Back to Top” panel.
• .foot-panel2 p: Styles the column headings to be bold and have some space below them.
• .foot-panel2 ul a (display: block;): Crucial for making each link appear on its own line, mimicking the typical list-like appearance of footer links. Without display: block;, they would appear horizontally next to each other because <a> tags are inline by default.
• color: #DDDDDD;: Gives the links a subtle light grey color.

7.4 Logo and Language/Currency Panel (.foot-panel3)

(Video Timestamp: 1:32:00)

This panel often features the Amazon logo again, along with options for selecting language or currency.

HTML Structure

HTML

<footer>
    <div class="foot-panel3">
        <div class="logo"></div> </div>
    </footer>

• foot-panel3: Main container for this panel.
• <div class="logo"></div>: We can reuse the .logo class defined for the navbar, as it already contains the background-image for the Amazon logo.

CSS Styling

(Video Timestamp: 1:32:30)

CSS

/* style.css */
.foot-panel3 {
    background-color: #222F3D; /* Same dark grey background as foot-panel2 */
    color: white; /* Default text color */
    height: 70px; /* Fixed height for the panel */
    border-top: 0.5px solid #DDDDDD; /* Thin light grey line above */
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Horizontally centers content */
    align-items: center; /* Vertically centers content */
}

.foot-panel3 .logo { /* Targeting the logo specifically within this panel to override default height/width if needed */
    width: 100px; /* Ensuring the logo is properly sized for this context */
    height: 50px; /* Adjust height to match logo size if different from navbar */
}

• background-color: #222F3D;: Keeps the dark background consistent with the previous panel.
• height: 70px;: Sets a fixed height.
• border-top: 0.5px solid #DDDDDD;: Creates a subtle separator line above this panel, common in Amazon’s footer.
• display: flex; justify-content: center; align-items: center;: Centers the logo perfectly within this panel.
• .foot-panel3 .logo: This specific selector ensures we’re styling the logo div only when it’s inside foot-panel3. We explicitly set its width and height here to ensure it scales correctly for this section of the footer, in case its parent flex container doesn’t give it enough space automatically.

7.5 Copyright and Terms Panel (.foot-panel4)

(Video Timestamp: 1:34:10)

This is the very last section of the footer, containing legal terms, privacy notices, and copyright information.

HTML Structure

HTML

<footer>
    <div class="foot-panel4">
        <div class="pages"> <a href="#">Conditions of Use</a>
            <a href="#">Privacy Notice</a>
            <a href="#">Your Ads Privacy Choices</a>
        </div>
        <div class="copyright"> <p>© 1996-2023, Amazon.com, Inc. or its affiliates</p>
        </div>
    </div>
</footer>

• foot-panel4: Main container for the last footer panel.
• pages: Container for the legal links.
• copyright: Container for the copyright text.

CSS Styling

(Video Timestamp: 1:34:50)

CSS

/* style.css */
.foot-panel4 {
    background-color: #0F1111; /* Same dark background as main navbar for visual consistency */
    color: white; /* White text */
    height: 80px; /* Fixed height for the panel */
    text-align: center; /* Centers all inline text content within the panel */
    display: flex; /* Use flexbox to arrange content vertically */
    flex-direction: column; /* Stack children (links and copyright) vertically */
    justify-content: center; /* Center the stacked content vertically */
    align-items: center; /* Horizontally center the stacked content */
}

.foot-panel4 .pages { /* Styling for the links (Conditions of Use, etc.) */
    font-size: 0.7rem; /* Smaller font size for legal links */
    margin-bottom: 5px; /* Space between links and copyright text */
}

.foot-panel4 .pages a { /* Styling for individual links within .pages */
    color: white; /* White color for links */
    text-decoration: none; /* Removes default underline */
    margin: 0 7px; /* Horizontal spacing between links */
}

.foot-panel4 .copyright { /* Styling for the copyright text */
    font-size: 0.7rem; /* Smaller font size for copyright text */
}

• background-color: #0F1111;: Uses the same dark background as the main navigation bar, creating a strong visual bookend for the website.
• height: 80px;: Sets a fixed height.
• text-align: center;: This property will horizontally center any inline text directly within foot-panel4.
• display: flex; flex-direction: column; justify-content: center; align-items: center;: This robust Flexbox setup is used to stack the pages div (links) and copyright div vertically, and then center them both horizontally and vertically within the foot-panel4 itself.
• Font Sizing and Color: Small font sizes and white color are used for readability in the footer.
• Link Styling: Links are styled to be white and have no underline, with horizontal margins for spacing.

---

Section 8: Final Thoughts and Next Steps

(Video Timestamp: 1:39:00 - End)

• Project Completion: Congratulations! You have successfully built a visual clone of the Amazon.com homepage using HTML and CSS.

• Lines of Code: This project involved writing approximately 1195 lines of HTML and 264 lines of CSS.

• “CSS-Based Clone” Purpose: Remember that this project focuses purely on the front-end layout and styling. It intentionally does not include any interactive functionality, such as adding items to a cart, processing logins, or a live search feature. Implementing these would require JavaScript.

• Real-world vs. Clone: It’s important to understand that building a complete, fully functional website like Amazon requires the effort of thousands of developers and designers working for many years. Your clone is a strong foundation for a resume, showcasing your front-end skills, but it will not have that deep, complex functionality.

8.1 Your Learning Journey: Beyond the Tutorial

• Practice is Key: Do not stop at just watching or reading this tutorial. The most effective way to learn is by actively building the project yourself, then trying to modify it.

• Experimentation: Feel empowered to change sizes, colors, and layouts. Play around with different CSS properties to observe their effects. This hands-on experimentation is crucial for truly understanding and mastering web development concepts.

• Solve Errors: When you inevitably encounter errors or unexpected behaviors, resist the urge to immediately look for a solution. Instead, try to debug them yourself. This problem-solving skill is vital for any developer.

• Expand the Project:

  • Add more pages to your clone, such as a product details page or a login page.

  • Add more product boxes or sections to the shop area.

  • Create entirely new elements or components that you’ve seen on other websites.

  • Challenge yourself by trying to clone other well-known websites!

• Learn JavaScript: To add interactive features (like clicking buttons to make things happen, dynamic content updates, form submissions, or animations), your essential next step should be to learn JavaScript. This will allow you to add “functionality” to your beautiful designs, making your websites truly dynamic and engaging.

Keep Learning and Keep Practicing!

---

References

• Video
• _Contents (Angela Yu)