<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio de Ana García</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="presentacion">
<section class="presentacion__contenido">
<h1 class="presentacion__contenido__titulo">
Eleve tu negocio digital a otro nivel
<strong class="titulo-destaque">con un Front-end de calidad!
</strong>
</h1>
<p class="presentacion__contenido__texto">
¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React, HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
</p>
<div class="presentacion__enlaces">
<h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
<a class="presentacion__enlaces__link" href="https://github.com/">
<img src="./assets/github.png" alt="Icono de Github"> GitHub
</a>
<a class="presentacion__enlaces__link" href="https://www.linkedin.com/">
<img src="./assets/linkedin.png" alt="Icono de LinkedIn"> LinkedIn
</a>
<a class="presentacion__enlaces__link" href="https://www.twitch.tv/">
<img src="./assets/twitch.png" alt="Icono de Twitch"> Twitch
</a>
</div>
</section>
<img src="assets/Imagem.png" alt="Foto de Ana García desarrollando un proyecto">
</main>
<footer class="footer">
<p>Desarrollado por Alura Latam</p>
</footer>
</body>
</html>
.presentacion__enlaces__link {
display: flex;
justify-content: center;
align-items: center;
gap: 12px; /* Espaciado ajustado según el Figma */
text-decoration: none;
color: #000; /* Asegúrate de que el color de texto sea el deseado */
font-size: 16px; /* Ajusta el tamaño de la fuente según tu diseño */
padding: 8px 16px; /* Ajusta el padding según tu diseño */
border: 1px solid #ddd; /* Añade un borde si es necesario */
border-radius: 4px; /* Añade esquinas redondeadas si es necesario */
transition: background-color 0.3s; /* Transición suave para el hover */
cursor: pointer; /* Cambia el cursor al estilo 'pointer' */
}
.presentacion__enlaces__link img {
width: 24px; /* Ajusta el tamaño del ícono según tu diseño */
height: 24px; /* Ajusta el tamaño del ícono según tu diseño */
}
/* Añade un efecto hover para mejorar la usabilidad */
.presentacion__enlaces__link:hover {
background-color: #272727; /* Cambia el color de fondo al pasar el mouse */
}
/* Añade estilos adicionales según sea necesario */
.presentacion__contenido {
text-align: center; /* Centra el texto en la sección de contenido */
margin: 0 auto;
max-width: 800px; /* Ajusta el ancho máximo de la sección */
}
.presentacion__contenido__titulo {
font-size: 2rem; /* Ajusta el tamaño del título */
margin-bottom: 1rem; /* Espacio debajo del título */
}
.presentacion__contenido__texto {
font-size: 1.2rem; /* Ajusta el tamaño del texto */
margin-bottom: 2rem; /* Espacio debajo del texto */
}
.presentacion__enlaces__subtitulo {
font-size: 1.5rem; /* Ajusta el tamaño del subtítulo */
margin-bottom: 1rem; /* Espacio debajo del subtítulo */
}
.footer {
text-align: center; /* Centra el texto en el pie de página */
padding: 1rem; /* Ajusta el padding del pie de página */
background-color: #f0f0f0; /* Ajusta el color de fondo del pie de página */
}