Skip to main content

​
Prerequisites

You only need:
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • Git installed on your machine
  • A text editor (VS Code, Sublime Text, etc.) if you want to explore the code
No build tools, package managers, or dependencies required! This is pure HTML/CSS.

​
Getting Started

1

Clone the repository

Open your terminal and clone the project:
git clone https://github.com/melerodaw/CSS-responsive-project.git
cd CSS-responsive-project
This will download all the source files to your local machine.
2

Open the project

Navigate to the project directory and open index.html in your browser:Option 1: Direct file open
# macOS
open index.html

# Linux
xdg-open index.html

# Windows
start index.html
Option 2: Use a local server (recommended for testing)
# Using Python 3
python3 -m http.server 8000

# Using PHP
php -S localhost:8000

# Using Node.js (if you have npx)
npx serve
Then open http://localhost:8000 in your browser.
3

Explore the pages

The website has 5 main pages you can navigate:
  • index.html - Home page with hero section and feature cards
  • ocio.html - Leisure and entertainment offerings (cinema, arcade, bowling)
  • gastro.html - Gastronomy section with restaurant information
  • proyecto.html - Detailed project information and vision
  • contact.html - Contact form with conditional fields
Click through the navigation menu to explore each page.
4

Test responsive design

Open your browser’s developer tools:
Chrome/Edge: F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)
Firefox: F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)
Safari: Cmd+Option+I
Toggle device toolbar (responsive mode) and test different screen sizes:
  • Mobile: 375px, 414px
  • Tablet: 768px, 1024px
  • Desktop: 1280px, 1920px
Watch the hamburger menu appear on mobile viewports!

​
Project File Structure

Here’s what you’ll find in the repository: 
CSS-responsive-project/
├── index.html           # Home page - landing with hero and cards
├── ocio.html            # Leisure page - entertainment offerings
├── gastro.html          # Gastronomy page - dining options
├── proyecto.html        # Project page - vision and details
├── contact.html         # Contact page - form with validation
├── style.css            # Main stylesheet (24KB, all styles)
├── img/                 # Image assets folder
│   ├── logo.png         # Site logo
│   ├── ccneptuno.webp   # Shopping center image
│   ├── Secuencia-01.webp # Project gallery images
│   ├── Secuencia-02.webp
│   └── ...              # Additional gallery images
├── README.md            # Basic project info
└── .gitignore
All pages share a single style.css file, making it easy to maintain a consistent design system across the entire site.

​
Understanding the Code

​
HTML Structure

Each HTML page follows the same structure: 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proyecto Neptuno</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- Logo and navigation -->
    </header>
    
    <main>
        <!-- Page-specific content -->
    </main>

    <footer>
        <!-- Footer with copyright and nav -->
    </footer>
</body>
</html>

​
CSS Organization

The style.css file is organized into logical sections:
  1. Font imports - Google Fonts (Playfair Display, Montserrat)
  2. CSS Variables - Color palette and theme tokens
  3. Reset styles - Normalize default browser styles
  4. Header - Navigation and hamburger menu
  5. Hero sections - Landing page hero and page headers
  6. Components - Cards, buttons, forms, grids
  7. Footer - Footer layout and links
  8. Media queries - Responsive breakpoints

​
Key CSS Features

​
CSS Custom Properties

:root {
    --color-primario: #8B1D1D;      /* Brand garnet */
    --color-secundario: #B89D64;    /* Champagne gold */
    --bg-principal: #FFFFFF;
    --texto-oscuro: #1A1A1A;
    --transicion-suave: all 0.3s ease;
}

​
Responsive Navigation

header {
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bg-principal);
}

/* Hamburger menu hidden on desktop */
.hamburger {
    display: none;
}

/* Shows on mobile via media query */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
}

​
Making Changes

​
Customize Colors

Edit the CSS variables in style.css (lines 8-26): 
:root {
    --color-primario: #YOUR_COLOR;
    --color-secundario: #YOUR_COLOR;
}
All elements using these colors will update automatically!

​
Modify Content

Edit the HTML files directly. For example, change the hero text in index.html:36-37: 
<h2>Un icono transformado para una nueva era de ocio y negocios en Granada.</h2>
<h1>Proyecto Neptuno</h1>

​
Add New Pages

  1. Copy an existing HTML file (e.g., cp index.html nueva-pagina.html)
  2. Update the <title> and content
  3. Add a link in the <nav> section of all pages
  4. Save and refresh your browser
Remember to add the new page link to the footer navigation as well for consistency!

​
Common Issues

​
Images not loading?

Make sure you’re using a local server or the paths are correct. Some browsers restrict file:// protocol access to local files.

​
Hamburger menu not working?

Resize your browser window below 768px width to trigger the mobile view. The hamburger menu only appears on smaller screens.

​
Fonts not displaying?

Check your internet connection. Google Fonts are loaded from a CDN and require an active connection.

​
Next Steps

View Live Demo

See the deployed version in action

Deploy Your Own

Learn how to deploy your version to GitHub Pages

Build docs developers (and LLMs) love

Get started for freeTalk to us