<!--
Step 2: HTML
Round 3: Individual Markup
a. Markup the individual elements in their respective HTML markups
Legend
[Link] <a href="#"></a>
[Image] <img src="#" />
[Button] <button></button>
[Input] <input type="text" />
[Label] <label></label>
b. Provide the values for the src attributes of <img> elements
In the applied example below, we used SVG data URLs instead of absolute URLs of the images—it will work either way.
-->
<!doctype html>
<html>
<head>
<title>Google</title>
</head>
<body>
<header>
<div class="google-apps">
<a href="#">Gmail</a>
<a href="#">Image</a>
<img src="data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Emenu%3C/title%3E%3Cpath d='M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z'%3E%3C/path%3E%3C/svg%3E" alt="Grid" />
</div>
<div class="account">
<button>Sign In</button>
</div>
</header>
<main>
<div class="website-name">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='272' height='92'%3E%3Cpath fill='%23EA4335' d='M115.8 47.2c0 12.7-10 22.2-22.3 22.2s-22.3-9.5-22.3-22.2c0-12.9 10-22.2 22.3-22.2s22.3 9.3 22.3 22.2zm-9.8 0c0-8-5.8-13.5-12.5-13.5S81 39.2 81 47.2c0 7.9 5.8 13.4 12.5 13.4S106 55.1 106 47.2z'/%3E%3Cpath fill='%23FBBC05' d='M163.8 47.2c0 12.7-10 22.2-22.3 22.2s-22.3-9.5-22.3-22.2c0-12.9 10-22.2 22.3-22.2s22.3 9.3 22.3 22.2zm-9.8 0c0-8-5.8-13.5-12.5-13.5S129 39.2 129 47.2c0 7.9 5.8 13.4 12.5 13.4S154 55.1 154 47.2z'/%3E%3Cpath fill='%234285F4' d='M209.8 26.3v39.9c0 16.3-9.7 23-21.1 23a21.1 21.1 0 0 1-19.7-13l8.5-3.6c1.5 3.6 5.2 7.9 11.2 7.9 7.3 0 11.8-4.5 11.8-13v-3.2h-.3c-2.2 2.7-6.4 5-11.7 5a22 22 0 0 1-21.3-22A22 22 0 0 1 188.5 25c5.3 0 9.5 2.4 11.7 5h.3v-3.6h9.3zm-8.6 21c0-7.8-5.2-13.6-11.8-13.6-6.8 0-12.4 5.8-12.4 13.6 0 7.7 5.6 13.3 12.3 13.3 6.7 0 11.9-5.6 11.9-13.3z'/%3E%3Cpath fill='%2334A853' d='M225 3v65h-9.5V3h9.5z'/%3E%3Cpath fill='%23EA4335' d='M262 54.5l7.6 5a22 22 0 0 1-18.5 9.8c-12.6 0-22-9.7-22-22.1C229 34 238.6 25 250 25c11.4 0 17 9 19 14l1 2.5L240.4 54a11 11 0 0 0 10.7 6.7c5 0 8.4-2.4 11-6.1zm-23.3-8l19.9-8.2c-1.1-2.8-4.4-4.7-8.3-4.7-5 0-11.8 4.3-11.6 12.9z'/%3E%3Cpath fill='%234285F4' d='M35.3 41.4V32H67c.3 1.6.5 3.6.5 5.7 0 7-2 15.8-8.2 22-6 6.3-13.8 9.6-24 9.6A35 35 0 0 1 .3 35 35 35 0 0 1 35.4.5c10.5 0 18 4 23.6 9.5l-6.6 6.6a24.7 24.7 0 0 0-41.7 18.3c0 13.9 10.8 25 24.7 25A23 23 0 0 0 52.7 53a19 19 0 0 0 5-11.6H35.4z'/%3E%3C/svg%3E" alt="Google" />
</div>
<div class="search-form">
<input type="text" />
<img src="data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3Emic%3C/title%3E%3Cpath d='M15 22c2.761 0 5-2.239 5-5v-12c0-2.761-2.239-5-5-5s-5 2.239-5 5v12c0 2.761 2.239 5 5 5zM22 14v3c0 3.866-3.134 7-7 7s-7-3.134-7-7v-3h-2v3c0 4.632 3.5 8.447 8 8.944v4.056h-4v2h10v-2h-4v-4.056c4.5-0.497 8-4.312 8-8.944v-3h-2z'%3E%3C/path%3E%3C/svg%3E%0A" alt="Voice Search" />
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
<div class="internationaliztion">
<label>Google offered in:</label>
<a href="#">Filipino</a>
<a href="#">Cebuano</a>
<label>Philippines</label>
</div>
</main>
<footer>
<div class="navigation">
<a href="#">Advertising</a>
<a href="#">Business</a>
<a href="#">About</a>
<a href="#">How Search works</a>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Settings</a>
</div>
</footer>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.