---

Natours is a company that sells nature touring packages to people who enjoy outdoor adventures. This website uses many cutting edge CSS3 properties to create a unique layout and interactive animations. Take your time while browsing through this website as almost everything is animated with a unique hover effect. Some of the most interesting effects are the tour package cards and menu expansion.

📑 Technologies Used

1. HTML5 & CSS3

   This website makes heavy use of HTML5 semantic elements along with BEM CSS3 naming convention. Several advanced CSS3 tactics were used to create a unique angled layout, innovative menu expansion and interactive hover effects throughout the website.

2. SASS

   Sass was used to keep the 500+ lines of CSS3 code organized, scalable, and maintainable.

3. React + Gatsby

   Even though React was not a necessity in this project, it was used to keep everything organized along with list generation and contact form management.

💻 Getting Started

The easiest way to view this project is to follow this link.

You may also clone this repo to view the code and run it directly on your local machine.

1. Install the Gatsby CLI.

   Install the Gatsby CLI to work with this project.

   # install the Gatsby CLI globally
   npm install -g gatsby-cli

2. Clone the repo

   Clone the repo to your local computer.

   # cd to your desired directory
   git clone https://github.com/RayBDev/natours.git

3. Install Dependencies

   Navigate to the root project directory

   npm install

4. Start the Server

   View the project live on your local machine at http://localhost:8000

   gatsby develop

📧 Contact Me

Contact me and view my portfolio at https://rbernard.ca