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 [email protected]: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