{"id":125,"date":"2024-10-30T19:30:25","date_gmt":"2024-10-31T03:30:25","guid":{"rendered":"https:\/\/dulce.matmcc.org\/creative-journal\/?p=125"},"modified":"2024-12-11T19:07:04","modified_gmt":"2024-12-12T03:07:04","slug":"gotv","status":"publish","type":"post","link":"https:\/\/dulce.matmcc.org\/creative-journal\/gotv\/","title":{"rendered":"GOTV"},"content":{"rendered":"\n
\n

Design Work<\/h2>\n\n\n\n

I started by drawing on a drawing app I have on my phone:<\/p>\n\n\n\n

\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n

Then I built those designs in Figma as well as chose fonts. <\/p>\n\n\n\n

\n

Idea 1<\/h3>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

My idea was to use only an image of a flag or find a video of a flag and have it be animated within the text. <\/p>\n<\/div>\n\n\n\n

\n

Idea 2<\/h3>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n\n
\n

Idea 3<\/h3>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n
\n

Coding<\/h2>\n\n\n\n

I chose to code a new version of Idea 2 Version 2 where “America is the LAND of the FREE, so let’s prove it” appears in the middle and four “Vote”s in the corner fade in and out of visibility as the background changed colors. <\/p>\n\n\n\n

I worked inside Code Pen for this assignment. <\/p>\n\n\n\n

I believed that to apply the animation I had to create a div to apply the CSS. However, the div, of course, took up space so it would push the 4 “Vote”s down. Once, I figured out how to have the “Votes” on top of the div, I realized that the div was 0 height x 0 width, so I couldn’t apply the CSS for the animation. <\/p>\n\n\n\n

That was when I remembered the body existed and I could apply the animation to the body element. Once the animation was working, I created classes and ID’s to change the colors. Then, I added an extra opacity animation on the votes for extra practice with CSS Animation. <\/p>\n\n\n\n

Here is the finished product: GOTV<\/a><\/p>\n<\/div>\n\n\n\n

\n","protected":false},"excerpt":{"rendered":"

This post includes images of my progress as of 10\/30\/24 for the Get Out The Vote Challenge.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[18,19,10,14,16,17,15],"class_list":["post-125","post","type-post","status-publish","format-standard","hentry","category-class-work","tag-america","tag-coding","tag-design","tag-election","tag-election-day","tag-figma","tag-united-states"],"_links":{"self":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":12,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":498,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/posts\/125\/revisions\/498"}],"wp:attachment":[{"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dulce.matmcc.org\/creative-journal\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}