Merge pull request #4 from mashupgarage/keyframes-activity

Stopwatch Activity

src/content/stopwatch.md

@@ -0,0 +1,34 @@
+---
+slug: '/stopwatch'
+date: '2024-03-27'
+title: 'Stopwatch'
+type: 'css'
+image: '../images/stopwatch.gif'
+codepen: 'https://codepen.io/janpatrick-dev/pen/JjVJVmL'
+author: 'Jan Patrick Palacio'
+github: 'https://github.com/janpatrick-dev'
+entries:
+  - name: 'Kim'
+    url: 'https://codepen.io/Kim-Klinton-Vale/pen/ExJvWay'
+  - name: 'Ady'
+    url: 'https://codepen.io/adycastueras/pen/LYvjWEy'
+  - name: 'Franco'
+    url: 'https://codepen.io/notco/pen/vYMJxEp'
+  - name: 'Joshua'
+    url: 'https://codepen.io/SnorlaxCodes/pen/OJGjpVB'
+  - name: 'Tristan'
+    url: 'https://codepen.io/tristanjohn/pen/yLroMJy'
+---
+
+* ⌛ You have 15 minutes to implement this, take your time (but not too much)!
+* 💅 Feel free to embellish and make it pretty!
+* 📦 Some basic CSS is provided for you. There are some `TODO` comments in there to help you out.
+* 🧙 You can search online if you get stuck.
+* 🎉 When you're done, `Fork` 🍴 the Codepen page and share with us the URL.
+
+<p align='center'>* * *</p>
+
+## Tips and hints
+
+- Only use `keyframes` for making animations.
+- The `transform` property will be used mostly in this activity for doing animations.