The header section of a hostel listing page clone inspired by hostelworld.com
It contains the hostel name, location, and features of the hostel including free wifi or free breakfast. Some dynamic features include the features of the wifi and coffee above the hostel name. When a user hovers over them, a tooltip will show what those features mean.
In addition, a user can click on the background image to show you a carousel of the photos for that specific hostel. The icons in the top right corner of the header are dynamic as well.
When you click on the user icon, it shows a modal where a user can input a email/username and password. Clicking on the magnifying glass icon will show a search component where a user can search for hostels in a specific city.
Lastly, when you click on the menu bars icon, a navigation bar will appear from the right side of the screen to navigate you to other parts of the website.
- https://github.com/ruinn/reviews
- https://github.com/ruinn/booking
- https://github.com/ruinn/overview
- https://github.com/ruinn/header
Run the following command in your terminal to start webpack
"npm run react-dev"
Run the following comman in your terminal to start server
"npm start"
Insert following into your brower to open
"http://localhost:3001/"
An nvmrc file is included if using nvm.
- Node 6.13.0
- etc
From within the root directory:
npm install -g webpack
npm install