2
respostas

[Projeto] Evoluindo.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 Andréia Pedrosa, tenho 33 anos moro em Matão/São Paulo,através da minha última formação onde estudei alguns pontos sobre HTML/CSS, despertou meu interesse em aprender mais e assim me tornar uma grande <strong> "Desenvolvedora- Front-End".</strong></p>  
            <div class="apresentacao__links">
                <a class="apresentacao__links__link" href="https://instagram.com/_andreiapedrosa">Instagram</a>
                <a class="apresentacao__links__link" href="https://github.com/Pedrosa24">GitHub</a>
            </div>
        </section>
        <img src="eu.jpeg" alt="Foto da Andréia Pedrosa sorrindo!">
    </main>
    <footer></footer>
</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dosis:wght@200..800&family=Tilt+Neon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dosis:wght@200..800&family=Rubik:ital,wght@0,300..900;1,300..900&family=Tilt+Neon&display=swap');
*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque{
    color: #fd22a2;
}

.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:"Tilt Neon", sans-serif;
}

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

.apresentacao__links__link{
    background-color: #fd22a2;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #000000;
    font-family: "Rubik", sans-serif;
}
.img{
   width: 100px;
   height: 100px;
}
2 respostas

Oi, Andreia, tudo bem?

Parabéns pelo resultado, ficou ótimo! Também agradeço por compartilhar seu código, 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 e bons estudos!

Oi tudo sim e com você?

Muito obrigado pelo feedback , nós alunos ficamos gratos pela interação e dedicação.

Obrigada! Abraços.