Haz lo que hicimos en clase | HTML5 y CSS3 parte 4: Avanzando en CSS | Alura Latam

HTML:

<!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">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
    <title>Barberia Alura</title>
</head>
<body>
    <header>
        <div class="caja">
            <h1>
                <img src="img/logo.png" alt="">
            </h1>
            <nav>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="pag/productos.html">PRODUCTOS</a></li>
                    <li><a href="pag/contacto.html">CONTACTO</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <img src="img/banner.jpg" alt="Barberia Alura" class="banner">
    <main>
        <section class="principal">
            <h2 class="tituloCentra">Sobre la Barbería Alura</h2>
            <img src="img/utensilios.jpg" alt="Utensilios" class="utensilios">
            <p>
                Ubicada en el corazón de la ciudad, la <strong>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>
        </section>
        <section class="diferenciales">
            <h3 class="tituloCentra">Diferenciales</h3>
            <ul class="list">
                <li class="items">Atencion personalizada a los clientes</li>
                <li class="items">Especio Diferenciado</li>
                <li class="items">Localizacion</li>
                <li class="items">profesionales calificados</li>
            </ul>
            <img src="img/diferenciales.jpg" alt="diferenciales" class="imgDiferen">
        </section> 
    </main>
    <footer>
        <div>
            <img src="img/logo-blanco.png" alt="">
            <p class="piepagina"> &copy Copyright Barberia Alura - 2022</p>
        </div>
    </footer>
</body>
</html>

CSS:

header{
    background-color: #bbbbbb;
    padding: 20px 0;
}
.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}
nav{
    position: absolute;
    right: 0;
    top: 110px;
}
nav li{
    display:inline;
    margin: 0 0 0 15px;
}
nav a{
    color: black;
    font-weight: bold;
    text-decoration: none;
    font-size: 22px;
}
nav a:hover{
    color: orange;
    text-decoration: underline;
}

/* cuerpo */

.banner{
    width: 100%;
}
main{
    width: 940px;
    margin: 0 auto;
}

.principal{
    background-color: #cccccc;
    padding: 20px;
}
.tituloCentra{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}
.principal p{
    margin: 0 0 1em;
}

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

#mision{
    font-size: 20px;
}
.principal strong{
    font-weight: bold;
}
.principal em {
    font-style: italic;
}
.diferenciales{
    background-color: white;
    padding: 30px;
}

.items{
    font-style: italic;
}
.list{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}
.imgDiferen{
    width: 60%;
}

/* fin del cuerpo */

/* pie de pagina */
footer{
    text-align: center;
    background-image: url(../img/bg.jpg);
    padding: 40px;
}
.piepagina{
    color: white;
    font-size: 13px;
    margin: 20px;
}
/* fin pie de pagina */