Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos en aula

background: #fefefe; padding: 3em 0; width: 940px; margin: 0 auto; }

.titulo-principal { text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }

.titulo-principal::first-letter { font-weight: bold; }

.principal p { margin: 0 0 1em; }

.principal strong { font-weight: bold; }

.principal em { font-style: italic; }

.mapa { padding: 3em 0; background: linear-gradient(#fefefe, #888888); }

.mapa p { margin: 0 0 2em; text-align: center; }

.mapa-contenido { width: 940px; margin: 0 auto; }

.diferenciales { padding: 3em 0; background: #888; }

.contenido-diferenciales { width: 840px; margin: 3em auto; }

.lista-diferenciales { width: 40%; display: inline-block; vertical-align: top; }

.imagenDiferencial { width: 60%; }

.items { line-height: 2em; }

.items::before { content: "⚝"; }

.items:nth-child(1) { font-weight: bold; }

.utensilios { width: 120px; float: left; margin: 0 20px 20px 0; }

.video { display: flex; width: 1060px; margin: 1em auto; }

.video iframe { padding-inline: 5px; }

<section class="principal">
  <h2 class="titulo-principal">Sobre la Barbería Alura</h2>
  <img src="imagenes/utensilios[1].jpg" alt="utensilios" class="utensilios">
  <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">
    Nuesta ubicacion
  </h3>
  <p>Nuestro establecimiento estya ubicado en el corazon de la ciudad.</p>
  <div class="mapa-contenido">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.4289779950204!2d-46.6360599242715!3d-23.58894346260688!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1sen!2sco!4v1680913421148!5m2!1sen!2sco"
      width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</section>

<section class="diferenciales">
  <h2 class="titulo-principal">Diferenciales</h2>
  <div class="contenido-diferenciales">
    <div class="lista-diferenciales">
    <ul>
      <li class="items">Atencion personalizada</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>
  </div><img src="https://img.lalr.co/cms/2017/03/25014033/barberia2703.jpg?size=xl" alt="" class="imagenDiferencial">
  </div>

  <div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/G0RbgK1r21Y" title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen></iframe>
  </div>
</section>
Logo de la Barberia Alure

© Copyright Barbería Alura - 2020

1 respuesta

¡Hola Elliscrisantovelandiacaicedo!

Entiendo que quieres replicar el código que se mostró en clase. El código que compartiste es un fragmento de un archivo HTML y CSS que contiene estilos para una página web de una barbería. Para replicar lo que se hizo en clase, debes copiar y pegar todo el código en un archivo HTML y CSS, y asegurarte de que los archivos estén en la misma carpeta.

Recuerda que también necesitarás las imágenes y videos que se utilizan en la página para que todo funcione correctamente.

Espero que esto te haya ayudado. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)