Untitled

<DOCTYPE html>
    <head>
        <title> GWS News- Home</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    </head>

<body>
    <header>
        <div class="container">
            <h1> Grass World Sport News</h1>
            <img src=img/logo.jpg class="logo">
            <ul class="nav">
                <li class="active"><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html">Home</a></li>
                <li><a href="#">World Cup</a>    </li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
        <div class="banner">
            <img class="banner-image" src=img/banner1.jpeg>
        </div>
    </header>
    <div class="body">
        <h1> Latest Sport News</h1>
    </div>
    <div class="pics">
        <img class="nrl-image" src="img/dvw.jpg">
        <p3> NRL   15/07/18</p3>
        <h2> Can St George Illawarra Dragons keep their place on top of the ladder?</h2>
        <p1> West Tigers beat St George Illawarra Dragons, 20-16. Robbie Farah stuns all of Dragons with a match-winning performance that leads to Dragons first loss at their home ground. Farah carried the tigers by running 42 metres to go with two linebreak assists, two try assist and 42 tackles in a complete performance. This win for the Tigers allow them to stay in top 8 and possibly have a chance to win the finals. The Dragons were disappointing in front of their home crowd and now faces the possibility of dropping out of the top place on the ladder, with the Panthers and Sharks right behind them. They did produce some good plays second half and closed the gap, but it proved to be not enough. </p1>
    </div>
    <div>
    <div style="clear: both;"></div>
    <div style="margin-top:20px"></div>
        <img class="world-cup" src="img/wcf.jpg"
    </div>
    <div>
    <h1> World Cup</h1>
    </div>
</body>

html,body{
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

div.container{
    margin: 0;
    padding: 0 30px;
}

header{
    background-color: #000000;
    float: left;
    width: 100%;
}

header h1{
    color: #ffffff;
    text-transform: uppercase;
    float: left;
    font-size: 50px;
}

.logo{
    margin: 10px 50px;
    height: 120px;
    float: left;
}

.nav {
    float: right;
    list-style-type: none;
    list-style: none;
    padding: 10px 100px;
    margin: 20px;
}

.nav li {
    display: inline-block;
    margin: 10px 5px;
}

ul.nav li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    margin-bottom: inherit;
    padding: 5px 10px;
    letter-spacing: 2px;
    border: 1px solid #ffffff;

}

.nav li a:hover{
    background: #fff;
    transition: .4s;
    color: #000000
}

.nav li.active a{
    border: 2px solid white;
    background: #ffffff;
    color: #000;
}

.banner-image {
    width: 100%;
}

.body{
    border: 1px solid black;
    background: #000000;
    color: #ffffff;
    font-size: 20px;
}

.nrl-image{
    float: left;
}