Scribd
Upload
2 views6 pages

Create Marketing Hero Section Using HTML and CSS

This document provides a comprehensive guide on creating a responsive marketing hero section using HTML and CSS, aimed at beginners. It includes detailed instructions on the necessary HTML structure, CSS styling, and responsive design techniques. By following the steps outlined, readers will be able to develop a professional-looking hero section for their websites.

Uploaded by

levinsiklopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views6 pages

Create Marketing Hero Section Using HTML and CSS

This document provides a comprehensive guide on creating a responsive marketing hero section using HTML and CSS, aimed at beginners. It includes detailed instructions on the necessary HTML structure, CSS styling, and responsive design techniques. By following the steps outlined, readers will be able to develop a professional-looking hero section for their websites.

Uploaded by

levinsiklopez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Enter a blog title or keyword...

Components Create Marketing Hero Section using HTML and CSS

Create Marketing Hero Section using HTML


and CSS
By Faraz - September 30, 2024     

Learn how to create a responsive marketing hero section using HTML and CSS.

Join us on Telegram

Read Also
Create Interactive Add/Remove Cards with HTML, CSS, and
JavaScript

Table of Contents
1. Project Introduction
2. HTML Code
3. CSS Code
4. Conclusion
5. Preview

A hero section is the first thing visitors see when they visit a website, and it's
important to make it stand out. It usually includes a bold headline, catchy text,
and a call-to-action (CTA) button. In this blog, you'll learn how to create a
marketing hero section using HTML and CSS. This guide is perfect for
beginners, and by the end, you'll have a simple, professional hero section for
your website.

Prerequisites:
Before you start, you should have a basic understanding of:

HTML (HyperText Markup Language)


CSS (Cascading Style Sheets)
A text editor like Visual Studio Code or Sublime Text
Web browser to preview your work

Source Code

Step 1 (HTML Code):

Start by creating the basic HTML structure. This will include a container,
headline, text, and button inside your hero section.

Here's a breakdown of the key components:

`<!DOCTYPE html>`

Defines the document as an HTML5 document.

`<html lang="en">`

Starts the HTML document and specifies the language as English.

`<head>`

Contains meta information and links to resources like fonts, stylesheets, and the
page's title.

`<meta charset="UTF-8">`: Defines the character encoding as UTF-8.


`<meta name="viewport" content="width=device-width, initial-scale=1.0">`:
Ensures proper scaling on mobile devices.
`<title>`: Sets the page's title to "Marketing Hero Section."
Google Fonts: Loads the Roboto font from Google Fonts.
Stylesheet link: Links to an external CSS file (`styles.css`), where the
styling for the webpage is defined.

`<body>`

The body contains all the visible content, including the navigation bar and the
hero section.

`<nav>` (Navigation bar)

Contains the site logo, a menu, and actions (like login and "Get started"
buttons).
Logo: An image linked to the homepage (`logo.svg`).
Menu: A list of links such as "How it works," "Goals," etc.
Mobile menu: Includes buttons for opening/closing the menu with an icon
button using `svg` graphics.
Actions: Provides "Login" and "Get started" buttons.

`<main>` (Main content)

Hero Section: The main visual part of the page.


Hero visual: Displays three autoplaying videos (`video-1.mp4`, `video-
2.mp4`, `video-3.mp4`) that loop and are muted.
Hero content: Displays the main headline and action buttons.
Headline: Rotating messages like "Elevate your brand", "Increase
Sales", and "Inspire audiences".
Call to Action (CTA): A button prompting users to "Get started."
Scroll Button: A button to scroll down, with a downward arrow
represented using an `svg` icon.

Scripts and Interaction


JavaScript is used to open/close the mobile navigation menu by
adding/removing the `open` class with `nav.classList.add('open')` and
`nav.classList.remove('open')`

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initia
6 <title>Marketing Hero Section</title>
7 <link href="https://fonts.googleapis.com/css2?family=Robo
8 <link rel="stylesheet" href="styles.css">
9 </head>
10 <body>
11 <nav id="nav" class="nav">
12 <div class="nav-container">
13 <a href="#" class="logo-wrapper">
14 <img
15 class="logo-img"
16 src="https://raw.githubusercontent.com/mobalti/op
17 alt="Open Props logo"
18 width="160"
19 height="29.44"
20 />
21 </a>
22 <div class="menu-wrapper">
23 <div class="mobile-wrapper">
24 <div class="mobile-mobile-head">
25 <a href="#" class="logo-wrapper">
26 <img
27 class="logo-img"
28 src="https://raw.githubusercontent.com/moba
29 alt="Open Props logo"
30 width="160"
31 height="29.44"
32 /> 
 

Read Also
Create a Subscription Form with Personalized Messaging

Step 2 (CSS Code):

Next, add CSS to style your hero section. Let's break it down into sections:

1. @import
@import 'https://unpkg.com/[email protected]' layer(library);
This imports a library called "Open Props," which provides a set of reusable
design tokens (CSS variables) for colors, spacing, typography, etc.

2. @layer reset
@layer reset {
*,:before,:after {
box-sizing: border-box;
}
:where(:not(dialog)) {
margin: 0;
}
}

This reset layer is setting a consistent `box-sizing: border-box` for all


elements, including `::before` and `::after`. This helps ensure padding and
borders are included within the element’s width and height.
It also removes default margins from all elements except `<dialog>` using
the `:where()` selector.

3. @layer base
@layer base {
:root {
color-scheme: dark;
font-family: 'Inter', sans-serif;
--palette-hue: 249;
--red: #e81155;
--surface-1: black;
--surface-invert: white;
--text-1: white;
--highlight-text: var(--red);
--headline1-font-size: var(--font-size-fluid-3);
...
}
body {
background-color: var(--surface-1);
color: var(--text-1);
font-size: var(--body-font-size);
min-block-size: 100dvb;
}
}

The `:root` defines global variables (CSS custom properties) for colors, font
sizes, and spacing. These variables can be reused throughout the
document.
`color-scheme: dark` sets the default theme to dark mode.
Variables like `--palette-hue`, `--surface-1`, and `--highlight-text` control
the hue, background color, and highlight color, respectively.
The `body` styles set a black background and white text for the entire page.

4. Navigation and Menu Styling (@layer App)


@layer App {
.nav {
display: grid;
place-items: center;
}
.nav-container {
display: grid;
grid-auto-flow: column;
gap: var(--space-md);
}
...
@media (width < 1056px) {
padding-inline-start: var(--space-md);
padding-inline-end: var(--space-sm);
}
}

Navigation-related classes (`.nav`, `.nav-container`, `.menu-wrapper`) use


grid layout to structure the navigation bar.
For smaller screen sizes (`@media width < 1056px`), padding and layout
adjustments are applied to make the layout responsive.

5. Buttons
.button-link {
font-size: var(--button-link-font-size);
background-color: var(--button-link-face);
color: var(--button-link-text);
&:hover {
background-color: var(--button-link-hover-face);
}
&.primary {
background-color: var(--button-link-primary-face);
}
}

`.button-link` is a generic button style with custom properties for font size,
color, and hover effects.
The `.primary` class modifies the button with a primary background color
and custom hover behavior.

6. Animations
@keyframes animate-ratio {
from {
aspect-ratio: 16/9;
clip-path: inset(0 0);
}
to {
aspect-ratio: 2.5/6;
clip-path: inset(120px 0 50px 0);
}
}
@keyframes push-up {
10%, 90% {
transform: translateY(-100%);
}
100% {
transform: translateY(-200%);
}
}

`@keyframes animate-ratio` animates the aspect ratio and clip path of


elements (useful for visual transitions).
`push-up`animates vertical scrolling of elements with a `translateY`
transformation.

7. Responsive Design
@media (width >= 700px) {
--headline1-font-size: var(--extend-font-size-fluid-4);
}
@media (width < 1056px) {
--nav-link-font-size: var(--font-size-3);
}

Media queries adjust font sizes, padding, and layout for different screen
widths. For example, the headline font size becomes larger on screens wider
than 700px, and the navigation link font size becomes larger on screens
smaller than 1056px.

1 @import 'https://unpkg.com/[email protected]' layer(library);


2
3 @layer reset {
4 *,
5 ::before,
6 ::after {
7 box-sizing: border-box;
8 }
9
10 :where(:not(dialog)) {
11 margin: 0;
12 }
13 }
14
15 @layer base {
16 :root {
17 color-scheme: dark;
18 font-family: 'Inter', sans-serif;
19 --palette-hue: 249;
20 --palette-hue-rotate-by: 0;
21 --palette-chroma: 0;
22 --red: #e81155;
23 --extend-font-size-fluid-4: clamp(3.5rem, 4.333vw, 4.5rem
24
25 --surface-1: black;
26 --surface-invert: white;
27 --text-1: white;
28 --text-invert: black;
29 --brand: var(--red);
30
31 --space-xxs: var(--size-1);
32 --space-xs: var(--size-2); 
 

Final Output:

Read Also

You might also like