Esto es lo realizado en CSS
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
padding: 0;
margin:0;
}
body{
background-color: #000000;
color: #F6F6F6;
height: 100vh;
box-sizing: border-box;
}
.titulo-destaque {
color: #22D4FD;
}
.presentacion{
display: flex;
align-items: center;
margin: 10% 15%;
justify-content: space-between;
}
.presentacion__contenido{
width: 38.438em;
display: flex;
flex-direction: column;
gap: 2.5em;
}
.presentacion__contenido__titulo{
font-size: 2.25em;
font-family: "Krona One", sans-serif;
}
.presentacion__contenido__texto{
font-size: 1.5em;
font-family: "Montserrat", sans-serif;
}
.presentacion__enlaces{
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 1.25em 2.5em;
gap: 2em;
}
.presentacion__enlaces__subtitulo{
font-family: "Krona One", sans-serif;
font-size: 1.5em;
font-weight: 400;
}
.presentacion__enlaces__link:hover{
background-color: #808080;
color: #22D4FD;
}
.presentacion__enlaces__link{
width: 23.625em;
text-align: center;
padding: 0.625em 1.25em;
border-radius: 0.5em;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
font-weight: 600;
text-decoration: none;
color: #f6f6f6;
border: 0.125em solid #22D4FD;
}