1
resposta

[Projeto] Portifólio - HTML & CSS

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio</title>
    <link rel="stylesheet" href="style.css">
    
    </head> 
    <body>
        <header class="cabecalho">
            <nav class="cabecalho__menu">
                <a class="cabecalho__menu__link">Home</a>
                <a class="cabecalho__menu__link">Sobre mim</a>    
            </nav>
            
        </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 Back-end de qualidade!</strong></h1>
                <p class="apresentacao__conteudo__texto">Olá! Sou Fabricio Fialho, desenvolvedor Back-end com especialidade em Java. Ajudo
                    pequenos negócios 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://github.com/FabricioFialhoo">
                        <img src="./assets/github.png">
                        GitHub
                    </a>
                    <a class="apresentacao__links__link" href="www.linkedin.com/in/fabricio-fialho">
                        <img src="./assets/linkedin.png">
                        LinkedIn
                    </a>
                    <a class="apresentacao__links__link" href="https://www.instagram.com/fabricio_fialhoo/">
                        <img src="./assets/instagram.png">
                        Instagram
                    </a>
                </div>                
            </section>
            <img src="./assets/fotoperfil.jpg">
        </main>
        <footer class="rodape">
            <p>Desenvolvido por Fabricio Fialho - Alura</p>
        </footer>
    </body>
</html>

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

*{
    margin: 0;
    padding: 0;
}

body{
    box-sizing: border-box;
    background-color: black;
    color: #F6F6F6;
}

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

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

.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;
}

.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{
    display: flex;
    gap: 16px;
    justify-content: center;
    border: 2px solid #22d4fd;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    padding: 21.5px 0px;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;        
    font-weight: 600;
}

.apresentacao__links__link:hover{
    background-color: #272727;
    color: #22d4fd;
}

.rodape{
    color: black;
    background-color: #22d4fd;
    padding: 24px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;        
    font-size: 24px;
    font-weight: 400;
}
1 resposta

Oi, Fabricio, tudo bem?

Parabéns pelo resultado na resolução desta atividade, ficou ótimo!

Também agradeço por compartilhar seu código com os demais estudantes, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum. Abraços!