Skip to main content
Proyecto Neptuno follows a simple, flat file structure designed for easy maintenance and deployment. All files are organized in a single directory with clear naming conventions.

​
Directory Structure

The project consists of 5 HTML pages, 1 stylesheet, and an images folder: 
source/
├── index.html          # Homepage with hero section
├── ocio.html           # Entertainment and leisure page
├── gastro.html         # Gastronomy page
├── proyecto.html       # Project details page
├── contact.html        # Contact form page
├── style.css           # Single stylesheet for entire site
└── img/                # Images folder
    ├── logo.png
    ├── logo.jpg
    ├── ccneptuno.webp  # Hero background
    ├── Secuencia-01.webp through Secuencia-09.webp
    ├── cine-megarama.jpg
    └── cine-megarama-interior.jpg

​
File Organization

HTML Pages

5 semantic HTML5 pages with consistent structure across all pages

Stylesheet

Single CSS file (style.css) managing all styles with CSS custom properties

Images

Dedicated img/ folder containing WebP and JPG formats for optimal performance

No Build Process

Pure HTML/CSS project with no compilation or bundling required

​
File Purposes

​
HTML Pages

Homepage - Landing page with hero section and navigation cards to main content sections.Features:
  • Full-screen hero section with background image
  • Call-to-action buttons
  • Landing grid with links to Ocio and Gastro pages

​
Stylesheet Architecture

The style.css file is organized into logical sections: 
/* CSS Organization */
1. Google Fonts imports
2. CSS Custom Properties (:root)
3. Global reset and base styles
4. Header and navigation
5. Homepage sections (hero, landing grid)
6. Page hero (interior pages)
7. Ocio page styles
8. Proyecto page styles
9. Gastro page styles
10. Contact form styles
11. Footer
12. Responsive media queries
The entire project uses CSS custom properties for consistent theming:
  • --color-primario: #8B1D1D (Burgundy)
  • --color-secundario: #B89D64 (Champagne Gold)
  • --bg-principal: #FFFFFF (White)
  • --bg-secundario: #F8F9FA (Light Gray)

​
Images Folder

The img/ directory contains:
  • Logo files: logo.png, logo.jpg
  • Hero background: ccneptuno.webp
  • Project renders: Secuencia-01.webp through Secuencia-09.webp
  • Entertainment photos: cine-megarama.jpg, cine-megarama-interior.jpg
Images use WebP format for better compression and performance, with JPG fallbacks where needed.

​
Design Philosophy

​
Simple and Maintainable

The flat structure makes it easy to:
  • Locate any file quickly
  • Update content without complex navigation
  • Deploy to any static hosting service
  • Understand the entire codebase at a glance

​
No Dependencies

Proyecto Neptuno has:
  • No JavaScript (except Google Fonts CDN)
  • No build tools required
  • No package managers
  • No frameworks
This makes the project lightweight, fast, and easy to maintain.

​
Consistent Patterns

All pages share:
  • Identical <header> structure
  • Same navigation menu
  • Consistent <footer> markup
  • Unified CSS architecture

​
Next Steps

Pages Documentation

Explore each HTML page in detail

Navigation Structure

Learn how the navigation system works

Build docs developers (and LLMs) love

Get started for freeTalk to us