Você conhece HTML e CSS? Aprenda a dar os primeiros passos com o nosso curso de introdução ao HTML e CSS, enquanto cria uma réplica da página do Google.
Vamos iniciar o curso de Introdução ao HTML e CSS para que você possa dar seus primeiros passos nessas linguagens!
Durante as aulas, estaremos desenvolvendo uma réplica da página inicial do Google. Isso significa que você terá a oportunidade de aprender HTML e CSS na prática, construindo a sua própria versão da página inicial do Google.
Iniciaremos pelo básico, abordando informações fundamentais, como o uso de tags, a criação de arquivos HTML e CSS, o processo de linkar esses arquivos e muito mais.
Exploraremos a estrutura de um site, o uso da ferramenta do programador no navegador e como ela pode auxiliá-lo a aprender ainda mais.
Iremos partir do básico até a sua primeira página. E aí, curtiu a ideia do curso? Então, vem comigo que você já vai aprender muito desde a primeira aula no nosso curso de Introdução ao HTML e CSS.
Vamos começar o nosso curso de Introdução ao HTML e CSS! Hoje, você aprenderá os conceitos básicos para dar os primeiros passos no desenvolvimento web e criar a sua réplica da página inicial do Google a partir do zero!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Ao longo destas aulas, vou utilizar o Visual Studio Code. Se você quiser saber como instalar e configurar esse editor para trabalhar com HTML e CSS, pode acessar aqui.
No material disponível para download, você encontrará tanto o gabarito quanto o código inicial para começar a estudar e praticar.
Ao final do nosso curso de introdução ao HTML e CSS, o resultado que vamos conseguir alcançar será este:
Uma réplica completa da página inicial do Google, onde você poderá interagir e muito mais.
O primeiro passo será criar o nosso arquivo index.html. Mas como podemos adicionar algo dentro dele para visualizarmos no nosso navegador? Para isso, eu sugiro que você consulte a aula de instalação do VS Code, onde ensinei como utilizar a extensão do Live Server.
A extensão Live Server nos permite visualizar no navegador o resultado de todos os códigos que estivermos desenvolvendo dentro do VS Code.
Ela nos possibilita rodar um servidor local em que conseguimos atualizar o resultado do nosso código automaticamente.
Para abrir o servidor local com o Live Server, basta clicar com o botão direito do mouse em cima do arquivo HTML que acabou de criar e selecionar a opção Open with Live Server.
Por enquanto, não haverá nada na página, mas você já consegue testar se o Live Server está funcionando corretamente.
Outra opção é acessar a opção Go Live no canto inferior direito do VS Code, que também abrirá o servidor para você.
Tendo o arquivo já aberto no navegador, o próximo passo que podemos fazer é escrever a nossa primeira linha de código. E como é de costume, vamos escrever o famoso “Olá Mundo!”.
Para isso, vamos criar uma tag de abertura e de fechamento de parágrafo no HTML.
<p> </p>Essa combinação entre tag de abertura <p> e tag de fechamento </p> é muito comum para a grande maioria das tags HTML, que representam os elementos HTML.
<p> Olá, mundo!</p>Voltando para o nosso navegador e atualizando, veremos a mensagem sendo exibida na tela.
Ou seja, dentro do nosso arquivo HTML, a única coisa que temos até o momento é um arquivo HTML com um parágrafo.
É possível adicionarmos um segundo parágrafo ao nosso código:
<p> Olá, mundo! </p>
<p> Esse é o meu primeiro código </p>O live server geralmente atualiza automaticamente o navegador assim que você salva o código no VS Code. Portanto, quando terminar de editar, aperte Ctrl+S para que a atualização seja feita automaticamente.
Caso não tenha acontecido automaticamente, é só atualizar a página que irá aparecer.
Repare que agora temos dois parágrafos sendo exibidos. Mas podemos melhorar esse código. Em vez de utilizarmos dois parágrafos, podemos usar os Headings e transformar o primeiro parágrafo em um título.
Os headings (títulos) variam de tamanho e importância, sendo o 1 o maior e mais importante de todos, e o 6 o menor e menos importante.
<h1>Olá, mundo!</h1>
<p>Esse é o meu primeiro código</p>
O HTML vai ser a linguagem que iremos utilizar para criar a estrutura do site. Os títulos, os parágrafos, as imagens, o campo de texto, tudo que for um elemento estrutural será construído com HTML.
E tudo que tiver a ver com estilização, layout, cor, sombra, como os elementos estão dispostos, tudo isso será feito utilizando o CSS, que é o responsável pela estilização da página.
Até agora, apenas criamos alguns elementos soltos para que você se familiarizasse primeiro com os elementos HTML.
Mas a forma correta seria colocar esse código dentro da estrutura de um elemento HTML.
Se você digitar ! no VS Code, ele irá reconhecer que você quer criar um arquivo HTML e, caso você aperte a tecla Tab, ele irá construir toda a estrutura base de um arquivo HTML para você.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Vamos entender essa estrutura detalhadamente:
Vamos trazer nosso título <h1> e nosso parágrafo para dentro do body desse código e alterar o idioma (lang) e o title dele.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Esse é o meu primeiro cógido.</p>
</body>
</html>
Repare que agora, na aba do navegador, aparece o <title> além do texto dentro do body que já estávamos exibindo antes.
Mas existem muitos mais elementos que podemos adicionar quando estamos desenvolvendo e criando uma página.
Por exemplo, podemos ter links que nos direcionam para outras páginas, assim como na página inicial do Google.
Por exemplo, se clicarmos sobre “Gmail”, seremos levados para a página do Gmail.
Para criarmos um link dentro do documento HTML que nos direcionará para outra página, utilizaremos uma anchor tag (âncora), representada pela tag <a>.
Dentro da tag âncora, precisamos definir o link de destino no atributo href. Vamos copiar o endereço do Gmail a partir da página inicial do Google e colá-lo dentro da nossa anchor tag para que você possa visualizar.
Além da tag âncora e do atributo href, é necessário definir um texto entre a abertura e o fechamento da tag <a>, de modo que, ao clicarmos nesse texto, sejamos direcionados para algum lugar.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Esse é o meu primeiro código.</p>
<a href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
</body>
</html>
Clicando nesse link, seremos direcionados para a página do Gmail. No entanto, observe que ele abrirá o link na mesma aba em que você estava na página principal. Se desejar que ele abra em outra aba, precisará adicionar o atributo target.
Por padrão, o target vem com o valor _self, fazendo com que o link abra na mesma aba. Se alterarmos o valor para _blank, ele abrirá em uma aba em branco.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Esse é o meu primeiro código.</p>
<a href="https://mail.google.com/mail/?authuser=0&ogbl" target="_blank">Gmail</a>
</body>
</html>Como o objetivo é replicarmos o site do Google e na página do Google, o Gmail abre na mesma aba, vamos apenas remover esse atributo e deixar abrindo o link na mesma aba.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Esse é o meu primeiro código.</p>
<a href="https://mail.google.com/mail/?authuser=0&ogbl">Gmail</a>
</body>
</html>Já vimos como adicionar títulos, parágrafos, e links. Agora, veremos como adicionar imagens ao nosso HTML.
A tag de imagem <img> não requer uma tag de fechamento. Dentro da tag de imagem, temos dois atributos principais: src (source ou fonte) e alt (texto alternativo).
O src é o atributo no qual definimos o caminho de uma imagem no nosso computador para ser exibida ou o link de uma imagem na internet que desejamos mostrar. Por exemplo, podemos ir à página do Google, clicar com o botão direito do mouse sobre a logo e selecionar “copiar endereço de imagem“.
Podemos colar esse endereço dentro do atributo src e passar o texto alternativo “Logo do Google” para o atributo alt.
O texto alternativo é exibido quando a imagem definida na fonte (src) não puder ser carregada ou estiver quebrada.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Esse é o meu primeiro código.</p>
<a href="https://mail.google.com/mail/?authuser=0&ogbl" target="_blank">Gmail</a>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Logo do Google">
</body>
</html>
Perceba que a logo está até mesmo maior do que no site do Google, mas esses ajustes visuais e de estilização podem ser feitos utilizando o CSS.
Se nosso link estivesse quebrado, o texto alternativo seria exibido:
Assim como tivemos uma breve introdução ao HTML, faremos o mesmo para o CSS.
Para isso, vamos criar um arquivo chamado style.css.
O CSS é utilizado para estilizar nossos elementos HTML, como a cor do título, tamanho, posição, toda essa parte visual pode ser manipulada com o CSS.
O primeiro passo para editar algum elemento é selecionar esse elemento através de um seletor dentro do CSS.
Existem diversas maneiras de selecionar elementos dentro do CSS, uma delas é selecionar pelas tags que já vimos no HTML. Ou seja, podemos aplicar um estilo específico para uma tag.
Vamos supor que selecionamos a tag <h1>, todas as tags <h1> dentro do seu documento ficarão com o estilo que você definiu para ela dentro do CSS.
Vamos fazer um exemplo. Para personalizar um elemento dentro do CSS, você determina o seletor e abre e fecha chaves. Dentro das chaves, você passa a formatação desejada para aquele elemento.
h1{
color:red;
}Aqui estamos definindo que todo elemento <h1> terá a cor vermelha. Dentro das chaves, passamos primeiro a propriedade que queremos alterar e, depois dos dois pontos, o valor que queremos atribuir a ela.
O CSS aceita vários sistemas de representação de cores, como:
Essas três formas são variações de representação da cor vermelha.
No entanto, apenas definir o seletor dentro do CSS não é suficiente para alterar o elemento dentro do HTML.
Para isso, precisamos linkar os dois arquivos. Vamos até o nosso arquivo HTML e, dentro da <head> do nosso documento, criaremos um link para o nosso arquivo CSS.
Para esse link, iremos passar o atributo rel, que é um atributo que define o tipo de relação entre os documentos. O valor dado a ele será “stylesheet“, indicando que esse recurso que está se relacionando com o nosso HTML é um recurso de estilização.
O atributo href nos permite passar o caminho para o nosso arquivo CSS. Como eles estão na mesma pasta, só é preciso passar o nome.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Esse é o meu primeiro código.</p>
<a href="https://mail.google.com/mail/?authuser=0&ogbl" target="_blank">Gmail</a>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Logo do Google">
</body>
</html>Se acessarmos a nossa página agora, o nosso “Olá, mundo!” estará em vermelho.
Nossa logo do Google ainda está muito grande, e queremos ajustar o seu tamanho, mas não sabemos qual o tamanho ela tem na página do Google.
Uma forma de descobrir esse tipo de informação referente a uma página é através das ferramentas de programador. Basta ir até a página desejada e apertar a tecla F12.
E olha só, nessa ferramenta você terá a estrutura HTML da página do Google para poder visualizar.
Todas as páginas na internet terão a estrutura base de um documento HTML. E não só o HTML, também é possível visualizar os estilos da página.
Para descobrir as propriedades de um item específico, por exemplo, queremos descobrir o tamanho da logo do Google para ajustarmos a do nosso site, podemos clicar na setinha que aparece dentro dessa ferramenta de programador.
E posicioná-la sobre o elemento que você deseja informações.
Ou seja, a logo do Google tem 272×92 pixels.
Agora que temos as informações de largura e altura da nossa imagem, podemos personalizá-la no nosso código.
Vamos definir agora uma regrinha de estilização para os elementos da tag <img>.
img{
height:92px;
}Os pixels são a medida padrão para as páginas da web. No entanto, ainda assim, você precisa informar a unidade de medida quando estiver personalizando seus elementos.
Alterando a altura da nossa logo, ela já ficará com o tamanho desejado.
Vamos personalizar também a anchor tag para que ela não tenha esse sublinhado, pois o link para o Gmail na página inicial do Google não é sublinhado.
A propriedade padrão que afeta esse estilo é a text-decoration, que por padrão vem com underline (sublinhado). Para removê-lo, basta adicionarmos o valor none.
Além disso, a escrita do “Gmail” na página do Google possui outras propriedades. Podemos utilizar a nossa ferramenta do programador para descobrir novamente as informações que queremos.
Assim, podemos passar esse estilo para a nossa âncora.
a{
text-decoration: none;
color:#000000DE;
font-size: 13px;
font-family: sans-serif;
}
Assim, terminamos as personalizações por esta aula, em que aprendemos a colocar um título, um parágrafo, uma imagem e uma âncora com HTML, e como personalizar esses elementos com CSS.
Começamos do básico explorando as tags, a criação de um arquivo HTML e como utilizar os seletores CSS para personalizar nossos elementos.
Nas próximas aulas, daremos continuidade a este projeto até termos finalizado a nossa página do Google.
Na segunda aula do nosso curso de Introdução ao HTML e CSS, daremos continuidade à construção da réplica da página do Google. Nesta etapa, focaremos no desenvolvimento do cabeçalho da nossa réplica, explorando algumas tags adicionais do HTML e estilos do CSS.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Se não tiver o material da última aula, lembre-se de baixá-lo para poder acompanhar o passo a passo.
O primeiro passo para começarmos a nossa segunda aula do curso de introdução ao HTML e CSS será duplicar a pasta da Aula 1 e renomeá-la para Aula 2.
Assim, teremos os arquivos prontos para serem usados, ao mesmo tempo que mantemos os arquivos da Aula 1 para consulta e comparação.
Além disso, podemos abrir tanto o arquivo HTML quanto o arquivo CSS lado a lado. Para isso, basta abrir os dois arquivos dentro do VS Code e selecionar Split Editor Right ou pressionar Ctrl + ].
Dessa forma, conseguimos visualizar o arquivo HTML e o CSS ao mesmo tempo.
Para não precisar ficar arrastando a janela para o lado para verificar o código todo, podemos utilizar o atalho Alt + Z para quebrar as linhas do código e ajustá-las ao tamanho da janela.
Agora que ajustamos nossos arquivos, podemos começar o desenvolvimento do cabeçalho para a nossa página do Google.
Vamos até a página oficial do Google e copiaremos o endereço do link da guia Imagens.
Em seguida, selecionamos a nossa primeira anchor tag e pressionamos Alt + Shift + Seta para Baixo. Isso duplicará nosso elemento âncora, permitindo-nos substituir apenas o atributo href pelo endereço copiado e o texto exibido para Imagens.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Esse é o meu primeiro código</p>
<a href="https://mail.google.com/mail/&ogbl">Gmail</a>
<a href="https://www.google.com/imghp?hl=pt-BR&ogbl">Imagens</a>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
/>
</body>
</html>Podemos remover a tag <h1> com a frase “Olá, mundo!” e também a tag <p> com a frase “Esse é o meu primeiro código”.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="https://mail.google.com/mail/&ogbl">Gmail</a>
<a href="https://www.google.com/imghp?hl=pt-BR&ogbl">Imagens</a>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
/>
</body>
</html>Visualizando nosso site, teremos a seguinte página:
Agora, precisamos adicionar a imagem com os 9 pontinhos e o botão Entrar, que também são links.
Para localizarmos o ícone com os 9 pontinhos, podemos utilizar a ferramenta de programador. Basta ir até a página do Google e pressionar a tecla F12.
No menu que será aberto, selecione a seta que aparece no canto superior esquerdo dessa janela e clique sobre o elemento desejado, neste caso, o ícone com os pontinhos.
Observe que ele nos levou para um elemento SVG, que é um tipo de imagem vetorial. Em termos práticos, a diferença entre uma imagem PNG e uma imagem vetorial é que a imagem vetorial mantém a qualidade ao ser redimensionada para qualquer escala.
Essa é uma boa prática ao trabalhar com ícones e imagens em sites.
Para copiarmos esse elemento para dentro do nosso código, basta clicar com o botão direito do mouse sobre ele dentro da ferramenta de programador e selecionar a opção Copy Element.
Podemos colá-lo dentro do nosso código, abaixo das nossas anchor tags.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="https://mail.google.com/mail/&ogbl">Gmail</a>
<a href="https://www.google.com/imghp?hl=pt-BR&ogbl">Imagens</a>
<svg class="gb_i" focusable="false" viewBox="0 0 24 24">
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
<image
src="https://ssl.gstatic.com/gb/images/bar/al-icon.png"
alt=""
height="24"
width="24"
style="border:none;display:none \9">
</image>
</svg>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
/>
</body>
</html>Como ainda não abordamos classes no HTML, vamos remover a classe de dentro do nosso elemento SVG (class=”gb_i”) e atualizar a página do nosso site.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="https://mail.google.com/mail/&ogbl">Gmail</a>
<a href="https://www.google.com/imghp?hl=pt-BR&ogbl">Imagens</a>
<svg focusable="false" viewBox="0 0 24 24">
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
<image
src="https://ssl.gstatic.com/gb/images/bar/al-icon.png"
alt=""
height="24"
width="24"
style="border:none;display:none \9">
</image>
</svg>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
/>
</body>
</html>
Repare que o nosso ícone ficou com o tamanho totalmente alterado, muito maior do que gostaríamos. No entanto, observe que a imagem não ficou distorcida nem serrilhada, independentemente do tamanho dela.
Se verificarmos o elemento novamente na página do Google, veremos que as dimensões da imagem precisam ser de 24 por 24.
Durante a nossa primeira aula, para personalizar um elemento, utilizamos a seleção por tags dentro do nosso arquivo CSS.
O problema desse método é que todos os elementos que fazem parte dessas tags receberão a mesma estilização, e muitas vezes desejamos estilos específicos para elementos específicos.
Mesmo que os elementos façam parte da mesma tag svg, a ou h1, queremos personalizá-los de acordo com o objetivo do site e não atribuir uma mesma aparência a todos.
Então, em vez de selecionarmos pelas tags, podemos selecionar pelas classes. As classes são atributos em que atribuímos nomes aos elementos HTML, permitindo selecioná-los e personalizá-los a partir dessa classe.
A vantagem das classes é que você pode aplicá-las a mais de um elemento, inclusive elementos de tags diferentes, e personalizá-los todos juntos.
As classes também oferecem mais versatilidade de seleção para poder estilizar elementos específicos, atribuindo uma classe única a um elemento que você deseja uma personalização específica. Vamos determinar uma classe para a nossa imagem SVG como sendo icone-produtos.
<svg class="icone-produtos" focusable="false" viewBox="0 0 24 24">Um detalhe que precisamos ressaltar é que não utilizamos caracteres especiais dentro do nome de classes, e não separamos os nomes das classes por espaço. Se tivéssemos escrito “icone produtos“, teríamos duas classes ao invés de uma: a classe icone e a classe produtos.
Com a classe criada, podemos, dentro do arquivo CSS, selecionar o elemento por ela. Isso nos permitirá atribuir essa classe a outros elementos que quisermos aplicar a mesma formatação.
A diferença na declaração de classes dentro do CSS é que, ao invés de informarmos apenas o nome da classe, adicionamos um ponto antes: .nome-classe.
.icone-produtos {
}Como a imagem dos pontinhos é um quadrado, podemos definir apenas a largura dela (width) que ela ajustará a altura corretamente para a mesma medida. Dessa forma, podemos declarar a largura como 24px.
Além disso, precisamos copiar a cor do elemento. Para isso, na ferramenta de programador, podemos selecionar o elemento SVG que copiamos a imagem e verificar na guia de CSS qual a cor que está sendo atribuída a ele.
No entanto, repare que dentro da ferramenta, a propriedade referente à cor do elemento aparece declarada como color. Porém, color no CSS usaremos quando estivermos nos referindo à cor da fonte.
No caso da nossa imagem SVG, precisamos trabalhar com a propriedade de preenchimento, ou seja, a propriedade fill. Assim, podemos definir o estilo do nosso elemento da seguinte forma:
.icone-produtos {
width: 24px;
fill: #5f6368;
}Atualizando a nossa página, teremos o ícone sendo exibido com o tamanho e a cor corretos.
Já temos, então, nossos links para o Gmail, as Imagens e o ícone de produto. Falta criarmos o botão Entrar, que também será um link.
O primeiro passo será copiarmos o endereço desse botão.
Em seguida, criamos uma anchor tag no nosso arquivo HTML passando o endereço dele como atributo href.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="https://mail.google.com/mail/&ogbl">Gmail</a>
<a href="https://www.google.com/imghp?hl=pt-BR&ogbl">Imagens</a>
<svg class="icone-produtos" focusable="false" viewBox="0 0 24 24">
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
<image
src="https://ssl.gstatic.com/gb/images/bar/al-icon.png"
alt=""
height="24"
width="24"
style="border:none;display:none \9">
</image>
</svg>
<a href="https://accounts.google.com/ServiceLogin?hl=pt-PT&passive=true&continue=https://www.google.com/&ec=GAZAmgQ">Entrar</a>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
/>
</body>
</html>
Nosso link Entrar já estará acessível na página. No entanto, precisamos torná-lo em um botão de fato. Por enquanto, ele não tem a aparência de um botão, como visualizamos na página oficial do Google.
Vamos verificar as propriedades desse botão selecionando-o com a ferramenta de programador.
Dentro desse elemento, podemos ver que há um background na cor azul e duas outras propriedades chamadas Margin e Padding.
Margin e Padding são propriedades do CSS que afetam o layout e o espaçamento dos elementos na página. Nessa imagem, a margin é representada pela cor laranja, e o padding podemos visualizar com esse azul mais esverdeado.
A margin refere-se à margem do elemento, o espaço ao redor do elemento fora da sua borda. Ela define o espaço entre a borda do elemento e os elementos vizinhos.
Já o padding refere-se ao preenchimento do elemento, o espaço interno entre o conteúdo do elemento e a sua borda. Ou seja, o padding determinará a distância entre o texto Entrar e a borda do botão.
Vamos precisar aplicar essas propriedades à nossa anchor tag. No entanto, só queremos aplicar essa estilização à anchor tag referente ao botão Entrar. Para isso, definiremos uma classe para ela.
<a class="botao-entrar" href="https://accounts.google.com/ServiceLogin?hl=pt-PT&passive=true&continue=https://www.google.com/&ec=GAZAmgQ">Entrar</a>Com isso, podemos aplicar a estilização diretamente para essa classe no nosso arquivo CSS. Vamos começar definindo a cor de fundo dele.
.botao-entrar {
background-color: #1a73e8;
}Em seguida, precisamos definir a cor da fonte do nosso botão Entrar. Se repararmos no nosso arquivo CSS, veremos que as anchor tags já possuem essa propriedade declarada.
a {
text-decoration: none;
color: #000000de;
font-size: 13px;
font-family: arial, sans-serif;
}No entanto, dentro do CSS existe uma lógica que é a hierarquia de prioridades. Quando estamos estilizando um elemento, existe um grau de especificidade que é considerado para determinar qual estilo deve ser aplicado a um elemento.
O primeiro seletor, ou seja, o de maior prioridade, são os seletores de Id. Em seguida, temos os seletores de classe e, por fim, o seletor de tag.
Ou seja, quando atribuímos novas propriedades ao nosso seletor de classe .botao-entrar, essas propriedades serão consideradas com prioridade em relação às que já foram declaradas para a anchor tag <a>. Sendo assim, a estilização de classe será aplicada ao invés da de tag.
.botao-entrar {
background-color: #1a73e8;
color: #ffffff;
}
Ainda precisamos ajustar o espaçamento e a margem do nosso botão. Para isso, vamos definir o padding como 9px e 23px.
.botao-entrar {
background-color: #1a73e8;
color: #ffffff;
padding: 9px 23px;
}Quando passamos dois valores para o padding, o primeiro é aplicado para o preenchimento em cima e embaixo, e o segundo valor para o preenchimento lateral (esquerda e direita).
Além de ser possível visualizar a mudança no nosso botão Entrar, podemos conferir essas medidas do padding e do margin na box model dentro da ferramenta de programador.
Se compararmos as medidas do botão que criamos com o botão presente na página do Google, veremos que o da nossa página ainda está um pouco menor do que o original. Podemos ajustar isso, alterando o nosso padding para 10px e 30px.
.botao-entrar {
background-color: #1a73e8;
color: #ffffff;
padding: 10px 30px;
}Agora precisamos ajustar a fonte do nosso botão. Copiando as informações da página original, podemos definir que a font-family preferencial será a Google Sans, mas que, quando ela não estiver disponível, poderá ser usada a Roboto, depois a Helvetica e assim sucessivamente.
Além disso, vamos definir o “peso” da fonte (font-weight) como 500.
.botao-entrar {
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
background-color: #1a73e8;
color: #ffffff;
padding: 10px 30px;
}
Por fim, o último ajuste que precisamos realizar no nosso botão é o de arredondar os cantos dele. Para isso, utilizaremos a propriedade border-radius com o valor de 4px.
.botao-entrar {
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
background-color: #1a73e8;
color: #ffffff;
padding: 10px 30px;
border-radius: 4px;
}A propriedade border-radius é muito útil para criar bordas suavizadas. É como se em cada canto do elemento ela criasse um círculo e definisse o raio dele de acordo com o valor em pixel definido. Quanto maior o raio, maior será o círculo em cada canto.
Finalizamos a edição do botão Entrar, concluindo a parte de criação e formatação dos elementos que compõem nosso cabeçalho.
Nas próximas aulas, abordaremos a disposição e o layout desses elementos em relação uns aos outros. No entanto, individualmente, todos já estão com as formatações e funcionalidades desejadas.
Para encerrar esta aula, podemos agora organizar os elementos em seções específicas da página. Por exemplo, utilizaremos a tag <header> para o cabeçalho, e adicionaremos dentro dessa tag os elementos que desenvolvemos até agora.
Abaixo do cabeçalho, a parte principal da página será envolvida pela tag <main>. No momento, só teremos a logo do Google nessa seção.
Por fim, temos o rodapé da página, que por enquanto está vazio e é representado pela tag <footer>.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<a href="https://mail.google.com/mail/&ogbl">Gmail</a>
<a href="https://www.google.com/imghp?hl=pt-BR&ogbl">Imagens</a>
<svg class="icone-produtos" focusable="false" viewBox="0 0 24 24">
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
<image
src="https://ssl.gstatic.com/gb/images/bar/al-icon.png"
alt=""
height="24"
width="24"
style="border:none;display:none \9">
</image>
</svg>
<a class="botao-entrar" href="https://accounts.google.com/ServiceLogin?hl=pt-PT&passive=true&continue=https://www.google.com/&ec=GAZAmgQ">Entrar</a>
</header>
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
/>
</main>
<footer></footer>
</body>
</html>
Ao definirmos os elementos do cabeçalho e a logo do Google como parte do main, o layout da nossa página já foi ajustado, exibindo a logo abaixo do cabeçalho.
Chegamos à terceira aula do nosso curso de HTML e CSS, onde aprenderemos a construir o rodapé da página do Google.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Nessa aula, vamos construir o rodapé da página do Google. Você verá como criar um rodapé em HTML, utilizando a tag apropriada para isso. Vamos explorar ajustes e estilizações no rodapé, como modificações na borda e no espaçamento, utilizando CSS.
Por fim, faremos uso da tag div para criar agrupamentos de elementos no HTML e entenderemos como utilizar o seletor universal no CSS.
Se não tiver o material da última aula, lembre-se de baixá-lo para poder acompanhar o passo a passo desta aula.
Ao final da segunda aula, dividimos as 3 seções da nossa página do Google: header, main e footer. Por enquanto, nosso footer (rodapé) está vazio, mas hoje criaremos os elementos que o comporão.
No rodapé da página do Google, teremos um texto escrito “Brasil” e alguns hiperlinks que nos levam para outras páginas do Google.
Podemos dividir esse rodapé em 2 partes. A primeira terá o texto “Brasil“, e a segunda conterá os hiperlinks.
Essa segunda parte, por sua vez, pode ser subdividida em mais duas partes. A primeira vai de “Sobre” até “Como funciona a Pesquisa“, e a segunda vai de “Privacidade” até “Configurações“.
Para iniciar o rodapé, vamos criar um parágrafo <p> envolto pela tag <footer>. Atribuiremos o texto “Brasil” a ele.
<footer>
<p>Brasil</p>
</footer>Após isso, precisamos ajustar a cor do background do rodapé. Ao visualizarmos a página do Google, percebemos que essa seção tem uma cor diferente do restante. Para obtermos a cor do background, podemos utilizar a ferramenta de desenvolvedor, como fizemos anteriormente.
Podemos personalizar essa alteração em nosso arquivo CSS.
footer{
background-color: #f2f2f2;
}
Ao observar atentamente o resultado da página, notará que tanto nosso footer quanto o restante da página não se estendem até a borda da janela. Em ambos os lados, há um espaço em branco.
Isso ocorre porque ao longo de toda a página, uma margem é aplicada a todos os elementos, ao <body> como um todo.
No entanto, não é isso que queremos. Desejamos que a página encoste nas laterais da janela. Para alcançar isso, vamos zerar as margens que foram geradas automaticamente, possibilitando definir manualmente as margens de cada elemento da nossa página.
Podemos fazer isso utilizando o seletor universal no CSS, representado pelo asterisco *. Em nosso arquivo CSS, definiremos esse seletor universal, atribuindo a ele uma margem de 0 e um padding de 0.
*{
margin: 0;
padding: 0;
}Essa definição geral não sobrescreverá as estilizações específicas que criamos anteriormente, graças à regra de especificidade vista anteriormente. Dessa forma, o padding que aplicamos ao botão “Entrar” continuará sendo aplicado normalmente.
Nosso footer está criado, mas atualmente, ele só possui o parágrafo escrito “Brasil“. Precisamos adicionar uma segunda seção com os hiperlinks, e essa segunda seção também precisa ser dividida em duas partes.
Para isso, vamos utilizar a tag <div>. Essa tag nos permite agrupar elementos dentro do HTML em uma seção, sem uma semântica específica. Ou seja, ela não possui significado por si só, mas é útil para organizar e estruturar o código HTML, agrupando elementos relacionados.
Dentro do nosso footer, definiremos duas <div>, sendo que dentro da segunda <div>, precisaremos definir outras duas <div>.
A primeira <div> ficará com a nossa tag de parágrafo e o texto Brasil.
<footer>
<div>
<p>Brasil</p>
</div>
</footer>Dentro da segunda <div>, teremos duas subdivisões. A primeira conterá os links: “Sobre“, “Publicidade“, “Negócios” e “Como funciona a Pesquisa“. E a segunda parte conterá: “Privacidade“, “Termos e Configurações“.
Na página do Google, vamos copiar os links de cada um desses hiperlinks e organizá-los em anchor tags dentro das nossas divs.
<footer>
<div>
<p>Brasil</p>
</div>
<div>
<div>
<a href="https://about.google/?utm_source=google-BR&utm_medium=referral&utm_campaign=hp-footer&fg=1">Sobre</a>
<a href="https://ads.google.com/intl/pt-BR_br/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">Publicidade</a>
<a href="https://smallbusiness.withgoogle.com/intl/pt-BR_br/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=ww-ww-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u&c=BR#!/">Negócios</a>
<a href="https://google.com/search/howsearchworks/?fg=1">Como funciona a Pesquisa</a>
</div>
<div>
<a href="https://policies.google.com/privacy?hl=pt-BR&fg=1">Privacidade</a>
<a href="https://policies.google.com/terms?hl=pt-BR&fg=1">Termos</a>
<p>Configurações</p>
</div>
</div>
</footer>O único termo que não será uma anchor tag será “Configurações“, pois se trata de um botão e não de um link. Por enquanto, definiremos ele como um parágrafo, pois iremos editá-lo posteriormente.
Dessa forma, nossa página ficará da seguinte forma:
Se observarmos, nosso rodapé está com duas fontes diferentes: uma para os parágrafos “Brasil” e “Configurações” e outra para os hiperlinks.
Verificando a fonte dos elementos dentro da página do Google, podemos constatar que apenas a fonte do botão “Entrar” é diferente do restante. Todos os outros elementos usam Arial, Sans-Serif.
Como aprendemos a utilizar o seletor universal, podemos retirar essa definição de fonte de dentro do seletor da anchor tag e transferi-la para o seletor universal dentro do arquivo CSS.
Desse modo, todos os elementos da página utilizarão essa fonte, exceto o botão “Entrar”, que terá uma fonte própria definida.
*{
margin: 0;
padding: 0;
font-family: arial, sans-serif;
}Além do estilo da fonte, podemos definir o tamanho padrão da fonte como 14px e, nos seletores que precisarem de tamanhos diferentes, personalizarmos.
*{
margin: 0;
padding: 0;
font-family: arial, sans-serif;
font-size: 14px;
}
h1{
color:red;
}
a {
text-decoration: none;
color: #000000de;
font-size: 13px;
}
img{
height:92px;
}
.icone-produtos {
width: 24px;
fill: #5f6368;
}
.botao-entrar {
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
background-color: #1a73e8;
color: #ffffff;
padding: 10px 30px;
border-radius: 4px;
}
footer{
background-color: #f2f2f2;
}Agora que possuímos várias anchor tags <a> na nossa página, torna-se inviável manter toda a personalização delas pelo seletor a{} no nosso arquivo CSS.
Isso porque cada grupo de anchor tags possui estilizações específicas. As tags de ancoragem do cabeçalho (header) não possuem a mesma estilização das tags de ancoragem do rodapé.
Para facilitar a edição desses elementos, podemos atribuir classes para as anchor tags do cabeçalho dentro do nosso código HTML. Assim, podemos estilizá-las de acordo com a classe.
<body>
<header>
<a class="link-cabecalho" href="https://mail.google.com/mail/&ogbl">Gmail</a>
<a class="link-cabecalho" href="https://www.google.com/imghp?hl=pt-BR&ogbl">Imagens</a>
<svg class="icone-produtos" focusable="false" viewBox="0 0 24 24">
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
<image
src="https://ssl.gstatic.com/gb/images/bar/al-icon.png"
alt=""
height="24"
width="24"
style="border:none;display:none \9">
</image>
</svg>
<a class="botao-entrar" href="https://accounts.google.com/ServiceLogin?hl=pt-PT&passive=true&continue=https://www.google.com/&ec=GAZAmgQ">Entrar</a>
</header>Dentro do arquivo CSS, podemos personalizar a partir da classe link-cabecalho:
a {
text-decoration: none;
}
.link-cabecalho {
color: #000000de;
font-size: 13px;
}Agora, as tags de ancoragem que não fazem parte da classe link-cabecalho não terão uma cor estilizada. Estarão com a cor padrão de link.
Podemos definir uma cor padrão de fonte no nosso seletor universal, que também será aplicado às anchor tags do rodapé.
*{
margin: 0;
padding: 0;
font-family: arial, sans-serif;
font-size: 14px;
color: #202124;
}
Agora, precisamos ajustar o padding do rodapé da nossa página. Ao verificar a página do Google, notamos que o padding para ambas as seções do rodapé compartilha a mesma medida.
Vamos atribuir para as duas divs a classe caixa-rodape:
<footer>
<div class="caixa-rodape">
<p>Brasil</p>
</div>
<div class="caixa-rodape">
<div>
<a href="https://about.google/?utm_source=google-BR&utm_medium=referral&utm_campaign=hp-footer&fg=1">Sobre</a>
<a href="https://ads.google.com/intl/pt-BR_br/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">Publicidade</a>
<a href="https://smallbusiness.withgoogle.com/intl/pt-BR_br/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=ww-ww-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u&c=BR#!/">Negócios</a>
<a href="https://google.com/search/howsearchworks/?fg=1">Como funciona a Pesquisa</a>
</div>
<div>
<a href="https://policies.google.com/privacy?hl=pt-BR&fg=1">Privacidade</a>
<a href="https://policies.google.com/terms?hl=pt-BR&fg=1">Termos</a>
<p>Configurações</p>
</div>
</div>
</footer>E estilizar a partir da classe dentro do arquivo CSS:
.caixa-rodape {
padding: 15px 30px;
}
Além de ajustarmos o padding do rodapé, precisamos delimitar a borda do rodapé. No entanto, essa borda só está presente dentro da seção onde está escrito “Brasil” no nosso rodapé.
Para delimitarmos a estilização para essa div, podemos adicionar uma nova classe à nossa div. Essa classe será a caixa-rodape–borda. Essa nomenclatura indica o modificador que queremos adicionar e estilizar. Ou seja, estamos pegando o bloco caixa-rodape e o modificador –borda.
<footer>
<div class="caixa-rodape caixa-rodape--borda">
<p>Brasil</p>
</div>
<div class="caixa-rodape">
<div>
<a href="https://about.google/?utm_source=google-BR&utm_medium=referral&utm_campaign=hp-footer&fg=1">Sobre</a>
<a href="https://ads.google.com/intl/pt-BR_br/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">Publicidade</a>
<a href="https://smallbusiness.withgoogle.com/intl/pt-BR_br/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google&utm_medium=ep&utm_campaign=google_hpbfooter&utm_content=google_hpbfooter&gmbsrc=ww-ww-et-gs-z-gmb-s-z-u~sb-g4sb_srvcs-u&c=BR#!/">Negócios</a>
<a href="https://google.com/search/howsearchworks/?fg=1">Como funciona a Pesquisa</a>
</div>
<div>
<a href="https://policies.google.com/privacy?hl=pt-BR&fg=1">Privacidade</a>
<a href="https://policies.google.com/terms?hl=pt-BR&fg=1">Termos</a>
<p>Configurações</p>
</div>
</div>
</footer>No nosso arquivo CSS, podemos estilizar essa borda da seguinte forma:
.caixa-rodape--borda {
border-bottom: 1px solid #dadce0;
}Dessa maneira, teremos nosso rodapé estilizado como deve ser.
Para as próximas aulas, iremos fazer a distribuição e ajustes do layout da página para posicionar os elementos pela página conforme necessário.
Na nossa quarta aula do curso de introdução ao HTML e CSS, daremos continuidade à construção da réplica da página do Google. Nessa aula, ajustaremos o layout da página do Google utilizando o Flexbox.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, veremos como ajustar o layout da página do Google, que estamos construindo no nosso curso de introdução ao HTML e CSS.
Faremos esse ajuste utilizando o Flexbox, uma ferramenta muito útil na hora de posicionar os elementos dentro da página.
Esse é um procedimento bem tranquilo que faremos utilizando as ferramentas do programador. Dessa forma, você conseguirá testar como cada uma das opções funciona e assim saber qual delas utilizar em seus futuros códigos.
Então, vamos fazer o ajuste do cabeçalho e do rodapé da nossa página para deixar tudo no formato da página original!
O Flexbox é a forma mais atual de construirmos layouts em CSS. Nesta aula, vamos mexer no layout do cabeçalho e do rodapé utilizando o Flexbox.
Vamos carregar a nossa página do Google e pressionar F12 para abrir a ferramenta do programador, pois poderemos alterar nossa página diretamente por ela. E visualizar as mudanças antes de aplicá-las em nosso código.
Ou seja, se clicarmos em Styles, podemos adicionar uma propriedade e alterá-la diretamente na ferramenta de programador. Para isso, vamos selecionar o Header no HTML da ferramenta de programador e adicionar a propriedade display com o valor flex no CSS.
Toda vez que alteramos o display de algum elemento, estamos tanto alterando o display daquele elemento quanto no display dos elementos filhos dele.
Algumas propriedades mexem apenas no elemento especificamente, enquanto outras alteram também os elementos filhos. No caso do display: flex;, estamos alterando tanto o elemento pai quanto os elementos filhos dele.
Ao alterar a propriedade display para flex, criamos um Flex Container. Ao selecioná-lo no HTML dentro da ferramenta de desenvolvedor, podemos ver toda sua área destacada dentro da página.
E, clicando sobre a palavra flex, ele irá realçar cada um dos elementos que estão contidos dentro desse Flex Container.
Cada um desses elementos realçados que estão contidos dentro do nosso Flex Container são os elementos filhos que chamamos de Flex Child.
Dentro das ferramentas do programador, na parte de CSS, também podemos visualizar algumas das opções de propriedade flex que podemos aplicar. Basta clicar no ícone ao lado de flex no CSS para abrir o Flexbox Editor.
E só selecionando essas opções já conseguiremos visualizar como serão alterações no nosso header. A primeira propriedade vai dizer qual a direção do Flex Container. Em linhas da esquerda para direita, em colunas de cima para baixo, em linhas da direita para esquerda e em colunas de baixo para cima.
Você pode testar as opções para visualizá-las, mas utilizaremos a primeira mesmo, que é a flex-direction: row;
Outra propriedade que iremos utilizar é a align-items para que todos os nossos itens fiquem alinhados ao centro da caixa da qual elas fazem parte. Para isso, utilizaremos o align-items: center;
Por fim, a última propriedade que iremos alterar será a justify-content selecionando a opção flex-end.
Isso irá mover os nossos elementos para o final, deixando-os no canto superior esquerdo.
Como o padrão do flex-direction é o row, podemos removê-lo, pois isso não fará diferença para o resultado que queremos.
Por fim, podemos adicionar um espaçamento entre todos os nossos elementos do Header e também adicionar o padding a ele. Para isso, utilizaremos a propriedade gap para delimitar o espaçamento entre os elementos, passando para ela o valor de 15px.
E para o padding passaremos o valor de 6px e 14px, para que ele tenha o espaçamento interno em cima e embaixo de 6px e aos lados de 14px.
Por fim, vamos ajustar o nosso botão ícone-produtos (o das bolinhas). Vamos criar uma nova div dentro do nosso HTML e colocar todo esse botão dentro dela. Para essa div, vamos passar a classe caixa-icone.
<div class="caixa-icone">
<svg class="icone-produtos" focusable="false" viewBox="0 0 24 24">
<path
d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
></path>
<image
src="https://ssl.gstatic.com/gb/images/bar/al-icon.png"
alt=""
height="24"
width="24"
style="border: none; display: none \9"
></image>
</svg>
</div>Dentro do CSS, vamos definir um estilo para essa classe e também adicionar o estilo que criamos para o nosso Header utilizando a ferramenta de programador.
.caixa-icone {
width: 48px;
height: 48px;
}
header {
display: flex;
align-items: center;
justify-content: end;
gap: 15px;
padding: 6px 14px;
}Podemos salvar as mudanças e voltarmos para visualizar nossa página.
Perceba que nosso ícone de produtos não está centralizado e nem utilizando todo o espaço da caixa-icone. Para isso, podemos utilizar o que aprendemos sobre a flexbox para ajustá-la. Então, dentro do nosso CSS, iremos modificar o estilo dessa caixa:
.caixa-icone {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
}
Agora que o layout do nosso cabeçalho está ajustado, podemos aplicar a mesma lógica para ajustar o nosso rodapé.
Se compararmos nossa página com a página oficial do Google, veremos que para o rodapé não precisaremos mexer na parte onde está escrito Brasil. Apenas na segunda div do nosso rodapé, onde temos os hiperlinks.
Precisamos relembrar que dentro dessa div possuímos outras duas divs que dividem os hiperlinks do nosso rodapé, cada uma ficando em um canto da tela.
Então, vamos começar modificando a primeira div, transformando-a em um flex container e aplicando a ela um gap de 30px.
Para a segunda div, queremos o mesmo espaçamento, então iremos criar uma mesma classe para essas duas divs que será a caixa-link. Vamos alterar isso no nosso HTML e depois copiar a estilização que testamos nas ferramentas de programador para o CSS.
HTML:
<footer>
<div class="caixa-rodape caixa-rodape--borda"><p>Brasil</p></div>
<div class="caixa-rodape">
<div class="caixa-links">
<a
href="https://about.google/?utm_source=google-BR&utm_medium=referral&utm_campaign=hp-footer&fg=1"
>Sobre</a>
<a
href="https://www.google.com/intl/pt-BR_br/ads/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1"
>Publicidade</a>
<a
href="https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1"
>Negócios</a>
<a href="https://google.com/search/howsearchworks/?fg=1"
>Como funciona a Pesquisa</a>
</div>
<div class="caixa-links">
<a href="https://policies.google.com/privacy?hl=pt-BR&fg=1"
>Privacidade</a>
<a href="https://policies.google.com/terms?hl=pt-BR&fg=1">Termos</a>
<p>Configurações</p>
</div>
</div>
</footer>CSS:
.caixa-links {
display: flex;
gap: 30px;
}
Agora precisamos transformar a nossa div com a classe caixa-rodape em um Flex Container. Faremos isso para podermos ajustar essas duas divs contidas dentro dela, cada uma em um canto da tela.
Podemos fazer os testes utilizando o flexbox editor na ferramenta de programador e veremos que a opção justify-content: space-between; fornecerá o estilo que desejamos.
Podemos aplicar essa modificação dentro do nosso arquivo CSS.
.caixa-rodape {
display: flex;
justify-content: space-between;
padding: 15px 30px;
}Hoje, chegamos à quinta aula do Curso Básico de Introdução ao HTML e CSS, dando a você a oportunidade de dar seus primeiros passos na criação da sua própria versão do Google. Nesta aula, focaremos na parte central do site do Google, a seção onde realizamos as pesquisas!!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, aprenderemos a criar a seção de pesquisa da nossa réplica do Google, a parte crucial onde as pesquisas acontecem. Veremos como inserir um campo de texto no HTML, adicionar ícones, ajustar utilizando o flexbox e separar os elementos de maneira eficiente.
Muitas dessas etapas já foram abordadas nas aulas anteriores, tornando esta aula importante não apenas para implementar novas funcionalidades em nossa página, mas também para revisitar e fixar os conceitos aprendidos anteriormente.
Além disso, vamos criar mais dois botões e inserir uma anchor tag na parte final da página. Com esta aula, nossa página réplica do Google ficará ainda mais próxima da original e do resultado que estamos procurando.
Nas aulas anteriores, finalizamos o cabeçalho, rodapé e ajustamos o layout dessas seções da página.
Nesta aula, vamos focar na criação da seção principal da página: a parte de pesquisa da página do Google.
Vamos começar a desenvolver essa seção nesta aula e finalizar a formatação dela, bem como algumas funcionalidades, na próxima aula.
O primeiro ponto que podemos começar ajustando na nossa página é em relação à imagem do Google. Já inserimos essa imagem na nossa página e definimos a altura dela como 92 pixels no nosso arquivo CSS.
No entanto, essa altura foi definida para todas as tags de imagem (img) porque utilizamos um seletor de tag para definir a propriedade dela. Porém, essa não é a melhor forma para fazermos isso.
O mais recomendado para esses casos seria utilizar uma classe específica, assim essa formatação ficará aplicada apenas à imagem da logo do Google e não a todas as imagens da página. Então, no nosso código HTML, vamos adicionar essa classe à nossa imagem.
<img
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>Assim, podemos trocar nosso seletor de tag que usava a tag img pelo seletor de classe dentro do arquivo CSS.
Vamos alterar este:
img {
height: 92px;
}Para este:
.logo-google {
height: 92px;
}Assim, temos uma seleção muito mais inteligente e eficiente.
Na seção principal de pesquisa do Google, temos um input de texto, alguns ícones e botões, todos separados por espaçamentos, que, como vimos na aula passada, são definidos pelo gap.
Vamos começar a desenvolver a seção principal da nossa página pela caixa de pesquisa.
Nela, temos o input de texto, onde o usuário irá digitar sua busca, e mais 4 ícones (lupa, teclado, microfone e câmera).
Dentro da tag <main>, abaixo da tag de imagem, vamos criar uma nova div com a class caixa-input.
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>
<div class="caixa-input">
</div>O primeiro elemento da nossa caixa de pesquisa é o ícone da lupa. Então, iremos utilizar a ferramenta de programador para inspecionar o elemento.
Feito isso, vamos clicar com o botão direito do mouse no código do elemento e selecionar a opção Copy Element.
Com o elemento copiado, podemos colá-lo dentro da div que acabamos de criar e atribuir uma classe a ele (icone-input).
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>
<div class="caixa-input">
<svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="icone-input"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5
6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5
4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01
5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
</div>
</main>Na sequência desse ícone, temos o campo de input, onde o usuário poderá digitar a sua pesquisa. Então, vamos adicionar uma tag de input ao nosso código HTML, que nesse caso será do tipo texto (text).
Também podemos passar para ele uma class que usaremos depois para formatá-lo dentro do CSS.
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>
<div class="caixa-input">
<svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="icone-input"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5
6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5
4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01
5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
<input type="text" class="input-pesquisa" />
</div>
</main>Depois da caixa de texto, teremos o segundo ícone, que é o do teclado. Podemos inspecioná-lo com a ferramenta de programador e veremos que esse ícone, diferente da lupa, não é um elemento SVG, mas sim uma imagem contida dentro de uma tag span.
Podemos copiar essa imagem, pegando o endereço dela que aparecerá dentro da caixa de estilos (styles) da ferramenta de programador.
Já vimos como fazer para adicionar uma imagem ao nosso código HTML, então podemos inserir essa imagem logo abaixo do input, atribuindo uma classe a ela.
<main>
<img
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>
<div class="caixa-input">
<svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="icone-input"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5
6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5
4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01
5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
<input type="text" class="input-pesquisa" />
<img
src="https://www.gstatic.com/inputtools/images/tia.png"
alt="Ícone de Teclado"
class="icone-teclado"
/>
</div>
</main>Agora podemos fazer o mesmo para o ícone de microfone e de câmera, ambos são elementos SVG, então podemos copiá-los e ir adicionando ao nosso código HTML. O único cuidado que teremos é alterar a classe padrão do Google pela classe que utilizaremos.
<main>
<img
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>
<div class="caixa-input">
<svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="icone-input"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5
6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5
4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01
5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
<input type="text" class="input-pesquisa" />
<img
src="https://www.gstatic.com/inputtools/images/tia.png"
alt="Ícone de Teclado"
class="icone-teclado"
/>
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#4285f4"
d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.
01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
></path>
<path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
<path
fill="#fbbc05"
d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.
45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
></path>
<path
fill="#ea4335"
d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.
26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.
99c0 2.92-2.24 4.93-5 4.93z"
></path></svg>
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 192 192"
xmlns="http://www.w3.org/2000/svg"
>
<rect fill="none" height="192" width="192"></rect>
<g>
<circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
<circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
<path
fill="#ea4335"
d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.
1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z"
></path>
<path
fill="#fbbc05"
d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.
8,0,16,8.29,16,18v30h16V72.8z"
></path>
<path
fill="#4285f4"
d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.
8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z"
></path>
</g>
</svg>
</div>
</main>Os ícones do teclado, do microfone e da câmera estão agrupados e separados por um mesmo gap, então vamos inseri-los dentro de uma tag <div> com a classe caixa-icones.
<main>
<img
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>
<div class="caixa-input">
<svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="icone-input"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
<input type="text" class="input-pesquisa" />
<div class="caixa-icones">
<img
src="https://www.gstatic.com/inputtools/images/tia.png"
alt="Ícone de Teclado"
class="icone-teclado"
/>
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#4285f4"
d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
></path>
<path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
<path
fill="#fbbc05"
d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
></path>
<path
fill="#ea4335"
d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
></path>
</svg>
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 192 192"
xmlns="http://www.w3.org/2000/svg"
>
<rect fill="none" height="192" width="192"></rect>
<g>
<circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
<circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
<path
fill="#ea4335"
d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z"
></path>
<path
fill="#fbbc05"
d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z"
></path>
<path
fill="#4285f4"
d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z"
></path>
</g>
</svg>
</div>
</div>
</main>Agora que já inserimos esses elementos à nossa página, precisamos formatá-los para o tamanho correto. Então, dentro do arquivo CSS, vamos adicionar os seletores para cada uma das classes que passamos para eles e adicionar as medidas.
.icone-input {
width: 20px;
}
.icone-teclado {
width: 19px;
}
.icone-colorido {
width: 24px;
}Além disso, verificando o elemento da caixa de pesquisa como um todo, na página oficial do Google, veremos que ela tem 583px de largura. Então, também podemos adicionar essa formatação ao nosso arquivo CSS.
.caixa-input {
width: 583px;
}Isso fará com que nossa página fique assim:
Vamos ajustar agora o layout da caixa de pesquisa utilizando o display flex. Carregue a sua página no navegador, abra as ferramentas de programador e selecione a caixa de pesquisa.
Em styles, vamos adicionar a propriedade display com o valor de flex. Fazendo isso, poderemos utilizar a flexbox para editar e ajustar o layout da nossa caixa de pesquisa.
Vamos alterar o align-items para center e passar um gap de 13px.
Além disso, precisamos transformar a div que criamos para agrupar os ícones do teclado, microfone e da câmera em um elemento flex. Então, selecione a div com a classe caixa-icones.
Adicione a ela também a propriedade display com o valor flex. Atribua também a propriedade align-items com o valor center e o gap de 16px.
Por fim, precisamos definir que o input deve ocupar todo o espaço disponível. Para isso, selecione o elemento referente ao input e podemos definir o width como 100%.
Feitas essas modificações, nossa página ficará assim.
Para aplicar de fato isso ao nosso projeto, precisamos implementar essas modificações dentro do arquivo CSS.
Então, para o seletor da classe caixa-input, vamos passar as propriedades do display, align-items e gap.
.caixa-input {
width: 583px;
display: flex;
align-items: center;
gap: 13px;
}Vamos criar o seletor para a classe caixa-icones e vamos adicionar as propriedades que testamos na ferramenta de desenvolvedor.
.caixa-icones{
display: flex;
align-items: center;
gap: 16px;
}Por fim, vamos criar um seletor para a classe do nosso input, passando o width de 100%.
.input-pesquisa {
width:100%;
}Com isso, todos os estilos que testamos dentro da ferramenta do programador na própria página estarão aplicados e salvos dentro do arquivo CSS.
Se compararmos o ícone de busca da nossa página atual com o ícone de busca da página do gabarito, veremos que o da nossa página está um pouco mais escuro. Podemos inspecionar o elemento pela página do Google do gabarito e copiar a cor de preenchimento dele (fill).
Além disso, nosso ícone de busca está atualmente com 15px, mas queremos que ele tenha no mínimo 20px, que foi o que definimos anteriormente. Para determinar que ele não possa ter menos do que 20px, precisamos passar também a propriedade min-width.
Então, vá até o arquivo CSS do projeto e no seletor da classe icone-input, adicione a propriedade fill e a propriedade min-width.
.icone-input {
width: 20px;
min-width: 20px;
fill: #9aa0a6;
}Com isso, o ícone da lupa ficará com a cor e o tamanho desejado.
Outro ajuste que precisamos realizar no nosso projeto é quanto à margem (margin) e o padding da nossa caixa de texto. Se observarmos a página do Google, veremos que há uma margem de 10px em cima e embaixo e um padding de 14px nas laterais.
Podemos fazer esse ajuste usando apenas o padding sem precisar usar a margin, então, dentro do arquivo CSS, vamos adicionar a propriedade padding ao seletor da classe caixa-input.
.caixa-input {
width: 583px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 13px;
}Sendo que o primeiro valor do padding se refere à parte superior e inferior, e o segundo valor se refere ao padding lateral (esquerda e direita).
Além disso, a caixa de pesquisa no Google possui aquela borda arredondada ao redor dela.
Vamos adicionar esse elemento ao nosso projeto. Ainda no seletor da classe caixa-input, vamos definir a propriedade border passando os valores referentes ao tamanho, ao estilo e à cor dela. E a propriedade border-radius que fará com que ela tenha os cantos arredondados.
.caixa-input {
width: 583px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 13px;
border: 1px solid #dfe1e5;
border-radius: 100px;
}Como a borda da caixa de pesquisa é um semicírculo perfeito, isso significa que o valor da propriedade border-radius é muito alto, por isso defini como 100px para garantir que a nossa caixa ficará com as bordas arredondadas.
Repare que a nossa página já está começando a ficar mais próxima da página original do Google. Vamos ajustar, removendo essa borda interna do campo de input de texto. E ajustando a altura dele para 22px.
Vá até o arquivo CSS, e no seletor da classe input-pesquisa, adicione a propriedade border com o valor none e height com o valor de 22px.
.input-pesquisa {
width: 100%;
height: 22px;
border: none;
}Lembrando que todos esses valores e propriedades dos elementos podem ser verificados utilizando a ferramenta de programador na página oficial do Google ou no gabarito disponível no material para download.
Feitas essas alterações e salvando, a nossa página ficará da seguinte forma:
O próximo passo para criar a nossa réplica da página do Google será implementar os botões de “Pesquisa Google” e “Sinto-me com Sorte”.
Vamos começar desenvolvendo os botões no código HTML. Abaixo da div que criamos para os elementos da caixa de pesquisa (a div com a classe caixa-input), vamos criar uma nova div com a classe caixa-botoes.
<main>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
alt="Logo do Google"
class="logo-google"
/>
<div class="caixa-input">
<svg
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
class="icone-input"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
<input type="text" class="input-pesquisa" />
<div class="caixa-icones">
<img
src="https://www.gstatic.com/inputtools/images/tia.png"
alt="Ícone de Teclado"
class="icone-teclado"
/>
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#4285f4"
d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
></path>
<path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
<path
fill="#fbbc05"
d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
></path>
<path
fill="#ea4335"
d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
></path>
</svg>
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 192 192"
xmlns="http://www.w3.org/2000/svg"
>
<rect fill="none" height="192" width="192"></rect>
<g>
<circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
<circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
<path
fill="#ea4335"
d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z"
></path>
<path
fill="#fbbc05"
d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z"
></path>
<path
fill="#4285f4"
d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z"
></path>
</g>
</svg>
</div>
</div>
<div class="caixa-botoes">
</div>
</main>Dentro dessa div, vamos utilizar a tag button para criar os botões. Para cada tag, passaremos a classe botao e o texto correspondente a eles.
<div class="caixa-botoes">
<button class="botao">Pesquisa Google</button>
<button class="botao">Sinto-me com sorte</button>
</div>Com isso os botões já serão exibidos dentro da página, apesar de ainda não terem nenhuma funcionalidade.
Agora precisamos formatá-los. Esses botões terão uma formatação semelhante à do botão Entrar.
Para agilizarmos a formatação deles, podemos copiar as propriedades do seletor botao-entrar no nosso arquivo CSS e criar um novo seletor para a classe botao, passando as mesmas propriedades.
.botao {
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
background-color: #1a73e8;
color: #ffffff;
padding: 10px 30px;
border-radius: 4px;
font-size: 14px;
}Essa será a base do nosso seletor para a classe botao, e a partir dela faremos as modificações necessárias. Vamos remover as propriedades font-family, font-weight, e color. Alterar o valor da propriedade background-color e adicionar a propriedade border com o valor de none.
.botao {
padding: 10px 30px;
border-radius: 4px;
font-size: 14px;
background-color: #f8f9fa;
border: none;
}Com essas modificações, nossos botões ficarão assim:
Repare como os dois seletores de botões são muito semelhantes, existem propriedades que se repetem em ambos.
Uma boa prática, quando temos situações como essa, é criar o que chamamos de variações ou modificações de uma classe.
Essa prática é útil quando precisamos reutilizar estilos de uma classe em outra. E repare que as propriedades presentes na classe botao se repetem na classe botao-entrar, tendo apenas algumas modificações e adições.
Sendo assim, podemos transformar a classe botao-entrar no modificador botao–entrar, que por padrão usa-se o hífen duplo. E dentro desse seletor, podemos deixar apenas as modificações que o botão Entrar tem em relação ao botão padrão.
.botao {
padding: 10px 30px;
border-radius: 4px;
font-size: 14px;
background-color: #f8f9fa;
border: none;
}
.botao--entrar {
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
background-color: #1a73e8;
color: #ffffff;
}Feito isso, precisamos alterar no código HTML, onde antes tínhamos a classe botao-entrar, adicionar a classe botao e o modificador botao–entrar.
<a
class="botao botao--entrar"
href="https://accounts.google.com/ServiceLogin?hl=pt-PT&passive=true&continue=https://www.google.com/&ec=GAZAmgQ"
>Entrar</a
>Para te auxiliar a se localizar, essa anchor tag referente ao botão Entrar está dentro da tag header do arquivo HTML.
Com os seletores de classe e modificadores de classes definidos, precisamos fazer ainda alguns ajustes na nossa caixa de botões, ajustando o espaçamento entre eles. Para isso, podemos criar o seletor para a classe caixa-botoes e definir as propriedades display e gap.
.caixa-botoes{
display: flex;
gap: 8px;
}Além disso, para que o cursor do mouse vire uma mãozinha quando o posicionarmos sobre os botões, precisamos adicionar a propriedade cursor com o valor pointer para o seletor da classe botao.
.botao {
padding: 10px 30px;
border-radius: 4px;
font-size: 14px;
background-color: #f8f9fa;
border: none;
cursor: pointer;
}
O último elemento que precisamos adicionar à seção principal do nosso site é o texto que aparece logo abaixo dos botões.
Essa parte pode ser feita de diversas formas diferentes, mas vamos seguir a criação para ficar igual à página do Google.
Para isso, abaixo da div dos nossos botões, vamos criar uma nova div, com a classe caixa-disponibilizado.
Dentro dessa div, vamos definir uma tag de parágrafo com o texto “Disponibilizado pelo Google em:”.
E logo abaixo, uma anchor tag contendo o texto “Português (Brasil)”, a classe link-disponibilizado, e o atributo href com o link referente.
<div class="caixa-disponibilizado">
<p>Disponibilizado pelo Google em:</p>
<a
class="link-disponibilizado"
href="https://www.google.com/setprefs?sig=0_0_8ZdpK90H8iLFWtsJYBReCVsSQ%3D&hl=pt-BR&source=homepage&sa=X&ved=0ahUKEwjutpbDu62DAxVclJUCHTmaCmcQ2ZgBCBI"
>Português (Brasil)</a
>
</div>Feito isso, vamos formatar o tamanho e a cor da fonte desse texto usando o seletor de classe caixa-disponibilizado, que é referente a essa div.
.caixa-disponibilizado {
color: #4d5156;
font-size: 13px;
}
Repare que nosso texto está dividido em duas linhas. Em uma, temos o elemento referente ao parágrafo, e na outra, o elemento da âncora.
Para ajustar isso, podemos transformar essa div em um elemento flex e fazer os ajustes de espaçamento com a propriedade gap, como já vimos anteriormente.
Além disso, o texto do link não está em azul como deveria. Podemos também adicionar um novo seletor ao nosso arquivo CSS utilizando a classe link-disponibilizado e alterando a cor da fonte.
.caixa-disponibilizado {
color: #4d5156;
font-size: 13px;
display: flex;
gap: 5px;
}
.link-disponibilizado {
color: #1a0dab;
}
Já temos todos os elementos da seção principal criados. Agora precisamos ajustar o espaçamento entre eles.
Todos esses elementos estão contidos dentro da nossa tag main, que seria o elemento pai de todos os outros elementos que criamos ao longo dessa aula.
Então, podemos selecionar nosso elemento main e dentro da ferramenta de programador na nossa página na internet, definirmos que esse será um elemento flex. Assim, podemos utilizar a flexbox para personalizá-lo e copiarmos o estilo para dentro do arquivo CSS.
Podemos copiar esse estilo para dentro do nosso arquivo CSS usando o seletor de tag main.
main{
display: flex;
flex-direction: column;
align-items: center;
gap: 29px;
}Nossa página ficará assim:
Nossa página já está bem próxima do resultado da página de pesquisa do Google. No entanto, ainda temos algumas questões que precisamos observar e ajustar.
O primeiro ponto que você pode reparar é que o rodapé da página não está ficando na parte inferior da tela. Ele aparece abaixo dos outros elementos, mas não aparece ao final.
Além disso, não há um espaçamento entre o texto “Disponibilizado pelo Google em: Português (Brasil)” e o nosso rodapé.
Para adicionarmos esse espaçamento entre o texto e o rodapé, podemos adicionar a propriedade margin-bottom com o valor de 10vh ao seletor de classe caixa-disponibilizado.
.caixa-disponibilizado {
color: #4d5156;
font-size: 13px;
display: flex;
gap: 5px;
margin-bottom: 10vh;
}O valor de 10vh é uma unidade de medida variável chamada viewport height. Essa unidade representa a porcentagem da altura da área visível da janela do navegador.
Quanto maior for a janela, maior será essa margem. No caso, o valor de 10vh corresponde a 10% da altura da janela.
Isso faz com que, independentemente do tamanho da janela, a seção principal de pesquisa seja empurrada um pouco mais para cima, mantendo-a mais próxima do centro da página.
Com esse último ajuste, só precisaremos fazer as edições e formatações finais na próxima aula para finalizarmos a nossa réplica da página do Google.
Na nossa sexta e última aula do Curso Básico de Introdução ao HTML e CSS, vamos concluir a nossa réplica da página do Google. Faremos os ajustes finais da página, como hover, borda, sublinhado e assim por diante.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, vamos finalizar o nosso curso básico de introdução ao HTML e CSS e concluir a construção da nossa réplica da página do Google, aplicando os retoques finais para deixá-la completa.
Vamos adicionar cada um dos detalhes da página, como o hover, borda, sublinhado, e as interações quando passamos o mouse pelos links e outros elementos da página.
E para finalizar, ainda veremos sobre pseudo-elementos e como ajustá-los na página para adicionar um texto ou alguma informação extra quando posicionamos o mouse sobre esses elementos.
Então, faça o download do material disponível e vamos finalizar a nossa própria página do Google.
Vamos começar ajustando a nossa sessão principal para que ela ocupe 100% do espaço disponível, tanto em largura quanto em altura. Por padrão, a largura sempre ocupará 100% do espaço disponível.
Então, podemos adicionar apenas a propriedade height com o valor de 100% ao nosso seletor main dentro do arquivo CSS.
main {
display: flex;
flex-direction: column;
align-items: center;
gap: 29px;
height: 100%;
}Além disso, é preciso definir a propriedade height com o valor de 100vh para o seletor do body.
body {
height: 100vh;
}Isso garantirá que o body ocupe toda a altura da área visível da janela do navegador, pois estamos definindo que o body tem o valor de 100vh, que corresponde a 100% do viewport height (altura da janela).
Repare que agora a nossa sessão principal (main) está ocupando 100% do espaço disponível, que é 100% do body. No entanto, nosso footer (rodapé) sumiu da tela, porque a sessão main ocupa todo o espaço, removendo o footer da exibição.
Para corrigirmos isso, precisamos que a sessão main passe a usar 100% do espaço disponível e não do espaço total. Faremos isso adicionando a propriedade display com o valor de flex para o seletor do body e a propriedade flex-flowcomo column.
body {
height: 100vh;
display: flex;
flex-flow: column;
}Isso alterará o layout padrão para que os elementos filhos do body (header, main e footer) se comportem como uma coluna, permitindo que a sessão main use 100% do espaço disponível sem atrapalhar a visualização do header e do footer.
Por fim, ainda podemos centralizar a sessão main adicionando a propriedade justify-content com o valor de center.
main {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 30px;
height: 100%;
}Com isso, nosso layout ficará com o resultado esperado, igual à página oficial do Google.
Com o layout da página pronto, vamos definir os estilos para os links, ícones e botões presentes nela quando passamos o mouse por cima deles.
Quando passamos o mouse por cima de um elemento, estamos mudando o estado daquele elemento para hover. O hover é uma pseudoclasse CSS que permite definir estilos específicos que são aplicados quando o usuário passa o mouse sobre algum elemento da página.
Para nossa página, vamos definir que ao posicionar o mouse sobre um link, ele ficará sublinhado. Faremos isso adicionando o seletor a:hover ao nosso arquivo CSS, que nos permitirá personalizar as anchor tags da página quando o mouse estiver sobre elas.
Para esse seletor, iremos passar a propriedade text-decoration com o valor de underline.
a:hover {
text-decoration: underline;
}Isso fará com que os links fiquem sublinhados quando o mouse estiver posicionado sobre eles.
No entanto, como definimos que todas as anchor tags do site devem ficar sublinhadas quando posicionamos o mouse sobre elas, esse mesmo text-decoration é aplicado ao nosso botão.
E esse botão não deve ter essa característica. No caso dele, ao posicionarmos o mouse em cima, ele deve mudar de cor e ganhar um sombreado.
Para isso, vamos adicionar ao nosso arquivo CSS o seletor referente ao botão Entrar com o estado de hover.
.botao--entrar:hover {
background-color: #1b66c9;
box-shadow: 0 1px 3px 1px rgba(66, 64, 67, 0.15),
0 1px 2px 0 rgba(60, 64, 67, 0.3);
text-decoration: none;
}Lembrando que essas propriedades foram verificadas a partir da página original do Google, com a ferramenta de desenvolvedor, como vimos nas aulas passadas.
Além do botão Entrar, a nossa caixa de input também precisa ter um sombreado quando interagimos com ela, então vamos adicionar o seletor .caixa-input:hover com a propriedade box-shadow também.
.caixa-input:hover {
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
border-color: transparent;
}
Porém, ainda temos um problema com o nosso input. Quando selecionamos ele, deixando-o ativo, a caixa para inserir o texto fica destacada.
Para removermos isso, vamos adicionar a propriedade outline com o valor de none ao seletor .input-pesquisa.
.input-pesquisa {
width: 100%;
height: 22px;
border: none;
outline: none;
}Agora, quando selecionarmos o input de pesquisa, essa caixa não ficará marcada.
No entanto, agora, quando nossa caixa de pesquisa está em foco, o nosso input está perdendo o sombreado que adicionamos anteriormente.
Para manter a mesma formatação de quando está com o mouse posicionado sobre ele, podemos adicionar o seletor .caixa-input:focus-within junto ao seletor .caixa-input:hover.
.caixa-input:hover,
.caixa-input:focus-within {
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
border-color: transparent;
}Repare que separamos um seletor do outro por uma vírgula e só precisamos declarar as propriedades uma única vez.
Dessa forma, o input terá o sombreado tanto quando estiver com o mouse posicionado sobre ele, quanto quando o elemento dentro dele estiver em foco.
Agora, vamos adicionar sombreado e borda aos botões abaixo do campo de pesquisa, o Pesquisa Google e Sinto-me com sorte.
Para isso, vamos criar o seletor .botao:hover adicionando a borda e a box-shadow. E adicionaremos uma borda inicial aos botões para evitar que ao posicionar o mouse sobre eles, eles empurrem o restante do conteúdo da página.
.botao {
padding: 10px 30px;
border-radius: 4px;
font-size: 14px;
background-color: #f8f9fa;
border: 1px solid transparent;
cursor: pointer;
}
.botao:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #dadce0;
}
No entanto, ao adicionarmos essas propriedades utilizando o seletor de botão, elas serão aplicadas a todos os botões da página, inclusive ao botão Entrar que já havíamos definido antes.
Como não queremos que o botão Entrar tenha uma borda, iremos passar essa propriedade dentro do seletor dele, com o valor de transparent.
.botao--entrar:hover {
background-color: #1b66c9;
box-shadow: 0 1px 3px 1px rgba(66, 64, 67, 0.15),
0 1px 2px 0 rgba(60, 64, 67, 0.3);
border-color: transparent;
text-decoration: none;
}Feito isso, precisamos ajustar os ícones de produtos, teclado, microfone e câmera. Vamos começar pelo ícone de produtos, para que ao posicionarmos o mouse sobre ele, fique destacado.
Para isso, precisaremos adicionar o seletor .caixa-icone:hover com a propriedade background-color e border-radius.
.caixa-icone:hover {
background-color: rgba(60, 64, 67, 0.08);
border-radius: 50%;
}A background-color será responsável por mudar a cor de fundo do ícone quando posicionarmos o mouse sobre ele, deixando-o em destaque. E a propriedade border-radius com o valor de 50% é o que transformará esse fundo em um círculo.
Também adicionaremos a propriedade cursor dentro do seletor .caixa-icone passando o valor de pointer para que, ao posicionarmos o mouse sobre esse ícone, o cursor do mouse mude de uma setinha para uma mãozinha.
.caixa-icone {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
cursor: pointer;
}O mesmo procedimento do cursor precisa ser feito para os ícones do teclado, microfone e câmera.
.icone-teclado {
width: 19px;
cursor: pointer;
}
.icone-colorido {
width: 24px;
cursor: pointer;
}Para finalizar a criação da nossa página do Google, precisamos adicionar um elemento que apresenta um texto explicativo quando posicionamos o mouse sobre os ícones da página.
Para fazer isso, precisamos criar um pseudo-elemento dentro dos nossos seletores CSS. Um pseudo-elemento é como se fosse uma parte de um elemento HTML que pode ser estilizado individualmente dentro do CSS.
Antes de criarmos nosso pseudo-elemento, vamos fazer alguns ajustes no nosso código HTML, criando uma nova div para cada ícone dentro da div responsável pela caixa de ícones.
<div class="caixa-icones">
<div class="caixa-teclado">
<img
src="https://www.gstatic.com/inputtools/images/tia.png"
alt="Ícone de Teclado"
class="icone-teclado"
/>
</div>
<div class="caixa-microfone">
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#4285f4"
d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
></path>
<path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
<path
fill="#fbbc05"
d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
></path>
<path
fill="#ea4335"
d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
></path>
</svg>
</div>
<div class="caixa-camera">
<svg
class="icone-colorido"
focusable="false"
viewBox="0 0 192 192"
xmlns="http://www.w3.org/2000/svg"
>
<rect fill="none" height="192" width="192"></rect>
<g>
<circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
<circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
<path
fill="#ea4335"
d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z"
></path>
<path
fill="#fbbc05"
d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z"
></path>
<path
fill="#4285f4"
d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z"
></path>
</g>
</svg>
</div>
</div>Perceba que agora temos novas divs com 3 classes distintas: caixa-teclado, caixa-microfone e caixa-camera. Feito isso, vamos criar os seletores referentes a essas classes dentro do nosso arquivo CSS.
Começaremos removendo a propriedade cursor com o valor pointer dos seletores icone-teclado e icone-colorido e atribuindo aos novos seletores. Podemos também remover essa propriedade do seletor caixa-icone e agrupá-lo aqui com os demais.
.caixa-teclado,
.caixa-microfone,
.caixa-camera,
.caixa-icone {
cursor: pointer;
}A partir daqui, podemos introduzir os nossos pseudo-elementos. Cada um desses ícones terá abaixo deles aquela caixinha com um texto explicativo quando posicionarmos o mouse sobre eles.
Para criar essa caixa, utilizaremos da seguinte sintaxe nome-do-elemento::after. Isso criará um pseudo-elemento filho imediatamente depois do elemento definido. Dentro desse pseudo-elemento, conseguimos adicionar conteúdo e formatações específicas.
Vamos começar criando o conteúdo para cada um desses elementos.
.caixa-teclado::after {
content: "Ferramentas de introdução";
}
.caixa-microfone::after {
content: "Pesquisa por voz";
}
.caixa-camera::after {
content: "Pesquisar por imagem";
}
.caixa-icone::after {
content: "Google Apps";
}
Repare que temos o conteúdo do nosso pseudo-elemento sendo exibido, porém sem nenhuma formatação. E é isso que faremos agora.
Vamos definir a cor do background, a família e a cor da fonte, assim como o padding, border-radius, tamanho e peso da fonte.
.caixa-teclado::after,
.caixa-microfone::after,
.caixa-camera::after,
.caixa-icone::after {
display: none;
background-color: #4f5355;
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: 500;
font-size: 13px;
}
Com isso, nossos pseudo-elementos já estarão com o visual desejado. No entanto, precisamos ajustar o posicionamento deles, para que eles sejam exibidos abaixo dos nossos elementos.
Para isso, precisamos adicionar a propriedade position para nossos pseudo-elementos passando o valor de absolute.
.caixa-teclado::after,
.caixa-microfone::after,
.caixa-camera::after,
.caixa-icone::after {
display: none;
background-color: #4f5355;
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: 500;
font-size: 13px;
position: absolute;
}Ao fazer isso, estamos definindo que esses elementos possuem uma posição absoluta na página.
Perceba que agora esses elementos não ficam quebrados, pois não estão mais condicionados ao fluxo (flow) da página e aos outros elementos presentes nela.
Para garantir que a posição desses pseudo-elementos seja relativa aos elementos pais deles, precisamos adicionar a propriedade position com o valor relative aos elementos pais desses pseudo-elementos.
.caixa-teclado,
.caixa-microfone,
.caixa-camera,
.caixa-icone {
cursor: pointer;
position: relative;
}
.caixa-teclado::after,
.caixa-microfone::after,
.caixa-camera::after,
.caixa-icone::after {
display: none;
background-color: #4f5355;
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: 500;
font-size: 13px;
position: absolute;
}Dessa forma, nossos pseudo-elementos com a propriedade position: absolute, irão buscar o primeiro elemento com o position relative, garantindo assim que eles se posicionem em relação aos elementos pais.
Agora só precisamos ajustar o posicionamento e as direções desses elementos dentro da página.
Primeiro de tudo, vamos definir a propriedade width com o valor de max-content, para garantir que todo o texto caiba dentro da caixa sem precisar ter quebra de linha.
.caixa-teclado::after,
.caixa-microfone::after,
.caixa-camera::after,
.caixa-icone::after {
display: none;
background-color: #4f5355;
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: 500;
font-size: 13px;
position: absolute;
width: max-content;
}Em seguida, vamos definir como esses pseudo-elementos irão se posicionar a partir do elemento pai. Passando as propriedades left com o valor de 50% e bottom com o valor de 0.
.caixa-teclado::after,
.caixa-microfone::after,
.caixa-camera::after,
.caixa-icone::after {
display: none;
background-color: #4f5355;
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: 500;
font-size: 13px;
position: absolute;
width: max-content;
left: 50%;
bottom: 0;
}Essas propriedades indicam que os pseudo-elementos devem ser posicionados a uma distância de 50% da largura do elemento pai a partir da margem esquerda. E com uma distância de 0 da margem inferior.
Isso fará com que o pseudo-elemento comece a partir da metade do elemento pai, e sua margem inferior estará alinhada à margem inferior do elemento pai também.
Repare que esse não é o resultado que desejamos ainda, pois não queremos que o texto sobreponha o elemento pai, e nem que ele comece no meio, mas sim que ele fique centralizado. Para isso, precisaremos passar a propriedade transform.
.caixa-teclado::after,
.caixa-microfone::after,
.caixa-camera::after,
.caixa-icone::after {
display: none;
background-color: #4f5355;
font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-weight: 500;
font-size: 13px;
position: absolute;
width: max-content;
left: 50%;
bottom: 0;
transform: translate(-50%, 30px);
}Essa propriedade nos permite ajustar o eixo x e y do elemento respectivamente.
Ou seja, passando -50% ele irá mover metade do tamanho do elemento para a esquerda. Isso fará com que ele fique posicionado exatamente no meio do elemento pai.
Além disso, ao passar 30px para o eixo y, estamos deslocando esse elemento para baixo em um valor de 30 pixels.
Para finalizar, só precisamos definir que esses pseudo-elementos só serão visíveis quando posicionarmos o mouse sobre eles, ou seja, quando o estado for hover.
.caixa-teclado:hover::after,
.caixa-microfone:hover::after,
.caixa-camera:hover::after,
.caixa-icone:hover::after {
display: block;
}Como fizemos essa formatação para todos os nossos pseudo-elementos, cada um dos nossos ícones terá abaixo dele sua mensagem correspondente sendo exibida quando posicionarmos o mouse sobre eles.
Dessa forma, finalizamos a construção da nossa réplica da página do Google, funcional e com as formatações e estilizações da página original.
Ao longo desse curso de Introdução ao HTML e CSS, você pôde aprender como dar seus primeiros passos nessas linguagens!!
Durante as aulas, desenvolvemos uma réplica da página inicial do Google, aprendendo HTML e CSS na prática.
Iniciamos pelo básico, abordando as informações fundamentais do HTML e do CSS, aprendendo como desenvolver e aplicar na prática, até chegar na sua própria versão da página inicial do Google.
Para acessar publicações de HTML e CSS, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador