W3c course week 1

week 1.

HTML

<main>
    <header>
        <svg id="logo-html5" viewBox="0 0 24 24">
            <path d="M13.1 3.5l.7 1.1.7-1.1v1.5h1v-3h-1l-.7 1.1-.6-1.1h-1.1v3h1zM18.4 5v-1h-1.4v-2h-1v3zM9.8 5h1v-2h.9v-1h-2.8v1h.9zM6.6 4h.9v1h1v-3h-1v1h-.9v-1h-1v3h1zM5 6l1.2 14.4 5.8 1.6 5.8-1.6 1.2-14.4h-14zm11.3 4.6h-6.8l.2 1.8h6.3999999999999995l-.5 5.5-3.6 1-3.6-1-.3-2.9h1.8l.1 1.5 2 .5 2-.5.2-2.3h-6.2l-.5-5.3h9l-.2 1.7z" />
        </svg>
         <h1>W3C course</h1>

    </header>

    <section>
            <sidebar>
        <nav>
             <h3>
            Table of contents
            </h3>

            <ul>
                <li><a href="#week1">Week</a>

                </li>
                <li><a htrf="#week2">Week</a>

                </li>
                <li><a href="#week3">Week</a>

                </li>
                <li><a htrf="#week4">Week</a>

                </li>
            </ul>
        </nav>
    </sidebar>
        <article>
            <date datetime="2015-06-12">12 июня 2015 г.</date>
             <h2>Week2. Html5 multimedia</h2>

            <p>Html-5 is awesome.</p>
        </article>
    </section>
    <input name="list.subList[0].applicant.emailAdvertise" onclick="javascript:setEmailAdvertise(this.name);" type="checkbox" value="on"/>
</main>

SCSS

* {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    margin: 0;
    padding: 0;
    background: #222;
}
main {
    display: flex;
    flex-flow: column nowrap;
}

header {
    width: 100vw;
    height: 20vh;
    background-color: hsl(205, 80%, 50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 1rem;
}

#logo-html5 {
    width: 5rem;
    height: 5rem;
    fill: #fff;
}

h1 {
    color: white;
    font: 2.5rem/1.5 'Roboto', sans-serif;
    text-transform: uppercase;

}

section {
    font: 1.6rem/1.5 sans-serif;
    color: #fff;
    margin: 0 0 1rem 0;
    padding: 1.5rem 1.5rem 2rem 1rem;
    display: flex;
    justify-content: space-between;
}

sidebar {
    
    text-justify: center;
}

article {
 
}

date {
    font: 1rem/1.5 sans-serif;
}

JavaScript

function setEmailAdvertise( var name )
{
	alert( name );
}