├── day-4-eggstraterrestrial ├── dist │ ├── script.js │ ├── index.html │ └── style.css ├── src │ ├── script.js │ └── index.pug ├── README.markdown └── license.txt ├── day-3-egg-head-in-love ├── dist │ ├── script.js │ ├── index.html │ └── style.css ├── src │ ├── script.js │ ├── index.pug │ └── style.scss ├── README.markdown └── license.txt ├── day-17-18-pokemon-friends ├── dist │ ├── script.js │ └── index.html ├── src │ ├── script.js │ └── index.html ├── README.markdown └── license.txt ├── day-2-pokeball-go ├── dist │ ├── script.js │ └── index.html ├── src │ ├── script.js │ └── index.pug ├── README.markdown └── license.txt ├── day-1-hello-css ├── dist │ ├── script.js │ ├── index.html │ └── style.css ├── src │ ├── script.js │ ├── index.html │ └── style.scss ├── README.markdown └── license.txt ├── day-5-sun-blocked-solar-eclipse-explained ├── src │ ├── script.js │ └── index.pug ├── dist │ ├── script.js │ └── index.html ├── README.markdown └── license.txt ├── day-13-14-super ├── README.markdown ├── license.txt ├── src │ ├── index.html │ └── style.scss └── dist │ ├── index.html │ └── style.css ├── day-9-self-portrait-interactive ├── README.markdown ├── src │ ├── index.html │ └── style.scss ├── dist │ ├── index.html │ └── style.css └── license.txt ├── day-7-8-beauty-and-the-beast-s-enchanted-rose ├── README.markdown ├── src │ ├── index.html │ └── style.scss ├── dist │ ├── index.html │ └── style.css └── license.txt ├── day-10-11-coder ├── README.markdown ├── license.txt ├── src │ ├── index.html │ └── style.sass └── dist │ └── index.html ├── day-6-are-you-gonna-eat-that-interactive-pen ├── README.markdown ├── src │ ├── index.pug │ ├── script.js │ └── style.scss ├── license.txt └── dist │ ├── index.html │ ├── script.js │ └── style.css ├── day-15-16-under-kamek-s-spell ├── README.markdown ├── src │ ├── index.pug │ └── style.scss ├── license.txt └── dist │ └── index.html ├── day-19-25-pokemon-amie ├── README.markdown ├── license.txt ├── dist │ ├── script.js │ └── index.html └── src │ ├── script.js │ └── index.html ├── LICENSE └── README.md /day-4-eggstraterrestrial/dist/script.js: -------------------------------------------------------------------------------- 1 | //Inspiration: https://codepen.io/maaarj/pen/KWNLaO -------------------------------------------------------------------------------- /day-4-eggstraterrestrial/src/script.js: -------------------------------------------------------------------------------- 1 | //Inspiration: https://codepen.io/maaarj/pen/KWNLaO -------------------------------------------------------------------------------- /day-3-egg-head-in-love/dist/script.js: -------------------------------------------------------------------------------- 1 | /* Thanks to the following: https://codepen.io/hmps/pen/Cfjzh */ -------------------------------------------------------------------------------- /day-3-egg-head-in-love/src/script.js: -------------------------------------------------------------------------------- 1 | /* Thanks to the following: https://codepen.io/hmps/pen/Cfjzh */ -------------------------------------------------------------------------------- /day-17-18-pokemon-friends/dist/script.js: -------------------------------------------------------------------------------- 1 | // Reference image: https://twitter.com/BulbaGanda/status/1163627358303264768 -------------------------------------------------------------------------------- /day-17-18-pokemon-friends/src/script.js: -------------------------------------------------------------------------------- 1 | // Reference image: https://twitter.com/BulbaGanda/status/1163627358303264768 -------------------------------------------------------------------------------- /day-2-pokeball-go/dist/script.js: -------------------------------------------------------------------------------- 1 | /* Design Credits: 2 | Dribble Shot: https://dribbble.com/shots/2842897-Pokeball 3 | 4 | */ -------------------------------------------------------------------------------- /day-2-pokeball-go/src/script.js: -------------------------------------------------------------------------------- 1 | /* Design Credits: 2 | Dribble Shot: https://dribbble.com/shots/2842897-Pokeball 3 | 4 | */ 5 | 6 | -------------------------------------------------------------------------------- /day-1-hello-css/dist/script.js: -------------------------------------------------------------------------------- 1 | /*Thanks to the following for help" 2 | https://codepen.io/maaarj/pen/mPeEyK 3 | https://codepen.io/dead_pixel/pen/pJeFx 4 | */ -------------------------------------------------------------------------------- /day-1-hello-css/src/script.js: -------------------------------------------------------------------------------- 1 | /*Thanks to the following for help" 2 | https://codepen.io/maaarj/pen/mPeEyK 3 | https://codepen.io/dead_pixel/pen/pJeFx 4 | */ -------------------------------------------------------------------------------- /day-5-sun-blocked-solar-eclipse-explained/src/script.js: -------------------------------------------------------------------------------- 1 | // Thanks to the following pens: 2 | //https://codepen.io/oliviale/pen/qLYNbE 3 | //https://codepen.io/juliepark/pen/JpxbjQ 4 | //https://codepen.io/Hackroro/pen/ByrKLZ -------------------------------------------------------------------------------- /day-5-sun-blocked-solar-eclipse-explained/dist/script.js: -------------------------------------------------------------------------------- 1 | // Thanks to the following pens: 2 | //https://codepen.io/oliviale/pen/qLYNbE 3 | //https://codepen.io/juliepark/pen/JpxbjQ 4 | //https://codepen.io/Hackroro/pen/ByrKLZ -------------------------------------------------------------------------------- /day-4-eggstraterrestrial/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 4: Eggstraterrestrial 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/LqLRjB](https://codepen.io/acupoftee/pen/LqLRjB). 3 | 4 | Egg Head in Space! 🍳💫 5 | -------------------------------------------------------------------------------- /day-13-14-super/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 13/14: Super! 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/ydZdvr](https://codepen.io/acupoftee/pen/ydZdvr). 3 | 4 | She protecc, and she's cute and happy as hecc 💕✨ 5 | -------------------------------------------------------------------------------- /day-3-egg-head-in-love/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 3: Egg Head In Love 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/aXJNmb](https://codepen.io/acupoftee/pen/aXJNmb). 3 | 4 | Pure CSS lovers 🍳 💖👻. Design Credits: https://dribbble.com/shots/2624995-Ghost-in-love 5 | -------------------------------------------------------------------------------- /day-9-self-portrait-interactive/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 9: Self Portrait (Interactive) 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/mYGNbj](https://codepen.io/acupoftee/pen/mYGNbj). 3 | 4 | Worked on a new avatar for my social media profiles. Hover over for a nice surprise! 5 | -------------------------------------------------------------------------------- /day-7-8-beauty-and-the-beast-s-enchanted-rose/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 7/8: Beauty and the Beast's Enchanted Rose 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/dEYLWg](https://codepen.io/acupoftee/pen/dEYLWg). 3 | 4 | Definitely my fav Disney movie to date 🥀 Inspired by https://codepen.io/maaarj/pen/gmNeXd 5 | -------------------------------------------------------------------------------- /day-1-hello-css/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 1: Hello CSS 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/daoqOg](https://codepen.io/acupoftee/pen/daoqOg). 3 | 4 | Browsed some projects on CodePen and Dribbble for inspiration, and then decided to build off of the projects I came across to get a feel for CSS animations 5 | -------------------------------------------------------------------------------- /day-4-eggstraterrestrial/src/index.pug: -------------------------------------------------------------------------------- 1 | .container 2 | .egg 3 | - var legs = 0 4 | ul 5 | while legs < 7 6 | -legs++ 7 | li 8 | .face 9 | .eyes 10 | .smile 11 | .cheeks 12 | .shine 13 | .stars 14 | - var star = 0 15 | while star < 20 16 | -star++ 17 | span(class="star") -------------------------------------------------------------------------------- /day-10-11-coder/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 10/11: Coder 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/Yowmwm](https://codepen.io/acupoftee/pen/Yowmwm). 3 | 4 | I started my coding bootcamp this week and I've learned so much! This will be all that I do for the next 3 months and I'm looking forward to becoming a better software engineer through this 💕 (watch for a day and night cycle) 5 | -------------------------------------------------------------------------------- /day-2-pokeball-go/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 2: Pokeball, Go! 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/pGgrgo](https://codepen.io/acupoftee/pen/pGgrgo). 3 | 4 | Originally I wanted to simply do a rolling Pokeball to get the hang of keyframes, but then my imagination ran wild after I was inspired by this Dribbble shot of a Pokeball: https://dribbble.com/shots/2842897-Pokeball 5 | -------------------------------------------------------------------------------- /day-5-sun-blocked-solar-eclipse-explained/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 5: Sun Blocked: Solar Eclipse Explained 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/ErooQj](https://codepen.io/acupoftee/pen/ErooQj). 3 | 4 | This is totally how an eclipse happens 🌎❤️☀️. Originally made for the February 2019 CodePen Challenge. Design credits: https://dribbble.com/shots/3748620-Eclipse-Explained 5 | -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 6: Are You Gonna Eat That? (Interactive pen) 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/ErOYRR](https://codepen.io/acupoftee/pen/ErOYRR). 3 | 4 | An interactive pen of my pizza obsession 🍕🥰. That and I also wanted to try to draw an avatar that's inspired by Gigantic's work! (Pen inspired by https://codepen.io/maaarj/pen/vmYPqm) 5 | -------------------------------------------------------------------------------- /day-3-egg-head-in-love/src/index.pug: -------------------------------------------------------------------------------- 1 | .container 2 | .egg 3 | - var legs = 0 4 | ul 5 | while legs < 7 6 | -legs++ 7 | li 8 | .face 9 | .eyes 10 | .smile 11 | .cheeks 12 | .shine 13 | .shadow(id="egg-shadow") 14 | .heart 15 | .light 16 | .ghost 17 | - var legs = 0 18 | ul 19 | while legs < 9 20 | -legs++ 21 | li 22 | .face 23 | .eyes 24 | .smile 25 | .cheeks 26 | .shadow(id="ghost-shadow") 27 | -------------------------------------------------------------------------------- /day-1-hello-css/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 |
7 |

Hello World 

8 |
9 |
10 | 11 | -------------------------------------------------------------------------------- /day-5-sun-blocked-solar-eclipse-explained/src/index.pug: -------------------------------------------------------------------------------- 1 | .container 2 | .earth 3 | -for(var i = 0; i < 7; i++) 4 | .countries 5 | .eyes 6 | .eyes.opened 7 | .eyes.closed 8 | .tear 9 | .excited ! 10 | .shadow 11 | .moon 12 | -for(var i = 0; i < 5; i++) 13 | .craters 14 | .eyes 15 | .sun 16 | .left-eye 17 | .left-eyelash 18 | .right-eye 19 | .right-eyelash 20 | .rays 21 | -for(var i = 0; i < 10; i++) 22 | .beam 23 | .stars1 24 | .stars2 25 | .stars3 -------------------------------------------------------------------------------- /day-15-16-under-kamek-s-spell/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 15/16: Under Kamek's Spell 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/mdbqQjB](https://codepen.io/acupoftee/pen/mdbqQjB). 3 | 4 | In honor of today's Nintendo Direct announcement of my all time favorite game Yoshi's Island being available on the Switch, here's an animation featuring my favorite Nintendo villain Kamek! I used to obsess over the animations and effects as a kid and the idea came about while I was replaying Yoshi's Island last weekend 5 | 6 | 7 | Made with help from https://codepen.io/simeydotme/pen/PrQKgo 8 | -------------------------------------------------------------------------------- /day-17-18-pokemon-friends/README.markdown: -------------------------------------------------------------------------------- 1 | # Day 17/18: Pokemon Friends 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/YzzzYxj](https://codepen.io/acupoftee/pen/YzzzYxj). 3 | 4 | Pikachu comforts Bulbasaur in the Mysterious Garden 🌱❤️This is my favorite Pokemon episode because not only does it feature my favorite Pokemon Bulbasaur, but because I love the character development it's put through in this episode. Also I loved the Mysterious Garden growing up. I was obsessed with the sparkles ✨ Reference image: https://twitter.com/BulbaGanda/status/1163627358303264768 5 | 6 | Process video: https://youtu.be/u88wXh66XYs 7 | -------------------------------------------------------------------------------- /day-15-16-under-kamek-s-spell/src/index.pug: -------------------------------------------------------------------------------- 1 | mixin makeItems(itemCount, trail=false) 2 | -var i = 0 3 | while i < itemCount 4 | if trail 5 | li.trail 6 | .sparkles 7 | else 8 | li 9 | -i++ 10 | 11 | .container 12 | ul.stars 13 | +makeItems(60) 14 | .cloud 15 | .cloud 16 | .magic-mountain 17 | .eyes 18 | ul.hills.back-hills 19 | +makeItems(5) 20 | ul.hills.mid-hills 21 | +makeItems(7) 22 | ul.hills.front-hills 23 | +makeItems(10) 24 | ul.spell-trail 25 | +makeItems(10, true) 26 | .kamek 27 | img(src="https://i.imgur.com/QNdo6Yk.png" alt="Kamek" title="Kamek") -------------------------------------------------------------------------------- /day-7-8-beauty-and-the-beast-s-enchanted-rose/src/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
-------------------------------------------------------------------------------- /day-9-self-portrait-interactive/src/index.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |

❤

7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
-------------------------------------------------------------------------------- /day-1-hello-css/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 1: Hello CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Hello World 

18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /day-2-pokeball-go/src/index.pug: -------------------------------------------------------------------------------- 1 | //- link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous") 2 | .container 3 | .circle-container 4 | .background-grass 5 | - var blades = 0 6 | while blades < 14 7 | - blades++ 8 | .background-blade 9 | .middle-grass 10 | - var blades = 0 11 | while blades < 15 12 | - blades++ 13 | .middle-blade 14 | .foreground-grass 15 | - var blades = 0 16 | while blades < 18 17 | - blades++ 18 | .foreground-blade 19 | .center.pokeball.animate 20 | .pokeball-button 21 | .pokeball-ring 22 | .pokeball-shine 23 | .pokeball-shine-small 24 | .stars1 25 | .stars2 26 | .stars3 27 | .shooting-stars -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/src/index.pug: -------------------------------------------------------------------------------- 1 | .container 2 | .me 3 | .hair 4 | .first-row 5 | -for(var i = 0; i < 5; i++) 6 | span 7 | .second-row 8 | -for(var i = 0; i < 5; i++) 9 | span 10 | .third-row 11 | -for(var i = 0; i < 5; i++) 12 | span 13 | .fourth-row 14 | -for(var i = 0; i < 5; i++) 15 | span 16 | .fifth-row 17 | -for(var i = 0; i < 5; i++) 18 | span 19 | .shirt 20 | .neck 21 | .head 22 | .bangs 23 | -for(var i = 0; i < 3; i++) 24 | span 25 | .bangs-upper 26 | -for(var i = 0; i < 3; i++) 27 | span 28 | .face 29 | .glasses 30 | .left 31 | .shine 32 | .right 33 | .shine 34 | .eyes 35 | p are you gonna eat that? 36 | 37 | -------------------------------------------------------------------------------- /day-19-25-pokemon-amie/README.markdown: -------------------------------------------------------------------------------- 1 | # Pokemon Amie ❤️ (Hover over Eevee and hold left click to pet it) 2 | A Pen created at CodePen.io. Original URL: [https://codepen.io/acupoftee/pen/zYYKRoX](https://codepen.io/acupoftee/pen/zYYKRoX). 3 | 4 | This is the minimum viable product (MVP) for a Pokemon therapy pet app! Eevee's one of my favorite Pokemon and I've always enjoyed playing with it in Pokemon X. It was surprisingly therapeutic and helped tremendously during busy or tough days. Thus I wanted to create a similar therapeutic experience for myself, and anyone who's in need of a cute therapy Pokemon. I'll definitely be coming back here on days when I feel in need of a therapy pet. 5 | 6 | Future goals for this include a responsibe/mobile friendly version, audio, and cosmetics. 7 | 8 | If you're in need of an adorable distraction, Eevee's got you covered! Hover over it and hold down the left mouse button to pet it and show it some love 9 | -------------------------------------------------------------------------------- /day-7-8-beauty-and-the-beast-s-enchanted-rose/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 7/8: Beauty and the Beast's Enchanted Rose 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /day-9-self-portrait-interactive/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 9: Self Portrait (Interactive) 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |

❤

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /day-1-hello-css/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/daoqOg) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-10-11-coder/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/Yowmwm) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-13-14-super/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/ydZdvr) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-2-pokeball-go/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/pGgrgo) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-19-25-pokemon-amie/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/zYYKRoX) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-3-egg-head-in-love/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/aXJNmb) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-4-eggstraterrestrial/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/LqLRjB) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Tee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /day-15-16-under-kamek-s-spell/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/mdbqQjB) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-17-18-pokemon-friends/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/YzzzYxj) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-9-self-portrait-interactive/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/mYGNbj) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-5-sun-blocked-solar-eclipse-explained/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/ErooQj) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/ErOYRR) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-7-8-beauty-and-the-beast-s-enchanted-rose/license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019 by Tee Diang (https://codepen.io/acupoftee/pen/dEYLWg) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /day-4-eggstraterrestrial/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 4: Eggstraterrestrial 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /day-3-egg-head-in-love/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 3: Egg Head In Love 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 28 |
29 |
30 |
31 |
32 |
33 |
34 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 6: Are You Gonna Eat That? (Interactive pen) 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |

are you gonna eat that?

46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /day-5-sun-blocked-solar-eclipse-explained/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 5: Sun Blocked: Solar Eclipse Explained 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
!
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /day-19-25-pokemon-amie/dist/script.js: -------------------------------------------------------------------------------- 1 | const openEyes = document.querySelector('.eyes') 2 | const blinkedEyes = document.querySelector('.blink') 3 | const closedEyes = document.querySelector('.closed') 4 | const happyBubble = document.querySelector('.happy') 5 | const hearts = document.querySelector('.hearts') 6 | const mouth = document.querySelector('.mouth') 7 | 8 | // Event classes 9 | const head = document.querySelector('.head') 10 | const legs = document.querySelectorAll('.leg') 11 | const chest = document.querySelector('.chest') 12 | const ears = document.querySelectorAll('.ear') 13 | 14 | if (isMobile()) { 15 | document.querySelector('.mobile-block').style.display = 'flex' 16 | document.querySelector('.container').style.display = 'none' 17 | } 18 | 19 | head.addEventListener('mousedown', enableAnimations) 20 | chest.addEventListener('mousedown', enableAnimations) 21 | 22 | legs.forEach(leg => { 23 | leg.addEventListener('mousedown', enableAnimations) 24 | }) 25 | 26 | ears.forEach(ear => { 27 | ear.addEventListener('mousedown', enableAnimations) 28 | }) 29 | 30 | // https://stackoverflow.com/questions/17436760/detect-mouseup-outside-of-mousedown-element 31 | document.addEventListener('mouseup', disableAnimations) 32 | 33 | // Original implementation included the use of .toggle. 34 | // Because we know when we want animations to be enabled or disabled, this approach is guaranteed to reveal and conceal specific elements. 35 | function enableAnimations () { 36 | openEyes.classList.remove('is-visible') 37 | blinkedEyes.classList.remove('is-visible') 38 | closedEyes.classList.add('is-visible') 39 | hearts.classList.add('is-visible') 40 | mouth.classList.add('is-visible') 41 | happyBubble.classList.remove('after-pet') 42 | } 43 | 44 | function disableAnimations () { 45 | openEyes.classList.add('is-visible') 46 | blinkedEyes.classList.add('is-visible') 47 | closedEyes.classList.remove('is-visible') 48 | hearts.classList.remove('is-visible') 49 | mouth.classList.remove('is-visible') 50 | happyBubble.classList.add('after-pet') 51 | } 52 | 53 | function isMobile() { 54 | return typeof window.orientation !== 'undefined' 55 | } -------------------------------------------------------------------------------- /day-19-25-pokemon-amie/src/script.js: -------------------------------------------------------------------------------- 1 | const openEyes = document.querySelector('.eyes') 2 | const blinkedEyes = document.querySelector('.blink') 3 | const closedEyes = document.querySelector('.closed') 4 | const happyBubble = document.querySelector('.happy') 5 | const hearts = document.querySelector('.hearts') 6 | const mouth = document.querySelector('.mouth') 7 | 8 | // Event classes 9 | const head = document.querySelector('.head') 10 | const legs = document.querySelectorAll('.leg') 11 | const chest = document.querySelector('.chest') 12 | const ears = document.querySelectorAll('.ear') 13 | 14 | if (isMobile()) { 15 | document.querySelector('.mobile-block').style.display = 'flex' 16 | document.querySelector('.container').style.display = 'none' 17 | } 18 | 19 | head.addEventListener('mousedown', enableAnimations) 20 | chest.addEventListener('mousedown', enableAnimations) 21 | 22 | legs.forEach(leg => { 23 | leg.addEventListener('mousedown', enableAnimations) 24 | }) 25 | 26 | ears.forEach(ear => { 27 | ear.addEventListener('mousedown', enableAnimations) 28 | }) 29 | 30 | // https://stackoverflow.com/questions/17436760/detect-mouseup-outside-of-mousedown-element 31 | document.addEventListener('mouseup', disableAnimations) 32 | 33 | // Original implementation included the use of .toggle. 34 | // Because we know when we want animations to be enabled or disabled, this approach is guaranteed to reveal and conceal specific elements. 35 | function enableAnimations () { 36 | openEyes.classList.remove('is-visible') 37 | blinkedEyes.classList.remove('is-visible') 38 | closedEyes.classList.add('is-visible') 39 | hearts.classList.add('is-visible') 40 | mouth.classList.add('is-visible') 41 | happyBubble.classList.remove('after-pet') 42 | } 43 | 44 | function disableAnimations () { 45 | openEyes.classList.add('is-visible') 46 | blinkedEyes.classList.add('is-visible') 47 | closedEyes.classList.remove('is-visible') 48 | hearts.classList.remove('is-visible') 49 | mouth.classList.remove('is-visible') 50 | happyBubble.classList.add('after-pet') 51 | } 52 | 53 | function isMobile() { 54 | return typeof window.orientation !== 'undefined' 55 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

25 Days of CSS Animations

4 |

Code from my 25 Days of CSS Animations challenge on CodePen.

5 |
6 | 7 | ### ✨ About 8 | This year I spent 25 days practicing CSS with animations! This repo has the source code for 9 | each animation. 10 | 11 | ### 🤓 File Structure 12 | Here's what you'll find when visiting each animation folder: 13 | 14 | * `src` 15 | * Contains the original code as written on CodePen and Visual Studio Code. 16 | * `dist` 17 | * Contains code that's been translated for browsers by CodePen. Because web browsers only understand [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), and not the alternatives used in this challenge, this allows my original code to be understood and displayed on the web \o/ 18 | 19 | ### 📋 Relevant Links 20 | * [DEV post](https://dev.to/acupoftee/25-days-of-css-animations-teaching-myself-css-through-motion-design-4l10) 21 | * [CodePen collection](https://codepen.io/collection/DBeLyg) 22 | 23 | ### 🎨 Animations 24 | * [Day 1: Hello CSS](day-1-hello-css/README.markdown) 25 | * [Day 2: Pokeball, Go!](day-2-pokeball-go/README.markdown) 26 | * [Day 3: Egghead in Love](day-3-egg-head-in-love/README.markdown) 27 | * [Day 4: Eggstraterrestrial](day-4-eggstraterrestrial/README.markdown) 28 | * [Day 5: Sun Blocked](day-5-sun-blocked-solar-eclipse-explained/README.markdown) 29 | * [Day 6: Are You Gonna Eat That?](day-6-are-you-gonna-eat-that-interactive-pen/README.markdown) 30 | * [Day 7/8: Enchanted Rose](day-7-8-beauty-and-the-beast-s-enchanted-rose/README.markdown) 31 | * [Day 9: Self Portrait](day-9-self-portrait-interactive/README.markdown) 32 | * [Day 10/11: Coder](day-10-11-coder/README.markdown) 33 | * [Day 12: Tic Tac Toe](https://github.com/acupoftee/tic-tac-toe) 34 | * [Day 13/14: Super!](day-13-14-super/README.markdown) 35 | * [Day 15/16: Under Kamek's Spell](day-15-16-under-kamek-s-spell/README.markdown) 36 | * [Day 17/18: Pokémon Friends](day-17-18-pokemon-friends/README.markdown) 37 | * [Day 19-25: Pokémon Amie](day-19-25-pokemon-amie/README.markdown) 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /day-13-14-super/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Day 13/14: Super! 10 | 11 | 12 | 13 | 14 | 15 | 18 |
19 | 27 |
28 |
29 | 36 |
37 |
38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | 59 | 60 |
61 | 62 | -------------------------------------------------------------------------------- /day-10-11-coder/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Day 10: Coder 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
    26 |
  • 27 |
  • 28 |
  • 29 |
  • 30 |
  • 31 |
  • 32 |
  • 33 |
  • 34 |
  • 35 |
  • 36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
  • 42 |
  • 43 |
  • 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
    55 |
  • 56 |
  • 57 |
  • 58 |
  • 59 |
  • 60 |
  • 61 |
  • 62 |
  • 63 |
  • 64 |
  • 65 |
  • 66 |
  • 67 |
  • 68 |
  • 69 |
  • 70 |
  • 71 |
  • 72 |
  • 73 |
  • 74 |
  • 75 |
  • 76 |
  • 77 |
  • 78 |
  • 79 |
  • 80 |
  • 81 |
  • 82 |
  • 83 |
  • 84 |
  • 85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /day-13-14-super/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 13/14: Super! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Day 13/14: Super! 20 | 21 | 22 | 23 | 24 | 25 | 28 |
29 | 37 |
38 |
39 | 46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /day-10-11-coder/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 10/11: Coder 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Day 10: Coder 20 | 21 | 22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
    36 |
  • 37 |
  • 38 |
  • 39 |
  • 40 |
  • 41 |
  • 42 |
  • 43 |
  • 44 |
  • 45 |
  • 46 |
  • 47 |
  • 48 |
  • 49 |
  • 50 |
  • 51 |
  • 52 |
  • 53 |
  • 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
    65 |
  • 66 |
  • 67 |
  • 68 |
  • 69 |
  • 70 |
  • 71 |
  • 72 |
  • 73 |
  • 74 |
  • 75 |
  • 76 |
  • 77 |
  • 78 |
  • 79 |
  • 80 |
  • 81 |
  • 82 |
  • 83 |
  • 84 |
  • 85 |
  • 86 |
  • 87 |
  • 88 |
  • 89 |
  • 90 |
  • 91 |
  • 92 |
  • 93 |
  • 94 |
  • 95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /day-2-pokeball-go/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 2: Pokeball, Go! 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /day-15-16-under-kamek-s-spell/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 15/16: Under Kamek's Spell 6 | 7 | 8 | 9 | 10 | 11 |
12 | 74 |
75 |
76 |
77 |
78 |
79 | 86 | 95 | 107 | 139 |
Kamek
140 |
141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /day-17-18-pokemon-friends/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 18 | 31 | 36 | 70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 | -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/dist/script.js: -------------------------------------------------------------------------------- 1 | var directions = ["look-right", "look-left"]; 2 | // from orignal implementation 3 | // var directions = ["look-right", "look-left", "look-down", "look-up", "look-bottom-right", "look-bottom-left", "look-top-right", "look-top-left"]; 4 | function removeClasses() { 5 | for (var x = 0; x < directions.length; x++) { 6 | $(".head").removeClass(directions[x]); 7 | $(".hair").removeClass(directions[x]); 8 | $(".face").removeClass(directions[x]); 9 | $(".neck").removeClass(directions[x]); 10 | } 11 | } 12 | function direction(e) { 13 | //look left 14 | if (e.clientX <= (window.innerWidth / 2)) { 15 | removeClasses(); 16 | $(".head").addClass("look-left"); 17 | $(".hair").addClass("look-left"); 18 | $(".face").addClass("look-left"); 19 | $(".neck").addClass("look-left"); 20 | } 21 | 22 | //look right 23 | if (e.clientX >= window.innerWidth - (window.innerWidth / 2)) { 24 | removeClasses(); 25 | $(".head").addClass("look-right"); 26 | $(".hair").addClass("look-right"); 27 | $(".face").addClass("look-right"); 28 | $(".neck").addClass("look-right"); 29 | } 30 | 31 | //TODO: resolve afro lag 32 | // look down 33 | // if (e.clientY >= window.innerHeight - (window.innerHeight / 2.5)) { 34 | // removeClasses(); 35 | // // $(".head").addClass("look-down"); 36 | // // $(".hair").addClass("look-down"); 37 | // $(".face").addClass("look-down"); 38 | // //$(".neck").addClass("look-down"); 39 | // } 40 | 41 | // //look up 42 | // if (e.clientY <= (window.innerHeight / 2.5)) { 43 | // removeClasses(); 44 | // // $(".head").addClass("look-up"); 45 | // // $(".hair").addClass("look-up"); 46 | // $(".face").addClass("look-up"); 47 | // //$(".neck").addClass("look-up"); 48 | // } 49 | // //look bottom right 50 | // if(e.clientY >= (window.innerHeight - (window.innerHeight/2.5)) && e.clientX >= (window.innerWidth-(window.innerWidth/3))) { 51 | // removeClasses(); 52 | // //$(".head").addClass("look-bottom-right"); 53 | // $(".face").addClass("look-bottom-right"); 54 | // // $(".neck").addClass("look-bottom-right"); 55 | // // $(".hair").addClass("look-bottom-right"); 56 | // } 57 | 58 | // // look bottom left 59 | // if(e.clientY >= (window.innerHeight - (window.innerHeight/2.5)) && e.clientX <= (window.innerWidth/3)) { 60 | // removeClasses(); 61 | // //$(".head").addClass("look-bottom-left"); 62 | // $(".face").addClass("look-bottom-left"); 63 | // //$(".neck").addClass("look-bottom-left"); 64 | // //$(".hair").addClass("look-bottom-left"); 65 | // } 66 | 67 | // // look top right 68 | // if(e.clientY <= (window.innerHeight/2.5) && e.clientX >= (window.innerWidth - (window.innerWidth/3))) { 69 | // removeClasses(); 70 | // //$(".head").addClass("look-top-right"); 71 | // $(".face").addClass("look-top-right"); 72 | // //$(".neck").addClass("look-top-right"); 73 | // //$(".hair").addClass("look-top-right"); 74 | // } 75 | // if( e.clientY <= ((window.innerHeight/2.5)) && e.clientX <= window.innerWidth/3) { 76 | // //$(".head").addClass("look-top-left"); 77 | // $(".face").addClass("look-top-left"); 78 | // //$(".neck").addClass("look-top-left"); 79 | // //$(".hair").addClass("look-top-left"); 80 | // } 81 | 82 | // if ( 83 | // e.clientX > (window.innerWidth / 3) && 84 | // e.clientX < (window.innerWidth - (window.innerWidth / 3)) && 85 | // e.clientY > (window.innerHeight / 2.5) && 86 | // e.clientY < (window.innerHeight - (window.innerHeight / 2.5)) 87 | // ) { 88 | // removeClasses(); 89 | // //console.log("center"); 90 | // } 91 | } 92 | document.addEventListener("mousemove", function(e) { 93 | direction(e); 94 | }); -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/src/script.js: -------------------------------------------------------------------------------- 1 | var directions = ["look-right", "look-left"]; 2 | // from orignal implementation 3 | // var directions = ["look-right", "look-left", "look-down", "look-up", "look-bottom-right", "look-bottom-left", "look-top-right", "look-top-left"]; 4 | function removeClasses() { 5 | for (var x = 0; x < directions.length; x++) { 6 | $(".head").removeClass(directions[x]); 7 | $(".hair").removeClass(directions[x]); 8 | $(".face").removeClass(directions[x]); 9 | $(".neck").removeClass(directions[x]); 10 | } 11 | } 12 | function direction(e) { 13 | //look left 14 | if (e.clientX <= (window.innerWidth / 2)) { 15 | removeClasses(); 16 | $(".head").addClass("look-left"); 17 | $(".hair").addClass("look-left"); 18 | $(".face").addClass("look-left"); 19 | $(".neck").addClass("look-left"); 20 | } 21 | 22 | //look right 23 | if (e.clientX >= window.innerWidth - (window.innerWidth / 2)) { 24 | removeClasses(); 25 | $(".head").addClass("look-right"); 26 | $(".hair").addClass("look-right"); 27 | $(".face").addClass("look-right"); 28 | $(".neck").addClass("look-right"); 29 | } 30 | 31 | //TODO: resolve afro lag 32 | // look down 33 | // if (e.clientY >= window.innerHeight - (window.innerHeight / 2.5)) { 34 | // removeClasses(); 35 | // // $(".head").addClass("look-down"); 36 | // // $(".hair").addClass("look-down"); 37 | // $(".face").addClass("look-down"); 38 | // //$(".neck").addClass("look-down"); 39 | // } 40 | 41 | // //look up 42 | // if (e.clientY <= (window.innerHeight / 2.5)) { 43 | // removeClasses(); 44 | // // $(".head").addClass("look-up"); 45 | // // $(".hair").addClass("look-up"); 46 | // $(".face").addClass("look-up"); 47 | // //$(".neck").addClass("look-up"); 48 | // } 49 | // //look bottom right 50 | // if(e.clientY >= (window.innerHeight - (window.innerHeight/2.5)) && e.clientX >= (window.innerWidth-(window.innerWidth/3))) { 51 | // removeClasses(); 52 | // //$(".head").addClass("look-bottom-right"); 53 | // $(".face").addClass("look-bottom-right"); 54 | // // $(".neck").addClass("look-bottom-right"); 55 | // // $(".hair").addClass("look-bottom-right"); 56 | // } 57 | 58 | // // look bottom left 59 | // if(e.clientY >= (window.innerHeight - (window.innerHeight/2.5)) && e.clientX <= (window.innerWidth/3)) { 60 | // removeClasses(); 61 | // //$(".head").addClass("look-bottom-left"); 62 | // $(".face").addClass("look-bottom-left"); 63 | // //$(".neck").addClass("look-bottom-left"); 64 | // //$(".hair").addClass("look-bottom-left"); 65 | // } 66 | 67 | // // look top right 68 | // if(e.clientY <= (window.innerHeight/2.5) && e.clientX >= (window.innerWidth - (window.innerWidth/3))) { 69 | // removeClasses(); 70 | // //$(".head").addClass("look-top-right"); 71 | // $(".face").addClass("look-top-right"); 72 | // //$(".neck").addClass("look-top-right"); 73 | // //$(".hair").addClass("look-top-right"); 74 | // } 75 | // if( e.clientY <= ((window.innerHeight/2.5)) && e.clientX <= window.innerWidth/3) { 76 | // //$(".head").addClass("look-top-left"); 77 | // $(".face").addClass("look-top-left"); 78 | // //$(".neck").addClass("look-top-left"); 79 | // //$(".hair").addClass("look-top-left"); 80 | // } 81 | 82 | // if ( 83 | // e.clientX > (window.innerWidth / 3) && 84 | // e.clientX < (window.innerWidth - (window.innerWidth / 3)) && 85 | // e.clientY > (window.innerHeight / 2.5) && 86 | // e.clientY < (window.innerHeight - (window.innerHeight / 2.5)) 87 | // ) { 88 | // removeClasses(); 89 | // //console.log("center"); 90 | // } 91 | } 92 | document.addEventListener("mousemove", function(e) { 93 | direction(e); 94 | }); 95 | -------------------------------------------------------------------------------- /day-17-18-pokemon-friends/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Day 17/18: Pokemon Friends 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 28 | 41 | 46 | 80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /day-1-hello-css/src/style.scss: -------------------------------------------------------------------------------- 1 | @import "compass/css3"; 2 | @import url("https://fonts.googleapis.com/css?family=Pacifico"); 3 | 4 | // gradient source: https://uigradients.com/#IntuitivePurple 5 | $gradients: linear-gradient(to top, #da22ff, #9733ee); 6 | $background: #da22ff; 7 | $shadow: #e3e3e3; 8 | 9 | // hello world gradient 10 | @mixin text-gradient() { 11 | // creates an image mask using bg gradients 12 | background-image: -webkit-linear-gradient(to top, #da22ff, #9733ee); 13 | background-image: -moz-linear-gradient(to top, #da22ff, #9733ee); 14 | background-image: -ms-linear-gradient(to top, #da22ff, #9733ee); 15 | background-image: -o-linear-gradient(to top, #da22ff, #9733ee); 16 | background-image: linear-gradient(to top, #da22ff, #9733ee); 17 | // prepares the text for masking 18 | color: transparent; 19 | // creates clipping mask with text 20 | -webkit-background-clip: text; 21 | background-clip: text; 22 | } 23 | 24 | // hand rotations 25 | @mixin rotate-hand($angle) { 26 | -webkit-transform: rotate($angle); 27 | -moz-transform: rotate($angle); 28 | -ms-transform: rotate($angle); 29 | transform: rotate($angle); 30 | } 31 | 32 | // origin updates for hand wave 33 | @mixin origin($origin_values) { 34 | -webkit-transform-origin: $origin_values; 35 | -moz-transform-origin: $origin_values; 36 | -ms-transform-origin: $origin_values; 37 | transform-origin: $origin_values; 38 | } 39 | // Set the background color to custom gradient 40 | body, 41 | html { 42 | background: $gradients; 43 | background-repeat: no-repeat; 44 | background-attachment: fixed; 45 | width: 100vw; 46 | height: 100vh; 47 | } 48 | 49 | .container { 50 | position: absolute; 51 | left: 50%; 52 | top: 50%; 53 | transform: translate(-50%, -50%); 54 | } 55 | 56 | // Style for hello world text 57 | .hello { 58 | font-family: "Pacifico", cursive; 59 | font-size: 70px; 60 | @include text-gradient(); 61 | text-align: center; 62 | opacity: 0; 63 | filter: drop-shadow(2px 7px 0px $shadow); 64 | @include animation(hello 2s forwards); 65 | @include animation-delay(0.8s); 66 | } 67 | 68 | // Speech bubble style 69 | .speech_bubble { 70 | width: 625px; 71 | height: 220px; 72 | background: #fff; 73 | position: relative; 74 | margin: auto; 75 | border: 10px solid #fff; 76 | @include border-radius(200px); 77 | @include animation(pop 2s ease-out); 78 | filter: drop-shadow(4px 7px 0px $shadow); 79 | } 80 | 81 | // speech bubble opening animation 82 | @include keyframes(pop) { 83 | 0% { 84 | width: 100px; 85 | } 86 | 40% { 87 | width: 1000px; 88 | } 89 | 80% { 90 | width: 600px; 91 | } 92 | // 90% { 93 | // width: 900px; 94 | // } 95 | } 96 | // hello world fade in 97 | @include keyframes(hello) { 98 | 0% { 99 | opacity: 0; 100 | } 101 | 50% { 102 | opacity: 1; 103 | } 104 | 100% { 105 | opacity: 1; 106 | } 107 | } 108 | // completed speech bubble 109 | .speech_bubble:after { 110 | width: 0; 111 | height: 0; 112 | border-left: 40px solid transparent; 113 | border-right: 40px solid transparent; 114 | border-top: 50px solid #fff; 115 | content: ""; 116 | top: 210px; 117 | position: absolute; 118 | left: 100px; 119 | right: 0; 120 | margin: auto; 121 | @include animation(move 0.8s ease); 122 | } 123 | // speech bubble before transition 124 | .speech_bubble:before { 125 | @extend .speech_bubble:after; 126 | top: 220px; 127 | border-top: 55px solid #fff; 128 | border-left: 44px solid transparent; 129 | border-right: 44px solid transparent; 130 | } 131 | // moves the speech bubble tooltip in plain sight 132 | @include keyframes(move) { 133 | 0% { 134 | top: 50px; 135 | left: -10px; 136 | } 137 | 50% { 138 | left: 50px; 139 | } 140 | 100% { 141 | left: 100px; 142 | } 143 | } 144 | // hand movements 145 | .em-hand { 146 | font-size: 48px; 147 | text-align: center; 148 | margin: 0.5em 0.5em 1em; 149 | @include animation(wave 0.3s alternate infinite); 150 | @include origin(50% 100%); 151 | } 152 | // handwave animation 153 | @include keyframes(wave) { 154 | 0% { 155 | // rotate hand down 156 | @include rotate-hand(-30deg); 157 | } 158 | 100% { 159 | // rotate back up 160 | @include rotate-hand(10deg); 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /day-1-hello-css/dist/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Pacifico"); 2 | body, 3 | html { 4 | background: linear-gradient(to top, #da22ff, #9733ee); 5 | background-repeat: no-repeat; 6 | background-attachment: fixed; 7 | width: 100vw; 8 | height: 100vh; 9 | } 10 | 11 | .container { 12 | position: absolute; 13 | left: 50%; 14 | top: 50%; 15 | transform: translate(-50%, -50%); 16 | } 17 | 18 | .hello { 19 | font-family: "Pacifico", cursive; 20 | font-size: 70px; 21 | background-image: -webkit-linear-gradient(to top, #da22ff, #9733ee); 22 | background-image: -moz-linear-gradient(to top, #da22ff, #9733ee); 23 | background-image: -ms-linear-gradient(to top, #da22ff, #9733ee); 24 | background-image: -o-linear-gradient(to top, #da22ff, #9733ee); 25 | background-image: linear-gradient(to top, #da22ff, #9733ee); 26 | color: transparent; 27 | -webkit-background-clip: text; 28 | background-clip: text; 29 | text-align: center; 30 | opacity: 0; 31 | filter: drop-shadow(2px 7px 0px #e3e3e3); 32 | -moz-animation: hello 2s forwards; 33 | -webkit-animation: hello 2s forwards; 34 | animation: hello 2s forwards; 35 | -moz-animation-delay: 0.8s; 36 | -webkit-animation-delay: 0.8s; 37 | animation-delay: 0.8s; 38 | } 39 | 40 | .speech_bubble { 41 | width: 625px; 42 | height: 220px; 43 | background: #fff; 44 | position: relative; 45 | margin: auto; 46 | border: 10px solid #fff; 47 | -moz-border-radius: 200px; 48 | -webkit-border-radius: 200px; 49 | border-radius: 200px; 50 | -moz-animation: pop 2s ease-out; 51 | -webkit-animation: pop 2s ease-out; 52 | animation: pop 2s ease-out; 53 | filter: drop-shadow(4px 7px 0px #e3e3e3); 54 | } 55 | 56 | @-moz-keyframes pop { 57 | 0% { 58 | width: 100px; 59 | } 60 | 40% { 61 | width: 1000px; 62 | } 63 | 80% { 64 | width: 600px; 65 | } 66 | } 67 | @-webkit-keyframes pop { 68 | 0% { 69 | width: 100px; 70 | } 71 | 40% { 72 | width: 1000px; 73 | } 74 | 80% { 75 | width: 600px; 76 | } 77 | } 78 | @keyframes pop { 79 | 0% { 80 | width: 100px; 81 | } 82 | 40% { 83 | width: 1000px; 84 | } 85 | 80% { 86 | width: 600px; 87 | } 88 | } 89 | @-moz-keyframes hello { 90 | 0% { 91 | opacity: 0; 92 | } 93 | 50% { 94 | opacity: 1; 95 | } 96 | 100% { 97 | opacity: 1; 98 | } 99 | } 100 | @-webkit-keyframes hello { 101 | 0% { 102 | opacity: 0; 103 | } 104 | 50% { 105 | opacity: 1; 106 | } 107 | 100% { 108 | opacity: 1; 109 | } 110 | } 111 | @keyframes hello { 112 | 0% { 113 | opacity: 0; 114 | } 115 | 50% { 116 | opacity: 1; 117 | } 118 | 100% { 119 | opacity: 1; 120 | } 121 | } 122 | .speech_bubble:after, .speech_bubble:before { 123 | width: 0; 124 | height: 0; 125 | border-left: 40px solid transparent; 126 | border-right: 40px solid transparent; 127 | border-top: 50px solid #fff; 128 | content: ""; 129 | top: 210px; 130 | position: absolute; 131 | left: 100px; 132 | right: 0; 133 | margin: auto; 134 | -moz-animation: move 0.8s ease; 135 | -webkit-animation: move 0.8s ease; 136 | animation: move 0.8s ease; 137 | } 138 | 139 | .speech_bubble:before { 140 | top: 220px; 141 | border-top: 55px solid #fff; 142 | border-left: 44px solid transparent; 143 | border-right: 44px solid transparent; 144 | } 145 | 146 | @-moz-keyframes move { 147 | 0% { 148 | top: 50px; 149 | left: -10px; 150 | } 151 | 50% { 152 | left: 50px; 153 | } 154 | 100% { 155 | left: 100px; 156 | } 157 | } 158 | @-webkit-keyframes move { 159 | 0% { 160 | top: 50px; 161 | left: -10px; 162 | } 163 | 50% { 164 | left: 50px; 165 | } 166 | 100% { 167 | left: 100px; 168 | } 169 | } 170 | @keyframes move { 171 | 0% { 172 | top: 50px; 173 | left: -10px; 174 | } 175 | 50% { 176 | left: 50px; 177 | } 178 | 100% { 179 | left: 100px; 180 | } 181 | } 182 | .em-hand { 183 | font-size: 48px; 184 | text-align: center; 185 | margin: 0.5em 0.5em 1em; 186 | -moz-animation: wave 0.3s alternate infinite; 187 | -webkit-animation: wave 0.3s alternate infinite; 188 | animation: wave 0.3s alternate infinite; 189 | -webkit-transform-origin: 50% 100%; 190 | -moz-transform-origin: 50% 100%; 191 | -ms-transform-origin: 50% 100%; 192 | transform-origin: 50% 100%; 193 | } 194 | 195 | @-moz-keyframes wave { 196 | 0% { 197 | -webkit-transform: rotate(-30deg); 198 | -moz-transform: rotate(-30deg); 199 | -ms-transform: rotate(-30deg); 200 | transform: rotate(-30deg); 201 | } 202 | 100% { 203 | -webkit-transform: rotate(10deg); 204 | -moz-transform: rotate(10deg); 205 | -ms-transform: rotate(10deg); 206 | transform: rotate(10deg); 207 | } 208 | } 209 | @-webkit-keyframes wave { 210 | 0% { 211 | -webkit-transform: rotate(-30deg); 212 | -moz-transform: rotate(-30deg); 213 | -ms-transform: rotate(-30deg); 214 | transform: rotate(-30deg); 215 | } 216 | 100% { 217 | -webkit-transform: rotate(10deg); 218 | -moz-transform: rotate(10deg); 219 | -ms-transform: rotate(10deg); 220 | transform: rotate(10deg); 221 | } 222 | } 223 | @keyframes wave { 224 | 0% { 225 | -webkit-transform: rotate(-30deg); 226 | -moz-transform: rotate(-30deg); 227 | -ms-transform: rotate(-30deg); 228 | transform: rotate(-30deg); 229 | } 230 | 100% { 231 | -webkit-transform: rotate(10deg); 232 | -moz-transform: rotate(10deg); 233 | -ms-transform: rotate(10deg); 234 | transform: rotate(10deg); 235 | } 236 | } -------------------------------------------------------------------------------- /day-19-25-pokemon-amie/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pokemon Amie ❤️ 6 | 7 | 8 | 9 |
10 |

Eevee isn't ready to play on mobile yet.

11 |

Try visiting Eevee on desktop!

12 |
13 |
14 |
15 |
16 | 135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 | 190 | 191 | -------------------------------------------------------------------------------- /day-9-self-portrait-interactive/dist/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #020916; 3 | position: absolute; 4 | transform: translate(-50%, -50%); 5 | left: 50%; 6 | top: 50%; 7 | } 8 | 9 | .container { 10 | background: #5ab3b5; 11 | overflow: hidden; 12 | width: 300px; 13 | height: 300px; 14 | border-radius: 100%; 15 | transition: all 0.5s ease; 16 | } 17 | .container:hover { 18 | background: pink; 19 | } 20 | .container:hover .cheeks::before, .container:hover .cheeks::after { 21 | background: #870d24; 22 | } 23 | .container:hover .heart { 24 | background: pink; 25 | } 26 | .container:hover .heart:before, .container:hover .heart:after { 27 | background: pink; 28 | } 29 | .container:hover .shirt-button { 30 | background: #b51231; 31 | } 32 | .container:hover .heart-button { 33 | z-index: 1; 34 | color: white; 35 | animation: pulse 1s 0.5s ease-out infinite; 36 | } 37 | 38 | .heart { 39 | width: 300px; 40 | height: 300px; 41 | background: #020916; 42 | position: absolute; 43 | top: 30px; 44 | z-index: -1; 45 | transform: rotate(45deg); 46 | transition: all 0.5s ease; 47 | } 48 | .heart:before, .heart:after { 49 | content: ""; 50 | width: 300px; 51 | height: 300px; 52 | position: absolute; 53 | border-radius: 100%; 54 | background: #020916; 55 | transition: all 0.5s ease; 56 | } 57 | .heart:before { 58 | top: -150px; 59 | left: 0; 60 | } 61 | .heart:after { 62 | left: -150px; 63 | top: 0; 64 | } 65 | 66 | .avatar-body { 67 | width: 60px; 68 | height: 30px; 69 | background: #b51231; 70 | position: absolute; 71 | left: calc(50% - 30px); 72 | top: 75%; 73 | z-index: 2; 74 | } 75 | .avatar-body:after { 76 | content: ""; 77 | position: absolute; 78 | border-bottom: 20px solid #e6e6e6; 79 | border-left: 20x solid transparent; 80 | border-right: 15px solid transparent; 81 | height: 0; 82 | width: 22px; 83 | right: calc(50% - 10px); 84 | top: -20px; 85 | } 86 | .avatar-body:before { 87 | content: ""; 88 | position: absolute; 89 | border-bottom: 20px solid #cccccc; 90 | border-left: 15px solid transparent; 91 | border-right: 0px solid transparent; 92 | height: 0; 93 | width: 25px; 94 | right: 2px; 95 | top: -20px; 96 | } 97 | 98 | .shirt-button { 99 | position: absolute; 100 | width: 10px; 101 | height: 10px; 102 | background: white; 103 | border-radius: 100%; 104 | left: calc(50% - 5px); 105 | top: 10px; 106 | } 107 | 108 | .heart-button { 109 | position: absolute; 110 | color: #b51231; 111 | font-size: 20px; 112 | top: -15px; 113 | left: 35%; 114 | z-index: -1; 115 | } 116 | 117 | .avatar-head { 118 | position: absolute; 119 | z-index: 3; 120 | width: 90px; 121 | height: 120px; 122 | background: #c74b16; 123 | border-radius: 40px; 124 | left: calc(50% - 45px); 125 | top: 70px; 126 | } 127 | 128 | .avatar-neck { 129 | position: absolute; 130 | width: 40px; 131 | height: 50px; 132 | background: #c74b16; 133 | left: calc(50% - 20px); 134 | top: 60%; 135 | box-shadow: inset 0px 16px 0px 0px #993a11; 136 | } 137 | 138 | .avatar-hair { 139 | position: absolute; 140 | width: 130px; 141 | height: 130px; 142 | background: #020916; 143 | border-radius: 100%; 144 | left: calc(50% - 65px); 145 | top: 12%; 146 | box-shadow: inset 10px -1px #061c45; 147 | } 148 | .avatar-hair:after { 149 | content: ""; 150 | position: absolute; 151 | width: 90px; 152 | height: 50px; 153 | background: #020916; 154 | border-radius: 0px 200px 0px 200px; 155 | z-index: 4; 156 | left: 40px; 157 | top: 20px; 158 | transform: rotate(10deg); 159 | } 160 | 161 | .avatar-ponytail { 162 | width: 90px; 163 | height: 120px; 164 | position: absolute; 165 | background: #020916; 166 | left: 25%; 167 | top: 40%; 168 | border-radius: 200px; 169 | } 170 | .avatar-ponytail:after { 171 | content: ""; 172 | position: absolute; 173 | width: 120px; 174 | height: 70px; 175 | background: #020916; 176 | border-radius: 0 0 300px 300px; 177 | top: 60%; 178 | right: -5%; 179 | } 180 | 181 | .avatar-face { 182 | width: 500px; 183 | height: 500px; 184 | position: absolute; 185 | left: calc(50% - 35px); 186 | top: calc(50% - 50px); 187 | z-index: 5; 188 | } 189 | .avatar-face .eyes { 190 | dispaly: flex; 191 | justify-content: space-between; 192 | position: absolute; 193 | top: 12px; 194 | left: -7px; 195 | } 196 | .avatar-face .eyes::before, .avatar-face .eyes::after { 197 | display: inline-block; 198 | content: ""; 199 | width: 15px; 200 | height: 40px; 201 | background: #020916; 202 | margin: 0 14px; 203 | border-radius: 200px; 204 | animation: blink 3s ease-in-out infinite; 205 | } 206 | .avatar-face .glasses { 207 | position: relative; 208 | width: 5px; 209 | height: 2px; 210 | background: #f89714; 211 | left: 6.5%; 212 | top: 25px; 213 | } 214 | .avatar-face .glasses .left, .avatar-face .glasses .right { 215 | position: absolute; 216 | width: 50px; 217 | height: 50px; 218 | background: transparent; 219 | border-radius: 100%; 220 | border: 2px solid #f89714; 221 | left: -52px; 222 | top: -22px; 223 | overflow: hidden; 224 | z-index: 2; 225 | } 226 | .avatar-face .glasses .right { 227 | left: 4px; 228 | } 229 | 230 | .shine { 231 | position: absolute; 232 | } 233 | .shine:before, .shine:after { 234 | content: ""; 235 | position: absolute; 236 | width: 20px; 237 | height: 100px; 238 | background: white; 239 | opacity: 0.3; 240 | transform: rotate(30deg); 241 | top: -25px; 242 | left: 5px; 243 | } 244 | .shine:after { 245 | width: 5px; 246 | left: 30px; 247 | } 248 | 249 | .cheeks { 250 | dispaly: flex; 251 | justify-content: space-between; 252 | position: absolute; 253 | top: 55px; 254 | left: -25px; 255 | } 256 | .cheeks::before, .cheeks::after { 257 | display: inline-block; 258 | content: ""; 259 | width: 20px; 260 | height: 20px; 261 | background: #c74b16; 262 | margin: 0 20px; 263 | opacity: 0.5; 264 | transition: all 1s ease; 265 | border-radius: 200px; 266 | } 267 | 268 | @keyframes blink { 269 | 0% { 270 | transform: scaleY(1); 271 | } 272 | 18% { 273 | transform: scaleY(1); 274 | } 275 | 20% { 276 | transform: scaleY(0); 277 | } 278 | 25% { 279 | transform: scaleY(1); 280 | } 281 | 38% { 282 | transform: scaleY(1); 283 | } 284 | 40% { 285 | transform: scaleY(0); 286 | } 287 | 45% { 288 | transform: scaleY(1); 289 | } 290 | 80% { 291 | transform: scaleY(1); 292 | } 293 | } 294 | @keyframes pulse { 295 | 0% { 296 | transform: scale(1); 297 | } 298 | 30% { 299 | transform: scale(1.5); 300 | } 301 | 100% { 302 | transform: scale(1); 303 | } 304 | } -------------------------------------------------------------------------------- /day-19-25-pokemon-amie/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pokemon Amie ❤️ (Hover over Eevee and hold left click to pet it) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Pokemon Amie ❤️ 16 | 17 | 18 | 19 |
20 |

Eevee isn't ready to play on mobile yet.

21 |

Try visiting Eevee on desktop!

22 |
23 |
24 |
25 |
26 | 145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /day-9-self-portrait-interactive/src/style.scss: -------------------------------------------------------------------------------- 1 | $background: #020916; 2 | $container: #5ab3b5; //#00ced1; 3 | $shirt: #b51231; 4 | $skin: #c74b16; 5 | 6 | body { 7 | background: $background; 8 | position: absolute; 9 | transform: translate(-50%, -50%); 10 | left: 50%; 11 | top: 50%; 12 | } 13 | 14 | .container { 15 | background: $container; 16 | overflow: hidden; 17 | width: 300px; 18 | height: 300px; 19 | border-radius: 100%; 20 | transition: all 0.5s ease; 21 | &:hover { 22 | background: pink; 23 | .cheeks { 24 | &::before, 25 | &::after { 26 | background: darken($shirt, 10%); 27 | } 28 | } 29 | .heart { 30 | background: pink; 31 | &:before, 32 | &:after { 33 | background: pink; 34 | } 35 | } 36 | .shirt-button { 37 | background: $shirt; 38 | } 39 | .heart-button { 40 | z-index: 1; 41 | color: white; 42 | animation: pulse 1s 0.5s ease-out infinite; 43 | } 44 | } 45 | } 46 | 47 | .heart { 48 | width: 300px; 49 | height: 300px; 50 | background: $background; 51 | position: absolute; 52 | top: 30px; 53 | z-index: -1; 54 | transform: rotate(45deg); 55 | transition: all 0.5s ease; 56 | &:before, 57 | &:after { 58 | content: ""; 59 | width: 300px; 60 | height: 300px; 61 | position: absolute; 62 | border-radius: 100%; 63 | background: $background; 64 | transition: all 0.5s ease; 65 | } 66 | &:before { 67 | top: -150px; 68 | left: 0; 69 | } 70 | &:after { 71 | left: -150px; 72 | top: 0; 73 | } 74 | } 75 | .avatar-body { 76 | width: 60px; 77 | height: 30px; 78 | background: $shirt; 79 | position: absolute; 80 | left: calc(50% - 30px); 81 | top: 75%; 82 | z-index: 2; 83 | &:after { 84 | content: ""; 85 | position: absolute; 86 | border-bottom: 20px solid darken(white, 10%); 87 | border-left: 20x solid transparent; 88 | border-right: 15px solid transparent; 89 | height: 0; 90 | width: 22px; 91 | right: calc(50% - 10px); 92 | top: -20px; 93 | } 94 | &:before { 95 | content: ""; 96 | position: absolute; 97 | border-bottom: 20px solid darken(white, 20%); 98 | border-left: 15px solid transparent; 99 | border-right: 0px solid transparent; 100 | height: 0; 101 | width: 25px; 102 | right: 2px; 103 | top: -20px; 104 | } 105 | } 106 | .shirt-button { 107 | position: absolute; 108 | width: 10px; 109 | height: 10px; 110 | background: white; 111 | border-radius: 100%; 112 | left: calc(50% - 5px); 113 | top: 10px; 114 | } 115 | .heart-button { 116 | position: absolute; 117 | color: $shirt; 118 | font-size: 20px; 119 | top: -15px; 120 | left: 35%; 121 | z-index: -1; 122 | } 123 | .avatar-head { 124 | position: absolute; 125 | z-index: 3; 126 | width: 90px; 127 | height: 120px; 128 | background: $skin; 129 | border-radius: 40px; 130 | left: calc(50% - 45px); 131 | top: 70px; 132 | } 133 | .avatar-neck { 134 | position: absolute; 135 | width: 40px; 136 | height: 50px; 137 | background: $skin; 138 | left: calc(50% - 20px); 139 | top: 60%; 140 | box-shadow: inset 0px 16px 0px 0px darken($skin, 10%); 141 | } 142 | .avatar-hair { 143 | position: absolute; 144 | width: 130px; 145 | height: 130px; 146 | background: $background; 147 | border-radius: 100%; 148 | left: calc(50% - 65px); 149 | top: 12%; 150 | box-shadow: inset 10px -1px lighten($background, 10%); 151 | &:after { 152 | content: ""; 153 | position: absolute; 154 | width: 90px; 155 | height: 50px; 156 | background: $background; 157 | border-radius: 0px 200px 0px 200px; 158 | z-index: 4; 159 | left: 40px; 160 | top: 20px; 161 | transform: rotate(10deg); 162 | } 163 | } 164 | .avatar-ponytail { 165 | width: 90px; 166 | height: 120px; 167 | position: absolute; 168 | background: $background; 169 | left: 25%; 170 | top: 40%; 171 | border-radius: 200px; 172 | &:after { 173 | content: ""; 174 | position: absolute; 175 | width: 120px; 176 | height: 70px; 177 | background: $background; 178 | border-radius: 0 0 300px 300px; 179 | top: 60%; 180 | right: -5%; 181 | } 182 | } 183 | .avatar-face { 184 | width: 500px; 185 | height: 500px; 186 | position: absolute; 187 | left: calc(50% - 35px); 188 | top: calc(50% - 50px); 189 | z-index: 5; 190 | .eyes { 191 | dispaly: flex; 192 | justify-content: space-between; 193 | position: absolute; 194 | top: 12px; 195 | left: -7px; 196 | &::before, 197 | &::after { 198 | display: inline-block; 199 | content: ""; 200 | width: 15px; 201 | height: 40px; 202 | background: $background; 203 | margin: 0 14px; 204 | border-radius: 200px; 205 | animation: blink 3s ease-in-out infinite; 206 | } 207 | } 208 | 209 | .glasses { 210 | position: relative; 211 | width: 5px; 212 | height: 2px; 213 | background: #f89714; 214 | left: 6.5%; 215 | top: 25px; 216 | .left { 217 | position: absolute; 218 | width: 50px; 219 | height: 50px; 220 | background: transparent; 221 | border-radius: 100%; 222 | border: 2px solid #f89714; 223 | left: -52px; 224 | top: -22px; 225 | overflow: hidden; 226 | z-index: 2; 227 | } 228 | .right { 229 | @extend .left; 230 | left: 4px; 231 | } 232 | } 233 | } 234 | .shine { 235 | position: absolute; 236 | &:before { 237 | content: ""; 238 | position: absolute; 239 | width: 20px; 240 | height: 100px; 241 | background: white; 242 | opacity: 0.3; 243 | transform: rotate(30deg); 244 | top: -25px; 245 | left: 5px; 246 | } 247 | &:after { 248 | @extend .shine:before; 249 | width: 5px; 250 | left: 30px; 251 | } 252 | } 253 | .cheeks { 254 | dispaly: flex; 255 | justify-content: space-between; 256 | position: absolute; 257 | top: 55px; 258 | left: -25px; 259 | &::before, 260 | &::after { 261 | display: inline-block; 262 | content: ""; 263 | width: 20px; 264 | height: 20px; 265 | background: $skin; 266 | margin: 0 20px; 267 | opacity: 0.5; 268 | transition: all 1s ease; 269 | border-radius: 200px; 270 | } 271 | } 272 | 273 | @keyframes blink { 274 | 0% { 275 | transform: scaleY(1); 276 | } 277 | 18% { 278 | transform: scaleY(1); 279 | } 280 | 20% { 281 | transform: scaleY(0); 282 | } 283 | 25% { 284 | transform: scaleY(1); 285 | } 286 | 38% { 287 | transform: scaleY(1); 288 | } 289 | 40% { 290 | transform: scaleY(0); 291 | } 292 | 45% { 293 | transform: scaleY(1); 294 | } 295 | 80% { 296 | transform: scaleY(1); 297 | } 298 | } 299 | 300 | @keyframes pulse { 301 | 0% { 302 | transform: scale(1); 303 | } 30% { 304 | transform: scale(1.5); 305 | } 100% { 306 | transform: scale(1); 307 | } 308 | } -------------------------------------------------------------------------------- /day-7-8-beauty-and-the-beast-s-enchanted-rose/src/style.scss: -------------------------------------------------------------------------------- 1 | $bg: darken(#122139, 8%);//#fffafa; 2 | $case: #122139; 3 | $casebase: #a52a2a; 4 | $pink1: #d52d58; 5 | $pink2: #9e183a; 6 | $pink3: #b81b43; 7 | $pink4: #c9204b; 8 | $green1: #338f37; 9 | $green2: darken(#066406, 5%); 10 | 11 | @mixin rotatePetal($i, $angle) { 12 | @if ($i % 2 == 1) { 13 | $angle: $angle * -1; 14 | } 15 | transform: rotate($angle + deg); 16 | } 17 | @function randomNum($min, $max) { 18 | $rand: random(); 19 | $randomNum: $min + floor($rand * (($max - $min) + 1)); 20 | 21 | @return $randomNum; 22 | } 23 | body { 24 | height: 100%; 25 | width: 100%; 26 | background: $bg; 27 | overflow: hidden; 28 | } 29 | 30 | .container { 31 | position: absolute; 32 | left: 50%; 33 | top: 50%; 34 | transform: translate(-50%, -50%); 35 | } 36 | 37 | .glass { 38 | height: 350px; 39 | width: 200px; 40 | background: $case; 41 | border-radius: 300px 300px 0px 0px; 42 | &:before { 43 | content: ""; 44 | height: 10px; 45 | width: 10px; 46 | transform-origin: center; 47 | border: 10px solid $case; 48 | border-radius: 100%; 49 | position: absolute; 50 | left: 87px; 51 | top: -25px; 52 | } 53 | &:after { 54 | content: ""; 55 | position: absolute; 56 | height: 15px; 57 | width: 250px; 58 | background: $casebase; 59 | top: 100%; 60 | left: -13%; 61 | } 62 | } 63 | .shine { 64 | width: 12px; 65 | height: 140px; 66 | background: white; 67 | opacity: 0.2; 68 | position: absolute; 69 | left: 85%; 70 | top: 80px; 71 | border-radius: 100px; 72 | z-index: 10; 73 | &:before { 74 | content: ""; 75 | width: 12px; 76 | height: 20px; 77 | position: absolute; 78 | background: white; 79 | top: 160px; 80 | border-radius: 100px; 81 | } 82 | } 83 | .petals { 84 | & > div { 85 | position: absolute; 86 | background: $pink1; 87 | width: 45px; 88 | height: 80px; 89 | top: 55px; 90 | transition: all 0.5s ease-out; 91 | } 92 | & > div:nth-child(1) { 93 | border-radius: 15px; 94 | box-shadow: 0px 0px 30px rgba(245, 148, 184, 1); 95 | left: 80px; 96 | top: 60px; 97 | background: $pink1; 98 | } 99 | & > div:nth-child(2), 100 | & > div:nth-child(4), 101 | & > div:nth-child(6) { 102 | background: $pink3; 103 | left: 60px; 104 | border-radius: 0px 30px 0px 30px; 105 | transform-origin: bottom right; 106 | } 107 | & > div:nth-child(3), 108 | & > div:nth-child(5), 109 | & > div:nth-child(7) { 110 | background: $pink3; 111 | left: 100px; 112 | border-radius: 30px 0px 30px 0px; 113 | transform-origin: bottom left; 114 | } 115 | @for $i from 2 to 8 { 116 | $background: ""; 117 | $top: ""; 118 | $h: ""; 119 | $box: ""; 120 | $angle: 30deg; 121 | @if ($i == 2 or $i == 3) { 122 | $background: lighten($pink2, 3%); 123 | $top: 75px; 124 | $h: 70px; 125 | //@if ($i == 3) { 126 | $box: 0px 0px 50px rgba(245, 148, 184, .5); 127 | //} 128 | } 129 | @if ($i == 4 or $i == 5) { 130 | $background: $pink3; 131 | $top: 70px; 132 | $h: 75px; 133 | $box: 0px 0px 50px rgba(245, 148, 184, .5); 134 | } 135 | @if ($i == 6 or $i == 7) { 136 | $background: $pink4; 137 | $top: 65px; 138 | $h: 70px; 139 | $box: 0px 0px 50px rgba(245, 148, 184, .3); 140 | } 141 | & > div:nth-child(#{$i}) { 142 | z-index: 7-$i; 143 | background: $background; 144 | top: $top; 145 | height: $h; 146 | box-shadow: $box; 147 | @if ($i == 2) { 148 | animation: bloom2 3s ease-in-out; 149 | } @else { 150 | animation: bloom+$i 3s ease-in-out, glowing 2.5s ease-in-out infinite; 151 | } 152 | animation-fill-mode: forwards; 153 | } 154 | } 155 | } 156 | .deadPetals { 157 | & > div { 158 | position: absolute; 159 | background: $pink1; 160 | width: 20px; 161 | height: 15px; 162 | top: 120px; 163 | border-radius: 0px 30px 0px 30px; 164 | box-shadow: 0px 0px 30px rgba(245, 148, 184, .5); 165 | transition: all 0.5s ease-out; 166 | } 167 | @for $i from 1 to 5 { 168 | & > div:nth-child(#{$i}) { 169 | left: randomNum(60, 120)+px; 170 | transform: rotate(-30deg); 171 | animation: falling 20s $i*4s ease-in-out infinite; 172 | } 173 | } 174 | } 175 | .leaves { 176 | & > div:nth-last-child(1) { 177 | position: absolute; 178 | width: 55px; 179 | height: 30px; 180 | background: $green1; 181 | top: 120px; 182 | left: 75px; 183 | border-radius: 100px; 184 | 185 | } 186 | & > div:nth-child(1) { 187 | position: absolute; 188 | width: 6px; 189 | height: 210px; 190 | background: $green2; 191 | top: 95px; 192 | left: 100px; 193 | border-radius: 0 0 100px 100px; 194 | } 195 | & > div:nth-child(2) { 196 | position: absolute; 197 | width: 30px; 198 | height: 50px; 199 | top: 53px; 200 | border-radius: 5px 40px 20px 40px; 201 | background: $green2; 202 | transform-origin: bottom; 203 | transform: rotate(-30deg); 204 | top: 180px; 205 | left: 80px; 206 | box-shadow: inset 5px 5px lighten($green2, 5%); 207 | } 208 | & > div:nth-child(3) { 209 | position: absolute; 210 | width: 30px; 211 | height: 50px; 212 | top: 53px; 213 | border-radius: 40px 5px 40px 20px; 214 | background: $green2; 215 | transform-origin: bottom; 216 | transform: rotate(30deg); 217 | top: 150px; 218 | left: 95px; 219 | box-shadow: inset -5px 5px lighten($green2, 5%); 220 | } 221 | } 222 | .thorns { 223 | & > div { 224 | position: absolute; 225 | width: 0; 226 | height: 0; 227 | top: 140px; 228 | } 229 | & > div:nth-child(odd) { 230 | border-top: 5px solid transparent; 231 | border-bottom: 5px solid transparent; 232 | border-left: 5px solid $green2; 233 | left: 105px; 234 | } 235 | & > div:nth-child(even) { 236 | border-top: 5px solid transparent; 237 | border-bottom: 5px solid transparent; 238 | border-right: 5px solid $green2; 239 | left: 95px; 240 | } 241 | & > div:nth-child(1) { 242 | top: 200px; 243 | } 244 | & > div:nth-child(2) { 245 | top: 170px; 246 | } 247 | & > div:nth-child(4) { 248 | top: 230px; 249 | } 250 | } 251 | 252 | @keyframes bloom2 { 253 | 50% { 254 | transform: rotate(-90deg); 255 | top: 200px; 256 | left: 100px; 257 | } 258 | 100% { 259 | transform: rotate(-60deg); 260 | top: 252px; 261 | left: 50px; 262 | background: darken($pink4, 20%); 263 | box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); 264 | } 265 | } 266 | 267 | @keyframes bloom3 { 268 | 100% { 269 | transform: rotate(45deg); 270 | } 271 | } 272 | 273 | @keyframes bloom4 { 274 | 100% { 275 | transform: rotate(-20deg); 276 | } 277 | } 278 | 279 | @keyframes bloom5 { 280 | 100% { 281 | transform: rotate(20deg); 282 | } 283 | } 284 | 285 | @keyframes bloom6 { 286 | 100% { 287 | transform: rotate(-5deg); 288 | } 289 | } 290 | 291 | @keyframes bloom7 { 292 | 100% { 293 | transform: rotate(5deg); 294 | } 295 | } 296 | 297 | @keyframes glowing { 298 | 50% { 299 | background: lighten($pink1, 2%); 300 | box-shadow: 0px 0px 60px rgba(245, 148, 184, 1); 301 | } 302 | } 303 | 304 | @keyframes falling { 305 | 20% { 306 | top: 335px; 307 | background: darken($pink4, 10%); 308 | box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); 309 | } 310 | 100% { 311 | top: 335px; 312 | opacity: 0; 313 | } 314 | } -------------------------------------------------------------------------------- /day-7-8-beauty-and-the-beast-s-enchanted-rose/dist/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100%; 3 | width: 100%; 4 | background: #080f1a; 5 | overflow: hidden; 6 | } 7 | 8 | .container { 9 | position: absolute; 10 | left: 50%; 11 | top: 50%; 12 | transform: translate(-50%, -50%); 13 | } 14 | 15 | .glass { 16 | height: 350px; 17 | width: 200px; 18 | background: #122139; 19 | border-radius: 300px 300px 0px 0px; 20 | } 21 | .glass:before { 22 | content: ""; 23 | height: 10px; 24 | width: 10px; 25 | transform-origin: center; 26 | border: 10px solid #122139; 27 | border-radius: 100%; 28 | position: absolute; 29 | left: 87px; 30 | top: -25px; 31 | } 32 | .glass:after { 33 | content: ""; 34 | position: absolute; 35 | height: 15px; 36 | width: 250px; 37 | background: #a52a2a; 38 | top: 100%; 39 | left: -13%; 40 | } 41 | 42 | .shine { 43 | width: 12px; 44 | height: 140px; 45 | background: white; 46 | opacity: 0.2; 47 | position: absolute; 48 | left: 85%; 49 | top: 80px; 50 | border-radius: 100px; 51 | z-index: 10; 52 | } 53 | .shine:before { 54 | content: ""; 55 | width: 12px; 56 | height: 20px; 57 | position: absolute; 58 | background: white; 59 | top: 160px; 60 | border-radius: 100px; 61 | } 62 | 63 | .petals > div { 64 | position: absolute; 65 | background: #d52d58; 66 | width: 45px; 67 | height: 80px; 68 | top: 55px; 69 | transition: all 0.5s ease-out; 70 | } 71 | .petals > div:nth-child(1) { 72 | border-radius: 15px; 73 | box-shadow: 0px 0px 30px #f594b8; 74 | left: 80px; 75 | top: 60px; 76 | background: #d52d58; 77 | } 78 | .petals > div:nth-child(2), .petals > div:nth-child(4), .petals > div:nth-child(6) { 79 | background: #b81b43; 80 | left: 60px; 81 | border-radius: 0px 30px 0px 30px; 82 | transform-origin: bottom right; 83 | } 84 | .petals > div:nth-child(3), .petals > div:nth-child(5), .petals > div:nth-child(7) { 85 | background: #b81b43; 86 | left: 100px; 87 | border-radius: 30px 0px 30px 0px; 88 | transform-origin: bottom left; 89 | } 90 | .petals > div:nth-child(2) { 91 | z-index: 5; 92 | background: #ab1a3f; 93 | top: 75px; 94 | height: 70px; 95 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 96 | animation: bloom2 3s ease-in-out; 97 | animation-fill-mode: forwards; 98 | } 99 | .petals > div:nth-child(3) { 100 | z-index: 4; 101 | background: #ab1a3f; 102 | top: 75px; 103 | height: 70px; 104 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 105 | animation: bloom3 3s ease-in-out, glowing 2.5s ease-in-out infinite; 106 | animation-fill-mode: forwards; 107 | } 108 | .petals > div:nth-child(4) { 109 | z-index: 3; 110 | background: #b81b43; 111 | top: 70px; 112 | height: 75px; 113 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 114 | animation: bloom4 3s ease-in-out, glowing 2.5s ease-in-out infinite; 115 | animation-fill-mode: forwards; 116 | } 117 | .petals > div:nth-child(5) { 118 | z-index: 2; 119 | background: #b81b43; 120 | top: 70px; 121 | height: 75px; 122 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5); 123 | animation: bloom5 3s ease-in-out, glowing 2.5s ease-in-out infinite; 124 | animation-fill-mode: forwards; 125 | } 126 | .petals > div:nth-child(6) { 127 | z-index: 1; 128 | background: #c9204b; 129 | top: 65px; 130 | height: 70px; 131 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); 132 | animation: bloom6 3s ease-in-out, glowing 2.5s ease-in-out infinite; 133 | animation-fill-mode: forwards; 134 | } 135 | .petals > div:nth-child(7) { 136 | z-index: 0; 137 | background: #c9204b; 138 | top: 65px; 139 | height: 70px; 140 | box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3); 141 | animation: bloom7 3s ease-in-out, glowing 2.5s ease-in-out infinite; 142 | animation-fill-mode: forwards; 143 | } 144 | 145 | .deadPetals > div { 146 | position: absolute; 147 | background: #d52d58; 148 | width: 20px; 149 | height: 15px; 150 | top: 120px; 151 | border-radius: 0px 30px 0px 30px; 152 | box-shadow: 0px 0px 30px rgba(245, 148, 184, 0.5); 153 | transition: all 0.5s ease-out; 154 | } 155 | .deadPetals > div:nth-child(1) { 156 | left: 91px; 157 | transform: rotate(-30deg); 158 | animation: falling 20s 4s ease-in-out infinite; 159 | } 160 | .deadPetals > div:nth-child(2) { 161 | left: 66px; 162 | transform: rotate(-30deg); 163 | animation: falling 20s 8s ease-in-out infinite; 164 | } 165 | .deadPetals > div:nth-child(3) { 166 | left: 110px; 167 | transform: rotate(-30deg); 168 | animation: falling 20s 12s ease-in-out infinite; 169 | } 170 | .deadPetals > div:nth-child(4) { 171 | left: 77px; 172 | transform: rotate(-30deg); 173 | animation: falling 20s 16s ease-in-out infinite; 174 | } 175 | 176 | .leaves > div:nth-last-child(1) { 177 | position: absolute; 178 | width: 55px; 179 | height: 30px; 180 | background: #338f37; 181 | top: 120px; 182 | left: 75px; 183 | border-radius: 100px; 184 | } 185 | .leaves > div:nth-child(1) { 186 | position: absolute; 187 | width: 6px; 188 | height: 210px; 189 | background: #054c05; 190 | top: 95px; 191 | left: 100px; 192 | border-radius: 0 0 100px 100px; 193 | } 194 | .leaves > div:nth-child(2) { 195 | position: absolute; 196 | width: 30px; 197 | height: 50px; 198 | top: 53px; 199 | border-radius: 5px 40px 20px 40px; 200 | background: #054c05; 201 | transform-origin: bottom; 202 | transform: rotate(-30deg); 203 | top: 180px; 204 | left: 80px; 205 | box-shadow: inset 5px 5px #066406; 206 | } 207 | .leaves > div:nth-child(3) { 208 | position: absolute; 209 | width: 30px; 210 | height: 50px; 211 | top: 53px; 212 | border-radius: 40px 5px 40px 20px; 213 | background: #054c05; 214 | transform-origin: bottom; 215 | transform: rotate(30deg); 216 | top: 150px; 217 | left: 95px; 218 | box-shadow: inset -5px 5px #066406; 219 | } 220 | 221 | .thorns > div { 222 | position: absolute; 223 | width: 0; 224 | height: 0; 225 | top: 140px; 226 | } 227 | .thorns > div:nth-child(odd) { 228 | border-top: 5px solid transparent; 229 | border-bottom: 5px solid transparent; 230 | border-left: 5px solid #054c05; 231 | left: 105px; 232 | } 233 | .thorns > div:nth-child(even) { 234 | border-top: 5px solid transparent; 235 | border-bottom: 5px solid transparent; 236 | border-right: 5px solid #054c05; 237 | left: 95px; 238 | } 239 | .thorns > div:nth-child(1) { 240 | top: 200px; 241 | } 242 | .thorns > div:nth-child(2) { 243 | top: 170px; 244 | } 245 | .thorns > div:nth-child(4) { 246 | top: 230px; 247 | } 248 | 249 | @keyframes bloom2 { 250 | 50% { 251 | transform: rotate(-90deg); 252 | top: 200px; 253 | left: 100px; 254 | } 255 | 100% { 256 | transform: rotate(-60deg); 257 | top: 252px; 258 | left: 50px; 259 | background: #71122a; 260 | box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); 261 | } 262 | } 263 | @keyframes bloom3 { 264 | 100% { 265 | transform: rotate(45deg); 266 | } 267 | } 268 | @keyframes bloom4 { 269 | 100% { 270 | transform: rotate(-20deg); 271 | } 272 | } 273 | @keyframes bloom5 { 274 | 100% { 275 | transform: rotate(20deg); 276 | } 277 | } 278 | @keyframes bloom6 { 279 | 100% { 280 | transform: rotate(-5deg); 281 | } 282 | } 283 | @keyframes bloom7 { 284 | 100% { 285 | transform: rotate(5deg); 286 | } 287 | } 288 | @keyframes glowing { 289 | 50% { 290 | background: #d7365f; 291 | box-shadow: 0px 0px 60px #f594b8; 292 | } 293 | } 294 | @keyframes falling { 295 | 20% { 296 | top: 335px; 297 | background: #9d193b; 298 | box-shadow: 0px 0px 0px rgba(245, 148, 184, 0); 299 | } 300 | 100% { 301 | top: 335px; 302 | opacity: 0; 303 | } 304 | } -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/dist/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Archivo+Black"); 2 | html, body { 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | background: #5ab3b5; 7 | margin: 0; 8 | padding: 0; 9 | cursor: url("https://acupoftee.github.io/images/slice-of-pizza.png"), auto; 10 | } 11 | 12 | p { 13 | font-family: "Archivo Black"; 14 | text-transform: uppercase; 15 | text-align: center; 16 | margin-top: 180px; 17 | color: #a0d3d5; 18 | } 19 | 20 | .container { 21 | position: absolute; 22 | left: 50%; 23 | top: 50%; 24 | transform: translate(-50%, -50%); 25 | } 26 | .container .me { 27 | transition: all 0.5s ease; 28 | position: absolute; 29 | left: 0; 30 | right: 0; 31 | margin: auto; 32 | width: 80px; 33 | height: 160px; 34 | } 35 | .container .me .head { 36 | position: absolute; 37 | width: 70px; 38 | height: 90px; 39 | top: 10px; 40 | background: #b5612c; 41 | border-radius: 100px; 42 | left: 4px; 43 | transition: all 0.5s ease; 44 | } 45 | .container .me .head .bangs, .container .me .head .bangs-upper { 46 | position: absolute; 47 | width: 94%; 48 | height: 50px; 49 | top: -12px; 50 | transition: all 0.5s ease; 51 | } 52 | .container .me .head .bangs span, .container .me .head .bangs-upper span { 53 | position: absolute; 54 | width: 30px; 55 | height: 30px; 56 | background: black; 57 | border-radius: 100%; 58 | } 59 | .container .me .head .bangs span:nth-child(2), .container .me .head .bangs-upper span:nth-child(2) { 60 | left: 20px; 61 | } 62 | .container .me .head .bangs span:nth-child(3), .container .me .head .bangs-upper span:nth-child(3) { 63 | left: 40px; 64 | } 65 | .container .me .head .bangs-upper { 66 | margin-top: -12px; 67 | } 68 | .container .me .head.look-left { 69 | width: 70px; 70 | left: -10px; 71 | } 72 | .container .me .head.look-left .bangs, .container .me .head.look-left .bangs-upper { 73 | width: 106%; 74 | left: -7px; 75 | } 76 | .container .me .head.look-right { 77 | width: 70px; 78 | left: 15px; 79 | } 80 | .container .me .head.look-right .bangs, .container .me .head.look-right .bangs-upper { 81 | width: 106%; 82 | left: 5px; 83 | } 84 | .container .me .face { 85 | transition: all 0.5s ease; 86 | position: absolute; 87 | top: 30px; 88 | } 89 | .container .me .face .eyes { 90 | display: flex; 91 | justify-content: space-between; 92 | } 93 | .container .me .face .eyes:before, .container .me .face .eyes:after { 94 | content: ""; 95 | display: block; 96 | position: relative; 97 | transform-origin: center; 98 | width: 9px; 99 | height: 30px; 100 | background: black; 101 | border-radius: 200px; 102 | left: 3px; 103 | margin: -2px 12px; 104 | animation: blink 4s infinite; 105 | transition: all 0.5s ease; 106 | } 107 | .container .me .face .glasses { 108 | position: relative; 109 | width: 5px; 110 | height: 2px; 111 | background: #f89714; 112 | left: 50%; 113 | top: 15px; 114 | } 115 | .container .me .face .glasses .left, .container .me .face .glasses .right { 116 | position: absolute; 117 | width: 40px; 118 | height: 40px; 119 | background: transparent; 120 | border-radius: 100%; 121 | border: 2px solid #f89714; 122 | left: -42px; 123 | top: -22px; 124 | overflow: hidden; 125 | z-index: 2; 126 | } 127 | .container .me .face .glasses .right { 128 | left: 4px; 129 | } 130 | .container .me .face.look-left { 131 | left: -7px; 132 | } 133 | .container .me .face.look-right { 134 | left: 5px; 135 | } 136 | .container .me .shine { 137 | position: absolute; 138 | } 139 | .container .me .shine:before, .container .me .shine:after { 140 | content: ""; 141 | position: absolute; 142 | width: 20px; 143 | height: 100px; 144 | background: white; 145 | opacity: 0.3; 146 | transform: rotate(30deg); 147 | top: -30px; 148 | left: 5px; 149 | } 150 | .container .me .shine:after { 151 | width: 5px; 152 | left: 30px; 153 | } 154 | .container .me .neck { 155 | position: absolute; 156 | width: 20px; 157 | height: 60px; 158 | background: #b5612c; 159 | top: 60px; 160 | left: 30px; 161 | border-radius: 0px 0px 100px 100px; 162 | overflow: hidden; 163 | } 164 | .container .me .neck:before { 165 | content: ""; 166 | position: absolute; 167 | width: 60px; 168 | height: 60px; 169 | background: #8c4b22; 170 | border-radius: 100%; 171 | top: -12px; 172 | left: -18px; 173 | transition: all 0.5s ease; 174 | } 175 | .container .me .neck.look-left:before { 176 | left: -38px; 177 | } 178 | .container .me .neck.look-right:before { 179 | left: -5px; 180 | } 181 | .container .me .shirt { 182 | position: absolute; 183 | width: 80px; 184 | height: 40px; 185 | background: #b51231; 186 | top: 105px; 187 | border-radius: 100px 100px 10px 10px; 188 | overflow: hidden; 189 | } 190 | .container .me .shirt:after { 191 | content: "\2665"; 192 | position: absolute; 193 | color: #870d24; 194 | top: 15px; 195 | left: 50px; 196 | } 197 | .container .me .hair { 198 | transition: all 0.5s ease; 199 | position: absolute; 200 | width: 90px; 201 | height: 120px; 202 | left: -8%; 203 | top: -10%; 204 | } 205 | .container .me .hair .first-row, .container .me .hair .second-row, .container .me .hair .third-row, .container .me .hair .fourth-row, .container .me .hair .fifth-row { 206 | position: absolute; 207 | } 208 | .container .me .hair .first-row span, .container .me .hair .second-row span, .container .me .hair .third-row span, .container .me .hair .fourth-row span, .container .me .hair .fifth-row span { 209 | width: 30px; 210 | height: 30px; 211 | border-radius: 100%; 212 | background: black; 213 | position: absolute; 214 | } 215 | .container .me .hair .first-row span:nth-child(1), .container .me .hair .second-row span:nth-child(1), .container .me .hair .third-row span:nth-child(1), .container .me .hair .fourth-row span:nth-child(1), .container .me .hair .fifth-row span:nth-child(1) { 216 | top: 5px; 217 | } 218 | .container .me .hair .first-row span:nth-child(2), .container .me .hair .second-row span:nth-child(2), .container .me .hair .third-row span:nth-child(2), .container .me .hair .fourth-row span:nth-child(2), .container .me .hair .fifth-row span:nth-child(2) { 219 | left: 30px; 220 | } 221 | .container .me .hair .first-row span:nth-child(3), .container .me .hair .second-row span:nth-child(3), .container .me .hair .third-row span:nth-child(3), .container .me .hair .fourth-row span:nth-child(3), .container .me .hair .fifth-row span:nth-child(3) { 222 | left: 60px; 223 | top: 5px; 224 | } 225 | .container .me .hair .first-row span:nth-child(4), .container .me .hair .second-row span:nth-child(4), .container .me .hair .third-row span:nth-child(4), .container .me .hair .fourth-row span:nth-child(4), .container .me .hair .fifth-row span:nth-child(4) { 226 | left: 15px; 227 | } 228 | .container .me .hair .first-row span:nth-child(5), .container .me .hair .second-row span:nth-child(5), .container .me .hair .third-row span:nth-child(5), .container .me .hair .fourth-row span:nth-child(5), .container .me .hair .fifth-row span:nth-child(5) { 229 | border-radius: 80%; 230 | left: 45px; 231 | } 232 | .container .me .hair .second-row { 233 | top: 20px; 234 | } 235 | .container .me .hair .third-row { 236 | top: 40px; 237 | } 238 | .container .me .hair .fourth-row { 239 | top: 60px; 240 | left: 2px; 241 | } 242 | .container .me .hair .fourth-row span { 243 | width: 25px; 244 | height: 25px; 245 | } 246 | .container .me .hair .fifth-row { 247 | top: 80px; 248 | left: 7.2px; 249 | } 250 | .container .me .hair .fifth-row span { 251 | width: 15px; 252 | height: 15px; 253 | } 254 | .container .me .hair.look-left { 255 | width: 55px; 256 | left: -17px; 257 | } 258 | .container .me .hair.look-right { 259 | width: 55px; 260 | left: 2px; 261 | } 262 | 263 | @keyframes blink { 264 | 0% { 265 | transform: scaleY(1); 266 | } 267 | 18% { 268 | transform: scaleY(1); 269 | } 270 | 20% { 271 | transform: scaleY(0); 272 | } 273 | 25% { 274 | transform: scaleY(1); 275 | } 276 | 38% { 277 | transform: scaleY(1); 278 | } 279 | 40% { 280 | transform: scaleY(0); 281 | } 282 | 45% { 283 | transform: scaleY(1); 284 | } 285 | 80% { 286 | transform: scaleY(1); 287 | } 288 | } -------------------------------------------------------------------------------- /day-13-14-super/dist/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fffaf0; 3 | } 4 | 5 | .trails { 6 | display: flex; 7 | justify-content: space-between; 8 | width: 90%; 9 | left: 0; 10 | position: absolute; 11 | } 12 | .trails li { 13 | background-color: #f9ad46; 14 | list-style: none; 15 | position: relative; 16 | border-radius: 200px; 17 | height: 400px; 18 | } 19 | .trails li:nth-child(1) { 20 | animation: flightTrail .22s linear infinite; 21 | width: 50px; 22 | } 23 | .trails li:nth-child(1):after { 24 | content: ''; 25 | background-color: #fcd9a9; 26 | width: 15px; 27 | height: 350px; 28 | position: absolute; 29 | left: 15%; 30 | top: 5%; 31 | border-radius: 200px; 32 | } 33 | .trails li:nth-child(2) { 34 | animation: flightTrail .28s .1s linear infinite; 35 | width: 75px; 36 | } 37 | .trails li:nth-child(2):after { 38 | content: ''; 39 | background-color: #fcd9a9; 40 | width: 20px; 41 | height: 350px; 42 | position: absolute; 43 | left: 15%; 44 | top: 5%; 45 | border-radius: 200px; 46 | } 47 | .trails li:nth-child(3) { 48 | animation: flightTrail .18s .03s linear infinite; 49 | width: 15px; 50 | } 51 | .trails li:nth-child(4) { 52 | animation: flightTrail .25s .01s linear infinite; 53 | width: 65px; 54 | } 55 | .trails li:nth-child(4):after { 56 | content: ''; 57 | background-color: #fcd9a9; 58 | width: 20px; 59 | height: 350px; 60 | position: absolute; 61 | left: 15%; 62 | top: 5%; 63 | border-radius: 200px; 64 | } 65 | .trails li:nth-child(5) { 66 | animation: flightTrail .4s .01s linear infinite; 67 | width: 40px; 68 | } 69 | .trails li:nth-child(5):after { 70 | background-color: #fcd9a9; 71 | border-radius: 200px; 72 | content: ''; 73 | height: 350px; 74 | left: 15%; 75 | position: absolute; 76 | top: 5%; 77 | width: 20px; 78 | } 79 | 80 | .container { 81 | background: #de197c; 82 | border-radius: 100%; 83 | height: 500px; 84 | left: 50%; 85 | overflow: hidden; 86 | position: absolute; 87 | top: 50%; 88 | transform: translate(-50%, -50%) scale(0.85); 89 | width: 500px; 90 | } 91 | 92 | .super-girl { 93 | animation: easeUpBody 0.7s ease-in-out alternate infinite; 94 | height: 400px; 95 | left: calc(50% - 100px); 96 | position: absolute; 97 | top: calc(50% - 150px); 98 | width: 200px; 99 | } 100 | 101 | .head { 102 | animation: easeUpHead 0.7s ease-in-out alternate infinite; 103 | background-color: #de5419; 104 | border-radius: 100px; 105 | box-shadow: inset -5px -10px #b04213; 106 | height: 210px; 107 | left: calc(50% - 80px); 108 | position: absolute; 109 | width: 160px; 110 | z-index: 4; 111 | } 112 | .head .face { 113 | height: 150px; 114 | left: calc(50% - 75px); 115 | position: absolute; 116 | top: calc(50% - 75px); 117 | width: 150px; 118 | } 119 | .head .face .eyes { 120 | animation: easeUpFace 0.7s ease-in-out alternate infinite; 121 | display: flex; 122 | justify-content: space-between; 123 | left: 6%; 124 | position: absolute; 125 | top: 60px; 126 | } 127 | .head .face .eyes::before, .head .face .eyes::after { 128 | border-radius: 200px; 129 | box-shadow: inset 0px 10px #020916; 130 | content: ''; 131 | height: 45px; 132 | margin: 0 10px; 133 | width: 45px; 134 | } 135 | .head .face .smile { 136 | background-color: #fffaf0; 137 | border-bottom-left-radius: 50px; 138 | border-bottom-right-radius: 50px; 139 | height: 30px; 140 | left: calc(50% - 30px); 141 | overflow: hidden; 142 | position: absolute; 143 | top: 80%; 144 | width: 60px; 145 | } 146 | 147 | .hair { 148 | background-color: #020916; 149 | border-radius: 100%; 150 | box-shadow: inset 15px 0px #08265c; 151 | height: 220px; 152 | left: calc(50% - 110px); 153 | position: absolute; 154 | top: -12%; 155 | width: 220px; 156 | } 157 | .hair::after { 158 | animation: easeUpHair 0.7s ease-in-out alternate infinite; 159 | background-color: #020916; 160 | border-radius: 0px 300px 0px 300px; 161 | content: ''; 162 | height: 110px; 163 | left: 63px; 164 | position: absolute; 165 | top: 25px; 166 | transform: rotate(-5deg); 167 | width: 130px; 168 | z-index: 5; 169 | } 170 | 171 | .neck { 172 | background-color: #c74b16; 173 | border-bottom-left-radius: 100%; 174 | border-bottom-right-radius: 100%; 175 | height: 70px; 176 | left: calc(50% - 30px); 177 | position: absolute; 178 | top: 45%; 179 | width: 60px; 180 | z-index: 4; 181 | } 182 | .neck::after { 183 | background-color: #a73f12; 184 | border-bottom-left-radius: 100%; 185 | border-bottom-right-radius: 100%; 186 | content: ''; 187 | height: 40px; 188 | position: absolute; 189 | width: 100%; 190 | } 191 | 192 | .body { 193 | background-color: #670050; 194 | border-top-left-radius: 200px; 195 | border-top-right-radius: 200px; 196 | height: 300px; 197 | left: calc(50% - 80px); 198 | position: absolute; 199 | top: 50%; 200 | width: 160px; 201 | } 202 | 203 | .ponytail { 204 | background-color: #020916; 205 | border-radius: 200px; 206 | box-shadow: inset 15px 0px #0b2f74; 207 | height: 200px; 208 | left: -20px; 209 | position: absolute; 210 | top: 30%; 211 | width: 120px; 212 | } 213 | .ponytail:after { 214 | background: #020916; 215 | border-radius: 0 0 400px 400px; 216 | box-shadow: inset 15px 0px #0b2f74; 217 | content: ''; 218 | height: 100px; 219 | left: -34%; 220 | position: absolute; 221 | width: 160px; 222 | top: 60%; 223 | } 224 | 225 | .arm-left { 226 | animation: rotateLeft 0.7s ease-in-out alternate infinite; 227 | background-color: #670050; 228 | border-top-left-radius: 200px; 229 | border-bottom-left-radius: 200px; 230 | height: 60px; 231 | left: 10%; 232 | position: absolute; 233 | top: 70%; 234 | transform: rotate(35deg); 235 | transform-origin: 80% 15%; 236 | width: 200px; 237 | z-index: 2; 238 | } 239 | .arm-left .hand { 240 | background-color: #de5419; 241 | border-top-left-radius: 200px; 242 | border-bottom-left-radius: 200px; 243 | height: 60px; 244 | width: 60px; 245 | } 246 | 247 | .arm-right { 248 | animation: rotateRight 0.7s ease-in-out alternate infinite; 249 | background-color: #670050; 250 | border-top-left-radius: 200px; 251 | border-bottom-left-radius: 200px; 252 | height: 60px; 253 | left: 33%; 254 | position: absolute; 255 | top: 75%; 256 | transform: rotate(145deg); 257 | transform-origin: 80% 15%; 258 | width: 200px; 259 | } 260 | .arm-right .hand { 261 | background-color: #de5419; 262 | border-top-left-radius: 200px; 263 | border-bottom-left-radius: 200px; 264 | height: 60px; 265 | width: 50px; 266 | } 267 | 268 | .fingers { 269 | left: -23%; 270 | list-style: none; 271 | position: absolute; 272 | top: -38%; 273 | } 274 | .fingers li { 275 | background-color: #d95218; 276 | box-shadow: inset -4px 4px #993a11; 277 | position: relative; 278 | border-radius: 200px; 279 | margin: auto -1%; 280 | height: 19px; 281 | width: 45px; 282 | } 283 | .fingers li:nth-child(1), .fingers li:nth-child(4) { 284 | left: 20%; 285 | } 286 | 287 | .thumb { 288 | background-color: #b04213; 289 | border-radius: 100%; 290 | height: 25px; 291 | left: 12%; 292 | position: absolute; 293 | top: -5%; 294 | width: 25px; 295 | } 296 | .thumb::after { 297 | background-color: #c74b16; 298 | border-radius: 200px; 299 | box-shadow: inset -4px 4px #993a11; 300 | content: ''; 301 | height: 35px; 302 | position: absolute; 303 | width: 18px; 304 | } 305 | 306 | @keyframes flightTrail { 307 | 0% { 308 | transform: translate(0, -400px); 309 | } 310 | 100% { 311 | transform: translate(0, 600px); 312 | } 313 | } 314 | @keyframes rotateLeft { 315 | from { 316 | transform: rotate(35deg); 317 | } 318 | to { 319 | transform: rotate(50deg); 320 | } 321 | } 322 | @keyframes rotateRight { 323 | from { 324 | transform: rotate(145deg); 325 | } 326 | to { 327 | transform: rotate(125deg); 328 | } 329 | } 330 | @keyframes easeUpBody { 331 | from { 332 | transform: translateY(2%); 333 | } 334 | to { 335 | transform: translateY(5%); 336 | } 337 | } 338 | @keyframes easeUpHead { 339 | from { 340 | transform: translateY(0%); 341 | } 342 | to { 343 | transform: translateY(1.5%); 344 | } 345 | } 346 | @keyframes easeUpHair { 347 | from { 348 | transform: translateY(0%); 349 | } 350 | to { 351 | transform: translateY(1.5%); 352 | } 353 | } 354 | @keyframes easeUpFace { 355 | from { 356 | transform: translateY(0%); 357 | } 358 | to { 359 | transform: scaleY(0.9); 360 | } 361 | } -------------------------------------------------------------------------------- /day-6-are-you-gonna-eat-that-interactive-pen/src/style.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Archivo+Black"); 2 | 3 | $background: #5ab3b5; 4 | $font: "Archivo Black"; 5 | $headHeight: 90px; 6 | $headWidth: 70px; 7 | $headTop: 10px; 8 | $skinTone: #b5612c; 9 | $bangsHeight: 50px; 10 | $bangsTop: -12px; 11 | $bangsWidth: 94%; 12 | $shirt: #b51231; 13 | $glasses: #f89714; 14 | 15 | 16 | html,body { 17 | width: 100%; 18 | height: 100%; 19 | overflow: hidden; 20 | background: $background; 21 | margin: 0; 22 | padding: 0; 23 | cursor: url('https://acupoftee.github.io/images/slice-of-pizza.png'), auto; 24 | } 25 | p { 26 | font-family: $font; 27 | text-transform: uppercase; 28 | text-align: center; 29 | margin-top: 180px; 30 | color: lighten($background, 20%); 31 | } 32 | .container { 33 | position: absolute; 34 | left: 50%; 35 | top: 50%; 36 | transform: translate(-50%, -50%); 37 | .me { 38 | transition: all 0.5s ease; 39 | position: absolute; 40 | left: 0; 41 | right: 0; 42 | margin: auto; 43 | width: 80px; 44 | height: 160px; 45 | .head { 46 | position: absolute; 47 | width: $headWidth; 48 | height: $headHeight; 49 | top: $headTop; 50 | background: $skinTone; 51 | border-radius: 100px; 52 | left: 4px; 53 | transition: all 0.5s ease; 54 | .bangs { 55 | position: absolute; 56 | width: $bangsWidth; 57 | height: $bangsHeight; 58 | top: $bangsTop; 59 | transition: all 0.5s ease; 60 | span { 61 | //transition: all 0.5 ease; 62 | position: absolute; 63 | width: 30px; 64 | height: 30px; 65 | background: black; 66 | border-radius: 100%; 67 | &:nth-child(2) { 68 | left: 20px; 69 | } 70 | &:nth-child(3) { 71 | left: 40px; 72 | } 73 | } 74 | } 75 | .bangs-upper { 76 | @extend .bangs; 77 | margin-top: -12px; 78 | } 79 | &.look-left { 80 | width: $headWidth; 81 | left: -10px; 82 | .bangs { 83 | width: $bangsWidth + 12; 84 | left: -7px; 85 | } 86 | } 87 | &.look-right { 88 | width: $headWidth; 89 | left: 15px; 90 | .bangs { 91 | width: $bangsWidth + 12; 92 | left: 5px; 93 | } 94 | } 95 | } // end head 96 | .face { 97 | transition: all 0.5s ease; 98 | position: absolute; 99 | top: 30px; 100 | .eyes { 101 | display: flex; 102 | justify-content: space-between; 103 | &:before, 104 | &:after { 105 | content: ""; 106 | display: block; 107 | position: relative; 108 | transform-origin: center; 109 | width: 9px; 110 | height: 30px; 111 | background: black; 112 | border-radius: 200px; 113 | left: 3px; 114 | margin: -2px 12px; 115 | animation: blink 4s infinite; 116 | transition: all 0.5s ease; 117 | } 118 | } // end eyes 119 | .glasses { 120 | position: relative; 121 | width: 5px; 122 | height: 2px; 123 | background: $glasses; 124 | left: 50%; 125 | top: 15px; 126 | .left { 127 | position: absolute; 128 | width: 40px; 129 | height: 40px; 130 | background: transparent; 131 | border-radius: 100%; 132 | border: 2px solid $glasses; 133 | left: -42px; 134 | top: -22px; 135 | overflow: hidden; 136 | z-index: 2; 137 | } 138 | .right { 139 | @extend .left; 140 | left: 4px; 141 | } 142 | } // end glasses 143 | &.look-left { 144 | left: -7px; 145 | } 146 | &.look-right { 147 | left: 5px; 148 | } 149 | // &.look-down { 150 | // top: 40px; 151 | // .eyes:before, .eyes:after { 152 | // height: 25px; 153 | // margin-top: 2px; 154 | // } 155 | // } 156 | // &.look-up { 157 | // top: 20px; 158 | // .eyes:before, .eyes:after { 159 | // height: 25px; 160 | // margin-top: -2px; 161 | // } 162 | // } 163 | // &.look-bottom-right { 164 | // top: 40px; 165 | // left: 5px; 166 | // .eyes:before, .eyes:after { 167 | // height: 25px; 168 | // margin-top: -1px; 169 | // } 170 | // } 171 | // &.look-bottom-left { 172 | // top: 40px; 173 | // left: -7px; 174 | // .eyes:before, .eyes:after { 175 | // height: 25px; 176 | // margin-top: -1px; 177 | // } 178 | // } 179 | // &.look-top-right { 180 | // top: 20px; 181 | // left: 5px; 182 | // .eyes:before, .eyes:after { 183 | // height: 25px; 184 | // margin-top: -2px; 185 | // } 186 | // } 187 | // &.look-top-left { 188 | // top: 20px; 189 | // left: -7px; 190 | // .eyes:before, .eyes:after { 191 | // height: 25px; 192 | // margin-top: -2px; 193 | // } 194 | // } 195 | } // end face 196 | 197 | .shine { 198 | position: absolute; 199 | &:before { 200 | content: ""; 201 | position: absolute; 202 | width: 20px; 203 | height: 100px; 204 | background: white; 205 | opacity: 0.3; 206 | transform: rotate(30deg); 207 | top: -30px; 208 | left: 5px; 209 | } 210 | &:after { 211 | @extend .shine:before; 212 | width: 5px; 213 | left: 30px; 214 | } 215 | } // end shine 216 | .neck { 217 | position: absolute; 218 | width: 20px; 219 | height: 60px; 220 | background: $skinTone; 221 | top: 60px; 222 | left: 30px; 223 | border-radius: 0px 0px 100px 100px; 224 | overflow: hidden; 225 | &:before { 226 | content: ""; 227 | position: absolute; 228 | width: 60px; 229 | height: 60px; 230 | background: darken($skinTone, 10%); 231 | border-radius: 100%; 232 | top: -12px; 233 | left: -18px; 234 | transition: all 0.5s ease; 235 | } 236 | &.look-left:before { 237 | left: -38px; 238 | } 239 | &.look-right:before { 240 | left: -5px; 241 | } 242 | } // end neck 243 | 244 | .shirt { 245 | position: absolute; 246 | width: 80px; 247 | height: 40px; 248 | background: $shirt; 249 | top: 105px; 250 | border-radius: 100px 100px 10px 10px; 251 | overflow: hidden; 252 | &:after { 253 | content: "\2665"; 254 | position: absolute; 255 | color: darken($shirt, 10%); 256 | top: 15px; 257 | left: 50px; 258 | } 259 | 260 | } // end shirt 261 | .hair { 262 | transition: all 0.5s ease; 263 | position: absolute; 264 | width: 90px; 265 | height: 120px; 266 | left: -8%; 267 | top: -10%; 268 | .first-row { 269 | position: absolute; 270 | span { 271 | width: 30px; 272 | height: 30px; 273 | border-radius: 100%; 274 | background: black; 275 | position: absolute; 276 | &:nth-child(1) { 277 | top: 5px; 278 | } 279 | &:nth-child(2) { 280 | left: 30px; 281 | } 282 | &:nth-child(3) { 283 | left: 60px; 284 | top: 5px; 285 | } 286 | &:nth-child(4) { 287 | left: 15px; 288 | } 289 | &:nth-child(5) { 290 | border-radius: 80%; 291 | left: 45px; 292 | } 293 | } 294 | } 295 | .second-row { 296 | @extend .first-row; 297 | top: 20px; 298 | } 299 | .third-row { 300 | @extend .first-row; 301 | top: 40px; 302 | } 303 | .fourth-row { 304 | @extend .first-row; 305 | top: 60px; 306 | left: 2px; 307 | span { 308 | width: 25px; 309 | height: 25px; 310 | } 311 | } 312 | .fifth-row { 313 | @extend .first-row; 314 | top: 80px; 315 | left: 7.2px; 316 | span { 317 | width: 15px; 318 | height: 15px; 319 | } 320 | } 321 | &.look-left { 322 | width: 55px; 323 | left: -17px; 324 | } 325 | &.look-right { 326 | width: 55px; 327 | left: 2px; 328 | } 329 | } // end hair 330 | } // end me (but please don't actually) 331 | } // end container 332 | 333 | @keyframes blink { 334 | 0% { 335 | transform: scaleY(1); 336 | } 337 | 18% { 338 | transform: scaleY(1); 339 | } 340 | 20% { 341 | transform: scaleY(0); 342 | } 343 | 25% { 344 | transform: scaleY(1); 345 | } 346 | 38% { 347 | transform: scaleY(1); 348 | } 349 | 40% { 350 | transform: scaleY(0); 351 | } 352 | 45% { 353 | transform: scaleY(1); 354 | } 355 | 80% { 356 | transform: scaleY(1); 357 | } 358 | } 359 | -------------------------------------------------------------------------------- /day-10-11-coder/src/style.sass: -------------------------------------------------------------------------------- 1 | $background: #fad0d9 2 | $windowFrame: #393d73 3 | $windowMetal: #a6a9d3 4 | $white: #fffaf0 5 | 6 | // sky colors 7 | $sky: #aadbea 8 | $sunset: #ff5f6d 9 | $night: #201b46 10 | 11 | // $sky: linear-gradient(to bottom, #4ca1af, #c4e0e5) 12 | // $sunset: linear-gradient(to bottom, #ff5f6d, #ffc371) 13 | // $night: linear-gradient(to bottom, #020107 0%, #201b46 40%) 14 | 15 | $sunsetCloud: darken(white, 15%) 16 | $nightCloud: darken(white, 30%) 17 | 18 | // tech variables 19 | $ideBackground: #301353 20 | $buttonRed: #FF4766 21 | $buttonYellow: #FFB023 22 | $buttonGreen: darken(#6ADEAE, 20%) 23 | $buttonOffset: 20px 24 | $codeGreenLength: 80px 25 | $codeYellowLength: 45px 26 | $codeRedLength: 60px 27 | 28 | // avatar variables 29 | $hair: #020916 30 | $shirt: #b51231 31 | $skin: #c74b16 32 | 33 | =bar() 34 | .bar 35 | position: absolute 36 | width: 100% 37 | height: 30px 38 | background: black 39 | z-index: 5 40 | .button 41 | position: absolute 42 | margin-left: 10px 43 | margin-top: 10px 44 | margin-right: 15px 45 | width: 10px 46 | height: 10px 47 | border-radius: 100% 48 | #red 49 | background: $buttonRed 50 | #yellow 51 | left: $buttonOffset 52 | background: $buttonYellow 53 | #green 54 | left: $buttonOffset * 2 55 | background: $buttonGreen 56 | 57 | 58 | body 59 | height: 100% 60 | width: 100% 61 | background: $white 62 | ul 63 | list-style: none 64 | 65 | .container 66 | transition: all 5s ease 67 | width: 450px 68 | height: 450px 69 | background: $background //purple 70 | position: absolute 71 | transform: translate(-50%, -50%) 72 | left: 50% 73 | top: 50% 74 | border-radius: 100% 75 | overflow: hidden 76 | animation: wallChange 40s ease-in-out infinite 77 | 78 | .window 79 | transition: all 5s ease 80 | width: 200px 81 | height: 200px 82 | background: $sky 83 | position: absolute 84 | left: 50% 85 | border: 10px solid $windowFrame 86 | border-radius: 10px 87 | animation: skyChange 40s ease-in-out infinite 88 | overflow: hidden 89 | .cloud 90 | position: absolute 91 | background: white 92 | width: 35px 93 | height: 30px 94 | top: 20px 95 | left: 20px 96 | border-radius: 100px 97 | &:before 98 | content: "" 99 | position: absolute 100 | @extend .cloud 101 | width: 30px 102 | left: -5px 103 | top: 10px 104 | animation: cloudChange 40s ease-in-out infinite 105 | &:after 106 | content: "" 107 | position: absolute 108 | @extend .cloud 109 | width: 40px 110 | left: 15px 111 | top: 12px 112 | animation: cloudChange 40s ease-in-out infinite 113 | 114 | #first-cloud 115 | animation: cloudMove 25s linear infinite, cloudChange 40s ease-in-out infinite 116 | 117 | #second-cloud 118 | top: 80px 119 | left: -60px 120 | animation: cloudMove 40s 10s linear infinite, cloudChange 40s ease-in-out infinite 121 | 122 | 123 | .small-monitor 124 | position: absolute 125 | width: 160px 126 | height: 210px 127 | top: 20% 128 | border-radius: 10px 129 | background: $ideBackground 130 | overflow: hidden 131 | border: 8px solid lighten($windowMetal, 10%) 132 | border-bottom: 50px solid lighten($windowMetal, 10%) 133 | box-shadow: -5px 5px $windowMetal 134 | left: 10px 135 | +bar() 136 | .screen 137 | position: absolute 138 | width: 190px 139 | height: 240px 140 | backgorund: $ideBackground 141 | margin-top: 30px 142 | li 143 | position: relative 144 | width: 20px 145 | height: 5px 146 | margin-top: 4px 147 | left: -20px 148 | border-radius: 5px 149 | background: white 150 | @for $i from 1 to 5 151 | &:nth-child(#{$i}) 152 | background: $buttonGreen 153 | width: 100px 154 | @for $i from 5 to 8 155 | &:nth-child(#{$i}) 156 | $width: 100px - $i * 10 157 | background: $buttonRed 158 | width: $width 159 | left: 8px 160 | @for $i from 8 to 19 161 | &:nth-child(#{$i}) 162 | $width: 100px - $i * 10 163 | background: $buttonYellow 164 | width: $width 165 | .inline-code 166 | position: relative 167 | display: inline-block 168 | width: 40px 169 | height: 5px 170 | background: pink 171 | 172 | .main-monitor 173 | position: absolute 174 | width: 250px 175 | height: 200px 176 | top: 30% 177 | left: 25% 178 | border-radius: 10px 179 | background: $ideBackground 180 | overflow: hidden 181 | border: 8px solid lighten($windowMetal, 10%) 182 | border-bottom: 50px solid lighten($windowMetal, 10%) 183 | box-shadow: -5px 5px $windowMetal 184 | +bar() 185 | .screen 186 | position: absolute 187 | width: 190px 188 | height: 240px 189 | max-height: 200px 190 | overflow: hidden 191 | li 192 | position: relative 193 | height: 5px 194 | margin: 5px 0 195 | left: -20px 196 | border-radius: 5px 197 | @for $i from 1 to 31 198 | &:nth-child(#{$i}) 199 | @if $i % 3 == 0 200 | background: $buttonRed 201 | width: $codeRedLength 202 | @else if $i % 2 == 0 203 | background: $buttonGreen 204 | width: $codeGreenLength 205 | @else 206 | background: $buttonYellow 207 | width: $codeYellowLength 208 | ul 209 | position: absolute 210 | top: 0 211 | animation: codeMove 5s linear infinite 212 | .avatar 213 | position: absolute 214 | width: 150px 215 | height: 300px 216 | top: 40% 217 | left: 50% 218 | .avatar-body 219 | position: absolute 220 | width: 130px 221 | height: 100px 222 | background: $shirt 223 | top: 70% 224 | border-radius: 30px 225 | .avatar-collar 226 | position: absolute 227 | width: 80px 228 | height: 35px 229 | background: darken(white, 10%) 230 | top: 65% 231 | left: calc(45% - 40px) 232 | .avatar-neck 233 | position: absolute 234 | width: 50px 235 | height: 60px 236 | background: $skin 237 | top: 50% 238 | left: calc(45% - 25px) 239 | .avatar-head 240 | position: absolute 241 | width: 150px 242 | height: 150px 243 | background: $hair 244 | border-radius: 100% 245 | top: 10% 246 | left: calc(42% - 75px) 247 | border-bottom: 6px solid $skin 248 | border-left: 5px solid lighten($hair, 10%) 249 | border-right: 5px solid lighten($hair, 10%) 250 | box-shadow: inset 10px 10px lighten($hair, 10%) 251 | .avatar-hairband 252 | position: absolute 253 | width: 80px 254 | height: 80px 255 | background: $shirt 256 | border-radius: 100% 257 | left: calc(63% - 40px) 258 | top: 25% 259 | .avatar-hair 260 | width: 85px 261 | height: 120px 262 | position: absolute 263 | background: $hair 264 | left: 40% 265 | top: 25% 266 | border-radius: 200px 267 | box-shadow: inset 10px 10px lighten($hair, 10%) 268 | &:after 269 | content: "" 270 | position: absolute 271 | width: 120px 272 | height: 70px 273 | background: $hair 274 | border-radius: 0 0 300px 300px 275 | top: 60% 276 | box-shadow: inset 10px -10px lighten($hair, 10%) 277 | 278 | // https://stackoverflow.com/questions/34314474/css-infinite-scrolling-div 279 | @keyframes codeMove 280 | 100% 281 | top: -60% 282 | 283 | @keyframes skyChange 284 | 0% 285 | background: $sky 286 | 20% 287 | background: $sunset 288 | 40% 289 | background: $night 290 | 60% 291 | background: $sky 292 | 293 | @keyframes wallChange 294 | 0% 295 | background: $background 296 | 20% 297 | background: darken($background, 10%) 298 | 40% 299 | background: $ideBackground 300 | 60% 301 | background: $background 302 | 303 | @keyframes cloudChange 304 | 0% 305 | background: white 306 | 20% 307 | background: $sunsetCloud 308 | 40% 309 | background: $nightCloud 310 | 60% 311 | background: white 312 | 313 | @keyframes cloudMove 314 | 0% 315 | left: -30% 316 | 100% 317 | left: 100% 318 | -------------------------------------------------------------------------------- /day-15-16-under-kamek-s-spell/src/style.scss: -------------------------------------------------------------------------------- 1 | $white: #fffaf0; 2 | 3 | // Scene vars 4 | $container-size: 450px; 5 | $night-sky: linear-gradient(to bottom, #360033, #0b8793); 6 | $night-sky-fallback: #2a0845; 7 | 8 | // mountain vars 9 | $mountain-border-radius: 200px; 10 | $front-hills:#3b0a30; 11 | $mid-hills: #6a3964; 12 | $back-hills: #522057; 13 | $magic-mountain-color: #311c30; 14 | 15 | // Trail vars 16 | $steps: 10; 17 | $saturation: 80%; 18 | $lightness: 60%; 19 | $hue-offset: 320; 20 | $trail-height: 500px; 21 | $trail-width: calc(460px / 10); 22 | $trail-radius: 23px; 23 | $trail-opacity: 0.6; 24 | 25 | // animation vars 26 | $kamek-timing: 6s; 27 | $trail-timing: 6s; 28 | 29 | // Color lists 30 | $hsl-colors: (); 31 | $bg-colors: (); 32 | 33 | // Populate $hsl-colors with calculated colors 34 | // These will be used to create the gradients in the second for loop 35 | @for $i from 1 through 11 { 36 | $color: hsl(360 / $steps * $i + $hue-offset, $saturation, $lightness); 37 | $hsl-colors: append($hsl-colors, $color); 38 | } 39 | 40 | // Define gradients with the newly created colors from $hsl-colors 41 | // Then, populate $background-colors with these newly created gradients 42 | @for $j from 1 through 10 { 43 | $bg: linear-gradient(to right, nth($hsl-colors, $j), nth($hsl-colors, $j + 1)); 44 | $bg-colors: append($bg-colors, $bg); 45 | } 46 | 47 | // Returns a random number given a min value 48 | // and max value 49 | @function randomNum($min, $max) { 50 | $rand: random(); 51 | @return ($min + floor($rand * (($max - $min) + 1))); 52 | } 53 | 54 | // Creates mountain ranges 55 | @mixin createHills($numHills, $minWidth, $maxWidth, $minHeight, $maxHeight) { 56 | @for $i from 1 through $numHills { 57 | &:nth-child(#{$i}) { 58 | width: randomNum($minWidth, $maxWidth); 59 | height: randomNum($minHeight, $maxHeight); 60 | } 61 | } 62 | } 63 | 64 | body { 65 | background-color: $white; 66 | } 67 | 68 | ul { 69 | list-style: none; 70 | padding-inline-start: 0; 71 | } 72 | 73 | .container { 74 | background: $night-sky-fallback; 75 | background: $night-sky; 76 | border-radius: 100%; 77 | height: $container-size; 78 | left: 50%; 79 | position: absolute; 80 | top: 50%; 81 | transform: translate(-50%, -50%); 82 | width: $container-size; 83 | overflow: hidden; 84 | /* this fixes the overflow:hidden in Chrome */ 85 | -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 86 | mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 87 | 88 | } 89 | 90 | .stars { 91 | width: 100%; 92 | height: 400px; 93 | li { 94 | position: absolute; 95 | background-color: rgb(255, 242, 123); 96 | border-radius: 100%; 97 | @for $i from 1 through 60 { 98 | &:nth-child(#{$i}) { 99 | $starSize: randomNum(0, 3px); 100 | width: $starSize; 101 | height: $starSize; 102 | left: randomNum(0, 400px); 103 | top: randomNum(0, 350px); 104 | } 105 | } 106 | } 107 | } 108 | 109 | .cloud { 110 | width: 60px; 111 | height: 60px; 112 | border-radius: 100%; 113 | background-color: rgb(79, 111, 160); 114 | position: absolute; 115 | left: -30%; 116 | top: 10%; 117 | box-shadow: inset 10px 10px rgb(23, 30, 54); 118 | animation: moveCloud 60s 1s infinite; 119 | &:before { 120 | content: ''; 121 | position: absolute; 122 | width: 55px; 123 | height: 55px; 124 | left: 30px; 125 | border-radius: 100%; 126 | top: 20px; 127 | background-color: rgb(79, 111, 160); 128 | } 129 | &:after { 130 | content: ''; 131 | position: absolute; 132 | width: 60px; 133 | height: 60px; 134 | left: -20px; 135 | border-radius: 100%; 136 | top: 10px; 137 | background-color: rgb(79, 111, 160); 138 | box-shadow: inset 10px 10px rgb(23, 30, 54); 139 | } 140 | 141 | &:nth-child(2) { 142 | left: -50%; 143 | top: 20%; 144 | animation: moveCloud 100s 2s infinite; 145 | } 146 | } 147 | 148 | .hills { 149 | position: absolute; 150 | width: 460px; 151 | height: 200px; 152 | display: flex; 153 | align-items: flex-end; 154 | li { 155 | border-top-left-radius: $mountain-border-radius; 156 | border-top-right-radius: $mountain-border-radius; 157 | } 158 | } 159 | 160 | .magic-mountain { 161 | position: absolute; 162 | width: 150px; 163 | height: 300px; 164 | top: 32%; 165 | right: 60%; 166 | border-top-left-radius: $mountain-border-radius; 167 | border-top-right-radius: $mountain-border-radius; 168 | background-color: $magic-mountain-color; 169 | box-shadow: inset 10px 10px darken($magic-mountain-color, 10%); 170 | 171 | .eyes { 172 | position: absolute; 173 | display: flex; 174 | justify-content: space-between; 175 | width: 50%; 176 | left: 25%; 177 | top: 20%; 178 | 179 | &:before, 180 | &:after { 181 | content: ""; 182 | width: 20px; 183 | height: 50px; 184 | background-color: black; 185 | border-radius: 100%; 186 | transform: scaleY(0); 187 | animation: wakeUp 2s 2s ease-in-out forwards, blink 4s 4s ease-in-out infinite; 188 | transition: 0.5s ease; 189 | } 190 | } 191 | } 192 | 193 | .front-hills { 194 | top: 67%; 195 | li { 196 | background-color: $front-hills; 197 | box-shadow: inset 5px 10px darken($front-hills, 10%); 198 | @include createHills(10, 300px, 400px, 100px, 200px); 199 | } 200 | } 201 | 202 | .mid-hills { 203 | top: 70%; 204 | li { 205 | background-color: $mid-hills; 206 | box-shadow: inset 5px 10px darken($mid-hills, 10%); 207 | @include createHills(7, 300px, 500px, 100px, 310px); 208 | } 209 | } 210 | 211 | .back-hills { 212 | top: 72%; 213 | li { 214 | background-color: $back-hills; 215 | box-shadow: inset 5px 10px darken($back-hills, 10%); 216 | @include createHills(5, 300px, 500px, 200px, 330px); 217 | } 218 | } 219 | 220 | .kamek { 221 | animation: fly $kamek-timing linear infinite; 222 | position: absolute; 223 | transform: scaleX(-1) rotate(10deg); 224 | top: 30%; 225 | left: -100%; 226 | z-index: 2; 227 | } 228 | 229 | .spell-trail { 230 | display: flex; 231 | opacity: $trail-opacity; 232 | height: 500px; 233 | width: 460px; 234 | position: absolute; 235 | top: 45%; 236 | transform-origin: center; 237 | z-index: 1; 238 | // align-items: flex-start; 239 | // with help from https://bennettfeely.com/clippy/ 240 | clip-path: polygon( 15%, 100% 0, 100% 100%, 0 100%); 241 | -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); 242 | 243 | .trail { 244 | height: 0; 245 | min-height: 0; 246 | position: relative; 247 | width: $trail-width; 248 | flex: 1; 249 | 250 | $delay: 0.8s; 251 | $percentage: 10%; 252 | 253 | // Creates a new rainbow trail with it's own animation 254 | @for $i from 1 through 10 { 255 | &:nth-child(#{$i}) { 256 | animation: createTrail $trail-timing $delay ease-in infinite; 257 | background-image: nth($bg-colors, $i); 258 | border-bottom-left-radius: $trail-radius; 259 | border-bottom-right-radius: $trail-radius; 260 | $delay: $delay + 0.2s; 261 | 262 | // image source: https://codepen.io/simeydotme/pen/PrQKgo 263 | .sparkles { 264 | background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif"); 265 | background-position: $percentage 0; 266 | border-bottom-left-radius: $trail-radius; 267 | border-bottom-right-radius: $trail-radius; 268 | height: 100%; 269 | mix-blend-mode: color-dodge; 270 | width: $trail-width; 271 | $percentage: $percentage + 10%; 272 | } 273 | } 274 | } 275 | } 276 | } 277 | 278 | @keyframes fly { 279 | 50% { 280 | left: 110%; 281 | top: 10%; 282 | } 283 | 51% { 284 | transform: scaleX(-1) rotate(10deg); 285 | top: 30%; 286 | } 287 | 52% { 288 | transform: scaleX(1) rotate(10deg); 289 | } 290 | 100% { 291 | transform: scaleX(1) rotate(10deg); 292 | left: -100%; 293 | top: 10%; 294 | } 295 | } 296 | 297 | @keyframes createTrail { 298 | 25% { 299 | height: $trail-height; 300 | opacity: 1; 301 | } 302 | 65% { 303 | height: $trail-height; 304 | opacity: 0; 305 | } 306 | 100% { 307 | height: 0; 308 | opacity: 0; 309 | } 310 | } 311 | 312 | @keyframes wakeUp { 313 | 60% { 314 | transform: scaleY(0); 315 | } 316 | 100% { 317 | transform: scaleY(1); 318 | } 319 | } 320 | 321 | @keyframes blink { 322 | 0% { 323 | transform: scaleY(1); 324 | } 325 | 18% { 326 | transform: scaleY(1); 327 | } 328 | 20% { 329 | transform: scaleY(0); 330 | } 331 | 25% { 332 | transform: scaleY(1); 333 | } 334 | 38% { 335 | transform: scaleY(1); 336 | } 337 | 40% { 338 | transform: scaleY(0); 339 | } 340 | 45% { 341 | transform: scaleY(1); 342 | } 343 | 80% { 344 | transform: scaleY(1); 345 | } 346 | 100% { 347 | transform: scaleY(1); 348 | } 349 | } 350 | @keyframes moveCloud { 351 | 100% { 352 | left: 150%; 353 | } 354 | } -------------------------------------------------------------------------------- /day-3-egg-head-in-love/dist/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #48befe; 3 | font-family: 'Josefin Sans', sans-serif; 4 | font-size: 12px; 5 | } 6 | 7 | .container { 8 | position: absolute; 9 | white-space: nowrap; 10 | left: 50%; 11 | top: 50%; 12 | transform: translate(-50%, -50%); 13 | } 14 | 15 | ul { 16 | margin: 0; 17 | padding: 0; 18 | } 19 | ul li { 20 | list-style: none; 21 | } 22 | 23 | .egg { 24 | width: 175px; 25 | height: 220px; 26 | border-radius: 100px 100px 0px 0px; 27 | background: #fdfeff; 28 | position: relative; 29 | display: inline-block; 30 | animation: floating 5s ease-out infinite; 31 | left: -5%; 32 | } 33 | .egg .face { 34 | width: 130px; 35 | height: 130px; 36 | background: #ffdb10; 37 | position: absolute; 38 | margin: 15% 15%; 39 | border-radius: 100%; 40 | box-shadow: inset -10px 1px 0 #ffcc24; 41 | } 42 | .egg .face .eyes { 43 | width: 15px; 44 | height: 15px; 45 | background: #000; 46 | border-radius: 100%; 47 | position: relative; 48 | top: 55px; 49 | left: 38px; 50 | animation: blink 3s infinite 2s; 51 | } 52 | .egg .face .eyes::after { 53 | content: ""; 54 | width: 15px; 55 | height: 15px; 56 | position: absolute; 57 | background: #000; 58 | border-radius: 100%; 59 | left: 50px; 60 | } 61 | .egg .face .smile { 62 | position: relative; 63 | border-bottom-left-radius: 90px; 64 | border-bottom-right-radius: 90px; 65 | width: 30px; 66 | height: 15px; 67 | background: #000; 68 | left: 55px; 69 | top: 60px; 70 | } 71 | .egg .face .smile::after { 72 | content: ""; 73 | position: absolute; 74 | width: 10px; 75 | height: 5px; 76 | background: #ff7e7e; 77 | border-radius: 100%; 78 | left: 10px; 79 | top: 8px; 80 | } 81 | .egg .face .cheeks { 82 | position: relative; 83 | width: 12px; 84 | height: 12px; 85 | background: #ff7e7e; 86 | border-radius: 100%; 87 | opacity: 0.5; 88 | top: 40px; 89 | left: 30px; 90 | } 91 | .egg .face .cheeks::after { 92 | content: ""; 93 | position: absolute; 94 | width: 12px; 95 | height: 12px; 96 | background: #ff7e7e; 97 | border-radius: 100%; 98 | left: 67px; 99 | } 100 | .egg .face .shine { 101 | position: relative; 102 | width: 8px; 103 | height: 20px; 104 | background: #fdfeff; 105 | border-radius: 200px; 106 | top: -10px; 107 | left: 12px; 108 | transform: rotate(20deg); 109 | } 110 | .egg .face .shine::after { 111 | position: absolute; 112 | content: ""; 113 | width: 8px; 114 | height: 8px; 115 | background: #fdfeff; 116 | border-radius: 200px; 117 | top: -15px; 118 | left: 6px; 119 | } 120 | .egg ul { 121 | display: flex; 122 | } 123 | .egg li { 124 | position: relative; 125 | border-radius: 200px; 126 | } 127 | .egg li:nth-child(odd) { 128 | background: #fdfeff; 129 | } 130 | .egg li:nth-child(even) { 131 | background: #48befe; 132 | } 133 | .egg li:nth-child(1) { 134 | width: 30px; 135 | height: 60px; 136 | top: 175px; 137 | animation: anim1 1.5s ease-out infinite; 138 | } 139 | .egg li:nth-child(2) { 140 | width: 20px; 141 | height: 50px; 142 | top: 185px; 143 | animation: anim2 3s ease-out infinite; 144 | } 145 | .egg li:nth-child(3) { 146 | width: 28.5px; 147 | height: 60px; 148 | top: 195px; 149 | animation: anim3 1s ease-in-out infinite; 150 | } 151 | .egg li:nth-child(4) { 152 | width: 20px; 153 | height: 50px; 154 | top: 210px; 155 | animation: anim4 2.2s ease-out infinite; 156 | } 157 | .egg li:nth-child(5) { 158 | width: 28.5px; 159 | height: 60px; 160 | top: 190px; 161 | animation: anim3 1.5s ease-out infinite; 162 | } 163 | .egg li:nth-child(6) { 164 | width: 20px; 165 | height: 60px; 166 | top: 200px; 167 | animation: anim2 4s ease-out infinite; 168 | } 169 | .egg li:nth-child(7) { 170 | width: 28.5px; 171 | height: 60px; 172 | top: 190px; 173 | animation: anim1 1.5s ease-out infinite; 174 | } 175 | 176 | .ghost { 177 | width: 175px; 178 | height: 220px; 179 | border-radius: 100px 100px 0px 0px; 180 | background: #fdfeff; 181 | position: relative; 182 | display: inline-block; 183 | animation: floating 2s ease-out infinite; 184 | opacity: 0.75; 185 | left: 5%; 186 | } 187 | .ghost::before { 188 | content: ""; 189 | width: 175px; 190 | height: 220px; 191 | border-radius: 100px 100px 0px 0px; 192 | background: #fdfeff; 193 | position: relative; 194 | display: inline-block; 195 | position: absolute; 196 | box-shadow: inset -15px 1px 0px #efefef; 197 | } 198 | .ghost .face { 199 | width: 130px; 200 | height: 130px; 201 | background: transparent; 202 | position: absolute; 203 | margin: -20% 10%; 204 | border-radius: 100%; 205 | } 206 | .ghost .face .eyes { 207 | opacity: 0.5; 208 | width: 15px; 209 | height: 15px; 210 | background: #000; 211 | border-radius: 100%; 212 | position: relative; 213 | top: 55px; 214 | left: 3px; 215 | animation: blink 5s infinite; 216 | } 217 | .ghost .face .eyes::after { 218 | content: ""; 219 | width: 15px; 220 | height: 15px; 221 | position: absolute; 222 | background: #000; 223 | border-radius: 100%; 224 | left: 50px; 225 | } 226 | .ghost .face .smile { 227 | position: relative; 228 | opacity: 0.5; 229 | border-bottom-left-radius: 50px; 230 | border-bottom-right-radius: 50px; 231 | width: 10px; 232 | height: 6px; 233 | background: transparent; 234 | border: 5px solid #000; 235 | left: 25px; 236 | top: 55px; 237 | } 238 | .ghost .face .smile::before { 239 | background: #fdfeff; 240 | width: 30px; 241 | height: 7px; 242 | content: ""; 243 | position: absolute; 244 | left: -10px; 245 | top: -5.5px; 246 | } 247 | .ghost .face .cheeks { 248 | position: relative; 249 | width: 12px; 250 | height: 12px; 251 | background: #ff7e7e; 252 | border-radius: 100%; 253 | opacity: 0.5; 254 | top: 43px; 255 | left: -4px; 256 | } 257 | .ghost .face .cheeks::after { 258 | content: ""; 259 | position: absolute; 260 | width: 12px; 261 | height: 12px; 262 | background: #ff7e7e; 263 | border-radius: 100%; 264 | left: 67px; 265 | } 266 | .ghost ul { 267 | display: flex; 268 | } 269 | .ghost li { 270 | position: relative; 271 | border-radius: 200px; 272 | height: 60px; 273 | } 274 | .ghost li:nth-child(odd) { 275 | background: #fdfeff; 276 | width: 30px; 277 | top: 172px; 278 | z-index: -1; 279 | } 280 | .ghost li:nth-child(even) { 281 | background: #48befe; 282 | width: 7px; 283 | top: 215px; 284 | } 285 | .ghost li:nth-child(1) { 286 | animation: ghostani 3s ease-out infinite; 287 | } 288 | .ghost li:nth-child(3) { 289 | animation: ghostani 3s ease-out infinite 0.5s; 290 | } 291 | .ghost li:nth-child(5) { 292 | animation: ghostani 3s ease-out infinite 1.0s; 293 | } 294 | .ghost li:nth-child(7) { 295 | animation: ghostani 3s ease-out infinite 1.5s; 296 | } 297 | .ghost li:nth-child(9) { 298 | box-shadow: inset -15px 4px #efefef; 299 | animation: ghostani 3s ease-out infinite 2s; 300 | } 301 | 302 | .heart { 303 | position: absolute; 304 | display: inline-block; 305 | width: 30px; 306 | height: 30px; 307 | background: red; 308 | left: 45%; 309 | transform: rotate(45deg); 310 | animation: beat 0.7s linear infinite; 311 | } 312 | .heart::before, .heart::after { 313 | position: absolute; 314 | content: ""; 315 | width: 30px; 316 | height: 30px; 317 | background: red; 318 | border-radius: 100%; 319 | top: -50%; 320 | animation: beat 0.7s linear infinite; 321 | } 322 | .heart::after { 323 | top: 0%; 324 | left: -50%; 325 | } 326 | .heart .light { 327 | width: 5px; 328 | height: 12px; 329 | background: white; 330 | position: absolute; 331 | border-radius: 200px; 332 | z-index: 3; 333 | left: -11px; 334 | top: 13px; 335 | transform: rotate(-10deg); 336 | animation: lightshift 0.7s linear infinite; 337 | } 338 | .heart .light::after { 339 | content: ""; 340 | position: absolute; 341 | z-index: 3; 342 | width: 5px; 343 | height: 5px; 344 | background: white; 345 | border-radius: 200px; 346 | top: -5px; 347 | left: 1.5px; 348 | } 349 | 350 | .shadow { 351 | position: absolute; 352 | opacity: 0.2; 353 | width: 180px; 354 | height: 15px; 355 | background: #000; 356 | top: 275px; 357 | border-radius: 100%; 358 | } 359 | 360 | .shadow#egg-shadow { 361 | left: -20px; 362 | animation: shadow-ani 5s ease-out infinite; 363 | } 364 | 365 | .shadow#ghost-shadow { 366 | left: 195px; 367 | transform-origin: center; 368 | animation: shadow-ani 2s ease-out infinite; 369 | } 370 | 371 | @keyframes shadow-ani { 372 | 50% { 373 | width: 170px; 374 | height: 10px; 375 | } 376 | } 377 | @keyframes blink { 378 | 0% { 379 | transform: scaleY(1); 380 | } 381 | 18% { 382 | transform: scaleY(1); 383 | } 384 | 20% { 385 | transform: scaleY(0); 386 | } 387 | 25% { 388 | transform: scaleY(1); 389 | } 390 | 38% { 391 | transform: scaleY(1); 392 | } 393 | 40% { 394 | transform: scaleY(0); 395 | } 396 | 45% { 397 | transform: scaleY(1); 398 | } 399 | 80% { 400 | transform: scaleY(1); 401 | } 402 | } 403 | @keyframes beat { 404 | 20%, 405 | 40% { 406 | height: 40px; 407 | width: 40px; 408 | } 409 | } 410 | @keyframes lightshift { 411 | 20%, 412 | 40% { 413 | left: -15px; 414 | } 415 | } 416 | @keyframes floating { 417 | 0% { 418 | top: 0; 419 | } 420 | 50% { 421 | top: -10px; 422 | } 423 | 100% { 424 | top: 0; 425 | } 426 | } 427 | @keyframes anim1 { 428 | 50% { 429 | top: 180px; 430 | } 431 | } 432 | @keyframes anim2 { 433 | 50% { 434 | top: 178px; 435 | } 436 | } 437 | @keyframes anim3 { 438 | 50% { 439 | top: 205px; 440 | } 441 | } 442 | @keyframes anim4 { 443 | 50% { 444 | top: 205px; 445 | } 446 | } 447 | @keyframes ghostani { 448 | 50% { 449 | top: 180px; 450 | } 451 | } -------------------------------------------------------------------------------- /day-4-eggstraterrestrial/dist/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #0f111d; 3 | } 4 | 5 | .container { 6 | position: absolute; 7 | left: 45%; 8 | top: 50%; 9 | transform: translate(-50%, -50%); 10 | animation: speed-up 3s ease-in-out infinite; 11 | } 12 | 13 | @keyframes speed-up { 14 | 50% { 15 | left: 65%; 16 | } 17 | } 18 | ul { 19 | margin: 0; 20 | padding: 0; 21 | } 22 | ul li { 23 | list-style: none; 24 | } 25 | 26 | .egg { 27 | width: 245px; 28 | height: 180px; 29 | border-radius: 0px 100px 100px 0px; 30 | background: #fff; 31 | position: relative; 32 | right: 20px; 33 | box-shadow: 0px 0px 20px #fff; 34 | } 35 | .egg .face { 36 | width: 140px; 37 | height: 140px; 38 | border-radius: 100%; 39 | background: #ffdb10; 40 | position: absolute; 41 | left: 35%; 42 | top: 11%; 43 | box-shadow: inset 10px 1px 0 #ffcc24; 44 | } 45 | .egg .face .eyes { 46 | position: relative; 47 | width: 15px; 48 | height: 15px; 49 | background: #000; 50 | border-radius: 100%; 51 | left: 35px; 52 | top: 58px; 53 | animation: eye-blink 2s infinite; 54 | } 55 | .egg .face .eyes::after { 56 | content: ""; 57 | position: absolute; 58 | width: 15px; 59 | height: 15px; 60 | background: #000; 61 | border-radius: 100%; 62 | left: 60px; 63 | } 64 | .egg .face .smile { 65 | position: relative; 66 | border-bottom-left-radius: 50px; 67 | border-bottom-right-radius: 50px; 68 | width: 10px; 69 | height: 6px; 70 | background: transparent; 71 | border: 5px solid #000; 72 | left: 63px; 73 | top: 55px; 74 | } 75 | .egg .face .smile::before { 76 | background: #ffdb10; 77 | width: 30px; 78 | height: 7px; 79 | content: ""; 80 | position: absolute; 81 | left: -10px; 82 | top: -5.5px; 83 | } 84 | .egg .face .cheeks { 85 | position: relative; 86 | width: 12px; 87 | height: 12px; 88 | border-radius: 100%; 89 | background: #ff7e7e; 90 | left: 25px; 91 | top: 42px; 92 | } 93 | .egg .face .cheeks::after { 94 | content: ""; 95 | position: absolute; 96 | width: 12px; 97 | height: 12px; 98 | border-radius: 100%; 99 | background: #ff7e7e; 100 | left: 83px; 101 | } 102 | .egg .face .shine { 103 | position: relative; 104 | width: 8px; 105 | height: 20px; 106 | border-radius: 200px; 107 | background: #fff; 108 | left: 110px; 109 | top: -20px; 110 | transform: rotate(-35deg); 111 | } 112 | .egg .face .shine::before { 113 | content: ""; 114 | position: absolute; 115 | width: 8px; 116 | height: 8px; 117 | background: #fff; 118 | border-radius: 100%; 119 | top: -12px; 120 | right: 2px; 121 | } 122 | .egg li { 123 | position: relative; 124 | border-radius: 200px; 125 | width: 80px; 126 | height: 25.7px; 127 | } 128 | .egg li:nth-child(odd) { 129 | background: #fff; 130 | } 131 | .egg li:nth-child(even) { 132 | background: #0f111d; 133 | } 134 | .egg li:nth-child(1) { 135 | right: 40px; 136 | animation: trail1 1s ease-out infinite; 137 | } 138 | .egg li:nth-child(1)::after { 139 | content: ""; 140 | position: absolute; 141 | opacity: 0; 142 | width: 25.7px; 143 | height: 25.7px; 144 | background: #fff; 145 | box-shadow: 0px 0px 10px #fff; 146 | border-radius: 100%; 147 | animation: floating 1.5s ease infinite; 148 | } 149 | .egg li:nth-child(2) { 150 | right: 30px; 151 | animation: trail2 1s ease-out infinite; 152 | } 153 | .egg li:nth-child(3) { 154 | right: 70px; 155 | animation: trail2 2s ease-out infinite; 156 | } 157 | .egg li:nth-child(4) { 158 | right: 60px; 159 | animation: trail1 0.9s ease-out infinite; 160 | } 161 | .egg li:nth-child(5) { 162 | right: 40px; 163 | animation: trail1 0.9s ease-out infinite; 164 | } 165 | .egg li:nth-child(5)::after { 166 | content: ""; 167 | position: absolute; 168 | opacity: 0; 169 | width: 25.7px; 170 | height: 25.7px; 171 | background: #fff; 172 | box-shadow: 0px 0px 10px #fff; 173 | border-radius: 100%; 174 | animation: floating2 1s ease infinite 2s; 175 | } 176 | .egg li:nth-child(6) { 177 | right: 20px; 178 | animation: trail2 1s ease-out infinite; 179 | } 180 | .egg li:nth-child(7) { 181 | right: 10px; 182 | animation: trail1 1s ease-out infinite; 183 | } 184 | .egg li:nth-child(7)::after { 185 | content: ""; 186 | position: absolute; 187 | opacity: 0; 188 | width: 25.7px; 189 | height: 25.7px; 190 | background: #fff; 191 | box-shadow: 0px 0px 10px #fff; 192 | border-radius: 100%; 193 | animation: floating3 1s ease infinite 0.5s; 194 | } 195 | 196 | @keyframes eye-blink { 197 | 0% { 198 | transform: scaleY(1); 199 | } 200 | 18% { 201 | transform: scaleY(1); 202 | } 203 | 20% { 204 | transform: scaleY(0); 205 | } 206 | 25% { 207 | transform: scaleY(1); 208 | } 209 | 38% { 210 | transform: scaleY(1); 211 | } 212 | 40% { 213 | transform: scaleY(0); 214 | } 215 | 45% { 216 | transform: scaleY(1); 217 | } 218 | 80% { 219 | transform: scaleY(1); 220 | } 221 | } 222 | @keyframes trail1 { 223 | 50% { 224 | right: 50px; 225 | } 226 | } 227 | @keyframes trail2 { 228 | 50% { 229 | right: 10px; 230 | } 231 | } 232 | @keyframes trail3 { 233 | 50% { 234 | right: 80px; 235 | } 236 | } 237 | @keyframes trail4 { 238 | 50% { 239 | right: 50px; 240 | } 241 | } 242 | @keyframes trail5 { 243 | 50% { 244 | right: 20px; 245 | } 246 | } 247 | @keyframes trail6 { 248 | 50% { 249 | right: 70px; 250 | } 251 | } 252 | @keyframes floating { 253 | 0% { 254 | right: 50px; 255 | opacity: 0; 256 | } 257 | 50% { 258 | right: 160px; 259 | opacity: 1; 260 | } 261 | 70% { 262 | right: 160px; 263 | opacity: 0; 264 | } 265 | 100% { 266 | right: 50px; 267 | opacity: 0; 268 | } 269 | } 270 | @keyframes floating2 { 271 | 0% { 272 | right: 50px; 273 | opacity: 0; 274 | } 275 | 50% { 276 | right: 100px; 277 | opacity: 1; 278 | } 279 | 70% { 280 | right: 100px; 281 | opacity: 0; 282 | } 283 | 100% { 284 | right: 50px; 285 | opacity: 0; 286 | } 287 | } 288 | @keyframes floating3 { 289 | 0% { 290 | right: 0px; 291 | opacity: 0; 292 | } 293 | 50% { 294 | right: 150px; 295 | opacity: 1; 296 | } 297 | 70% { 298 | right: 150px; 299 | opacity: 0; 300 | } 301 | 100% { 302 | right: 0px; 303 | opacity: 0; 304 | } 305 | } 306 | .stars { 307 | width: 100%; 308 | height: 100%; 309 | background: transparent; 310 | } 311 | .stars .star { 312 | display: block; 313 | position: absolute; 314 | opacity: 0; 315 | z-index: -1; 316 | transform: all 0.5 ease infinite; 317 | animation: moving-star 2s ease infinite; 318 | } 319 | .stars .star:nth-child(1) { 320 | width: 20px; 321 | height: 20px; 322 | border-radius: 100%; 323 | top: 100px; 324 | animation-delay: 0; 325 | background: linear-gradient(to left, #48098b, #00baee); 326 | } 327 | .stars .star:nth-child(2) { 328 | width: 10px; 329 | height: 10px; 330 | border-radius: 100%; 331 | top: 160px; 332 | animation-delay: 0.8s; 333 | background: linear-gradient(to left, #48098b, #46fce4); 334 | } 335 | .stars .star:nth-child(3) { 336 | width: 10px; 337 | height: 10px; 338 | border-radius: 100%; 339 | top: 110px; 340 | animation-delay: 0.35s; 341 | background: linear-gradient(to left, #00baee 20%, transparent); 342 | } 343 | .stars .star:nth-child(4) { 344 | width: 5px; 345 | height: 5px; 346 | border-radius: 100%; 347 | top: 450px; 348 | animation-delay: 1.5s; 349 | background: linear-gradient(to left, #00baee 20%, #46fce4); 350 | } 351 | .stars .star:nth-child(8) { 352 | width: 1px; 353 | height: 1px; 354 | border-radius: 100%; 355 | top: 350px; 356 | animation-delay: 0.7s; 357 | background: linear-gradient(to left, #0071db 70%, #46fce4); 358 | } 359 | .stars .star:nth-child(9) { 360 | width: 10px; 361 | height: 10px; 362 | border-radius: 100%; 363 | top: 510px; 364 | animation-delay: 0.2s; 365 | background: linear-gradient(to left, #48098b, #46fce4); 366 | } 367 | .stars .star:nth-child(12) { 368 | width: 5px; 369 | height: 5px; 370 | border-radius: 100%; 371 | top: 205px; 372 | animation-delay: 0.11s; 373 | background: linear-gradient(to left, #0071db, #46fce4); 374 | } 375 | .stars .star:nth-child(13) { 376 | width: 1px; 377 | height: 1px; 378 | border-radius: 100%; 379 | top: 140px; 380 | animation-delay: 0; 381 | background: linear-gradient(to left, #0071db, #46fce4); 382 | animation: shooting-star 2s ease infinite 0.3s; 383 | } 384 | .stars .star:nth-child(14) { 385 | width: 0.5px; 386 | height: 0.5px; 387 | border-radius: 100%; 388 | top: 160px; 389 | animation-delay: 0; 390 | background: #00baee; 391 | animation: shooting-star 1.5s ease infinite 0.2s; 392 | } 393 | .stars .star:nth-child(15) { 394 | width: 0.5px; 395 | height: 0.5px; 396 | border-radius: 100%; 397 | top: 250px; 398 | animation-delay: 0; 399 | background: #0071db; 400 | animation: shooting-star 1s ease infinite 0.6s; 401 | } 402 | .stars .star:nth-child(20) { 403 | width: 5px; 404 | height: 5px; 405 | border-radius: 100%; 406 | top: 370px; 407 | animation-delay: 0.3s; 408 | background: linear-gradient(to left, #0071db, #46fce4); 409 | animation: shooting-star 2.5s ease infinite; 410 | } 411 | 412 | @keyframes moving-star { 413 | 0% { 414 | right: 0; 415 | opacity: 1; 416 | } 417 | 50% { 418 | right: 100%; 419 | opacity: 1; 420 | } 421 | 70% { 422 | right: 100%; 423 | opacity: 0; 424 | } 425 | 100% { 426 | right: 0; 427 | opacity: 0; 428 | } 429 | } 430 | @keyframes shooting-star { 431 | 0% { 432 | right: 0; 433 | opacity: 1; 434 | } 435 | 50% { 436 | right: 100%; 437 | opacity: 1; 438 | width: 300px; 439 | } 440 | 70% { 441 | right: 100%; 442 | opacity: 0; 443 | width: 0px; 444 | } 445 | 100% { 446 | right: 0; 447 | opacity: 0; 448 | } 449 | } -------------------------------------------------------------------------------- /day-3-egg-head-in-love/src/style.scss: -------------------------------------------------------------------------------- 1 | $background: #48befe; 2 | $body: #fdfeff; 3 | $bodyWidth: 175px; 4 | $bodyHeight: 220px; 5 | $yolk: #ffdb10; 6 | $cheeks: #ff7e7e; 7 | $duration: 0.7s; 8 | $heartSize: 30px; 9 | 10 | @mixin characters { 11 | width: $bodyWidth; 12 | height: $bodyHeight; 13 | border-radius: 100px 100px 0px 0px; 14 | background: $body; 15 | position: relative; 16 | display: inline-block; 17 | } 18 | 19 | body { 20 | background: $background; 21 | font-family: 'Josefin Sans', sans-serif; 22 | font-size: 12px; 23 | } 24 | 25 | .container { 26 | position: absolute; 27 | white-space: nowrap; 28 | left: 50%; 29 | top: 50%; 30 | transform: translate(-50%, -50%); 31 | } 32 | ul { 33 | margin: 0; 34 | padding: 0; 35 | li { 36 | list-style: none; 37 | } 38 | } 39 | 40 | // Egg Yolk 41 | .egg { 42 | @include characters; 43 | animation: floating 5s ease-out infinite; 44 | left: -5%; 45 | .face { 46 | width: 130px; 47 | height: 130px; 48 | background: $yolk; 49 | position: absolute; 50 | margin: 15% 15%; 51 | border-radius: 100%; 52 | box-shadow: inset -10px 1px 0 #ffcc24; 53 | .eyes { 54 | width: 15px; 55 | height: 15px; 56 | background: #000; 57 | border-radius: 100%; 58 | position: relative; 59 | top: 55px; 60 | left: 38px; 61 | animation: blink 3s infinite 2s; 62 | &::after { 63 | content: ""; 64 | width: 15px; 65 | height: 15px; 66 | position: absolute; 67 | background: #000; 68 | border-radius: 100%; 69 | left: 50px; 70 | } 71 | } 72 | .smile { 73 | position: relative; 74 | border-bottom-left-radius: 90px; 75 | border-bottom-right-radius: 90px; 76 | width: 30px; 77 | height: 15px; 78 | background: #000; 79 | left: 55px; 80 | top: 60px; 81 | &::after { 82 | content: ""; 83 | position: absolute; 84 | width: 10px; 85 | height: 5px; 86 | background: $cheeks; 87 | border-radius: 100%; 88 | left: 10px; 89 | top: 8px; 90 | } 91 | } 92 | .cheeks { 93 | position: relative; 94 | width: 12px; 95 | height: 12px; 96 | background: $cheeks; 97 | border-radius: 100%; 98 | opacity: 0.5; 99 | top: 40px; 100 | left: 30px; 101 | &::after { 102 | content: ""; 103 | position: absolute; 104 | width: 12px; 105 | height: 12px; 106 | background: $cheeks; 107 | border-radius: 100%; 108 | left: 67px; 109 | } 110 | } 111 | .shine { 112 | position: relative; 113 | width: 8px; 114 | height: 20px; 115 | background: $body; 116 | border-radius: 200px; 117 | top: -10px; 118 | left: 12px; 119 | transform: rotate(20deg); 120 | &::after { 121 | position: absolute; 122 | content: ""; 123 | width: 8px; 124 | height: 8px; 125 | background: $body; 126 | border-radius: 200px; 127 | top: -15px; 128 | left: 6px; 129 | } 130 | } 131 | } 132 | ul { 133 | display: flex; 134 | } 135 | li { 136 | position: relative; 137 | border-radius: 200px; 138 | } 139 | li:nth-child(odd) { 140 | background: $body; 141 | } 142 | li:nth-child(even) { 143 | background: $background; 144 | } 145 | li:nth-child(1) { 146 | width: 30px; 147 | height: 60px; 148 | top: 175px; 149 | animation: anim1 1.5s ease-out infinite; 150 | } 151 | li:nth-child(2) { 152 | width: 20px; 153 | height: 50px; 154 | top: 185px; 155 | animation: anim2 3s ease-out infinite; 156 | } 157 | li:nth-child(3) { 158 | width: 28.5px; 159 | height: 60px; 160 | top: 195px; 161 | animation: anim3 1s ease-in-out infinite; 162 | } 163 | li:nth-child(4) { 164 | width: 20px; 165 | height: 50px; 166 | top: 210px; 167 | animation: anim4 2.2s ease-out infinite; 168 | } 169 | li:nth-child(5) { 170 | width: 28.5px; 171 | height: 60px; 172 | top: 190px; 173 | animation: anim3 1.5s ease-out infinite; 174 | } 175 | li:nth-child(6) { 176 | width: 20px; 177 | height: 60px; 178 | top: 200px; 179 | animation: anim2 4s ease-out infinite; 180 | } 181 | li:nth-child(7) { 182 | width: 28.5px; 183 | height: 60px; 184 | top: 190px; 185 | animation: anim1 1.5s ease-out infinite; 186 | } 187 | } 188 | 189 | // Ghost 190 | .ghost { 191 | @include characters; 192 | animation: floating 2s ease-out infinite; 193 | opacity: 0.75; 194 | left: 5%; 195 | &::before { 196 | content: ""; 197 | @include characters; 198 | position: absolute; 199 | box-shadow: inset -15px 1px 0px #efefef; 200 | } 201 | .face { 202 | width: 130px; 203 | height: 130px; 204 | background: transparent; 205 | position: absolute; 206 | margin: -20% 10%; 207 | border-radius: 100%; 208 | .eyes { 209 | opacity: 0.5; 210 | width: 15px; 211 | height: 15px; 212 | background: #000; 213 | border-radius: 100%; 214 | position: relative; 215 | top: 55px; 216 | left: 3px; 217 | animation: blink 5s infinite; 218 | &::after { 219 | content: ""; 220 | width: 15px; 221 | height: 15px; 222 | position: absolute; 223 | background: #000; 224 | border-radius: 100%; 225 | left: 50px; 226 | } 227 | } 228 | .smile { 229 | position: relative; 230 | opacity: 0.5; 231 | border-bottom-left-radius: 50px; 232 | border-bottom-right-radius: 50px; 233 | width: 10px; 234 | height: 6px; 235 | background: transparent; 236 | border: 5px solid #000; 237 | left: 25px; 238 | top: 55px; 239 | &::before { 240 | background: $body; 241 | width: 30px; 242 | height: 7px; 243 | content: ""; 244 | position: absolute; 245 | left: -10px; 246 | top: -5.5px; 247 | } 248 | } 249 | .cheeks { 250 | position: relative; 251 | width: 12px; 252 | height: 12px; 253 | background: $cheeks; 254 | border-radius: 100%; 255 | opacity: 0.5; 256 | top: 43px; 257 | left: -4px; 258 | &::after { 259 | content: ""; 260 | position: absolute; 261 | width: 12px; 262 | height: 12px; 263 | background: $cheeks; 264 | border-radius: 100%; 265 | left: 67px; 266 | } 267 | } 268 | } 269 | ul { 270 | display: flex; 271 | } 272 | li { 273 | position: relative; 274 | border-radius: 200px; 275 | height: 60px; 276 | } 277 | li:nth-child(odd) { 278 | background: $body; 279 | width: 30px; 280 | top: 172px; 281 | z-index: -1; 282 | } 283 | li:nth-child(even) { 284 | background: $background; 285 | width: 7px; 286 | top: 215px; 287 | } 288 | li:nth-child(1) { 289 | animation: ghostani 3s ease-out infinite; 290 | } 291 | li:nth-child(3) { 292 | animation: ghostani 3s ease-out infinite 0.5s; 293 | } 294 | li:nth-child(5) { 295 | animation: ghostani 3s ease-out infinite 1.0s; 296 | } 297 | li:nth-child(7) { 298 | animation: ghostani 3s ease-out infinite 1.5s; 299 | } 300 | li:nth-child(9) { 301 | box-shadow: inset -15px 4px #efefef; 302 | animation: ghostani 3s ease-out infinite 2s; 303 | } 304 | } 305 | 306 | .heart { 307 | position: absolute; 308 | display: inline-block; 309 | width: $heartSize; 310 | height: $heartSize; 311 | background: red; 312 | left: 45%; 313 | transform: rotate(45deg); 314 | animation: beat $duration linear infinite; 315 | &::before { 316 | position: absolute; 317 | content: ""; 318 | width: $heartSize; 319 | height: $heartSize; 320 | background: red; 321 | border-radius: 100%; 322 | top: -50%; 323 | animation: beat $duration linear infinite; 324 | } 325 | &::after { 326 | @extend .heart::before; 327 | top: 0%; 328 | left: -50%; 329 | } 330 | .light { 331 | width: 5px; 332 | height: 12px; 333 | background: white; 334 | position: absolute; 335 | border-radius: 200px; 336 | z-index: 3; 337 | left: -11px; 338 | top: 13px; 339 | transform: rotate(-10deg); 340 | animation: lightshift $duration linear infinite; 341 | &::after { 342 | content: ""; 343 | position: absolute; 344 | z-index: 3; 345 | width: 5px; 346 | height: 5px; 347 | background: white; 348 | border-radius: 200px; 349 | top: -5px; 350 | left: 1.5px; 351 | } 352 | } 353 | } 354 | 355 | .shadow { 356 | position: absolute; 357 | opacity: 0.2; 358 | width: 180px; 359 | height: 15px; 360 | background: #000; 361 | top: 275px; 362 | border-radius: 100%; 363 | } 364 | .shadow#egg-shadow { 365 | left: -20px; 366 | animation: shadow-ani 5s ease-out infinite; 367 | } 368 | .shadow#ghost-shadow { 369 | left: 195px; 370 | transform-origin: center; 371 | animation: shadow-ani 2s ease-out infinite; 372 | } 373 | @keyframes shadow-ani { 374 | 50% { 375 | width: 170px; 376 | height: 10px; 377 | } 378 | } 379 | @keyframes blink { 380 | 0%{ 381 | transform:scaleY(1) 382 | } 383 | 18%{ 384 | transform:scaleY(1) 385 | } 386 | 20%{ 387 | transform:scaleY(0) 388 | } 389 | 25%{ 390 | transform:scaleY(1) 391 | } 392 | 38%{ 393 | transform:scaleY(1) 394 | } 395 | 40%{ 396 | transform:scaleY(0) 397 | } 398 | 45%{ 399 | transform:scaleY(1) 400 | } 401 | 80% { 402 | transform:scaleY(1) 403 | } 404 | } 405 | @keyframes beat { 406 | 20%, 407 | 40% { 408 | height: $heartSize + 10; 409 | width: $heartSize + 10; 410 | } 411 | } 412 | @keyframes lightshift { 413 | 20%, 414 | 40% { 415 | left: -15px; 416 | } 417 | } 418 | @keyframes floating { 419 | 0% { 420 | top: 0; 421 | } 422 | 50% { 423 | top: -10px; 424 | } 425 | 100% { 426 | top: 0; 427 | } 428 | } 429 | 430 | @keyframes anim1 { 431 | 50% { 432 | top: 180px; 433 | } 434 | } 435 | 436 | @keyframes anim2 { 437 | 50% { 438 | top: 178px; 439 | } 440 | } 441 | 442 | @keyframes anim3 { 443 | 50% { 444 | top: 205px; 445 | } 446 | } 447 | 448 | @keyframes anim4 { 449 | 50% { 450 | top: 205px; 451 | } 452 | } 453 | 454 | @keyframes ghostani { 455 | 50% { 456 | top: 180px; 457 | } 458 | } -------------------------------------------------------------------------------- /day-13-14-super/src/style.scss: -------------------------------------------------------------------------------- 1 | $background: #fffaf0; 2 | $container-background: lighten(#c7166f, 5%); 3 | 4 | // trail animation vars 5 | $trail-color: lighten(#f89714, 10%); 6 | $trail-shine: lighten($trail-color, 20%); 7 | $trail-offset: 30px; 8 | $trail-height: 400px; 9 | $trail-fin: 600px; 10 | $trail-border-radius: 200px; 11 | 12 | // body vars 13 | $hair: #020916; 14 | $shirt: darken(#800064, 5%); 15 | // $shirt: darken(#6c16c7, 5%); 16 | $skin: #c74b16; 17 | $smile-height: 30; 18 | $smile-width: $smile-height * 2; 19 | $mouth: #6E171F; 20 | 21 | // animation vars 22 | $body-timing: .7s; 23 | 24 | @function randomNumber($min, $max) { 25 | $rand: random(); 26 | $randomNum: $min + floor($rand * (($max - $min) + 1)); 27 | @return $randomNum; 28 | } 29 | 30 | body { 31 | background: $background; 32 | } 33 | 34 | .trails { 35 | display: flex; 36 | justify-content: space-between; 37 | width: 90%; 38 | left: 0; 39 | position: absolute; 40 | li { 41 | background-color: $trail-color; 42 | list-style: none; 43 | position: relative; 44 | border-radius: $trail-border-radius; 45 | height: $trail-height; 46 | &:nth-child(1) { 47 | animation: flightTrail .22s linear infinite; 48 | width: 50px; 49 | &:after { 50 | content: ''; 51 | background-color: $trail-shine; 52 | width: 15px; 53 | height: 350px; 54 | position: absolute; 55 | left: 15%; 56 | top: 5%; 57 | border-radius: $trail-border-radius; 58 | } 59 | } 60 | &:nth-child(2) { 61 | animation: flightTrail .28s .1s linear infinite; 62 | width: 75px; 63 | &:after { 64 | content: ''; 65 | background-color: $trail-shine; 66 | width: 20px; 67 | height: 350px; 68 | position: absolute; 69 | left: 15%; 70 | top: 5%; 71 | border-radius: $trail-border-radius; 72 | } 73 | } 74 | &:nth-child(3) { 75 | animation: flightTrail .18s .03s linear infinite; 76 | width: 15px; 77 | } 78 | &:nth-child(4) { 79 | animation: flightTrail .25s .01s linear infinite; 80 | width: 65px; 81 | &:after { 82 | content: ''; 83 | background-color: $trail-shine; 84 | width: 20px; 85 | height: 350px; 86 | position: absolute; 87 | left: 15%; 88 | top: 5%; 89 | border-radius: $trail-border-radius; 90 | } 91 | } 92 | &:nth-child(5) { 93 | animation: flightTrail .4s .01s linear infinite; 94 | width: 40px; 95 | &:after { 96 | background-color: $trail-shine; 97 | border-radius: $trail-border-radius; 98 | content: ''; 99 | height: 350px; 100 | left: 15%; 101 | position: absolute; 102 | top: 5%; 103 | width: 20px; 104 | } 105 | } 106 | } 107 | } 108 | 109 | .container { 110 | background: $container-background; 111 | border-radius: 100%; 112 | height: 500px; 113 | left: 50%; 114 | overflow: hidden; 115 | position: absolute; 116 | top: 50%; 117 | transform: translate(-50%, -50%) scale(.85); 118 | width: 500px; 119 | } 120 | 121 | .super-girl { 122 | animation: easeUpBody $body-timing ease-in-out alternate infinite; 123 | height: 400px; 124 | left: calc(50% - 100px); 125 | position: absolute; 126 | top: calc(50% - 150px); 127 | width: 200px; 128 | } 129 | 130 | .head { 131 | animation: easeUpHead $body-timing ease-in-out alternate infinite; 132 | background-color: lighten($skin, 5%); 133 | border-radius: 100px; 134 | box-shadow: inset -5px -10px darken($skin, 5%); 135 | height: 210px; 136 | left: calc(50% - 80px); 137 | position: absolute; 138 | width: 160px; 139 | z-index: 4; 140 | 141 | .face { 142 | height: 150px; 143 | left: calc(50% - 75px); 144 | position: absolute; 145 | top: calc(50% - 75px); 146 | width: 150px; 147 | 148 | .eyes { 149 | animation: easeUpFace $body-timing ease-in-out alternate infinite; 150 | display: flex; 151 | justify-content: space-between; 152 | left: 6%; 153 | position: absolute; 154 | top: 60px; 155 | &::before, 156 | &::after { 157 | border-radius: 200px; 158 | box-shadow: inset 0px 10px $hair; 159 | content: ''; 160 | height: 45px; 161 | margin: 0 10px; 162 | width: 45px; 163 | } 164 | } 165 | 166 | .smile { 167 | background-color: $background; 168 | border-bottom-left-radius: 50px; 169 | border-bottom-right-radius: 50px; 170 | height: $smile-height + px; 171 | left: calc(50% - 30px); 172 | overflow: hidden; 173 | position: absolute; 174 | top: 80%; 175 | width: $smile-width + px; 176 | } 177 | } 178 | } 179 | 180 | .hair { 181 | background-color: $hair; 182 | border-radius: 100%; 183 | box-shadow: inset 15px 0px lighten($hair, 15%); 184 | height: 220px; 185 | left: calc(50% - 110px); 186 | position: absolute; 187 | top: -12%; 188 | width: 220px; 189 | 190 | &::after { 191 | animation: easeUpHair $body-timing ease-in-out alternate infinite; 192 | background-color: $hair; 193 | border-radius: 0px 300px 0px 300px; 194 | content: ''; 195 | height: 110px; 196 | left: 63px; 197 | position: absolute; 198 | top: 25px; 199 | transform: rotate(-5deg); 200 | width: 130px; 201 | z-index: 5; 202 | } 203 | } 204 | 205 | .neck { 206 | background-color: $skin; 207 | border-bottom-left-radius: 100%; 208 | border-bottom-right-radius: 100%; 209 | height: 70px; 210 | left: calc(50% - 30px); 211 | position: absolute; 212 | top: 45%; 213 | width: 60px; 214 | z-index: 4; 215 | 216 | &::after { 217 | background-color: darken($skin, 7%); 218 | border-bottom-left-radius: 100%; 219 | border-bottom-right-radius: 100%; 220 | content: ''; 221 | height: 40px; 222 | position: absolute; 223 | width: 100%; 224 | } 225 | } 226 | 227 | .body { 228 | background-color: $shirt; 229 | border-top-left-radius: 200px; 230 | border-top-right-radius: 200px; 231 | height: 300px; 232 | left: calc(50% - 80px); 233 | position: absolute; 234 | top: 50%; 235 | width: 160px; 236 | } 237 | 238 | .ponytail { 239 | background-color: $hair; 240 | border-radius: 200px; 241 | box-shadow: inset 15px 0px lighten($hair, 20%); 242 | height: 200px; 243 | left: -20px; 244 | position: absolute; 245 | top: 30%; 246 | width: 120px; 247 | 248 | &:after { 249 | background: $hair; 250 | border-radius: 0 0 400px 400px; 251 | box-shadow: inset 15px 0px lighten($hair, 20%); 252 | content: ''; 253 | height: 100px; 254 | left: -34%; 255 | position: absolute; 256 | width: 160px; 257 | top: 60%; 258 | } 259 | } 260 | 261 | .arm-left { 262 | animation: rotateLeft $body-timing ease-in-out alternate infinite; 263 | background-color: $shirt; 264 | border-top-left-radius: 200px; 265 | border-bottom-left-radius: 200px; 266 | height: 60px; 267 | left: 10%; 268 | position: absolute; 269 | top: 70%; 270 | transform: rotate(35deg); 271 | transform-origin: 80% 15%; 272 | width: 200px; 273 | z-index: 2; 274 | 275 | .hand { 276 | background-color: lighten($skin, 5%); 277 | border-top-left-radius: 200px; 278 | border-bottom-left-radius: 200px; 279 | height: 60px; 280 | width: 60px; 281 | } 282 | } 283 | 284 | .arm-right { 285 | animation: rotateRight $body-timing ease-in-out alternate infinite; 286 | background-color: $shirt; 287 | border-top-left-radius: 200px; 288 | border-bottom-left-radius: 200px; 289 | height: 60px; 290 | left: 33%; 291 | position: absolute; 292 | top: 75%; 293 | transform: rotate(145deg); 294 | transform-origin: 80% 15%; 295 | width: 200px; 296 | 297 | .hand { 298 | background-color: lighten($skin, 5%); 299 | border-top-left-radius: 200px; 300 | border-bottom-left-radius: 200px; 301 | height: 60px; 302 | width: 50px; 303 | } 304 | } 305 | 306 | .fingers { 307 | // display: flex; 308 | // flex-direction: column; 309 | left: -23%; 310 | list-style: none; 311 | position: absolute; 312 | top: -38%; 313 | // top: %; 314 | li { 315 | background-color: lighten($skin, 4%); 316 | box-shadow: inset -4px 4px darken($skin, 10%); 317 | position: relative; 318 | border-radius: $trail-border-radius; 319 | margin: auto -1%; 320 | height: 19px; 321 | width: 45px; 322 | &:nth-child(1), 323 | &:nth-child(4) { 324 | left: 20%; 325 | } 326 | } 327 | } 328 | .thumb { 329 | background-color: darken($skin, 5%); 330 | border-radius: 100%; 331 | height: 25px; 332 | left: 12%; 333 | position: absolute; 334 | top: -5%; 335 | width: 25px; 336 | 337 | &::after { 338 | background-color: $skin; 339 | border-radius: $trail-border-radius; 340 | box-shadow: inset -4px 4px darken($skin, 10%); 341 | content: ''; 342 | height: 35px; 343 | position: absolute; 344 | width: 18px; 345 | } 346 | } 347 | @keyframes flightTrail { 348 | 0% { 349 | transform: translate(0, -$trail-height); 350 | } 351 | 100% { 352 | transform: translate(0, $trail-fin); 353 | } 354 | } 355 | 356 | @keyframes rotateLeft { 357 | from { 358 | transform: rotate(35deg); 359 | } 360 | to { 361 | transform: rotate(50deg); 362 | } 363 | } 364 | 365 | @keyframes rotateRight { 366 | from { 367 | transform: rotate(145deg); 368 | } 369 | to { 370 | transform: rotate(125deg); 371 | } 372 | } 373 | 374 | @keyframes easeUpBody { 375 | from { 376 | transform: translateY(2%); 377 | } 378 | to { 379 | transform: translateY(5%); 380 | } 381 | } 382 | 383 | 384 | @keyframes easeUpHead { 385 | from { 386 | transform: translateY(0%); 387 | } 388 | to { 389 | transform: translateY(1.5%); 390 | } 391 | } 392 | 393 | @keyframes easeUpHair { 394 | from { 395 | transform: translateY(0%); 396 | } 397 | to { 398 | transform: translateY(1.5%); 399 | } 400 | } 401 | 402 | @keyframes easeUpFace { 403 | from { 404 | transform: translateY(0%); 405 | } 406 | to { 407 | transform: scaleY(.9); 408 | } 409 | } --------------------------------------------------------------------------------