Abaixo compartilho meu código de estilização com algumas modificações pontuais em relação à formatação dos botões (tag "a")
* { /*seleciona todos os atributos que podem ser aplicados na página */
margin: 0;
padding: 0;
}
/* Garantir que a imagem de fundo cubra toda a tela */
#bgdImage {
position: absolute; /* A imagem ficará fixada atrás do conteúdo */
top: 0px;
left: 0;
width: 100%;
height: 120%; /* Faz a imagem cobrir toda a altura da tela */
object-fit: cover; /* Faz a imagem cobrir a área sem distorcer */
z-index: -1; /* Coloca a imagem atrás do conteúdo */
}
body {
height: 100vh;
box-sizing: border-box;
}
main #imgFigma{
border-radius: 40px;
width: 28%;
}
/* Estilo do footer */
footer {
color: #4e6f6c;
margin-top: 20px;
font-size: 14px;
display: flex;
}
.titulo-destaque{
font-size: 35px;
}
span{
color: #22D4FD;
border: 1px solid #22D4FD;
padding: 2px;
}
.presentation{
margin: 10%;
display:flex;
align-items: center;
justify-content: space-between;
}
.presentation__conteudo{
width:715px;
}
.presentation__conteudo__titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
text-align: justify;
padding: 20px;
}
.presentation__conteudo__texto{
font-size: 18px;
font-family: "Montserrat Alternates", sans-serif;
text-align: justify;
}
.presentation__links{
display: flex;
justify-content: space-between;
padding: 40px;
}
.links__link{
background-color: #22D4FD;
border-radius:16px ;
width: 280px;
text-align: center;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #000000;
font-family: "Montserrat Alternates", sans-serif;
box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.5s;
}
.links__link .span__links {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
color: #000000;
}
.links__link .span__links::after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.links__link:hover .span__links {
padding-right: 25px;
}
.links__link:hover .span__links:after {
opacity: 1;
right: 0;
}