Lo que hicimos en el aula para adaptar la página inicial | HTML5 y CSS3 parte 4: Avanzando en CSS

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="UTF-8">
        <title>Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">   
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <div class="caja">
                <h1> <img src="imagenes/logo.png" alt="Logo de la Barbería Alura"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a> </li>
                        <li><a href="contacto.html">Contacto</a></li>
                    </ul>
                </nav>                
            </div>
            <div>
                <h1 class="titulo-principal">Barbería Alura</h1>
            </div>     
        </header>

        <img class="banner" src="Banner/banner.jpg">

        <main>
            <section class="principal">

                <h2 class="titulo-semantico">Sobre la Barbería Alura</h1>

                <img class="utensilios" src="imagenes/utensilios.jpg" alt="Utensilios de Barbería">

                <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="misión"><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="titulo-semantico">Diferenciales</h2>

                <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">    
            </section>
        </main>
    </body>

</html>

/*Aquí inicia el CSS para nuestro home.*/

body{
    background-color: beige;
}

.titulo-principal{
    padding-left: 60px;
    font-size: 3em;
    font-weight: bold;
}

/*
#banner{
    width: 100%;
} */

.banner{
    width: 100%;
}

/*
.titulo-centralizado{
    text-align: center;
}Debemos colocar selectores que no sean tan personalizados,
el hecho es que quiero mantener mi título principal, y Cristian
cambió este selector por titulo-principal, y para recordar que "section"
se usa cuando el contenido es semántico, entonces voy a llamar a este: título-semántico</p>.*/

.titulo-semantico{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    padding: 1em;
    clear: left;
}

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

.principal strong{
    font-weight: bold;
}

#misión{
    font-size: 20px;
}

.principal em{
    font-style: italic;
}

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

.imagenDiferenciales{
    width: 60%;
}