Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Lo aprendido

en esta sesion aprendimos el uso de las listas etiquetas y diferentes conceptos de css y algunos comporamientos de inline y block en las imagenes.

2 respuestas
</head>
<body>
    <img  id="banner" src="banner.jpg" alt="">

<div class="principal">       
    <h1  >  sobre la barberia alura</h1>

    <p > ubicada en el corazon de la ciudad, la  <strong>  barberia alura </strong> trae para el mercado lo que hay de mejor para su
    cabello y barba. fundada en 2020, la barberia alura ya es destaque en la ciudad y conquista nuevos clientes
    diaramente.</p>

    <p id="mision"> <em>nuestra mision es: <strong> "proporocionar autoestima y calidad de vida a nuestros clientes"</strong> </em> </p>

    <p > ofrecemos profesionales experimentados que estan constantemente observando los cambios y movimiento en el
    mundo de la moda, para asi ofrecer a nuestros clientes las ultimas tendencias. El atendimiento posee un 
    padron de excelencia y agilidad , garantizando calidad y satisfaccion de nuestros clientes </p>

</div>

<div class="diferenciales">

   <h2>Diferenciales</h2>
        <ul>
        <li class="items" > Atencion personalizada a los clientes</li>
        <li class="items"> Espacio diferencialos</li>
        <li class="items"> Localizacion</li>
        <li class="items"> Profesionales calificados</li>
        </ul>
   <img src="diferenciales.jpg"  class="imagendiferencial">
</div>

</body>
</html>

body{


}

#banner{
    width: 100%;
}

.principal{
    background: #cccccc;
    padding: 20px;

}


h1{
    text-align: center;
}

p{ text-align: center;


}

#mision {
   font-size: 20px;
}


em strong{color: red;}

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

h2{
text-align: center;
}

.items{
    font-style: italic;
}

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

.imagendiferencial{
    width: 50%;
}