Aqui e o css:
body {
font-style: “Open Sans”, Helvetica, Arial, sans-serif;
color: #4d4d4d;
}
h1, h2, h3 {
margin: 0;
font-family: “Roboto Slab”, Helevetica, Arial, sans-serif;
font-weight: 700;
}
.botao {
color: white;
text-align: center;
text-decoration: none;
padding: 10px 30px;
background-color: #8f3faf;
font-size: .9em;
border-radius: 3px;
}
/Navegação/
nav {
display: flex;
flex-direction: column;
align-items: center;
background: #4d4d4d;
}
nav > a {
text-decoration: none;
text-align: center;
color: #f1f1f1;
font-weight: 700;
font-size: 28px;
font-family: Pacifico, serif;
}
nav ul {
list-style: none;
padding: o;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
nav ul li {
width: 100%;
text-align: center;
}
nav ul li a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-decoration: none;
color: #f1f1f1;
}
/cabeçalho/
header {
background-image: url(’…/_imagens/fundo.jpg’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
}
header p {
margin-bottom: 2em;
}
/sobre/
#sobre {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;;
padding: 0 20px 20px;
background-color: #8f2faf;
color: #f1f1f1;
}
#sobre p {
margin-bottom: 2.5em;
max-width: 1000px;
}
#sobre .botao{
background-color: #f1f1f1;
color: #8f3faf;
}
/Serviços/
#servicos {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#servicos div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: 30px;
}
/portfólio/
#portfolio {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
#portfolio h2 {
margin-bottom: 20px;
}
#portfolio img {
border: 8px solid white;
box-shadow: 1px 1px 4px black;
width: 100%;
}
#contato {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
}
/footer/
footer {
text-align: center;
padding: 10px;
background-color: #4d4d4d;
color:#f1f1f1;
}
/MEDIA QUERIES/
@media screen and (min-width: 768px){
/NAVEGAÇÂO/
nav {
flex-direction: row;
justify-content: space-around;
}
nav ul {
flex-direction: row;
width: 70%;
}
/CABEÇALHO/
header {
height: 600px;
justify-content: center;
height: 60vh;
}
/SOBRE/
#sobre {
height: 250px;
height: 30vh;
justify-content: center;
min-height: 250px;
}
/SERVIÇOS/
#servicos {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
max-width: 1000px;
margin: 0 auto;
}
#servicos h2 {
text-align: center;
width: 100%;
}
#servicos div {
flex-grow: 1;
flex-basis: 150px;
padding: 0 10px;
}
#portfolio {
flex-direction: row;
flex-wrap: wrap;
}
#portfolio h2 {
width: 100%;
text-align: center;
}
#portfolio img {
width: 33%;
}
/CONTATO/
#contato {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
max-width: 500px;
margin: 0 auto;
}
#contato h2,
#contato p {
width: 100%;
}
}