Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

[Proyecto] 5.1 Haga lo que hicimos

Referente al curso HTML y CSS: Clases, Posicionamiento y Flexbox, en el capítulo Selectores y posicionamiento y actividad Haga lo que hicimos

por Marco de Jesús González Rangel
| 27.2k xp | 69 posts
Desarrollador web y TI Support

1.- Estilizando elementos con clases CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <title>Estilizando Elementos con Clases CSS</title>
</head>
<body>
    <div class="container">
        <p class="texto-destacado">Este es un texto destacado que resalta sobre el resto del contenido.</p>
    </div>
</body>
</html>

.texto-destacado {
    color: #FF6347;
    font-weight: bold;
    font-size: 1.2rem;
}

2.- Destacando títulos con CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <title>Destacando Títulos con CSS</title>
</head>
<body>
    <div class="container">
        <h1 class="titulo-blog">Título de la Publicación del Blog</h1>
        <p>Este es el contenido de la publicación.</p>
    </div>
</body>
</html>

.titulo-blog {
    color: #2E8B57; 
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid #2E8B57;
    padding-bottom: 5px;
}

3.- Estilos stiuacionales con clases CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <title>Estilos Situacionales con Clases CSS</title>
</head>
<body>
    <div class="container">
        <p class="urgente">¡Noticia Urgente! Se ha producido un evento importante.</p>
    </div>
</body>
</html>

.urgente {
    color: #FF0000; 
    font-weight: bold;
    background-color: #FFE4E1; 
    padding: 10px;
    border-left: 5px solid #FF0000;
}

4.- Entendiendo y aplicando el reset CSS

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

5.- Aplicando el modelo de caja en la práctica

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <title>Aplicando el Modelo de Caja en CSS</title>
</head>
<body>
    <div class="container">
        <p class="ajustado">Este párrafo tiene un margen, borde y relleno ajustados para demostrar el modelo de caja.</p>
    </div>
</body>
</html>

.ajustado {
    margin: 20px;
    padding: 15px;
    border: 2px solid #4CAF50; 
    background-color: #F0FFF0; 
    font-size: 1rem;
}
3 respuestas
por Brenda Souza
| 3778.5k xp | 13805 posts
Alura Scuba Team Scuba

Hola Marco, espero que estés bien

Gracias por compartir tu ejercício práctico con nosotros! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Abrazos y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!
por José Luis Ortega Olave
| 24.7k xp | 45 posts
Analista de datos 
1 - Estilizando elementos con clases CSS

<!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>Portafolio de Jose Luis</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <header>
        <br>
        <nav>
            <a href="#">Inicio</a>
            <a href="#">Proyectos</a>
            <a href="#">Contacto</a>
            <a href="#">Cerrar sesion</a>
        </nav>
        <br>
        <br>
    </header>
    <main>
        <h1>MI PORTAFOLIO</h1><br>
        <p><strong class = "texto-destacado">Mi nombre es Jose Luis Ortega, soy Desarrollador web y analísta de datos,</strong> vivo en Colombia, siempre estoy dispuesto a dar lo mejor en beneficio de la Compañia.</p>
        <div>
        <br>
        </div>
        <div>
            <img src="Analista-Programador.jpg" alt="Oficina del desarrollador y analista"><br>
            <a href="https://instagram.com/jose_ortega_73" target="_blank">Instagram</a>
            <a href="https://github.com/JoseLu973" target="_blank">GitHub</a>
            <a href="linkedin.com/in/jose-luis-ortega-olave" target="_blank">Linkedin</a>
        </div>
    </main>
    <br>
    <br>
    <footer>
        <br>
        <h2>Software y analisis de datos efectivo para su empresa.</h2> 
        <h2>Contacto: joluort76@gmail.com</h2>
        <h2>Jose Luis Ortega 2024. Todos los derechos reservados.</h2>
        <br>
    </footer>
</body>
</html>

- Asi quedaria el CSS:

.texto-destacado {
    color:hsl(286, 83%, 29%);
}

2 - Destacando títulos con CSS

<!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>Portafolio de Jose Luis</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <header>
        <br>
        <nav>
            <a href="#">Inicio</a>
            <a href="#">Proyectos</a>
            <a href="#">Contacto</a>
            <a href="#">Cerrar sesion</a>
        </nav>
        <br>
        <br>
    </header>
    <main>
        <h1 class = "titulo-blog">MI PORTAFOLIO</h1><br>
        <p><strong class = "texto-destacado">Mi nombre es Jose Luis Ortega, soy Desarrollador web y analísta de datos,</strong> vivo en Colombia, siempre estoy dispuesto a dar lo mejor en beneficio de la Compañia.</p>
        <div>
        <br>
        </div>
        <div>
            <img src="Analista-Programador.jpg" alt="Oficina del desarrollador y analista"><br>
            <a href="https://instagram.com/jose_ortega_73" target="_blank">Instagram</a>
            <a href="https://github.com/JoseLu973" target="_blank">GitHub</a>
            <a href="linkedin.com/in/jose-luis-ortega-olave" target="_blank">Linkedin</a>
        </div>
    </main>
    <br>
    <br>
    <footer>
        <br>
        <h2>Software y analisis de datos efectivo para su empresa.</h2> 
        <h2>Contacto: joluort76@gmail.com</h2>
        <h2>Jose Luis Ortega 2024. Todos los derechos reservados.</h2>
        <br>
    </footer>
</body>
</html>

- CSS:

.titulo-blog {
    color: #342e8b; 
    font-size: 3rem;
    letter-spacing: 1px;
    border-bottom: 2px solid #472e8b;
    padding-bottom: 5px;
}

3.- Estilos stiuacionales con clases CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <title>Periodico Vanguardia</title>
</head>
<body>
    <div class="container">
        <p class="urgente">¡Ultima hora, Urgente, se ha producido un terremoto de 7.9 grados en la escala de richter.</p>
    </div>
</body>
</html>

- CSS:

.urgente {
    color: #FF0000; 
    font-weight: bold;
    background-color: #FFE4E1; 
    padding: 10px;
    border-left: 5px solid #FF0000;
}

4.- Entendiendo y aplicando el reset CSS

* {
    margin: 0;
    padding: 0;
}
por José Luis Ortega Olave
| 24.7k xp | 45 posts
Analista de datos 
5 y 6 - Inspeccionando elementos y entendiendo el modelo de caja y aplicandolo a mi proyecto:

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>Portafolio de Jose Luis</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <header>
        <br>
        <nav>
            <a href="#">Inicio</a>
            <a href="#">Proyectos</a>
            <a href="#">Contacto</a>
            <a href="#">Cerrar sesion</a>
        </nav>
        <br>
        <br>
    </header>
    <main>
        <h1 class = "titulo-blog">MI PORTAFOLIO</h1><br>
        <p><strong class = "texto-destacado">Mi nombre es Jose Luis Ortega, soy Desarrollador web y analísta de datos,</strong> vivo en Colombia, siempre estoy dispuesto a dar lo mejor en beneficio de la Compañia.</p>
        <p class = "urgente">¡Ultima hora, Urgente, se ha producido un terremoto de 7.9 grados en la escala de richter.</p>
        <p class = "modelo-caja">En este parrafo podemos observar los ajustes realizados a las propiedades margin, border, padding y content.
            Los cuales hacen que el texto quede mas llamativo con un borde y un color de fondo. </p>
        </p>
        <div>
        <br>
        </div>
        <div>
            <img src="Analista-Programador.jpg" alt="Oficina del desarrollador y analista"><br>
            <a href="https://instagram.com/jose_ortega_73" target="_blank">Instagram</a>
            <a href="https://github.com/JoseLu973" target="_blank">GitHub</a>
            <a href="linkedin.com/in/jose-luis-ortega-olave" target="_blank">Linkedin</a>
        </div>
    </main>
    <br>
    <br>
    <footer>
        <br>
        <h2>Software y analisis de datos efectivo para su empresa.</h2> 
        <h2>Contacto: joluort76@gmail.com</h2>
        <h2>Jose Luis Ortega 2024. Todos los derechos reservados.</h2>
        <br>
    </footer>
</body>
</html>

- CSS:

.modelo-caja {
    margin: 20px;
    padding: 15px;
    border: 2px solid #ee0f1a; 
    background-color: #dce584; 
    font-size: 1rem;
}