Entrar Ainda não tem acesso?
1
resposta

Lista de exercícios: Mão na massa

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Preparando o layout do projeto e atividade Lista de exercícios

por Fabio Luís Manzi Nasser Auriani
| 26.9k xp | 73 posts

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <H1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong
                    class="titulo-destaque">com um Front-end de qualidade!</strong></H1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Fábio Auriani, desenvolvedor 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>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="https://instagram.com/fauriani">Instagram</a>
                <a class="apresentacao__links__link" href="https://github.com/fabioauriani">GitHub</a>
            </div>
        </section>
        <img src="imagens/Programador.png" alt="programador">
    </main>
    <footer></footer>
</body>

</html>

CSS

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

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: black;
    color: white;
}

.titulo-destaque {
    color: #22D4FD;
}

.apresentacao {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

.apresentacao__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo {
    font-family: "Krona One", sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.apresentacao__links__link {    
    width: 378px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0px;
    text-decoration: none;
    color: #f6f6f6;
    border: 2px solid #22D4FD;
    border-radius: 8px;
}
1 resposta
por Lorena Garcia
| 9479.3k xp | 14147 posts
Alura Scuba Team Suporte Educacional

Oi, Fabio! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você estruturou o HTML e aplicou classes bem organizadas no CSS. A escolha da fonte e das cores deixa o design bonitão e agradável.

Ícone de sugestão Para saber mais:

Escolher boas cores para um site é essencial para um design agradável e acessível. Existem ferramentas online que ajudam a criar paletas harmoniosas e verificar o contraste entre cores para garantir boa legibilidade. Confira algumas opções:

  • Coolors – Gera paletas de cores automaticamente e permite ajustar manualmente.
  • Adobe Color – Ferramenta da Adobe para criar esquemas de cores e verificar acessibilidade.
  • WebAIM Contrast Checker – Testa a acessibilidade do contraste entre cores segundo as diretrizes WCAG.
  • Accessible Colors – Sugere ajustes de cores para melhorar acessibilidade.

Usando essas ferramentas, você pode garantir que as cores do seu site sejam não apenas bonitas, mas também acessíveis para todos os usuários.

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