HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mis Redes Sociales</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="presentacion__enlaces">
<h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
<a href="https://www.instagram.com" class="presentacion__enlaces__link">Instagram</a>
<a href="https://www.github.com" class="presentacion__enlaces__link">Github</a>
</div>
</body>
</html>
CSS
/* Aplicar estilos generales */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;
}
/* Estilización y alineación de la sección de enlaces */
.presentacion__enlaces {
display: flex;
flex-direction: column; /* Alinea los elementos en columna */
align-items: center; /* Centra los elementos horizontalmente */
gap: 32px; /* Espacio entre los elementos */
}
/* Estilos para el subtítulo */
.presentacion__enlaces__subtitulo {
font-family: Krona One, sans-serif;
font-weight: 400;
font-size: 24px;
color: #ffffff;
}
/* Estilos para los botones */
.presentacion__enlaces__link {
text-decoration: none;
color: #F6F6F6;
border: 2px solid #22D4FD;
width: 378px;
text-align: center;
padding: 10px 0;
border-radius: 8px;
font-size: 18px;
transition: 0.3s;
}
/* Efecto hover en los botones */
.presentacion__enlaces__link:hover {
background-color: #22D4FD;
color: #121212;
}
