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

[Proyecto] Haz lo que hicimos en el aula

<!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">
    <title>BARBERIA-PRODUCTOS</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="CursoHTMyCss_style_ejerc1_produc.css">
</head>
<body>
    <header>
        <div class="caja">
            <h1><img src="img/logo.png" alt=""></h1>
                <nav>
            <ul>
                <li><a href="CursoHTMyCss_ejerc1.html">HOME</a></li>
                <li><a href="">CONTACTO</a></li>
                <li><a href="">PRODUCTOS</a></li>
            </ul>    
                </nav>
        </div>
    </header>
    <main>
        <ul class="productos">
            <li>
                <h2>cabello</h2>
                <img src="img/cabello.jpg" alt="">
                <p class="despric">Lorem ipsum dolor sit amet, consectetur at</p>
                <p class="precio">$10.00</p>
            </li>
            <li>
                <h2>Barba</h2>
                <img src="img/barba.jpg" alt="">
                <p class="despric">Lorem ipsum dolor sit amet, consectetur </p>
                <p class="precio">$8.00</p>
            </li>
            <li>
                <h2>Cabello+Barba</h2>
                <img src="img/cabello+barba.jpg" alt="">
                <p class="despric">Lorem ipsum dolor sit amet, consectetur</p>
                <p class="precio">$20.00</p>
            </li>
        </ul>
    </main>
    <footer>
        <div>
            <img src="img/logo-blanco.png" alt="">
            <p class="copy">&copy;Barberia Alura 2021</p>
        </div>
</body>
</html>
header{
    background-color: gainsboro;
    padding: 20px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 110px;
    right: 100px;
}

nav li{
    display: inline;
    margin: 0  0 0 15px;
}

nav a{
    text-transform: uppercase;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
    color: cadetblue;
    font-weight: bold;
    font-size: 30px;
    text-decoration: none;
}

nav a:hover{
    color: rgb(197, 127, 47);
    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-color: rgb(14, 14, 14);
    border: 3px solid rgb(14, 14, 14);
    border-radius: 10px;
}

.productos li:hover{
    border-color: rgb(197, 127, 47);  
}

.productos li:active{
    border-color: rgb(198, 94, 62);
}

.productos h2{
    font-size: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
    color: cadetblue;
    font-weight: bold;
}

.productos li:hover h2{
    font-size: 37px;
}
.despric{
    font-size: 15px;
}
.precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    background: url(img/bg.jpg);
    padding: 20px 0;
    text-align: center;
}

.copy{
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, sans-serif;
    font-size: 14px;
    margin: 20px;
    font-weight: bold;
}
1 respuesta

¡Hola!

¡Felicitaciones por tu aprendizaje, continúa con ese mismo entusiasmo y no te desanimes! Si quieres compartir tu progreso o la forma en que realizaste tus actividades, ¡puedes utilizar el canal #ComparteTuCódigo en Discord, que es un canal específico para este fin!

Allí, tus compañeros de estudios podrán ayudarte compartiendo conocimientos. ¡Esta interacción es muy importante para la participación de los alumnos y puede ayudarte a expandir tu red de contactos!

¡Te deseo mucho éxito en tus estudios y recuerda que aquí estaremos para apoyarte en caso de duda! :)

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