index.html
<!DOCTYPE html>
<html lang="es-CL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio-De-Daniel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main>
<h1>¡Aprendiendo junto a <strong>Alura Latam!</strong></h1>
<p>¡Hola! Soy Daniel Aranzáez, y estoy realizando este curso de Alura Latam para especializarme en HTML, CSS y Javascript, entre otros.
</p>
<a href="https://www.instagram.com/DanielRaiicHu">Instagram</a>
<a href="https://www.github.com/DanielRaiicHu">Github</a>
<img src="foto.png" alt="Fotografía de Daniel">
</main>
<footer>
<h3>Autor: Daniel Aranzáez </h3>
</footer>
</body>
</html>
stylye.css
body{
background-color: indigo;
color: white;
text-align: center;
}
main{
background-color: indigo;
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;
}
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: #fd22bf;
}
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: #fd22bf;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
