Entrar Ainda não tem acesso?
3
respostas

Meu exercício até este momento. Com algumas alterações.

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Manipulando botões e atividade Lista de exercícios

por ALAN MULERO DE TOLEDO
| 102.1k xp | 49 posts
Proprietário 
<!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__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__paragrafo">Olá! Sou Alan Toledo, desenvolvedora
                Front-end com especialidade em <strong>React, HTML e
                    CSS</strong>. Ajudo pequenos negócios e designers a
                colocarem em prática boas ideias. Vamos
                conversar?</p>
            <div class="botoes">
                <a class="apresentacao__link-botao sombreado" href ="https://www.linkedin.com/in/alan-m-toledo/" title="Meu Linkedin" target="_blank">Linkedin</a>
                <a class="apresentacao__link-botao sombreado" href ="https://github.com/alanmulero" title="Meu Github" target="_blank">GitHub</a>
            </div>
        </section>
        <img src="alan2.jpg" alt="Foto da Joana Santos programando" class="apresentacao__foto">
    </main>
    <footer></footer>
</body>

</html>
3 respostas
por ALAN MULERO DE TOLEDO
| 102.1k xp | 49 posts
Proprietário 

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

*{
    margin: 0;
    padding: 0;
}

  


body{
    height:100vh;
    box-sizing: border-box;
    background-color: #201f1f;
    color: #d9e8f7;
}



.titulo__destaque{
    color: rgb(34, 105, 163);

    
}

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

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

.apresentacao__conteudo{
    width:615px ;
    
    
}

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

}

.botoes{
    display: flex;
    justify-content: space-between;

}

.apresentacao__link-botao{
    background-color: #0b1b74;
    width: 250PX;
    border-radius: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: rgb(214, 155, 5);
    padding: 0.3em;
    margin-top: 1em;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;

  
    
}

 .sombreado:hover{
    background-color: rgb(216, 214, 112);
    

}

.sombreado:active{
    color: antiquewhite;
}

.apresentacao__foto{
    border-radius: 16px;
}
por ALAN MULERO DE TOLEDO
| 102.1k xp | 49 posts
Proprietário

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Victor Costa Santos
| 1937k xp | 3733 posts
Alura Scuba Team Monitor de ForumOps

Oi, Alan! Como vai?

Obrigado por compartilhar suas reflexões e aprendizados com a comunidade Alura.

Gostei bastante do seu código, principalmente pela clareza na estrutura e o uso do Flexbox para organizar os botões e o conteúdo. Além disso a aparência ficou muito bonita.

Continue nesse ritmo!

Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!