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

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

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!
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;
}
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;
}