header{
background-color: #bbbbbb;
padding: 20px 0;
}
.caja{
width:940px;
position: relative;
margin:0 auto;
}
img{
height: 250px;
}
nav{
position:absolute;
top: 110px;
right:0;
}
nav li{
display: inline;
/*inline permite no ocupar toda la pagina solo el esapcio necesario */
margin: 15px;
}
nav a{
/*este propiedad hace que el texto sea en mayuscula */
text-transform: uppercase;
color:black;
/*esta es para que el texto que esta en negriya*/
font-weight: bold;
/*esta permite decidir que tamaño llevara el texto*/
font-size: 22px;
/*esta permite decidir si el texto tendra decoracion de texto */
text-decoration: none;
}
nav a:hover{
/*hover es para capturar el movimiento del mouse y asi cambie color en donde este el mouse*/
color: #c78c19;
/*sirve para que el texto este subrrayado */
text-decoration: underline;
}
.productos{
width:940px;
margin:0 auto;
/*para dar espaciamiento interno del item */
padding:50px;
}
.productos li{
display: inline-block;
text-align:center;
/*con este atributo se puede decidir el tipo de fuente de la letra */
font-style: oblique;
width:30%;
vertical-align:top;
/*para separar de la zona vertical y zona lateral del espaciamiento de los items, 0 vertical y 1.5 laterales */
margin:0 1.5%;
padding:30px 20px;
box-sizing: border-box;
border: 2px solid #000;/*de esta forma es la version corta de la aprte de abajo*/
/* border-color: #000;
border-width:2px;
border-style:solid;*/
border-radius: 10px;
}
.productos li:hover{
border-color:#c78c19;
}
.productos li:active{
/*el color cambia cuando le damos click*/
border: color #088c19;
}
.productos h2{
font-size:30px;
font-weight:bold;
}
.productos li:hover h2{
font-size:33px;
}
.produto-descirpcion{
font-size:18px;
}
.producto-precio{
font-size:20px;
font-weight:bold;
margin-top:10px;
}
footer{
text-align:center;
/*url sirve para poder poner una foto desde el css ademas de que si añadimos el background la imagen se duplicara para poder llenar toda la parte de pie de pagina*/
background: url(imagenes/footer.jpg);
padding:40px;
margin:10px 0;
}
.copyright{
font-size:13px;
color:#ffffff;
margin:20px;
}
main{
width:940px;
margin:0 auto;
}
from{
margin:40px 0;
}
/*si ponemos una coma podremos seleccionar mas de un elemento del html para que asi 1 o varios compartan diseños sin necesidad de añadir mas lineas de codigos*/
from label, from legend{
display:block;
font-size:20px;
margin:0 0 10px;
}
.input_padron{
display:block;
margin: 0 0 20px;
/*el primer numero es arriba y abajo el segundo numero es izquierda y derecha */
padding:10px 25px;
width:50%;
}
.checkbox{
margin: 20px 0;
}
.enviar{
width:40%;
padding:15px 0;
font-size:18px;
/*font-weight sirve para aumentar o disminuir el grosor de la letra bold aumenta el grosor y lighter es para disminuir */
font-weight:bold;
color:white;
background:orange;
border:none;
border-radius: 5px;
/*sirve para que el boton que tenga esta propiedad haga un tipo de transicion al momento de caragr la pagina o de poer el mouse encima */
transition: 5s all;
/*sirve para que el mouse haga un cambio a la hora de que se pone encima del buton */
cursor:pointer;
}
.enviar :hover{
background: red;
/* scale sirve para que el boton aumente de tamaño cuando el cursor esta encima de el */
transform: scale(1.2);
/*rotate sirve para que el boton gire una cantidad de grados los cuales se definen como deg
transform: rotate(70deg);*/
}
table{
margin:40px 40px;
}
thead{
background:darkorange;
color:black;
font-weight:bold;
}
td , th{
border:1px solid #000;
padding:8px 15px;
}