Haga lo que hicimos en aula | HTML y CSS: header, footer y variables CSS | Alura Latam

esto es lo que me estoy aprendiendo
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Mi Portafolio</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
  <nav>
   <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre mí</a></li>
   </ul>
  </nav>
 </header>

 <main>
  <section class="hero">
   <div class="hero__content">
    <h1>Eleva tu negocio digital a otro nivel</h1>
    <h2>con un Front-end de calidad!</h2>
    <p>Hola! Soy Frank Perdomo, 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-links">
     <a href="https://instagram.com/" target="_blank" rel="noopener noreferrer">
      <img src="./assets/instagram.png" alt="Enlace a mi perfil de Instagram">
     </a>
     <a href="https://github.com/" target="_blank" rel="noopener noreferrer">
      <img src="./assets/github.png" alt="Enlace a mi perfil de GitHub">
     </a>
    </div>
   </div>
   <img src="./assets/imagen.png" alt="Foto de frank perdomo desarrollando un proyecto" class="hero__image">
  </section>
 </main>

 <footer>
  <p>&copy; 2023 Desarrollado por frank perdomo</p>
 </footer>
</body>
</html>


/* Variables globales */
:root {
  --primary-color: #333;
  --secondary-color: #f2f2f2;
  --accent-color: #4CAF50;
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Playfair Display', serif;
}

/* Estilos generales */
body {
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Encabezado */
header {
  background-color: var(--primary-color);
  color: white;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

/* Sección hero */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  background-image: url('./assets/fondo.jpg'); /* Reemplaza con tu imagen de fondo */
  background-size: cover;
  background-position: center;
}

.hero__content {
  text-align: center;
  max-width: 600px;
  color: black;
}

.hero__image {
  width: 200px;
  border-radius: 50%;
  margin-top: 2rem;
}

/* Redes sociales */
.social-links {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}