Skip to main content
Proyecto Neptuno uses two types of hero sections: the full-screen landing hero on the homepage and page heroes for interior pages.

​
Landing Hero (#hero)

The main hero section appears on index.html with a full-screen background image and gradient overlay.

​
HTML Structure

From index.html (lines 34-43): 
<section id="hero">
    <div class="container">
        <h2>Un icono transformado para una nueva era de ocio y negocios en Granada.</h2>
        <h1>Proyecto Neptuno</h1>
        <div class="cta">
            <a href="./proyecto.html" class="btn btn-primary">Descubrir el proyecto</a>
            <a href="./contact.html" class="btn btn-secondary">Contacto</a>
        </div>
    </div>
</section>

​
CSS Styling

From style.css (lines 114-158): 
#hero {
    background:
        /* Three-phase gradient overlay */
        linear-gradient(to top, 
            rgba(0,0,0,0.9) 0%,    /* Phase 1: Almost black */
            rgba(0,0,0,0.4) 60%,   /* Phase 2: Medium shadow at mid-height */
            rgba(0,0,0,0) 100%     /* Phase 3: Full transparency */
        ),
        url(./img/ccneptuno.webp);
    background-size: cover;
    background-position: center;

    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    height: 85vh;
    padding-bottom: 8vh;
}

#hero .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

#hero h1 {
    font-size: 6rem; 
    color: var(--texto-claro);
    margin: 2rem 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); 
    letter-spacing: 2px;
    line-height: 1.2;
}

#hero h2 {
    color: var(--color-secundario-claro);
    font-size: 1.1rem;
    margin: 0 auto;
    max-width: 60%;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.6;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); 
}

​
Call-to-Action Buttons

From style.css (lines 226-267): 
.cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 1rem;
}

.btn {
    padding: 16px 32px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: var(--transicion-suave);
    cursor: pointer;
    border-radius: 2px;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--color-primario);
    color: var(--texto-claro);
    border: 1px solid var(--color-primario);
}

.btn-primary:hover {
    background-color: var(--color-primario-claro);
    border-color: var(--color-primario-claro);
    transform: translateY(-3px);
}

.btn-secondary {
    color: var(--texto-claro);
    border: 1px solid var(--texto-claro);
}

.btn-secondary:hover {
    border-color: var(--color-secundario);
    background-color: var(--color-secundario);
    transform: translateY(-3px);
}

​
Responsive Behavior

From style.css (lines 956-966): 
@media (max-width: 576px) {
    #hero h1 {
        font-size: 2.5rem;
    }
    
    #hero h2 {
        max-width: 90%;
        font-size: 0.9rem;
    }
    
    .cta {
        flex-direction: column;
        gap: 10px;
    }
}

​
Page Hero (.page-hero)

Interior pages use a simpler page hero without background images.

​
HTML Structure

From contact.html (lines 36-40): 
<section class="page-hero">
    <span class="page-hero__label">Hablemos</span>
    <h1>Contacto</h1>
    <p>El Proyecto Neptuno se construye con personas. Cuéntanos quién eres y de qué quieres hablar.</p>
</section>
Other examples: 
<section class="page-hero">
    <span class="page-hero__label">Saborea</span>
    <h1>Gastronomía</h1>
    <p>El nuevo Neptuno apuesta por una oferta gastronómica variada y de calidad, desde la tapa tradicional granadina hasta la restauración internacional.</p>
</section>

​
CSS Styling

From style.css (lines 272-303): 
.page-hero {
    background-color: var(--bg-secundario);
    border-left: 4px solid var(--color-primario);
    padding: 5rem 5% 4rem;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.page-hero__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-secundario);
    margin-bottom: 1rem;
}

.page-hero h1 {
    font-size: 4.5rem;
    color: var(--texto-oscuro);
    line-height: 1;
    margin-bottom: 1.5rem;
}

.page-hero p {
    color: var(--texto-muted);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 520px;
}

​
Responsive Behavior

From style.css (lines 968-970): 
@media (max-width: 576px) {
    .page-hero h1 {
        font-size: 2.5rem;
    }
}

​
Comparison

Location: index.html onlyHeight: 85vh (full-screen)Background:
  • Background image (ccneptuno.webp)
  • Three-phase gradient overlay (dark to transparent)
  • background-size: cover
Typography:
  • White text with text shadows
  • Huge h1 (6rem → 2.5rem mobile)
  • Uppercase subtitle in golden color
  • Two CTA buttons
Alignment:
  • Content aligned to bottom center
  • Flexbox centered horizontally

​
Design Patterns

Gradient Overlay Technique

The landing hero uses a three-phase linear gradient from dark (bottom) to transparent (top), ensuring text readability while preserving image visibility in the upper portion.
linear-gradient(to top, 
    rgba(0,0,0,0.9) 0%,
    rgba(0,0,0,0.4) 60%,
    rgba(0,0,0,0) 100%
)

Text Shadows for Legibility

Both hero headings use text-shadow: 2px 2px 4px rgba(0,0,0,0.7) to ensure text remains readable over the background image.

Vertical Rhythm

Page heroes use justify-content: flex-end to push content to the bottom, creating visual weight and a strong entry point for page content.

Left Border Accent

The 4px red left border (border-left: 4px solid var(--color-primario)) creates a subtle brand accent without overwhelming the design.

​
Button Hover Effects

Both button types feature a lift animation on hover: 
transform: translateY(-3px);
This creates a subtle 3D effect that enhances the perceived clickability.
The landing hero uses viewport height units (85vh) to ensure it fills most of the screen on any device, while the page hero uses min-height: 30vh to allow content to expand naturally.

Build docs developers (and LLMs) love

Get started for freeTalk to us