Hola, Carlos, espero que estés bien
Parece que estás trabajando en un proyecto de página web personal. La imagen muestra una sección de presentación con enlaces a redes sociales. Para replicar algo similar a lo que hicieron en clase, aquí tienes algunos pasos básicos:
HTML: Crea la estructura básica de la página con etiquetas como <header>, <section>, y <footer>. Usa <a> para los enlaces a las redes sociales.
CSS: Aplica estilos para el diseño. Usa flexbox o grid para alinear los elementos. Ajusta los colores de fondo y el texto para que coincidan con la imagen.
Interactividad: Si necesitas interactividad, puedes usar JavaScript para animaciones o efectos al pasar el ratón sobre los botones.
Accesibilidad: Asegúrate de que los textos alternativos de las imágenes y los enlaces sean descriptivos.
Aquí tienes un ejemplo básico de cómo podrías estructurar el HTML y CSS:
<!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="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre mí</a></li>
</ul>
</nav>
</header>
<section class="intro">
<h1>Eleve tu negocio digital a otro nivel con un Front-end de calidad!</h1>
<p>¡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="social">
<a href="#">Github</a>
<a href="#">Linkedin</a>
<a href="#">Twitch</a>
</div>
</section>
<footer>
<p>Desarrollado por Carlos</p>
</footer>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #ff4d4d;
color: #fff;
text-align: center;
}
header nav ul {
list-style: none;
padding: 0;
}
header nav ul li {
display: inline;
margin: 0 10px;
}
.intro {
margin-top: 50px;
}
.social a {
display: block;
margin: 10px;
padding: 10px;
background-color: #fff;
color: #ff4d4d;
text-decoration: none;
border-radius: 5px;
}
footer {
background-color: #550000;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
Espero que esto te ayude a avanzar en tu proyecto. ¡Buena suerte y sigue adelante! Espero haber ayudado y buenos estudios!