<!--
Step 3: CSS
Round 2: Group Style

a. Style the individual elements according to their layout with other elements.

• Elements that must be centered vertically
• Elements that must be under another element

Limit the CSS declarations to the following:
• display: block, inline-block, inline
• text-align
• vertical-align

b. Style the group's visual design. For example, the gray background of the footer navigation. Again, limit the CSS properties to the following:

• padding
• margin
• width
• height
• background-color
• color
-->

<!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="internationalization">
                <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>
/* Step 3.1 - CSS */

/* Google Apps */

.google-apps a {
    color: black;
}

.google-apps img {
    width: 24px;
}

/* Account */

.account button {
    padding: 8px 12px;
    background-color: blue;
    color: white;
}

/* Search Form */

.search-form input {
    padding: 12px;
}

.search-form img {
    width: 24px;
}

.search-form button {
    padding: 12px 16px;
    background-color: lightgray;
    color: black;
}

/* Internationalization */

.internationalization a {
    color: blue;
}

.navigation a {
    color: black;
}

/* Step 3.2 - CSS */

/* Header */

.google-apps,
.account {
    display: inline-block;
    vertical-align: middle;
}

/* Google Apps */

.google-apps img {    
    margin: 0 16px;
}

.google-apps a {
    padding: 4px;
}

.google-apps a,
.google-apps img {
    display: inline-block;
    vertical-align: middle;
}

/* Main */

main {
    text-align: center;
}

.website-name {
    margin: 32px 0;
}

/* Search Form */

.search-form {
    margin: 32px 0;
}

.search-form input,
.search-form img {
    display: inline-block;
    vertical-align: middle;
}

/* Internationalization*/

.internationalization {
    margin: 32px 0;
}

/* Footer */

footer .navigation {
    padding: 16px;
    background-color: lightgray;
}

footer .navigation a {
    margin: 16px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.