0
respostas

[Projeto] Eu tentei fazer esse projeto aqui

Fiz o meu um pouco diferente, escolhi cores mais dark pro black e red, acho que combinaria mais com a minha foto.
coloquei os botões um pouco diferente, li um pouco sobre border styles, e achei legal colocar os botões mudando de cor quando passo o mouse por cima.
Se alguem tiver alguma dica ou ideia para melhorar mais o design, até mesmo os cod´s tanto HTML ou CSS, para incrementar mais nos meus estudos, eu estou de braços abertos,!! portfolio,vini
HTML
`

</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 Vinicius Lelis, desenvolvedor Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            
            <div class="apresentacao__links">
        
                <a class="apresentacao__links__link" href="https://instagram.com/vinilelis/">Instagram</a>
                
                <a class="apresentacao__links__link" href="https://github.com/vinilelis/">GitHub</a>

            </div>
    </section>

    <img src="Imagemvini.png" alt="foto vini">

</main>

<footer>

</footer>
`

CSS
`* {
margin: 0;
padding: 0;
}

body {
height: 100vh;
box-sizing: border-box;
background-color: black;
color: white;
}
.titulo__destaque {
color: #A91013;
}

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

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

.apresentacao__links__link {
padding: 21.5px 0px;
background-color: #BE1A1E;
color: white;
border-radius: 16px;
width: 280px;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 24px;
font-family: Montserrat, sans-serif;
font-weight: 600;

}

.apresentacao__links__link:hover {
background-color: #920003;
color: white;
}`