Avance de Proyecto Final

CODIGO CSS

 

body{

background: rgba(255,255,255,1);

background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(233,236,246,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 91%, rgba(205,194,217,1) 94%, rgba(105,72,141,1) 100%);

background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(0%, rgba(233,236,246,1)), color-stop(0%, rgba(255,255,255,1)), color-stop(15%, rgba(255,255,255,1)), color-stop(47%, rgba(255,255,255,1)), color-stop(88%, rgba(255,255,255,1)), color-stop(91%, rgba(255,255,255,1)), color-stop(94%, rgba(205,194,217,1)), color-stop(100%, rgba(105,72,141,1)));

background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(233,236,246,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 91%, rgba(205,194,217,1) 94%, rgba(105,72,141,1) 100%);

background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(233,236,246,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 91%, rgba(205,194,217,1) 94%, rgba(105,72,141,1) 100%);

background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(233,236,246,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 91%, rgba(205,194,217,1) 94%, rgba(105,72,141,1) 100%);

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(233,236,246,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 91%, rgba(205,194,217,1) 94%, rgba(105,72,141,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#69488d', GradientType=0 );

}

#ConGeneral{

position: absolute; float: left;

width: 100%;

height: 55em;

top: 0; left: 10px;

text-align:left;

background:#D8D8D8;

}

header {

position:absolute;

-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

box-shadow:inset 0px 1px 0px 0px #ffffff;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));

background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);

background-color:#ededed;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

border:1px solid #dcdcdc;

width: 100%;

height: 80px;

top:30px;

}

header h1{

position:absolute;

color: #222;

font: 40px Tahoma, Helvetica, Arial, Sans-Serif;

float:left;

left:500px;

top: 2px;

}

header img{

position: relative;

float:left;

left:20px;

top:-22px;

padding:10px;

}

#filtro {

-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

box-shadow:inset 0px 1px 0px 0px #ffffff;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));

background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);

background-color:#ededed;

position: absolute;

float: rigth;

width: 11.5rem; height: 35.5rem;

top: 200;

rigth:10px

background: linear-gradient(#FFFFFF, #A8A8A8);

borde:10px;

padding: 3px 10px;

border: #A8A8A8 5px double;

border-top-left-radius: 20px;

border-bottom-right-radius: 20px;

}

#formulario{

font-family:"Arial",serif;

position: absolute;

float: left;

width: 12rem;

height: 42rem;

top:0;

left: 10;

}

#formulario labe{

font-family: 20 px "Arial",serif;

}

#graficas {

overflow: hidden;

display: inline-block;

position: absolute;

}

#graficaMP{

display: inline-block;

}

#graficaTM{

display: inline-block;

}

#conflechaizq{

position: absolute;

float: left;

width:0; height:0;

top:200px; left: -30;

}

#conflechader{

position: absolute;

float: right;

top:200px;

left: 850px;

}

#ElegirGraficas{

font-size:13px;

position: relative; float: left;

width: 500; height: 20;

top: 147; left: 220;

vertical-align: middle;

z-index:5;}

#contenido{

position: absolute;

float: left;

left: 280px;

width: 80%;

top:180px;

}

footer {

position: absolute;

left: 0;

bottom: 0;

height: 100px;

width: 100%;

}

footer h2 {

position:fildex;

top:100px;

font: 10px Arial, Sans-Serif;

color:white;

text-align: center;

}

vectorimg{

top:800px;

}

tabs img{

position:absolute;

float:left;

left:20px;

}

//* AQUI ESTA EL CODIGO PARA DISPOSITIVOS MOVILES

Agregamos esto en el Head del .html

<meta name="viewport" content="width=device-width"/>

@media screen and (max-width: 800px) {

body{

width:100%;

}

}

@media screen and (max-width: 600px) {

body{

width:100%;

@media screen and (max-width: 600px) {

body{

width:100%;

}

}

@media screen and (max-width: 600px) {

body{

width:100%;

}

}

/* Smartphones (portrait and landscape) ----------- */
@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screenand (min-width : 321px) {/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screenand (max-width : 320px) {/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* Styles */
}
/* iPads (landscape) ----------- */
@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {/* Styles */
}
/* iPads (portrait) ----------- */
@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {/* Styles */
}
/* The New iPad (iPad 3) ----------- */
@media only screenand (min-device-width: 1536px)and (max-device-width: 2048px)and (-webkit-min-device-pixel-ratio: 2) {/* Styles */
}
/* iPhone 4 ----------- */
@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */
}