Travillo

Travillo is a responsive web design project developed to practice and demonstrate proficiency in CSS Flexbox. The project presents a travel-themed webpage, effectively utilizing Flexbox for layout management to ensure a seamless user experience across various devices.

Table of Contents

• Features
• Technologies Used
• Project Structure
• Getting Started
• Usage
• Contributing
• License

Features

• Responsive Design: Ensures optimal viewing experience on desktops, tablets, and mobile devices.
• Flexbox Layout: Utilizes CSS Flexbox for efficient and clean layout management.
• SASS Styling: Employs SASS for modular and maintainable CSS.
• Semantic HTML: Implements semantic HTML5 elements for better accessibility and SEO.

Technologies Used

• HTML5: Markup language for structuring the content.
• CSS3: Styling the HTML content.
• SASS: Preprocessor scripting language that is interpreted or compiled into CSS.
• JavaScript: Adds interactivity to the web page.

Project Structure

travillo/
├── css/
│   └── styles.css
├── img/
│   ├── image1.jpg
│   ├── image2.jpg
│   └── ...
├── sass/
│   └── styles.scss
├── .gitignore
├── index.html
├── package-lock.json
└── package.json

• css/: Contains the compiled CSS file.
• img/: Directory for images used in the project.
• sass/: Contains the SASS files for styling.
• .gitignore: Specifies files to be ignored by Git.
• index.html: The main HTML file.
• package-lock.json & package.json: Manage project dependencies.

Getting Started

To view or modify this project locally, follow these steps:

1. Clone the Repository

git clone https://github.com/yahyaessam/travillo.git
cd travillo

2. Install Dependencies

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

npm install

3. Compile SASS

To watch and compile SASS files to CSS, run:

npm run sass

4. Open in Browser

Open index.html in your preferred web browser to view the project.

Usage

This project serves as a practice tool for understanding and implementing CSS Flexbox. Feel free to explore the code, modify layouts, and experiment with different Flexbox properties to enhance your learning.

Contributing

Contributions are welcome! If you have suggestions or improvements, please fork the repository and submit a pull request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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