HTML5/CSS Lab

by horhey

HTML

<article>
    <header>
         <h1>Donec id elit non mi porta gravida at eget metus.</h1>
    </header>
    <aside id="title1">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</aside>
    <p>Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.</p>
    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p>Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <footer>Etiam porta sem malesuada magna mollis euismod</footer>
</article>

CSS

header {
    background: black;
    color: white;
    padding: 2em;
}

aside {
    float: right;
    width: 200px;
    border: 1px dashed #ccc;
    padding: 1em;
    margin: 1em 0 1em 1em;
}

p {
    text-align: justify;
}

footer {
    color: #ccc;
    border-top: 1px dashed #ccc;
    text-align: center;
    padding: 1em;
}

#title1 {
    font-family: "Droid Sans", sans-serif;
}

#title2 {
    font-family: "Sarina", cursive;
}