hrtml code
<title style="text-align:center ;" >Barberia Alura</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<img id="banner" src="banner/banner.jpg"> <! img src es para agregar imagenes a la pagina web -->
<div class="principal">
<h1 >Sobre la Barbería Alura</h1>
<p >Ubicada en el corazón de la ciudad, </strong>la Barbería</strong> Alura 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>
<! id="Mision es para agregar como un renglon o parte para poder editarlo -->
<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">
<h2>Diferenciales</h2>
<ul>
<! "ul" para declararlo como una lista no ordenada-->
<! Luego ponemosli en cada texto de la lista -->
<li class="items">Atencion personalizada a los clientes</li>
<li class="items"> Localizacion</li>
<li class="items">Espaciado diferenciados</li>
<li class="items">Profesionales calificados</li>
</ul>
<img src="diferenciales/diferenciales.jpg" class="imagendiferenciales">
</div>
</body>css code
h1{
text-align: center;}
p{ text-align: center; }
em strong{ color: red; }
#Mision{
font-size: 20 px;}
#banner{
width: 100%;} .principal{
background-color: paleturquoise;
padding: 20px;}
.diferenciales{
background-color: #FFFFFF;
padding: 30px;}
h2{ text-align: center; }
.items{
font-style: italic;} ul{
display: inline-block;
/*solo para que use su contenido y poder poner una imagen al lado ya que ocupa el espacio */
vertical-align: top;
/*\ para que la imagen se alinie a la parte posterior */
width: 20%;
margin-right: 15%;} .imagendiferenciales{ width: 50%; }
