Solucionado (ver solución)
Solucionado
(ver solución)
7
respuestas

Duda de error

Referente al curso HTML5 y CSS3 parte 1: Mi primera página web, en el capítulo Lista y divisiones del contenido y actividad Inline y Block

por Luis Rodrigo Cedillo Reyes
| 47.3k xp | 9 posts
docente

¿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
por Julian David Vargas Avendaño
| 80.2k xp | 1 posts

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

solución!
por Alex Ivan Berrospi Miranda
| 100.3k xp | 10 posts
Electrónico

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


.diferenciales{
      background: #FFFFFF;
      padding: 30px;
   }
por Ariel Cuauhtemoc Jasso Zavala
| 101.5k xp | 32 posts
sin cargo

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!!!

por Bryan Lee Chiang Arteaga
| 46.2k xp | 1 posts
Ejecutivo de atención al cliente

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

por Luis Rodrigo Cedillo Reyes
| 47.3k xp | 9 posts
docente

muchas gracias, por su ayuda

por Estudiante
| 32.4k xp | 11 posts

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>
por Estudiante
| 32.4k xp | 11 posts

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;
    }