10 Haz lo que hicimos en el aula | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación

<!DOCTYPE html>
<html lang="en">

<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>Productos-Barberia Alura</title>

    <link rel="stylesheet" href="reset.css">

    <link rel="stylesheet" href="Productos.css">
</head>

<body>
    <header>
        <!-- el div encapsula los elemntos  -->
        <div class="caja">
            <h1><img src="imagenes/logo.png" alt=""></h1>
            <!-- listas ordenadas -->
            <nav>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="Productos.html">PRODUCTOS</a></li>
                    <li><a href="contactos.html">CONTACTOS</a></li>
                </ul>
            </nav>
        </div>


    </header>

    <main>
        <ul class="productos">
            <li>
                <h2>cabello</h2>
                <img src="imagenes/cabello.jpg" alt="">
                <p class="producto-descripcion">Con tijera o maquina a justo del cliente </p>
                <p class="producto-precio">10 dll</p>
            </li>

            <li>
                <h2>barba</h2>
                <img src="imagenes/barba.jpg" alt="">
                <p class="producto-descripcion">Corte y diseño profesional de barba</p>
                <p class="producto-precio">8 dll</p>
            </li>

            <li>
                <h2>cabello+barba</h2>
                <img src="imagenes/cabello+barba.jpg" alt="">
                <p class="producto-descripcion">Paquete completo de cabello y barba</p>
                <p class="producto-precio">15 dll</p>
            </li>
        </ul>




    </main>

</body>

</html>

header {
    background-color: #bbbbbb;
    padding: 20px 0;
    /* aumenta el ancho de la barra de navegacion */
}


nav {
    position: absolute;
    top: 100px;
    /* centraliza el texto */
    right: 0;
}

.caja {
    width: 940px;
    /* toda la caja que encapsula el logo y la lista confuguaremos un ancho */
    position: relative;
    /* relative quita la condiguracion que existe por defecto, esto para que aplique los cambios de width ; */
    margin: 0 auto;
    /* alinea al centeo los elementos  */
}

nav li {
    display: inline;
    /* con esto le digo que solo ocupe el tamaño de su contenido */
    margin: 0 0 0 15px;
    /* arriba,derecha,abajo,izquierda - --- reaaliza una serparacion de las letras entre si */

}

nav a {
    text-transform: uppercase;
    /*  convierte el texto a mayusculas */
    color: black;
    font-weight: bold;
    /* se hace referencia al grosor de la letra  */
    font-size: 20px;
    /*   determina el tamaño de las letras */
    text-decoration: none;
    /* quita el subrayado que inidac que es enlace a la pagina */

}

.productos{
    width: 940px;
    /* el ancho standar de las pantalla 950 * 1200 */
    margin: 0 auto;
    padding: 50px;
    /* configurabdo el espacio en el main y encabezad "separacion entre elementos" */
}

.productos li{
    display: inline-block; /* ajustando al tamño del contenido */
    text-align: center;
    /* alineando text */
    width: 30%;
    /* separado de cada elemnto cofigunandel tamaño por igual  1/3 */
    vertical-align: top;
    /* conifgurando los item de manera vertical */
    background-color: #bbbbbb; /* se usa para ver que los no esta alineados y el tamaño no esta equilibrado */
    margin: 0 1.5%;
    padding: 30px 20px; /* se suma al width 30% y rebasara los 940px que definimos para solucionarlo usaremos box-sizing:  */
    box-sizing: border-box;/*  crea uniformemente los elemento sin rebasar los 940px que definimos el total de la pagina */
}
/* creando un selector del h2, es el ancabezado */
.productos h2{
font-size: 30px;

font-weight: bold;
/* se define el tipo de letra negrita */
}

.producto-descripcion{
    font-size: 18px;
    /* tamanio de letra */
}
.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    /* separando  */
}