07-06 Haz lo que hicimos en el aula

css

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 */

}
nav a:hover{
    color: white;
    text-decoration:  underline;/* cuando captura el mouse lo subraya con este elemento */
}

.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 */
    border:2px black solid ;
    border-radius: 10px;
}

.productos li:hover{
    border-color:blue;

}

.productos li:active{
    border-color: aqua;
}

/* creando un selector del h2, es el ancabezado */
.productos h2{
font-size: 30px;
font-weight: bold;
/* se define el tipo de letra negrita */
}

.productos li:hover h2 {
    font-size:40px;

}

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

footer{
    text-align: center;
    /* background-image: url(imagenes/bg.jpg); */
    background-image: url(https://cdn.pixabay.com/photo/2020/02/19/22/57/blue-background-4863452_1280.jpg);
    padding: 40px;

} 
.copyright{
    color: aliceblue;
    font-size: 13px;
    margin: 20px;
}