Desafío: comparta tú proyecto con el mundo | Alura Latam

<!DOCTYPE html>
<html lang="en-col">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Portafolio de Duván Ballesteros Gallego</title>
</head>

<body>
    <div>
        <header>
            <h1>Eleve tu negocio <span>digital</span> a <strong>otro nivel un Front-end de calidad! </strong> </h1>
        </header>
        <main>
            <h4>
                ¡Hola! Soy Duván Ballesteros Gallego, aprendiz del SENA y estudiante de Programación en
                Alura, HTML y CSS. Busco una oportunidad para adquirir experiencia
                y poner en práctica mis conocimientos.
            </h4>
        </main>
        <footer>
            <p class="pieDePagina">Sigueme en redes sociales</p>
            <a href="https://www.instagram.com/"><img class="icono" width="80px" src="instagram.png"
                    alt="icono instagram"></a>
            <a href="https://github.com/"><img class="icono" width="45px" src="gitHub.png" alt="icono Github"></a>
            <a href="https://es-la.facebook.com/"><img class="icono" width="60px" src="facebook.png"
                    alt="icono Facebook"></a>
            <a href="https://www.linkedin.com/in/duván-ballesteros-1975gallego-683363317"><img class="icono"
                    width="50px" src="linkedIn.png" alt="icono LinkedIn"></a>
            <p class="copyright">&copy; 2024 Duván Ballesteros Gallego. Todos los derechos reservados.</p>
        </footer>
    </div>
</body>

</html>

body {
  background-image: url(laptop.jpg);
  /*Establece imagen de fondo al cuerpo de la página*/
  color: white;
  /*Establece color al texto para todo el cuerpo de la página*/
  text-align: center;
  /*Alinea todo el contenido del cuerpo al centro de la página */
}

h4 {
  margin-top: 3%;
  /*Margen superior*/
  margin-left: 10%;
  /*Margen izquierdo*/
  margin-right: 10%;
  /*Margen derecho*/
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 18px;
  /*Tamaño de la fuente*/
  border: 1px solid #22D4FD;
  padding: 20px;
  /*Relleno de 20 pixeles en todos los lados*/
  background: rgba(4, 0, 16, 0.5);
  /*Color de fondo con transparencia*/
  color: #ebeaf2;
}

strong {
  color: #2eca07;
  /*Establece color de texto a los elementos <strong>*/
}

span {
  color: #22D4FD;
  /*Establece color del texto*/
  border: 1px solid #22D4FD;
  /*Aplica borde sólido al rededor de los elementos*/
  padding: 10px;
  /*Añade un relleno interno al rededor de todos los lados de los elementos*/
}

footer {
  margin-top: 30%;
  background-color: #140314;
  padding-block-end: 1%;
  padding-top: 1%;
}

.pieDePagina {
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.icono {
  margin: 0 10px;
}

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