HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main>
<h1>
¡Aprendiendo junto a <strong>Alura Latam!</strong>
</h1>
<p>
¡Hola! Soy Anderson Estrada, y estoy realizando este Challenge de Alura Latam
para entrar al bootcamp de ciencia de datos.
</p>
<a href="https://github.com/Afes-reop/challenge-amigo-secreto_esp-main.git">GitHub</a>
<img src="alura.jpeg" alt="Alura Challenge"
</main>
<footer></footer>
</body>
</html>
CSS:
body {
background-color: rgb(114, 174, 172);
color: white;
}
main{
background-color: rgb(156, 67, 12);
color: white;
text-align: center;
}
h1,h3,p{
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
}
p{
font-size: 20px;
column-gap: 20px;
width: 40%;
text-align:center;
margin:auto;
}
img {
width: 500px;
height: auto;
display: block;
margin: auto;
border-style: solid;
}
a{
display: inline-block;
font-size: 20px;
width: auto; /* Elimina la restricción del 40% */
text-align: center;
margin: 0 10px; /* Agrega separación horizontal */
color: #41d08b;
}
h1, p{
margin-bottom: 40px; /* Espacio de 40px debajo de cada elemento */
}
img, a, h3 {
margin-bottom: 20px; /* Espacio de 20px debajo de cada elemento */
}
strong{
color: #735fe6;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
Resultado:
