Haz lo que hicimos en el aula

body{

    font-family: 'Montserrat', sans-serif;
}

header{

    background-color: #bbbbbb;
    padding: 20px 0;/*desfazamiento externo*/
}
.caja{

    width: 940px;
    position: relative;/* relativo en lo absoluto */
    margin: 0 auto;/* 0 para superior inferior y automatico para bordes */
}

nav{

    position: absolute;
    top: 110px;
    right: 0;

}
nav li{

    display: inline;/* que la linsta este en linea */
    margin: 0 0 0 15px;/* espacio en las listas  */
}

nav a{

    text-transform: uppercase;/* convertimos a mayusculas */
    color: #000000;
    font-weight: bold;/*colocamos negrita*/
    font-size: 22px;
    text-decoration: none;/*quitamos decoreacion de texto*/

}

.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%;/* vertica horizontal */
    padding: 30px 20px;
    box-sizing: border-box;/*no deja que se escape la medida*/
    border: 2px solid #000000;
    border-radius: 10px;

    /* 
    border-color: #000000;
    border-width: 2px;
    border-style: solid;
    */
}
.productos h2{

    font-size: 30px;
    font-weight: bold;
}

.productos li:hover{

    border-color: #c78c19;
}
.productos li:active{

    border-color: #088c19;
}
.productos li:hover h2{


    font-size: 33px;
}




.producto-descripcion{
    font-size: 18px;
}
.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}
nav a:hover{

    color: #c78c19;
    text-decoration: underline;
}



footer {

    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}

.copyright{

    color: #FFFFFF;
    font-size: 13px;
    margin: 20px;
}




form {

    margin: 40px 0;
}

form label, form legend {

    display: block;
    font-size: 20px;
    margin: 0 0 12px;

}
.checkbox{

    margin: 20px 0;
}

.input-padron {

    display: block ;
    margin: 0 0 12px;
    padding: 10px 25px;
    width: 50%;
}
.enviar{

    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border-radius: 5px;
    border: none;
    transition: 1s all;/* transición en el boton */
    cursor: pointer;/*cursor en forma de mano */
}
.enviar:hover {

    background: darkorange;
    transform: scale(1.2) ;

}

table{
    margin: 40px 40px;

}
thead{

    background: #555555;
    color: white;
    font-weight: bold;/*negrita*/

}

td,th {

    border: 1px solid black;
    padding: 8px 15px;
}

/*css para nuestra página index*/}

.banner{

    width: 100%;
}

.principal{

    padding: 3em 0;
    background: #fefefe;
    width: 940px;
    margin: 0 auto;
}

.tituloPri{

    text-align: center;
    font-size: 2em;/*multiplica el tamaño de fuente*/
    margin: 0 0 1em;
    clear: left;/**/
    color: rgba(0, 0, 0,1);/*el a o ultimo valor es el a*/

}

.items:before{

    content: "★";
}

.principal strong{

    font-weight: bold;

}
.principal em{

    font-style: italic;
}

.utensilios{
    width: 120px;
    float: left; /*lo vuelve flotante */
    margin: 0 20px 20px 0;/* las medidas van en sentido horario */
}

.mapa{

    padding: 3em 0;
    background: linear-gradient(#fefefe, #888888); /*damos degradado*/
}

.mapa p{

    margin: 0 0 2em;
    text-align: center;
}

.mapa-contenido {

    width: 940px;
    margin: 0 auto;
}

.diferenciales {
    padding: 3em 0;
    background: linear-gradient(#888888,#fefefe);/*degragado*/

}

.contenido-diferenciales{

    width: 640px;
    margin: 0 auto;
}

.lista-diferenciales{

    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.items{

    line-height: 1.5;
}

.items:nth-child(1){

    font-weight: bold;
}

.imagenDiferencial{
    width: 60%;
    transition: 400ms;
    box-shadow: 10px 10px 30px 12px #000000;/* los valores van  
    en sentido horario  el tercer valor es de degradado y el 4to es el rango de la sombra*/

}
.imagenDiferencial:hover{

    opacity: 0.3;
}

.video{

    width: 560px;
    margin: 1em auto;
}

/*adaptamos la pagina para celulares u otros */
@media screen and (max-width:480px){

    h1{

        text-align: center;
    }

    nav{

        position: static;
    }

    .caja, .principal, .mapa-contenido, .contenido-diferenciales, .video{

        width: auto;
    }

    .lista-diferenciales,.imagenDiferencial{

        width: 100%;
    }
}

¡Hola! Espero que estés muy bien.

¡Muchas gracias por tu aporte! Es genial ver los puntos de vista y maneras de hacer los ejercicios de nuestros estudiantes, ya que esto enriquece mucho nuestros conocimientos.

¡Si tienes alguna pregunta sobre el contenido de los cursos, no dudes en preguntarnos! Por favor, recuerda utilizar las etiquetas para indicarnos si tu consulta es una duda, sugerencia o cualquier otro tema. De esta manera, podremos filtrar y procesar las dudas y consultas de manera más eficiente, mejorando aún más nuestro desempeño y tiempo de respuesta.

Además, te recomiendo que te unas a nuestra comunidad en Discord. ¡Allí podrás interactuar con otros compañeros, compartir tus ideas y aprender aún más! La interacción es instantánea y te permitirá llegar a muchas más personas. Así que si tienes algún comentario, opinión, recomendación o simplemente quieres compartir tus pensamientos y como hiciste tus ejercicios con la comunidad, ¡no dudes en hacerlo por Discord!

Estamos seguros de que tu aporte será muy valioso para todos nosotros. ¡Un saludo! :)