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 Implementing Product Filtering with HTML, TailwindCSS, and JavaScript.jpg

Implementing Product Filtering with HTML, TailwindCSS, and JavaScript

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')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marketing Hero Section</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav id="nav" class="nav">
      <div class="nav-container">
        <a href="#" class="logo-wrapper">
          <img
            class="logo-img"
            src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/f06d7301a0e51d1ada45994de485c8872270c4c6/marketing-hero-section/assets/logo.svg"
            alt="Open Props logo"
            width="160"
            height="29.44"
          />
        </a>
        <div class="menu-wrapper">
          <div class="mobile-wrapper">
            <div class="mobile-mobile-head">
              <a href="#" class="logo-wrapper">
                <img
                  class="logo-img"
                  src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/f06d7301a0e51d1ada45994de485c8872270c4c6/marketing-hero-section/assets/logo.svg"
                  alt="Open Props logo"
                  width="160"
                  height="29.44"
                />
              </a>
              <button
                class="icon-btn"
                aria-label="Close Menu"
                onclick="nav.classList.remove('open')"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path
                    d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
                  ></path>
                </svg>
              </button>
            </div>
            <menu class="menu">
              <li><a href="#" class="nav-link">How it works</a></li>
              <li><a href="#" class="nav-link">Goals</a></li>
              <li><a href="#" class="nav-link">Industries</a></li>
              <li><a href="#" class="nav-link">Products</a></li>
              <li><a href="#" class="nav-link">Resources</a></li>
            </menu>
          </div>

          <div class="actions">
            <a href="#" class="button-link">Login</a>
            <a href="#" class="button-link primary">Get started</a>
          </div>
        </div>

        <button
          class="icon-btn"
          aria-label="Open Menu"
          onclick="nav.classList.add('open')"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
            fill="currentColor"
          >
            <path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path>
          </svg>
        </button>
      </div>
    </nav>

    <main class="main">
      <section class="hero">
        <div class="hero-visual">
          <div class="hero-visual-wrapper">
            <video
              class="hero-video video-1"
              autoplay
              loop
              muted
              poster="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/marketing-hero-section/assets/poster.avif"
              role="none"
            >
              <source
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/f06d7301a0e51d1ada45994de485c8872270c4c6/marketing-hero-section/assets/video-1.mp4"
                type="video/mp4"
              />
            </video>
            <video class="hero-video video-2" autoplay loop muted role="none">
              <source
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/f06d7301a0e51d1ada45994de485c8872270c4c6/marketing-hero-section/assets/video-2.mp4"
                type="video/mp4"
              />
            </video>
            <video class="hero-video video-3" autoplay loop muted role="none">
              <source
                src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/f06d7301a0e51d1ada45994de485c8872270c4c6/marketing-hero-section/assets/video-3.mp4"
                type="video/mp4"
              />
            </video>
          </div>
        </div>

        <div class="hero-content">
          <header class="hero-header">
            <div class="headline1">
              <span class="headline-container">
                <div class="headline-scroller">
                  <span class="scroll-item">Elevate your brand</span>
                  <span class="scroll-item"> Increase Sales</span>
                  <span class="scroll-item"> Inspire audiences</span>
                </div>
              </span>

              <span> with our Ads </span>
            </div>
            <div class="content-actions">
              <a href="#" class="button-link primary">Get started</a>
            </div>
          </header>
          <a href="#" aria-label="Scroll" class="scroll-btn">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path
                d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"
              ></path>
            </svg>
          </a>
        </div>
      </section>
    </main>
  </body>
</html>

Read Also

How to Create a Sticky Call Button using HTML and CSS

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.

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

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  :where(:not(dialog)) {
    margin: 0;
  }
}

@layer base {
  :root {
    color-scheme: dark;
    font-family: 'Inter', sans-serif;
    --palette-hue: 249;
    --palette-hue-rotate-by: 0;
    --palette-chroma: 0;
    --red: #e81155;
    --extend-font-size-fluid-4: clamp(3.5rem, 4.333vw, 4.5rem);

    --surface-1: black;
    --surface-invert: white;
    --text-1: white;
    --text-invert: black;
    --brand: var(--red);

    --space-xxs: var(--size-1);
    --space-xs: var(--size-2);
    --space-sm: calc(var(--size-1) + var(--size-2));
    --space-md: var(--size-3);
    --space-lg: var(--size-7);

    --radius-sm: var(--radius-2);
    --radius-md: var(--radius-3);
    --radius-lg: var(--radius-round);
    --border-thin: var(--border-size-1);

    --timing-function-slow-ease: var(--ease-1);
    --timing-function-fast-ease-in-out: var(--ease-in-out-4);

    --button-link-font-size: var(--font-size-1);
    --button-link-font-weight: var(--font-weight-7);
    --button-link-block-size: 3.25em;
    --button-link-min-inline-size: 7em;
    --button-link-border: var(--border-size-1) solid currentColor;
    --button-link-face: transparent;
    --button-link-text: white;
    --button-link-hover-face: color-mix(in oklch, white, transparent 80%);
    --button-link-primary-text: white;
    --button-link-primary-face: var(--red);
    --button-link-primary-border: none;
    --button-link-primary-hover-face: color-mix(
      in oklch,
      var(--red),
      transparent 20%
    );
    --button-link-border-radius: var(--radius-round);
    --nav-logo-inline-size: var(--size-12);
    --icon-btn-block-size: var(--size-8);
    --icon-btn-inline-size: var(--size-8);

    --highlight-text: var(--red);
    --body-font-size: var(--font-size-1);
    --body-font-weight: var(--font-weight-4);
    --headline1-font-weight: var(--font-weight-7);
    --headline1-font-size: var(--font-size-fluid-3);
    @media (width >= 700px) {
      --headline1-font-size: var(--extend-font-size-fluid-4);
    }

    --nav-link-font-size: var(--font-size-1);
    @media (width < 1056px) {
      --nav-link-font-size: var(--font-size-3);
    }

    --nav-block-size: 100px;
    @media (width < 1056px) {
      --nav-block-size: 80px;
    }
  }

  body {
    -webkit-font-smoothing: antialiased;
    background-color: var(--surface-1);
    color: var(--text-1);
    font-size: var(--body-font-size);
    min-block-size: 100dvb;
  }
}

@layer App {
  .nav {
    display: grid;
    place-items: center;
  }

  .nav-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    place-items: center;
    min-block-size: var(--nav-block-size);
    inline-size: min(100%, 1656px);
    gap: var(--space-md);

    @media (width >=1056px) {
      padding-inline: var(--space-lg);
      grid-template-columns: 1fr 1fr 1fr;
    }

    @media (width < 1056px) {
      padding-inline-start: var(--space-md);
      padding-inline-end: var(--space-sm);
    }
  }

  .logo-wrapper {
    justify-self: start;
    inline-size: var(--nav-logo-inline-size);
  }

  .logo-img {
    inline-size: 100%;
    block-size: auto;
    display: block;
    object-fit: cover;
  }

  .menu-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: subgrid;
    place-items: center;
    grid-column: 2/-1;

    @media (width < 1056px) {
      align-content: space-between;
      background-color: black;
      gap: var(--space-lg);
      grid-auto-flow: row;
      inset: 0;
      padding-block-end: var(--space-lg);
      place-items: start stretch;
      position: absolute;
      overflow-y: auto;
      z-index: var(--layer-4);
      transition: opacity 0.3s var(--timing-function-slow-ease),
        scale 0.5s var(--timing-function-slow-ease),
        display 0.5s var(--timing-function-slow-ease) allow-discrete;

      @starting-style {
        opacity: 0;
        scale: 0;
      }

      .nav:not(.open) & {
        display: none;
        opacity: 0;
        scale: 0.6;
      }
    }
  }

  .mobile-wrapper {
    display: grid;
    gap: var(--space-md);
  }

  .mobile-mobile-head {
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    min-block-size: var(--nav-block-size);
    padding-inline-start: var(--space-md);
    padding-inline-end: var(--space-sm);
    justify-content: space-between;

    @media (width >=1056px) {
      display: none;
    }
  }

  .menu {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-lg);
    list-style: none;
    padding: 0;

    @media (width < 1056px) {
      grid-auto-flow: row;
      gap: var(--space-md);
      padding-inline: var(--space-md);
    }
  }

  .nav-link {
    text-wrap: nowrap;
    display: block;
    color: var(--text-1);
    text-decoration: none;
    padding-block: var(--space-sm);
    font-size: var(--nav-link-font-size);

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.5ex;
    }

    @media (width < 1056px) {
      padding-block: var(--space-sm);
    }
  }

  .actions {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-md);

    @media (width < 1056px) {
      grid-auto-flow: row;
      padding-inline: var(--space-md);
    }

    @media (width >=1056px) {
      justify-self: end;
    }
  }

  .icon-btn {
    color: var(--text-1);
    inline-size: var(--icon-btn-inline-size);
    block-size: var(--icon-btn-block-size);
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);

    @media (width >=1056px) {
      display: none;
    }
  }

  .button-link {
    text-decoration: none;
    font-size: var(--button-link-font-size);
    font-weight: var(--button-link-font-weight);
    padding-inline: var(--space-md);
    padding-block: var(--space-md);
    border-radius: var(--button-link-border-radius);
    block-size: var(--button-link-block-size);
    transition: background-color 0.2s var(--timing-function-slow-ease);
    color: var(--button-link-text);
    border: var(--button-link-border);
    background-color: var(--button-link-face);
    min-inline-size: var(--button-link-min-inline-size);
    display: inline-grid;
    place-items: center;
    font-weight: var(--button-link-font-weight);
    white-space: nowrap;
    text-overflow: ellipsis;

    &:hover {
      background-color: var(--button-link-hover-face);
    }

    &.primary {
      color: var(--button-link-primary-text);
      background-color: var(--button-link-primary-face);
      border: var(--button-link-primary-border);

      &:hover {
        background-color: var(--button-link-primary-hover-face);
      }
    }
  }

  /* Main */

  .hero {
    block-size: max(490px, calc(100dvb - var(--nav-block-size)));
    display: grid;
    gap: var(--space-lg);
    inline-size: 100%;
  }

  .hero-visual {
    background-color: black;
    block-size: max(580px, 100dvb);
    inset: 0;
    margin-inline: auto;
    max-inline-size: 100%;
    overflow: clip;
    position: absolute;
    z-index: -1;
    @media (width >= 700px) {
      animation: 3s linear 5s forwards animate-ratio;
    }
  }

  .hero-visual-wrapper {
    block-size: 100%;
    inline-size: 100%;

    animation-name: push-up;
    animation-duration: 5s;
    animation-delay: 10s;
    animation-timing-function: var(--timing-function-fast-ease-in-out);
    animation-fill-mode: forwards;
  }

  .hero-video {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: cover;
  }

  .hero-header {
    inline-size: 100%;
  }

  .headline1 {
    font-size: var(--headline1-font-size);
    font-weight: var(--headline1-font-weight);
    text-align: center;
    display: inline-grid;
    inline-size: 100%;
    white-space: nowrap;
  }

  .headline-container {
    display: block;
    block-size: 1lh;
    overflow-y: clip;
    position: relative;
  }

  .headline-scroller {
    display: grid;
    position: absolute;
    text-align: center;
    inline-size: 100%;
    inset: 0;
    animation-name: push-up;
    animation-duration: 5s;
    animation-delay: 11s;
    animation-timing-function: var(--timing-function-fast-ease-in-out);
    animation-fill-mode: forwards;
  }

  .scroll-item {
    color: var(--highlight-text);
    display: block;
    white-space: nowrap;
    min-inline-size: 100%;
    overflow: clip;
    text-overflow: ellipsis;
  }

  .hero-content {
    block-size: 100%;
    display: grid;
    gap: var(--space-lg);
    grid-template-rows: 1fr auto 1fr;
    place-items: end center;
    padding: var(--space-md);
    overflow: hidden;
  }

  .hero-header {
    grid-row: 2/3;
    display: grid;
    place-items: center;
    gap: var(--space-lg);
  }

  .scroll-btn {
    inline-size: var(--icon-btn-inline-size);
    block-size: var(--icon-btn-block-size);
    display: inline-grid;
    color: var(--text-1);
    grid-row: 3/-1;
    border: var(--border-thin) solid var(--surface-invert);
    padding: 15px;
    border-radius: var(--radius-lg);

    transition: background-color 0.2s var(--ease-1), color 0.2s var(--ease-1);

    &:hover {
      background-color: var(--surface-invert);
      color: var(--text-invert);
    }
  }
}

@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);
    padding-block-start: 120px;
    padding-block-end: 50px;
  }
}

@keyframes push-up {
  10%,
  90% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(-200%);
  }
}

Final Output:

Read Also

Master HTML, CSS, and JavaScript by Building a Digital Clock (Source Code)

Conclusion:

Creating a marketing hero section using HTML and CSS is simple and effective. With this step-by-step guide, you can design a professional hero section that captures attention and encourages users to take action. By ensuring it’s responsive, your hero section will look great on all devices, providing a great user experience.

Code by: Arby

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊