insertmike / trillo-project

A Flexbox based design for a hotel booking site.

Trillo Project - Front End

Live: https://insertmike.github.io/trillo-project/

A Flexbox based design for a hotel booking site.

Features

• Fully responsive [ Desktop First Approach ]
• Written completely in HTML & CSS
• Used the 7-1 SASS pattern & BEM to create scalable and maintainable code.

Designed by Jonas Schmedtmann, implemented by me.

Project Overview

• Responsiveness

  The website is fully responsive thanks to flexbox

• A Look in detail

  • Search Suggestion Drop Down :

    Achieved by placing an absolute positioned div

    

    • Buttons Animations:

      Achieved by placing a ::before pseudo element right ontop of the button anchor text. On hover, the pseudo element expands and fills it's parent

      

    • Hover Drop-Downs

      Achieved by placing an absolute positioned div straight after each element. // adjacent siblings

      

NPM Dev Packages:

 "devDependencies": {
    "autoprefixer": "^7.1.4",
    "concat": "^1.0.3",
    "node-sass": "^4.5.3",
    "npm-run-all": "^4.1.1",
    "postcss-cli": "^4.1.1"
  }

NPM Scripts:

  "scripts": {
      "watch:sass": "node-sass sass/main.scss css/style.css -w",
      "devserver": "live-server",
      "start": "npm-run-all --parallel devserver watch:sass",
      "compile:sass": "node-sass sass/main.scss css/style.comp.css",
      "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
      "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
      "build:css": "npm-run-all compile:sass  prefix:css compress:css"
   }