[Proyecto] 06 Desafío: comparta tú proyecto con el mundo | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

Adicionando elementos y compartiendo mi proyecto con ustedes.

HTML

<!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>
        <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">
        <p>¡Sígueme en mis redes sociales!</p>
        <button><a href="https://www.instagram.com/lgabrielabo/">Instagram</a></button>
        <button><a href="https://github.com/GabbyGeek/">Github</a></button>
        <button><a href="https://www.linkedin.com/in/lgabrielabonilla/">LinkedIn</a></button>
    </main>
    <footer>
        <div>Copyright&copy; 2024 - Página creada por Gabriela Bo - Todos los derechos reservados</div>
    </footer>
</body>
</html>

CSS

body {
    background-color: #264653;
  }
  h1 {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
  }
  h2 {
    color: #264653;
    background-color: #e9c46a;
    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;
    font-size: 18px;
 }
 strong {
    color: #e9c46a;
 }
 button {
    background-color: #e9c46a;
    color: cbf3f0;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 10px; /* Espacio entre botones */
    padding: 10px 20px;
    font-size: 16px;
 }
 footer {
    color: #e9c46a; 
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
 }
 header {
    text-align: center;
 }
 main {
    image-orientation: center;
 }
 main-content {
   text-align: center;
   margin-top: 50px;
 }
 main-content {
   text-align: center;
   padding: 20px; /* Opcional: agrega un poco de espacio alrededor */
}

img {
   display: inline-block; /* Necesario para que el text-align funcione correctamente */
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad