Finalmente chegamos a parte final do site Pão de Minas. Caso você não tenha visto as outras partes, clique aqui para ir a primeira parte e aqui para ver onde paramos. Abaixo você pode conferir o resultado final desse tutorial e baixar os arquivos que vamos utilizar.
Detalhe:
1 : Se você esta seguindo o tutorial, você já baixou esses arquivos na parte 1.
2 : Os arquivos presentes aqui já estão com a parte 1 e 2 concluída.
O que falta…
Hoje nós iremos terminar a nossa sidebar direita. Se você comparar o que temos com o site pronto, você verá que temos algumas tarefas a cumprir. Vamos lá então…
Criando blocos…
Se você der uma olhada no index.html você verá que dentro da div right-sidebar nós temos duas outras divs (receita-dia e cozinha-dia). Nós iremos fazer com que todas as divs dentro de right-sidebar fiquem com uma borda preta e com uma cor de background. Insira a seguinte regra dentro do seu site.css, logo abaixo da ultima regra que criamos:
#right-sidebar div{
border: 1px solid rgb(0,0,0); /* Insere uma borda com 1px de espessura, solid da cor preta*/
background-color: rgba(153,153,153,0.8); /* Altera a cor de fundo*/
}
48 : Nesta linha, você está dizendo que as propriedades serão aplicadas a todas as divs dentro de right-sidebar.
Subtítulos…
Vamos centralizar os subtítulos (Pão de queijo recheado e Dona Benta). Se você der uma olhada no index.html, você vai ver que eles estão dentro da tag h4. As tags de titulo possuem uma margem por padrão, nós iremos remove-las e usar a propriedade text-align para centralizar as coisas. Lembrando que neste tutorial nós iremos trabalhar apenas no arquivo site.css, digite a seguinte regra logo abaixo da ultima regra que nós criamos:
#right-sidebar h4{
margin: 0; /* Remove a margem do elemento h4*/
text-align: center; /* Alinha o texto*/
}
Ok. Agora teste e veja o que já temos… Calma, ainda não acabamos.
Ajustando as coisas…
Para centralizar as imagens, nós iremos definir a propriedade display delas para block e também definiremos uma margem. Insira a regra abaixo:
#right-sidebar div img{
display: block; /* Altera a forma como a imagem será renderizada pela pagina*/
margin: 5px auto 8px; /* Defina uma margem para o elemento*/
}
60 : Nós definimos a margem superior como 5px, a direita e esquerda como auto e a margem inferior como 8px. Se você não se lembra como a propriedade margin funciona, volte a parte 1 e lembre-se: Recordar é viver.
Também temos que arrumar os textos. Vamos apenas definir uma margem esquerda e direita para eles, dando a impressão que estão centralizados:
#receita-dia p{
margin-left: 20px; /* Margem esquerda 20px*/
margin-right: 20px; /* Margem direita 20px*/
}
Um ultimo detalhe nos textos: Eu quero que a primeira linha de cada paragrafo esteja em itálico. Para isso nós usaremos a pseudo classe :first-line. Adivinha o que ela faz? Ela aplica uma regra SÓ na primeira linha de um elemento (no nosso caso, paragrafo). Crie a seguinte regra e veja a magica acontecer diante de seus olhos:
#receita-dia p:first-line{ /* :first-line faz com que essa regra seja aplicada SÓ na primeira linha de um elemento*/
font-style: italic; /* Deixa o texto em itálico*/
}
A hora da separação…
Para terminar, só falta um detalhe. Se você já testou, provavelmente você já reparou que os dois blocos (divs) da direita estão grudados um no outro. Para resolver isso é muito simples, meu jovem Padawan, basta você definir uma margem superior para a sua div cozinha-dia, como você verá logo abaixo:
#cozinha-dia{
margin-top: 10px; /* Define a margem superior como 10px*/
}
Clique aqui para ver o resultado final. Abaixo o arquivo site.css completo:
@charset "utf-8";
/* CSS Document */
body{
background-image: url(../imgs/fundo.jpeg); /* Imagem de fundo*/
background-repeat: no-repeat; /* Impede a imagem de fundo de se repetir*/
overflow: hidden; /*Remove a barra de rolagem*/
}
h1{
font-family: Georgia, "Times New Roman", Times, serif; /* Altera a fonte do nosso titulo*/
font-size: 50px; /* Altera o tamanho do titulo*/
margin: 15px 0 0 15px; /* Altera a margem do titulo*/
}
h3{
margin: 10px 0 5px 0; /* Altera a margem do titulo*/
font-family: Tahoma, Geneva, sans-serif; /* Altera a fonte do nosso titulo*/
border-bottom: 5px dotted #CCC; /* Insere uma linha pontilhada da cor #CCC, com 5px de espessura.*/
text-transform: lowercase; /* Faz com que o texto SEMPRE apareça minusculo.*/
}
#container{
width: 800px; /* Largura do nosso container*/
margin: 50px auto; /* Margem do site*/
background-color: rgba(255,255,255,.5); /* Cor de background com alpha definido*/
border-radius: 15px; /* Faz as bordas da div container ficarem arredondadas*/
}
#content{
overflow: auto; /* "Limpa" o float*/
}
#main-content{
margin: 10px 15px; /* margem */
float: left; /* posicionamento a esquerda*/
width: 500px; /* largura da div*/
border: 1px solid rgb(0,0,0); /* borda da div (sem alpha)*/
background-color: rgba(153,153,153,0.8); /* cor da div (com alpha)*/
}
#right-sidebar{
float: right; /* posicionamento a direita*/
width: 230px; /* largura da div*/
margin: 10px 15px; /* margem */
}
#right-sidebar div{
border: 1px solid rgb(0,0,0); /* Insere uma borda com 1px de espessura, solid da cor preta*/
background-color: rgba(153,153,153,0.8); /* Altera a cor de fundo*/
}
#right-sidebar h4{
margin: 0; /* Remove a margem do elemento h4*/
text-align: center; /* Alinha o texto*/
}
#right-sidebar div img{
display: block; /* Altera a forma como a imagem será renderizada pela pagina*/
margin: 5px auto 8px; /* Defina uma margem para o elemento*/
}
#receita-dia p{
margin-left: 20px; /* Margem esquerda 20px*/
margin-right: 20px; /* Margem direita 20px*/
}
#receita-dia p:first-line{ /* :first-line faz com que essa regra seja aplicada apenas na primeira linha de um elemento*/
font-style: italic; /* Deixa o texto em italico*/
}
#cozinha-dia{
margin-top: 10px; /* Define a margem superior como 10px*/
}
E aqui terminamos o arco de três posts do From Scratch: Site Pão de Minas.
Qualquer duvida, comenta ai…
Ate mais,
