Compare commits
4 Commits
57e13ccabb
...
features/g
| Author | SHA1 | Date | |
|---|---|---|---|
| dde8727363 | |||
| b7003db753 | |||
| a434feb0f0 | |||
| a212e7567e |
@ -8,7 +8,8 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="backgrounds">
|
<div id="backgrounds">
|
||||||
@ -62,12 +63,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="column1 column" id="column">
|
<div class="ui grid">
|
||||||
|
<div class="column1 twelve wide column" id="column">
|
||||||
<section id="seccion1" class="ui simple segment">
|
<section id="seccion1" class="ui simple segment">
|
||||||
<div class="image-container">
|
<div class="image-container">
|
||||||
<img src="./assets/images/tablet-front.png" />
|
<div class="ui grid">
|
||||||
<img src="./assets/images/tablet-back.png" />
|
<div class="ten wide column">
|
||||||
<img src="./assets/images/phone.png" />
|
<div class="ui medium images">
|
||||||
|
<img src="./assets/images/seccion11.png" />
|
||||||
|
<img src="./assets/images/seccion12.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="six wide column">
|
||||||
|
<div class="ui medium image">
|
||||||
|
<img src="./assets/images/seccion13.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="paragraph">
|
<div class="paragraph">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@ -79,7 +91,7 @@
|
|||||||
|
|
||||||
<section id="seccion2" class="ui simple segment">
|
<section id="seccion2" class="ui simple segment">
|
||||||
<div class="column1 column">
|
<div class="column1 column">
|
||||||
<img src="./assets/images/phone-pc.png" />
|
<img src="./assets/images/foto1.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="column2 column">
|
<div class="column2 column">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -94,10 +106,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<img src="./assets/images/ventajas1.png" />
|
<img src="./assets/images/foto2.jpg" />
|
||||||
<img src="./assets/images/ventajas2.png" />
|
<img src="./assets/images/foto3.jpg" />
|
||||||
<img src="./assets/images/ventajas3.png" />
|
<img src="./assets/images/foto1.jpg" />
|
||||||
<img src="./assets/images/ventajas4.png" />
|
<img src="./assets/images/foto2.jpg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -107,16 +119,29 @@
|
|||||||
<span class="bigger">DIMENSIONES</span> y colores
|
<span class="bigger">DIMENSIONES</span> y colores
|
||||||
</div>
|
</div>
|
||||||
<div class="images">
|
<div class="images">
|
||||||
|
<div class="column">
|
||||||
<img src="./assets/images/variedades.png" />
|
<img src="./assets/images/variedades.png" />
|
||||||
|
<div>
|
||||||
|
<img src="./assets/images/bandera.svg" />
|
||||||
|
DISEÑADO Y FABRICADO EN CHILE
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
<img src="./assets/images/dimensiones.svg" />
|
<img src="./assets/images/dimensiones.svg" />
|
||||||
|
<div>
|
||||||
|
Fabricado en plástico de origen vegetal sin derivados del petróleo
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="construido" class="ui simple segment">
|
<section id="construido" class="ui simple segment">
|
||||||
|
<div class="header">
|
||||||
CONSTRUIDOS EN IMPRESIÓN 3D
|
CONSTRUIDOS EN IMPRESIÓN 3D
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="column2 column fondo-blanco">
|
<div class="column2 four wide column fondo-blanco">
|
||||||
<div class="ui sticky">
|
<div class="ui sticky">
|
||||||
<form class="ui form" name="form-sticky">
|
<form class="ui form" name="form-sticky">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -128,6 +153,7 @@
|
|||||||
$ 5.990
|
$ 5.990
|
||||||
</div>
|
</div>
|
||||||
<div class="colores linea">
|
<div class="colores linea">
|
||||||
|
<input type="hidden" name="color" value="azul" />
|
||||||
<span class="text">COLOR</span>
|
<span class="text">COLOR</span>
|
||||||
<div class="white circle"></div>
|
<div class="white circle"></div>
|
||||||
<div class="black circle"></div>
|
<div class="black circle"></div>
|
||||||
@ -138,11 +164,15 @@
|
|||||||
<div class="red circle"></div>
|
<div class="red circle"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<button class="minus" type="button">-</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">+</button>
|
<button class="minus" type="button">
|
||||||
|
<i class="minus icon"></i>
|
||||||
|
</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
|
||||||
|
<i class="plus icon"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column2 column">
|
<div class="column2 column">
|
||||||
<img src="./assets/images/stand.png" />
|
<img src="./assets/images/azul.png" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -151,6 +181,7 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section id="corporativos" class="ui simple segment">
|
<section id="corporativos" class="ui simple segment">
|
||||||
<div class="column1 column">
|
<div class="column1 column">
|
||||||
@ -160,9 +191,10 @@
|
|||||||
<div class="opciones">
|
<div class="opciones">
|
||||||
<div class="opcion">
|
<div class="opcion">
|
||||||
<div class="img-grande">
|
<div class="img-grande">
|
||||||
<img src="./assets/images/logo_abajo.png" />
|
<img src="./assets/images/foto2.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="descripcion">
|
<div class="descripcion">
|
||||||
|
<div class="content">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
LOGO ABAJO
|
LOGO ABAJO
|
||||||
</div>
|
</div>
|
||||||
@ -170,17 +202,19 @@
|
|||||||
<li>Siempre visible</li>
|
<li>Siempre visible</li>
|
||||||
<li>Menor tamaño</li>
|
<li>Menor tamaño</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
<div class="images">
|
<div class="images">
|
||||||
<img src="./assets/images/logo_abajo1.png" />
|
<img src="./assets/images/foto3.jpg" />
|
||||||
<img src="./assets/images/logo_abajo2.png" />
|
<img src="./assets/images/foto1.jpg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="opcion">
|
<div class="opcion">
|
||||||
<div class="img-grande">
|
<div class="img-grande">
|
||||||
<img src="./assets/images/logo_arriba.png" />
|
<img src="./assets/images/foto3.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="descripcion">
|
<div class="descripcion">
|
||||||
|
<div class="content">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
LOGO ARRIBA
|
LOGO ARRIBA
|
||||||
</div>
|
</div>
|
||||||
@ -188,9 +222,10 @@
|
|||||||
<li>No se ve al apoyar el teléfono</li>
|
<li>No se ve al apoyar el teléfono</li>
|
||||||
<li>Mayor tamaño</li>
|
<li>Mayor tamaño</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
<div class="images">
|
<div class="images">
|
||||||
<img src="./assets/images/logo_arriba1.png" />
|
<img src="./assets/images/foto1.jpg" />
|
||||||
<img src="./assets/images/logo_arriba2.png" />
|
<img src="./assets/images/foto2.jpg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -198,11 +233,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="column2 column fondo-blanco">
|
<div class="column2 column fondo-blanco">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
COTIZA CON NOSOSTROS
|
COTIZA CON NOSOTROS
|
||||||
</div>
|
</div>
|
||||||
<form class="ui form">
|
<form class="ui form">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="colores linea">
|
<div class="colores linea">
|
||||||
|
<input type="hidden" name="color" value="azul" />
|
||||||
<span class="text">COLOR</span>
|
<span class="text">COLOR</span>
|
||||||
<div class="white circle"></div>
|
<div class="white circle"></div>
|
||||||
<div class="black circle"></div>
|
<div class="black circle"></div>
|
||||||
@ -213,12 +249,16 @@
|
|||||||
<div class="red circle"></div>
|
<div class="red circle"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input cantidad">
|
<div class="input cantidad">
|
||||||
<button class="minus" type="button">-</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">+</button>
|
<button class="minus" type="button">
|
||||||
|
<i class="minus icon"></i>
|
||||||
|
</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
|
||||||
|
<i class="plus icon"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
LOGO
|
|
||||||
<div class="input">
|
<div class="input">
|
||||||
|
LOGO
|
||||||
<input type="file" name="archivo" placeholder="Cargar archivo" />
|
<input type="file" name="archivo" placeholder="Cargar archivo" />
|
||||||
<div class="file">Cargar archivo</div>
|
<div class="file">Cargar archivo</div>
|
||||||
</div>
|
</div>
|
||||||
@ -240,16 +280,24 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<textarea name="mensaje" placeholder="MENSAJE">
|
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
|
||||||
</textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button class="ui button" type="submit">COTIZAR</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="felices" class="ui simple segment">
|
<section id="felices" class="ui simple segment">
|
||||||
|
<div class="header">
|
||||||
CLIENTES FELICES
|
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>
|
||||||
|
|
||||||
<section id="formulario" class="ui simple segment">
|
<section id="formulario" class="ui simple segment">
|
||||||
@ -318,5 +366,6 @@
|
|||||||
<!-- Scripts -->
|
<!-- 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/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>
|
<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>
|
||||||
|
<script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>
|
||||||
<script type="text/javascript" src="./assets/scripts/main.min.js"></script>
|
<script type="text/javascript" src="./assets/scripts/main.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,20 +1,322 @@
|
|||||||
function resize() {
|
var proportionals = []
|
||||||
let p = 400 / 944
|
var widths = []
|
||||||
$('.container').each(function(i, el) {
|
var heights = []
|
||||||
let height = $(this).height
|
var changeables = []
|
||||||
let width = $(this).width
|
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)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class Amount {
|
||||||
|
constructor(elem) {
|
||||||
|
this.elem = elem
|
||||||
|
this.minus = elem.parent().find('.minus')
|
||||||
|
this.plus = elem.parent().find('.plus')
|
||||||
|
this.n = 0
|
||||||
|
this.setup()
|
||||||
|
this.max = 999
|
||||||
|
}
|
||||||
|
setup() {
|
||||||
|
this.elem.val(0)
|
||||||
|
this.plus.click((e) => {
|
||||||
|
this.increment()
|
||||||
|
this.print()
|
||||||
|
})
|
||||||
|
this.minus.click((e) => {
|
||||||
|
this.decrement()
|
||||||
|
this.print()
|
||||||
|
})
|
||||||
|
this.elem.change((e) => {
|
||||||
|
this.n = parseInt(this.elem.val())
|
||||||
|
this.print()
|
||||||
|
})
|
||||||
|
this.print()
|
||||||
|
}
|
||||||
|
enable_button(name) {
|
||||||
|
this[name].removeClass('disabled')
|
||||||
|
if (name == 'plus') {
|
||||||
|
this[name].html('<i class="plus icon"></i>')
|
||||||
|
}
|
||||||
|
if (name == 'minus') {
|
||||||
|
this[name].html('<i class="minus icon"></i>')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
disable_button(name) {
|
||||||
|
this[name].addClass('disabled')
|
||||||
|
this[name].html('')
|
||||||
|
}
|
||||||
|
check_limits() {
|
||||||
|
this.enable_button('plus')
|
||||||
|
this.enable_button('minus')
|
||||||
|
if (this.n > this.max) {
|
||||||
|
this.n = this.max
|
||||||
|
}
|
||||||
|
if (this.n == this.max) {
|
||||||
|
this.disable_button('plus')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.n < 0) {
|
||||||
|
this.n = 0
|
||||||
|
}
|
||||||
|
if (this.n == 0) {
|
||||||
|
this.disable_button('minus')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
increment() {
|
||||||
|
this.n += 1
|
||||||
|
}
|
||||||
|
decrement() {
|
||||||
|
this.n -= 1
|
||||||
|
}
|
||||||
|
get value() {
|
||||||
|
return this.n
|
||||||
|
}
|
||||||
|
print() {
|
||||||
|
this.check_limits()
|
||||||
|
this.elem.val(this.n)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Colors {
|
||||||
|
constructor(elem, changing = false) {
|
||||||
|
this.color = {
|
||||||
|
white: 'blanco',
|
||||||
|
black: 'negro',
|
||||||
|
blue: 'azul',
|
||||||
|
green: 'verde',
|
||||||
|
yellow: 'amarillo',
|
||||||
|
orange: 'naranjo',
|
||||||
|
red: 'rojo'
|
||||||
|
}
|
||||||
|
this.picked = 'blue'
|
||||||
|
this.elem = elem
|
||||||
|
this.input = elem.find('input[name="color"]')
|
||||||
|
this.changing = null
|
||||||
|
if (changing) {
|
||||||
|
this.changing = elem.parent().parent().find('.column2 img')
|
||||||
|
}
|
||||||
|
this.setup()
|
||||||
|
}
|
||||||
|
setup() {
|
||||||
|
this.elem.find('.circle').each((i, el) => {
|
||||||
|
$(el).click((e) => {
|
||||||
|
let color = $(el).attr('class').split(' ')[0]
|
||||||
|
this.change_color(color)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.change_color('blue')
|
||||||
|
}
|
||||||
|
default_color_format(el) {
|
||||||
|
$(el).removeClass('selected')
|
||||||
|
}
|
||||||
|
change_color(color) {
|
||||||
|
this.picked = this.color[color]
|
||||||
|
this.input.val(this.picked)
|
||||||
|
this.elem.find('.circle').each((i, el) => {
|
||||||
|
this.default_color_format(el)
|
||||||
|
})
|
||||||
|
this.elem.find('.' + color + '.circle').addClass('selected')
|
||||||
|
if (this.changing != null) {
|
||||||
|
this.changing.attr('src', './assets/images/' + this.picked + '.png')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let smtp = {
|
||||||
|
Host: 'smtp.google.com',
|
||||||
|
Username: 'rsalinas85@gmail.com',
|
||||||
|
Password: 'salinas1234',
|
||||||
|
From: 'ventas@3dstand.cl'
|
||||||
|
}
|
||||||
|
|
||||||
|
let sticky_form = {
|
||||||
|
elem: $('.sticky form'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.submit((e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
this.submit()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submit: function() {
|
||||||
|
console.debug('submit sticky')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let cotiza_form = {
|
||||||
|
elem: $('#corporativos form'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.submit((e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
this.submit()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
this.file = this.elem.find('input[type="file"]')
|
||||||
|
this.elem.find('.file').click((e) => {
|
||||||
|
this.file.trigger('click')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submit: function() {
|
||||||
|
let email = this.elem.find('[name="email"]').val()
|
||||||
|
let data = new FormData(this.elem[0])
|
||||||
|
let body = [
|
||||||
|
'Nombre: ' + this.elem.find('[name="nombre"]').val(),
|
||||||
|
'E-mail: ' + email,
|
||||||
|
'Teléfono: ' + this.elem.find('[name="telefono"]').val(),
|
||||||
|
'',
|
||||||
|
'Color: ' + this.elem.find('[name="color"]').val(),
|
||||||
|
'Cantidad: ' + this.elem.find('[name="cantidad"]').val(),
|
||||||
|
this.elem.find('[name="mensaje"]').val()
|
||||||
|
]
|
||||||
|
let content = {
|
||||||
|
Host: smtp.Host,
|
||||||
|
Username: smtp.Username,
|
||||||
|
Password: smtp.Password,
|
||||||
|
To: email,
|
||||||
|
From: smtp.From,
|
||||||
|
Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
|
Body: body.join('<br />'),
|
||||||
|
Attachments: [
|
||||||
|
{
|
||||||
|
name: "Logo",
|
||||||
|
data: data.get('archivo')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
console.debug(email)
|
||||||
|
//Email.send()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let conversemos_form = {
|
||||||
|
elem: $('#contacto'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.submit((e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
this.submit()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submit: function() {
|
||||||
|
let email = this.elem.find('[name="email"]').val()
|
||||||
|
let body = [
|
||||||
|
'Nombre: ' + this.elem.find('[name="nombre"]').val(),
|
||||||
|
'E-mail: ' + email,
|
||||||
|
'',
|
||||||
|
this.elem.find('[name="mensaje"]').val()
|
||||||
|
]
|
||||||
|
let content = {
|
||||||
|
Host: smtp.Host,
|
||||||
|
Username: smtp.Username,
|
||||||
|
Password: smtp.Password,
|
||||||
|
From: smtp.From,
|
||||||
|
To: email,
|
||||||
|
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
|
Body: body.join('<br />')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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() {
|
$(document).ready(function() {
|
||||||
|
register_resizeables()
|
||||||
|
|
||||||
|
if (vw < 1080) {
|
||||||
|
resize()
|
||||||
|
}
|
||||||
|
|
||||||
$('.menu.sticky').sticky()
|
$('.menu.sticky').sticky()
|
||||||
$('.column2 .sticky').sticky({
|
$('.column2 .sticky').sticky({
|
||||||
context: '#column'
|
context: '#column'
|
||||||
})
|
})
|
||||||
|
$('#subir').sticky()
|
||||||
|
|
||||||
$('.shopping.cart').innerText = 0
|
$('.shopping.cart').innerText = 0
|
||||||
|
|
||||||
//window.onresize = resize;
|
window.onresize = resize;
|
||||||
|
|
||||||
|
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||||
|
let sticky_color = new Colors($('.sticky .colores'), true)
|
||||||
|
sticky_form.setup()
|
||||||
|
let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
|
||||||
|
let cotiza_color = new Colors($('#corporativos .colores'))
|
||||||
|
cotiza_form.setup()
|
||||||
|
conversemos_form.setup()
|
||||||
|
testimonios.setup()
|
||||||
})
|
})
|
||||||
|
|||||||
0
assets/sass/_main-phone.scss
Normal file
0
assets/sass/_main-phone.scss
Normal file
@ -15,9 +15,52 @@ $html-font-size: 16px;
|
|||||||
$gris: rgb(204, 204, 204);
|
$gris: rgb(204, 204, 204);
|
||||||
$gris-texto: rgb(51, 51, 51);
|
$gris-texto: rgb(51, 51, 51);
|
||||||
|
|
||||||
body {
|
@mixin colors {
|
||||||
font-family: Roboto, sans;
|
.colores {
|
||||||
color: $gris-texto;
|
vertical-align: center;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-right: rem(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.white {
|
||||||
|
border: thin solid rgb(0, 0, 0);
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
.black {
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: rgb(0, 0, 255);
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
background-color: rgb(0, 255, 0);
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
background-color: rgb(255, 255, 0);
|
||||||
|
}
|
||||||
|
.orange {
|
||||||
|
background-color: rgb(255, 130, 0);
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
background-color: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
|
.circle {
|
||||||
|
display: inline-block;
|
||||||
|
$a: 12;
|
||||||
|
width: rem($a);
|
||||||
|
height: rem($a);
|
||||||
|
border-radius: 8000px;
|
||||||
|
margin: auto rem(1);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
width: rem($a + 2);
|
||||||
|
height: rem($a + 2);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$full_width: 1080;
|
$full_width: 1080;
|
||||||
@ -28,7 +71,7 @@ $heights: (
|
|||||||
"seccion2": 27.5,
|
"seccion2": 27.5,
|
||||||
"dimensiones": 27.5,
|
"dimensiones": 27.5,
|
||||||
"construido": 21.875,
|
"construido": 21.875,
|
||||||
"corporativos": 25,
|
"corporativos": (520/16),
|
||||||
"felices": 21.875,
|
"felices": 21.875,
|
||||||
"formulario": 30
|
"formulario": 30
|
||||||
);
|
);
|
||||||
@ -42,6 +85,7 @@ $heights: (
|
|||||||
background-size: rem(1600);
|
background-size: rem(1600);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-color: rgba(0, 0, 0, .4);
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
background-blend-mode: multiply;
|
||||||
}
|
}
|
||||||
.seccion1 {
|
.seccion1 {
|
||||||
height: (map.get($heights, "seccion1"))+rem;
|
height: (map.get($heights, "seccion1"))+rem;
|
||||||
@ -75,8 +119,7 @@ $heights: (
|
|||||||
.construido {
|
.construido {
|
||||||
height: (map.get($heights, "construido"))+rem;
|
height: (map.get($heights, "construido"))+rem;
|
||||||
|
|
||||||
//background-image: url('../images/fondo4.png');
|
background-image: url('../images/fondo4.jpg');
|
||||||
background-color: rgb(100, 200, 255);
|
|
||||||
}
|
}
|
||||||
.corporativos {
|
.corporativos {
|
||||||
height: (map.get($heights, "corporativos"))+rem;
|
height: (map.get($heights, "corporativos"))+rem;
|
||||||
@ -87,8 +130,8 @@ $heights: (
|
|||||||
height: (map.get($heights, "felices"))+rem;
|
height: (map.get($heights, "felices"))+rem;
|
||||||
|
|
||||||
background-image: linear-gradient($gris, $gris);
|
background-image: linear-gradient($gris, $gris);
|
||||||
background-position: left 3rem;
|
background-position: left rem(115);
|
||||||
background-size: 100% 5rem;
|
background-size: 100% rem(118);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
.formulario {
|
.formulario {
|
||||||
@ -110,6 +153,12 @@ $column_height1: 0;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: ($content_height)+rem;
|
||||||
|
font-family: Roboto, sans;
|
||||||
|
color: $gris-texto;
|
||||||
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
max-width: rem($full_width) !important;
|
max-width: rem($full_width) !important;
|
||||||
height: ($content_height)+rem;
|
height: ($content_height)+rem;
|
||||||
@ -176,7 +225,7 @@ $column_height1: 0;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&>.column {
|
/*&>.column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
@ -186,9 +235,9 @@ $column_height1: 0;
|
|||||||
&::after {
|
&::after {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
&>.column1 {
|
&>.grid>.column1 {
|
||||||
width: percentage($column1/100);
|
//width: percentage($column1/100);
|
||||||
|
|
||||||
|
|
||||||
#seccion1 {
|
#seccion1 {
|
||||||
@ -196,15 +245,15 @@ $column_height1: 0;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.image-container {
|
.image-container {
|
||||||
display: flex;
|
/*display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;*/
|
||||||
height: rem(112+128);
|
height: rem(112+128);
|
||||||
|
|
||||||
img {
|
/*img {
|
||||||
height: rem(155);
|
height: rem(155);
|
||||||
width: rem(188);
|
width: rem(188);
|
||||||
margin-top: rem(85);
|
margin-top: rem(85);
|
||||||
}
|
}*/
|
||||||
}
|
}
|
||||||
.paragraph {
|
.paragraph {
|
||||||
padding-top: rem(28);
|
padding-top: rem(28);
|
||||||
@ -286,24 +335,35 @@ $column_height1: 0;
|
|||||||
.images {
|
.images {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
img {
|
.column {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
|
&>img {
|
||||||
width: rem(313);
|
width: rem(313);
|
||||||
height: rem(235);
|
height: rem(235);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: rem(313);
|
||||||
|
margin-top: rem(25);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#construido {
|
#construido {
|
||||||
height: (map.get($heights, "construido"))+rem;
|
height: (map.get($heights, "construido"))+rem;
|
||||||
|
padding-top: rem(23) !important;
|
||||||
|
|
||||||
.column2 {
|
.header {
|
||||||
height: 100%;
|
font-size: font_size(22);
|
||||||
|
padding: rem(10) rem(43);
|
||||||
|
background-color: rgba(255, 255, 255, .6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&>.column2 {
|
&>.grid>.column2 {
|
||||||
width: percentage($column2/100);
|
//width: percentage($column2/100);
|
||||||
height: ($column_height1)+rem;
|
height: ($column_height1)+rem;
|
||||||
|
|
||||||
.sticky {
|
.sticky {
|
||||||
@ -340,45 +400,7 @@ $column_height1: 0;
|
|||||||
}
|
}
|
||||||
font-size: font_size(14);
|
font-size: font_size(14);
|
||||||
|
|
||||||
.colores {
|
@include colors;
|
||||||
vertical-align: center;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
margin-right: rem(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.white {
|
|
||||||
border: thin solid rgb(0, 0, 0);
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
.black {
|
|
||||||
background-color: rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
background-color: rgb(0, 0, 255);
|
|
||||||
}
|
|
||||||
.green {
|
|
||||||
background-color: rgb(0, 255, 0);
|
|
||||||
}
|
|
||||||
.yellow {
|
|
||||||
background-color: rgb(255, 255, 0);
|
|
||||||
}
|
|
||||||
.orange {
|
|
||||||
background-color: rgb(255, 130, 0);
|
|
||||||
}
|
|
||||||
.red {
|
|
||||||
background-color: rgb(255, 0, 0);
|
|
||||||
}
|
|
||||||
.circle {
|
|
||||||
display: inline-block;
|
|
||||||
$a: 12;
|
|
||||||
width: rem($a);
|
|
||||||
height: rem($a);
|
|
||||||
border-radius: 8000px;
|
|
||||||
margin: auto rem(1);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input {
|
.input {
|
||||||
width: 4.5rem;
|
width: 4.5rem;
|
||||||
border: thin solid rgb(0, 0, 0);
|
border: thin solid rgb(0, 0, 0);
|
||||||
@ -393,6 +415,7 @@ $column_height1: 0;
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
@ -426,7 +449,7 @@ $column_height1: 0;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: (map.get($heights, "corporativos"))+rem;
|
height: (map.get($heights, "corporativos"))+rem;
|
||||||
|
|
||||||
margin-top: ($column_height1)+rem !important;
|
//margin-top: ($column_height1)+rem !important;
|
||||||
|
|
||||||
&>.column {
|
&>.column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -443,9 +466,10 @@ $column_height1: 0;
|
|||||||
width: percentage(67/100);
|
width: percentage(67/100);
|
||||||
|
|
||||||
&>.header {
|
&>.header {
|
||||||
padding: rem(37) 0 !important;
|
margin-top: rem(67);
|
||||||
|
margin-bottom: rem(37);
|
||||||
.bigger {
|
.bigger {
|
||||||
font-size: font_size(16);
|
font-size: rem(26);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.opciones {
|
.opciones {
|
||||||
@ -465,12 +489,23 @@ $column_height1: 0;
|
|||||||
}
|
}
|
||||||
.descripcion {
|
.descripcion {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
height: rem(200);
|
||||||
|
padding-top: rem(20);
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: block;
|
||||||
|
.header {
|
||||||
|
font-size: font_size(14);
|
||||||
|
margin-bottom: rem(10);
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: disc inside;
|
list-style: disc inside;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.images {
|
.images {
|
||||||
|
margin-top: rem(34);
|
||||||
img {
|
img {
|
||||||
width: rem(70);
|
width: rem(70);
|
||||||
height: rem(85);
|
height: rem(85);
|
||||||
@ -484,45 +519,20 @@ $column_height1: 0;
|
|||||||
width: percentage(33/100);
|
width: percentage(33/100);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: rem(46);
|
||||||
|
margin-bottom: rem(24);
|
||||||
|
font-size: rem(26);
|
||||||
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
.colores {
|
@include colors;
|
||||||
vertical-align: center;
|
|
||||||
|
|
||||||
.text {
|
.row {
|
||||||
margin-right: rem(3);
|
margin-bottom: rem(9);
|
||||||
}
|
|
||||||
|
|
||||||
.white {
|
|
||||||
border: thin solid rgb(0, 0, 0);
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
.black {
|
|
||||||
background-color: rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
background-color: rgb(0, 0, 255);
|
|
||||||
}
|
|
||||||
.green {
|
|
||||||
background-color: rgb(0, 255, 0);
|
|
||||||
}
|
|
||||||
.yellow {
|
|
||||||
background-color: rgb(255, 255, 0);
|
|
||||||
}
|
|
||||||
.orange {
|
|
||||||
background-color: rgb(255, 130, 0);
|
|
||||||
}
|
|
||||||
.red {
|
|
||||||
background-color: rgb(255, 0, 0);
|
|
||||||
}
|
|
||||||
.circle {
|
|
||||||
display: inline-block;
|
|
||||||
$a: 12;
|
|
||||||
width: rem($a);
|
|
||||||
height: rem($a);
|
|
||||||
border-radius: 8000px;
|
|
||||||
margin: auto rem(1);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
.colores.linea {
|
||||||
|
margin-bottom: rem(25-9);
|
||||||
}
|
}
|
||||||
.input.cantidad {
|
.input.cantidad {
|
||||||
width: 4.5rem;
|
width: 4.5rem;
|
||||||
@ -551,9 +561,35 @@ $column_height1: 0;
|
|||||||
.input [type="file"] {
|
.input [type="file"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.input .file {
|
||||||
|
display: inline-block;
|
||||||
|
height: rem(20*12/10);
|
||||||
|
width: rem(150);
|
||||||
|
padding-top: rem(3);
|
||||||
|
background-color: #cccccb;
|
||||||
|
border: thin solid #333;
|
||||||
|
font-size: font_size(10);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.input [type="text"] {
|
.input [type="text"] {
|
||||||
height: rem(18);
|
height: rem(18);
|
||||||
background-color: rgba(255, 255, 255, .5);
|
background-color: rgba(255, 255, 255);
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
height: rem(72);
|
||||||
|
background-color: rgba(255, 255, 255);
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin-bottom: rem(25-9);
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #666667;
|
||||||
|
color: white;
|
||||||
|
border: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -564,6 +600,31 @@ $column_height1: 0;
|
|||||||
height: (map.get($heights, "felices"))+rem;
|
height: (map.get($heights, "felices"))+rem;
|
||||||
|
|
||||||
padding: 0 1rem !important;
|
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 {
|
#formulario {
|
||||||
@ -629,8 +690,8 @@ $column_height1: 0;
|
|||||||
margin-top: rem(27);
|
margin-top: rem(27);
|
||||||
|
|
||||||
&>img {
|
&>img {
|
||||||
width: rem(434);
|
width: rem(540);
|
||||||
height: rem(280);
|
height: rem(350);
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -718,3 +779,17 @@ $column_height1: 0;
|
|||||||
background-color: rgba(255, 255, 255, .5);
|
background-color: rgba(255, 255, 255, .5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#subir {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: right;
|
||||||
|
padding: 0 1rem !important;
|
||||||
|
|
||||||
|
i.icons {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@ -16,7 +16,9 @@ function js(done) {
|
|||||||
.pipe(concat('main.js'))
|
.pipe(concat('main.js'))
|
||||||
.pipe(dest(path.join(output_dir, 'scripts')))
|
.pipe(dest(path.join(output_dir, 'scripts')))
|
||||||
.pipe(sourcemaps.init({loadMaps: true}))
|
.pipe(sourcemaps.init({loadMaps: true}))
|
||||||
.pipe(babel())
|
.pipe(babel({
|
||||||
|
presets: ['@babel/preset-env']
|
||||||
|
}))
|
||||||
.pipe(uglify())
|
.pipe(uglify())
|
||||||
.pipe(rename('main.min.js'))
|
.pipe(rename('main.min.js'))
|
||||||
.pipe(sourcemaps.write('./maps'))
|
.pipe(sourcemaps.write('./maps'))
|
||||||
|
|||||||
@ -18,6 +18,8 @@
|
|||||||
"author": "Aldarien",
|
"author": "Aldarien",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.10",
|
||||||
|
"@babel/preset-env": "^7.12.11",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-babel": "^8.0.0",
|
"gulp-babel": "^8.0.0",
|
||||||
"gulp-concat": "^2.6.1",
|
"gulp-concat": "^2.6.1",
|
||||||
|
|||||||
BIN
public/assets/images/azul.png
Normal file
BIN
public/assets/images/azul.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
15
public/assets/images/bandera.svg
Normal file
15
public/assets/images/bandera.svg
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="22.742px" height="14.125px" viewBox="0 0 22.742 14.125" enable-background="new 0 0 22.742 14.125" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<rect fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="22.742" height="14.125"/>
|
||||||
|
<rect y="7.063" fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="22.742" height="7.062"/>
|
||||||
|
<rect fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" width="8.306" height="7.063"/>
|
||||||
|
<polygon fill="none" stroke="#333333" stroke-width="0.5" stroke-miterlimit="10" points="4.152,4.318 3.243,4.797 3.417,3.783
|
||||||
|
2.681,3.066 3.698,2.918 4.152,1.996 4.607,2.918 5.625,3.066 4.889,3.783 5.063,4.797 "/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/assets/images/conversemos.png
Normal file
BIN
public/assets/images/conversemos.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
public/assets/images/favicon.png
Normal file
BIN
public/assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/assets/images/fondo4.jpg
Normal file
BIN
public/assets/images/fondo4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
public/assets/images/foto1.jpg
Normal file
BIN
public/assets/images/foto1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
public/assets/images/foto2.jpg
Normal file
BIN
public/assets/images/foto2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
public/assets/images/foto3.jpg
Normal file
BIN
public/assets/images/foto3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
BIN
public/assets/images/foto4.jpg
Normal file
BIN
public/assets/images/foto4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
public/assets/images/seccion11.png
Normal file
BIN
public/assets/images/seccion11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
public/assets/images/seccion12.png
Normal file
BIN
public/assets/images/seccion12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 MiB |
BIN
public/assets/images/seccion13.png
Normal file
BIN
public/assets/images/seccion13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 MiB |
BIN
public/assets/images/variedades.png
Normal file
BIN
public/assets/images/variedades.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 MiB |
@ -1,20 +1,322 @@
|
|||||||
function resize() {
|
var proportionals = []
|
||||||
let p = 400 / 944
|
var widths = []
|
||||||
$('.container').each(function(i, el) {
|
var heights = []
|
||||||
let height = $(this).height
|
var changeables = []
|
||||||
let width = $(this).width
|
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)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class Amount {
|
||||||
|
constructor(elem) {
|
||||||
|
this.elem = elem
|
||||||
|
this.minus = elem.parent().find('.minus')
|
||||||
|
this.plus = elem.parent().find('.plus')
|
||||||
|
this.n = 0
|
||||||
|
this.setup()
|
||||||
|
this.max = 999
|
||||||
|
}
|
||||||
|
setup() {
|
||||||
|
this.elem.val(0)
|
||||||
|
this.plus.click((e) => {
|
||||||
|
this.increment()
|
||||||
|
this.print()
|
||||||
|
})
|
||||||
|
this.minus.click((e) => {
|
||||||
|
this.decrement()
|
||||||
|
this.print()
|
||||||
|
})
|
||||||
|
this.elem.change((e) => {
|
||||||
|
this.n = parseInt(this.elem.val())
|
||||||
|
this.print()
|
||||||
|
})
|
||||||
|
this.print()
|
||||||
|
}
|
||||||
|
enable_button(name) {
|
||||||
|
this[name].removeClass('disabled')
|
||||||
|
if (name == 'plus') {
|
||||||
|
this[name].html('<i class="plus icon"></i>')
|
||||||
|
}
|
||||||
|
if (name == 'minus') {
|
||||||
|
this[name].html('<i class="minus icon"></i>')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
disable_button(name) {
|
||||||
|
this[name].addClass('disabled')
|
||||||
|
this[name].html('')
|
||||||
|
}
|
||||||
|
check_limits() {
|
||||||
|
this.enable_button('plus')
|
||||||
|
this.enable_button('minus')
|
||||||
|
if (this.n > this.max) {
|
||||||
|
this.n = this.max
|
||||||
|
}
|
||||||
|
if (this.n == this.max) {
|
||||||
|
this.disable_button('plus')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.n < 0) {
|
||||||
|
this.n = 0
|
||||||
|
}
|
||||||
|
if (this.n == 0) {
|
||||||
|
this.disable_button('minus')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
increment() {
|
||||||
|
this.n += 1
|
||||||
|
}
|
||||||
|
decrement() {
|
||||||
|
this.n -= 1
|
||||||
|
}
|
||||||
|
get value() {
|
||||||
|
return this.n
|
||||||
|
}
|
||||||
|
print() {
|
||||||
|
this.check_limits()
|
||||||
|
this.elem.val(this.n)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Colors {
|
||||||
|
constructor(elem, changing = false) {
|
||||||
|
this.color = {
|
||||||
|
white: 'blanco',
|
||||||
|
black: 'negro',
|
||||||
|
blue: 'azul',
|
||||||
|
green: 'verde',
|
||||||
|
yellow: 'amarillo',
|
||||||
|
orange: 'naranjo',
|
||||||
|
red: 'rojo'
|
||||||
|
}
|
||||||
|
this.picked = 'blue'
|
||||||
|
this.elem = elem
|
||||||
|
this.input = elem.find('input[name="color"]')
|
||||||
|
this.changing = null
|
||||||
|
if (changing) {
|
||||||
|
this.changing = elem.parent().parent().find('.column2 img')
|
||||||
|
}
|
||||||
|
this.setup()
|
||||||
|
}
|
||||||
|
setup() {
|
||||||
|
this.elem.find('.circle').each((i, el) => {
|
||||||
|
$(el).click((e) => {
|
||||||
|
let color = $(el).attr('class').split(' ')[0]
|
||||||
|
this.change_color(color)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.change_color('blue')
|
||||||
|
}
|
||||||
|
default_color_format(el) {
|
||||||
|
$(el).removeClass('selected')
|
||||||
|
}
|
||||||
|
change_color(color) {
|
||||||
|
this.picked = this.color[color]
|
||||||
|
this.input.val(this.picked)
|
||||||
|
this.elem.find('.circle').each((i, el) => {
|
||||||
|
this.default_color_format(el)
|
||||||
|
})
|
||||||
|
this.elem.find('.' + color + '.circle').addClass('selected')
|
||||||
|
if (this.changing != null) {
|
||||||
|
this.changing.attr('src', './assets/images/' + this.picked + '.png')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let smtp = {
|
||||||
|
Host: 'smtp.google.com',
|
||||||
|
Username: 'rsalinas85@gmail.com',
|
||||||
|
Password: 'salinas1234',
|
||||||
|
From: 'ventas@3dstand.cl'
|
||||||
|
}
|
||||||
|
|
||||||
|
let sticky_form = {
|
||||||
|
elem: $('.sticky form'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.submit((e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
this.submit()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submit: function() {
|
||||||
|
console.debug('submit sticky')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let cotiza_form = {
|
||||||
|
elem: $('#corporativos form'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.submit((e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
this.submit()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
this.file = this.elem.find('input[type="file"]')
|
||||||
|
this.elem.find('.file').click((e) => {
|
||||||
|
this.file.trigger('click')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submit: function() {
|
||||||
|
let email = this.elem.find('[name="email"]').val()
|
||||||
|
let data = new FormData(this.elem[0])
|
||||||
|
let body = [
|
||||||
|
'Nombre: ' + this.elem.find('[name="nombre"]').val(),
|
||||||
|
'E-mail: ' + email,
|
||||||
|
'Teléfono: ' + this.elem.find('[name="telefono"]').val(),
|
||||||
|
'',
|
||||||
|
'Color: ' + this.elem.find('[name="color"]').val(),
|
||||||
|
'Cantidad: ' + this.elem.find('[name="cantidad"]').val(),
|
||||||
|
this.elem.find('[name="mensaje"]').val()
|
||||||
|
]
|
||||||
|
let content = {
|
||||||
|
Host: smtp.Host,
|
||||||
|
Username: smtp.Username,
|
||||||
|
Password: smtp.Password,
|
||||||
|
To: email,
|
||||||
|
From: smtp.From,
|
||||||
|
Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
|
Body: body.join('<br />'),
|
||||||
|
Attachments: [
|
||||||
|
{
|
||||||
|
name: "Logo",
|
||||||
|
data: data.get('archivo')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
console.debug(email)
|
||||||
|
//Email.send()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let conversemos_form = {
|
||||||
|
elem: $('#contacto'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.submit((e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
this.submit()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
submit: function() {
|
||||||
|
let email = this.elem.find('[name="email"]').val()
|
||||||
|
let body = [
|
||||||
|
'Nombre: ' + this.elem.find('[name="nombre"]').val(),
|
||||||
|
'E-mail: ' + email,
|
||||||
|
'',
|
||||||
|
this.elem.find('[name="mensaje"]').val()
|
||||||
|
]
|
||||||
|
let content = {
|
||||||
|
Host: smtp.Host,
|
||||||
|
Username: smtp.Username,
|
||||||
|
Password: smtp.Password,
|
||||||
|
From: smtp.From,
|
||||||
|
To: email,
|
||||||
|
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
|
Body: body.join('<br />')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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() {
|
$(document).ready(function() {
|
||||||
|
register_resizeables()
|
||||||
|
|
||||||
|
if (vw < 1080) {
|
||||||
|
resize()
|
||||||
|
}
|
||||||
|
|
||||||
$('.menu.sticky').sticky()
|
$('.menu.sticky').sticky()
|
||||||
$('.column2 .sticky').sticky({
|
$('.column2 .sticky').sticky({
|
||||||
context: '#column'
|
context: '#column'
|
||||||
})
|
})
|
||||||
|
$('#subir').sticky()
|
||||||
|
|
||||||
$('.shopping.cart').innerText = 0
|
$('.shopping.cart').innerText = 0
|
||||||
|
|
||||||
//window.onresize = resize;
|
window.onresize = resize;
|
||||||
|
|
||||||
|
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||||
|
let sticky_color = new Colors($('.sticky .colores'), true)
|
||||||
|
sticky_form.setup()
|
||||||
|
let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
|
||||||
|
let cotiza_color = new Colors($('#corporativos .colores'))
|
||||||
|
cotiza_form.setup()
|
||||||
|
conversemos_form.setup()
|
||||||
|
testimonios.setup()
|
||||||
})
|
})
|
||||||
|
|||||||
2
public/assets/scripts/main.min.js
vendored
2
public/assets/scripts/main.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -45,11 +45,6 @@ input {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: Roboto, sans;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#backgrounds .cabezal {
|
#backgrounds .cabezal {
|
||||||
height: 25rem;
|
height: 25rem;
|
||||||
background-image: url("../images/banner.jpg");
|
background-image: url("../images/banner.jpg");
|
||||||
@ -57,6 +52,7 @@ body {
|
|||||||
background-size: 100rem;
|
background-size: 100rem;
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
background-blend-mode: multiply;
|
||||||
}
|
}
|
||||||
#backgrounds .seccion1 {
|
#backgrounds .seccion1 {
|
||||||
height: 25rem;
|
height: 25rem;
|
||||||
@ -84,17 +80,17 @@ body {
|
|||||||
}
|
}
|
||||||
#backgrounds .construido {
|
#backgrounds .construido {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
background-color: #64c8ff;
|
background-image: url("../images/fondo4.jpg");
|
||||||
}
|
}
|
||||||
#backgrounds .corporativos {
|
#backgrounds .corporativos {
|
||||||
height: 25rem;
|
height: 32.5rem;
|
||||||
background-image: url("../images/fondo5.png");
|
background-image: url("../images/fondo5.png");
|
||||||
}
|
}
|
||||||
#backgrounds .testimonios {
|
#backgrounds .testimonios {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
background-image: linear-gradient(#cccccc, #cccccc);
|
background-image: linear-gradient(#cccccc, #cccccc);
|
||||||
background-position: left 3rem;
|
background-position: left 7.1875rem;
|
||||||
background-size: 100% 5rem;
|
background-size: 100% 7.375rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
#backgrounds .formulario {
|
#backgrounds .formulario {
|
||||||
@ -103,11 +99,28 @@ body {
|
|||||||
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 211.25rem;
|
||||||
|
font-family: Roboto, sans;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
max-width: 67.5rem !important;
|
max-width: 67.5rem !important;
|
||||||
height: 203.75rem;
|
height: 211.25rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -203.75rem;
|
top: -211.25rem;
|
||||||
|
/*&>.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
}
|
}
|
||||||
#content #header {
|
#content #header {
|
||||||
color: white;
|
color: white;
|
||||||
@ -159,63 +172,51 @@ body {
|
|||||||
#content #header .logo .frase2 {
|
#content #header .logo .frase2 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
#content > .column {
|
#content > .grid > .column1 #seccion1 {
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
padding-left: 1rem !important;
|
|
||||||
padding-right: 1rem !important;
|
|
||||||
}
|
|
||||||
#content > .column::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
#content > .column1 {
|
|
||||||
width: 67%;
|
|
||||||
}
|
|
||||||
#content > .column1 #seccion1 {
|
|
||||||
height: 25rem;
|
height: 25rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion1 .image-container {
|
#content > .grid > .column1 #seccion1 .image-container {
|
||||||
display: flex;
|
/*display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;*/
|
||||||
height: 15rem;
|
height: 15rem;
|
||||||
|
/*img {
|
||||||
|
height: rem(155);
|
||||||
|
width: rem(188);
|
||||||
|
margin-top: rem(85);
|
||||||
|
}*/
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion1 .image-container img {
|
#content > .grid > .column1 #seccion1 .paragraph {
|
||||||
height: 9.6875rem;
|
|
||||||
width: 11.75rem;
|
|
||||||
margin-top: 5.3125rem;
|
|
||||||
}
|
|
||||||
#content > .column1 #seccion1 .paragraph {
|
|
||||||
padding-top: 1.75rem;
|
padding-top: 1.75rem;
|
||||||
line-height: 0.875rem;
|
line-height: 0.875rem;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion1 .paragraph .header {
|
#content > .grid > .column1 #seccion1 .paragraph .header {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 1.375rem;
|
font-size: 1.375rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 {
|
#content > .grid > .column1 #seccion2 {
|
||||||
height: 27.5rem;
|
height: 27.5rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 > .column {
|
#content > .grid > .column1 #seccion2 > .column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 > .column::after {
|
#content > .grid > .column1 #seccion2 > .column::after {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column1 {
|
#content > .grid > .column1 #seccion2 .column1 {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column1 img {
|
#content > .grid > .column1 #seccion2 .column1 img {
|
||||||
width: 19.8125rem;
|
width: 19.8125rem;
|
||||||
height: 19.8125rem;
|
height: 19.8125rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column2 {
|
#content > .grid > .column1 #seccion2 .column2 {
|
||||||
margin-top: 7.125rem;
|
margin-top: 7.125rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column2 .row:first-child {
|
#content > .grid > .column1 #seccion2 .column2 .row:first-child {
|
||||||
background-color: #00427b;
|
background-color: #00427b;
|
||||||
color: white;
|
color: white;
|
||||||
height: 11.25rem;
|
height: 11.25rem;
|
||||||
@ -224,111 +225,119 @@ body {
|
|||||||
margin-left: -3rem;
|
margin-left: -3rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column2 .row:first-child .header {
|
#content > .grid > .column1 #seccion2 .column2 .row:first-child .header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column2 .row:first-child ul {
|
#content > .grid > .column1 #seccion2 .column2 .row:first-child ul {
|
||||||
list-style: disc inside;
|
list-style: disc inside;
|
||||||
font-size: 0.8333333333rem;
|
font-size: 0.8333333333rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column2 .row:last-child {
|
#content > .grid > .column1 #seccion2 .column2 .row:last-child {
|
||||||
margin-top: 1.125rem;
|
margin-top: 1.125rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column2 .row:last-child img {
|
#content > .grid > .column1 #seccion2 .column2 .row:last-child img {
|
||||||
width: 4.375rem;
|
width: 4.375rem;
|
||||||
height: 5.3125rem;
|
height: 5.3125rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #dimensiones {
|
#content > .grid > .column1 #dimensiones {
|
||||||
height: 27.5rem;
|
height: 27.5rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #dimensiones .header {
|
#content > .grid > .column1 #dimensiones .header {
|
||||||
padding: 2.3125rem 0 !important;
|
padding: 2.3125rem 0 !important;
|
||||||
}
|
}
|
||||||
#content > .column1 #dimensiones .header .bigger {
|
#content > .grid > .column1 #dimensiones .header .bigger {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #dimensiones .images {
|
#content > .grid > .column1 #dimensiones .images {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
#content > .column1 #dimensiones .images img {
|
#content > .grid > .column1 #dimensiones .images .column {
|
||||||
float: left;
|
float: left;
|
||||||
|
}
|
||||||
|
#content > .grid > .column1 #dimensiones .images .column > img {
|
||||||
width: 19.5625rem;
|
width: 19.5625rem;
|
||||||
height: 14.6875rem;
|
height: 14.6875rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #construido {
|
#content > .grid > .column1 #dimensiones .images .column div {
|
||||||
|
width: 19.5625rem;
|
||||||
|
margin-top: 1.5625rem;
|
||||||
|
}
|
||||||
|
#content > .grid > .column1 #construido {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
|
padding-top: 1.4375rem !important;
|
||||||
}
|
}
|
||||||
#content > .column1 #construido .column2 {
|
#content > .grid > .column1 #construido .header {
|
||||||
height: 100%;
|
font-size: 1.8333333333rem;
|
||||||
|
padding: 0.625rem 2.6875rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
#content > .column2 {
|
#content > .grid > .column2 {
|
||||||
width: 33%;
|
|
||||||
height: 101.875rem;
|
height: 101.875rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky {
|
#content > .grid > .column2 .sticky {
|
||||||
height: 16.5625rem;
|
height: 16.5625rem;
|
||||||
width: 19.375rem;
|
width: 19.375rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child {
|
#content > .grid > .column2 .sticky .row:first-child {
|
||||||
height: 10.625rem;
|
height: 10.625rem;
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column {
|
#content > .grid > .column2 .sticky .row:first-child .column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column::after {
|
#content > .grid > .column2 .sticky .row:first-child .column::after {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 {
|
#content > .grid > .column2 .sticky .row:first-child .column1 {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
padding-top: 1.25rem;
|
padding-top: 1.25rem;
|
||||||
width: 12.9166666667rem;
|
width: 12.9166666667rem;
|
||||||
font-size: 1.1666666667rem;
|
font-size: 1.1666666667rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .linea {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .linea {
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .titulo {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .titulo {
|
||||||
font-size: 2.0833333333rem;
|
font-size: 2.0833333333rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .precio {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .precio {
|
||||||
font-size: 1.3333333333rem;
|
font-size: 1.3333333333rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores {
|
||||||
vertical-align: center;
|
vertical-align: center;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .text {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .text {
|
||||||
margin-right: 0.1875rem;
|
margin-right: 0.1875rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .white {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .white {
|
||||||
border: thin solid black;
|
border: thin solid black;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .black {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .black {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .blue {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .blue {
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .green {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .green {
|
||||||
background-color: lime;
|
background-color: lime;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .yellow {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .yellow {
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .orange {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .orange {
|
||||||
background-color: #ff8200;
|
background-color: #ff8200;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .red {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .red {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .circle {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .circle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0.75rem;
|
width: 0.75rem;
|
||||||
height: 0.75rem;
|
height: 0.75rem;
|
||||||
@ -336,22 +345,28 @@ body {
|
|||||||
margin: auto 0.0625rem;
|
margin: auto 0.0625rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .input {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
|
||||||
|
width: 0.875rem;
|
||||||
|
height: 0.875rem;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
#content > .grid > .column2 .sticky .row:first-child .column1 .input {
|
||||||
width: 4.5rem;
|
width: 4.5rem;
|
||||||
border: thin solid black;
|
border: thin solid black;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.5rem 0.05rem;
|
padding: 0.5rem 0.05rem;
|
||||||
font-size: 0.8333333333rem;
|
font-size: 0.8333333333rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .input button {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .input button {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .input input {
|
#content > .grid > .column2 .sticky .row:first-child .column1 .input input {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
background: none;
|
background: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -359,21 +374,20 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column2 {
|
#content > .grid > .column2 .sticky .row:first-child .column2 {
|
||||||
width: 6.4583333333rem;
|
width: 6.4583333333rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column2 img {
|
#content > .grid > .column2 .sticky .row:first-child .column2 img {
|
||||||
width: 6.875rem;
|
width: 6.875rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:last-child .button {
|
#content > .grid > .column2 .sticky .row:last-child .button {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#content #corporativos {
|
#content #corporativos {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 25rem;
|
height: 32.5rem;
|
||||||
margin-top: 101.875rem !important;
|
|
||||||
}
|
}
|
||||||
#content #corporativos > .column {
|
#content #corporativos > .column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -388,10 +402,11 @@ body {
|
|||||||
width: 67%;
|
width: 67%;
|
||||||
}
|
}
|
||||||
#content #corporativos .column1 > .header {
|
#content #corporativos .column1 > .header {
|
||||||
padding: 2.3125rem 0 !important;
|
margin-top: 4.1875rem;
|
||||||
|
margin-bottom: 2.3125rem;
|
||||||
}
|
}
|
||||||
#content #corporativos .column1 > .header .bigger {
|
#content #corporativos .column1 > .header .bigger {
|
||||||
font-size: 1.3333333333rem;
|
font-size: 1.625rem;
|
||||||
}
|
}
|
||||||
#content #corporativos .column1 .opciones {
|
#content #corporativos .column1 .opciones {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -410,10 +425,23 @@ body {
|
|||||||
}
|
}
|
||||||
#content #corporativos .column1 .opciones .opcion .descripcion {
|
#content #corporativos .column1 .opciones .opcion .descripcion {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
height: 12.5rem;
|
||||||
|
padding-top: 1.25rem;
|
||||||
}
|
}
|
||||||
#content #corporativos .column1 .opciones .opcion .descripcion ul {
|
#content #corporativos .column1 .opciones .opcion .descripcion .content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#content #corporativos .column1 .opciones .opcion .descripcion .content .header {
|
||||||
|
font-size: 1.1666666667rem;
|
||||||
|
margin-bottom: 0.625rem;
|
||||||
|
}
|
||||||
|
#content #corporativos .column1 .opciones .opcion .descripcion .content ul {
|
||||||
list-style: disc inside;
|
list-style: disc inside;
|
||||||
}
|
}
|
||||||
|
#content #corporativos .column1 .opciones .opcion .descripcion .images {
|
||||||
|
margin-top: 2.125rem;
|
||||||
|
}
|
||||||
#content #corporativos .column1 .opciones .opcion .descripcion .images img {
|
#content #corporativos .column1 .opciones .opcion .descripcion .images img {
|
||||||
width: 4.375rem;
|
width: 4.375rem;
|
||||||
height: 5.3125rem;
|
height: 5.3125rem;
|
||||||
@ -422,6 +450,11 @@ body {
|
|||||||
width: 33%;
|
width: 33%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
#content #corporativos .column2 .header {
|
||||||
|
margin-top: 2.875rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 1.625rem;
|
||||||
|
}
|
||||||
#content #corporativos .column2 form .colores {
|
#content #corporativos .column2 form .colores {
|
||||||
vertical-align: center;
|
vertical-align: center;
|
||||||
}
|
}
|
||||||
@ -458,6 +491,17 @@ body {
|
|||||||
margin: auto 0.0625rem;
|
margin: auto 0.0625rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
#content #corporativos .column2 form .colores .circle.selected {
|
||||||
|
width: 0.875rem;
|
||||||
|
height: 0.875rem;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
#content #corporativos .column2 form .row {
|
||||||
|
margin-bottom: 0.5625rem;
|
||||||
|
}
|
||||||
|
#content #corporativos .column2 form .colores.linea {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
#content #corporativos .column2 form .input.cantidad {
|
#content #corporativos .column2 form .input.cantidad {
|
||||||
width: 4.5rem;
|
width: 4.5rem;
|
||||||
border: thin solid black;
|
border: thin solid black;
|
||||||
@ -484,14 +528,62 @@ body {
|
|||||||
#content #corporativos .column2 form .input [type=file] {
|
#content #corporativos .column2 form .input [type=file] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
#content #corporativos .column2 form .input .file {
|
||||||
|
display: inline-block;
|
||||||
|
height: 1.5rem;
|
||||||
|
width: 9.375rem;
|
||||||
|
padding-top: 0.1875rem;
|
||||||
|
background-color: #cccccb;
|
||||||
|
border: thin solid #333;
|
||||||
|
font-size: 0.8333333333rem;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
#content #corporativos .column2 form .input [type=text] {
|
#content #corporativos .column2 form .input [type=text] {
|
||||||
height: 1.125rem;
|
height: 1.125rem;
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
background-color: white;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
#content #corporativos .column2 form textarea {
|
||||||
|
height: 4.5rem;
|
||||||
|
background-color: white;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
#content #corporativos .column2 form .button {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #666667;
|
||||||
|
color: white;
|
||||||
|
border: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
#content #felices {
|
#content #felices {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
padding: 0 1rem !important;
|
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 {
|
#content #formulario {
|
||||||
height: 30rem;
|
height: 30rem;
|
||||||
@ -549,8 +641,8 @@ body {
|
|||||||
margin-top: 1.6875rem;
|
margin-top: 1.6875rem;
|
||||||
}
|
}
|
||||||
#content #formulario > .column1 > img {
|
#content #formulario > .column1 > img {
|
||||||
width: 27.125rem;
|
width: 33.75rem;
|
||||||
height: 17.5rem;
|
height: 21.875rem;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
#content #formulario > .column2 {
|
#content #formulario > .column2 {
|
||||||
@ -625,3 +717,14 @@ body {
|
|||||||
#content .fondo-blanco {
|
#content .fondo-blanco {
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
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
2
public/assets/styles/main.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user