Humber Journalism

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Journalism for the Web</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <h1>Skedline</h1>
        <h2>My goodness this is an <span>awesome</span> site.</h2>

        <p><strong>Make this bold.</strong> Ut magna turpis arcu, et platea, et rhoncus cum augue, in penatibus hac enim. Nisi in turpis, sagittis turpis sagittis, in dis, placerat vel cum et, magnis sit turpis, scelerisque, turpis cursus proin odio, nisi, integer lectus pulvinar. Placerat scelerisque placerat! Porta scelerisque arcu nisi magna, sociis aliquet cras et.</p>
        <p><em>Make this italic.</em> Scelerisque dignissim non dapibus adipiscing mid duis? Proin vut! Magnis! Tempor. Amet? Nisi, ultrices magnis mauris lorem, vut vel, proin porta placerat et auctor? Lacus. Elit pellentesque pellentesque augue turpis. Nisi? Magna integer! Ridiculus facilisis ultrices platea duis arcu, etiam ut lundium tincidunt, duis aliquam odio aenean enim vel mauris sed eros scelerisque sagittis arcu.</p>

        <h2>These are my <span>favourite</span> things about Skedline.</h2>

        <ul>
            <li>This is the first thing.</li>
            <li>This is the second thing.</li>
            <li>The third thing has a few parts.
                <ol>
                    <li>The first part.</li>
                    <li><a href="http://cnn.com">The second part is a link.</a></li>
                    <li>The third part.</li>
                </ol>
            </li>
        </ul>

        <h3>Link the image below and give it a border.</h3>
        <a href="http://cnn.com">
            <img alt="Placeholder Image" src="http://placehold.it/350x150" />
        </a>

        <div id="feature">
            <h3>This div has an id of "feature". Give each paragraph a class.</h3>
            <p>Make the links in this section orange and the text of the second paragraph yellow. Remove text-decoration on the links, but add it when you hover over them.</p>
            <p>Scelerisque dolor cursus in lorem penatibus magna natoque tempor odio, odio augue! Nisi! Dolor integer in platea, pellentesque porttitor duis enim lundium nunc porta <a href="http://cnn.com">lundium a mid enim diam</a>, turpis, integer sed, montes? In? Sit sociis. Lectus, habitasse elit, cras, in, integer porttitor elit. Enim ac porttitor duis, sed nisi in non! Velit turpis. Nec ac lorem sit a nec.</p>
            <p>Habitasse purus mid nunc tempor, purus odio vut nunc integer placerat. Cum etiam lundium natoque dignissim etiam purus mauris parturient sociis tincidunt, nunc? Mus augue velit sit augue ridiculus, ut amet auctor quis urna ultricies augue scelerisque! Et! Vel rhoncus mauris, tristique montes nisi elementum quis pulvinar, montes eros, nec integer? Placerat elementum in tincidunt cum sit amet amet.</p>
            <p>Rhoncus sit urna et risus pulvinar ac diam dictumst, a lorem! Elementum nascetur nisi. Ultricies vel massa nec mauris turpis ac nec? Urna diam magna a parturient nec non in cras montes porta <a href="http://cnn.com">placerat porttitor</a> turpis et, scelerisque scelerisque. Ultricies augue, urna mauris magna! Facilisis montes integer? Pellentesque pulvinar lorem eu eros sit elementum vut elit cum aliquet amet.</p>
        </div>

        <div id="header">
            <h2>This is the header. Make its background #efefef, its height 100px and its text centered. Give it some padding and margin too.</h2>
        </div>
        <div class="left">
            <h3>This is the left div.</h3>
            <p>Habitasse purus mid nunc tempor, purus odio vut nunc integer placerat. Cum etiam lundium natoque dignissim etiam purus mauris parturient sociis tincidunt, nunc? Mus augue velit sit augue ridiculus, ut amet auctor quis urna ultricies augue scelerisque! Et! Vel rhoncus mauris, tristique montes nisi elementum quis pulvinar, montes eros, nec integer? Placerat elementum in tincidunt cum sit amet amet.</p>
        </div>
        <div class="right">
            <h3>This is the right div.</h3>
            <p>Habitasse purus mid nunc tempor, purus odio vut nunc integer placerat. Cum etiam lundium natoque dignissim etiam purus mauris parturient sociis tincidunt, nunc? Mus augue velit sit augue ridiculus, ut amet auctor quis urna ultricies augue scelerisque! Et! Vel rhoncus mauris, tristique montes nisi elementum quis pulvinar, montes eros, nec integer? Placerat elementum in tincidunt cum sit amet amet.</p>
        </div>
        <div id="footer">
            <h3>This is the footer. It has a list of links.</h3>
            <ul>
                <li><a href="#">Link One.</a></li>
                <li><a href="#">Link Two.</a></li>
                <li><a href="#">Link Three.</a></li>
            </ul>
        </div>





html {
    background-color: #eeeeee;
}

body {
    margin: 0 auto;
    padding: 2em;
    max-width: 800px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #333333;
    background-color: #ffffff;
}

img {
    border: 4px solid blue;
}

#feature {
    padding: 20px;
    margin:30px 0;
    color:#fff;
    background-color:grey;
}

#feature a {
    color:orange;
    text-decoration:none;
}

#feature a:hover {
    text-decoration:underline;
}

#feature p:nth-child(4) {
    color:yellow;
}

h2 span {
    color:red;
}

#header {
    background-color:#efefef;
    text-align:center;
    height:100px;
    padding:30px;
    margin:20px 0;
}

.left, .right {
    float:left;
    width:46%;
    padding:2%;
}

.right {
    float:right;
}

#footer ul {
    margin:0;
    padding:0;
    list-style:none;
}

#footer li {
    display:inline;
    margin-left:0;
    margin-right:5px;
    background:yellow;
    padding:5px 20px;

}