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

• GitHub: @Bondok6
• LinkedIn: LinkedIn

🤝 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