09 Haga lo que hicimos | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

2
respuestas

por David P. Escalante

| 13.2k xp | 16 posts

HTML

<html lang="es-pe">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <head></head>
    <main>
        <h1>Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong></h1>
        <p>¡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>
        <a href="https://www.instagram.com/">Instagram</a>
        <a href="https://github.com/">Github</a>
        <img src="Imagem.png" alt="Imagen de Ana García trabajando">
    </main>
    <footer></footer>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
}
body{
    background-color: black;
    color: #F6F6F6;
}
.titulo-destaque {
    color: #22D4FD;
}

2 respuestas

por Daysibel.pitter

| 221.4k xp | 866 posts

Instructor

hace 1 día

Hola David, espero que estés muy bien.

Gracias por tu aporte en el foro, vas muy bien. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Te recomiendo que puedas interactuar con el resto de nuestros compañeros por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo, o para los desafios, sea por el Discord, con certeza por ahí llegará a más personas.

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

por FLORENTINO LOPEZ

| 53.6k xp | 125 posts

hace 17 horas

¡Estupendo!

Te comparto mi código.

<!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>
        <h1 class="titulo-blog">Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">un Front-end de calidad!</strong></h1>
        <p class="texto-destacado topic-weather">
            ¡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>
        <p class="urgente">
            Próximamente, nueva imágen al sitio web. ¡Esperalo!
        </p>
        <a href="https://instagram.com">Instagram</a>
        <a href="https://github.com">GitHub</a>
        <img src="./img/imagem.png" alt="Imagen de Ana García trabajando.">
    </main>
    <footer>
        <p>Copyright © 2025 | Ana Gargía</p>
    </footer>
</body>

</html>

* {
    padding: 0;
    margin: 0;
}

nav {
    color:#f6f6f6;
}


body {
    background-color: #000000;
    color: #f6f6f6;
}

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

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

.texto-destacado {
    color: #0ff600;
    border: 10em;
    font-size: 2em;
    padding: 0;
    margin: 0;

}

.titulo-blog {
    color: #ffd400;
}

.urgente {
    color: #ffffd4;
    text-align: center;
    font-size: 35px;
}

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