https://github.com/bondok6/natours
A website about nature tours, Built with pure CSS to practice the latest advanced CSS and SASS features.
https://github.com/bondok6/natours
css css3 html sass scss
Last synced: about 1 month ago
JSON representation
A website about nature tours, Built with pure CSS to practice the latest advanced CSS and SASS features.
- Host: GitHub
- URL: https://github.com/bondok6/natours
- Owner: Bondok6
- Created: 2021-10-04T00:39:07.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-27T06:31:21.000Z (over 2 years ago)
- Last Synced: 2025-01-04T15:41:14.816Z (about 2 months ago)
- Topics: css, css3, html, sass, scss
- Language: CSS
- Homepage: http://kyrillos.me/Natours/
- Size: 22.6 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://bondok6.github.io/Natours/)
## 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.
```bash
git clone [email protected]:Bondok6/Natours.git
```
```bash
cd Natours
```
## Authors
👤 **Kyrillos Hany**
- GitHub: [@Bondok6](https://github.com/Bondok6)
- LinkedIn: [LinkedIn](https://linkedin.com/in/linkedinhandle)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
## Acknowledgments
- Inspired by Jonas Schmedtmann for his online course **Advanced CSS and SASS**