W3c course week 2

week 2

by schrodingers

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>
    <div class="content">
        <video id="W3DevCampusVideo" autoplay controls>
            <source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" type="video/webm"/>
                <source src="http://html5doctor.com/demos/video-canvas-magic/video.ogg" type="video/ogg"/>
                    <source src="http://html5doctor.com/demos/video-canvas-magic/video.mp4" type="video/mp4"/>
        </video>
    </div>
</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;

}

.content {
    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;
}

video {
    
}

audio {
    
}
    #W3DevCampusVideo {
        width: 300px;
        transition: all 0.5s ease-in-out;
    }
 
    #W3DevCampusVideo:hover {
        width:400px;
        transform:rotate(-5deg);
    }