parte final | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="reset.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500&display=swap" rel="stylesheet">
    <title>Pagina basica</title>

</head>

<body>
    <header>
        <div class="caja">
            <h1><img src="Imagenes/logo.png" alt="logo" /></h1>
            <nav>
                <ul>
                    <li><a href="index.html" target="_blank">Home</a></li>
                    <li><a href="Producto.html">Productos</a></li>
                    <li><a href="Contacto.html"> Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <img src="banner.jpg" alt="banner" class="dibujo" />
    <main>
n constantemente observando los cambios y movimiento en el mundo de la moda, para así ofrecer a nuestros clientes las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad,
                garantizando calidad y satisfacción de nuestros clientes. </p>
        </section>
        <setion class="mapa">
            <h3 class="tituloPrincipal">Ubicacion</h3>
            <p>Nuestra ubicacion esta ubicado en el corazon de la ciudad.</p>
            <div class="mapa-contenido">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12265.071633305452!2d-74.0955640279028!3d4.69030874715869!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e3f9bfd2da6cb29%3A0x239d635520a33914!2zQm9nb3TDoQ!5e0!3m2!1ses!2sco!4v1645131574329!5m2!1ses!2sco"
                    width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" title="mapa"></iframe>
            </div>


        </setion>
        <section class="diferenciales">
            <h3 class="tituloPrincipal">diferenciales</h3>
            <div class="contenido-diferenial">
                <ul class="lista-diferenciales">
                    <li class="items"> Atencion personalizada a los clientes</li>
                    <li class="items">Especiado diferenciados</li>
                    <li class="items">Localizaciones</li>
                    <li class="items">profesionales calificados.</li>
                    <li class="items">Puntualidad</li>
                    <li class="items">Limpieza.</li>
                </ul><img src="diferenciales.jpg" class="imagen-diferenciales" />
            </div>
        </section>
        <div class="video">
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/hJMj-a-Jdcs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </main>

    <footer>
        <img src="Imagenes/logo-blanco.png" alt="logoblanco">
        <p class="copyright">
            &copy Copyright Barberia alura 2022</p>
    </footer>
</body>

</html>


.dibujo {
    width: 100%;
}

.principal {
    padding: 3em 0;
    background: #ffffff;
    width: 940px;
    margin: 0 auto;
}

.tituloPrincipal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.herramientas {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.contenido-diferenial {
    width: 640px;
    margin: 0 auto;
}

.lista-diferenciales {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.items {
    line-height: 1.5;
}

.items:first-child {
    font-weight: bold;
}

.diferenciales {
    padding: 3em 0;
    background: #8888;
    margin: 20px 0;
    /* box-shadow: inset 0 0 30px yellow; */
}

.imagen-diferenciales {
    width: 60%;
    box-shadow: 10px 10px 10px 15px black;
}

.imagen-diferenciales:hover {
    opacity: 0.3;
    transition: 3s;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(95deg, green, orange, blue);
}

.items::before {
    content: "☆";
}

P::first-line {
    font-style: italic;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.mapa-contenido {
    width: 940px;
    margin: 0 auto;
}

.video {
    width: 560px;
    margin: 1em auto;
}


/*main > p {} solo aplica a mis hijos*/


/*img + p*/


/*img~p*/


/*.principal p::Not(#id){

}*/

@media screen and (max-width: 480px) {
    h1 {
        text-align: center;
    }
    nav {
        position: static;
    }
    .caja,
    .principal,
    .mapa-contenido,
    .contenido-diferenial,
    .video {
        width: auto;
    }
    .lista-diferenciales,
    .imagen-diferenciales {
        width: 100%;
    }
}