Patagonian Adventure Website

A beautiful, mobile-first website showcasing a multi-stage vacation through Chilean Patagonia. Inspired by the portfolio websites of top outdoor photographers from National Geographic and Outside Magazine.

Overview

This website presents a stunning visual journey through:

• Santiago, Chile - Awasi Mendoza luxury accommodations
• Torres del Paine - 3-day horseback riding expedition with Nomad Riders
• Torres del Paine - Luxury stay at Explora Torres del Paine

Features

✨ Design Highlights:

• Full-screen, high-resolution imagery (inspired by Chris Burkard, Elia Locardi, and other top photographers)
• Minimalist, elegant navigation
• Smooth scroll animations and parallax effects
• Mobile-first responsive design
• Interactive image lightbox gallery
• Beautiful typography using Playfair Display and Lora fonts

File Structure

MCA/
├── index.html          # Main HTML structure
├── styles.css          # All styling (mobile-first)
├── script.js           # Interactive functionality
├── images/             # Image assets organized by stage
│   ├── flight/         # First-class airplane images (add your own)
│   ├── stage1-santiago/    # Awasi Mendoza images
│   ├── stage2-horseback/   # Nomad Riders expedition images
│   └── stage3-explora/     # Explora lodge images
└── README.md           # This file

Setup Instructions

1. Add Flight Images (Optional)

   • Download first-class airplane seat pod images from:
     • Pexels: https://www.pexels.com/search/first%20class%20airplane%20seat/
     • Unsplash: Search for "airplane first class" or "luxury travel"
   • Save to images/flight/ directory
   • Update the flight section in index.html to use your image

2. View the Website

   • Simply open index.html in a web browser
   • Or use a local server:

     # Python
     python -m http.server 8000
     
     # Node.js (if you have http-server installed)
     npx http-server

   • Then visit http://localhost:8000

Customization

Update Trip Details

Edit index.html to customize:

• Dates and locations
• Descriptions and highlights
• Personal messages

Change Colors

Edit CSS variables in styles.css:

:root {
    --color-dark: #1a1a1a;
    --color-light: #f8f8f8;
    /* etc. */
}

Add More Images

1. Add images to appropriate images/ subdirectories
2. Update the gallery sections in index.html
3. Images will automatically work with the lightbox feature

Browser Support

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Performance

• Images use lazy loading for optimal performance
• CSS and JavaScript are optimized for fast loading
• Responsive images adapt to screen size

Credits

Design Inspiration:

• Chris Burkard (chrisburkard.com)
• Elia Locardi (elialocardi.com)
• James Rushforth (jamesrushforth.com)
• Other National Geographic and Outside Magazine photographers

Fonts:

• Google Fonts: Playfair Display, Lora, Montserrat

Notes

• The flight section currently uses a gradient placeholder. Add your own images when ready.
• All images are optimized and organized by stage/destination
• The website is fully responsive and mobile-first

---

Built with ❤️ for an unforgettable Patagonian adventure.