Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Haz lo que hicimos en aula

Referente al curso HTML5 y CSS3 parte 1: Mi primera página web, en el capítulo Lista y divisiones del contenido y actividad Haz lo que hicimos en aula

por Andres Felipe Gomez Pinzon
| 107.7k xp | 70 posts

HTML:

<!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" href="css/estilos.css">
    <title>Barberia Alura</title>
</head>
<body>
    <img src="img/banner.jpg" alt="Barberia Alura" id="banner">
    <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="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>
    </div>
    <div class="diferenciales">
        <h2>Diferenciales</h2>
        <ul>
            <li class="items">Atencion personalizada a los clientes</li>
            <li class="items">Especio Diferenciado</li>
            <li class="items">Localizacion</li>
            <li class="items">profesionales calificados</li>
        </ul>
        <img src="img/diferenciales.jpg" alt="diferenciales" class="imgDiferen">
    </div>
</body>
</html>

CSS:

body{

}
#banner{
    width: 100%;
}
.principal{
    background-color: #cccccc;
    padding: 20px;
}
h1{
    text-align: center;
    border: 10px solid black;
    height: 150px;
    padding: 20px;
    margin: 40px;
}
p{
    text-align: center;
}
#mision{
    font-size: 20px;
}
em strong{
    color: red;
}
.diferenciales{
    background-color: white;
    padding: 30px;
}
h2{
    text-align: center;
}
.items{
    font-style: italic;
}
ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}
.imgDiferen{
    width: 50%;
}
3 respuestas
por Jose Gonzalez
| 2169.9k xp | 6782 posts
Instructor

Hola Andres, espero estés muy bien.

Felicitaciones por tu aprendizaje, continúa con ese empeño. Para agilizar el tiempo de respuesta en caso de dudas relacionadas con los cursos, estamos priorizando el foro para postear dudas.

En caso que desees compartir tus ejercicios o actividades dispusimos en Discord un canal exclusivo para ese fin (#compartatucodigo)

Te dejo éste link que muestra donde puedes compartir tus actividades https://www.youtube.com/watch?v=ZhXdFO6SxQ4

Si necesitas ayuda, estaremos aquí! Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Maria Laura Asurmendi
| 48.4k xp | 9 posts

Barberia Alura

<img id="banner" src="banner/banner.jpg">

<div class="principal">
<h2 class="titulo-centralizado">Sobre la Barberia Alura</h2>
<p>Ubicada en el corazon de la ciudad, la<strong> Barberia Alura </strong>trae para el mercado lo que hay   de mejor
    para su cabello y barba. Fundada en 2020, la Barberia Alura ya es destaque en la ciudad y conquista nuevos
    clientes diariamente.</p>
<p id="mision"><em>Nuestra mision es:<strong>"Proporcionar autoestima y calidad de vida a nuestros
            clientes"</strong>.</em></p>
<p>Ofrecemos profesionales experimentados que estan constantemente observando los cambios y movimiento en el mundo
    de la moda, para asi ofrecer a nuestros clientes las ultimas tendencias. El atendimiento posee un padron de
    excelencia y agilidad, garantizando calidad y satisfaccion de nuestros clientes.</p>
  </div>
  <div class="diferenciales">
        <h3 class="titulo-centralizado">Diferenciales</h3>
   <ul>

            <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>
          </ul>
          <img src:"diferenciales/diferenciales.jpg" class="imagenDiferencial">
        </div>

    </body>

No descarga las imágenes ni me cambia al color blanco

por Maria Laura Asurmendi
| 48.4k xp | 9 posts

.titulo-principal{ padding-left: 30px; 

}
#banner{
        width: 100%;
}
.principal{
        background: #CCCCCC;
        padding: 20px;
}
.titulo-centralizado{
    text-align: center;
}p{
    text-align: center;
    }
    em strong {
                color:red;
        }
        #mision{
                font-size: 20px;
    } 
        .diferenciales{
            background:#FFFFFF;
            padding: 30px;
        }
        .items{
        font-style: italic;
        }

        ul{
            display:inline-block;
            vertical-align: top;
            width: 20%
            margin-right: 15%;
        }

        .imagenDiferenciales{
                width: 50%;
         }

        No se por que en el margin- right de las listas me subraya los : y las llaves como de error...Me ayudan porque no me permite bajar la imagen de diferenciales ni que quede blanco...Sera por ese subrayado?

`