Untitled

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Mobile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Criando layout responsivo">
    <meta name="keywords" content="cursos online, cursos web">
    <meta name="author" content="fulano lima">

    <link rel="stylesheet" href="_css/estilo.css">
</head>
<body>

<div class="container">

    <header>
        <h1>Logo</h1>
        <nav>
            <ul>
                <li><a href="">Inicio</a></li>
                <li><a href="">Sobre nós</a></li>
                <li><a href="">Contatos</a></li>
            </ul>
        </nav>
    </header>

    <article class="banner-1">
        <div class="fundo-banner-1">
            <h1>New Lorem Ipsum</h1>
            <h2>Lorem Ipsum</h2>
        </div>
    </article>

</div>

</body>
</html>

-------------------------------------------------------------

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: #555;
}

/*CABEÇALHO*/
header, section, img, article, figure, figcaption{
    width: 100%;
    box-sizing: border-box;
}

header{
    height: 50px;
    background-color: #ccc;
}
header h1{
    font-size: 2em;
    line-height: 50px;
    margin-left: 20px;
    cursor: pointer;
    float: left;
}

/*MENU*/
nav ul{
    float: right;
}
nav ul li{
    list-style-type: none;
    float: left;
    padding: 15px;
    cursor: pointer;
}
nav ul li:hover{
    background-color: #666;
}
nav ul li:hover a{
    color: #ccc;
}
nav ul li a{
    text-decoration: none;
}
/*FIM CABEÇALHO E MENU*/

/*---------------------------------------*/

/*BANNER-1*/
.banner-1{
    background-image: url(https://static.lolwallpapers.net/2015/12/blood-moon-akali-932x620.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 400px;
}

.fundo-banner-1{
    text-align: center;
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
}

.fundo-banner-1 h1{
    color: #fff;
    font-size: 2.5em;
    padding-top: 80px;
}

.fundo-banner-1 h2{
    color: #fff;
    font-size: 2em;
    padding-top: 20px;
}