Skip to content
High-Performance Full Stack-Development

Search is only available in production builds. Try building and previewing the site to test it out locally.

Atop Shop header Implementation

Now, we are going to use the knowledge we have so far to build the AtopShop website header.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AtopShop Header</title>
    <!-- Link to the base styles for the header and navigation -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- Link to the responsive design styles for different screen sizes -->
    <link rel="stylesheet" href="css/queries.css" />
  </head>
  <body>
    <!--
    **************************************************************
    * This HTML file is part of a responsive design tutorial      *
    * created by Atop Web Technologies. It is intended for      *
    * High-Performance Full Stack-Development training courses.  *
    *                                                          *
    * This file contains the structure for the header section    *
    * including logo, navigation, and action buttons.          *
    *                                                          *
    * It is crucial to read and understand the comments in this  *
    * file to fully grasp how the HTML structure supports         *
    * responsive design and future enhancements.                *
    *                                                          *
    * For any questions, please open a Git issue or contact us   *
    * at training@atopwebtech.com.                              *
    **************************************************************
  -->


    <!-- Explanation of the code below: -->
    <!--
    The code defines the structure of the AtopShop webpage's header.
    It includes the following sections:


    1. `<div class="logo">`: Contains the site name, styled as a heading.
    2. `<input type="checkbox" id="menu-toggle" class="menu-toggle" />`: A checkbox input used for toggling the visibility of the navigation menu on mobile devices. It will be controlled using pseudo-classes in future lessons.
    3. `<label for="menu-toggle" class="menu-icon">&#9776;</label>`: A label element styled as a hamburger menu icon. This will be used to toggle the navigation menu's visibility.
    4. `<nav class="nav">`: The navigation menu containing links to different pages (e.g., About, Contact).
    5. `<div class="actions">`: Contains action buttons such as Register and Login.
  -->


    <header class="header">
      <!-- Logo section with site name -->
      <div class="logo">
        <h1>AtopShop</h1>
      </div>


      <!-- Mobile hamburger menu icon -->
      <input type="checkbox" id="menu-toggle" class="menu-toggle" />
      <label for="menu-toggle" class="menu-icon">&#9776;</label>


      <!-- Navigation menu with links -->
      <nav class="nav">
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>


      <!-- Action buttons section -->
      <div class="actions">
        <button class="register">Register</button>
        <button class="login">Login</button>
      </div>
    </header>
  </body>
</html>

CSS Code

/*
  **************************************************************
  * This CSS file contains the base styles for the header and   *
  * navigation used in the AtopShop project. It is part of     *
  * High-Performance Full Stack-Development training courses    *
  * provided by Atop Web Technologies.                        *
  *                                                          *
  * These styles define the layout and appearance of the       *
  * header, logo, navigation, and action buttons. It is       *
  * essential to understand these base styles to build upon     *
  * them with responsive adjustments in the future.           *
  *                                                          *
  * For any questions or clarifications, please open a Git     *
  * issue or contact us at training@atopwebtech.com.          *
  **************************************************************
*/


/* Explanation of the code below: */
/*
  This CSS file defines the base styles for the header and navigation.
  It includes:


  1. Resetting margin, padding, and box-sizing to ensure consistency across browsers.
  2. Setting the base font size for the entire document.
  3. Styling the header section, including layout, background color, and text color.
  4. Styling the logo, navigation links, and action buttons.
*/


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Resets margin and padding for all elements to 0 */
  /* Ensures consistent box-sizing for all elements */
}


/* Set base font size */
html {
  font-size: 62.5%;
  /* Sets the base font size for the document. 1rem = 10px (62.5% of 16px) */
}


/* Header styles */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background-color: #36538f;
  color: white;
  /* Displays the header as a flex container */
  /* Justifies space between elements (logo, navigation, actions) */
  /* Aligns items vertically in the center */
  /* Adds padding around the header */
  /* Sets background color and text color */
}


.logo h1 {
  margin: 0;
  cursor: pointer;
  /* Removes margin from the logo heading */
  /* Changes the cursor to a pointer to indicate it's clickable */
}


.nav {
  display: flex;
  gap: 3.5rem;
  /* Displays navigation links as a flex container */
  /* Adds gap between links */
}


.nav a {
  color: white;
  text-decoration: none;
  font-size: 2.5rem;
  font-weight: bold;
  /* Styles navigation links with white color, no underline, larger font size, and bold weight */
}


.actions {
  display: flex;
  gap: 1rem;
  /* Displays action buttons as a flex container */
  /* Adds gap between buttons */
}


.actions button {
  background-color: white;
  color: #36538f;
  border: none;
  border-radius: 1.2rem;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  text-align: center;
  margin: 0.4rem 0.2rem;
  cursor: pointer;
  font-weight: bold;
  /* Styles buttons with white background, matching text color, no border, rounded corners, padding, and bold font weight */
}


/* Hide the mobile menu elements on larger screens */
.menu-toggle,
.menu-icon {
  display: none;
}

Media Queries CODE (FOR RESPONSIVENESS):

/*
  **************************************************************
  * This CSS file contains media queries for responsive design *
  * created by Atop Web Technologies. It is part of the       *
  * High-Performance Full Stack-Development training courses.  *
  *                                                          *
  * Media queries are used to adjust styles for different      *
  * screen sizes, ensuring the design adapts to various        *
  * devices. Understanding these queries is crucial for        *
  * mastering responsive design techniques.                   *
  *                                                          *
  * For any questions or clarifications, please open a Git     *
  * issue or contact us at training@atopwebtech.com.          *
  **************************************************************
*/


/* Explanation of the code below: */
/*
  This CSS file contains media queries to handle responsive design.
  It includes:


  1. Styles for screens with a maximum width of 768px (tablet view).
  2. Styles for screens with a maximum width of 480px (mobile view).
  3. Adjustments for layout, font size, and visibility of elements based on screen size.
*/


@media (max-width: 768px) {
  /* Styles for screens with a maximum width of 768px */


  .nav {
    gap: 1rem;
    /* Reduces gap between navigation links on tablet screens */
  }


  .nav a {
    font-size: 1.6rem;
    /* Decreases font size of navigation links on tablet screens */
  }


  .actions button {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    /* Adjusts padding and font size for action buttons on tablet screens */
  }
}


@media (max-width: 480px) {
  /* Styles for screens with a maximum width of 480px */


  html {
    font-size: 55%;
    /* Reduces base font size for better readability on mobile screens */
  }


  .header {
    padding: 1rem;
    justify-content: space-between;
    /* Reduces padding and ensures header items are spaced out on mobile screens */
  }


  .logo h1 {
    font-size: 2rem;
    /* Decreases font size of logo heading on mobile screens */
  }


  .nav {
    display: none;
    /* Hides navigation menu by default on mobile screens */
    flex-direction: column;
    /* Stacks navigation items vertically */
    width: 100%;
    gap: 1rem;
    align-items: center;
    /* Centers items horizontally */
    background-color: #36538f;
    /* Matches header background color */
    position: absolute;
    /* Positions menu below the header */
    top: 100%;
    left: 0;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Adds shadow for better visibility */
    z-index: 1;
    /* Ensures the menu appears above other content */
  }


  .nav a {
    font-size: 1.4rem;
    color: white;
    /* Styles navigation links with reduced font size and white color */
  }


  .actions {
    display: none;
    /* Hides action buttons on mobile screens */
  }


  .menu-icon {
    display: block;
    /* Displays the menu icon (hamburger) on mobile screens */
    font-size: 2.5rem;
    /* Increases the font size of the menu icon for better visibility */
    cursor: pointer;
    /* Changes the cursor to a pointer to indicate it's clickable */
  }


  /* Comment: Toggle functionality for the navigation menu will be added later */
  /*
  #menu-toggle:checked + .menu-icon + .nav {
    display: flex; /* Shows the navigation menu when the checkbox is checked */
}