Blog Site: Hero Section

Published: October 2, 2025

Creating the hero section on the homepage was a chance to experiment with layering and overlays. I broke it into four layers: wrapper, overlay, content, and button.

Wrapper (.hero)

.hero {
  min-height: 320px;
  padding: 2.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color);
}
            

The .hero class ensures a minimum height for visual balance (min-height: 320px), provides spacing with padding (padding: 2.5rem 1.5rem), sets a default text color (color: var(--text-color)), and uses flexbox to align items both vertically and horizontally.

Overlay (.hero-overlay)

.hero-overlay {
  background-color: var(--overlay);
  padding: 3rem 1.5rem;
  border-radius: 12px;
  max-width: 700px;
  margin: 0 auto;
}
            

The .hero-overlay class adds a semi-transparent layer (background-color: var(--overlay)) so the text remains readable against the background image, ensuring enough contrast for accessibility. It also limits the width of the content (max-width: 700px) and adds subtle padding and rounded corners (border-radius: 12px).

Content (.hero-content)

.hero-content {
  max-width: 700px;
}

.hero-content h1 {
  margin-bottom: 1rem;
  line-height: 1.3;
  color: var(--primary-color);
}

.hero-content p {
  line-height: 1.7;
  margin-bottom: 2rem;
  color: var(--text-color);
}
            

The .hero-content class holds the heading, intro text, and button. Text is styled for readability, and spacing is adjusted to separate the paragraph from the button visually (margin-bottom: 2rem).

Button (.btn)

.btn:hover,
.btn:focus {
  background-color: #1e90d6;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
  outline: none;
}
            

I also added hover and focus states for the button. This improves usability because it provides visual feedback both for mouse users and for people navigating with a keyboard.