Skip to content

Latest commit

 

History

History
74 lines (52 loc) · 1.96 KB

README.md

File metadata and controls

74 lines (52 loc) · 1.96 KB
Raw

Natours

Pure CSS website to practice the latest Advanced CSS and SASS Features.

Built With

  • HTML - HTML5
  • CSS - CSS3
  • Sass - Scss

Additional Used

  • Google Fonts
  • Linea Icons
  • npm

Live Demo

Natours Live Demo

Objectives & What I learned

  • How to clip parts of elements using clip-path.
  • How to use the background-clip property.
  • How to use the outline-offset property.
  • How to use the backface-visibility property.
  • How to create a skewed section.
  • How to built an amazing rotating cards.
  • How to use perspective in CSS.
  • How and when to use box-decoration-break.
  • Building a complex animations.
  • Using background-blend-mode.
  • How to make text flow around the shapes with shape-outside and float.
  • How to create background video covering and entire section.
  • How and when to use the object-fit property.
  • How to implement "solid-color gradients".
  • How and when to use input-placeholder placeholder-shown checked target psudo-classes.
  • Build custom radio buttons.
  • What a "Check Hack" is and how it works.
  • How and why to use transform-origin property.
  • How to build responsive Navigation Menu With Only CSS.
  • How to build a nice popup With Only CSS.
  • How to automatically hyphenate words using hyphens property.

Getting Started

To get a local copy up and running follow these simple example steps.

git clone git@github.com:Bondok6/Natours.git
cd Natours

Authors

👤 Kyrillos Hany

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Acknowledgments

  • Inspired by Jonas Schmedtmann for his online course Advanced CSS and SASS