Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
7
respuestas

Duda de error

¿Por qué será que me sale otro diseño? Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

`

   <title>Barbería Alura</title>
   <link rel="stylesheet" href="style.CSS">
   <div class="principal">

   <h1>Sobre la Barbería Alura</h1>

    <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="misión"><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>

    </div>

    <div class="diferenciales">

    <h2>Diferenciales</h2>
         <ul>
           <li class= "item"> Atención personalizada a los clientes </li>
           <li class= "item"> Espacio diferenciado </li>
           <li class= "item"> Localización </li>
           <li class= "item"> Profesionales calificados </li>
         </ul>
      <img id="DIFERENCIALES" src="DIFERENCIALES.jpg" class="imagenDiferenciales">
    </div>
`
 body{
      background:#FFFFFF ;
   }
   #banner{
      width: 100%;
   }
   .principal{
      background: #CCCCCC
      padding: 20%;
   }
   h1{
      text-align: center;
   }
   p{
      text-align: center;
   }

   em strong{
      color: red;
   }
   #mision {
      font-size: 20px;
   }
   .diferenciales{
      background: #FFFFFF;
      padding: 30%;
   }
   .item {
      font-style: italic;
   }
   ul{
      display: inline-block;
      vertical-align: top;
      width: 20%;
      margin-right: 15%;
   }
   .imagenDiferenciales{
      width: 50%;
   }
7 respuestas

Tal vez sea el padding, comprueba que las clases y id's esten funcionando como esperas

solución!

Te sale así , por que en la clase .diferenciales estas poniendo un padding de 30% , debe ser 30px.


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

antes del padding en .principal te falta el punto y coma , ejecutalo antes y despues y observaras que cambia el sombreado ojo con eso, saludos!!!

estas poniendo un padding de 30% , y es 30px.

muchas gracias, por su ayuda

Buen día tengo la misma duda pero no encuentro el error, les agradezco si me ayudan.!

<body>

    <img id="banner" src ="Carp Banner/banner.jpg"> <!--HAce referencia-->

    <div class="principal">

        <h1> Sobre la Barbería Alura </h1> <!-- Título de la página [tag Contenido]-->

        <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>
        <!-- El carácter : sirve para atribuir un valor a una propiedad. -->

    </div>





    <div class="diferenciales">


        <h2> Diferenciales </h2>

        <ul> <!-- crea una lista no ordenada. -->

            <li class="items" >  Atencion perzonalizada a los clientes </li> <!--  declara cada uno de los elementos de una lista, pone punto inicial en la frase -->
            <li class="items" > Espacio especial a clientes   </li>
            <li class="items" > Localizacion especisal         </li>
            <li class="items" > Profecioneles calificados     </li>
            <!-- Con las clases puedo modificar un conjunto de datos 
            asi no ponemos el ID para cada cambio -->
        </ul>  <!-- crea una lista no ordenada. -->
                <img src="Diferenciales/diferenciales.jpg" class="imagenDiferenciales" >


        <h2> Tratamientos Especiales </h2>

        <ol>
            <li class="orden" > Tintes de barba y bigote  </li>
            <li class="orden" > Depilaciones con navaja suiza </li>
            <li class="orden" > Protesis de cabello </li>
        </ol>

    </div>




</body>

body { background: #10d7a9;

    }

    #banner /* donde esta la imagen*/
    {
        width: 100% ;
    }

    .principal /*division principal dentro del body*/
    {
        background: #cccccc;

    }

    h1 /* Titulo principal */
    {
        text-align: center; 
        background: #9e3a77;
        height: 75px; /* Altura donde esta el TITULO */
        border: 5px solid #000000; /* tamanho y color del borde */
        padding: 25px;  /* va a tomar espacio de todos los lados */
        margin: 5px; /* margen del titulo con referencia de la imagen
        y del parrafo que esta abajo */

    }

    p /*Parrafos*/
    {
        text-align: center; 
      /*background: #cccccc; solo pitaría los parrafos de Gris  */
    }


    em strong /* especifucando a etiqueta puedes modificar el 
    color.. Si pusieras solo strong  la linea 23 tambine se cambiaria
    y solo queremos cambiar la linea 26 que es la mision 
    ID = solo va a cambiar o modificar un dato muy espscifico que 
     es como el CURP de una persona*/

    {
        color: red;

    }

    #mision /* Mision de la barbería*/
    {    
    font-size: 35px;
    }


    .diferenciales /* division 2 dentro del body
    diferenciales, características de la barberia*/
    {
        background: #CC9900;
        padding: 30px;

    }

    h2
    {
        text-align: center;
    }

    .items /* Clase de diferenciales de la barbería es un conjunto
    de características que se puede modificar en conjunto
    . es para decir que hace referencia a una clase y NO a un id */
    {
        font-style: oblique;
        color: #800080;
        font-weight: bold; /*Negritas */

    }

    .orden/*clases, Segunda lista de diferenciales o tratamientos especiales 
    que se puede modificar en conjunto */
    {
        font-style: oblique;
        color: #014eb8;
        font-weight: bolder;  /* Es mas grueso y grande que bold*/
    }

    ul
    {
        display: inline-block;
        vertical-align: top;
    }


    .imagenDiferenciales
    {
        width: 50;
    }