Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/victoriamcn/penguin-animation
Animation Challenge with freeCodeCamp
https://github.com/victoriamcn/penguin-animation
css-animations css3 freecodecamp-challenge html5
Last synced: about 10 hours ago
JSON representation
Animation Challenge with freeCodeCamp
- Host: GitHub
- URL: https://github.com/victoriamcn/penguin-animation
- Owner: victoriamcn
- License: mit
- Created: 2023-09-11T13:34:27.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-07T15:30:42.000Z (5 months ago)
- Last Synced: 2024-06-07T17:02:59.654Z (5 months ago)
- Topics: css-animations, css3, freecodecamp-challenge, html5
- Language: CSS
- Homepage:
- Size: 47.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Note from Victoria
In December 2022, I was curious about software and started [freeCodeCamp's](https://www.freecodecamp.org/) Responsive Web Design course. This project, along with the [Taylor-Swift-Tribute-Page project](https://github.com/victoriamcn/Taylor-Swift-Tribute-Page/tree/main), are apart of that course. Long story short, these projects are what started my tech journey. While I don't update them and they are static one page sites written in vanilla HTML and CSS, I keep them here as a testament to how far I've come.
---
# Penguin Animation Challenge
🐧
🐧
👋
👋## Preview
![alt text](./penguin-animation.PNG)## Description
This animation was a freeCodeCamp challenge and made 100% with CSS.
## Instructions
You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more. In this course, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work.
## Badges
![freeCodeCamp](https://img.shields.io/badge/freeCodeCamp-0A0A23.svg?style=for-the-badge&logo=freeCodeCamp&logoColor=white)
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)