Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] Haga lo que hicimos en aula HTML y CSS: header, footer y variables CSS

Este es el HTML:

Eleva tu negocio digital a otro nivel con un Front-end de calidad!

        <p class="presentacion__contenido__texto">
            ¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React, HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
        </p>

        <div class="presentacion__enlaces">
            <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>

            <a class="presentacion__enlaces__link" href="https://github.com/" target="_blank">
                <img src="./assets/github.png" alt="Icono de GitHub">
                GitHub
            </a>

            <a class="presentacion__enlaces__link" href="https://www.linkedin.com/" target="_blank">
                <img src="./assets/linkedin.png" alt="Icono de LinkedIn">
                LinkedIn
            </a>

            <a class="presentacion__enlaces__link" href="https://www.twitch.tv/" target="_blank">
                <img src="./assets/twitch.png" alt="Icono de Twitch">
                Twitch
            </a>
        </div>
    </section>

    <img src="assets/Imagem.png" alt="Foto de Ana García desarrollando un proyecto">
</main>

<footer class="footer">
    <p>Desarrollado por Alura Latam</p>
</footer>
y este seria el CSS

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

body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; background-color: #f0f0f0; }

.presentacion { display: flex; align-items: center; justify-content: space-between; margin: 5% 10%; background-color: #fff; padding: 2%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.presentacion__contenido { width: 50%; }

.presentacion__contenido__titulo { font-family: 'Krona One', sans-serif; font-size: 2rem; margin-bottom: 1rem; color: #333; }

.presentacion__contenido__texto { font-family: 'Montserrat', sans-serif; font-size: 1rem; line-height: 1.5; color: #555; }

.presentacion__enlaces { margin-top: 2rem; }

.presentacion__enlaces__subtitulo { font-size: 1.5rem; margin-bottom: 1rem; color: #333; }

.presentacion__enlaces__link { display: flex; align-items: center; justify-content: center; gap: 16px; text-decoration: none; color: #333; background-color: #000; padding: 10px 20px; border-radius: 5px; transition: all 0.3s ease; margin-bottom: 10px; }

.presentacion__enlaces__link:hover { border: 2px solid #0000FF; background-color: #272727; cursor: pointer; }

.presentacion__imagen { width: 40%; border-radius: 8px; object-fit: cover; }

.footer { text-align: center; margin-top: 3rem; color: #777; }

1 respuesta

¡Hola Juan! ¿Cómo estás?

¡Gracias por compartir tu proyecto con nosotros en el foro! Su contribución es esencial para el crecimiento de nuestra comunidad en Alura. Sigue así y no dudes en volver al foro si tienes alguna pregunta o dificultad.

¡Abrazos y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!