Html:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset=”UTF-8”>
<meta name="author" content="Agencia de Marketing Digital Cmk">
<meta name="description" content=" Agencia de Marketing digital em São Paulo CMK é uma empresa de marketing digital, que oferece serviços marketing digital para empresas." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="robots" content="index, follow">
<script src="scripts/seu-script.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/estyles.css">
</head>
<body>
<header>
<a href="index.html" target="_self"><img src= "imagens/logo-cmk.png" alt="Agencia de Marketing Digital CMK Logotipo"></a>
<nav>
<li><a href="index.html" target="_self">HOME</a></li>
<li><a href="#agencia">AGÊNCIA</a></li>
<li><a href="#servicos">SERVIÇOS</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contato">CONTATO</a></li>
</nav>
</header>
<section class="hero">
<h1>teste</h1>
<a class="btn" href="#servicos" target="_self">PORTFÓLIO</a>
</section>
</body>
</html>
===================================================== =======================
Css:
/* GERAL */
* {
margin:0;
padding:0;
font-size: 100%;
box-sizing: bolder-box;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
nav,ul{
list-style: none;
}
a{
text-decoration: nene;
cursor: pointer;
}
/* FINAL GERAL */
/* HEADER */
header {
background-color: #ffffff;
width:100%;
position: absolute;
top:0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding:20px 50px;
}
header img{
width:150px;
}
header nav{
display:flex;
}
header li a {
color: #696969;
text-decoration:none;
}
header li {
margin: 0 15px;
}
header li: first-child {
margin-left: 0;
}
header li: last-child {
margin-right: 0;
}
/*
MEDIA QUERIES
*/
@media (max-width: 700px) {
header {
flex-direction: column;
}
header img {
margin-bottom: 15px;
}
/* hero section foto */
.hero {
background-image: url('../imagens/fundo.jpg');
}