1
resposta

Deixando o site estiloso. Parte final

Estrutura HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio de Helder Razif</title>
    <link rel="icon" type="image/x-icon" href="/img/Helder 2.jpeg">
    <link id="stylesheet" rel="stylesheet" href="css/styles.css">
    <script src="js/mudaEstilo.js"></script>
</head>
<body>
    <header>
<!--        <nav>
            <a href="#" onclick="changeStyle('css/styles.css')">Estilo 1</a> | 
            <a href="#" onclick="changeStyle('css/styles 2.css')">Estilo 2</a> | 
            <a href="#" onclick="changeStyle('css/styles 3.css')">Estilo 3</a>
        </nav>
    -->
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Transforme boas <strong class="titulo-destaque">ideias em negócios</strong> lucrativos</h1>
            <p class="apresentacao__conteudo__texto">Atuo com engenharia, gestão, tecnologia da informação e inovação aplicada ao desenvolvimento de produtos com o propósito de <strong class="texto-destaque">transformar ideias em negócios sustentáveis.</strong></p>
            <p>
                <div class="apresentacao__links">
                    <a class="apresentacao__links__link" href="https://www.linkedin.com/in/hrazif/">LinkedIn</a> | 
                    <a class="apresentacao__links__link" href="https://github.com/helder-razif">GitHub</a> | 
                    <a class="apresentacao__links__link" href="https://www.behance.net/arte1">Behance</a>
                </div>
            </p>
            </section>
        <img class="foto-razif" src="img/razif.JPG" alt="Helder Razif">
    </main>
    <footer>
    </footer>                
</body>
</html>

Folha de Estilos

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

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #001D3D;
    color: whitesmoke;
}

strong {
    color:#FFC300;
}

.titulo-blog {
    font-weight: bold;
    color: darkorange;
}

p {
    color:cornflowerblue;
}

span{
    color: #fd226b;
    border: 1px solid #fd226b;
    padding: 10px;
}

.foto-razif {
    width: 351px;
    height: 455px;
}

.container {
    display: flex;
    justify-content: space-between;
}

.texto-destaque {
    color: aqua;
    font-family: 'Montserrat', sans-serif;
}

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

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

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

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

.apresentacao__links{
    display: flex;
    justify-content: space-between;
}

.apresentacao__links__link{
    background-color: #22D4FD;
    width: 250px;
    text-align: center;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 0;
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}
1 resposta

Olá, Helder, como vai?

O seu código está bem estruturado, e a utilização do Flexbox está correta para o layout. Apenas algumas observações podem ajudar a melhorar ainda mais o seu trabalho.

Dentro do seu HTML, você tem um <p> envolvendo o bloco de links, o que não é semântico. Em vez disso, você pode usar diretamente o <div class="apresentacao__links"> para os links. O código ficaria assim:

<div class="apresentacao__links">
    <a class="apresentacao__links__link" href="https://www.linkedin.com/in/hrazif/">LinkedIn</a> | 
    <a class="apresentacao__links__link" href="https://github.com/helder-razif">GitHub</a> | 
    <a class="apresentacao__links__link" href="https://www.behance.net/arte1">Behance</a>
</div>

Continue com o bom trabalho, e sinta-se à vontade para compartilhar seus avanços ou tirar mais dúvidas. O fórum está à disposição.

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