Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resolução de Atividades -

1 - Espaçamento e margens com Flexbox

CSS:

.apresentacao {

    margin: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

Imagem:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 - Definindo o tamanho da seção de texto

Imagem - Figma:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeCSS:

.apresentacao__conteudo {

    width: 615px;
}

3 - Ajustando tamanhos de títulos e textos

HTML:

<main class = "apresentacao">

        <section class = "apresentacao__conteudo">

            <h1 class = "apresentacao__conteudo__titulo"> Eleve seu negócio digital a outro nível <strong class = "destaque-titulo"> com um Front-end de qualidade! </strong> </h1>

            <p class = "apresentacao__conteudo__paragrafo"> Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS.
            Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar? </p>
        
            <a href = "https://instagram.com/rafaballerini"> Instagram </a>
            <a href = "https://github.com/guilhermeonrails"> GitHub </a>
        </section>

        <img src = "imagem.png" alt = "Foto da Joana Santos programando">

    </main>

Imagem - Figma:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade CSS:

.apresentacao__conteudo__titulo {

    font-size: 36px;
}

apresentacao__conteudo__paragrafo {

    font-size: 24px;
}

4 - Importando e aplicando fontes do Google Fonts

Imagem - Google Fonts:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

5 - Personalizando fontes de títulos e textos

CSS:

.apresentacao__conteudo__titulo {

    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

apresentacao__conteudo__paragrafo {

    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

Sugestão: além desses exercícios, seria interessante ter mais alguns pedindo para usarmos outras fontes nos HTML que fizemos nos exercícios passados. Como já temos as partes do HTML feitos, só precisaria aplicar as fontes. Isso permitiria um maior uso da criatividade alinhada com o aprendizado sobre aplicação de fontes no CSS. Mas é só uma sugestão que tive agora, do jeito que está fica bom também =)

1 resposta
solução!

Oi, Victor! Tudo bom?

Excelente projeto! Siga praticando com os desafios e sempre compartilhe conosco.

Você soube aplicar o flexbox de forma eficiente para distribuir os elementos na tela, aproveitou muito bem o controle de fontes via Google Fonts para reforçar a identidade visual e entendeu como o dimensionamento de seções e tipografia é essencial para alcançar harmonia entre os elementos da interface.

Como dica adicional, experimente utilizar unidades relativas como em ou rem ao definir tamanhos de fontes ou margens. Assim, você ganha mais flexibilidade para tornar o layout adaptável em diferentes telas e resoluções. Exemplo:

.apresentacao__conteudo__titulo {
    font-size: 2.25rem; /* Equivale a 36px se a base for 16px */
}

Resultado: A fonte se adapta melhor ao tamanho raiz do HTML, melhorando a responsividade e acessibilidade.

Com isso, você poderá garantir interfaces consistentes e escaláveis com mais facilidade.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

AluraConte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!