https://github.com/bondok6/trillo
Pure CSS website to practice advanced CSS/SASS Pure and delve deeper into Flexbox.
https://github.com/bondok6/trillo
css3 flexbox html5 scss
Last synced: about 2 months ago
JSON representation
Pure CSS website to practice advanced CSS/SASS Pure and delve deeper into Flexbox.
- Host: GitHub
- URL: https://github.com/bondok6/trillo
- Owner: Bondok6
- Created: 2022-09-26T23:19:05.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-10-09T19:28:47.000Z (over 2 years ago)
- Last Synced: 2025-02-05T17:17:28.292Z (3 months ago)
- Topics: css3, flexbox, html5, scss
- Language: SCSS
- Homepage: http://kyrillos.me/trillo/
- Size: 4.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trillo
> ### Pure CSS website to practice advanced CSS/SCSS (SASS) and delve deeper into Flexbox.
## Built With
- HTML - HTML5
- CSS - CSS3
- Sass - Scss
## Additional Used
- Google Fonts
- Linea Icons
- npm
## Live Demo
[Trillo Live Demo](https://bondok6.github.io/trillo/)
## Objectives & What I learned
- When and Why to use Flexbox?
- Why to use SVG icons vs. font icons?
- How to find, generate and use SVG sprites in HTML?
- How to change the color of an SVG icon in CSS?
- How to use more advanced flexbox alignment techniques?
- How to use scaleY and multiple transition properties with different settings, to create a creative hover effect?
- How and why to use the currentColor CSS variable?
- How to create an infinite animation?
- How to use margin: auto with flexbox, and why it’s so powerful?
- How and why to use CSS masks with mask-image and mask-size?
## Getting Started
To get a local copy up and running follow these simple example steps.
```bash
git clone [email protected]:Bondok6/trillo.git
```
```bash
cd trillo
```
## 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**