Code this Google MLK Animation

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.
Recommended Posts

How to Select the Right Web Designer for Your Business?
October 4, 2021

6 Tips to Speed Up Your Website
September 8, 2021

The Trials And Tribulations Of Hiring A Website Developer
August 22, 2021