<pre>
<!DOCTYPE html>
<html>
<title>Site</title>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,700" rel="stylesheet">
</head>
<style>
body,ul, li, a{
margin: 0px;
padding:0px;
}
header{
background: url(img/Lorem%20ipsum.png) no-repeat center / cover;
display: flex;
justify-content: flex-end;
}
ul{
list-style: none;
}
a{
text-decoration:none;
}
*{
box-sizing:border-box;
}
img{
display:block;
max-width:100%;
}
header ul{
display: flex;
flex-wrap: wrap;
padding-bottom:17%;
}
header a{
display:inline-block;
font-size:1.2em;
color:white;
margin:5px 5px 0 0;
padding:0 5px;
font-weight:bold;
font-family:"Nunito",Helvetica,Arial,Sans-serif;
border-right:1px solid white;
border-left:1px solid white;
}
</style>
<body>
<header>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Produtos</a></li>
<li><a href="">Ajuda</a></li>
</ul>
</header>
</body>
</html>
</pre>
Se seguir um bom material de estudo saberá sempre se está no caminho certo. Depois quando tiver uma dúvida mais específica é só falar.
Cara, não sei se sabes mas para testar tem de salvar o arquivo em .html e talz. Eu testei e não apareceu nada na minha tela, estou usando o Chrome e tentei tirar essas tags “pre” que particularmente não sei o que são.
Lembrando que sou iniciante, também não entendi o uso da tag “<meta name…”. Não sei qual material de estudo está usando como base. mas te recomendo a apostila da K19. Só procurar no Google : “K19 apostila html” e você acha rapidinho.
Detalhe que nessa apostila já vem incluso HTML5, CSS3 e JavaScript, então é muito boa.
Bom, espero ter ajudado
Abraço