css layout

by Richard Hunter

HTML

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<div class="viewport">
    <header>
        <div class="header-container">
             <h1>My Website</h1>

        </div>
    </header>
    <div class="container">
        <article>
             <h2>inner heading</h2>

            <p>this is my container this is my containerthis is my containerthis is my containerthis is my containerthis is my containerthis is my containerthis is my container</p>
            <p>this is my container</p>
            <p>this is my container this is my containerthis is my containerthis is my containerthis is my containerthis is my containerthis is my containerthis is my container</p>
        </article>
        <footer>this is the footer</footer>
    </div>
</div>

SCSS

*, *:before, *:after {
    box-sizing : border-box;
}
.viewport {
    width : 50%;
    border : solid 1px black;
    height : 200px;
    margin : 20px;
    overflow-y : auto;
}
header {
    background : maroon;
    .header-container {
        padding : 6px;
        background : cornflowerblue;
        h1 {
            font-size : 12px;
            font-family : arial;
        }
        width : 300px;
        margin : auto;
    }
}
.container {
    width : 300px;
    margin : auto;
}
article {
    h2 {
        font-size : 10px;
        font-family : arial;
        margin : 5px 0;
    }
    width : 300px;
    background : pink;
    margin : auto;
    padding : 10px;
    p {
        font-family : arial;
        font-size : 8px;
        margin-bottom : 4px;
        line-height : 1.5;
    }
}
footer {
    font-size : 5px;
    font-family : arial;
    color : grey;
    padding : 5px;
    background : lighten(black, 20%);
}