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

Barbería Alura

    </header>

   <img id="barberia"src="C:/Lenguajes de Programacion/HTML/ORACLE/banner/barberia.jpeg">

<div class="principal">

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

       <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>

</div>

<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> 

    </div>


</body>   

CSS

.titulo-principal{ padding-left: 30px; }

#barberia{ width:100%; }

.principal{ background: #CCCCCC; padding: 20px; } .titulo-centralizado{ text-align:center;

}

p{ text-align:center;

}

em strong{ color: red;

}

#mission{ font-size: 20px; }

.diferenciales{ background:#FFFFFF; padding: 30px;

}

.items{ font-style:italic; } ul{ display: inline-block; vertical-align: top; width: 20%; margin-right: 15%; } .imagenDiferenciales{ width: 50%; }