Avançando com CSS
Objetivo deixar a pagina inicial da seguinte forma :
Melhorando o arquivo existente do curso 1.
1° Colocar um arquivo reset para tirar as configurações inicias do navegador, e adicionar um
arquivo css de edição.
2° Adicionar o mesmo produto da pagina de contato e produto:
3° Colocar rodapé da pagina igual ao que temos nas paginas de contato e produto.
Separando o conteúdo do HTML:
1° Separando o conteúdo principal:
2° Classificar a divisão que é semântica so sobre a barbearia alura uso a a TAG <SECTION>
Sobre o banner
1° Quero que o banner tenha 100% da largura da página:
Na seção sobre a barbearia alura, MUDAR O TITULO como essa seção esta como classe
= título-principal chamo ele no css:
1° Colocar texto no centro
2° mudar a fonte (em) é a medida proporcional para px ex se o tamanho da fonte base for 15px
e eu coloco 2 em significa que é 2*15px.
3° Colocar espaço entre o título e o texto de 1em ou seja distancia proporcional ao tamanho
da fonte do título.
Na seção sobre a barbearia alura mudar as configurações do texto:
1° Criar uma margem para todo o texto com paragrafo tenha 1em ou seja proporcional a o
tamanho da fonte.
2° Toda vez que tivermos a TAG Strong quero que fique em negrito, e sempre que tivermos a
TAG em quero que o texto fique em itálico:
Mexer na imagem de benefícios:
1° Alterar o tamanho da imagem benefícios:
Colocar imagem na seção sobre a barbearia alura. Fazer com que o texto sobre a
barbearia circule a nossa imagem escolhida:
1° coloco a imagem no arquivo HTML, vou fazer isso abaixo do título e colocar uma classe.
Além de colocar o alt que mostra em forma de texto o que é a imagem caso não carregue:
2° Quero que a imagem utensílios tenha uma largura de 150px
3° Utilizando float para o texto dos benefícios fique ao lado direto da imagem:
4° Criar uma barreira para que o float não afete toda estrura, e para não afetar o meu campo
benefícios eu tenho que limpar a esquerda:
5° Fazer com que a imagem de utensílios tenha 0px para cima, 20px para direita, 20px pra baixo
e 0px para esquerda.
Aprendendo a usar fontes externas:
1° Usar fonte para o nosso site pegando do google fontes: https://fonts.google.com/?
preview.text=Barbearia%20Alura&preview.text_type=custom&query=mont. Você pesquisa por
um estilo ou ve as opções e copia a fonte no formato html e css.
Adicionar mapa para site:
1° Entre parte principal e os benefícios vou criar uma seção com uma classe , e colocar um
título: Nosso estabelecimento com a classe=titulo principal para pegar toda a configuração de
todo o título.
E cria um paragrafo logo abaixo abaixo com informativo.
2° Adicionar mapa na nossa pagina, vou no google maps : https://www.google.com.br/maps
pesquiso o endereço selecionar as três barrinhas compartilhar ou incorporar mapa
seleciono incorporar e coloco no meu HTML, e ajustar medidas que ocupa o mapa na minha
pagina.
3° Quero que minha seção mapa colocar um espaçamento interno de 3em para cima e para
baixo.(3em) significa espaçamento de 3x o tamanho da fonte
Quero ainda que meu paragrafo que esta dentro do mapa tenha um espaçamento interno de
para baixo de 2em
Centralizar o texto que apresenta acima do mapa.
Importar um vídeo para área de benefícios:
1° vou no yotube escolho vídeo vai em compartilhar escolhe a opção de incorporar
copia e cola no HTML. Cola abaixo da imagem de benefícios:
2° Colocar o vídeo em uma div e dar uma classe pra ele pra podermos editar ele no css. No css
colocar 560px de altura, margem de 1em para cima e para baixo e automática nas laterais
Usar os pseudos elementos para tratar os benefícios:
1° crio um div HTML na seção de benefícios para conseguir editar usando CSS:
3° Quero que o conteúdo das listagem dos benefícios, tenha uma largura de 640px, e margem
automática para os lados. E para minha lista beneficio que vai ter 40% de largura
4° transformar a lista de benefícios em inline block para conseguir colocar a imagem ao lado
da lista de benefícios:
5° Quero que minha lista de benefícios seja alinhada pela linha de cima.
6° Colocar espaçamento de 3 em para os elementos lista de benefícios e a imagem.
7° Trabalhar na classe itens (lista de benefícios), colocaer o espaço entre os itens de 1.5 quero
que o espaçamento tenha o tamanho da fonte + 50%:
8° Quero que o primeiro item da lista esteja em negrito e faço isso no css.Utilizando classe de
pseudo elemento para selecionar apenas um item de uma classe.
Aplicando gradientes: Fazer um degrade no cor de fundo da pagina
1° coloco uma cor de fundo branca na repartição principal que é sobre a barbearia alura.
Depois coloco uma cor cinza de fundo na parte dos benefícios
2° agora como o mapa fica no meio tenho que usar gradiente para cor ir do branco para o cinza
e dar o toque de degrade.
Usar unicod http://xahlee.info/comp/unicode_stars.html para colocar TESOURA na
minha lista de benefícios:
Seletores CSS , estudar mais.
Nesta aula, aprendemos:
Seletores avançados CSS
o Seletor >, para acessar os filhos de determinado elemento. Por
exemplo, para acessar todos os p dentro de main:
main > p {
o Seletor +, para acessar o primeiro irmão de determinado elemento.
Por exemplo, para acessar o primeiro p após um img:
img + p {
o Seletor ~, para acessar todos os irmãos de determinado elemento.
Por exemplo, para acessar todos os p após um img:
img ~ p {
o Seletor not, para acessar os elementos, exceto algum. Por
exemplo, para acessar todos os p dentro de main, exceto o p que
tem id missão:
main p:not(#missao) {
Colocar opacidade em elementos e imagem. Essa função tem por objetivo deixar
opaco o elemento ou seja para que a pessoa não enxergue totalmente o elemento.
1° deixar a imagem de benefícios opaca em 30%:
2° Quando o mouse estiver por cima da imagem de benefícios quero que ela fica opaca em
30%, e quero que essa transição leve 400ms:
Adicionar sobra nos elementos:
1° Fazer uma sombra na imagem de beneficios. box-shadow(X,Y, espaçamento em px que a
sombra vai ocupar, cor) .
Expansão mobile para o nosso site
1° Como fazer nosso site entender que o nosso usuário esta usando celular e preparar o
conteúdo adequadamente para o tamanho de tela :
a) Primeiro precisamos saber quantos px o usuário tem de tela, e pra isso usa o meta
viewport para saber a quantidade de px, além de querer saber a largura da tela do
usuário. Fazendo no HTML:
b) No css eu configura uma exibição para possibilidade de tamanho de 480px de tela, e
coloco como deve ser esse exibição olhando no inspecionar.
