ProVM/stand
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Falta responsive y boton para subir

Browse Source
This commit is contained in:
Aldarien
2021-01-04 01:06:50 -03:00
parent a212e7567e
commit a434feb0f0
13 changed files with 304 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/index.html
View File

@ -8,7 +8,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/styles/main.min.css" />
<link rel="icon" type="image/png" href="./assets/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="./assets/styles/main.min.css" />
</head>
<body>
<div id="backgrounds">
@ -124,7 +125,9 @@
</section>
<section id="construido" class="ui simple segment">
<div class="header">
CONSTRUIDOS EN IMPRESI&Oacute;N 3D
</div>
</section>
</div>
<div class="column2 column fondo-blanco">
@ -274,7 +277,15 @@
</section>
<section id="felices" class="ui simple segment">
<div class="header">
CLIENTES FELICES
</div>
<div class="testimonios">
<div class="testimonio"></div>
<div class="testimonio"></div>
<div class="testimonio"></div>
</div>
<div class="nav"></div>
</section>
<section id="formulario" class="ui simple segment">
@ -340,6 +351,17 @@
</section>
</div>
<div id="subir" class="ui fixed bottom segment">
<div class="ui container">
<a href="#backgrounds">
<i class="icons">
<i class="large circle outline icon"></i>
<i class="arrow up icon"></i>
</i>
</a>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js" integrity="sha512-1Nyd5H4Aad+OyvVfUOkO/jWPCrEvYIsQENdnVXt1+Jjc4NoJw28nyRdrpOCyFH4uvR3JmH/5WmfX1MJk2ZlhgQ==" crossorigin="anonymous"></script>

98
assets/js/main.js
View File

@ -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()
})

0
assets/sass/_main-phone.scss Normal file
View File

54
assets/sass/main.scss
View File

@ -85,6 +85,7 @@ $heights: (
background-size: rem(1600);
background-position: top center;
background-color: rgba(0, 0, 0, .4);
background-blend-mode: multiply;
}
.seccion1 {
height: (map.get($heights, "seccion1"))+rem;
@ -118,8 +119,7 @@ $heights: (
.construido {
height: (map.get($heights, "construido"))+rem;
//background-image: url('../images/fondo4.png');
background-color: rgb(100, 200, 255);
background-image: url('../images/fondo4.jpg');
}
.corporativos {
height: (map.get($heights, "corporativos"))+rem;
@ -130,8 +130,8 @@ $heights: (
height: (map.get($heights, "felices"))+rem;
background-image: linear-gradient($gris, $gris);
background-position: left 3rem;
background-size: 100% 5rem;
background-position: left rem(115);
background-size: 100% rem(118);
background-repeat: no-repeat;
}
.formulario {
@ -353,9 +353,12 @@ body {
#construido {
height: (map.get($heights, "construido"))+rem;
padding-top: rem(23) !important;
.column2 {
height: 100%;
.header {
font-size: font_size(22);
padding: rem(10) rem(43);
background-color: rgba(255, 255, 255, .6);
}
}
}
@ -597,6 +600,31 @@ body {
height: (map.get($heights, "felices"))+rem;
padding: 0 1rem !important;
padding-top: rem(60) !important;
.header {
//margin-top: rem(60);
font-size: font_size(22);
}
.testimonios {
margin-top: rem(25);
display: flex;
justify-content: space-between;
text-align: center;
.testimonio {
height: rem(80);
color: #666667;
margin-top: rem(20);
width: percentage(30/100);
text-align: center;
}
}
.nav {
display: block;
text-align: center;
color: #666667;
}
}
#formulario {
@ -751,3 +779,17 @@ body {
background-color: rgba(255, 255, 255, .5);
}
}
#subir {
width: 100%;
.container {
text-align: right;
padding: 0 1rem !important;
i.icons {
cursor: pointer;
}
}
}

BIN
public/assets/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

0
public/assets/images/depositphotos_264723580-stock-photo-3d-printer-prints-a-figure.jpg → public/assets/images/fondo4.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 137 KiB

98
public/assets/scripts/main.js
View File

@ -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()
})

2
public/assets/scripts/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/assets/scripts/maps/main.min.js.map
View File

File diff suppressed because one or more lines are too long

47
public/assets/styles/main.css
View File

@ -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;
@ -694,3 +720,14 @@ 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;
}

2
public/assets/styles/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/assets/styles/maps/main.min.css.map
View File

File diff suppressed because one or more lines are too long

2
public/index.html
View File

File diff suppressed because one or more lines are too long