Flex Booking App

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.

---

Installation & Technologies

• Download the full package, select the Code button, choose the "Download ZIP" option.
• Requires Node.js to run: install Node.js, current version.
  • npm install to install the Node Sass and libraries, specifically these packages will also be installed.
    • "autoprefixer"
    • "concat"
    • "node-sass"
    • "npm-run-all"
    • "postcss-cli"
  • npm run start to open local server.
• SASS/SCSS: install Sass, current version.

---

Project Highlights

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.

Header

Navigation

Main1

Main2

Main3

---

Credits

• Images from Unsplash.com and Pexels.com licensed under Creative Commons Zero
• Design by Jonas Schmedtmann

---

Contributors

Dany Chheang dany.chheang@gmail.com