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

Home
Sobre mí
Contacto

<main class="presentation">
  <section class="home">
    <div>
      <h1 class="title">
        Explora los proyectos y habilidades de
        <strong class="title-strong"
          >un desarrollador Jr Fullstack apasionado</strong
        >
      </h1>
      <p class="description">
        ¡Hola! Soy Jose Rodriguez Cruz, un desarrollador Jr Fullstack con
        experiencia en React, Javascript, HTML, CSS y más. Aquí puedes
        conocer mis proyectos y las habilidades que he adquirido en mi
        carrera. ¡Echa un vistazo a mi trabajo!
      </p>
      <div class="links">
        <h2 class="liks_subtitle">Accede a mis redes</h2>
        <a class="link" href="https://www.instagram.com/joserodriguezc28/">Instagram</a>
        <a class="link" href="https://github.com/jose2806?tab=repositories">Github</a>
        <a class="link" href="https://www.linkedin.com/in/jrodriguezcruz28/">Linkedin</a>
      </div>
    </div>
    <img src="fotoJose.jpeg" alt="Imagen de Jose Rodriguez Cruz" />
  </section>
</main>

<footer>
  <p>Contacto: jose12.jr610@gmail.com</p>
  <p>&copy; 2024 Jose Rodriguez Cruz. Todos los derechos reservados.</p>
</footer>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400&display=swap');

body { background-color: black; color: white; font-family: Arial, sans-serif; /* Fuente predeterminada */ height: 100vh; box-sizing: border-box; }

header { text-align: center; /* Centra el nav dentro del header */ }

header nav ul { list-style: none; padding: 0; display: inline-block; /* Hace que el ul sea tan ancho como su contenido */ }

header nav ul li { display: inline; margin: 0 10px; }

header nav ul li a { color: black; /* Color de texto negro para los enlaces */ text-decoration: none; }

.title { font-size: 36px; font-family: 'Krona One', sans-serif; }

.title-strong { color: #22D4FD; }

.description { font-size: 24px; font-family: 'Montserrat', sans-serif; }

a{ display: inline-block;

color: black; padding: 10px 20px; text-decoration: none; border-radius: 10px; transition: background-color 0.3s ease; width: 100px; /* Ancho fijo para todos los enlaces / text-align: center; / Centra el texto dentro de los enlaces */ }

.link { display: inline-block; color: #f6f6f6; padding: 10px 20px; text-decoration: none; border-radius: 10px; border: 2px solid #22D4FD; transition: background-color 0.3s ease; width: 100px; /* Ancho fijo para todos los enlaces / text-align: center; / Centra el texto dentro de los enlaces */ }

.link:hover{ background-color: #1AB2D1; }

a:hover { background-color: #1AB2D1; }

main { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 80vh; }

.home { display: flex; align-items: center; gap: 50px; max-width: 1000px; /* Ancho máximo del div del main / width: 100%; / Asegura que el div tome todo el ancho posible hasta el máximo / margin: 0 auto; / Centra el div horizontalmente */ }

.home div { flex: 1; /* Permite que el div ocupe el mismo espacio que la imagen */ }

.home img { max-width: 300px; width: 100%; /* Ajuste para que la imagen se adapte al espacio disponible / border-radius: 10px; flex: 1; / Permite que la imagen ocupe el mismo espacio que el div */ }

.links { display: flex; justify-content: space-between; flex-direction: column; align-items: center; gap: 16px; }

.links_subtitle{ font-family: 'Krona One', sans-serif; font-size: 24px; font-weight: 400; }