-
Notifications
You must be signed in to change notification settings - Fork 0
/
README.html
21 lines (20 loc) · 1.83 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//codepen.io/CodePenTemplates/pen/GNoNGy.css" />
<link rel="stylesheet" href="//codepen.io/CodePenTemplates/pen/XNXpgM.css" />
</head>
<body>
<section class="markdown-body">
<h1 id="my-topic-google-doodle">My Topic Google Doodle</h1>
<p>Halloween is my favorite holiday and I wanted to create a Doodle that showed a variety of movements while resembling a spooky aesthetic. I wanted the candles to look as if they were floating, so I adjusted them on the X axis at a slower duration. I wanted to create an uneasy feel, so I made the letters look as if they were shivering by adjusting them on the X axis and speeding up duration. It was fun bringing the Jack-O-Lantern to life by adjusting the opacity and animatng it to look like it was emerging from the letter G. Using rotation to spring the bone icon added another variety of movement which is what I was going for. It was fun to use CSS transitions I learned in my last projects and take them a step further with JS. </p>
<h2 id="collage">Collage</h2>
<p><a href="https://www.figma.com/files/project/51982717/Google-Doodle?fuid=890663858594507579">https://www.figma.com/files/project/51982717/Google-Doodle?fuid=890663858594507579</a></p>
<h2 id="resources">Resources</h2>
<p>HALLOWEEN ICON SOURCE FROM ONABITZ: "<a href="https://www.figma.com/community/file/1028228566569551559"">https://www.figma.com/community/file/1028228566569551559"</a></p>
<p>HALLOWEEN BLACK FONT FROM NJ STUDIO: "<a href="https://www.fontspace.com/halloween-black-font-f51028"">https://www.fontspace.com/halloween-black-font-f51028"</a>
"halloween black Personal Use is licensed as Freeware, Non-Commercial, which means it is free for personal use only."</p>
</section>
</body>
</html>