ATOPSHOP Hero Section Implementation
We are going to build the Hero Section
HTML CODE:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- ************************************************************** * Link to the base styles for the hero, background-image, and * * search input * ************************************************************** --> <link rel="stylesheet" href="css/style.css" /> <!-- ************************************************************** * Link to the responsive design styles for different screen * * sizes * ************************************************************** --> <link rel="stylesheet" href="css/queries.css" /> <!-- ************************************************************** * Compulsory script tag to include Ionic fonts: we are using * * Ionic font for the search logo in the input text box * ************************************************************** --> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js" ></script> <title>AtopShop Hero</title> </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 hero section * * including background-image, and input text element. * * * * 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 main content structure of the AtopShop webpage's header and hero section. It includes the following elements:
1. `<header class="header">`: The header of the page containing the logo, navigation, and action buttons. - `<div class="logo">`: Contains the site name, styled as a heading. - `<input type="checkbox" id="menu-toggle" class="menu-toggle" />`: A checkbox input used for toggling the visibility of the navigation menu on mobile devices. - `<label for="menu-toggle" class="menu-icon">☰</label>`: A label element styled as a hamburger menu icon. - `<nav class="nav">`: The navigation menu containing links to different pages (e.g., About, Contact). - `<div class="actions">`: Contains action buttons such as Register and Login.
2. `<main>`: The main content area of the page. - `<section class="hero">`: A section element representing the hero area of the page, typically used to highlight key content. - `<div class="content">`: A container div to hold the content within the hero section. - `<div class="search-container">`: A container div for the search functionality. - `<input type="text" placeholder="Search laptops...">`: An input field where users can type their search queries. - `<ion-icon name="search-outline" class="feature-icon" size="small"></ion-icon>`: An icon element representing the search button, styled using Ionicons. -->
<!-- Header section --> <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">☰</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>
<!-- Main content section --> <main> <!-- Hero section with background-image --> <section class="hero"> <div class="content"> <!-- Search-container section, contains the input search and the search icon --> <div class="search-container"> <input type="text" placeholder="Search laptops..." />
<!--Ionic Icon:for search symbol --> <ion-icon name="search-outline" class="feature-icon" size="small" ></ion-icon> </div> </div> </section> </main> </body></html>CSS CODE:
/* ************************************************************** * This CSS file contains the base styles for the header and * * hero section 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 * * and hero sections, including the background, search input, * * and icons. 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 hero sections. 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. 5. Styling the hero section, including layout, background image, and positioning. 6. Styling the search input field and placeholder text. 7. Styling the search container and feature icon.*/
* { margin: 0; padding: 0; box-sizing: border-box; /* Resets margin and padding for all elements to 0 */ /* Ensures consistent box-sizing for all elements */}
html { font-size: 62.5%; /* Sets the base font size for the document. 1rem = 10px (62.5% of 16px) */}
.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;}
.hero { position: relative; height: 70vh; width: 100vw; overflow-x: hidden; background: url("./../../../../../assets/atop-shop-hero.png") no-repeat center center/cover; background-size: cover; display: flex; justify-content: center; align-items: center; /* Sets the hero section's height and width */ /* Hides horizontal overflow */ /* Sets a background image with center alignment and cover size */ /* Displays the hero section as a flex container */ /* Centers content both horizontally and vertically */}
.hero .content { border-radius: 1rem; padding: 2rem; /* Adds rounded corners to the content */ /* Adds padding around the content */}
.hero input[type="text"] { padding: 1.5rem; font-size: 1.6rem; width: 60rem; border-radius: 2rem; border-color: #3a5da8; font-weight: bold; /* Adds padding inside the input field */ /* Sets the font size for the input text */ /* Sets the width of the input field */ /* Sets border color to #3a5da8 */ /* Adds rounded corners to the input field */ /* Sets the font weight to bold */}
.hero input[type="text"]::placeholder { color: #3a5da8; font-weight: bold; font-size: 1.5rem; /* Styles the placeholder text with a specific color and bold font weight */}
.search-container { display: flex; align-items: center; justify-content: center; position: relative; /* Displays the search container as a flex container */ /* Centers items both horizontally and vertically */ /* Sets the position to relative for positioning child elements */}
.feature-icon { position: absolute; bottom: 2%; right: 2%; height: 3.2rem; width: 3.2rem; padding: 1rem; color: #3a5da8; cursor: pointer; font-size: 0.8rem; /* Positions the feature icon absolutely within the search container */ /* Sets the bottom and right position */ /* Sets the size and padding of the icon */ /* Sets the color of the icon */}MEDIA QUERIES(QUERIES.CSS)
/* ************************************************************** * 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 1400px. 2. Styles for screens with a maximum width of 768px (tablet view). 3. Styles for screens with a maximum width of 480px (mobile view).
Adjustments are made to the layout, font size, and visibility of elements based on the screen size to ensure a responsive design. These adjustments include resizing the hero section, input field, and feature icon, as well as modifying header navigation, logo, and action buttons.*/
@media (max-width: 1400px) { /* Styles for screens with a maximum width of 1400px */
.hero { height: 65vh; width: 100%; /* Adjusts the height and width of the hero section */ }
.hero input[type="text"] { width: 50rem; padding: 1.5rem; font-size: 1rem; /* Adjusts the width, padding, and font size of the search input */ }
.hero input[type="text"]::placeholder { color: #3a5da8; font-weight: bold; font-size: 1.2rem; /* Adjusts the placeholder text color, weight, and size */ }
.feature-icon { height: 1.8rem; width: 3rem; padding: 0.9rem; bottom: auto; /* Adjusts the size and padding of the feature icon */ }}
@media (max-width: 768px) { /* Styles for screens with a maximum width of 768px (tablet view) */
.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 */ }
.hero { height: 50vh; width: 100%; /* Adjusts the height and width of the hero section */ }
.hero input[type="text"] { width: 40rem; padding: 1.5rem; font-size: 1rem; /* Adjusts the width, padding, and font size of the search input */ }
.hero input[type="text"]::placeholder { color: #3a5da8; font-weight: bold; font-size: 0.9rem; /* Adjusts the placeholder text color, weight, and size */ }
.feature-icon { height: 1.8rem; width: 2.4rem; padding: 0.8rem; bottom: auto; /* Adjusts the size and padding of the feature icon */ }}
@media (max-width: 480px) { /* Styles for screens with a maximum width of 480px (mobile view) */
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 */ }
.hero { height: 40vh; width: 100%; /* Adjusts the height and width of the hero section */ }
.hero input[type="text"] { width: 20rem; padding: 0.7rem; font-size: 1rem; /* Adjusts the width, padding, and font size of the search input */ }
.hero input[type="text"]::placeholder { color: #3a5da8; font-weight: bold; font-size: 0.9rem; /* Adjusts the placeholder text color, weight, and size */ }
.feature-icon { height: 1.8rem; width: 2.2rem; padding: 0.6rem; bottom: auto; /* Adjusts the size and padding of the feature icon */ }}
@media (max-width: 540px) { /* Styles for screens with a maximum width of 540px (specific breakpoint) */
.hero { height: 40vh; width: 100%; /* Adjusts the height and width of the hero section */ }
.hero input[type="text"] { width: 20rem; padding: 0.7rem; font-size: 1rem; /* Adjusts the width, padding, and font size of the search input */ }
.hero input[type="text"]::placeholder { color: #3a5da8; font-weight: bold; font-size: 0.9rem; /* Adjusts the placeholder text color, weight, and size */ }
.feature-icon { height: 1.8rem; width: 2.8rem; padding: 0.2rem; bottom: auto; font-size: 0.1rem; /* Adjusts the size and padding of the feature icon */ }}