Falta responsive y boton para subir

public/assets/scripts/main.js

@@ -1,10 +1,38 @@
-function resize() {
-  let p = 400 / 944
-  $('.container').each(function(i, el) {
-    let height = $(this).height
-    let width = $(this).width
+var proportionals = []
+var widths = []
+var heights = []
+var changeables = []
+function register_resizeables() {
+  proportionals.push($('img'))
+  //widths.push()
+  heights.push($('#backgrounds div'))
+  changeables.push($('.sticky'))
+}
 
-    $(this).width = height * p;
+const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+
+function mod_height(elem, p) {
+  elem.height = (elem.height * p)
+}
+function mod_width(elem, p) {
+  elem.width = (elem.width * p)
+}
+function mod_dim(elem, p) {
+  mod_width(elem, p)
+  mod_height(elem, p)
+}
+function resize() {
+  let p = 400 / 1080
+
+  $.each(proportionals, (i, el) => {
+    mod_dim(el, p)
+  })
+  $.each(widths, (i, el) => {
+    mod_width(el, p)
+  })
+  $.each(heights, (i, el) => {
+    mod_height(el, p)
   })
 }
 
@@ -216,11 +244,68 @@ let conversemos_form = {
   }
 }
 
+let testimonios = {
+  testimonios: [
+    "Este soporte que compré en @Stand-cl me cambió la vida, me sirve para el teléfono y el ipad, y ya no tengo que andar acomodando los aparatos en cualquier parte para las videollamadas",
+    "Siiii todo mi gusto.. me encantó lo completo que es. Gracias",
+    "Está super cool se ve de buena calidad",
+    "Llego el mío, y es excelente, estoy feliz con mi compra",
+    "Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida",
+    "Perfecto el producto, funciona impecable, muchas gracias",
+    "Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman",
+    "Hola! Quería decirte que me encantaron los soportes, Muy útiles!",
+    "Compré 3 y olvidé decirte que los encontré geniales! Me encantaron",
+    "Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
+  ],
+  elem: $('#felices .testimonios'),
+  page: 0,
+  setup: function() {
+    this.draw()
+  },
+  draw: function() {
+    var n = this.page * 3
+    this.elem.find('.testimonio').each((i, el) => {
+      if (n >= this.testimonios.length) {
+        $(el).html('')
+        return
+      }
+      $(el).html(this.testimonios[n])
+      n += 1
+    })
+    this.draw_nav()
+  },
+  draw_nav: function() {
+    let N = Math.ceil(this.testimonios.length / 3)
+    let k = this.page
+    let nav = this.elem.parent().find('.nav')
+    let tests = this
+    nav.html('')
+    for (var i = 0; i < N; i ++) {
+      var circle = $('<i></i>').attr('class', 'small circle outline icon').css('cursor', 'pointer').attr('data-page', i)
+      if (i == k) {
+        circle.removeClass('outline')
+      }
+      circle.click(function(e) {
+        tests.page = parseInt($(this).attr('data-page'))
+        tests.draw()
+      })
+      nav.append(circle)
+    }
+  }
+}
+
 $(document).ready(function() {
+  register_resizeables()
+
+  if (vw < 1080) {
+    resize()
+  }
+
   $('.menu.sticky').sticky()
   $('.column2 .sticky').sticky({
     context: '#column'
   })
+  $('#subir').sticky()
 
   $('.shopping.cart').innerText = 0
 
@@ -233,4 +318,5 @@ $(document).ready(function() {
   let cotiza_color = new Colors($('#corporativos .colores'))
   cotiza_form.setup()
   conversemos_form.setup()
+  testimonios.setup()
 })

public/assets/styles/main.css

@@ -52,6 +52,7 @@ input {
   background-size: 100rem;
   background-position: top center;
   background-color: rgba(0, 0, 0, 0.4);
+  background-blend-mode: multiply;
 }
 #backgrounds .seccion1 {
   height: 25rem;
@@ -79,7 +80,7 @@ input {
 }
 #backgrounds .construido {
   height: 21.875rem;
-  background-color: #64c8ff;
+  background-image: url("../images/fondo4.jpg");
 }
 #backgrounds .corporativos {
   height: 32.5rem;
@@ -88,8 +89,8 @@ input {
 #backgrounds .testimonios {
   height: 21.875rem;
   background-image: linear-gradient(#cccccc, #cccccc);
-  background-position: left 3rem;
-  background-size: 100% 5rem;
+  background-position: left 7.1875rem;
+  background-size: 100% 7.375rem;
   background-repeat: no-repeat;
 }
 #backgrounds .formulario {
@@ -268,9 +269,12 @@ body {
 }
 #content > .column1 #construido {
   height: 21.875rem;
+  padding-top: 1.4375rem !important;
 }
-#content > .column1 #construido .column2 {
-  height: 100%;
+#content > .column1 #construido .header {
+  font-size: 1.8333333333rem;
+  padding: 0.625rem 2.6875rem;
+  background-color: rgba(255, 255, 255, 0.6);
 }
 #content > .column2 {
   width: 33%;
@@ -561,6 +565,28 @@ body {
 #content #felices {
   height: 21.875rem;
   padding: 0 1rem !important;
+  padding-top: 3.75rem !important;
+}
+#content #felices .header {
+  font-size: 1.8333333333rem;
+}
+#content #felices .testimonios {
+  margin-top: 1.5625rem;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+}
+#content #felices .testimonios .testimonio {
+  height: 5rem;
+  color: #666667;
+  margin-top: 1.25rem;
+  width: 30%;
+  text-align: center;
+}
+#content #felices .nav {
+  display: block;
+  text-align: center;
+  color: #666667;
 }
 #content #formulario {
   height: 30rem;
@@ -693,4 +719,15 @@ body {
 }
 #content .fondo-blanco {
   background-color: rgba(255, 255, 255, 0.5);
+}
+
+#subir {
+  width: 100%;
+}
+#subir .container {
+  text-align: right;
+  padding: 0 1rem !important;
+}
+#subir .container i.icons {
+  cursor: pointer;
 }