CP_menu_orig

by bryiantan

HTML

<DOCTYPE html>
    <head>
        <title> GWS News</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
    </head>
    
    <body>
        <header>
            <div class="container">
            <div class="title">
              <h1> Grass World Sport News</h1>
            </div>
                <div class="menu">
                 <ul>
                    <li><a href="#">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>
            <div class="banner">
                <img class="banner-image" src=img/banner1.jpeg>
            </div>
        </header>
    </body>

CSS

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

div.container{
    max-width: 1200px;
    margin: 0;
    padding: 0 30px;
	
}

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

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

header .title {
  max-width:20%;
}
header .menu {
  max-width:80%;
}
header ul{
    list-style-type: none;
    padding: 0;
    margin: 22px 0 0 0;
    
    
}

header ul li{
    display: inline-block;
    text-decoration: underline;
}

header li a:hover{
    color: #D3D3D3
}

header ul li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px;
    display: block;
}

.banner-image {
    width: 100%;
    
}