al momento de eliminar el main y colocarlo en la etiqueta: .principal se me desconfigura y no se guarda los cambios para los diferenciales 
me puedean ayudar a resolver ese problema
al momento de eliminar el main y colocarlo en la etiqueta: .principal se me desconfigura y no se guarda los cambios para los diferenciales me puedean ayudar a resolver ese problema
Hola Andres, espero que estés bien.
Le pido que por favor nos comparta su código completo, incluyendo el HTML afectado por el CSS que enviaste. También pido que por favor envíe su código en formato de texto, puedes lograrlo haciendo clic en este botón y colocando tu código entre los acentos:
Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.
¡Saludos!
font-family: 'Montserrat', sans-serif;
}
header{
background-color: #BBBBBB;
padding: 20px 0;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
nav{
position: absolute;
top: 110px;
right: 0px;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: black;
font-weight:bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{
color: #c78c19;
text-decoration: underline;
}
.productos{
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 20px;
}
.productos li:hover{
border-color: #1a776b;
text-decoration: underline #1a776b;
}
.productos li:active{
border-color: #0eda63;
}
.productos h2{
font-size: 30px;
font-weight: bold;
}
.productos li:hover h2{
font-size: 33px;
color: #1a776b;
}
.producto-descripcion{
font-size: 18px;
}
.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
background: url(imagenes/bg.jpg);
padding: 40px;
}
.copyright{
color: #ffffff;
font-size: 13px;
margin: 20px;
}
main{
}
form{
margin: 40px 0;
}
form label, form legend{
display: block;
font-size: 20px;
margin: 0 0 10px;
}
.input-padron{
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
.checkbox{
margin: 20px 0;
}
.enviar{
width: 40%;
padding: 15px 0;
font-size: 18px;
font-weight: bold;
color: white;
background: #1a776b;
border: none;
border-radius: 12px;
transition: 1s all;
cursor: pointer;
}
.enviar:hover{
background: rgb(33, 219, 79);
transform: scale(1.2)
}
table{
margin: 40px 40px;
}
thead{
background: #555555;
color: white;
font-weight: bold;
}
td,th{
border: 1px solid #000000;
padding: 8px 15px;
}
/*CSS para nuestra home*/
.banner{
width: 100%;
}
.principal{
padding: 3em 0;
background: #FEFEFE;
width: 940px;
margin: 0 auto;
}
.titulo-principal{
text-align: center;
font-size: 2em;
margin: 0 0 1em;
clear: left;
}
.principal p{
margin: 0 0 1em;
text-align: center
}
.principal strong{
font-weight: bold;
}
.principal em{
font-style: italic;
}
.utensillos{
width: 120px;
float: left;
margin: 0 20px 20px 0;
}
.mapa{
padding: 3em 0;
}
.mapa p{
margin: 0 0 2em;
text-align: center;
}
.diferenciales{
padding: 3em 0;
background: #888888;
}
.contenido-diferenciales{
width: 640px;
margin: 0 auto;
}
.lista-diferenciales{
width: 40%;
display: inline-block;
vertical-align: top;
}
.items{
line-height: 1.5;
}
.items:first-child{
font-weight: bold;
}
.imagen-diferenciales{
width: 50%;
}
.video{
width: 560px;
margin: 1em auto;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Barberia Alura</title>
<link rel="stylesheet" href="reset.css ">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="caja">
<h1><img src="imagenes/logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="PRODUCTOS.HTML">Productos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<img class="banner" src="banner/banner.jpg">
<main>
<section class="principal">
<h2 class="titulo-principal">Sobre la Barbería Alura</h2>
<img class="utensillos" src="imagenes/utensilios.jpg" alt="Utencillos de un barbero">
<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>
</section>
<section class="mapa">
<h3 class="titulo-principal">Nuestra Ubicacion</h3>
<p>Nuestro establecimieno esta ubicado en el corazon de la ciudad</p>
<div class="mapa-contenido">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1994.9001864505733!2d-78.47436108919217!3d-0.17185513457512963!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91d5907639a2ac3b%3A0xf0a235521ca1673!2sEdificio%20Don%20Gaspar%2C%20Av.%20Gaspar%20de%20Villarroel%2C%20Quito%20170513!5e0!3m2!1ses!2sec!4v1674139172030!5m2!1ses!2sec" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<section class="diferenciales">
<h3 class="titulo-principal">Diferenciales</h3>
<div class="contenido-diferencoales">
<ul class="lista-diferenciales">
<li class="items" > Atencion personalizada a los clientes</li>
<li class="items">Espacio diferenciado</li>
<li class="items">Localizacion</li>
<li class="items">Profesionales calificados</li>
<li class="items">Puntualidad</li>
<li class="items">Limpieza</li>
</ul><img src="diferenciales/diferenciales.jpg" class="imagen-diferenciales">
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8pWtdanVz3I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</section>
</main>
<footer>
<img src="imagenes/logo-blanco.png">
<p class="copyright">© Copyright Barberia Alura 2022</p>
</footer>
</body> Buenas noches les envio el código de CSS y HTML espero me den una pronta respuesta gracias
Hola Andres, espero que estés bien.
Hay algunos errores en tu código CSS, incluso que el gradiente no está, por esto no aparece. Abajo le dejo el código con los comentarios en las partes donde hay errores para que lo estudie, lea línea por línea para ver donde te equivocaste. Si tiene alguna duda puedes volver a preguntar en este tópico.
¡Saludos!
/*Aqui está faltando el body { */
font-family: 'Montserrat', sans-serif;
}
header{
background-color: #BBBBBB;
padding: 20px 0;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
nav{
position: absolute;
top: 110px;
right: 0px;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: black;
font-weight:bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{
color: #c78c19;
text-decoration: underline;
}
.productos{
width: 940px;
margin: 0 auto;
padding: 50px;
}
.productos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid black;
border-radius: 20px;
}
.productos li:hover{
border-color: #1a776b;
text-decoration: underline #1a776b;
}
.productos li:active{
border-color: #0eda63;
}
.productos h2{
font-size: 30px;
font-weight: bold;
}
.productos li:hover h2{
font-size: 33px;
color: #1a776b;
}
.producto-descripcion{
font-size: 18px;
}
.producto-precio{
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
footer{
text-align: center;
background: url(imagenes/bg.jpg);
padding: 40px;
}
.copyright{
color: #ffffff;
font-size: 13px;
margin: 20px;
}
main{ /*Debes borrar el main si no lo estás usando */
}
form{
margin: 40px 0;
}
form label, form legend{
display: block;
font-size: 20px;
margin: 0 0 10px;
}
.input-padron{
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
.checkbox{
margin: 20px 0;
}
.enviar{
width: 40%;
padding: 15px 0;
font-size: 18px;
font-weight: bold;
color: white;
background: #1a776b;
border: none;
border-radius: 12px;
transition: 1s all;
cursor: pointer;
}
.enviar:hover{
background: rgb(33, 219, 79);
transform: scale(1.2) /* Aqui está faltando el punto y coma ; */
}
table{
margin: 40px 40px;
}
thead{
background: #555555;
color: white;
font-weight: bold;
}
td,th{
border: 1px solid #000000;
padding: 8px 15px;
}
/*CSS para nuestra home*/
.banner{
width: 100%;
}
.principal{
padding: 3em 0;
background: #FEFEFE;
width: 940px;
margin: 0 auto;
}
.titulo-principal{
text-align: center;
font-size: 2em;
margin: 0 0 1em;
clear: left;
}
.principal p{
margin: 0 0 1em;
text-align: center /*Aqui está faltando un punto y coma ; */
}
.principal strong{
font-weight: bold;
}
.principal em{
font-style: italic;
}
.utensillos{
width: 120px;
float: left;
margin: 0 20px 20px 0;
}
.mapa{
padding: 3em 0;
/* background: linear-gradient(#FEFEFE, #888888); Aqui está faltando este gradiente ; */
}
.mapa p{
margin: 0 0 2em;
text-align: center;
}
/*
Aqui está faltando este fragmento de código
.mapa-contenido{
width: 940px;
margin: 0 auto;
} */
.diferenciales{
padding: 3em 0;
background: #888888;
}
.contenido-diferenciales{
width: 640px;
margin: 0 auto;
}
.lista-diferenciales{
width: 40%;
display: inline-block;
vertical-align: top;
}
.items{
line-height: 1.5;
}
/*
Aqui está faltando este fragmento de código
.items:before{
content:"★"
} */
.items:first-child{
font-weight: bold;
}
.imagen-diferenciales{
width: 50%;
/* Aqui está faltando estas lineas de código
transition: 400ms;
box-shadow: 10px 10px 30px 15px #000000; */
}
/* .
Aqui está faltando este fragmento de código
imagen-diferenciales:hover{
opacity: 0.3;
} */
.video{
width: 560px;
margin: 1em auto;
}
/*
Aqui está faltando todo este fragmento de código
@media screen and (max-width:480px){
h1{
text-align: center;
}
nav{
position: static;
}
.caja, .principal, .mapa-contenido, .contenido-diferenciales, .video {
width: auto;
}
.lista-diferenciales, .imagen-diferenciales{
width: 100%;
}
} */