Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Projeto] Meu projeto

HTML

<!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>Portfolio</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 com um <strong class="titulo-destaque">Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto"> Olá! Sou Elton Maciel, estou aprendendo a ser um desenvolvedor Front-end, HTML e CSS.Ainda estou no começo do meu desenvolvimento mas tou estudando bastante.Vamos conversar?</p>
            <div class="apresentacao__link">
                <a class="apresentacao__link__links" href="https://instagram.com/eltontylerdk/">Instagran</a>
                <a class="apresentacao__link__links" href="https://github.com/Eltontyler">Github</a>
            </div>  
        </section>
        <img class="imagem" src="imagem.jpg" alt="Elton programando">
    </main>
    <footer></footer>
</body>
</html>

CSS:

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

* {
    margin: 5px;
    padding: 15px;
}


body {
    height: 100vh;
    box-sizing: border-box;
    background-color: black;
    color:#19BF0B
    
}

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

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

}

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

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

.titulo-destaque {
    color:#FF5733;
}

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


.apresentacao__link__links {
    background-color: blue;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    color: aliceblue;
    padding: 21,5px 0;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif
}
4 respostas
solução!

Oi, Elton, tudo bem?

Parabéns pelo resultado, 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!

Oiê!!

Show de bola!!!

Você fez algumas alterações conforme foi desenvolvendo o código??

Fiz sim eu criei um outro separado onde eu fico mexendo e alterando varias coisas como fonte cor de fundo entre outros mas deixei um com as mesmas coisas das aulas pra ei fica acompanhando tudi certinho e não acaba me confundindo com as explicações da aula

Show de bola então.