Natours Sass

"Natours Sass" is a modern and visually captivating landing page designed for a fictional travel company. It showcases exciting tours for adventurous people, featuring a professional and responsive design that adapts seamlessly to all devices.

Features

• Responsive Design: Fully optimized for various screen sizes, providing a great user experience on all devices.
• Interactive Elements: Engages users with animations and hover effects.
• Highlight Sections: Displays features, testimonials, and calls to action clearly.
• Lazy Loading Images: Improves performance by loading images only when they are about to appear in the viewport.
• Advanced Sass Architecture (7-1 pattern): Organized and modular styling structure for scalable development.
• BEM Methodology: Block Element Modifier naming convention used for consistent and maintainable CSS.
• Smooth Scrolling & Navigation: Modern navigation system with smooth scroll behavior.
• Mobile Navigation Menu: Custom-built toggle menu using a checkbox hack for mobile responsiveness.
• Card Flip Animations: Interactive 3D card flip effects on tour sections using CSS transforms.
• Custom Grid System: Hand-crafted responsive grid layout without relying on frameworks.
• Background Video Integration: Looped and muted video background enhancing user engagement.
• Image Optimization with srcset and sizes: Responsive image loading for different devices and screen resolutions.
• Reusable UI Components: Buttons, headings, form elements, and feature boxes built for reuse.
• Modal Popup Window: Interactive booking modal using HTML and CSS only.
• Form with Radio Buttons & Labels: Accessible and styled user form inputs.

Technologies Used

• HTML5: Structures the web content.
• Sass (SCSS): Utilizes the 7-1 architecture pattern for modular, maintainable styling.
• CSS3: Provides clean, modern styling and animations.
• JavaScript: Adds interactivity, smooth scrolling functionality, and lazy loading for images.
• BEM Methodology: Follows the Block Element Modifier convention for clear and scalable class naming.

Live Demo

Experience the landing page firsthand:

Getting Started

To run the project locally:

1. Clone the repository:

   git clone https://github.com/eslamalawy/natours-sass.git
   

2. Navigate to the project directory:

    cd natours-sass
   

3. Open index.html in your preferred web browser.

Contributing

Contributions are welcome! Feel free to submit issues and pull requests to enhance the application's functionality and design.