<!DOCTYPE html>
<html lang="en-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">
<title>Barberia Alura</title>
<link rel="stylesheet" href="/Curso Html5 y CSS3/style.css">
</head>
<body>
<header>
<h1 class="tituloPrincipal">Barberia Alura</h1>
</header>
<img id="banner" src="/Curso Html5 y CSS3/banner.jpg" alt="Imagen de la barberia">
<div class="principal">
<h2 class="tituloCentral">la Barbería Alura</h2>
<p>Ubicada en el corazón de la ciudad, <b>la Barbería Alura</b> 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 class="parrafo2"><em>Nuestra misión es: <b class="nem">"Proporcionar autoestima y calidad de vida a nuestros clientes"</b>.</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="tituloDiferencial">Diferenciales</h3>
<ul class="lista_desordenada">
<li> Atencion personalizada a los clientes </li>
<li>Espacio diferenciado</li>
<li>Localizacion</li>
<li>Profesionales calificados</li>
</ul>
<img class="imagenDiferenciales" src="/Curso Html5 y CSS3/diferenciales.jpg" alt="Imagen diferenciales">
</div>
</body>
</html>-----------------------------------------------------------------------------------------------CSS Código-------------------------------------------------------------------------------------------------------------
body{
background: rgb(255, 255, 255);
}
.tituloPrincipal{
padding: 10px;
border-bottom: 5px solid rgba(243, 56, 9, 0.582);
display: inline-block;
text-shadow: 0px 10px 50px rgba(243, 56, 9, 0.582);
box-shadow: 0px 0px 20px 4px;
}
#banner{
width: 100%;
}
.principal{
background: #cccccc ;
padding: 10px;
}
.tituloCentral{
font-size: 25px;
text-align: center;
border-bottom: 5px solid rgba(243, 56, 9, 0.582);
}
p{
text-align: center;
}
.parrafo2{
font-size: 20px;
}
.nem{
color: rgba(243, 56, 9, 0.897);
}
.diferenciales{
background: rgb(255, 255, 255);
padding: 30px;
}
.tituloDiferencial{
border-bottom: 5px solid rgba(243, 56, 9, 0.582);
}
h3{
font-size: 25px;
text-align: center;
}
.lista_desordenada{
text-shadow: 0px -1px 4px rgba(20, 17, 17, 0.295);
box-shadow: 3px 1px 15px 0px;
font-style: italic;
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.imagenDiferenciales{
width: 50%;
}
