Haga lo que hicimos

En esta actividad aprendí a usar Flexbox para alinear los elementos dentro de mi página. Me pareció interesante cómo con solo dos líneas de CSS (display: flex y align-items: center) se puede cambiar la forma en que se ve todo el contenido. También entendí cómo usar clases en HTML para aplicar estilos específicos. Aunque estoy empezando, me gustó ver cómo el diseño mejora y se ve más organizado. Aquí dejo mi ejemplo:

<header>
  <h1>Bienvenido a mi portafolio</h1>
</header>

<main class="contenido">
  <section>
    <h2>Sobre mí</h2>
    <p>Hola, soy estudiante de desarrollo web. Estoy aprendiendo HTML, CSS y Flexbox.</p>
    <p>Me gusta crear páginas simples y funcionales.</p>
    <a href="https://linkedin.com" target="_blank">LinkedIn</a>
    <a href="https://github.com" target="_blank">GitHub</a>
  </section>
  <img src="https://via.placeholder.com/200" alt="Foto personal">
</main>

<footer>
  <p>Contacto: miemail@ejemplo.com</p>
</footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}

header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

footer {
  background-color: #ddd;
  color: #555;
  padding: 15px;
  text-align: center;
}

a {
  display: inline-block;
  margin-right: 10px;
  color: #4CAF50;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

.contenido {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 40px;
  flex-wrap: wrap;
}

section {
  max-width: 500px;
}

img {
  width: 200px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}