/Natours-advanced-css

Learning modern CSS/SCSS techniques and practicing responsive design by building a landing page for a fictional company

Primary LanguageCSS

Natours- Advanced-CSS

  • This website is part of an Advanced css course on udemy.
  • The purpose of this particular project is to learn Sass syntax, 7-1 pattern, re-using components, custom grid using floats and responsive design.
  • The In-Development-Demo of the project can be found at https://bhosalet.github.io/Natours-advanced-css/

Getting Started

This project uses node-sass library so to run this project you need NODE and NPM installed.

Download Node_Modules

npm install

To Run in Development mode

npm run start

To Build for Deployment

npm run build

Topics-Learned

  • Clip - path
  • CSS Animations
  • Sass 7 to 1 pattern
  • Custom grid using floats
  • clearfix mixin
  • Flip-Card css animations
  • Playing video as a background
  • Navigation Overlay
  • Custom Radio Buttons
  • Mobile Design
  • Writing media queries using mixins
  • Responsive Images