07 Haga lo que hicimos en aula | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Gabriela</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <img src="Loadingblack.png" alt="Imágen de Loading" width="200" height="200">
    </header>
    <main>
        <h1>Desarrollador <strong>web, front end</strong></h1>
        <h2>¿Por qué deberías contratar a un desarrollador Web especialista en Front-End?</h2>
        <p>En el mundo digital de hoy, tu sitio web es la primera impresión que tus clientes tienen de tu negocio. 
            Aquí te presentamos razones convincentes por las cuales un desarrollador web especialista en front-end es crucial para el éxito de tu presencia en línea:</p>
            <button><a href="https://www.instagram.com/">Instagram</a></button>
            <button><a href="https://github.com/">Github</a></button>
        <ul>
            <li>Diseño atractivo y profesional</li>
            <li>Experiencia de usuario</li>
            <li>Compatibilidad multidispositivo</li>
            <li>Velocidad y rendimiento</li>
            <li>Cumplimiento de estándares WEB</li>
        </ul>
        <img src="desarrrolloweb.jpeg" alt="Imagen de una mujer desarrolladora" width="300" height="200">
    </main>
    <footer>
        <div>Copyright&copy; 2024 - Página creada por Gabriela Bo - Todos los derechos reservados</div>
    </footer>
</body>
</html>

body {
    background-color: indigo;
  }
  h1 {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
  }
  h2 {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
  }
  p {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
  }
  ul {
    color: white; 
    font-family: Arial, Helvetica, sans-serif;
 }
 strong {
    background-color: turquoise;
 }
 button {
    background-color: turquoise;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
 }
 footer {
    color: white; 
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
 }
 header {
    text-align: center;
 }
 main {
    image-orientation: center;
 }

Proyecto