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

Pagina culminada

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style/reset.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/products.css">
    <title>Productos - Barberia Alura</title>
</head>
<header>
    <div class="caja">
     <h1><img src="imagenespro/logo.png" alt=""></h1>
     <nav>
     <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="produxtos.html">Productos</a></li>
        <li><a href="contactos.html">Contactos</a></li>
     </ul>
    </nav>
</div>
</header>
<body>
    <main>
    <ul class="productos">
        <li>
            <h2>Cabello</h2>
            <img src="imagenespro/cabello.jpg" alt="">
            <p class="producto-descrip">Con tijera o maquina a gusto del cliente</p>
            <p class="producto-precio">10$</p>
        </li>
        <li>
            <h2>Barba</h2>
            <img src="/imagenespro/barba.jpg" alt="">
            <p class="producto-descrip" >Corte y Diseño profesional de barba</p>
            <p class="producto-precio">8$</p>
        </li>
        <li>
            <h2>Cabeloo + Barba</h2>
            <img src="/imagenespro/cabello+barba.jpg" alt="" srcset="">
            <p class="producto-descrip">Corte completo de cabello y barba</p>
            <p class="producto-precio">15$</p>
        </li>

</ul>
</main>
<footer>
    <img src="/imagenespro/logo-blanco.png" alt="">
    <p class="copyright">&copy Copyght Barberia Alura 2022</p>
</footer>
</body>
</html>

`header{ background-color: #BBBBBB; padding: 20px 0; } .caja{ width: 940px; position: relative; margin: 0 auto; } nav{ position: absolute; top: 140px; right: 0px; } nav li{ display: inline; margin: 0 0 0 15px; } nav a{ text-transform: uppercase; color :black; font-weight: bold; font-size: 22px; text-decoration: none; } .productos{ width: 940px; margin: 0 auto; padding: 50px; } .productos li{ display: inline-block; text-align: center; width: 25%; vertical-align: top ; margin: 0 1.5%; padding: 30px 20px; box-sizing: boder-box; border:2px solid black; border-radius: 20px; } .productos h2{ font-size: 30px; font-weight: bold; } .productos h2{ font-size: 30px; font-weight: bold; } .producto-descrip{ font-size: 18px;

} .producto-precio{ font-size: 20px; font-weight: bold; margin-top: 10px; } nav a:hover{ color: #c78c19; text-decoration:underline; } .productos li:hover{ border-color:#c78c19; } .productos li:active{ border-color: #0869; } .productos li:hover h2{ font-size: 32px; } footer{ text-align: center; background:url(/imagenespro/bg.jpg); padding: 40px; } .copyright{ color: #ffffff; font-size: 13px; margin: 20px; }

`

1 respuesta

Hola Oswaldo, 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!