Lo que hicimos en el aula

Haciendo responsivo el diseño de la página para celulares

/CSS para Home/

.banner{ width: 100%; }

.principal{ padding: 3em; background: #FEFEFE; width: 940px; margin: 0 auto;}

.titulo-principal{ text-align: center; font-size: 2em; /2em dos veces el tamaño por defecto de la fuente del navegador/ margin: 0 0 1em; clear: left; /cualquier propiedad después del tiulo la limpie a la izquierda/ color: rgba(0, 0, 0, 0.4); text-shadow: 2px 2px 5px red; }

.principal p{ margin: 0 0 1em; }

.principal strong{ font-weight: bold;

}

.principal em{ font-style: italic; }

.utencilios{ width: 120px; float: left; margin: 0 20px 20px 0; }

.mapa{ padding: 3em 0; background: linear-gradient(rgb(255, 255, 255), rgb(52, 173, 230), #ffffff); }

.diferenciales{ padding: 3em 0; background: #ffffff; /box-shadow: inset 0 0 30px red;/ }

.mapa p{ margin: 0 0 2em; text-align: center; }

.mapa-contenido{ width: 940px; margin: 0 auto; }

.contenido-diferenciales{ width: 640px; margin: 0 auto; }

.lista-diferenciales{ width: 40%; display: inline-block; vertical-align: top; }

.items{ line-height: 1.5; }

.items:before{ content: "✦"; }

.items:first-child{ font-weight: bold; }

.imagen-diferenciales{ width: 60%; transition: 400ms; /opacity: 0.4;/ box-shadow: 10px 10px 20px 5px rgb(0, 0, 0, 0.5); }

.imagen-diferenciales:hover{ opacity: 0.4; transition: 400ms; }

.video{ width: 560px; margin: 1em auto; }

@media screen and (max-width:480px){ h1{ text-align: center; } nav{ position: static; } .caja, .principal, .mapa-contenido, .contenido-diferenciales, .video{ width: auto; } .lista-diferenciales, .imagen-diferenciales{ width: 100%; } }