Utilice framework bootstrap y CSS para el diseño: HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portafolio de Luis Avila</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<header>
<div class="contenedor">
<img src="img/html-5.webp" class="icono">
<h1 class="titulo">Pagina HTML 5</h1>
</div>
</header>
<main>
<h1>Aprende contenido digital <strong>con un Front-end de calidad</strong></h1>
<p>¡Hola! Soy Luis, desarrollador de Front-end con especializacion en react, html y CSS. </p>
<div class="text-start">
<a href="https://www.instagram.com/" type="button" class="btn btn-primary btn-lg">Instagram</a>
<a href="https://www.github.com/" type="button" class="btn btn-primary btn-lg">Github</a>
</div>
<div class="text-start padding: 10rem">
<img src="img/html-5.webp" class="img-thumbnail" alt="imagen de HTML 5">
</div>
</main>
<footer>
<p>2025 © Pagina de Luis Avila</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
CSS
.contenedor {
display: flex; /* Alinea elementos en una fila */
align-items: center; /* Centra verticalmente */
gap: 10px; /* Espacio entre la imagen y el título */
}
footer {
position: absolute;
bottom: 0;
width: 90%;
height: 40px;
}
.icono {
width: 50px; /* Ajusta el tamaño del icono */
height: 50px; /* Mantiene la proporción cuadrada */
border-radius: 50%; /* Lo hace circular */
object-fit: cover; /* Evita distorsión */
border: 2px solid #333; /* Borde alrededor del icono */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra ligera */
transition: transform 0.3s ease-in-out; /* Efecto al pasar el mouse */
}
.icono:hover {
transform: scale(1.1); /* Aumenta el tamaño al pasar el mouse */
}
.titulo {
font-size: 24px;
}
