2
respuestas

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Preparando el layout del proyecto y actividad Haga lo que hicimos en aula

por Ramiro Gonzalez

| 26.2k xp | 18 posts

Programador Frontend

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

{ padding: 0; margin: 0; }

body { height: 100vh; box-sizing: border-box; background-color: #000000; color: #F6F6F6; }

.titulo-destaque { color: #22D4FD; }

.presentacion { margin: 10% 15%; display: flex; align-items: center; justify-content: space-between; }

.presentacion__contenido { width: 615px; display: flex; flex-direction: column; gap: 40px; }

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

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

.presentacion__enlaces { display: flex; flex-direction: column; /* Cambiado a columna / align-items: center; / Centrado vertical / gap: 32px; / Espaciado entre los elementos */ }

.presentacion__enlaces__subtitulo { font-size: 24px; font-family: 'Krona One', sans-serif; font-weight: 400; text-align: center; }

.presentacion__enlaces__link { background-color: #22D4FD; width: 378px; /* Ancho ajustado / text-align: center; border-radius: 8px; / Borde menos redondeado / font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: #F6F6F6; / Color del texto blanco / font-family: 'Montserrat', sans-serif; border: 2px solid #22D4FD; / Borde cian */ }

///HTML

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

¡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?

Accede a mis redes:

Instagram GitHub

Foto de Ana García desarrollando un proyecto

2 respuestas

por Daysibel.pitter

| 256.7k xp | 962 posts

Instructor

hace 2 semanas

Hola Ramiro, espero que estés muy bien.

Felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Para no dejar de compartir los códigos, actividades y ejercicios que realizas, creamos un canal en Discord (#compartatucodigo) donde puedes compartirlos, dar y sugerir mejoras con el resto de tus compañeros.

Un saludo.

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

por FLORENTINO LOPEZ

| 58k xp | 130 posts

hace 1 semana

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Ana García</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!--<head>
<nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">¿Quién soy?</a></li>
                <li><a href="#">Portafolio</a></li>
                <li><a href="#">Contactame</a></li>
            </ul>
        </nav>
    -->
    </head>
    <main class="presentacion">
        <section class="presentacion__contenido">
            <h1 class="presetacion__contenido__titulo">Eleve tu negocio digital a otro nivel <strong
                    class="titulo-destaque">un Front-end de calidad!</strong>
            </h1>
            <p class="presentacion__contenido__texto">
                ¡Hola! Soy Ana García, desarrolladora Front-end con especialización en <span>React, HTML y CSS.</span>
                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://instagram.com">Instagram</a>
                <a class="presentacion__enlaces__link" href="https://github.com">GitHub</a>
            </div>
        </section>
        <img src="./img/imagem.png" alt="Imagen de Ana García trabajando.">
    </main>
    <footer>
        <p>Copyright © 2025 | Ana Gargía</p>
    </footer>
</body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #000000;
    color: #f6f6f6;
    height: 100vh;
    box-sizing: border-box;
}

.titulo-destaque {
    color: #22D4FD;
}


.presentacion {
    display: flex;
    align-items: center;
    margin: 10% 15%;
    justify-content: space-between;
}

.presentacion__contenido {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.presetacion__contenido__titulo {
    font-size: 36px;
    font-family: "Krona One", serif;
}

.presentacion__contenido__texto {
    font-size: 24px;
    font-family: "Montserrat", serif;
}

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

.presentacion__enlaces__subtitulo {
    font-family: "Krona One", serif;
    font-size: 24px;
    font-weight: 400;
}

.presentacion__enlaces__link{
    width: 378px;
    text-align: center;
    padding: 21.5px 0;
    border-radius: 8px;
    font-family: "Montserrat", serif;
    font-size: 24px;
    font-weight: 600px;
    text-decoration: none;
    color: #f6f6f6;
    border: 2px solid #22D4FD;
}









/*
nav {
    color:#f6f6f6;
}

span {
    color: #22D4FD;
    border: 1px solid #22D4FD;
    padding: 0.5px; 
}

.texto-destacado {
    color: #f6f6f6;
    padding: 0;
    margin: 0;

}


.titulo-blog {
    color: #f6f6f6;
}

.topic-weather::before {
    content: '⛅️';
}*/