slides

css/especificos.css

@@ -186,6 +186,7 @@ right: 20px;
     width: 660px;
 }
 
+#protector-slide {transition: opacity 1s; }
 #banner
 {
     width:100%;
@@ -686,3 +687,22 @@ b { font-weight: bold; }
 }
 
 @media screen and (max-width:400px) { #basic-grey { height:100%; } }
+
+#protector-solar{
+    width: 50%;
+    margin: 0px auto;
+    text-align: center;
+    background-color: #324875;
+    height: 60px;
+    padding-top: 19px;
+    color: white;
+    font-family: Open Sans;
+    font-size: 25px;
+    text-transform: uppercase;
+    font-weight: bold;
+
+}
+
+#protector-solar a, #protector-solar a:link, #protector-solar a:hover, #protector-solar a:visited{
+    color:white;
+}

css/protector.css

@@ -8,7 +8,7 @@ html, body
 
 #protector-slide{
 	position: relative;
-	background: url(../Images/beach.jpg) no-repeat bottom ;
+	background: url("Images/protector/slide1-1400.jpg") no-repeat bottom;
 	background-size: cover;
 	height: 700px;
 	width: 100%;
@@ -153,3 +153,18 @@ h1{ text-transform: uppercase; }
 }
 
 #banner{ margin-top:0px!important;}
+
+#protector-solar{
+	width: 50%;
+	margin: 0px auto;
+	text-align: center;
+	background-color: #324875;
+	height: 60px;
+	padding-top: 19px;
+	color: white;
+	font-family: Open Sans;
+	font-size: 25px;
+	text-transform: uppercase;
+	font-weight: bold;
+
+}

index.php

@@ -63,10 +63,12 @@ header('Content-language: es');
         </ul>
     </div>
 </div>
+    <img alt="banner" id="banner" width="100%">
 
+	<div id="protector-solar">
+		<a href="protector.html">conoce la nueva lina de protección solar haciendo click acá</a>
+	</div>
 
-
-    <img alt="banner" id="banner" width="100%">
 	<div class="seccion" id="nosotros">
 	    <h1><span>NOSOTROS</span></h1>
 	    

protector.html

@@ -11,6 +11,11 @@
 	<script src="js/aplicacion.js"></script>
 	<script>
 		function load(){
+			var availableWidth = [ 1400, 1920];
+			var size=0; 
+			while (window.innerWidth > availableWidth[size] && size < availableWidth.length-1 ) 
+				size++;
+
 			var contact = document.querySelectorAll("#switcher div");
 			var datos = ["Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Acido Hialurónico, hidratante protector de la piel. Ayuda a prevenir intolerancias solares y daño celular provocado por la acción de rayos UV. Textura fluida, no grasa. Acabado imperceptible. <br/>Sin perfume. Sin parabenos, con color.",
 						 "Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Grosella, antioxidante protector de la piel. Ayuda a prevenir intolerancias solares y manchas pigmentarias foto-inducidas. Textura fluida, no grasa, acabado imperceptible. Sin perfume. Sin parabenos, con color",
@@ -60,6 +65,7 @@
 
 		var banner=document.getElementById("protector-slide");
 		var curImg=1;
+		banner.style.background="url('Images/protector/slide1-"+availableWidth[size]+".jpg') no-repeat bottom";
 
 		function slide() {
         	banner.className='transp';
@@ -68,16 +74,15 @@
         	if(curImg>4) curImg=1;
     	}
     	function transp() {
-			banner.style.background="url('Images/protector/slide"+curImg+".jpg') no-repeat bottom";
+			banner.style.background="url('Images/protector/slide"+curImg+"-"+availableWidth[size]+".jpg') no-repeat bottom";
     	    banner.removeAttribute('class');
     	}
-    	setInterval(slide, 3000);
+    	setInterval(slide, 7000);
 		}
 
 
 		window.addEventListener('load', load, false);
 
-
 	</script>
 </head>