# Natours-CSS

## Overview

**Natours-CSS** is a modern, responsive landing page template designed for travel agencies and tour booking services. This project emphasizes advanced CSS and Sass techniques to create visually appealing and user-friendly interfaces.

## Features

- **Responsive Design**: Ensures optimal viewing experiences across various devices and screen sizes.
- **Advanced CSS Animations**: Utilizes `@keyframes` for smooth transitions and interactive elements.
- **Custom Grid Layout**: Implements a custom 4-column grid system for flexible content arrangement.
- **BEM Methodology**: Follows Block Element Modifier conventions for organized and maintainable code.
- **Sass Integration**: Leverages Sass for variables, nesting, mixins, functions, and a 7-1 architecture structure.

## Technologies Used

- **HTML5**
- **CSS3**
- **Sass**

## Installation

1. **Clone the Repository**:

   ```bash
   git clone https://github.com/melvinprince/Natours-CSS.git
   cd Natours-CSS

2. Install Dependencies:

   Ensure you have Node.js and npm installed. Then, run:

   npm install

3. Compile Sass:

   For development with live reloading, run:

   npm run watch:sass

   For a production build with optimized CSS, run:

   npm run build:css

4. View the Project:

   Open index.html in your browser to see the landing page in action. Using a live server is recommended for the best development experience.

Scripts

The project utilizes npm scripts for various tasks:

• Watch Sass: Compiles Sass files in development mode with live watching.

  npm run watch:sass

• Build CSS: Compiles, prefixes, and compresses CSS for production.

  npm run build:css

• Start Development Server: Runs a live server for development.

  npm start

Project Structure

The project follows a 7-1 architecture for Sass files:

• abstracts/: Contains variables, mixins, and functions.
• base/: Global styles and boilerplate code.
• components/: Reusable components like buttons and cards.
• layout/: Styles for layout elements like header, footer, and navigation.
• pages/: Page-specific styles.
• themes/: Theme-related styles.
• vendors/: Third-party styles and libraries.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b feature-branch.
3. Make your changes and commit them: git commit -m 'Add new feature'.
4. Push to the branch: git push origin feature-branch.
5. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any inquiries or support, please contact:

• Portfolio: melvinprince