Practica | HTML y CSS: Clases, Posicionamiento y Flexbox | Alura Latam

PRACTICA 1.

!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.Estilizando Elementos con clases CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main>
        <br>
        <h1>1. Estilizando Elementos con clases CSS</h1>
        <p class="texto-destacado">1. Estilizando Elementos con clases CSS</p>
        <div class="contenedor-texto"> <p>Estás trabajando en el desarrollo de una página web y necesitas aplicar
             estilos específicos a diferentes elementos usando clases CSS. Tu desafio
             es crear una clase llamada "texto-destacado" en el archivo HTML para un 
             elemento "< p >", y luego estilizar esa clase en el archivo CSS para cambiar
             el color del texto. Usa tu creatividad para elegir colores que resalten 
             el texto pero aún sean legibles y armoniosos con el diseño general de la 
             página.</p>
        </div>  
        <a href="https://www.instagram.com/">Instagram</a>
        <a href="https://www.github.com/">GitHub</a>
    </main>
    <footer>
        <p>© 2024 Primer Pagina HTML</p>
    </footer>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #0F67B1 ;
    color: white;
}    

h1 {
    max-width: 940px;
    font-family: 'Comic Sans MS', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin: 40px, 0;
    text-align: center;
}


.texto-destacado {
    font-size: 18px;
    font-family: 'Comic Sans MS', sans-serif;
    text-align: center;
    justify-items: center;
    color: yellow;

    padding: 5%;
}

.contenedor-texto {
    font-family: 'Comic Sans MS', sans-serif;
    width: 800px;
    height: 368px;
    margin: 10px, 10px, 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #071952;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad PRACTICA 2.

 {
    margin: 0;
    padding: 0;
}

body {
    background-color: #0F67B1 ;
    color: white;
}    

h1 {
    max-width: 940px;
    font-size: 36px;
    font-family: 'Comic Sans MS', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin: 40px, 0;
    text-align: center;
}

h2 {
    max-width: 940px;
    font-size: 30px;
    font-family: 'Comic Sans MS', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin: 40px, 0;
    text-align: center;    
}


.texto-destacado {
    font-size: 18px;
    font-family: 'Comic Sans MS', sans-serif;
    text-align: center;
    justify-items: center;
    color: yellow;
    padding: 5%;
}

.contenedor-texto {
    font-family: 'Comic Sans MS', sans-serif;
    width: 800px;
    height: 368px;
    margin: 10px, 10px, 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #071952;
    box-shadow: 0 3px 13px 1px rbg(0 0 0 / 50%);
}

.titulo-blog {
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: black;; 

}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

PRACTICA 3. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

PRACTICA 4. RESET CSS

* {
    margin: 0;
    padding: 0;
}

PRACTICA 5. MANEJO DE CAJAS.

.caja-1 {
    background-color: #0F67B1;
    margin: 10px;
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 5px solid brown;
}

.caja-2 {
    background-color: lightslategrey;
    margin: 10px;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px solid brown;
}