Code this Google MLK Animation

image

The Google homepage is known for its adorable holiday-themed animations. With Martin Luther King day coming up this Monday, we wanted to teach you how to code the famed Google MLK animation.

1. Create an index.html document.

2. Insert this script:

<html lang=en>
<head>
<title>Google</title>
</head>
<header>
<a href=”https://mail.google.com/mail/u/0/?tab=wm” target=”_blank”> Gmail</a> <!– link to Gmail –>
<a href=”https://www.google.com/imghp?hl=en&tab=wi&authuser=0&ei=xy9vWKCrKcTk0gLtpbfIAQ&ved=0EKouCBcoAQ” target=”_blank”> Images </a> <!– Link to Google Images –>

<a href=”https://www.google.com/intl/en/about/products/” target=”_blank”><img src=”http://www.englewoodschools.net/cms/lib8/CO01900647/Centricity/Domain/1009/GoogleAppsIcon.png” width=”30″ height=”30″></a> <!– Google Apps Grid Icon –>
<a href=”https://plus.google.com/u/0/notifications/all” target=”_blank”><img src=”https://cdn3.iconfinder.com/data/icons/glypho-phones-and-communication/64/bell-circle-512.png” width=”30 height=”30″></a>
<a href=”https://plus.google.com/u/0/+JoeMightyWarren” target=”_blank”><img class=”my-photo” src=”https://lh3.googleusercontent.com/8qY-UqcKzQtY4OQHZdtugR7nFwdSCbd_eDvcFpAx9l-Q0gYCkpR-S7mmHLLF3iSgOQTLhzoy2fFoWg=w1280-h800-rw-no” width=”30″ height=”30″> </a>

<div class=”profile”>

</div>
</header>
<body>
<p class=”center”>
<a href=”https://www.google.com/#q=Martin+Luther+King+Jr.+Day&oi=ddle&hl=en” target=”_blank”><img src=”https://www.google.com/logos/doodles/2017/martin-luther-king-jr-day-2017-5634777509003264-hp.jpg”></a> <!– Link to the Google logo–>
<br> <!– Page break–>
<br> <!– Page break–>

<input id=”mysearch” name=”searchitem” type=”search” i title=”Search” autofocus /> <!–Search bar with autofocus to make cursor auto flash in text box. i title makes ‘Searh’ appear when hovering mouse over search bar–>

<br> <!–Page break–>
<br> <!–Page break–>

<button type=”button” style=”height:30px; width:120px”>Google Search</button>
<button type=”button” style=”height:30px; width:120px”>I’m Feeling Lucky</button>
</p>
</body>
<class id=”footer”>
<a href=”httpss://www.google.com/intl/en/ads/?fg=1″>Advertising</a>
<a href=”https://www.google.com/services/?fg=1#?”>Business</a>
<a href=”https://www.google.com/intl/en/about/”>About</a>
</class>
</html>

3. Create a style.css document.

4. Insert the style script by toggling onto the CSS tab in the above pen.

5. Create a script.js file.

6. Paste the JavaScript in the JS tab into the script.js file.

7. Done!

Enjoyed this post? Read more from our Blog.