CSS
.banner{
width: 100%;
}
.principal{
padding: 3em 0;
background: #FEFEFE;
width: 940px;
margin: 0 auto;
}
.titulo-Principal{
text-align: center;
font-size: 2em; /*estoy diciendole hagamos 2 veces más del tamaño prederterminado*/
margin: 0 0 1em;
clear: left;
}
.principal p{
margin: 0 0 1em;
}
.principal strong{
font-weight: bold;
}
.principa em{
font-style: italic;
}
.utensilios{
width: 120px;
float: left; /*uso float para que la imagen utensilios se me ubique en la zona
izquierda de la pantalla y el texto al lado de ella*/
margin: 0 20px 20px 0;
}
.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: #888888;
}
.contenidoDiferenciales{
width: 640px;
margin: 0 auto;
}
.lista-diferenciales{
width: 40%;
display: inline-block;
vertical-align: top;
}
.items{
line-height: 1.5;
}
.items:before{
content:"★";
}
.items:first-child{
font-weight: bold;
}
.imagenDiferenciales{
width: 60%;
}
.video{
width: 560px;
margin: 1em auto;
}
¡Hola Eduardo!
Gracias por compartir tu duda con nosotros. Por lo que puedo ver en la imagen que compartiste, parece que estás teniendo problemas para lograr que tu imagen de banner se vea como en el video.
Para poder ayudarte mejor, necesitaríamos más información sobre lo que estás intentando hacer y cómo lo estás haciendo. ¿Podrías proporcionarnos más detalles sobre el problema que estás experimentando? ¿Estás utilizando algún código CSS específico para el banner? ¿Has intentado seguir los pasos del video detalladamente?
Sin más información, es difícil proporcionar una solución específica a tu problema. Pero si nos das más detalles, estaré encantado de ayudarte a encontrar una solución.
¡Espero haber ayudado y buenos estudios!
Html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<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="www.whatsapp.com" class="bi bi-whatsapp"></a></li>
<li><a href="www.facebook.com" class="bi bi-facebook"></a></li>
<li><a href="www.instagram.com" class="bi bi-instagram"></a></li>
<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="utensilios" src="/imagenes/utensilios.jpg" alt="Utensilios de un barbero">
<p>Ubicada en el corazón de la ciudad, la Barbería Alura trae para el mercado lo que hay de mejor para su
cabello y barba. Fundada en 2020, la <strong> Barbería Alura</strong>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 establecimiento esta ubicado en el corazon de la ciudad</p>
<div class="mapa-contenido">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101256.53643541217!2d-99.21664439115042!3d19.41376482959087!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d201f60a8f816b%3A0xca7e9b8e9149aac2!2sGoogle%20M%C3%A9xico!5e0!3m2!1ses!2smx!4v1683339725957!5m2!1ses!2smx"
width="1000" 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-diferenciales">
<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/5pOg4LuS-cI"
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" alt="">
<p class="copyright">© Copyright Barberia Alura - 2023</p>
</footer>
</body>
</html>Css
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: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
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 #000000;
border-radius: 10px;
}
.productos li:hover {
border-color: #c78c19;
}
.productos li:active {
border-color: #088c19;
}
.productos h2 {
font-size: 30px;
font-weight: bold;
}
.productos li:hover h2 {
font-size: 33px;
}
.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;
}
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: orange;
border: none;
border-radius: 5px;
transition: 1s all;
cursor: pointer;
}
.enviar:hover {
background: darkorange;
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;
}
/*Aqui inicia Css para nuestra home*/
.banner {
width: 100%;
}
.principal {
padding: 3em;
background: #FFFFFF;
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;
}
.principal strong {
font-weight: bold;
}
.principal em {
font-style: italic;
}
.utensilios {
width: 120px;
float: left;
margin: 0 20px 20px 0;
}
.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: #888888;
}
.contenido-diferenciales {
width: 640px;
margin: 0 auto;
}
.lista-diferenciales {
width: 40%;
display: inline-block;
vertical-align: top;
}
.items {
line-height: 1.5;
}
.items:before{
content: "";/*aqui va la estrella */
}
.items.items:first-child {
font-weight: bold;
}
.imagen-diferenciales {
width: 60%;
}
.video {
width: 560px;
margin: 1em auto;
}te dejó mi código