Haz lo que hicimos en el aula HTML-CSS final proyecto | HTML5 y CSS3 parte 1: Mi primera página web | Alura Latam

Hola les comparto como quedo mi práctica del curso.

index.html

<!DOCTYPE html>

<html lang="es">

<head>
    <meta charset ="UTF-8">
    <title  >Barbería ALURA</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header><h1 class="titulo-principal">Barberia Alura</h1></header>
    <img  id="banner" src="banner/banner.jpg">

    <div class="principal">
        <h2 class="titulo-centralizado">Sobre la Barbería Alura</h2>
<p >Ubicada en el corazón de la ciudad, <strong>la Barbería Alura</strong> trae para el mercado lo que hay de mejor para su cabello y barba. Fundada en 2020, la Barbería Alura ya es destaque en la ciudad y conquista nuevos clientes diariamente. </p>

<p id="mision"><em>Nuestra misión es:<strong>"Proporcionar autoestima y calidad de vida a nuestros clientes".</strong></em> </p>

        <p >Ofrecemos profesionales experimentados que está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>
     </div>

 <!--porque clase porque permite reutilizar estilo a dif id que solo puede haber uno de cada nombre-->
     <div class="diferenciales">
        <h3 class="titulo-centralizado">Diferenciales</h3>
        <ul>
            <li class="items">atenciòn personalizada a los clientes.</li>
            <li class="items" >espacio diferenciado.</li>
            <li class="items" >localizaciòn.</li>
            <li class="items" >profesionales calificados.</li>

        </ul>
    <img src="diferenciales/diferenciales.jpg class="imagenDiferenciales">
    </div>

</body>
</html>

style.css.


/*selectores  se les pone un value para html*/
.titulo-principal{
padding-left:30px;
}



#banner{
    width:100%;

}
.principal{
     background-color:#cccccc; 
     padding:20px;
}


.titulo-centralizado{
    text-align:center;
}

p{
    text-align:center;
    background-color:#cccccc;
}


/*como existen 2 strong y solo quiero afectar
 la que tiene etiqueta padre em entonces ponemos
 */
em strong{
    color:red;
}
/* buena practica: organizamos los selectores ordenados como en el html primero va
body luego h1 luego p  luego los em porque es hijo de p  etc*/

#mision{
    font-size:20px;
}




.diferenciales{
    background-color: #ffffff;
    padding: 30px;
}


.items{
    font-style:italic;
}

ul{
    display:inline-block;
    vertical-align:top;
    width:20%;
    margin-right:15%;
}

.imagenDiferenciales{
    width:50%;
}