LO HECHO EN EL AULA | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

productos.html

<!DOCTYPE html>


<html>
    <head>
        <meta charset="UTF-8">
        <title>Productos - Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="productos.css">
    </head>
    <body>
    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png"></h1>
            <nav>
                <ul>
                    <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>
    <main>
        <ul class="productos">  
            <li>
              <h2>Cabello</h2>
              <img src="imagenes/cabello.jpg">
              <p class="producto-descripcion">Con tijera o máquina, a gusto del cliente</p>
              <p class="producto-precio">$ 10.00</p>
            </li>
            <li>
              <h2>Barba</h2>
              <img src="imagenes/barba.jpg">
              <p class="producto-descripcion">Corte y diseño profesional de barba</p>
              <p class="producto-precio">$ 8.00</p>
            </li>
            <li>
              <h2>Cabello + Barba</h2>
              <img src="imagenes/cabello+barba.jpg">
              <p class="producto-descripcion">Paquete completo de cabello y barba</p>
              <p class="producto-precio">$ 15.00</p>
            </li>
        </ul>
    </main>
    <footer>
        <img src="imagenes/logo-blanco.png">
        <p class="copyright">&copy Copyright Barbería Alura - 2022</p>
    </footer>
    </body>
</html>

productos.css

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

Hola, espero que estés bien!

Gracias por compartir tu código con nosotros, nos alegra mucho que estés practicando programación, la práctica es fundamental para consolidar tus nuevos conocimientos.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, ahí tenemos un canal exclusivo para esto #comparteTuCodigo, también puedes usar Linkedin para hacer esto, ya que el alcance es mayor y tu publicación puede llegar a más personas. Otra forma de guardar tus ejercicios es a través de Github, así a medida que avances podrás ir construyendo tu portafolio y en este caso el foro sería solo para aclarar cualquier duda que puedas tener sobre el contenido de los cursos.

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

¡Vamos juntos!

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