Segue código:
* { /*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: 135%; /* 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%;
margin: 0 0 33%;
}
.titulo-destaque{
font-size: 35px;
}
span{
color: #22D4FD;
/* border: 1px solid #22D4FD; */
padding: 2px;
}
.presentation{
padding: 10% 15%;
display:flex;
align-items: center;
justify-content: space-between;
}
.presentation__conteudo{
width:600px;
display: flex;
flex-direction: column;
gap: 20px;
}
.presentation__conteudo__titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
text-align: justify;
}
.presentation__conteudo__texto{
font-size: 18px;
font-family: "Montserrat Alternates", sans-serif;
text-align: justify;
}
.presentation__links__subtitle{
font-family: "Krona One", sans-serif;
font-weight: 400;
font-size: 24px;
}
.presentation__links{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 40px;
align-items: center;
gap: 32px;
}
.links__link{
display: flex;
justify-content: center;
gap: 16px;
border: 1px solid #22D4FD;
border-radius:8px ;
width: 378px;
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:hover{
background-color: #9dcac6 ;
}
.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;
}
.rodape {
display: flex;
color: #000000;
background-color: #9dcac6 ;
padding: 24px;
justify-content: center;
font-family: "Montserrat Alternates", sans-serif;
font-size: 18px;
font-weight: 400;
}