🌲 Natours

A modern and responsive adventure tours website built with HTML, SCSS, CSS Grid, and Flexbox.

Natours is an outdoor travel website concept designed for discovering adventure tours, exploring nature, viewing popular destinations, reading customer stories, and booking tours through a clean and modern interface.

✨ Features

• 🌲 Modern outdoor travel landing page
• 🧭 Animated navigation menu
• 🏔️ Adventure tours showcase
• 🗺️ Popular tours section
• 🃏 Interactive 3D tour cards
• 💚 Benefits and features section
• ⭐ Customer stories and testimonials
• 🎥 Background video section
• 📝 Tour booking form
• 🔘 Custom radio buttons
• 📱 Responsive design
• 🎨 Modern animations and transitions
• 🔍 Booking popup
• 🖼️ Responsive image composition
• 🧩 BEM-based class naming

🛠️ Built With

• HTML5 — Semantic page structure
• SCSS — Organized and maintainable styling
• CSS Grid & Flexbox — Responsive layouts
• BEM — CSS naming methodology
• CSS Animations & Transitions — Interactive UI effects
• Custom Icon Font — Interface icons
• Google Fonts — Lato

📂 Project Structure

Natours/
├── assets/
│   └── imgs/
├── css/
│   └── icon-font.css
├── sass/
│   └── main.scss
├── index.html
└── README.md

🎯 Project Sections

The website includes an animated navigation menu, hero section, about section, tour benefits, popular tours, customer stories, booking form, footer, and an interactive booking popup.

🎯 Project Purpose

This project was created as a frontend development practice project to improve skills in SCSS architecture, BEM methodology, responsive design, CSS animations, advanced layouts, forms, and modern UI development.

---

Made with ❤️ by Elyar

🌐 Live Demo

🔗 View Natours Live