Checkout the Live Version of the Project!
HTML5, CSS3, SCSS
A responsive, Flexbox-focused project for a sample hotel booking app. The site includes Flexbox designs, SVGs, and animated button features for the hotel overview page.
- Download the full package, select the Code button, choose the "Download ZIP" option.
- Requires Node.js to run: install Node.js, current version.
npm installto install the Node Sass and libraries, specifically these packages will also be installed.- "autoprefixer"
- "concat"
- "node-sass"
- "npm-run-all"
- "postcss-cli"
npm run startto open local server.
- SASS/SCSS: install Sass, current version.
| Section | Features |
|---|---|
| Header | Flexbox alignment techniques (i.e. justify-content, align-items, align-self, flex) & SVG icons for better user accessibility. |
| Navigation | Flexbox horizontal and vertical alignment at different viewports, multiple transition properties with different settings to create animated hover effect. |
| Main: Hotel Overview | Flexbox margin auto to target overall review rating, infinite animated button. |
| Main: Description | Flexbox flexwrap feature to build multi-column list, CSS masks for browser support. |
| Main: Call to Action | Flexbox alignment showcasing animated hover effect that changes text on hover. |
- Images from Unsplash.com and Pexels.com licensed under Creative Commons Zero
- Design by Jonas Schmedtmann
Dany Chheang dany.chheang@gmail.com