Natours

You can view the project live here: Natours

📂 Table of Contents

• Description

• Key Features

• Arhitecture

• Technologies Used

• Installations and Tests

📝 Description

A company specialized in organizing and offering adventure tours for people who love nature. The site has modern animations, fluid design and optimal performance.

🔑 Key Features

• Sass Mastery: Learn the ins and outs of Sass, including variables, nesting, mixins, extends, and functions.

• CSS Architecture: Implement the 7-1 CSS architecture for better organization and maintainability.

• BEM Methodology: Embrace the Block Element Modifier methodology for clear and scalable class naming, fostering maintainable and modular code.

• Responsive Design: Understand the principles of responsive design and build custom grids for various sections.

• Media Queries: Desktop-first approaches, writing effective media queries with Sass mixins.

• Responsive Images: Handling responsive images in HTML and CSS.

• Final Considerations: Wrap up the Natours project with insights and best practices.

Back To The Top

🏛️ Arhitecture

sass/
|-- abstracts/
|   |-- _functions.scss
|   |-- _mixins.scss
|   |-- _variables.scss
|
|-- base/
|   |-- _animations.scss
|   |-- _base.scss
|   |-- _typography.scss
|   |-- _utilities.scss
|
|-- components/
|   |-- _bg-video.scss
|   |-- _button.scss
|   |-- _card.scss
|   |-- _composition.scss
|   |-- _featured-box.scss
|   |-- _form.scss
|   |-- _popup.scss
|   |-- _story.scss
|
|-- layout/
|   |-- _footer.scss
|   |-- _grid.scss
|   |-- _header.scss
|   |-- _navigation.scss
|
|-- pages/
|   |-- _home.scss
|
|-- main.scss

💾 Technologies Used

Back To The Top

💻 Installations and Tests

To install dependencies, run these commands

npm i

To run tests, run these commands

npm run start

📧 Questions

For additional questions, contact me at the email provided below.

• GitHub Dusan Madjar
• Email madjardusan@gmail.com

Back To The Top