Skip to main content

​
Hero Section Overview

The hero section is the first content users see after the header. It’s designed to grab attention with a vibrant gradient background, clear messaging, and a strong call-to-action button.

​
What You’ll Learn

  • Multi-color CSS gradients
  • Text centering techniques
  • Call-to-action button styling
  • Anchor link navigation

​
Building the HTML

1

Create the Section

Use a semantic <section> element with the hero class:
<section class="hero" id="hero-section">
  <div class="hero__container">
    <!-- Content goes here -->
  </div>
</section>
The ID hero-section allows other elements to link to this section using anchor links.
2

Add the Heading

Use an <h1> for the main page title:
<h1 class="hero__title">Envío gratis desde $299</h1>
Only use one <h1> per page for proper SEO. This is your main page title.
3

Add the Subtitle

Use a paragraph for supporting text:
<p class="hero__subtitle">Aprovecha las mejores ofertas de temporada</p>
4

Add the CTA Button

Create a call-to-action link that scrolls to the products:
<a href="#products-section" class="hero__cta">
  Ver productos
</a>
The #products-section anchor link will smoothly scroll to the products when clicked.

​
Complete Hero HTML

<section class="hero" id="hero-section">
  <div class="hero__container">
    <h1 class="hero__title">Envío gratis desde $299</h1>
    <p class="hero__subtitle">Aprovecha las mejores ofertas de temporada</p>
    <a href="#products-section" class="hero__cta">
      Ver productos
    </a>
  </div>
</section>

​
Styling with CSS

​
Multi-Color Gradient Background

Create a vibrant diagonal gradient: 
.hero {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 50%,
    #FFD700 100%
  );
  
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
}
Gradient Breakdown:
  • 135deg - Diagonal angle from top-left to bottom-right
  • var(--color-primary) 0% - Starts with yellow (#FFE600)
  • var(--color-primary-dark) 50% - Transitions to darker yellow at middle
  • #FFD700 100% - Ends with gold color
Experiment with gradient angles:
  • 0deg or to top - Bottom to top
  • 90deg or to right - Left to right
  • 180deg or to bottom - Top to bottom (default)
  • 45deg - Diagonal

​
Centering the Content

.hero__container {
  max-width: 800px;
  margin: 0 auto; /* Centers the container */
}
Centering Technique: margin: 0 auto centers a block element horizontally when it has a defined max-width.

​
Title Styling

.hero__title {
  font-size: var(--font-size-3xl); /* 32px / 2rem */
  font-weight: 700;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-sm);
}

​
Subtitle Styling

.hero__subtitle {
  font-size: var(--font-size-lg); /* 18px */
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-lg);
}

​
Call-to-Action Button

.hero__cta {
  /* Make link behave like a button */
  display: inline-block;
  
  /* Button styling */
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  
  /* Smooth animations */
  transition: background-color var(--transition-fast),
              transform var(--transition-fast);
}
display: inline-block allows the link to have padding and dimensions while not taking up the full width like a block element would.

​
Hover and Active States

/* Hover: Darker background and lift up */
.hero__cta:hover {
  background-color: var(--color-secondary-dark);
  transform: translateY(-2px); /* Moves up 2px */
}

/* Active: Returns to original position when clicked */
.hero__cta:active {
  transform: translateY(0);
}
Transform Effects:
  • translateY(-2px) - Moves element up 2 pixels (negative = up)
  • translateY(2px) - Moves element down 2 pixels
  • translateX(10px) - Moves element right 10 pixels

​
Smooth Scrolling

Enable smooth scrolling for anchor links: 
html {
  scroll-behavior: smooth;
}
Now when users click “Ver productos”, the page smoothly scrolls to the products section instead of jumping instantly.

​
Responsive Considerations

​
Mobile Optimization

The hero section is already responsive because:
  1. Fluid Padding: Uses var(--spacing-2xl) which scales with the base font size
  2. Centered Text: text-align: center works on all screen sizes
  3. Relative Font Sizes: Uses rem units that scale based on user preferences
  4. Flexible Container: max-width prevents content from being too wide, but allows it to shrink

​
Optional Media Query for Larger Screens

You can enhance the hero for larger screens: 
@media (min-width: 768px) {
  .hero__title {
    font-size: 3rem; /* Larger on tablets+ */
  }
  
  .hero__subtitle {
    font-size: 1.5rem;
  }
  
  .hero {
    padding: 4rem var(--spacing-lg); /* More vertical space */
  }
}

​
Visual Hierarchy

The hero section establishes clear visual hierarchy:
  1. Title (largest, bold) - Main message
  2. Subtitle (medium, regular) - Supporting information
  3. CTA Button (bright color, prominent) - Action to take
This guides users’ eyes from top to bottom, ending with the desired action.

​
Accessibility Features

Semantic Heading - Using <h1> for the main title helps screen readers
Sufficient Contrast - Dark text on light gradient background is readable
Keyboard Accessible - The CTA link can be focused and activated with keyboard
Clear Purpose - Descriptive link text (“Ver productos”) instead of “Click here”

​
Complete Code Reference

HTML: /workspace/source/mi-tutorial/index.html:440-470 CSS: /workspace/source/mi-tutorial/src/style.css:840-909

​
Gradient Variations

Try these gradient alternatives:

​
Subtle Two-Color Gradient

.hero {
  background: linear-gradient(
    to bottom,
    #FFE600,
    #FFFFFF
  );
}

​
Radial Gradient (from center)

.hero {
  background: radial-gradient(
    circle,
    var(--color-primary),
    var(--color-primary-dark)
  );
}

​
Animated Gradient

For advanced users, create an animated gradient: 
.hero {
  background: linear-gradient(
    -45deg,
    #FFE600,
    #FFD700,
    #FFC700,
    #FFE600
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

​
Next Steps

Product Catalog

Build the product grid that the CTA button scrolls to

Footer Component

Create a multi-column footer with links and info

Build docs developers (and LLMs) love

Get started for freeTalk to us