Index BarberShop Alura<!DOCTYPE html>
<html lang="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">
<link rel="stylesheet" type="text/css" href="diseños.css">
<title>Alura BarberShop</title>
<link rel="text" href="productos.html">
</head>
<body>
<header id="title-center">
ALURA BARBERSHOP
</header>
<div>
<img id="banner" src="banner/banner.jpg">
</div>
<nav>
<li><a href="productos.html">BarberShop Productos</a></li>
<li><a href="">BarberShop Catalogo</a></li>
<li><a href="">BarberShop Citas</a></li>
</nav>
<p id="title-center"><strong> Sobre la Barbería Alura</strong></p>
<div class="section">
<span>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. </span>
<br><br>
<span id="mision">Nuestra misión es: <strong class="negrita"> "Proporcionar autoestima y calidad de vida a nuestros clientes".</strong></span>
<br><br>
<span >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. </span>
</div>
<div class="Diferenciales">
<h2>Diferenciales</h2>
<ul>
<li class="item"> Atencion personalizada a los clientees</li>
<li class="item"> Espacio diferenciado</li>
<li class="item"> Localizacion Accesible</li>
<li class="item"> Profesionalidad</li>
</ul>
<img id="difIMG" src="/banner/diferenciales.jpg" alt="">
</div>
<figure>
<img src="./banner/diferenciales.jpg" alt="" width="100%" height="300px">
</figure>
</body>
</html>*{
padding: auto;
margin: 2px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.negrita{
font-style: italic;
font-style: unset;
font-size: 19px;
color: #777f49;
}
#title-center{
font-size: 30px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
padding: 5px;
text-align: center;
color: #453ff1
}
body{
text-align: center;
font-size: 15px;
background-color: rgba(183, 189, 196, 0.73);
}
span{
color: darkblue;
}
#banner{
width: 100;
padding: 0;
margin: 0 -20px;
height: 200px;
}
nav li{
width: 100%;
height: 100px;
text-align: center;
position:relative;
display: inline;
font-size: 20px;
/*Display me sirven para decirle que haga inline y position para decirle que se mantenga en la misma zona*/
}
nav li a{
text-decoration: none;
border: 1px solid darkblue;
border-radius: 10px;
padding: 5px;
color: blue;
}
nav li a:active{
color: green;
}
nav{
margin: 30px;
}
.item{
font-size: italic;
display: block;
background-color: #a2bd0e;
padding: 15px;
cursor: pointer; /*Activa el bottom al pasar cursor*/
text-align: center;
}
.Diferenciales{
background: #5b95df63;
padding: 0;
margin: 0;
}
ul{
display: inline-block;
vertical-align:top; /*Posiciona un item en vertical*/
width: 35%;
}
#difIMG{
width: 50%;
}
div h2{
padding: 20px;
}
.section span{
font-size: large;
white-space: pre-wrap; /*Alinea un texto usando los espacios */
padding-top: 10px;
}
