Skip to main content
Proyecto Neptuno consists of 5 HTML pages, each with a specific purpose and semantic structure. All pages share a consistent layout pattern with header, main content, and footer.

Common Structure

Every page follows this basic HTML5 structure:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title — Proyecto Neptuno</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header><!-- Navigation --></header>
    <main><!-- Page Content --></main>
    <footer><!-- Footer Links --></footer>
</body>
</html>
All pages use semantic HTML5 elements (<header>, <main>, <footer>, <section>, <nav>) for better accessibility and SEO.

Page Breakdown

Homepage

The landing page features a full-screen hero section and navigation cards.

Hero Section

<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>
Key Features:
  • Background image with gradient overlay
  • Centered text content
  • Two call-to-action buttons
  • Responsive typography

Landing Grid

<section class="landing-grid">
    <a href="./ocio.html" class="landing-card">
        <span class="landing-card__label">Cultura y ocio</span>
        <h2>Cine, arcade y bolera</h2>
        <p>Las mejores propuestas de entretenimiento de Granada bajo un mismo techo renovado.</p>
        <span class="landing-card__cta">Descubrir →</span>
    </a>

    <a href="./gastro.html" class="landing-card">
        <span class="landing-card__label">Gastronomía</span>
        <h2>Tapas, restaurantes y más</h2>
        <p>Una oferta gastronómica pensada para todos los momentos del día en el bulevar interior.</p>
        <span class="landing-card__cta">Descubrir →</span>
    </a>
</section>
Structure:
  • Two-column grid layout
  • Clickable card links
  • Hover effects
  • Visual hierarchy with labels, headings, and CTAs

Semantic HTML Patterns

Accessible Structure

All pages follow accessibility best practices:
<header>
    <div>
        <a href="./index.html"><img src="./img/logo.png" alt="Logo CC Neptuno"></a>
    </div>
    <nav>
        <ul>
            <li><a href="./index.html">Inicio</a></li>
            <li><a href="./ocio.html">Ocio</a></li>
            <li><a href="./gastro.html">Gastronomía</a></li>
            <li><a href="./proyecto.html">El Proyecto</a></li>
            <li><a href="./contact.html">Contacto</a></li>
        </ul>
    </nav>
</header>
Accessibility Features:
  • Descriptive alt text on all images
  • aria-label on secondary navigation
  • aria-hidden on decorative elements
  • Semantic heading hierarchy (h1 → h2)
  • Form labels properly associated with inputs

Responsive Considerations

All pages adapt to different screen sizes using CSS media queries:
  • Desktop (> 992px): Full multi-column layouts
  • Tablet (768px - 992px): Adjusted grids, hamburger menu
  • Mobile (< 576px): Single column, stacked layouts
The hamburger menu is implemented with pure CSS using a checkbox input and label system, similar to the contact form tabs.

Next Steps

Navigation Structure

Learn how the header navigation and menu system work

Build docs developers (and LLMs) love