Aprenda a criar uma landing page do zero com nosso curso de HTML e CSS! Entenda desde a estrutura básica da página até a responsividade e interatividade dela.
Ao longo deste curso, você aprenderá tudo o que precisa para criar uma landing page completa utilizando os conceitos de HTML, CSS e JavaScript!
Nosso objetivo é que você consiga dar seus primeiros passos na construção dessa página, compreendendo os conceitos mais importantes dessas linguagens e como aplicá-los na prática.
Vamos dar início ao curso de HTML e CSS com o objetivo de ensinar você a criar uma landing page 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 o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Na primeira aula, mostrarei como iniciar o projeto, qual página utilizaremos como base e quais seções nossa página terá.
Esse processo é importante, pois dará noção de como construir a página e como separar a criação em blocos, facilitando o desenvolvimento e a formatação.
Primeiro, desenvolveremos a estrutura base da página com HTML e depois partiremos para a formatação e estilização com CSS.
Para começar, focaremos na construção da seção principal (main) da nossa landing page. Então, faça o download do material disponível e vem comigo!
Ao longo deste curso, desenvolveremos do zero uma landing page como a da Masterclass Programação Full Stack da Hashtag.
Essa é uma landing page totalmente responsiva, ou seja, ela ajusta e adapta seu conteúdo de acordo com o dispositivo no qual é acessada e visualizada.
Para que você tenha uma base e compreenda melhor os conceitos abordados ao longo do curso, deixo aqui alguns minicursos que ajudarão você a começar seus estudos em HTML, CSS e JavaScript:
Podemos dividir essa landing page em diferentes seções: hero (destaque principal, tela inicial da página), disclaimer (declaração da LGPD), passo a passo (instruções para a inscrição), o que você vai aprender (conteúdo do curso), organizadores (equipe que está organizando o curso) e o rodapé (footer da página com a política de privacidade).
Você pode conferir essa página completa e cada uma das seções através deste link:
Essa será a página que usaremos como base para o nosso projeto.
Além disso, ao longo deste curso, utilizaremos o VS Code e algumas de suas extensões importantes para o desenvolvimento web, como a Live Server.
Caso queira conferir como baixar, instalar e personalizar seu VS Code com as extensões utilizadas ao longo desta e de outras aulas de HTML, CSS e JavaScript da Hashtag, confira esta aula:
Com todos os preparativos feitos, vamos abrir o VS Code e criar um arquivo HTML para darmos início ao projeto.
Dentro desse arquivo, vamos digitar ! e pressionar a tecla Tab. O VS Code reconhecerá que você deseja criar um arquivo HTML e construirá toda a estrutura básica para você.
Vamos alterar o <title>, título do documento, para “MasterClass Full Stack”.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> MasterClass Full Stack</title> </head> <body> </body> </html>
Para visualizar a página criada, basta clicar com o botão direito do mouse sobre o arquivo index.html e selecionar a opção Open with Live Server.
Essa opção só estará disponível se você tiver instalado a extensão Live Server no seu VS Code. Com ela, podemos visualizar a página criada no navegador.
Por enquanto, não haverá nada sendo exibido porque só temos a estrutura base de um documento HTML, sem nenhum conteúdo efetivamente adicionado.
Vamos começar o desenvolvimento da seção hero da nossa página! Para isso, dentro da tag <body> (corpo da página), definiremos a nossa tag <main>, onde desenvolvemos o conteúdo principal de uma página web.
O corpo (<body>) de uma página na internet pode ser dividido em algumas partes principais: o cabeçalho (<header>), a seção principal (<main>) e o rodapé (<footer>).
Caso queira compreender melhor cada uma dessas tags e seu uso, recomendo que confira nossa aula sobre HTML semântico, onde explico mais a fundo a diferenciação entre as seções e o significado de cada uma dessas tags:
Dentro da tag <main>, teremos diversas seções (<section>), uma para cada parte do site que listamos anteriormente.
Para a primeira <section>, definiremos duas classes: secao, que utilizaremos para as demais tags <section> do site, e secao–hero, que indica um modificador dessa classe.
Essa declaração de classes segue a convenção da metodologia BEM (Block Element Modifier), onde secao é o bloco (block), o componente da página, e –hero é o modificador, uma variação desse bloco.
Dentro dessa <section>, definiremos uma <div> que receberá a classe container e agrupará todos os elementos presentes nessa primeira seção do site.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MasterClass Full Stack</title> </head> <body> <main> <section class="secao secao--hero"> <div class="container"> </div> </section> </main> </body> </html>
Nesse container, teremos dois elementos principais: um card com as informações sobre a masterclass e a imagem do professor.
Vamos agrupar cada um desses elementos em sua própria <div>. Teremos, portanto, uma <div> para o card e outra para a imagem.
Dentro da <div> correspondente ao cartão com as informações, temos a logo da Hashtag, o título da Masterclass, as informações correspondentes, a data e o botão de “Quero participar”.
Vamos definir cada um desses elementos, começando pela logo da Hashtag. Essa logo está contida dentro de um hexágono que precisaremos definir e estilizar posteriormente. Para isso, criaremos uma nova <div> com a classe hexagono.
Para inserir a imagem da logo, utilizaremos a tag <img> com o atributo src, que define o caminho/endereço da imagem, e o atributo alt, que fornece uma descrição alternativa para o conteúdo da imagem.
Além disso, vamos passar os atributos width (largura) e height (altura) para estipular o tamanho padrão dessa imagem. Isso auxilia na renderização da página e define a proporção da imagem.
<body> <main> <section class="secao secao--hero"> <div class="container"> <div class="card"> <div class="hexagono"> <img width="47.11" height="37.95" src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65679cdce2bd97d9426b470b_Logo%20-%20Sem%20espa%C3%A7amento.webp" alt="Logo da Hashtag Programação" /> </div> </div> </div> </section> </main> </body>
Obs.: Obtivemos o endereço da imagem a partir da página da Masterclass, clicando com o botão direito do mouse sobre a imagem e selecionando a opção Copiar endereço da imagem.
Com a logo inserida na página, podemos partir para o texto presente no card. Começando pelo título, vamos adicionar uma tag <h1>. As tags de heading variam de <h1> até <h6>, sendo 1 a mais importante e 6 a menos relevante.
<body>
<main>
<section class="secao secao--hero">
<div class="container">
<div class="card">
<div class="hexagono">
<img
width="47.11"
height="37.95"
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65679cdce2bd97d9426b470b_Logo%20-%20Sem%20espa%C3%A7amento.webp"
alt="Logo da Hashtag Programação"
/>
</div>
<h1>{ MASTERCLASS } PROGRAMAÇÃO FULL STACK</h1>
</div>
</div>
</section>
</main>
</body>Abaixo do título, temos um pequeno parágrafo que funciona como um subtítulo, e também uma lista com os principais objetivos da Masterclass.
Para definir o subtítulo, vamos utilizar uma tag <p> com a classe subtitulo. Já para a nossa lista, utilizaremos a tag <ul> (unordered list) para construir uma lista não ordenada, ou seja, que não é numerada.
Para definir cada um dos itens dessa lista, precisamos criar itens de lista dentro de tags <li>. Esses itens serão compostos por um ícone de check dentro de uma tag <img> e o texto correspondente.
<div class="card">
<div class="hexagono">
<img
width="47.11"
height="37.95"
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65679cdce2bd97d9426b470b_Logo%20-%20Sem%20espa%C3%A7amento.webp"
alt="Logo da Hashtag Programação"
/>
</div>
<h1>{ MASTERCLASS } PROGRAMAÇÃO FULL STACK</h1>
<p class="subtitulo">Como aprender Programação Full Stack para:</p>
<ul>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Se tornar um dos profissionais mais bem pagos do Mercado de
Trabalho
</li>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Dominar uma das habilidades mais valorizadas do mercado
</li>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Mesmo que esteja começando do zero
</li>
</ul>
</div>Para finalizar, criaremos uma nova <div> abaixo da lista, com o ícone de calendário e um parágrafo com a data. Podemos destacar o texto da data utilizando a tag <strong>, que deixará o texto em negrito e indicará ao navegador que aquele é um elemento importante.
Em seguida, criaremos uma tag <button> com o texto “Quero participar”, finalizando assim a estrutura do nosso cartão no HTML.
<div class="card">
<div class="hexagono">
<img
width="47.11"
height="37.95"
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65679cdce2bd97d9426b470b_Logo%20-%20Sem%20espa%C3%A7amento.webp"
alt="Logo da Hashtag Programação"
/>
</div>
<h1>{ MASTERCLASS } PROGRAMAÇÃO FULL STACK</h1>
<p class="subtitulo">Como aprender Programação Full Stack para:</p>
<ul>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Se tornar um dos profissionais mais bem pagos do Mercado de
Trabalho
</li>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Dominar uma das habilidades mais valorizadas do mercado
</li>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Mesmo que esteja começando do zero
</li>
</ul>
<div class="data">
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65a6e4a43b1abc224260328c_calendar%20(2).webp"
alt="Ícone de Calendário"
/>
<p><strong>11</strong> de <strong>Abril</strong> | 19:30</p>
</div>
<button>Quero participar!</button>
</div>Agora, fora da <div> do nosso card, podemos finalmente adicionar uma tag <img> com a foto do professor Daniel.
<body>
<main>
<section class="secao secao--hero">
<div class="container">
<div class="card">
<div class="hexagono">
<img
width="47.11"
height="37.95"
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65679cdce2bd97d9426b470b_Logo%20-%20Sem%20espa%C3%A7amento.webp"
alt="Logo da Hashtag Programação"
/>
</div>
<h1>{ MASTERCLASS } PROGRAMAÇÃO FULL STACK</h1>
<p class="subtitulo">Como aprender Programação Full Stack para:</p>
<ul>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Se tornar um dos profissionais mais bem pagos do Mercado de
Trabalho
</li>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Dominar uma das habilidades mais valorizadas do mercado
</li>
<li>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/62cef75c0262284af718645d_checked.webp"
alt="Ícone de Check"
/>
Mesmo que esteja começando do zero
</li>
</ul>
<div class="data">
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65a6e4a43b1abc224260328c_calendar%20(2).webp"
alt="Ícone de Calendário"
/>
<p><strong>11</strong> de <strong>Abril</strong> | 19:30</p>
</div>
<button>Quero participar!</button>
</div>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660d9e61771a7cc3dd945688_%5BELEMENTO%5D%20daniel%201%20-%20WJS1.webp"
alt="Daniel da Hashtag"
/>
</div>
</section>
</main>
</body>Com isso, finalizamos a primeira parte: a estrutura HTML da seção Hero da nossa página.
A partir daqui, iremos construir a estilização dela dentro do CSS.
Para começarmos a estilizar os elementos da nossa página, vamos criar o arquivo style.css.
Com o arquivo criado, vamos linkar esse CSS ao nosso HTML, adicionando a tag <link> com o caminho para o arquivo CSS dentro da <head> do documento HTML. Dessa forma, as estilizações feitas no CSS serão aplicadas à nossa página.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MasterClass Full Stack</title> <link rel="stylesheet" href="style.css" /> </head>
Feito isso, o primeiro estilo que iremos definir dentro do CSS será referente à fonte da nossa página. Se você observar o exemplo inicial da aula, verá que a fonte utilizada não é a mesma que obtivemos apenas com a construção da estrutura HTML.
Para utilizar uma fonte personalizada dentro do nosso projeto, precisamos primeiro fazer o download dela e adicioná-la na pasta correspondente. Para essa página, estaremos utilizando a fonte Trench.
Essa fonte já está disponível no material para download presente nessa aula, mas você também pode fazer o download manualmente pelo site:
Feito o download da fonte, vamos extrair o conteúdo da pasta para dentro do projeto.
Em seguida, no arquivo CSS, adicionaremos uma regra chamada @font-face, que nos permite carregar fontes externas para a página que estamos construindo. Para essa regra, definimos a família da fonte (font-family) e o caminho onde ela está salva (src).
@font-face {
font-family: "Trench";
src: url(trench/trench100.ttf);
}Com isso, teremos a fonte pronta para ser utilizada em nosso projeto. O objetivo é personalizar o título do nosso card, ou seja, o elemento com a tag <h1>. Vamos criar o seletor para esse elemento e definir a font-family dele.
h1 {
font-family: "Trench", sans-serif;
}Note que, além da Trench, também passei uma segunda fonte como sendo da família sans-serif. Isso é particularmente útil para casos em que a fonte personalizada não carregue adequadamente, então o navegador utilizará a segunda fonte definida.
Além do h1, vamos estilizar o body da nossa página, definindo a cor de fundo (background-color) dela e a cor da fonte (color).
body {
color: white;
background-color: #121212;
}Para finalizar, vamos personalizar a imagem de fundo da seção hero. Lembre-se de que para essa seção definimos duas classes: a classe secao e a classe secao–hero, indicando o modificador seguindo a metodologia BEM.
Então, para estilizar apenas a seção hero da nossa página, utilizaremos o seletor secao–hero. Como esse é um seletor de classe, adicionamos um ponto antes do nome.
Dentro dele, definiremos as seguintes propriedades:
.secao--hero {
background-image: url(https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660d9e60b52c66db2e67e0b4_%5BBACKGROUND%5D%20-%20BANNER%2001%20-%20WJS1.webp);
background-position: 50%;
background-size: cover;
}Essa configuração faz com que a imagem de fundo se ajuste adequadamente à seção hero. Deixando o visual da nossa página assim:
Na próxima aula continuaremos com os ajustes necessários para melhorar a disposição e o visual dos demais elementos dessa seção.
Vamos para a segunda aula do nosso curso de HTML e CSS, onde criaremos uma landing page do zero! Nesta aula, vamos criar o card da seção hero da nossa página.
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 o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Na primeira aula, iniciamos o projeto da nossa landing page construindo a seção hero da nossa página. Definimos a estrutura base dela e criamos os elementos principais com HTML, além de fazermos algumas estilizações desses elementos com CSS.
Nesta aula, daremos continuidade a essa seção, criando o card e colocando as informações sobre a masterclass dentro dele.
Faremos a formatação do container, todos os ajustes de espaçamento, fonte, alinhamento e demais formatações para deixar o nosso card praticamente pronto.
Além disso, vamos ajustar e estilizar a data e o botão presentes no card. Então, pegue o projeto que começamos na primeira aula ou faça o download do material disponível e vamos começar!
Antes de começarmos esta aula, é importante que você conheça as ferramentas do programador (desenvolvedor) disponíveis em todos os navegadores.
Essas ferramentas são extremamente úteis no processo de desenvolvimento e criação de sites, permitindo realizar testes, inspecionar elementos da página e aprender como as páginas são construídas.
No nosso caso, utilizaremos essas ferramentas para inspecionar e interagir com os elementos da nossa página diretamente no navegador, fazendo testes e identificando as propriedades e estilos aplicados.
No Chrome, por exemplo, você pode acessar clicando nos três pontos no canto superior direito do navegador, indo em Mais ferramentas e selecionando Ferramentas do programador. Ou pode simplesmente utilizar o atalho Ctrl + Shift + I.
Ao abrir essa ferramenta, você verá a opção Select an element in the page to inspect it, localizada no canto superior esquerdo da janela (o ícone com um quadrado pontilhado e uma seta).
Essa ferramenta permite selecionar um elemento na página e verificar suas propriedades dentro da janela de desenvolvedor.
Atualmente, a nossa página possui dentro do seu <body> uma seção <main> composta por uma <section>. Dentro dela, temos uma <div>, nosso container, com dois elementos principais: o card com as informações e a imagem do professor.
Na primeira aula, fizemos algumas estilizações e ajustes na nossa página, mas ainda precisamos realizar algumas formatações para melhorar a disposição e o visual dos elementos dentro da seção Hero.
Ao inspecionar a página atual com a ferramenta de programador, podemos observar que o <body> tem um espaçamento externo (margin) de 8px, mesmo que não tenhamos definido essas propriedades no arquivo CSS.
Isso ocorre devido ao estilo padrão do navegador (user agent stylesheet), que é aplicado automaticamente à nossa página quando ela é renderizada.
Para remover essa margem e os preenchimentos padrões do navegador e termos maior controle sobre o layout da página, vamos realizar um reset no arquivo style.css.
Esse reset é feito através do seletor universal, que definimos com um asterisco (*). É comum utilizar o seletor universal para zerar a margem e o padding de todos os elementos e definir o box-sizing como border-box.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Definir o box-sizing como border-box faz com que os valores de padding e border dos elementos sejam incluídos no valor do conteúdo do elemento.
Dessa forma, todos os elementos da página terão seu tamanho incluindo content, padding e border no valor definido.
Caso você queira entender melhor o uso do seletor universal e porque aplicamos o border-box como padrão para toda a página, recomendo conferir nossa aula sobre Box Model, onde explico detalhadamente esse conceito.
Feito isso, podemos criar o seletor para estilizar o container da nossa página. Dentro deste seletor, vamos definir a largura máxima (max-width) do container como 1000 pixels.
Além disso, vamos centralizá-lo dentro da seção Hero. Para isso, utilizaremos a propriedade margin, passando para ela os valores de 0 e auto.
O valor 0 aplica uma margem de 0 pixels no topo e na parte inferior do container, enquanto o valor auto ajusta automaticamente as margens esquerda e direita para centralizar o elemento.
.container {
max-width: 1000px;
margin: 0 auto;
}Após centralizarmos o container, vamos iniciar a estilização da <div> com a classe card (.card).
Dentro deste seletor, aplicaremos uma cor de fundo escura, um sombreado azul, espaçamento interno, bordas arredondadas, largura máxima e ajustaremos o tamanho da fonte do texto.
Para a cor de fundo do elemento (background-color), vamos utilizar um tom muito escuro de cinza, quase preto, com o código hexadecimal #050505.
A sombra ao redor do card será definida através da propriedade box-shadow. Esta propriedade recebe vários valores para definir a posição, desfoque, espalhamento e cor da sombra.
Os dois primeiros valores correspondem respectivamente ao deslocamento horizontal (offset-x) e vertical (offset-y). O terceiro valor refere-se ao desfoque (blur-radius) e o quarto ao raio de espalhamento (spread-radius), que controla quanto a sombra se expande ou contrai. Por fim, temos a cor da sombra.
Para o nosso card, definiremos uma sombra sem deslocamento horizontal ou vertical, com um desfoque de 25px e um espalhamento de 5px, usando a cor azul (#00a1ff).
Com a propriedade padding, vamos adicionar o espaçamento interno, com 30px nas partes superior e inferior, e 40px nas laterais.
Para arredondar as bordas, utilizaremos a propriedade border-radius com um valor de 25px.
A largura máxima do nosso card deve corresponder a metade do tamanho máximo do container (elemento pai). Então, vamos atribuir a propriedade max-width com o valor de 50%.
Por fim, definiremos o tamanho da fonte do texto dentro do elemento como 19px, usando a propriedade font-size.
.card {
background-color: #050505;
box-shadow: 0 0 25px 5px #00a1ff;
padding: 30px 40px;
border-radius: 25px;
max-width: 50%;
font-size: 19px;
}Feito esses ajustes e estilizações a nossa página ficará assim:
Para criar um layout flexível e responsivo de forma eficiente, utilizaremos o Flexbox, um modelo de layout do CSS. Com ele, conseguiremos distribuir o espaço e alinhar melhor os itens dentro do nosso card, tornando-o um Flex Container.
O flex container é um elemento ao qual aplicamos a propriedade display: flex. Isso transforma os filhos desse elemento em flex items, que herdam as capacidades de layout flexível do seu elemento pai.
Nesse caso, ao transformar o card em um flex container, todos os itens dentro dele se tornarão flexíveis. Utilizando o Flexbox, conseguiremos controlar a direção (flex-direction), o alinhamento (align-items) e o espaçamento (gap) de cada um deles.
Para a propriedade flex-direction, definiremos o valor como column. Assim, os elementos dentro do card serão organizados em uma coluna, um abaixo do outro.
A propriedade align-items será definida como center, para centralizar os elementos filhos horizontalmente dentro do flex container. Isso garante que todos os elementos dentro do card fiquem alinhados ao centro.
Para finalizar, podemos ajustar o espaçamento entre os elementos filhos dentro do card utilizando a propriedade gap, definindo um valor de 25px.
.card {
display: flex;
flex-direction: column;
align-items: center;
background-color: #050505;
box-shadow: 0 0 25px 5px #00a1ff;
padding: 30px 40px;
border-radius: 25px;
max-width: 50%;
gap: 25px;
font-size: 19px;
}Usando o Flexbox, conseguimos controlar de forma eficiente como os elementos dentro do card ficarão dispostos e alinhados, tornando o layout da nossa página mais flexível e responsivo às mudanças de tamanho e conteúdo.
Caso você queira se aprofundar mais sobre os conceitos de Flexbox e Layout Responsivo, vou deixar duas aulas abaixo para que você possa estudar com detalhe cada um desses assuntos:
Com essas mudanças, nosso card ficará assim:
Na aula passada, definimos a fonte Trench como sendo a fonte padrão do título do nosso card (h1). Além disso, especificamos que, caso essa fonte não fosse carregada adequadamente, o navegador deveria utilizar uma fonte sans-serif.
No entanto, o restante da fonte aplicada ao card está como uma fonte padrão, quando na verdade deveria ser utilizada a Montserrat.
Para importar essa fonte para o nosso projeto, podemos seguir o mesmo procedimento da aula passada para a fonte Trench ou importá-la diretamente via Google Fonts.
Para esse exemplo, vamos importá-la utilizando o Google Fonts. Para isso, acesse a página da fonte correspondente e clique na opção Get font.
Em seguida, clique em Get embed code.
Na página que será aberta, o Google fornecerá os dois códigos necessários para implementarmos essa fonte ao nosso projeto.
Primeiro, vamos copiar o primeiro código e colá-lo dentro da <head> no nosso arquivo HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>MasterClass Full Stack</title> <link rel="stylesheet" href="style.css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" /> </head>
Em seguida, basta copiarmos do segundo código as propriedades font-family, font-weight e font-style para dentro do seletor do body dentro do nosso arquivo CSS.
Vamos atribuir o peso da fonte (font-weight) como 400 e o tamanho da fonte (font-size) como 16px.
body {
color: white;
background-color: #121212;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 16px;
}Dessa forma, essa será a formatação padrão de fonte para todos os elementos dentro do nosso body, exceto para aqueles que receberem estilizações próprias de fonte.
Esse é o conceito de herança de estilos dentro do CSS. A herança de estilos permite que um elemento assuma as propriedades de estilo de seus elementos pai, evitando a necessidade de repetirmos a mesma estilização para vários elementos.
Para sobrepor esse estilo herdado, basta definirmos dentro do seletor do elemento que desejamos personalizar um novo estilo. Dessa forma, esse estilo será sobreposto ao estilo herdado.
Por exemplo, dentro do nosso card, definimos que o tamanho padrão de fonte é de 19px. Porém, não queremos que todos os elementos do card tenham o mesmo tamanho. Para isso, podemos fazer ajustes para diferentes elementos.
Vamos começar definindo o tamanho do subtítulo, da data e do botão como sendo 23px. Como queremos aplicar o mesmo estilo para esses 3 elementos, podemos criar um seletor utilizando os 3.
.subtitulo,
.data,
button {
font-size: 23px;
}Em seguida, podemos personalizar o nosso título h1. Além da diferença na font-family, que já havíamos definido, podemos centralizar o alinhamento do texto e definir o tamanho da fonte como 49px.
h1 {
font-family: "Trench", sans-serif;
text-align: center;
font-size: 49px;
}Com isso, nosso card ficará assim:
No entanto, quando comparado à página original da Masterclass, veremos que cada parte do título possui algumas estilizações próprias.
Para aplicar formatações distintas a partes do nosso texto h1, podemos dividi-lo utilizando elementos <span>. Dessa forma, podemos atribuir uma classe específica a cada parte e personalizá-las de acordo com o nosso objetivo.
O primeiro passo para isso será modificar o nosso <h1> dentro do arquivo HTML, separando-o em diferentes elementos <span>.
<h1>
<span class="masterclass">{ MASTERCLASS }</span>
<span class="programacao">PROGRAMAÇÃO</span>
<span class="fullstack">FULL STACK</span>
</h1>Feito isso, dentro do CSS, vamos utilizar cada uma dessas classes para estilizar o tamanho das fontes e deixar a fonte do “Masterclass” em azul.
h1 {
font-family: "Trench", sans-serif;
text-align: center;
font-size: 49px;
}
h1 .masterclass {
color: #00a1ff;
}
h1 .programacao {
font-size: 53px;
}
h1 .fullstack {
font-size: 78px;
}Para finalizar, precisamos ajustar o espaçamento entre as linhas do nosso título. Podemos fazer isso utilizando a propriedade line-height com o valor de 100% dentro do seletor h1, que é o elemento pai de todo o título.
Dessa forma, a altura da linha será igual ao tamanho da fonte contida nela, melhorando o espaçamento entre as partes do nosso título, melhorando a legibilidade e deixando com uma aparência mais harmoniosa.
h1 {
font-family: "Trench", sans-serif;
text-align: center;
font-size: 49px;
line-height: 100%;
}
Com o título e o subtítulo do nosso card prontos, podemos ajustar a nossa lista e os elementos presentes nela.
Para começar, vamos criar o nosso seletor ul para listas não ordenadas e remover o marcador padrão de listas, definindo a propriedade list-style como none.
Em seguida, para melhorar a ordem, disposição e espaçamento entre os elementos, podemos transformar a nossa lista em um flex container, definindo o flex-direction como column e o gap como 7.5px.
ul {
display: flex;
flex-direction: column;
gap: 7.5px;
list-style: none;
}Além disso, dentro de cada item da lista (li), temos uma imagem e um texto. Para melhorar o alinhamento entre eles, vamos transformar cada item de lista em um flex container também.
Neste caso, o alinhamento será feito a partir do início (flex-start) e o espaçamento entre a imagem e o texto será de 7.5px.
li {
display: flex;
align-items: flex-start;
gap: 7.5px;
}Para finalizar, precisamos ajustar o alinhamento vertical da imagem presente em cada item da lista. Para isso, podemos adicionar uma margem superior (margin-top) de 2.5px.
li img {
margin-top: 2.5px;
}
Para finalizar a estilização do nosso cartão nesta aula, precisamos ajustar e formatar a data e o botão de Quero participar.
Começando pela data, podemos criar um seletor para ela e transformá-la em um flex container.
Vamos definir que seu alinhamento será centralizado e a distância entre os elementos será de 10px.
Além disso, vamos definir o sombreado (box-shadow), o raio da borda (border-radius) e o espaçamento interno (padding).
.data {
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 0 7.5px 0px #00a1ff;
border-radius: 100px;
padding: 5px 30px;
}Assim, a nossa data ficará com um visual muito mais interessante e de destaque dentro do cartão.
Por fim, vamos estilizar o botão de participação. Esse botão receberá uma série de propriedades que já vimos até aqui e algumas novas que ajudarão a compor o seu estilo.
Começaremos definindo a cor de fundo (background-color) com o tom de azul #0068a5. A cor da fonte (color) receberá o valor inherit para herdar a cor definida no elemento pai.
O espaçamento interno (padding) será de 10px para a parte superior e inferior, e 30px para as laterais.
Para que sua borda fique arredondada, assim como o campo da data, vamos definir o border-radius em 100px. E criaremos uma borda sólida de 3 pixels de largura com um tom mais escuro de azul (#003655) através da propriedade border.
Para criar um efeito de profundidade no nosso botão, podemos modificar a largura da borda direita (border-right-width) e da borda inferior (border-bottom-width), tornando-as maiores do que as demais.
Feito isso, vamos alterar o cursor do mouse para uma mão quando posicionado sobre o botão (cursor: pointer).
E, para finalizar, ajustaremos o peso da fonte (font-weight) para 700 e transformaremos todo o texto do botão em letras maiúsculas (text-transform: uppercase), destacando o botão de participação.
button {
background-color: #0068a5;
color: inherit;
padding: 10px 30px;
border-radius: 100px;
border: 3px solid #003655;
border-right-width: 5px;
border-bottom-width: 5px;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}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 terminarmos as edições do card da nossa página, vamos definir que, ao posicionar o mouse sobre o botão, todas as margens do botão ficarão com a mesma medida.
Faremos isso adicionando o seletor button:hover ao arquivo CSS, que nos permitirá personalizar o botão do card quando o mouse estiver sobre ele.
button:hover {
border-right-width: 4px;
border-bottom-width: 4px;
border-top-width: 4px;
border-left-width: 4px;
}Com isso, finalizamos as edições do card da nossa landing page, deixando o visual completo dele assim:
Na próxima aula, continuaremos com as edições, ajustes e formatações necessárias para tornar toda a nossa página ainda mais atraente, funcional e responsiva.
Chegamos à terceira aula do curso de HTML e CSS, onde criaremos uma landing page do zero! Nesta aula, finalizaremos a seção Hero e também criaremos as seções disclaimer e passo a passo.
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 o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Nas aulas passadas, iniciamos a construção e a estilização da seção Hero da nossa landing page, definindo a estrutura e personalizando o aspecto visual dela.
Nesta terceira aula, vou te mostrar como finalizar a seção Hero, garantindo que ela seja visualmente atraente e funcional.
Além disso, utilizaremos muitos dos conceitos já vistos nas aulas anteriores para construir as seções disclaimer e passo a passo da nossa página.
Ao longo das últimas aulas, focamos na construção e estilização da seção Hero. Nesta aula, iremos finalizá-la ajustando o espaçamento, centralização, distribuição dos elementos e estilização da imagem.
Dessa forma, você terá uma seção Hero esteticamente agradável, funcional e responsiva, proporcionando uma excelente primeira impressão aos visitantes da página.
Ajustes de Espaçamento Interno – Padding:
Começando pelo espaçamento da seção, para garantir que os elementos não fiquem encostados nas bordas, adicionaremos um padding à seção Hero de 70px na vertical e 20px na horizontal.
O padding cria um espaçamento interno que melhora a leitura e a estética da página, permitindo que o layout se ajuste bem tanto para computadores como para celulares, considerando diferentes tamanhos de tela.
Isso garante que as sombras dos elementos e outros detalhes da nossa seção sejam visualizados adequadamente, independentemente do dispositivo.
Dentro do arquivo CSS, criaremos o seletor de classe seção (.secao) e dentro dele aplicaremos o padding de 70px e 20px.
.secao {
padding: 70px 20px;
}Distribuição dos Elementos com Flexbox:
Para ajustar a imagem do professor Daniel ao lado do nosso card, vamos aplicar a construção de layout flexível com Flexbox.
Por padrão, ao aplicarmos o display como flex, a propriedade flex-direction já alinhará os elementos em linha, organizando a imagem ao lado do card como desejado.
Além disso, utilizaremos a propriedade align-items para definir o alinhamento dos itens no final do contêiner.
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: end;
}Ajustando a Imagem
A imagem que temos do professor Daniel é muito grande, precisamos então ajustar seu tamanho. Para isso, vamos adicionar a classe daniel à tag <img> correspondente dentro do arquivo HTML.
<img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660d9e61771a7cc3dd945688_%5BELEMENTO%5D%20daniel%201%20-%20WJS1.webp" alt="Daniel da Hashtag" class="daniel" />
Feito isso, vamos adicionar o seletor para essa classe e definir a largura máxima como 510px.
.daniel {
max-width: 510px;
}Fonte do Card
Para padronizar com as demais seções que construiremos nessa aula, como a seção Passo a Passo, vamos alterar o tamanho da fonte no nosso card para 18px.
.card {
display: flex;
flex-direction: column;
align-items: center;
background-color: #050505;
box-shadow: 0 0 25px 5px #00a1ff;
padding: 30px 40px;
border-radius: 25px;
max-width: 50%;
gap: 25px;
font-size: 18px;
}Classe e Seletor realce
Na aula passada, estilizamos o nosso H1 utilizando o seguinte seletor:
h1 .masterclass {
color: #00a1ff;
}No entanto, esse realce será utilizado em diversas seções da nossa Landing Page. Por isso, iremos substituí-lo pelo seletor de classe realce.
.realce {
color: #00a1ff;
}Assim, poderemos utilizar essa classe em outras partes do nosso HTML em que quisermos destacar alguma palavra.
Para manter a estilização da Masterclass no nosso H1, vamos alterar a classe dela para realce dentro do nosso HTML.
<h1>
<span class="realce">{ MASTERCLASS }</span>
<span class="programacao">PROGRAMAÇÃO</span>
<span class="fullstack">FULL STACK</span>
</h1>Com isso, finalizamos a estilização da seção Hero da nossa página. Só falta criarmos o hexágono com o ícone da Hashtag, mas essa etapa veremos futuramente.
A seção disclaimer de uma página é onde fornecemos ao usuário informações importantes e legais, como a declaração da Lei Geral de Proteção de Dados Pessoais (LGPD).
Começaremos definindo a estrutura HTML da seção Disclaimer dentro do arquivo index.html.
Essa seção será criada logo abaixo da seção Hero, dentro da tag <main>, e receberá duas classes: secao, padrão para todas as tags <section> do site, e secao–disclaimer, o modificador de classe específico para o disclaimer.
Dentro do nosso disclaimer, teremos um container e, dentro dele, um parágrafo <p> falando sobre a LGPD.
<section class="secao secao--disclaimer"> <div class="container"> <p class="disclaimer"> Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate. </p> </div> </section>
Para estilizar essa seção, utilizaremos dois seletores de classe: um para toda a seção (.secao–disclaimer) e outro para o parágrafo (.disclaimer).
Para o container, definiremos o espaçamento e a sombra. E para o parágrafo, estilizaremos o tamanho da fonte e a cor do texto.
.secao--disclaimer {
padding: 30px 20px;
box-shadow: 0 15px 15px 0 rgb(0 0 0 / 50%);
}
.disclaimer {
font-size: 15px;
color: #7c7f7f;
}
Uma boa prática ao trabalhar com HTML e CSS é organizar o seu arquivo, para que fique claro quais estilos estão sendo aplicados a cada seção.
Para fazer isso, incluiremos dentro do arquivo CSS comentários, separando os seletores entre gerais e suas respectivas seções.
Podemos inserir comentários dentro do CSS utilizando a seguinte sintaxe: /* Comentário */.
Como moveremos o seletor de botão (button) para a parte de seletores gerais da página, vamos adicionar a propriedade font-size a ele com o valor de 23px.
Dentro dos seletores da seção Hero, vamos modificar o seletor que antes englobava o botão, a data e o subtítulo para ser apenas para a data e o subtítulo agora.
Com essa organização feita, nosso código CSS ficará assim:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Trench";
src: url(trench/trench100.ttf);
}
body {
color: white;
background-color: #121212;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
.secao {
padding: 70px 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: end;
}
button {
font-size: 23px;
background-color: #0068a5;
color: inherit;
padding: 10px 30px;
border-radius: 100px;
border: 3px solid #003655;
border-right-width: 5px;
border-bottom-width: 5px;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}
button:hover {
border-right-width: 4px;
border-bottom-width: 4px;
border-top-width: 4px;
border-left-width: 4px;
}
.realce {
color: #00a1ff;
}
/* Hero */
h1 {
font-family: "Trench", sans-serif;
text-align: center;
font-size: 49px;
line-height: 100%;
}
h1 .programacao {
font-size: 53px;
}
h1 .fullstack {
font-size: 78px;
}
.secao--hero {
background-image: url(https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660d9e60b52c66db2e67e0b4_%5BBACKGROUND%5D%20-%20BANNER%2001%20-%20WJS1.webp);
background-position: 50%;
background-size: cover;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
background-color: #050505;
box-shadow: 0 0 25px 5px #00a1ff;
padding: 30px 40px;
border-radius: 25px;
max-width: 50%;
gap: 25px;
font-size: 19px;
}
.subtitulo,
.data {
font-size: 23px;
}
ul {
display: flex;
flex-direction: column;
gap: 7.5px;
list-style: none;
}
li {
display: flex;
align-items: flex-start;
gap: 7.5px;
}
li img {
margin-top: 2.5px;
}
.data {
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 0 7.5px 0px #00a1ff;
border-radius: 100px;
padding: 5px 30px;
}
.daniel {
max-width: 510px;
}
/* Disclaimer */
.secao--disclaimer {
padding: 30px 20px;
box-shadow: 0 15px 15px 0 rgb(0 0 0 / 50%);
}
.disclaimer {
font-size: 15px;
color: #7c7f7f;
}Com essas alterações, garantimos que o arquivo CSS esteja bem organizado e que cada seção tenha seus estilos bem definidos.
Com o disclaimer concluído, vamos construir a seção Passo a Passo, onde os alunos seguirão as etapas para se inscrever na Masterclass e participar das aulas.
Essa seção será definida pela tag <section>, posicionada abaixo da seção de disclaimer, e receberá duas classes: secao e secao–passo.
Dentro dela, teremos um contêiner que englobará todos os elementos dessa seção. Diferente dos contêineres anteriores, este organizará seus elementos em colunas, por isso adicionaremos a classe container–coluna.
Como só deve existir um <h1> por página, definiremos o cabeçalho dessa seção com a tag <h2>. Para estilizar parte do texto com a cor azul, utilizaremos a tag <span> com a classe realce.
<section class="secao secao--passo"> <div class="container container--coluna"> <h2>Siga o <span class="realce">passo a passo!</span> 🚀</h2> <div class="passos"> </div> </div> </section>
Cada passo seguirá uma estrutura similar, e vamos separá-los em três através de tags <div> com a classe passo.
Dentro de cada uma dessas divisões, teremos os elementos que compõem cada passo. Nomearemos as classes desses elementos seguindo a metodologia BEM, utilizando dois underlines para separar o nome do bloco (passo) do elemento.
Esses elementos são: o cabeçalho, composto por um ícone (<img>) e um título (<h3>) com um texto em destaque; a barra separadora vertical; e o conteúdo do passo, formado por um parágrafo <p> que descreve a ação necessária, com alguns trechos destacados.
O passo 01 explicará sobre o cadastro, o passo 02 sobre o grupo VIP e o passo 03 sobre as aulas da masterclass.
<section class="secao secao--passo"> <div class="container container--coluna"> <h2>Siga o <span class="realce">passo a passo!</span> 🚀</h2> <div class="passos"> <div class="passo"> <div class="passo__cabecalho"> <div class="passo__icone"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660da25054603fe5e19757a1_user-azul.svg" alt="Ícone do Passo a Passo" /> </div> <h3>Passo 01 <span class="realce">Cadastro</span></h3> </div> <div class="passo__barra"></div> <div class="passo__conteudo"> <p> Clique em <span class="realce">“Quero participar”</span> cadastre seus dados e garanta seu acesso exclusivo à Masterclass <span class="realce">TOTALMENTE GRATUITA</span>. </p> </div> </div> <div class="passo"> <div class="passo__cabecalho"> <div class="passo__icone"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660da250759797eb1f6afdb0_paper-plane-azul.svg" alt="Ícone do Passo a Passo" /> </div> <h3>Passo 02 <span class="realce">Grupo VIP</span></h3> </div> <div class="passo__barra"></div> <div class="passo__conteudo"> <p> Entre para nosso <span class="realce">“grupo vip para alunos</span> e programe o alarme para não perder nada que vai rolar na MasterClass Programação Full Stack da Hashtag. </p> </div> </div> <div class="passo"> <div class="passo__cabecalho"> <div class="passo__icone"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660da250ca64cc5a7eba8896_browser-azul.svg" alt="Ícone do Passo a Passo" /> </div> <h3>Passo 03 <span class="realce">Aulas</span></h3> </div> <div class="passo__barra"></div> <div class="passo__conteudo"> <p> Assista a aula e o passo a passo detalhado para você aprender como se tornar um dos profissionais <span class="realce" >mais bem pagos do Mercado de Trabalho.</span > </p> </div> </div> </div> </div> </section>
Dessa forma, temos organizada a estrutura da seção de passo a passo. Você verá que, por enquanto, os elementos não estarão formatados corretamente, mas faremos isso através do CSS.
Dentro do arquivo style.css, vamos começar a estilizar os elementos e as classes definidas na seção Passo a Passo, para melhorar o visual e a formatação dos elementos da nossa Landing Page.
Começando pelo container que engloba toda essa seção. Assim como fizemos para as seções anteriores, transformaremos esse container em um layout flexível.
Adicionaremos o seletor de classe .container–coluna e definiremos as propriedades flex-direction com o valor de column, um gap de 40px e o alinhamento ao centro (align-items: center).
.container--coluna {
flex-direction: column;
gap: 40px;
align-items: center;
}Como essa classe será aplicada em outras seções da página, esse seletor ficará junto com os seletores gerais dentro do arquivo CSS.
Em seguida, podemos adicionar os seletores de h2 e h3 para estilizar o tamanho (font-size) e o peso (font-weight) desses títulos. Também adicionaremos esses seletores junto dos seletores gerais da página.
h2 {
font-size: 42px;
font-weight: 400;
}
h3 {
font-size: 23px;
}Ainda configurando os seletores que serão utilizados por toda a página, vamos adicionar o seletor de imagem (img).
Nele, definiremos a largura máxima da imagem (max-width) como sendo de 100% do espaço disponível no container onde ela está.
Além disso, atribuiremos a propriedade display com o valor de block, para que todas as imagens sejam tratadas como um bloco, ocupando todo o espaço disponível.
img {
max-width: 100%;
display: block;
}Com os seletores gerais, que serão aplicados por toda a página, definidos, podemos partir para a estilização específica da seção Passo a Passo, criando os seletores que só estarão presentes nela.
Começando pelo seletor do container passos, definiremos o tamanho da fonte como 18px.
Para organizar cada passo um sobre o outro, transformaremos nosso container em um elemento flex com os elementos filhos organizados em colunas com um espaçamento entre eles (gap) de 20px.
.passos {
font-size: 18px;
display: flex;
flex-direction: column;
gap: 20px;
}Para cada passo (.passo), definiremos a cor de fundo (background-color), o espaçamento interno (padding) e as bordas arredondadas (border-radius).
Também transformaremos esse elemento em um flex container para que o cabeçalho e o texto de cada passo fiquem organizados lado a lado. Esses elementos ficarão centralizados e com um espaçamento de 30px.
.passo {
background-color: #1c1c1c;
padding: 20px 30px;
border-radius: 10px;
display: flex;
gap: 30px;
align-items: center;
}Para os ícones presentes em cada passo, atribuiremos a largura máxima, a cor de fundo e o espaçamento interno.
Adicionaremos uma sombra ao redor do ícone com um desfoque de 7.5px e cor azul, além de uma sombra interna com desfoque de 2.5px e um tom de azul mais escuro.
Por fim, cada ícone terá uma borda sólida de 3px na cor cinza.
.passo__icone {
max-width: 53px;
background-color: #141213;
border-radius: 7.5px;
padding: 12.5px;
box-shadow: 0 0 7.5px 0px #00a1ff, inset 0 0 2.5px 0px #005080;
border: 3px solid #262427;
}Para que o título do cabeçalho e o ícone fiquem alinhados lado a lado, vamos transformar esse elemento em um flex container. Os elementos filhos contidos nele (ícone e título) ficarão alinhados ao centro com um espaçamento de 20px.
Para garantir uma boa visualização do cabeçalho de cada passo, configuraremos a largura mínima dele como sendo de 200px.
.passo__cabecalho {
display: flex;
align-items: center;
gap: 20px;
min-width: 200px;
}Por fim, vamos estilizar a barra vertical que separa o cabeçalho do parágrafo de cada passo. Essa barra terá uma largura de 4px, na cor cinza, e seu alinhamento será definido como stretch, para que ela se estenda ao longo da altura total do flex container pai.
.passo__barra {
width: 4px;
background-color: #333;
align-self: stretch;
}Com isso, finalizamos as edições da seção Passo a Passo da nossa landing page, deixando o visual completo dela assim:
Vamos para a quarta aula do nosso curso de HTML e CSS, onde continuaremos construindo nossa landing page do zero! Nesta aula, vamos criar a seção Aprender utilizando as propriedades CSS avançadas como Clip Path e Drop Shadow!
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 o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Nas três primeiras aulas deste curso, construímos e estilizamos as seções Hero, Disclaimer e Passo a Passo.
Agora, na quarta aula, iremos desenvolver e estilizar a seção Aprender, seguindo um processo semelhante ao que já fizemos nas seções anteriores.
O diferencial desta aula será a criação de um hexágono utilizando propriedades avançadas de CSS como o clip-path e o drop-shadow.
A seção Aprender da nossa página será onde os alunos visualizarão os principais tópicos que serão abordados ao longo da Masterclass.
Assim como nas seções anteriores, começaremos definindo essa seção com uma tag <section> que será posicionada logo abaixo da seção Passo a Passo. Essa <section> receberá as classes secao e secao–aprender.
Dentro dela, incluiremos um container que organizará todos os elementos dessa seção em colunas, para isso, aplicaremos a classe container–coluna.
Os elementos filhos desse container serão um título <h2> e uma <div> com a classe temas (que conterá a estrutura de cada tema).
Para estilizar parte do texto contido no título dessa seção, utilizaremos a tag <span> com a classe realce, como vimos na aula passada.
<section class="secao secao--aprender"> <div class="container container--coluna"> <h2> Nessa <span class="realce">aula gratuita</span> você vai aprender: </h2> <div class="temas"> </div> </div> </section>
Para cada tema dentro da <div class=”temas”>, utilizaremos uma <div> com a classe tema.
Dentro dessas divisões, teremos os elementos que compõem cada tema: uma <div> para o hexágono que envolverá um ícone <img>, e um parágrafo <p> para o conteúdo descritivo.
<section class="secao secao--aprender"> <div class="container container--coluna"> <h2> Nessa <span class="realce">aula gratuita</span> você vai aprender: </h2> <div class="temas"> <div class="tema"> <div class="hexagono"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa431e28eef1bc94f30_programming%20(1).svg" alt="Ícone do Tema" /> </div> <p class="conteudo"> Como funciona um Projeto Full Stack e os 7 passos pra criar qualquer projeto </p> </div> <div class="tema"> <div class="hexagono"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa4326b84ab36e15627_coding%20(1).svg" alt="Ícone do Tema" /> </div> <p class="conteudo"> Quais linguagens e conhecimentos você precisa dominar pra se tornar um Programador </p> </div> <div class="tema"> <div class="hexagono"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa5e0f1a3b16f78af46_coding%20(2).svg" alt="Ícone do Tema" /> </div> <p class="conteudo"> E o passo a passo pra você dominar as linguagens Web, independente da sua formação ou conhecimento atual </p> </div> </div> </div> </section>
Essa será a estrutura base da nossa seção Aprender. Por enquanto, os hexágonos e outros elementos ainda não estão formatados corretamente, mas faremos isso na próxima etapa com o CSS.
Na aula passada, organizamos os seletores dentro do arquivo CSS em seletores gerais e específicos. Agora, vamos abrir o arquivo style.css e criar uma nova seção dedicada aos seletores específicos da seção Aprender.
Começaremos definindo a cor de fundo (background-color) para toda essa seção, utilizando um tom de azul escuro.
/* Aprender */
.secao--aprender {
background-color: #000618;
}Em seguida, vamos estilizar os blocos que correspondem a cada tema dentro da seção. Para isso, utilizaremos o seletor de classe .tema.
Nesse seletor, definiremos a cor de fundo (background-color), arredondaremos as bordas do bloco com border-radius, ajustaremos o espaçamento interno com padding, e aplicaremos uma sombra (box-shadow) suave de cor azul-claro.
.tema {
background-color: #050505;
border-radius: 10px;
padding: 30px 60px;
box-shadow: 0 0 7.5px 0px #00a1ff;
}Além disso, como a seção Temas e a seção Passos terão uma estilização muito semelhante, podemos unificar o estilo desses elementos. Vamos mover o seletor .passos para junto dos seletores gerais e adicionar o seletor .temas na mesma regra.
A única modificação que faremos será adicionar o estilo align-self: stretch;.
Isso garantirá que esses dois elementos se estendam para preencher todo o espaço disponível no eixo transversal do contêiner flexbox onde estão posicionados, que neste caso é o eixo horizontal.
.passos,
.temas {
align-self: stretch;
font-size: 18px;
display: flex;
flex-direction: column;
gap: 20px;
}Com a estrutura base da seção Aprender definida e a estilização inicial feita, partiremos agora para a construção e estilização do hexágono que envolverá as imagens dessa seção, além do ícone da Hashtag dentro do nosso card na seção Hero.
Para criar o hexágono, utilizaremos a propriedade clip-path do CSS, que permite recortar uma parte de um elemento, deixando apenas a área especificada visível.
Essa propriedade é extremamente útil para criar formas complexas como círculos, elipses, polígonos diversos, ou até mesmo para exibir uma imagem em uma forma não-retangular.
Dentro deste projeto, utilizaremos clip-path para criar o hexágono. Através de coordenadas, definimos o caminho com os pontos de corte do elemento desejado. Cada ponto representará um vértice do hexágono.
Para facilitar a criação do caminho, podemos usar geradores online. Basta buscar por “Clip Path Generator” no Google, que você encontrará diversas opções.
Nesta aula, utilizaremos o Clippy, que nos permite visualizar e ajustar os pontos de corte de acordo com a necessidade. Você pode acessar o site deles aqui: https://bennettfeely.com/clippy/
Dentro desse gerador, selecione a forma do hexágono e copie o código gerado na parte inferior da página.
Como o hexágono estará presente em mais de uma seção da nossa landing page, definiremos o seletor .hexagono junto dos seletores gerais da página.
Além da propriedade clip-path que copiamos do gerador online, precisamos definir as demais formatações e estilos desejados.
Primeiro, ajustaremos as dimensões de largura (width) para 98px e altura (height) para 78px.
Em seguida, transformamos o hexágono em um contêiner flexível, permitindo centralizar e alinhar o conteúdo interno através das propriedades justify-content e align-items.
A cor de fundo (background-color) será definida com um tom de cinza-escuro, e suas bordas serão levemente arredondadas através da propriedade border-radius.
.hexagono {
width: 98px;
height: 78px;
display: flex;
justify-content: center;
align-items: center;
background-color: #141213;
border-radius: 7.5px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}Feito isso, vamos estilizar as imagens dentro dos hexágonos utilizando o seletor .hexagono img. Definimos a largura da imagem como 50%, para garantir que ela se ajuste proporcionalmente, ocupando metade da largura disponível.
.hexagono img {
width: 50%;
}Agora temos nosso elemento hexagonal criado. No entanto, ele ainda não está completamente formatado como o esperado.
Isso ocorre porque o hexágono presente na página final da Masterclass é composto por algumas camadas, divisões que precisaremos criar tanto no HTML quanto estilizar no CSS.
Para criar as camadas que irão compor o nosso hexágono, vamos adicionar novas tags <div> ao nosso código HTML.
Cada uma dessas tags receberá a classe “hexágono” mais um modificador, seguindo a metodologia BEM, que representará cada uma das camadas: externa, intermediária e interna.
A estrutura hierárquica dos hexágonos será estabelecida da seguinte forma: o hexágono externo contém o intermediário, que por sua vez contém o interno, onde ficará a imagem do ícone.
Além disso, o hexágono da seção Hero tem algumas estilizações específicas, assim como o da seção Aprender. Para distingui-los, vamos criar as classes hexagono–superior e hexágono–lateral.
Dessa forma, o HTML do hexágono na seção Hero ficará assim:
<section class="secao secao--hero"> <div class="container"> <div class="card"> <div class="hexagono--externo hexagono--superior"> <div class="hexagono"> <div class="hexagono hexagono--intermediario"> <div class="hexagono hexagono--interno"> <img width="47.11" height="37.95" src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/65679cdce2bd97d9426b470b_Logo%20-%20Sem%20espa%C3%A7amento.webp" alt="Ícone do Tema" /> </div> </div> </div> </div> Já o da seção Aprender ficará organizado dessa forma: <section class="secao secao--aprender"> <div class="container container--coluna"> <h2> Nessa <span class="realce">aula gratuita</span> você vai aprender: </h2> <div class="temas"> <div class="tema"> <div class="hexagono--externo hexagono--lateral"> <div class="hexagono"> <div class="hexagono hexagono--intermediario"> <div class="hexagono hexagono--interno"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa431e28eef1bc94f30_programming%20(1).svg" alt="Ícone do Tema" /> </div> </div> </div> </div> <p class="conteudo"> Como funciona um Projeto Full Stack e os 7 passos pra criar qualquer projeto </p> </div> <div class="tema"> <div class="hexagono--externo hexagono--lateral"> <div class="hexagono"> <div class="hexagono hexagono--intermediario"> <div class="hexagono hexagono--interno"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa4326b84ab36e15627_coding%20(1).svg" alt="Ícone do Tema" /> </div> </div> </div> </div> <p class="conteudo"> Quais linguagens e conhecimentos você precisa dominar pra se tornar um Programador </p> </div> <div class="tema"> <div class="hexagono--externo hexagono--lateral"> <div class="hexagono"> <div class="hexagono hexagono--intermediario"> <div class="hexagono hexagono--interno"> <img src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa5e0f1a3b16f78af46_coding%20(2).svg" alt="Ícone do Tema" /> </div> </div> </div> </div> <p class="conteudo"> E o passo a passo pra você dominar as linguagens Web, independente da sua formação ou conhecimento atual </p> </div> </div> </div> </section>
Essa estrutura permite que a estilização no CSS seja direcionada para as diferentes camadas do hexágono.
Para garantir que nosso hexágono tenha a aparência desejada, precisamos estilizar cada uma das suas camadas dentro do arquivo CSS de acordo com as novas classes e modificadores que adicionamos ao HTML.
Vamos começar estilizando a camada externa dos nossos hexágonos, representada pelo seletor de classe .hexagono–externo.
Dentro desse seletor, definiremos o tamanho do hexágono externo através das propriedades width (largura) e height (altura). A largura receberá o valor fixo de 60px, enquanto a altura será calculada automaticamente com base na proporção.
Essa proporção entre a largura e a altura do elemento é definida pela propriedade aspect-ratio, garantindo que o hexágono externo mantenha sua forma, independentemente do tamanho.
Para criar a sombra do nosso hexágono, utilizaremos o filtro drop-shadow, uma propriedade do CSS que permite adicionar sombras de forma mais precisa do que o box-shadow que vimos anteriormente.
Enquanto o box-shadow aplica a sombra à caixa de contorno do elemento, o drop-shadow respeita a forma definida pela propriedade clip-path, criando um efeito adequado ao formato do elemento.
Essa propriedade nos permite especificar o deslocamento horizontal e vertical da sombra, o raio de desfoque e a cor. Para a cor, utilizaremos o padrão RGBA, que define as quantidades de vermelho, verde, azul e a opacidade.
Além disso, utilizaremos as propriedades position: absolute com a propriedade transform para posicionar o hexágono externo centralizado dentro do container pai.
.hexagono--externo {
width: 60px;
height: auto;
aspect-ratio: 90 / 78;
filter: drop-shadow(0 0 2.5px #00a1ff);
position: absolute;
transform: translate(-50%, -50%);
}Com o seletor do hexágono externo definido, podemos modificar o seletor da classe .hexagono, a base de todos os hexágonos e que está contida dentro do hexágono externo.
Ajustaremos a largura e a altura desse seletor para 100%, garantindo que ele ocupe todo o espaço disponível dentro do container pai. Em seguida, vamos mudar a cor de fundo dele para um tom de azul-claro.
.hexagono {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #00a1ff;
border-radius: 7.5px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}Para a camada do hexágono intermediário, definiremos a largura e a altura como sendo de 99% do espaço disponível, e a cor de fundo será um tom de cinza escuro.
.hexagono--intermediario {
background-color: #1d1a1b;
width: 99%;
height: 99%;
}Finalmente, para o hexágono interno, definiremos a largura e a altura dele como sendo de 92,5% do espaço disponível e com um tom de cinza ainda mais escuro, praticamente preto.
.hexagono--interno {
width: 92.5%;
height: 92.5%;
background-color: #050505;
}Como cada hexágono sobrepõe aquele em que está contido, ao atribuir uma cor de fundo diferente para cada uma das camadas, conseguimos criar um efeito de contorno e profundidade.
Agora, podemos ajustar as formatações específicas do hexágono superior, contido no card da página, e do hexágono lateral, contido na seção Aprender.
Para a imagem do hexágono superior, vamos definir a largura de 60%, ao invés dos 50% que definimos como padrão, garantindo assim que o ícone da Hashtag fique bem visível.
.hexagono--superior {
top: 0;
left: 50%;
width: 90px;
}Feito isso, basta ajustar o posicionamento dos hexágonos em relação ao container pai de cada um deles, utilizando as propriedades left (esquerda) e top (topo). Por fim, também definimos a largura fixa do hexágono superior.
.hexagono--lateral {
left: 0;
top: 50%;
}
.hexagono--superior {
top: 0;
left: 50%;
width: 90px;
}Esses detalhes e propriedades garantem que os hexágonos estejam estilizados corretamente e posicionados de forma precisa em cada uma das suas camadas e seções.
Se você visualizar a nossa Landing Page nesse momento, verá que a seção Aprender está completa e estilizada adequadamente.
No entanto, precisamos realizar alguns ajustes de estilos na nossa página e no hexágono superior.
Para que a posição do hexágono superior fique relativa ao card em que ele está contido, precisamos adicionar a propriedade position: relative; ao seletor .card.
Além disso, podemos ajustar o espaçamento interno superior com a propriedade padding-top.
E, para dar um toque final, ajustamos a cor da sombra utilizando o padrão RGB com opacidade em 75%.
.card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-color: #050505;
box-shadow: 0 0 25px 5px rgb(0 161 255 / 75%);
padding: 30px 40px;
padding-top: 55px;
border-radius: 25px;
max-width: 50%;
gap: 25px;
font-size: 18px;
}Além disso, adicionaremos a propriedade height (altura) com o valor auto para todas as imagens da página, garantindo que a altura das imagens seja calculada automaticamente.
E para finalizar, vamos ajustar a cor de fundo do ícone da seção Passo a Passo para ser a mesma cor de fundo do hexágono intermediário.
.passo__icone {
max-width: 53px;
background-color: #1d1a1b;
border-radius: 7.5px;
padding: 12.5px;
box-shadow: 0 0 7.5px 0px #00a1ff, inset 0 0 2.5px 0px #005080;
border: 3px solid #262427;
}Com esses ajustes, garantimos que as nossas seções estejam estilizadas corretamente, conforme o esperado.
Seção Hero:
Seção Passo a Passo:
Seção Aprender:
Chegamos à quinta aula do curso de HTML e CSS, onde vamos criar uma landing page do zero! Hoje, vamos construir a seção Quem, com informações sobre o organizador da Masterclass, e também o rodapé da página.
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 o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Na aula passada, construímos a seção Aprender e estilizamos alguns elementos gerais da página, como a criação de um hexágono utilizando propriedades avançadas de CSS, como clip-path e drop-shadow.
Nesta aula, finalizaremos as seções da nossa landing page, construindo a seção Quem (Organizador) e o rodapé.
Além disso, vou te explicar brevemente o conceito e a manipulação do z-index para ajustar a ordem visual dos elementos em uma página.
Para começar, vamos construir a seção Quem, que destacará as informações sobre o organizador da Masterclass de Programação Full Stack.
Assim como nas outras seções, esta será encapsulada pela tag <section>, com as classes secao e secao–quem.
A seção Quem será posicionada logo abaixo da seção Aprender na estrutura do HTML, garantindo que ela apareça na ordem correta no layout da página.
Dentro dessa seção, teremos um container com as classes container e container–quem, que agrupará todos os elementos e os posicionará adequadamente.
Semelhante à seção Hero, a seção Quem será composta por um card com informações sobre o professor Daniel e uma imagem dele.
O card será uma <div> com as classes card e card–quem, contendo o título e parágrafos com informações sobre o professor.
O título será criado com uma tag <h2> e a classe card__titulo. Parte dele será destacada com a tag <span> e a classe realce.
Abaixo do título, teremos dois parágrafos, com partes do texto realçadas por <span>.
Ao lado do cartão informativo, haverá uma imagem do professor Daniel, que receberá a classe daniel-quem, usada para sua estilização e posicionamento no CSS.
<section class="secao secao--quem">
<div class="container container--quem">
<div class="card card--quem">
<h2 class="card__titulo">
Quem está organizando a
<span class="realce">Masterclass Programação Full Stack?</span>
</h2>
<p>
Daniel é o criador do Método Impressionador Full Stack,
responsável por ajudar mais de
<span class="realce">5.700</span> pessoas a usar a programação
para se tornarem o destaque de qualquer empresa.
</p>
<p>
Especialista em <span class="realce">Desenvolvimento WEB</span> da
Hashtag Treinamentos, maior empresa em treinamentos de Excel, VBA
e Power BI do Brasil, com mais de 100.000 alunos, mais de 650.000
seguidores no Instagram e mais de 1.500.000 no YouTube.
</p>
</div>
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660db188de965e67d15ed20c_daniel%2004.webp"
alt="Daniel da Hashtag"
class="daniel-quem"
/>
</div>
</section>Com essa estrutura, a seção Quem está pronta. No próximo passo, trabalharemos no CSS para garantir que a seção fique visualmente atraente e bem posicionada na página.
Agora que a estrutura HTML da seção Quem está definida, vamos aplicar o CSS para garantir a aparência da página.
Começaremos pela seção principal, usando o seletor de classe .secao–quem para definir a imagem de fundo (background-image), bem como o tamanho e a posição dela.
Usaremos a propriedade background-size: cover; para que a imagem cubra toda a área disponível, e background-position: 50%; para centralizá-la.
Também removeremos o padding inferior com padding-bottom: 0;.
.secao--quem {
background-image: url(https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660d9e60b52c66db2e67e0b4_%5BBACKGROUND%5D%20-%20BANNER%2001%20-%20WJS1.webp);
background-size: cover;
background-position: 50%;
padding-bottom: 0;
}Para o card, usaremos o seletor .card–quem, ajustando seu tamanho e espaçamento.
Definiremos a largura máxima com a propriedade max-width: 60%; para garantir que o cartão não ocupe mais do que 60% da largura disponível na seção. Para esse espaço disponível, definiremos que o cartão deve ocupar 100% da largura (width:100%;).
Adicionaremos uma margem inferior (margin-bottom) de 70px para criar espaçamento entre o card e outros elementos abaixo dele, e um padding superior (padding-top) de 30px.
.card--quem {
max-width: 60%;
width: 100%;
margin-bottom: 70px;
padding-top: 30px;
}Agora, inserimos e estilizamos a imagem do professor Daniel através do seletor de classe .daniel-quem.
Usaremos position: absolute; para posicionar a imagem de forma absoluta em relação ao container pai (container–quem).
A imagem será alinhada ao canto inferior direito da seção (bottom: 0; e right: 0;), com um leve deslocamento para a direita, garantido pela propriedade transform.
.daniel-quem {
position: absolute;
max-width: 435px;
bottom: 0;
right: 0;
transform: translate(20%, 0);
}O container pai será configurado com o seletor .container–quem, usando position: relative; para garantir que os elementos filhos posicionados de forma absoluta sejam corretamente posicionados em relação a ele.
.container--quem {
position: relative;
}Por fim, definimos o estilo do título do card com o seletor de classe .card__titulo. Ajustaremos o tamanho da fonte (font-size) para 32px e o peso da fonte (font-weight) para 500, criando um “seminegrito”.
A altura da linha será definida como 100% para garantir que ela corresponda ao tamanho da fonte, melhorando o espaçamento entre as partes do título.
.card__titulo {
font-size: 32px;
font-weight: 500;
line-height: 100%;
}Com essas regras de CSS aplicadas, a seção Quem ficará visualmente atraente e semelhante ao modelo que temos na Landing Page Original (nosso gabarito).
Agora, vamos focar na construção do rodapé da página, onde serão exibidos o logo da Hashtag e links importantes, como a Política de Privacidade e os Termos de Uso.
Essa seção é fundamental para fornecer informações legais e outros detalhes essenciais para os usuários.
Para começar a estrutura do rodapé, utilizaremos a tag <footer>, que é semântica e específica para os conteúdos que devem aparecer no final da página. Essa tag receberá a classe footer.
O HTML semântico refere-se ao uso de tags e elementos HTML que têm significado descritivo, tanto para humanos quanto para máquinas, como navegadores e mecanismos de busca.
Saiba mais: Aprenda HTML Semântico – Impulsione o seu SEO
Dentro do rodapé, teremos o elemento principal: um container com a classe footer__container, que agrupará todos os conteúdos dessa seção.
O primeiro item dentro do container será a imagem da logo da Hashtag, utilizando a tag <img>.
Logo abaixo da logo, incluiremos uma <div> com a classe footer__links, que conterá duas tags de âncora (<a>) com links essenciais: Política de Privacidade e Termos de Uso.
Entre os links, inserimos um separador visual, representado por um parágrafo <p> contendo apenas uma barra vertical |.
<footer class="footer">
<div class="footer__container">
<img
src="https://cdn.prod.website-files.com/644aa7c2eb05a0f70a59d944/644c07a9ff728a4f713e66c2_logo%20hash%20quadrada%20h%20(1).webp"
alt="Logo da Hashtag"
/>
<div class="footer__links">
<a
href="https://excelparaestagio.klickpages.com.br/politica-privacidade"
>Política de Privacidade</a
>
<p>|</p>
<a href="https://excelparaestagio.klickpages.com.br/termos-uso"
>Termos de Uso</a
>
</div>
</div>
</footer>Assim, a estrutura do rodapé está pronta e organizada, exibindo as informações essenciais para o usuário.
Nesta etapa, aplicaremos o CSS ao rodapé para que ele se integre perfeitamente ao restante do site.
Começamos estilizando o seletor de classe .footer, que representa toda a área do rodapé. Aqui, aplicaremos um espaçamento interno (padding) de 40px.
.footer {
padding: 40px;
}Para as imagens dentro do rodapé, utilizaremos o seletor .footer img, onde definiremos a largura máxima (max-width) de 45px, garantindo o tamanho adequado da logo no rodapé.
.footer img {
max-width: 45px;
}Vamos definir que os links do rodapé herdem a cor de texto definida para o elemento pai (color: inherit;) e, inicialmente, o texto não terá sublinhado (text-decoration: none;).
.footer a {
color: inherit;
text-decoration: none;
}Para que, ao passar o mouse sobre o link, o sublinhado apareça, utilizaremos a pseudo-classe :hover. Dessa forma, ao posicionar o mouse sobre os links do rodapé, eles ficarão sublinhados, indicando ao usuário que o texto é clicável.
.footer a:hover {
text-decoration: underline;
}Em seguida, vamos estilizar o container do rodapé com a classe .footer__container. Definiremos o layout como um flexbox (display: flex;), com um espaçamento de 20px entre os elementos filhos.
Esses elementos estarão alinhados verticalmente ao centro com a propriedade align-items: center; e posicionados à direita da tela usando justify-content: flex-end;.
.footer__container {
display: flex;
gap: 20px;
align-items: center;
justify-content: flex-end;
}Por fim, os links dentro do rodapé serão organizados horizontalmente com a classe .footer__links, que também utilizará o flexbox para a disposição dos itens.
Para garantir que os links não fiquem muito próximos entre si, adicionamos um pequeno espaçamento de 10px (gap: 10px;).
.footer__links {
display: flex;
gap: 10px;
}Com isso, nosso rodapé estará pronto e estilizado.
Com a estrutura e estilização da seção Quem e do rodapé, nossa landing page está quase completa. Nas próximas aulas abordaremos a responsividade da página.
Mas antes disso, quero te explicar brevemente o conceito de z-index.
O z-index é uma propriedade do CSS que permite controlar a ordem de empilhamento dos elementos na página. Temos o eixo X, que controla o alinhamento horizontal; o eixo Y, que controla o alinhamento vertical; e o eixo Z, que é responsável pela profundidade.
Esse conceito é muito utilizado quando trabalhamos com camadas de conteúdo, como sobreposições de imagens e sombras.
Por exemplo, se quiséssemos aplicar uma sombra superior ao rodapé, separando-o da seção Quem, teríamos que utilizar o z-index para controlar a profundidade, deixando o rodapé acima da seção Quem.
.footer {
padding: 40px;
position: relative;
z-index: 1;
box-shadow: 0 -15px 15px 0 rgba(0, 0, 0, 0.5);
}A propriedade z-index com o valor 1 garante que o rodapé fique sobre os outros elementos da página que possam ter um índice Z menor.
No entanto, para que possamos ter esse controle sobre o z-index, é importante definir que a posição do rodapé seja relative e não static (o padrão). Isso nos dá a flexibilidade necessária para personalizar esses efeitos de layout.
Embora o efeito de sombra seja sutil, ele pode ser um interessante recurso de estilização.
Para esse projeto, não aplicaremos essa estilização; apenas demonstrei o conceito para que você possa entender melhor o z-index.
Hoje vamos para a sexta aula do Curso de HTML e CSS, cujo objetivo é te ensinar a criar uma Landing Page do zero! Nesta aula, construiremos o pop-up de inscrição para a Masterclass.
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 o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Nas aulas passadas, construímos e estilizamos todas as seções da landing page da Masterclass.
Agora, vamos explorar o processo de criação de um pop-up de inscrição usando HTML, CSS e JavaScript.
Nosso objetivo é criar um pop-up estilizado, centralizado, e com interatividade para exibição e ocultação, acionado quando o usuário clicar em algum dos botões presentes na nossa página.
O pop-up da nossa Landing Page deverá cobrir toda a tela e conter um formulário onde o usuário deverá preencher seus dados. Este contêiner incluirá três inputs (nome, e-mail e telefone), além de botões para enviar as informações e fechar o pop-up.
O primeiro passo na criação do pop-up será definir a estrutura em HTML, logo abaixo do <footer>. Dentro do pop-up, haverá uma div com a classe popup, que servirá como fundo desfocado.
Além disso, o formulário terá um botão de fechar identificado por uma classe específica, e vários inputs com placeholders para facilitar a interação do usuário.
Os botões compartilharão algumas classes comuns para manter a consistência visual, mas terão modificadores específicos para diferenciar suas funções (enviar ou fechar).
Começaremos com o elemento <div class=”popup”>, que serve como o contêiner principal do pop-up.
Dentro desse contêiner, definiremos o elemento <form> com a classe popup__container. Este formulário é onde o usuário inserirá suas informações, como nome, e-mail e WhatsApp.
Na parte superior do formulário, definiremos um elemento button que será representado por um “X“, responsável por fechar o pop-up. Esse botão terá as classes popup__botao e popup__botao–fechar.
A classe popup__botao estilizará o botão, enquanto popup__botao–fechar será uma modificação específica para o botão de fechamento. O tipo do botão será definido como button para evitar que ele envie o formulário ao ser clicado.
<div class="popup">
<form class="popup__container">
<button type="button" class="popup__botao popup__botao--fechar">
X
</button>Em seguida, teremos três campos de entrada (<input>), onde o usuário preencherá suas informações. Cada campo possui um atributo type que define o tipo de dado esperado.
O campo para o nome (type=”text”) aceita texto comum, o campo para o e-mail (type=”email”) aceita um formato de e-mail, e o campo para o WhatsApp também utiliza type=”text”.
O atributo placeholder fornece dicas de preenchimento para o usuário, indicando que os campos são obrigatórios (com o asterisco “*”) e qual informação o usuário deve inserir.
Por fim, teremos o botão de envio do formulário. Esse botão recebe a mesma classe popup__botao usada no botão de fechar, mas sem a modificação popup__botao–fechar. Dentro dele, teremos o texto “Quero garantir minha vaga”.
<div class="popup">
<form class="popup__container">
<button type="button" class="popup__botao popup__botao--fechar">
X
</button>
<input type="text" placeholder="*Seu primeiro nome" />
<input type="email" placeholder="*Seu melhor e-mail" />
<input type="text" placeholder="*Seu WhatsApp com DDD" />
<button class="popup__botao">Quero garantir minha vaga</button>
</form>
</div>Agora que temos a estrutura do nosso pop-up, vamos partir para a estilização, começando pelo seletor de classe .popup. Esse seletor define o estilo do pop-up quando ele está oculto.
Utilizaremos a propriedade display: none; para garantir que o pop-up não seja exibido inicialmente. A propriedade position: fixed; será usada para fixar o pop-up na tela, independentemente do scroll.
Centralizaremos o alinhamento dos elementos utilizando as propriedades justify-content: center; e align-items: center;, garantindo que o conteúdo seja exibido no centro da tela.
Aplicaremos a propriedade inset: 0;, que é uma forma abreviada de definir top: 0;, right: 0;, bottom: 0; e left: 0;, fazendo com que o pop-up cubra toda a tela.
Para criar um efeito de fundo escurecido e desfocado, usaremos background-color para definir a cor de fundo e backdrop-filter para aplicar um filtro de desfoque ao que está atrás do elemento.
.popup {
display: none;
position: fixed;
justify-content: center;
align-items: center;
inset: 0;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(7px);
}Em seguida, definiremos o seletor para a classe .popup–aberto, que tornará o pop-up um contêiner flex quando ele estiver aberto. Se a classe não estiver presente, o padrão será display: none;, ocultando assim o pop-up.
.popup--aberto .popup {
display: flex;
}Dentro do pop-up, o conteúdo é organizado pelo seletor .popup__container. Vamos atribuir a propriedade position: relative; para permitir o posicionamento absoluto dos elementos filhos do pop-up, como o botão de fechar.
O layout do conteúdo será definido pelo display: flex; com flex-direction: column;, organizando os elementos em uma coluna vertical com um espaçamento de 10px (gap: 10px;).
Estilizaremos a cor de fundo do pop-up com a propriedade background-color, e com a propriedade padding, adicionaremos espaçamento interno, garantindo uma melhor disposição do formulário e dos botões.
Também arredondaremos as bordas usando a propriedade border-radius.
.popup__container {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
background-color: #1e1e1e;
padding: 25px;
border-radius: 25px;
}No estilo dos inputs dentro do pop-up, começaremos com padding: 10px 15px; para aumentar a área clicável e melhorar a experiência do usuário.
A borda também será arredondada com a propriedade border-radius, e para que cada campo tenha um contorno de destaque, definiremos a propriedade border como sendo de 2px, sólida (solid), e em um tom de azul.
O fundo dos inputs será transparente, permitindo que a cor de fundo do contêiner seja exibida.
Para a fonte, definiremos o tamanho de 16px e a cor como branco. Além disso, removeremos o contorno padrão com a propriedade outline: none;.
input {
padding: 10px 15px;
border-radius: 100px;
border: 2px solid #0068a5;
background-color: transparent;
font-size: 16px;
outline: none;
color: white;
}Para finalizar, vamos estilizar o botão de fechar o pop-up. Esse botão será posicionado de forma absoluta dentro do pop-up, para isso, utilizaremos a propriedade position: absolute;.
Para que o botão fique posicionado no canto superior direito, usaremos as propriedades top e right, além da propriedade transform para deslocar ligeiramente o botão para fora do contêiner.
Vamos definir o espaçamento interno com 10px e, para garantir que o botão seja um quadrado, vamos definir o aspect-ratio dele como 1/1. Por fim, definiremos o tamanho dele com height: 54px;.
.popup__botao--fechar {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
padding: 10px;
aspect-ratio: 1 / 1;
height: 54px;
}Antes de partirmos para as funcionalidades dos botões na página, vamos adicionar um botão à seção Aprender no nosso HTML, com a mensagem “Garanta sua vaga”.
<section class="secao secao--aprender">
<div class="container container--coluna">
<h2>
Nessa <span class="realce">aula gratuita</span> você vai aprender:
</h2>
<div class="temas">
<div class="tema">
<div class="hexagono--externo hexagono--lateral">
<div class="hexagono">
<div class="hexagono hexagono--intermediario">
<div class="hexagono hexagono--interno">
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa431e28eef1bc94f30_programming%20(1).svg"
alt="Ícone do Tema"
/>
</div>
</div>
</div>
</div>
<p class="conteudo">
Como funciona um Projeto Full Stack e os 7 passos pra criar
qualquer projeto
</p>
</div>
<div class="tema">
<div class="hexagono--externo hexagono--lateral">
<div class="hexagono">
<div class="hexagono hexagono--intermediario">
<div class="hexagono hexagono--interno">
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa4326b84ab36e15627_coding%20(1).svg"
alt="Ícone do Tema"
/>
</div>
</div>
</div>
</div>
<p class="conteudo">
Quais linguagens e conhecimentos você precisa dominar pra se
tornar um Programador
</p>
</div>
<div class="tema">
<div class="hexagono--externo hexagono--lateral">
<div class="hexagono">
<div class="hexagono hexagono--intermediario">
<div class="hexagono hexagono--interno">
<img
src="https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660dafa5e0f1a3b16f78af46_coding%20(2).svg"
alt="Ícone do Tema"
/>
</div>
</div>
</div>
</div>
<p class="conteudo">
E o passo a passo pra você dominar as linguagens Web,
independente da sua formação ou conhecimento atual
</p>
</div>
</div>
<button>Garanta sua vaga</button>
</div>
</section>Feito isso, todos os botões em nossa página estarão estruturados, prontos para receber as funcionalidades que permitirão abrir o pop-up.
Inicialmente, o pop-up será oculto no HTML, e utilizaremos o JavaScript para adicionar a classe popup–aberto ao elemento quando o botão for clicado, tornando-o visível. Ao clicar no botão de fechar, essa classe será removida, ocultando novamente o pop-up.
Vamos criar um arquivo chamado script.js dentro da pasta do nosso projeto.
Assim como vinculamos o arquivo CSS ao HTML, precisamos também vincular nosso script em JavaScript ao HTML. Para isso, adicione a tag <script> no final do <body>, definindo o caminho para o arquivo JavaScript.
<script src="scripts.js"></script> </body> </html>
Agora, vamos criar uma interação simples dentro do arquivo JavaScript para controlar a abertura e o fechamento do pop-up.
Como queremos adicionar essa funcionalidade a todos os botões, usaremos o método querySelectorAll do JavaScript para selecionar todos os elementos <button> do documento HTML.
Em seguida, utilizaremos o método forEach para iterar sobre cada botão. O forEach permite que passemos uma função como argumento, que será executada para cada elemento presente na lista obtida pelo querySelectorAll.
Neste caso, a função receberá o botão atual (botao) como parâmetro, e adicionaremos o método addEventListener, que dará ao botão a capacidade de escutar um evento de clique.
Quando esse clique for executado, chamaremos a função anônima definida dentro do addEventListener para ser executada.
Dentro dessa função, acessaremos a lista de classes CSS definidas no elemento body do documento HTML (document.body.classList).
Usaremos o método toggle para adicionar a classe popup–aberto ao elemento, se ela ainda não estiver presente. Se ela já estiver presente, o toggle irá removê-la.
Quando a classe popup–aberto é adicionada, o CSS correspondente faz com que o pop-up seja exibido. Quando a classe é removida, o pop-up é escondido.
Assim, sempre que um botão é clicado, ele alterna o estado de exibição do pop-up, tornando a interface interativa e dinâmica.
document.querySelectorAll("button").forEach(function (botao) {
botao.addEventListener("click", function () {
document.body.classList.toggle("popup--aberto");
});
});Para entender melhor o uso de funções anônimas e outros conceitos de JavaScript aplicados a esse código, recomendo conferir as seguintes aulas:
Feito isso, os botões da nossa página estarão funcionais e ao clicar em um deles, o nosso pop-up será aberto.
Chegamos à sétima e última aula do curso de HTML e CSS, onde você vai aprender como criar uma landing page do zero! Nesta aula, você aprenderá a tornar o site responsivo utilizando media queries.
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 o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Ao longo das seis primeiras aulas deste curso, você aprendeu a estruturar e estilizar a landing page com HTML e CSS, além de adicionar funcionalidades aos botões da página utilizando JavaScript.
No entanto, para que sua página fique ainda mais completa e profissional, é crucial torná-la responsiva.
A responsividade de um site é essencial para garantir que sua página seja acessível e funcional em uma variedade de dispositivos, desde monitores de desktop até smartphones.
Para criar essa responsividade na página, utilizaremos media queries, que irão adaptar o layout e a apresentação dos elementos de acordo com os diferentes tamanhos de tela.
Para que você possa visualizar e testar a responsividade da sua página em diferentes dimensões de tela, podemos utilizar as ferramentas do desenvolvedor.
Ao abrir essa ferramenta, você verá a opção Toggle Device Toolbar, localizada no canto superior esquerdo da janela (o segundo ícone).
Essa ferramenta permite alterar o tamanho do layout da página e verificar a responsividade dela.
No nosso exemplo, você notará que, ao diminuirmos o tamanho da tela, surgem alguns problemas na página, como seções que não estão ocupando toda a largura disponível, contrariando a configuração inicial.
O objetivo desta aula será identificar esses possíveis problemas e os ajustes necessários, e em seguida, definir as media queries para ajustar o conteúdo independentemente do tamanho da tela do usuário.
Assim, não importa em qual dispositivo o usuário visualize a sua landing page, ele conseguirá ver todo o conteúdo de forma adequada.
Saiba mais sobre responsividade no CSS com a nossa aula: Responsividade no CSS – Criando Layouts para Diferentes Dispositivos
Antes de partirmos para a implementação das media queries, vamos identificar os problemas iniciais da nossa página e realizar alguns ajustes.
O primeiro ponto que podemos observar é que, dentro da seção Quem, a imagem do professor Daniel está transbordando do contêiner pai.
Para corrigir esse problema, vamos adicionar a propriedade overflow com o valor hidden ao seletor da classe .secao no arquivo CSS.
.secao {
padding: 70px 20px;
overflow: hidden;
}Isso fará com que os elementos que ultrapassarem a área definida do elemento pai fiquem invisíveis. Ou seja, as partes da imagem do professor Daniel que estão saindo do contêiner serão ocultas.
Outro ponto importante de ajuste é a margem dos temas na seção Aprender. Vamos adicionar um seletor para essa classe no CSS e definir uma margem esquerda de 30px.
.temas {
margin-left: 30px;
}Feito isso, podemos criar um seletor agrupando as classes .passos, .temas, e .card para ajustar o tamanho da fonte. Atualmente, o font-size dessas classes está definido separadamente, mas podemos agrupá-las em um único seletor.
.passos,
.temas,
.card {
font-size: 18px;
}Podemos fazer o mesmo para os elementos h3, button, e as classes .subtitulo e .data.
h3,
button,
.subtitulo,
.data {
font-size: 23px;
}Também iremos centralizar os nossos títulos <h2> com a propriedade text-align: center;.
h2 {
font-size: 42px;
font-weight: 400;
text-align: center;
}Por fim, para garantir que o pop-up nunca exceda a largura do dispositivo, definiremos o max-width dele como 100% e adicionaremos uma margem lateral de 40px para que ele não encoste nas bordas da tela.
.popup__container {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
background-color: #1e1e1e;
padding: 25px;
border-radius: 25px;
max-width: 100%;
margin: 0 40px;
}Agora que concluímos os ajustes iniciais da página, o próximo passo é identificar os breakpoints.
Um breakpoint é o ponto no qual o layout do site muda para se adaptar a uma largura de tela específica.
Para identificar os breakpoints da página, basta alterar as dimensões do layout com a ferramenta de desenvolvedor até que ele quebre. A partir das medidas desse ponto, podemos criar media queries para ajustar o layout.
Existem alguns pontos interessantes que você também pode considerar na hora de definir os seus breakpoints eficientes:
Media queries são regras do CSS que nos permitem aplicar estilos específicos a elementos de uma página de acordo com as características do tamanho da tela do dispositivo que está visualizando o site.
Você pode definir essas regras com base em características dos dispositivos, como largura, altura, orientação e resolução da tela.
As media queries são fundamentais para a criação de sites responsivos, pois permitem ajustes dinâmicos que garantem uma melhor experiência para o usuário em qualquer O uso de media queries é essencial para uma página profissional, pois, além de melhorar o design em diferentes dispositivos, assegura que o conteúdo seja legível e fácil de visualizar, além de melhorar a performance e o SEO da página.
Para mais informações sobre media queries, você pode acessar a documentação disponível em:
Fazendo testes com a ferramenta de desenvolvedor, é possível identificar o primeiro breakpoint com a largura de 1020px. Podemos, então, criar uma media query correspondente para essa largura de tela dentro do arquivo CSS.
Assim como separamos as regras de CSS para cada seção, podemos separar também as media queries aplicadas.
Para criar uma media query em CSS, você deve usar a regra @media seguida da condição específica na qual os estilos definidos deverão ser aplicados.
Neste caso, vamos ajustar o estilo de diversos elementos para telas que têm no máximo 1020px de largura. Passaremos como condição para a regra @media a propriedade max-width: 1020px.
/* Media Queries */
@media (max-width: 1020px) {
}Começaremos ajustando o tamanho da fonte dos elementos <h1> e de suas subclasses .programacao e .fullstack, que formam o título da seção Hero.
@media (max-width: 1020px) {
h1 {
font-size: 42px;
}
h1 .programacao {
font-size: 46px;
}
h1 .fullstack {
font-size: 68px;
}
}Note que todas as regras e estilos aplicados dentro de uma media query ficam dentro de chaves, garantindo que esses estilos só serão aplicados quando a largura do dispositivo visualizando a página for de no máximo 1020px.
Feitos os ajustes no título, também podemos melhorar o espaçamento da seção disclaimer, adicionando um padding de 30px e centralizando o texto dessa seção.
@media (max-width: 1020px) {
h1 {
font-size: 42px;
}
h1 .programacao {
font-size: 46px;
}
h1 .fullstack {
font-size: 68px;
}
.secao--disclaimer {
padding: 30px;
}
.disclaimer {
text-align: center;
}
}Para as seções Hero (.secao–hero) e Quem (.secao–quem), definimos uma nova imagem de fundo, adequada para dispositivos menores, com a propriedade background-image. Também removemos o espaçamento inferior zerando o padding-bottom.
Os cards (.card) da página podem ser ajustados para garantir que eles se adequem ao tamanho da tela. Para isso, basta alterar a largura máxima (max-width) e a largura (width) deles.
Em seguida, vamos alterar o layout do container principal (.container) para uma coluna única com flex-direction: column e alinhar seus itens ao centro com um espaçamento de 20px. Dentro da classe .container–coluna, esse espaçamento será de 40px.
Para finalizar os ajustes necessários para essa media query, ajustaremos o posicionamento da imagem do professor Daniel na seção Quem (.daniel-quem) para que ela se alinhe corretamente ao fluxo da página.
@media (max-width: 1020px) {
h1 {
font-size: 42px;
}
h1 .programacao {
font-size: 46px;
}
h1 .fullstack {
font-size: 68px;
}
.secao--disclaimer {
padding: 30px;
}
.disclaimer {
text-align: center;
}
.secao--hero,
.secao--quem {
background-image: url(https://cdn.prod.website-files.com/61b9e0dd381626819c8d4f83/660db2a7aa53ee839f890d43_%5BBACKGROUND%5D%20-%20BANNER%2001%20-%20WJS1%20-%20Mobile.webp);
padding-bottom: 0;
}
.card {
max-width: 500px;
width: 100%;
}
.container {
flex-direction: column;
align-items: center;
gap: 20px;
}
.container--coluna {
gap: 40px;
}
.card--quem {
margin-bottom: 0;
}
.daniel-quem {
position: static;
transform: none;
}
}
Agora que ajustamos o layout para telas de até 1020px, o próximo passo é adaptar o design para dispositivos com larguras ainda menores.
Podemos novamente utilizar a ferramenta Toggle device toolbar para identificar o próximo breakpoint, que nesse caso será o de 770px.
Nesta media query, faremos ajustes adicionais para garantir que nossa página seja legível e funcional em dispositivos móveis com larguras de tela menores.
É essencial revisar cuidadosamente quais propriedades e estilos precisam ser modificados para alcançar o melhor resultado possível.
Vamos começar centralizando os elementos dos passos (.passos) e dos temas (.temas) da Masterclasse. Isso facilitará a leitura em dispositivos móveis, ajustando o alinhamento com align-self e text-align.
Além disso, vamos alterar a direção do layout do contêiner de passos para uma coluna, utilizando flex-direction: column. Isso organizará os elementos em uma disposição vertical, mais adequada para telas pequenas.
Para melhorar ainda mais a apresentação, ajustaremos a barra que separa cada passo, garantindo que ela ocupe 100% da largura disponível (width: 100%) e tenha uma altura de 2px. Isso criará uma divisão clara e esteticamente agradável entre os elementos.
No contêiner dos temas (.temas), removeremos a margem esquerda e adicionaremos um espaçamento (gap) de 50px entre os elementos filhos. Isso criará uma separação visual mais confortável e facilitará a navegação.
Adicionalmente, cada tema (.tema) receberá um espaçamento superior (padding-top) de 50px, garantindo uma organização mais clara e uma melhor visualização dos conteúdos.
Os hexágonos laterais, presentes em cada tema, terão sua posição ajustada através das propriedades left e top, de modo a ficarem alinhados corretamente em dispositivos com largura de até 770px.
Para as imagens do professor Daniel, ajustaremos a largura máxima para 350px, garantindo que elas se adaptem bem a telas menores sem comprometer a qualidade visual.
Por fim, faremos ajustes no rodapé da landing page. O padding será definido como 25px para melhorar o espaçamento interno, tornando-o mais confortável e acessível.
O contêiner do rodapé (.footer__container) será reorganizado para exibir os elementos em uma coluna, usando display: flex e flex-direction: column. Além disso, os elementos serão centralizados (justify-content: center) e espaçados com 15px entre eles.
Os links do rodapé (.footer__links) também serão organizados em uma coluna, alinhados ao centro, com um espaçamento de 5px.
Os textos adicionais presentes nos links do rodapé (.footer__links p) serão ocultados (display: none), simplificando a interface em telas pequenas.
@media (max-width: 770px) {
.passos,
.temas {
max-width: 500px;
align-self: center;
text-align: center;
}
.passo {
flex-direction: column;
}
.passo__barra {
height: 2px;
width: 100%;
}
.temas {
margin-left: 0;
gap: 50px;
}
.tema {
padding-top: 50px;
}
.hexagono--lateral {
left: 50%;
top: 0;
}
.daniel,
.daniel-quem {
max-width: 350px;
}
.footer {
padding: 25px;
}
.footer__container {
justify-content: center;
flex-direction: column;
gap: 15px;
}
.footer__links {
flex-direction: column;
align-items: center;
gap: 5px;
}
.footer__links p {
display: none;
}
}
A última media query que implementaremos para a nossa landing page será destinada a telas de até 480px de largura, ou seja, dispositivos muito pequenos, como alguns smartphones.
Nesta media query, faremos ajustes nos tamanhos das fontes para garantir que os textos continuem legíveis e bem dimensionados em telas reduzidas.
Vamos começar ajustando os tamanhos das fontes dos títulos (h1) para que se adaptem bem a esses dispositivos menores.
Além disso, alteraremos o padding e o espaçamento (gap) dos cartões (.card) para adicionar um espaço maior ao redor do conteúdo, deixando a aparência mais agradável e melhorando a leitura.
Para esta largura de tela, faremos as seguintes reduções nos tamanhos das fontes:
Além disso, a largura máxima das imagens do professor Daniel será reduzida para 275px, adaptando-as melhor ao tamanho da tela.
Para os elementos h2, além de diminuir a fonte para 32px, definiremos o line-height como 100%, garantindo que os títulos fiquem visualmente equilibrados.
Após esses ajustes, também revisaremos o espaçamento interno (padding), as margens (margin) e o espaçamento entre os elementos de cada seção da página para valores que se adaptem melhor a dispositivos menores.
Por fim, para finalizar o layout da landing page em dispositivos de até 480px, definiremos o estilo do pop-up quando aberto nesses aparelhos.
Modificaremos os seletores .popup__container, .popup__botao, e .popup__botao–fechar, ajustando o tamanho, espaçamento e margens do pop-up e dos elementos contidos dentro dele, como os botões.
@media (max-width: 480px) {
h1 {
font-size: 32px;
}
h1 .programacao {
font-size: 35px;
}
h1 .fullstack {
font-size: 51px;
}
.card {
padding: 25px;
padding-top: 55px;
gap: 15px;
}
h3,
button,
.subtitulo,
.data {
font-size: 18px;
}
.passos,
.temas,
.card {
font-size: 16px;
}
.daniel,
.daniel-quem {
max-width: 275px;
}
.disclaimer {
font-size: 13px;
}
h2 {
font-size: 32px;
line-height: 100%;
}
.secao {
padding: 40px 20px;
}
.secao--hero {
padding-bottom: inherit;
padding-top: 70px;
}
.secao--quem {
padding-bottom: inherit;
}
.secao--disclaimer {
padding: 30px;
}
.container--coluna {
gap: 30px;
}
.passo {
gap: 20px;
}
.temas {
margin-top: 30px;
}
.tema {
padding: 40px 20px 20px;
}
.card--quem {
padding-top: 25px;
}
.card__titulo {
font-size: 25px;
}
.popup__container {
padding: 20px;
margin: 0 30px;
}
.popup__botao {
padding: 10px 20px;
}
.popup__botao--fechar {
padding: 10px;
height: 50px;
}
}
Com isso, concluímos as media queries necessárias para a nossa landing page.
Essas regras de CSS permitem criar um layout responsivo, garantindo que o conteúdo seja exibido de forma adequada em diferentes dispositivos e tamanhos de tela.
Cada seletor e propriedade estilizados dentro das media queries ajusta o design para que a interface permaneça funcional, legível e esteticamente agradável, mantendo a experiência do usuário e a funcionalidade da página em qualquer dispositivo.
Ao longo desse curso, você aprendeu como criar uma landing page do zero com o curso completo de HTML e CSS! Vimos desde a estrutura básica da página até a responsividade e interatividade dela com HTML, CSS e JavaScript.
O objetivo deste curso é que você consiga, a partir daqui, dar seus primeiros passos na construção de uma landing page do zero, compreendendo os conceitos mais importantes dessas linguagens e como aplicá-los na prática.
Para se aprofundar ainda mais em HTML e CSS, confira o curso online de HTML e CSS da Hashtag Treinamentos e comece a sua jornada para dominar essas linguagens essenciais para o desenvolvimento web!
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
Posts mais recentes da Hashtag Treinamentos
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.