Aula 2

Página responsiva

Unidade

Projeto de vida: organizando

objetivos futuros com
matemática aplicada
O que vamos aprender?
Estilizar título e botões utilizando a
linguagem CSS.

Criar estilizações responsivas com

Media Queries.

CLIQUE E ACOMPANHE A AULA NA ALURA

Utilizar pseudoclasses CSS.

2
Página responsiva
Dando sequência aos aprimoramentos visuais do nosso projeto, vamos
estilizar os botões da nossa página a partir do arquivo style.css, além de
adicionarmos mais ajustes ao conteúdo principal. Nesta aula, também
tornaremos nosso projeto mais responsivo.

3
Para iniciar nossos aprimoramentos, selecionaremos o arquivo style.css.
Começaremos programando o conteúdo principal, adicionando diversas
propriedades que reorganizarão esse conteúdo. Assim, temos a propriedade
display: flex;, que é utilizada para estabelecer um contêiner flexível com
o objetivo de organizar os elementos filhos.
A propriedade flex-direction: column; especifica que os elementos
filhos serão organizados verticalmente em uma coluna.
Em seguida, a propriedade justify-content: center; é utilizada para
centralizar verticalmente os elementos filhos dentro desse contêiner
flexível.
Com a propriedade align-items: center;, os elementos filhos são
centralizados horizontalmente dentro do contêiner.
Já a propriedade max-width: 1200px; define uma largura máxima de
1 200 pixels para a página, enquanto a propriedade width: 100%; garante
que a página ocupe 100% da largura disponível do contêiner pai.

4
Por fim, margin: 0 auto; estabelece uma margem de 0 pixel na parte
superior e inferior, enquanto a margem horizontal é definida como
automática, garantindo o alinhamento central na horizontal.
Seu código ficará da seguinte forma:
.conteudo-principal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
Feitas essas programações, observaremos que, pelo Live Preview, não
será possível notar grandes modificações no visual do projeto. Para que
essas modificações possam sem verificadas, é necessário utilizar a visua-
lização do Live Server, localizada no canto inferior direito da tela.

5
No protótipo do Figma, o título está posicionado no canto esquerdo da
tela. Para alcançar esse posicionamento, as propriedades CSS text-
align: left, width: 100%;, e font-size: 32px; são aplicadas, o que
garante que o título esteja à esquerda, ocupe toda a largura da página e
tenha um tamanho de fonte de 32 pixels.
.titulo-principal {
text-align: left;
width: 100%;
font-size: 32px;
}
Em seguida, no arquivo index.html, adicionaremos uma tag <span>
envolvendo o underscore do título para que possamos aplicar uma cor
diferente a esse símbolo no CSS.
<h2 class=”titulo-principal”>Meus Objetivos do ano<span>_<span></h2>
Em styles.css, vamos adicionar a cor verde ao underscore, aplicando
somente a tag <span>, filho da classe principal.
.titulo-principal span {
color: var(--verde);
}
6
Vamos prosseguir com a estilização dos nossos botões no arquivo style.
css. A seguir, observe todas as propriedades que podemos utilizar para
isso.
A propriedade font-family altera a fonte do texto nos botões,
proporcionando um estilo de fonte específico. No caso, utilizaremos a
fonte CraKra Petch.
Já a propriedade background-color modifica a cor de fundo dos
botões quando estão em seu estado inativo, definindo a aparência visual.
Por sua vez, a propriedade color determina a cor do texto nos botões,
estabelecendo-a como branca para contraste.
O uso das propriedades display: flex; justify-content: center;
align-items: center; alinha e centraliza horizontal e verticalmente
os botões dentro de seu contêiner.
A propriedade padding adiciona espaçamento interno aos botões,
influenciando o espaço ao redor do texto dentro deles.

7
A propriedade font-size controla o tamanho da fonte nos botões.
Por fim, a propriedade width: 100%; define a largura dos botões como
100% do espaço disponível, garantindo que eles ocupem toda a largura
horizontal. Seu código, ao adotar essas propriedades, ficará da seguinte
forma:
.botao {
font-family: «Crakra Petch», sans-serif;
background-color: var(--botao-inativo);
color: var(--branco);
display: flex;
justify-content: center;
padding: 1em;
font-size: 18px;
align-items: center;
width: 100%;
}

8
Por último, observe que as bordas dos botões ainda não correspondem
ao estilo do nosso protótipo. Para resolver essa questão, faremos alguns
ajustes no estilo das bordas dos botões, estabalecendo a espessura
dessas bordas e um efeito de cor para botões ativos.
border-bottom: 4px solid var(--botao-ativo);
border-left: 2px solid var(--botao-ativo);
border-right: 2px solid var(--botao-ativo);
border-top: none;
Ao final, este será o resultado, bem mais próximo do nosso protótipo:

9
Agora, vamos considerar a importância da responsividade das páginas,
pois isso facilita a utilização de um site e a visualização de seu conteúdo
em diferentes dispositivos. Desse modo, vamos estabelecer uma largura
máxima de 1 200 pixels para a nossa página. Isso significa que, quando
a tela for mais larga do que isso, o conteúdo não se estenderá além da
largura definida. Para realizar essa adaptação, utilizaremos o recurso de
Media Query, que permite que o conteúdo se ajuste automaticamente às
diferentes condições, como a resolução da tela.
.botoes {
display: block;
}
@media screen and (min-width: 768px) {
.botoes {
display: flex;
}
}

10
Agora, nosso projeto responde de forma responsiva, pois quando
alteramos a largura da página, o conteúdo se adapta a ela.

11
Por fim, para garantir que as bordas dos botões fiquem arredondadas
independentemente do tamanho da tela, vamos aplicar as seguintes
regras de estilo em nosso arquivo CSS. Dentro do Media Query, iremos:
- Utilizaremos a propriedade CSS border-radius para arredondar as
bordas dos botões.
- Vamos selecionar o primeiro botão usando .botao:first-child.
.botao:first-child {
border-radius: 40px 0 0 0;
}
- Em seguida, selecionaremos o último botão usando .botao:last-
child.
.botao:last-child {
border-radius: 0 40px 0 0;
}
}

12
Por fim, esse será o resultado final, ainda mais próximo do nosso
protótipo:

13
 Desafio
Neste desafio, incentivamos os estudantes a aprofundarem seu
conhecimento sobre a filosofia Mobile-First na linguagem web.
O Mobile--First é um conceito importante no design responsivo,
enfatizando o desenvolvimento inicial de um site ou aplicativo para
dispositivos móveis antes de expandi-lo para tamanhos maiores de
tela. Descubra quais são os princípios do Mobile-First, bem como suas
vantagens e benefícios.

CLIQUE AQUI PARA AVALIAR ESTE MATERIAL

14