Compare commits
6 Commits
d459ae5052
...
features/g
| Author | SHA1 | Date | |
|---|---|---|---|
| dde8727363 | |||
| b7003db753 | |||
| a434feb0f0 | |||
| a212e7567e | |||
| 57e13ccabb | |||
| ec238c5ca5 |
371
assets/index.html
Normal file
371
assets/index.html
Normal file
@ -0,0 +1,371 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Stand</title>
|
||||
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
|
||||
<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">
|
||||
<div class="cabezal"></div>
|
||||
<div class="seccion1"></div>
|
||||
<div class="seccion2">
|
||||
<div class="diagonal"></div>
|
||||
</div>
|
||||
<div class="dimensiones">
|
||||
<div class="fondo-gris"></div>
|
||||
</div>
|
||||
<div class="construido"></div>
|
||||
<div class="corporativos"></div>
|
||||
<div class="testimonios"></div>
|
||||
<div class="formulario"></div>
|
||||
</div>
|
||||
|
||||
<div id="content" class="ui container">
|
||||
<header id="header">
|
||||
<nav class="ui borderless sticky menu">
|
||||
<div class="ui simple dropdown item">
|
||||
<div class="text">
|
||||
<i class="bars icon"></i>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<a class="item" href="./">Inicio</a>
|
||||
<a class="item" href="./#seccion2">Ventajas</a>
|
||||
<a class="item" href="./#dimensiones">Dimensiones</a>
|
||||
<a class="item" href="./#corporativos">Corporativos</a>
|
||||
<a class="item" href="./#felices">Testimonios</a>
|
||||
<a class="item" href="./#formulario">Contacto</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right menu">
|
||||
<a class="item" href="./#formulario">
|
||||
<i class="shopping cart icon">
|
||||
<div>0</div>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="logo ui center aligned basic segment">
|
||||
<img src="./assets/images/logo.svg" />
|
||||
<div class="frase1">
|
||||
SOPORTES PARA SMARTPHONE Y TABLETS
|
||||
</div>
|
||||
<div class="frase2">
|
||||
Diseñado y Fabricado en Chile
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="ui grid">
|
||||
<div class="column1 twelve wide column" id="column">
|
||||
<section id="seccion1" class="ui simple segment">
|
||||
<div class="image-container">
|
||||
<div class="ui grid">
|
||||
<div class="ten wide column">
|
||||
<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 class="paragraph">
|
||||
<div class="header">
|
||||
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
|
||||
</div>
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="seccion2" class="ui simple segment">
|
||||
<div class="column1 column">
|
||||
<img src="./assets/images/foto1.jpg" />
|
||||
</div>
|
||||
<div class="column2 column">
|
||||
<div class="row">
|
||||
<div class="header">
|
||||
VENTAJAS
|
||||
</div>
|
||||
<ul>
|
||||
<li>Apoyo estable del teléfono</li>
|
||||
<li>Ángulo preciso de inclinación para usar en conferencias</li>
|
||||
<li>Compatible con tablets permite cargar mientras se usa</li>
|
||||
<li>Diseño moderno y minimalista</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row">
|
||||
<img src="./assets/images/foto2.jpg" />
|
||||
<img src="./assets/images/foto3.jpg" />
|
||||
<img src="./assets/images/foto1.jpg" />
|
||||
<img src="./assets/images/foto2.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dimensiones" class="ui simple segment">
|
||||
<div class="header">
|
||||
<span class="bigger">DIMENSIONES</span> y colores
|
||||
</div>
|
||||
<div class="images">
|
||||
<div class="column">
|
||||
<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" />
|
||||
<div>
|
||||
Fabricado en plástico de origen vegetal sin derivados del petróleo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="construido" class="ui simple segment">
|
||||
<div class="header">
|
||||
CONSTRUIDOS EN IMPRESIÓN 3D
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="column2 four wide column fondo-blanco">
|
||||
<div class="ui sticky">
|
||||
<form class="ui form" name="form-sticky">
|
||||
<div class="row">
|
||||
<div class="column1 column">
|
||||
<div class="titulo linea">
|
||||
STAND
|
||||
</div>
|
||||
<div class="precio linea">
|
||||
$ 5.990
|
||||
</div>
|
||||
<div class="colores linea">
|
||||
<input type="hidden" name="color" value="azul" />
|
||||
<span class="text">COLOR</span>
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
<div class="blue circle"></div>
|
||||
<div class="green circle"></div>
|
||||
<div class="yellow circle"></div>
|
||||
<div class="orange circle"></div>
|
||||
<div class="red circle"></div>
|
||||
</div>
|
||||
<div class="input">
|
||||
<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 class="column2 column">
|
||||
<img src="./assets/images/azul.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="ui grey button" type="submit">COMPRAR</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="corporativos" class="ui simple segment">
|
||||
<div class="column1 column">
|
||||
<div class="header">
|
||||
<span class="bigger">CORPORATIVOS</span> Regalos y más ...
|
||||
</div>
|
||||
<div class="opciones">
|
||||
<div class="opcion">
|
||||
<div class="img-grande">
|
||||
<img src="./assets/images/foto2.jpg" />
|
||||
</div>
|
||||
<div class="descripcion">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
LOGO ABAJO
|
||||
</div>
|
||||
<ul>
|
||||
<li>Siempre visible</li>
|
||||
<li>Menor tamaño</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="images">
|
||||
<img src="./assets/images/foto3.jpg" />
|
||||
<img src="./assets/images/foto1.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="opcion">
|
||||
<div class="img-grande">
|
||||
<img src="./assets/images/foto3.jpg" />
|
||||
</div>
|
||||
<div class="descripcion">
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
LOGO ARRIBA
|
||||
</div>
|
||||
<ul>
|
||||
<li>No se ve al apoyar el teléfono</li>
|
||||
<li>Mayor tamaño</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="images">
|
||||
<img src="./assets/images/foto1.jpg" />
|
||||
<img src="./assets/images/foto2.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column2 column fondo-blanco">
|
||||
<div class="header">
|
||||
COTIZA CON NOSOTROS
|
||||
</div>
|
||||
<form class="ui form">
|
||||
<div class="row">
|
||||
<div class="colores linea">
|
||||
<input type="hidden" name="color" value="azul" />
|
||||
<span class="text">COLOR</span>
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
<div class="blue circle"></div>
|
||||
<div class="green circle"></div>
|
||||
<div class="yellow circle"></div>
|
||||
<div class="orange circle"></div>
|
||||
<div class="red circle"></div>
|
||||
</div>
|
||||
<div class="input cantidad">
|
||||
<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 class="row">
|
||||
<div class="input">
|
||||
LOGO
|
||||
<input type="file" name="archivo" placeholder="Cargar archivo" />
|
||||
<div class="file">Cargar archivo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input">
|
||||
<input type="text" name="nombre" placeholder="NOMBRE" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input">
|
||||
<input type="text" name="email" placeholder="E-MAIL" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input">
|
||||
<input type="text" name="telefono" placeholder="TELÉFONO" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input">
|
||||
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<button class="ui button" type="submit">COTIZAR</button>
|
||||
</form>
|
||||
</div>
|
||||
</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">
|
||||
<div class="flotante">
|
||||
<div class="content">
|
||||
<a href="https://wa.me/56994450117" class="item">
|
||||
<div class="whatsapp">
|
||||
<i class="whatsapp icon"></i>
|
||||
CONVERSEMOS
|
||||
</div>
|
||||
</a>
|
||||
<a href="mailto:ventas@stand.cl" class="item">
|
||||
<div>
|
||||
ventas@3Dstand.cl
|
||||
</div>
|
||||
</a>
|
||||
<div class="rrss item">
|
||||
<a href="http://www.instagram.com/stand">
|
||||
<i class="icons">
|
||||
<i class="inverted grey large circle icon"></i>
|
||||
<i class="grey instagram icon"></i>
|
||||
</i>
|
||||
</a>
|
||||
<a href="http://www.facebook.com/stand">
|
||||
<i class="icons">
|
||||
<i class="inverted grey large circle icon"></i>
|
||||
<i class="grey facebook f icon"></i>
|
||||
</i>
|
||||
</a>
|
||||
<a href="http://www.youtube.com/stand">
|
||||
<i class="icons">
|
||||
<i class="inverted grey large circle icon"></i>
|
||||
<i class="grey youtube icon"></i>
|
||||
</i>
|
||||
</a>
|
||||
<a href="http://www.linkedin.com/stand">
|
||||
<i class="icons">
|
||||
<i class="inverted grey large circle icon"></i>
|
||||
<i class="grey linkedin in icon"></i>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column1 column">
|
||||
<img src="./assets/images/conversemos.png" />
|
||||
</div>
|
||||
<div class="column2 column">
|
||||
<div class="header">
|
||||
CONVERSEMOS! <a href="https://wa.me/56994450117" class="whatsapp-link"><i class="green whatsapp icon"></i></a>
|
||||
</div>
|
||||
<div class="paragraph">
|
||||
scing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis nosventas
|
||||
</div>
|
||||
<form class="ui form" id="contacto">
|
||||
<input type="text" name="nombre" placeholder="NOMBRE" />
|
||||
<input type="text" name="mail" placeholder="E-MAIL" />
|
||||
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
|
||||
<button class="ui button">ENVIAR</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>
|
||||
<script type="text/javascript" src="./assets/scripts/main.min.js"></script>
|
||||
</body>
|
||||
@ -1,19 +1,322 @@
|
||||
function resize() {
|
||||
let p = 400 / 1030
|
||||
$('.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)
|
||||
})
|
||||
}
|
||||
|
||||
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() {
|
||||
$('.sticky').sticky({
|
||||
register_resizeables()
|
||||
|
||||
if (vw < 1080) {
|
||||
resize()
|
||||
}
|
||||
|
||||
$('.menu.sticky').sticky()
|
||||
$('.column2 .sticky').sticky({
|
||||
context: '#column'
|
||||
})
|
||||
$('#subir').sticky()
|
||||
|
||||
$('.shopping.cart').innerText = 0
|
||||
|
||||
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
@ -1,250 +1,545 @@
|
||||
@use "sass:map";
|
||||
@import 'reset';
|
||||
|
||||
body {
|
||||
font-family: Roboto, sans;
|
||||
$html-font-size: 16px;
|
||||
@function strip_unit($value) {
|
||||
@return $value / ($value * 0 + 1);
|
||||
}
|
||||
@function rem($px_value) {
|
||||
@return #{strip_unit($px_value) / strip_unit($html-font-size)}rem;
|
||||
}
|
||||
@function font_size($font) {
|
||||
@return #{strip_unit($font) / 12}rem;
|
||||
}
|
||||
|
||||
$column1: (1030*2/3/16);
|
||||
$column2: (1030/3/16);
|
||||
$gris: rgb(204, 204, 204);
|
||||
$gris-texto: rgb(51, 51, 51);
|
||||
|
||||
.ui.container {
|
||||
max-width: 1030px;
|
||||
}
|
||||
section>.container {
|
||||
height: 100%;
|
||||
&>.column1 {
|
||||
width: ($column1)+rem;
|
||||
}
|
||||
&>.column2 {
|
||||
width: ($column2)+rem;
|
||||
}
|
||||
}
|
||||
@mixin colors {
|
||||
.colores {
|
||||
vertical-align: center;
|
||||
|
||||
#header {
|
||||
background-image: url('../images/header.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
$header-background: rgba(100, 100, 0, .3);
|
||||
background-color: $header-background;
|
||||
color: rgb(255, 255, 255);
|
||||
|
||||
width: 100%;
|
||||
&>.container {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.ui.menu {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
|
||||
.dropdown .menu {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
.text {
|
||||
margin-right: rem(3);
|
||||
}
|
||||
|
||||
.item {
|
||||
color: inherit !important;
|
||||
font-size: 2rem;
|
||||
.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;
|
||||
|
||||
.shopping.cart div {
|
||||
position: relative;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
top: -2.6rem;
|
||||
left: 0.2rem;
|
||||
font-size: 1rem;
|
||||
font-family: Roboto, sans;
|
||||
&.selected {
|
||||
width: rem($a + 2);
|
||||
height: rem($a + 2);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
.frase1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.frase2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple.segment {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&>.ui.grid {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
$full_width: 1080;
|
||||
|
||||
$heights: (
|
||||
"cabezal": (400/16),
|
||||
"seccion1": 25,
|
||||
"seccion2": 27.5,
|
||||
"dimensiones": 27.5,
|
||||
"construido": 21.875,
|
||||
"corporativos": 25,
|
||||
"corporativos": (520/16),
|
||||
"felices": 21.875,
|
||||
"formulario": 30
|
||||
);
|
||||
|
||||
#seccion1 {
|
||||
background-image: linear-gradient(rgb(200, 200, 200), rgb(200, 200, 200));
|
||||
background-position: left 6.3rem;
|
||||
background-size: 100% (134/16)+rem;
|
||||
background-repeat: no-repeat;
|
||||
#backgrounds {
|
||||
.cabezal {
|
||||
height: (map.get($heights, 'cabezal'))+rem;
|
||||
|
||||
height: (map.get($heights, "seccion1"))+rem;
|
||||
margin-bottom: 2rem !important;
|
||||
background-image: url('../images/banner.jpg');
|
||||
background-repeat: no-repeat;
|
||||
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;
|
||||
|
||||
.column1 {
|
||||
width: (1030*2/3/16)+rem;
|
||||
background-image: linear-gradient($gris, $gris);
|
||||
background-position: left rem(112);
|
||||
background-size: 100% rem(128);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.seccion2 {
|
||||
height: (map.get($heights, "seccion2"))+rem;
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-image: url('../images/fondo23.png');
|
||||
//background-color: rgb(240, 240, 240);
|
||||
|
||||
.diagonal {
|
||||
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
||||
border-right: rem(1900) solid transparent;
|
||||
}
|
||||
}
|
||||
.dimensiones {
|
||||
height: (map.get($heights, "dimensiones"))+rem;
|
||||
|
||||
background-image: url('../images/fondo23.png');
|
||||
.fondo-gris {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($gris, .5);
|
||||
}
|
||||
}
|
||||
.construido {
|
||||
height: (map.get($heights, "construido"))+rem;
|
||||
|
||||
background-image: url('../images/fondo4.jpg');
|
||||
}
|
||||
.corporativos {
|
||||
height: (map.get($heights, "corporativos"))+rem;
|
||||
|
||||
background-image: url('../images/fondo5.png');
|
||||
}
|
||||
.testimonios {
|
||||
height: (map.get($heights, "felices"))+rem;
|
||||
|
||||
background-image: linear-gradient($gris, $gris);
|
||||
background-position: left rem(115);
|
||||
background-size: 100% rem(118);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.formulario {
|
||||
height: (map.get($heights, "formulario"))+rem;
|
||||
background-color: $gris;
|
||||
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||
}
|
||||
}
|
||||
|
||||
$column1: 67;
|
||||
$column2: 33;
|
||||
|
||||
$content_height: 0;
|
||||
$column_height1: 0;
|
||||
@each $name, $val in $heights {
|
||||
$content_height: $content_height + $val;
|
||||
@if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' and $name != 'cabezal' {
|
||||
$column_height1: $column_height1 + $val;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
height: ($content_height)+rem;
|
||||
font-family: Roboto, sans;
|
||||
color: $gris-texto;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: rem($full_width) !important;
|
||||
height: ($content_height)+rem;
|
||||
|
||||
position: relative;
|
||||
top: (-$content_height)+rem;
|
||||
|
||||
#header {
|
||||
color: rgb(255, 255, 255);
|
||||
|
||||
width: 100%;
|
||||
height: (map.get($heights, 'cabezal'))+rem;
|
||||
|
||||
.ui.menu {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
background-color: rgba(100, 100, 100, .3) !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
|
||||
.dropdown .menu {
|
||||
/*background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;*/
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 1rem;
|
||||
.item {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
color: inherit !important;
|
||||
font-size: 2rem;
|
||||
|
||||
padding: rem(20) !important;
|
||||
|
||||
.shopping.cart div {
|
||||
position: relative;
|
||||
color: rgb(0, 0, 0);
|
||||
display: inline-block;
|
||||
top: -2.6rem;
|
||||
left: 0.2rem;
|
||||
font-size: 1rem;
|
||||
font-family: Roboto, sans;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
img {
|
||||
height: 9.6875rem;
|
||||
margin-top: 5rem;
|
||||
width: 50%;
|
||||
max-width: rem(1030);
|
||||
}
|
||||
.frase1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.frase2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#seccion2 {
|
||||
height: (map.get($heights, "seccion2"))+rem;
|
||||
/*&>.column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
background-image: url('../images/fondo23.png');
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
|
||||
#dimensiones {
|
||||
height: (map.get($heights, "dimensiones"))+rem;
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}*/
|
||||
&>.grid>.column1 {
|
||||
//width: percentage($column1/100);
|
||||
|
||||
background-image: url('../images/fondo23.png');
|
||||
}
|
||||
|
||||
#construido {
|
||||
height: (map.get($heights, "construido"))+rem;
|
||||
#seccion1 {
|
||||
height: (map.get($heights, "seccion1"))+rem;
|
||||
width: 100%;
|
||||
|
||||
background-image: url('../images/fondo4.png');
|
||||
background-color: rgb(100, 200, 255);
|
||||
}
|
||||
.image-container {
|
||||
/*display: flex;
|
||||
justify-content: space-between;*/
|
||||
height: rem(112+128);
|
||||
|
||||
#corporativos {
|
||||
height: (map.get($heights, "corporativos"))+rem;
|
||||
/*img {
|
||||
height: rem(155);
|
||||
width: rem(188);
|
||||
margin-top: rem(85);
|
||||
}*/
|
||||
}
|
||||
.paragraph {
|
||||
padding-top: rem(28);
|
||||
line-height: rem(14);
|
||||
text-align: justify;
|
||||
|
||||
background-image: url('../images/fondo5.png');
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 1rem;
|
||||
font-size: rem(22);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#felices {
|
||||
background-image: linear-gradient(rgb(200, 200, 200), rgb(200, 200, 200));
|
||||
background-position: left 3rem;
|
||||
background-size: 100% 5rem;
|
||||
background-repeat: no-repeat;
|
||||
#seccion2 {
|
||||
height: (map.get($heights, "seccion2"))+rem;
|
||||
|
||||
height: (map.get($heights, "felices"))+rem;
|
||||
}
|
||||
|
||||
#formulario {
|
||||
height: (map.get($heights, "formulario"))+rem;
|
||||
|
||||
.whatsapp-link {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
$column1: 0;
|
||||
$sticky: 0;
|
||||
@each $name, $val in $heights {
|
||||
$sticky: $sticky + $val;
|
||||
@if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' {
|
||||
$column1: $column1 + $val;
|
||||
}
|
||||
}
|
||||
#sticky_container {
|
||||
position: relative;
|
||||
height: ($column1)+rem;
|
||||
top: -($sticky)+rem;
|
||||
|
||||
#column {
|
||||
position: absolute;
|
||||
width: (1030*2/3/16)+rem;
|
||||
height: ($column1)+rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.sticky {
|
||||
float: right;
|
||||
height: (265/16)+rem;
|
||||
width: (310/16)+rem;
|
||||
padding-top: ((265-170-35-16)/16)+rem;
|
||||
|
||||
.row:first-child {
|
||||
height: (170/16)+rem;
|
||||
|
||||
.column1 {
|
||||
&>.column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
.titulo {
|
||||
font-size: (25/12)+rem;
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
.precio {
|
||||
font-size: (16/12)+rem;
|
||||
}
|
||||
.column1 {
|
||||
margin-top: rem(80);
|
||||
img {
|
||||
width: rem(317);
|
||||
height: rem(317);
|
||||
}
|
||||
font-size: (14/12)+rem;
|
||||
}
|
||||
.column2 {
|
||||
margin-top: rem(114);
|
||||
.row:first-child {
|
||||
background-color: #00427b;
|
||||
color: rgb(256, 256, 256);
|
||||
height: rem(180);
|
||||
width: rem(380);
|
||||
padding: 2rem;
|
||||
margin-left: -3rem;
|
||||
overflow: hidden;
|
||||
|
||||
.colores {
|
||||
vertical-align: center;
|
||||
.header {
|
||||
font-weight: bold;
|
||||
font-size: rem(16);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.white {
|
||||
ul {
|
||||
list-style: disc inside;
|
||||
font-size: font-size(10);
|
||||
}
|
||||
}
|
||||
.row:last-child {
|
||||
margin-top: rem(18);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: rem(70);
|
||||
height: rem(85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#dimensiones {
|
||||
height: (map.get($heights, "dimensiones"))+rem;
|
||||
|
||||
.header {
|
||||
padding: rem(37) 0 !important;
|
||||
.bigger {
|
||||
font-size: rem(16);
|
||||
}
|
||||
}
|
||||
|
||||
.images {
|
||||
display: flex;
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
|
||||
&>img {
|
||||
width: rem(313);
|
||||
height: rem(235);
|
||||
}
|
||||
|
||||
div {
|
||||
width: rem(313);
|
||||
margin-top: rem(25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#construido {
|
||||
height: (map.get($heights, "construido"))+rem;
|
||||
padding-top: rem(23) !important;
|
||||
|
||||
.header {
|
||||
font-size: font_size(22);
|
||||
padding: rem(10) rem(43);
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.grid>.column2 {
|
||||
//width: percentage($column2/100);
|
||||
height: ($column_height1)+rem;
|
||||
|
||||
.sticky {
|
||||
height: rem(265);
|
||||
width: rem(310);
|
||||
margin: auto;
|
||||
|
||||
.row:first-child {
|
||||
height: rem(170);
|
||||
margin-top: rem(80);
|
||||
|
||||
.column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.column1 {
|
||||
vertical-align: bottom;
|
||||
padding-top: rem(20);
|
||||
width: rem(310*2/3);
|
||||
|
||||
.linea {
|
||||
margin-bottom: rem(10);
|
||||
}
|
||||
|
||||
.titulo {
|
||||
font-size: font_size(25);
|
||||
}
|
||||
.precio {
|
||||
font-size: font_size(16);
|
||||
}
|
||||
font-size: font_size(14);
|
||||
|
||||
@include colors;
|
||||
.input {
|
||||
width: 4.5rem;
|
||||
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;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 8000px;
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: font_size(10);
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input {
|
||||
.column2 {
|
||||
width: rem(310/3);
|
||||
|
||||
img {
|
||||
width: rem(110);
|
||||
height: rem(160);
|
||||
}
|
||||
}
|
||||
}
|
||||
.row:last-child {
|
||||
.button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#corporativos {
|
||||
width: 100%;
|
||||
height: (map.get($heights, "corporativos"))+rem;
|
||||
|
||||
//margin-top: ($column_height1)+rem !important;
|
||||
|
||||
&>.column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.column1 {
|
||||
width: percentage(67/100);
|
||||
|
||||
&>.header {
|
||||
margin-top: rem(67);
|
||||
margin-bottom: rem(37);
|
||||
.bigger {
|
||||
font-size: rem(26);
|
||||
}
|
||||
}
|
||||
.opciones {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.opcion {
|
||||
display: inline-block;
|
||||
|
||||
.img-grande {
|
||||
display: inline-block;
|
||||
padding-right: rem(12);
|
||||
img {
|
||||
width: rem(135);
|
||||
height: rem(200);
|
||||
}
|
||||
}
|
||||
.descripcion {
|
||||
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 {
|
||||
list-style: disc inside;
|
||||
}
|
||||
}
|
||||
.images {
|
||||
margin-top: rem(34);
|
||||
img {
|
||||
width: rem(70);
|
||||
height: rem(85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.column2 {
|
||||
width: percentage(33/100);
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
margin-top: rem(46);
|
||||
margin-bottom: rem(24);
|
||||
font-size: rem(26);
|
||||
}
|
||||
|
||||
form {
|
||||
@include colors;
|
||||
|
||||
.row {
|
||||
margin-bottom: rem(9);
|
||||
}
|
||||
.colores.linea {
|
||||
margin-bottom: rem(25-9);
|
||||
}
|
||||
.input.cantidad {
|
||||
width: 4.5rem;
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: font_size(10);
|
||||
|
||||
button {
|
||||
background: none;
|
||||
@ -260,24 +555,241 @@ $sticky: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column2 {
|
||||
display: inline-block;
|
||||
width: (170/16)+rem;
|
||||
}
|
||||
}
|
||||
.row:last-child {
|
||||
.button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
.input [type="file"] {
|
||||
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"] {
|
||||
height: rem(18);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#felices {
|
||||
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 {
|
||||
height: (map.get($heights, "formulario"))+rem;
|
||||
|
||||
padding: 0 1rem !important;
|
||||
|
||||
.whatsapp-link {
|
||||
color: inherit;
|
||||
}
|
||||
&>.column {
|
||||
float: left;
|
||||
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
&>.flotante {
|
||||
position: absolute;
|
||||
top: rem(183);
|
||||
margin: auto;
|
||||
left: 40%;
|
||||
width: rem($full_width/5);
|
||||
text-align: center;
|
||||
|
||||
&>.content {
|
||||
width: rem(130);
|
||||
margin: auto;
|
||||
left: -50%;
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
padding: rem(5) 0;
|
||||
}
|
||||
div.whatsapp {
|
||||
height: rem(30);
|
||||
background-color: #1a9947;
|
||||
color: #fff;
|
||||
font-size: rem(10);
|
||||
|
||||
&>i {
|
||||
position: relative;
|
||||
font-size: font_size(16);
|
||||
top: rem(3);
|
||||
}
|
||||
}
|
||||
.rrss {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: rem(20);
|
||||
|
||||
i.inverted.grey {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.column1 {
|
||||
width: percentage($column1/100);
|
||||
margin-top: rem(27);
|
||||
|
||||
&>img {
|
||||
width: rem(540);
|
||||
height: rem(350);
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&>.column2 {
|
||||
width: percentage($column2/100);
|
||||
|
||||
.header {
|
||||
margin-top: rem(20);
|
||||
text-align: center;
|
||||
font-size: font_size(22);
|
||||
|
||||
.whatsapp-link {
|
||||
display: inline-block;
|
||||
width: rem(25);
|
||||
height: rem(25);
|
||||
font-size: font_size(25);
|
||||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: rem(25);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
form {
|
||||
input {
|
||||
border-radius: 0 !important;
|
||||
height: rem(18);
|
||||
margin-bottom: rem(9);
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
font-size: font_size(10);
|
||||
&::placeholder {
|
||||
color: $gris-texto;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border-radius: 0 !important;
|
||||
height: rem(72);
|
||||
margin-bottom: rem(25);
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
font-size: font_size(10);
|
||||
&::placeholder {
|
||||
color: $gris-texto;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
background-color: white;
|
||||
color: $gris-texto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
background: none;
|
||||
|
||||
&.segment>.container {
|
||||
height: 100%;
|
||||
|
||||
&>.column1 {
|
||||
display: inline-block;
|
||||
width: ($column1)+rem;
|
||||
}
|
||||
&>.column2 {
|
||||
display: inline-block;
|
||||
width: ($column2)+rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.simple.segment {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&>.ui.grid {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.fondo-blanco {
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.fondo-blanco {
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
#subir {
|
||||
width: 100%;
|
||||
|
||||
.container {
|
||||
text-align: right;
|
||||
padding: 0 1rem !important;
|
||||
|
||||
i.icons {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
18
gulpfile.js
18
gulpfile.js
@ -1,4 +1,4 @@
|
||||
const {watch, src, dest, series} = require('gulp')
|
||||
const {watch, src, dest, series, parallel} = require('gulp')
|
||||
const path = require('path')
|
||||
const concat = require('gulp-concat')
|
||||
const rename = require('gulp-rename')
|
||||
@ -6,6 +6,7 @@ const sourcemaps = require('gulp-sourcemaps')
|
||||
const sass = require('gulp-dart-sass')
|
||||
const babel = require('gulp-babel')
|
||||
const uglify = require('gulp-uglify')
|
||||
const htmlmin = require('gulp-htmlmin')
|
||||
|
||||
let source_dir = 'assets'
|
||||
let output_dir = 'public/assets'
|
||||
@ -15,7 +16,9 @@ function js(done) {
|
||||
.pipe(concat('main.js'))
|
||||
.pipe(dest(path.join(output_dir, 'scripts')))
|
||||
.pipe(sourcemaps.init({loadMaps: true}))
|
||||
.pipe(babel())
|
||||
.pipe(babel({
|
||||
presets: ['@babel/preset-env']
|
||||
}))
|
||||
.pipe(uglify())
|
||||
.pipe(rename('main.min.js'))
|
||||
.pipe(sourcemaps.write('./maps'))
|
||||
@ -34,6 +37,13 @@ function css(done) {
|
||||
.pipe(dest(path.join(output_dir, 'styles')))
|
||||
}
|
||||
|
||||
watch(source_dir, series(js, css))
|
||||
function html(done) {
|
||||
return src(path.join(source_dir, '*.html'))
|
||||
.pipe(htmlmin({collapseWhitespace: true}))
|
||||
.pipe(rename('index.html'))
|
||||
.pipe(dest(path.join(output_dir, '../')))
|
||||
}
|
||||
|
||||
exports.default = series(js, css)
|
||||
watch(source_dir, parallel(js, css, html))
|
||||
|
||||
exports.default = parallel(js, css, html)
|
||||
|
||||
183
index.html
Normal file
183
index.html
Normal file
@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Stand</title>
|
||||
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" integrity="sha512-g/MzOGVPy3OQ4ej1U+qe4D/xhLwUn5l5xL0Fa7gdC258ZWVJQGwsbIR47SWMpRxSPjD0tfu/xkilTy+Lhrl3xg==" crossorigin="anonymous" />
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="backgrounds">
|
||||
<div class="cabezal"></div>
|
||||
<div class="seccion1"></div>
|
||||
<div class="seccion2">
|
||||
<div class="diagonal"></div>
|
||||
</div>
|
||||
<div class="dimensiones">
|
||||
<div class="fondo-gris"></div>
|
||||
</div>
|
||||
<div class="construido"></div>
|
||||
<div class="corporativos"></div>
|
||||
<div class="testimonios"></div>
|
||||
<div class="formulario"></div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<header id="header">
|
||||
<nav class="ui borderless sticky menu">
|
||||
<div class="ui simple dropdown item">
|
||||
<div class="text">
|
||||
<i class="bars icon"></i>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<a class="item" href="./">Inicio</a>
|
||||
<a class="item" href="./#seccion2">Ventajas</a>
|
||||
<a class="item" href="./#dimensiones">Dimensiones</a>
|
||||
<a class="item" href="./#corporativos">Corporativos</a>
|
||||
<a class="item" href="./#felices">Testimonios</a>
|
||||
<a class="item" href="./#formulario">Contacto</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right menu">
|
||||
<a class="item" href="./#formulario">
|
||||
<i class="shopping cart icon">
|
||||
<div>0</div>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="logo ui center aligned basic segment">
|
||||
<img src="./assets/images/logo.svg" />
|
||||
<div class="frase1">
|
||||
SOPORTES PARA SMARTPHONE Y TABLETS
|
||||
</div>
|
||||
<div class="frase2">
|
||||
Diseñado y Fabricado en Chile
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="column1 column" id="column">
|
||||
<section id="seccion1" class="ui simple segment">
|
||||
<div class="image-container">
|
||||
<img src="./assets/images/tablet-front.png" />
|
||||
<img src="./assets/images/tablet-back.png" />
|
||||
<img src="./assets/images/phone.png" />
|
||||
</div>
|
||||
<div class="paragraph">
|
||||
<div class="header">
|
||||
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
|
||||
</div>
|
||||
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="seccion2" class="ui simple segment">
|
||||
<div class="column1 column">
|
||||
<img src="./assets/images/phone-pc.png" />
|
||||
</div>
|
||||
<div class="column2 column">
|
||||
<div class="row">
|
||||
<div class="header">
|
||||
VENTAJAS
|
||||
</div>
|
||||
<ul>
|
||||
<li>Apoyo estable del teléfono</li>
|
||||
<li>Ángulo preciso de inclinación para usar en conferencias</li>
|
||||
<li>Compatible con tablets permite cargar mientras se usa</li>
|
||||
<li>Diseño moderno y minimalista</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row">
|
||||
<img src="./assets/images/ventajas1.png" />
|
||||
<img src="./assets/images/ventajas2.png" />
|
||||
<img src="./assets/images/ventajas3.png" />
|
||||
<img src="./assets/images/ventajas4.png" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dimensiones" class="ui simple segment">
|
||||
DIMENSIONES
|
||||
</section>
|
||||
|
||||
<section id="construido" class="ui simple segment">
|
||||
CONSTRUIDOS EN IMPRESIÓN 3D
|
||||
</section>
|
||||
</div>
|
||||
<div class="column2 column fondo-blanco">
|
||||
<div class="ui sticky">
|
||||
<div class="row">
|
||||
<div class="column1 column">
|
||||
<div class="titulo linea">
|
||||
STAND
|
||||
</div>
|
||||
<div class="precio linea">
|
||||
$ 5.990
|
||||
</div>
|
||||
<div class="colores linea">
|
||||
COLOR
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
<div class="blue circle"></div>
|
||||
<div class="green circle"></div>
|
||||
<div class="yellow circle"></div>
|
||||
<div class="orange circle"></div>
|
||||
<div class="red circle"></div>
|
||||
</div>
|
||||
<div class="input">
|
||||
<button class="minus">-</button><input type="text" name="cantidad" value="0" /><button class="plus">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column2 column">
|
||||
<img src="./assets/images/stand.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="ui grey button">COMPRAR</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="corporativos" class="ui simple segment">
|
||||
<div class="column1 column">
|
||||
CORPORATIVOS
|
||||
</div>
|
||||
<div class="column2 column fondo-blanco">
|
||||
COTIZA CON NOSOSTROS
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="felices" class="ui simple segment">
|
||||
CLIENTES FELICES
|
||||
</section>
|
||||
|
||||
<section id="formulario" class="ui simple segment">
|
||||
<div class="ui grid">
|
||||
<div class="eight wide column">
|
||||
</div>
|
||||
<div class="eight wide column">
|
||||
<div class="ui grid">
|
||||
<div class="five wide column">
|
||||
</div>
|
||||
<div class="center aligned eleven wide column">
|
||||
CONVERSEMOS! <a href="whatsapp" class="whatsapp-link"><i class="green whatsapp icon"></i></a>
|
||||
<form class="ui form">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<script type="text/javascript" src="./assets/scripts/main.min.js"></script>
|
||||
</body>
|
||||
@ -18,10 +18,13 @@
|
||||
"author": "Aldarien",
|
||||
"license": "UNLICENSED",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@babel/preset-env": "^7.12.11",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-dart-sass": "^1.0.2",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sourcemaps": "^3.0.0",
|
||||
"gulp-uglify": "^3.0.2"
|
||||
|
||||
@ -1,154 +0,0 @@
|
||||
<?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="221.116px" height="199.206px" viewBox="0 0 221.116 199.206" enable-background="new 0 0 221.116 199.206"
|
||||
xml:space="preserve">
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#D2D3D4" points="221.116,199.206 0,199.206 26.154,113.555
|
||||
194.962,113.555 "/>
|
||||
<g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M147.486,88.15c-0.16-0.195-0.176-0.468-0.236-0.723
|
||||
c-1.59-6.586-3.178-13.174-4.765-19.76c-1.771-7.348-3.546-14.691-5.312-22.038c-2.232-9.291-4.455-18.583-6.686-27.873
|
||||
c-1.055-4.386-2.12-8.767-3.18-13.149c-0.138-0.568-0.262-1.143-0.428-1.701c-0.193-0.66-0.518-0.879-1.195-0.791
|
||||
c-0.486,0.064-0.974,0.058-1.459,0.086c-0.972,0.056-1.943,0.125-2.914,0.197c-0.996,0.07-1.988,0.16-2.984,0.231
|
||||
c-0.947,0.065-1.896,0.108-2.844,0.179c-1.724,0.128-3.443,0.277-5.167,0.4c-1.651,0.117-3.306,0.204-4.955,0.324
|
||||
c-2.403,0.176-4.804,0.396-7.208,0.545c-2.16,0.137-4.323,0.291-6.483,0.433c-2.162,0.14-4.322,0.284-6.483,0.447
|
||||
c-1.747,0.133-3.5,0.188-5.246,0.333c-0.826,0.066-1.655,0.087-2.478,0.16c-1.407,0.126-2.809,0.291-4.228,0.263
|
||||
c-0.216-0.003-0.44-0.001-0.654,0.037c-0.64,0.118-1.071,0.618-1.092,1.271c-0.015,0.439,0.011,0.875,0.056,1.313
|
||||
c0.095,0.944,0.161,1.893,0.22,2.841c0.071,1.093,0.063,2.194,0.198,3.279c0.101,0.826,0.071,1.652,0.14,2.478
|
||||
c0.099,1.164,0.198,2.33,0.249,3.495c0.052,1.169,0.108,2.337,0.197,3.501c0.209,2.742,0.276,5.496,0.536,8.235
|
||||
c0.088,0.922,0.114,1.847,0.176,2.77c0.117,1.774,0.274,3.543,0.397,5.315c0.121,1.772,0.207,3.548,0.333,5.322
|
||||
c0.171,2.476,0.373,4.949,0.542,7.427c0.125,1.823,0.19,3.649,0.338,5.468c0.063,0.778,0.097,1.557,0.156,2.332
|
||||
c0.134,1.771,0.269,3.543,0.388,5.314c0.074,1.094,0.104,2.191,0.181,3.284c0.173,2.452,0.399,4.901,0.535,7.354
|
||||
c0.099,1.8,0.272,3.593,0.351,5.395c0.038,0.848,0.09,1.701,0.161,2.551c0.091,1.092,0.168,2.183,0.243,3.275
|
||||
c0.067,0.973,0.116,1.945,0.183,2.916c0.131,1.87,0.272,3.738,0.399,5.609c0.069,1.018,0.106,2.039,0.179,3.063
|
||||
c0.127,1.843,0.284,3.686,0.407,5.532c0.121,1.796,0.183,3.597,0.335,5.392c0.063,0.755,0.09,1.508,0.149,2.262
|
||||
c0.138,1.746,0.269,3.495,0.388,5.242c0.073,1.068,0.076,2.146,0.194,3.207c0.086,0.778,0.086,1.558,0.147,2.334
|
||||
c0.13,1.697,0.274,3.395,0.386,5.098c0.124,1.846,0.18,3.696,0.344,5.538c0.071,0.802,0.086,1.604,0.149,2.405
|
||||
c0.135,1.675,0.257,3.348,0.385,5.021c0.007,0.123,0.007,0.247-0.012,0.365c-0.026,0.176-0.142,0.249-0.313,0.213
|
||||
c-0.12-0.021-0.237-0.059-0.353-0.098c-2.293-0.75-4.588-1.499-6.879-2.252c-0.208-0.068-0.451-0.105-0.582-0.288
|
||||
c-0.343-0.476-0.821-0.66-1.373-0.735c-0.138-0.018-0.285-0.086-0.397-0.174c-1.185-0.896-2.397-1.762-3.081-3.158
|
||||
c-0.388-0.796-0.567-0.851-1.457-0.634c-1.397,0.343-2.802,0.657-4.183,1.056c-0.709,0.205-1.192,0.053-1.679-0.479
|
||||
c-0.597-0.652-1.136-1.338-1.638-2.059c-0.472-0.674-1.061-0.944-1.89-0.717c-1.153,0.318-2.325,0.559-3.474,0.886
|
||||
c-0.603,0.175-1.097,0.081-1.556-0.315c-0.185-0.16-0.367-0.32-0.548-0.484c-0.7-0.627-1.179-1.421-1.696-2.189
|
||||
c-0.588-0.869-1.095-1.083-2.12-0.84c-0.688,0.16-1.365,0.367-2.039,0.582c-0.914,0.289-1.11,0.567-0.968,1.503
|
||||
c0.225,1.468,0.449,2.938,0.83,4.378c0.247,0.938,0.735,1.664,1.503,2.259c3.252,2.528,6.479,5.088,9.724,7.626
|
||||
c5.317,4.158,10.637,8.315,15.962,12.469c2.921,2.275,5.854,4.543,8.785,6.807c1.679,1.297,3.375,2.569,5.048,3.872
|
||||
c0.868,0.671,1.735,0.89,2.851,0.536c2.671-0.839,5.382-1.555,8.08-2.32c11.044-3.123,22.092-6.238,33.136-9.365
|
||||
c9.451-2.68,18.896-5.371,28.344-8.058c0.729-0.207,1.456-0.406,2.172-0.646c0.641-0.211,0.803-0.517,0.699-1.17
|
||||
c-0.018-0.119-0.054-0.238-0.082-0.354c-0.982-4.201-1.971-8.403-2.949-12.604c-1.592-6.836-3.179-13.676-4.763-20.513
|
||||
c-0.446-1.923-0.879-3.849-1.31-5.778c-0.131-0.578-0.146-1.142,0.127-1.709c1.922-3.998,3.828-8.004,5.738-12.008
|
||||
c1.068-2.244,2.137-4.49,3.205-6.738c0.189-0.395,0.354-0.801,0.444-1.233c0.289-1.362-0.532-2.255-1.896-2.065
|
||||
c-0.146,0.021-0.287,0.058-0.431,0.083c-3.167,0.569-6.326,1.173-9.504,1.671c-0.833,0.132-1.621,0.361-2.185,1.057
|
||||
C147.752,88.059,147.67,88.16,147.486,88.15z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M147.486,88.15c0.184,0.01,0.266-0.092,0.34-0.182
|
||||
c0.563-0.695,1.352-0.925,2.185-1.057c3.178-0.498,6.337-1.102,9.504-1.671c0.144-0.025,0.285-0.063,0.431-0.083
|
||||
c1.363-0.189,2.185,0.703,1.896,2.065c-0.091,0.433-0.255,0.839-0.444,1.233c-1.068,2.248-2.137,4.494-3.205,6.738
|
||||
c-1.91,4.004-3.816,8.01-5.738,12.008c-0.272,0.567-0.258,1.131-0.127,1.709c0.431,1.93,0.863,3.855,1.31,5.778
|
||||
c1.584,6.837,3.171,13.677,4.763,20.513c0.979,4.2,1.967,8.402,2.949,12.604c0.028,0.115,0.064,0.234,0.082,0.354
|
||||
c0.104,0.653-0.059,0.959-0.699,1.17c-0.716,0.239-1.443,0.438-2.172,0.646c-9.447,2.687-18.893,5.378-28.344,8.058
|
||||
c-11.044,3.127-22.092,6.242-33.136,9.365c-2.698,0.766-5.408,1.481-8.08,2.32c-1.116,0.354-1.983,0.135-2.851-0.536
|
||||
c-1.673-1.303-3.37-2.575-5.048-3.872c-2.931-2.264-5.864-4.531-8.785-6.807c-5.325-4.153-10.645-8.311-15.962-12.469
|
||||
c-3.244-2.538-6.472-5.098-9.724-7.626c-0.768-0.595-1.257-1.32-1.503-2.259c-0.381-1.44-0.605-2.91-0.83-4.378
|
||||
c-0.142-0.936,0.054-1.214,0.968-1.503c0.674-0.215,1.351-0.422,2.039-0.582c1.024-0.243,1.532-0.029,2.12,0.84
|
||||
c0.517,0.769,0.996,1.563,1.696,2.189c0.181,0.164,0.364,0.324,0.548,0.484c0.459,0.396,0.954,0.49,1.556,0.315
|
||||
c1.149-0.327,2.321-0.567,3.474-0.886c0.829-0.228,1.418,0.043,1.89,0.717c0.502,0.721,1.041,1.406,1.638,2.059
|
||||
c0.487,0.531,0.97,0.684,1.679,0.479c1.38-0.398,2.785-0.713,4.183-1.056c0.89-0.217,1.069-0.162,1.457,0.634
|
||||
c0.683,1.396,1.896,2.262,3.081,3.158c0.112,0.088,0.259,0.156,0.397,0.174c0.552,0.075,1.03,0.26,1.373,0.735
|
||||
c0.131,0.183,0.374,0.22,0.582,0.288c2.291,0.753,4.586,1.502,6.879,2.252c0.115,0.039,0.233,0.076,0.353,0.098
|
||||
c0.171,0.036,0.287-0.037,0.313-0.213c0.019-0.118,0.019-0.242,0.012-0.365c-0.127-1.674-0.25-3.347-0.385-5.021
|
||||
c-0.063-0.801-0.078-1.604-0.149-2.405c-0.164-1.842-0.22-3.692-0.344-5.538c-0.111-1.703-0.255-3.4-0.386-5.098
|
||||
c-0.062-0.776-0.062-1.556-0.147-2.334c-0.118-1.062-0.121-2.139-0.194-3.207c-0.12-1.747-0.25-3.496-0.388-5.242
|
||||
c-0.06-0.754-0.086-1.507-0.149-2.262c-0.153-1.795-0.214-3.596-0.335-5.392c-0.124-1.847-0.28-3.689-0.407-5.532
|
||||
c-0.072-1.023-0.11-2.045-0.179-3.063c-0.127-1.871-0.269-3.739-0.399-5.609c-0.067-0.971-0.116-1.943-0.183-2.916
|
||||
c-0.075-1.093-0.151-2.184-0.243-3.275c-0.071-0.85-0.123-1.703-0.161-2.551c-0.078-1.802-0.251-3.595-0.351-5.395
|
||||
c-0.136-2.453-0.362-4.902-0.535-7.354c-0.077-1.093-0.107-2.19-0.181-3.284c-0.12-1.771-0.254-3.544-0.388-5.314
|
||||
c-0.06-0.775-0.093-1.554-0.156-2.332c-0.148-1.818-0.213-3.645-0.338-5.468c-0.17-2.478-0.372-4.951-0.542-7.427
|
||||
c-0.125-1.774-0.211-3.55-0.333-5.322c-0.123-1.772-0.28-3.541-0.397-5.315c-0.062-0.923-0.088-1.848-0.176-2.77
|
||||
c-0.259-2.739-0.326-5.493-0.536-8.235c-0.089-1.164-0.146-2.332-0.197-3.501c-0.051-1.165-0.149-2.331-0.249-3.495
|
||||
c-0.069-0.825-0.039-1.651-0.14-2.478c-0.135-1.085-0.127-2.187-0.198-3.279c-0.06-0.948-0.125-1.896-0.22-2.841
|
||||
c-0.045-0.438-0.071-0.873-0.056-1.313c0.021-0.652,0.452-1.152,1.092-1.271c0.214-0.038,0.438-0.04,0.654-0.037
|
||||
c1.418,0.028,2.821-0.137,4.228-0.263c0.823-0.073,1.651-0.094,2.478-0.16c1.746-0.145,3.5-0.2,5.246-0.333
|
||||
c2.161-0.163,4.321-0.308,6.483-0.447c2.16-0.142,4.323-0.296,6.483-0.433c2.405-0.149,4.806-0.369,7.208-0.545
|
||||
c1.649-0.12,3.304-0.207,4.955-0.324c1.724-0.123,3.444-0.272,5.167-0.4c0.947-0.07,1.896-0.113,2.844-0.179
|
||||
c0.996-0.071,1.988-0.161,2.984-0.231c0.971-0.072,1.942-0.142,2.914-0.197c0.485-0.028,0.973-0.021,1.459-0.086
|
||||
c0.678-0.088,1.002,0.131,1.195,0.791c0.166,0.559,0.29,1.133,0.428,1.701c1.06,4.383,2.125,8.764,3.18,13.149
|
||||
c2.23,9.29,4.453,18.582,6.686,27.873c1.766,7.347,3.541,14.69,5.312,22.038c1.587,6.586,3.175,13.174,4.765,19.76
|
||||
C147.311,87.683,147.326,87.955,147.486,88.15z M129.074,127.078c-8.648-34.803-17.28-69.544-25.912-104.285
|
||||
c-0.017-0.068-0.047-0.137-0.077-0.204c-0.007-0.019-0.028-0.042-0.046-0.048c-0.094-0.029-0.013,0.089-0.073-0.013
|
||||
c0,0.38-0.023,0.745,0.003,1.104c0.175,2.672,0.375,5.344,0.541,8.018c0.129,2.064,0.194,4.135,0.339,6.198
|
||||
c0.06,0.851,0.093,1.704,0.149,2.552c0.124,1.971,0.274,3.936,0.394,5.904c0.121,1.992,0.186,3.99,0.341,5.979
|
||||
c0.071,0.899,0.092,1.802,0.153,2.698c0.136,1.943,0.27,3.887,0.388,5.832c0.12,1.97,0.211,3.939,0.333,5.908
|
||||
c0.171,2.746,0.367,5.49,0.533,8.236c0.127,2.066,0.198,4.133,0.347,6.201c0.06,0.85,0.093,1.701,0.146,2.553
|
||||
c0.138,2.211,0.242,4.425,0.433,6.629c0.155,1.813,0.042,3.657,0.579,5.433c0.09,0.299,0.112,0.628,0.112,0.941
|
||||
c-0.01,1.903,0.164,3.794,0.272,5.689c0.179,3.165,0.321,6.326,0.489,9.489c0.082,1.507,0.181,3.014,0.28,4.521
|
||||
c0.034,0.518,0.081,0.588,0.552,0.516c0.438-0.068,0.694,0.096,0.897,0.448c0.242,0.423,0.489,0.845,0.751,1.255
|
||||
c0.573,0.881,1.571,1.268,2.6,1.02c0.473-0.115,0.945-0.242,1.42-0.348c1.223-0.264,2.148,0.211,2.663,1.359
|
||||
c0.118,0.266,0.222,0.545,0.374,0.79c0.461,0.751,1.207,1.046,2.066,0.851c0.714-0.16,1.425-0.33,2.141-0.477
|
||||
c1.139-0.235,1.399-0.119,1.981,0.848c1.026,1.7,2.399,3.059,4.056,4.139C128.5,126.945,128.689,127.12,129.074,127.078z
|
||||
M109.281,126.088c-0.071,0.451-0.044,0.834-0.009,1.216c0.124,1.382,0.202,2.769,0.276,4.154c0.089,1.677,0.211,3.356,0.324,5.032
|
||||
c0.127,1.895,0.262,3.791,0.385,5.686c0.115,1.773,0.218,3.549,0.332,5.324c0.022,0.363,0.078,0.727,0.108,1.09
|
||||
c0.024,0.275,0.149,0.404,0.433,0.33c0.142-0.035,0.281-0.077,0.422-0.113c4.309-1.153,8.619-2.305,12.928-3.459
|
||||
c0.586-0.156,1.176-0.32,1.759-0.488c0.288-0.084,0.342-0.25,0.137-0.481c-0.048-0.058-0.097-0.11-0.147-0.165
|
||||
c-1.904-2.052-3.808-4.109-5.715-6.164c-1.41-1.518-2.824-3.029-4.23-4.55c-2.099-2.274-4.19-4.554-6.291-6.827
|
||||
C109.813,126.479,109.657,126.253,109.281,126.088z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M129.074,127.078c-0.385,0.042-0.574-0.133-0.773-0.262
|
||||
c-1.656-1.08-3.029-2.438-4.056-4.139c-0.582-0.967-0.843-1.083-1.981-0.848c-0.716,0.146-1.427,0.316-2.141,0.477
|
||||
c-0.859,0.195-1.605-0.1-2.066-0.851c-0.152-0.245-0.256-0.524-0.374-0.79c-0.515-1.148-1.44-1.623-2.663-1.359
|
||||
c-0.475,0.105-0.947,0.232-1.42,0.348c-1.029,0.248-2.027-0.139-2.6-1.02c-0.263-0.41-0.509-0.832-0.751-1.255
|
||||
c-0.204-0.353-0.459-0.517-0.897-0.448c-0.472,0.072-0.519,0.002-0.552-0.516c-0.099-1.508-0.198-3.015-0.28-4.521
|
||||
c-0.168-3.163-0.31-6.324-0.489-9.489c-0.108-1.896-0.282-3.786-0.272-5.689c0-0.313-0.022-0.643-0.112-0.941
|
||||
c-0.537-1.775-0.423-3.619-0.579-5.433c-0.19-2.204-0.294-4.418-0.433-6.629c-0.052-0.852-0.086-1.703-0.146-2.553
|
||||
c-0.149-2.068-0.22-4.135-0.347-6.201c-0.166-2.746-0.362-5.49-0.533-8.236c-0.122-1.969-0.213-3.938-0.333-5.908
|
||||
c-0.118-1.945-0.251-3.889-0.388-5.832c-0.062-0.896-0.082-1.799-0.153-2.698c-0.155-1.989-0.22-3.987-0.341-5.979
|
||||
c-0.12-1.969-0.271-3.934-0.394-5.904c-0.056-0.848-0.089-1.701-0.149-2.552c-0.146-2.063-0.21-4.134-0.339-6.198
|
||||
c-0.166-2.674-0.366-5.346-0.541-8.018c-0.026-0.359-0.003-0.725-0.003-1.104c0.06,0.102-0.021-0.017,0.073,0.013
|
||||
c0.019,0.006,0.039,0.029,0.046,0.048c0.03,0.067,0.06,0.136,0.077,0.204C111.794,57.534,120.426,92.275,129.074,127.078z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M109.281,126.088c0.375,0.165,0.532,0.391,0.711,0.584
|
||||
c2.101,2.273,4.192,4.553,6.291,6.827c1.406,1.521,2.82,3.032,4.23,4.55c1.907,2.055,3.811,4.112,5.715,6.164
|
||||
c0.051,0.055,0.1,0.107,0.147,0.165c0.205,0.231,0.151,0.397-0.137,0.481c-0.583,0.168-1.173,0.332-1.759,0.488
|
||||
c-4.31,1.154-8.619,2.306-12.928,3.459c-0.141,0.036-0.28,0.078-0.422,0.113c-0.284,0.074-0.409-0.055-0.433-0.33
|
||||
c-0.03-0.363-0.086-0.727-0.108-1.09c-0.114-1.775-0.217-3.551-0.332-5.324c-0.123-1.895-0.258-3.791-0.385-5.686
|
||||
c-0.113-1.676-0.235-3.355-0.324-5.032c-0.075-1.386-0.153-2.772-0.276-4.154C109.237,126.922,109.21,126.539,109.281,126.088z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="92.33" y1="175.523" x2="165.631" y2="154.338"/>
|
||||
<g>
|
||||
<rect x="91.829" y="172.273" transform="matrix(-0.9608 0.2773 -0.2773 -0.9608 229.7103 318.5596)" width="1" height="6.501"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="165.131" y="151.087" transform="matrix(0.9604 -0.2785 0.2785 0.9604 -36.426 52.2262)" width="0.999" height="6.501"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="84.577" y1="173.4" x2="43.069" y2="139.791"/>
|
||||
<g>
|
||||
<rect x="84.077" y="170.15" transform="matrix(0.7769 0.6296 -0.6296 0.7769 128.0316 -14.5697)" width="1.001" height="6.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="42.57" y="136.541" transform="matrix(-0.7772 -0.6292 0.6292 -0.7772 -11.4143 275.5419)" width="1" height="6.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="179.477" y1="145.445" x2="179.477" y2="0.5"/>
|
||||
<g>
|
||||
<rect x="176.227" y="144.945" width="6.5" height="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="176.227" width="6.5" height="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 184.9663 70.1816)" fill="#010101" font-family="'Lato-Regular'" font-size="9.1539">15 cm</text>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 35.2339 164.9307)" fill="#010101" font-family="'Lato-Regular'" font-size="9.1539">7 cm</text>
|
||||
</g>
|
||||
<text transform="matrix(1 0 0 1 126.2222 179.0127)" fill="#010101" font-family="'Lato-Regular'" font-size="9.1539">7 cm</text>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 13 KiB |
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/banner.jpg
Normal file
BIN
public/assets/images/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
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 |
168
public/assets/images/dimensiones.svg
Normal file
168
public/assets/images/dimensiones.svg
Normal file
@ -0,0 +1,168 @@
|
||||
<?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="312.586px" height="234.096px" viewBox="0 0 312.586 234.096" enable-background="new 0 0 312.586 234.096"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
|
||||
<rect x="263.025" y="20.11" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" stroke="#B4B4B4" stroke-miterlimit="10" width="20.387" height="20.388"/>
|
||||
<rect x="263.025" y="178.285" fill-rule="evenodd" clip-rule="evenodd" fill="#3DB54A" width="20.387" height="20.387"/>
|
||||
<rect x="263.025" y="151.921" fill-rule="evenodd" clip-rule="evenodd" fill="#FAED24" width="20.387" height="20.389"/>
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#D2D3D4" points="256.167,233.705 8.193,233.705 37.523,137.652
|
||||
226.836,137.652 "/>
|
||||
<g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M173.594,109.162c-0.18-0.219-0.197-0.525-0.266-0.811
|
||||
c-1.783-7.387-3.563-14.774-5.344-22.16c-1.985-8.24-3.977-16.476-5.956-24.716c-2.503-10.419-4.996-20.839-7.497-31.259
|
||||
c-1.184-4.917-2.379-9.83-3.566-14.745c-0.154-0.638-0.293-1.281-0.479-1.908c-0.218-0.74-0.581-0.986-1.341-0.887
|
||||
c-0.546,0.073-1.092,0.063-1.637,0.097c-1.09,0.062-2.18,0.14-3.268,0.221c-1.117,0.079-2.23,0.18-3.348,0.259
|
||||
c-1.063,0.075-2.125,0.123-3.188,0.202c-1.934,0.142-3.862,0.311-5.796,0.449c-1.852,0.132-3.707,0.228-5.557,0.364
|
||||
c-2.694,0.197-5.388,0.442-8.085,0.611c-2.422,0.154-4.848,0.327-7.27,0.484c-2.425,0.158-4.848,0.32-7.271,0.502
|
||||
c-1.959,0.149-3.925,0.212-5.884,0.375c-0.926,0.074-1.855,0.096-2.778,0.179c-1.577,0.14-3.149,0.326-4.741,0.293
|
||||
c-0.242-0.002-0.492,0-0.733,0.042c-0.718,0.133-1.2,0.694-1.224,1.426c-0.018,0.493,0.012,0.981,0.063,1.472
|
||||
c0.107,1.058,0.18,2.123,0.246,3.185c0.08,1.227,0.071,2.462,0.223,3.678c0.112,0.926,0.079,1.853,0.156,2.779
|
||||
c0.111,1.305,0.223,2.613,0.279,3.919c0.058,1.312,0.121,2.622,0.221,3.927c0.234,3.075,0.311,6.164,0.601,9.235
|
||||
c0.099,1.034,0.128,2.072,0.197,3.106c0.132,1.991,0.308,3.973,0.444,5.962c0.137,1.987,0.233,3.978,0.373,5.969
|
||||
c0.192,2.775,0.419,5.55,0.609,8.328c0.141,2.046,0.213,4.094,0.379,6.133c0.07,0.872,0.107,1.746,0.175,2.615
|
||||
c0.15,1.984,0.302,3.973,0.436,5.96c0.083,1.227,0.117,2.458,0.203,3.682c0.194,2.751,0.448,5.498,0.601,8.249
|
||||
c0.111,2.018,0.305,4.027,0.393,6.049c0.042,0.951,0.102,1.908,0.181,2.861c0.103,1.225,0.188,2.447,0.272,3.672
|
||||
c0.074,1.092,0.129,2.184,0.204,3.271c0.147,2.096,0.306,4.191,0.448,6.291c0.077,1.141,0.119,2.287,0.201,3.434
|
||||
c0.141,2.066,0.317,4.133,0.455,6.203c0.137,2.016,0.205,4.035,0.377,6.049c0.071,0.846,0.1,1.691,0.168,2.535
|
||||
c0.154,1.959,0.301,3.92,0.435,5.879c0.081,1.199,0.085,2.406,0.218,3.598c0.096,0.871,0.096,1.746,0.166,2.617
|
||||
c0.145,1.904,0.307,3.807,0.432,5.717c0.139,2.07,0.201,4.145,0.385,6.209c0.08,0.9,0.098,1.801,0.168,2.699
|
||||
c0.15,1.877,0.289,3.754,0.432,5.631c0.008,0.139,0.008,0.275-0.014,0.41c-0.029,0.197-0.158,0.277-0.351,0.238
|
||||
c-0.134-0.023-0.267-0.064-0.396-0.109c-2.571-0.84-5.145-1.682-7.715-2.525c-0.232-0.076-0.505-0.117-0.652-0.324
|
||||
c-0.385-0.531-0.92-0.74-1.539-0.824c-0.154-0.018-0.32-0.096-0.445-0.195c-1.33-1.004-2.689-1.975-3.455-3.541
|
||||
c-0.436-0.893-0.636-0.955-1.634-0.711c-1.567,0.385-3.143,0.738-4.69,1.186c-0.795,0.229-1.338,0.059-1.883-0.537
|
||||
c-0.67-0.732-1.275-1.502-1.838-2.309c-0.529-0.756-1.189-1.061-2.119-0.805c-1.293,0.357-2.607,0.627-3.895,0.992
|
||||
c-0.677,0.197-1.23,0.092-1.746-0.352c-0.207-0.182-0.412-0.359-0.615-0.545c-0.785-0.701-1.322-1.594-1.901-2.455
|
||||
c-0.659-0.975-1.229-1.215-2.378-0.941c-0.771,0.18-1.53,0.412-2.285,0.652c-1.025,0.324-1.245,0.637-1.086,1.686
|
||||
c0.252,1.646,0.504,3.293,0.931,4.91c0.276,1.051,0.825,1.867,1.687,2.531c3.646,2.836,7.266,5.707,10.904,8.555
|
||||
c5.963,4.662,11.93,9.324,17.9,13.982c3.277,2.553,6.565,5.094,9.853,7.633c1.883,1.455,3.785,2.881,5.661,4.342
|
||||
c0.974,0.754,1.945,1,3.197,0.604c2.996-0.943,6.035-1.744,9.061-2.604c12.386-3.502,24.775-6.996,37.161-10.502
|
||||
c10.599-3.006,21.192-6.023,31.787-9.037c0.817-0.232,1.632-0.457,2.435-0.723c0.719-0.236,0.9-0.582,0.785-1.313
|
||||
c-0.02-0.133-0.061-0.268-0.092-0.396c-1.102-4.711-2.211-9.426-3.308-14.135c-1.785-7.666-3.565-15.338-5.341-23.006
|
||||
c-0.501-2.154-0.986-4.314-1.469-6.479c-0.147-0.648-0.164-1.281,0.143-1.916c2.154-4.484,4.293-8.977,6.436-13.467
|
||||
c1.197-2.518,2.396-5.035,3.594-7.557c0.213-0.441,0.396-0.898,0.498-1.385c0.324-1.527-0.597-2.527-2.125-2.314
|
||||
c-0.164,0.021-0.322,0.063-0.484,0.092c-3.551,0.641-7.094,1.316-10.658,1.875c-0.934,0.146-1.817,0.404-2.449,1.184
|
||||
C173.891,109.058,173.799,109.171,173.594,109.162z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M173.594,109.162c0.205,0.01,0.297-0.104,0.381-0.205
|
||||
c0.632-0.779,1.516-1.037,2.449-1.184c3.564-0.559,7.107-1.234,10.658-1.875c0.162-0.029,0.32-0.07,0.484-0.092
|
||||
c1.528-0.213,2.449,0.787,2.125,2.314c-0.102,0.486-0.285,0.943-0.498,1.385c-1.198,2.521-2.396,5.039-3.594,7.557
|
||||
c-2.143,4.49-4.281,8.982-6.436,13.467c-0.307,0.635-0.29,1.268-0.143,1.916c0.482,2.164,0.968,4.324,1.469,6.479
|
||||
c1.775,7.668,3.556,15.34,5.341,23.006c1.097,4.709,2.206,9.424,3.308,14.135c0.031,0.129,0.072,0.264,0.092,0.396
|
||||
c0.115,0.73-0.066,1.076-0.785,1.313c-0.803,0.266-1.617,0.49-2.435,0.723c-10.595,3.014-21.188,6.031-31.787,9.037
|
||||
c-12.386,3.506-24.775,7-37.161,10.502c-3.025,0.859-6.064,1.66-9.061,2.604c-1.252,0.396-2.224,0.15-3.197-0.604
|
||||
c-1.876-1.461-3.778-2.887-5.661-4.342c-3.287-2.539-6.575-5.08-9.853-7.633c-5.971-4.658-11.938-9.32-17.9-13.982
|
||||
c-3.639-2.848-7.258-5.719-10.904-8.555c-0.861-0.664-1.41-1.48-1.687-2.531c-0.427-1.617-0.679-3.264-0.931-4.91
|
||||
c-0.159-1.049,0.061-1.361,1.086-1.686c0.755-0.24,1.515-0.473,2.285-0.652c1.149-0.273,1.719-0.033,2.378,0.941
|
||||
c0.579,0.861,1.116,1.754,1.901,2.455c0.203,0.186,0.408,0.363,0.615,0.545c0.516,0.443,1.069,0.549,1.746,0.352
|
||||
c1.287-0.365,2.602-0.635,3.895-0.992c0.93-0.256,1.59,0.049,2.119,0.805c0.563,0.807,1.168,1.576,1.838,2.309
|
||||
c0.545,0.596,1.088,0.766,1.883,0.537c1.548-0.447,3.123-0.801,4.69-1.186c0.998-0.244,1.198-0.182,1.634,0.711
|
||||
c0.766,1.566,2.125,2.537,3.455,3.541c0.125,0.1,0.291,0.178,0.445,0.195c0.619,0.084,1.154,0.293,1.539,0.824
|
||||
c0.147,0.207,0.42,0.248,0.652,0.324c2.57,0.844,5.144,1.686,7.715,2.525c0.129,0.045,0.262,0.086,0.396,0.109
|
||||
c0.192,0.039,0.321-0.041,0.351-0.238c0.021-0.135,0.021-0.271,0.014-0.41c-0.143-1.877-0.281-3.754-0.432-5.631
|
||||
c-0.07-0.898-0.088-1.799-0.168-2.699c-0.184-2.064-0.246-4.139-0.385-6.209c-0.125-1.91-0.287-3.813-0.432-5.717
|
||||
c-0.07-0.871-0.07-1.746-0.166-2.617c-0.133-1.191-0.137-2.398-0.218-3.598c-0.134-1.959-0.28-3.92-0.435-5.879
|
||||
c-0.068-0.844-0.097-1.689-0.168-2.535c-0.172-2.014-0.24-4.033-0.377-6.049c-0.138-2.07-0.314-4.137-0.455-6.203
|
||||
c-0.082-1.146-0.124-2.293-0.201-3.434c-0.143-2.1-0.301-4.195-0.448-6.291c-0.075-1.088-0.13-2.18-0.204-3.271
|
||||
c-0.084-1.225-0.17-2.447-0.272-3.672c-0.079-0.953-0.139-1.91-0.181-2.861c-0.088-2.021-0.281-4.031-0.393-6.049
|
||||
c-0.152-2.751-0.406-5.498-0.601-8.249c-0.086-1.225-0.12-2.456-0.203-3.682c-0.134-1.987-0.285-3.976-0.436-5.96
|
||||
c-0.067-0.87-0.104-1.744-0.175-2.615c-0.166-2.04-0.238-4.087-0.379-6.133c-0.19-2.777-0.417-5.552-0.609-8.328
|
||||
c-0.14-1.991-0.236-3.982-0.373-5.969c-0.137-1.989-0.313-3.971-0.444-5.962c-0.069-1.034-0.099-2.072-0.197-3.106
|
||||
c-0.29-3.071-0.366-6.16-0.601-9.235c-0.1-1.305-0.163-2.615-0.221-3.927c-0.057-1.306-0.168-2.614-0.279-3.919
|
||||
c-0.077-0.926-0.044-1.853-0.156-2.779c-0.151-1.216-0.143-2.451-0.223-3.678c-0.066-1.062-0.139-2.127-0.246-3.185
|
||||
c-0.051-0.49-0.08-0.979-0.063-1.472c0.023-0.732,0.506-1.292,1.224-1.426c0.241-0.042,0.491-0.044,0.733-0.042
|
||||
c1.592,0.033,3.164-0.153,4.741-0.293c0.923-0.083,1.853-0.105,2.778-0.179c1.959-0.162,3.925-0.226,5.884-0.375
|
||||
c2.423-0.182,4.846-0.344,7.271-0.502c2.422-0.158,4.848-0.331,7.27-0.484c2.697-0.168,5.391-0.414,8.085-0.611
|
||||
c1.85-0.136,3.705-0.232,5.557-0.364c1.934-0.138,3.862-0.307,5.796-0.449c1.063-0.079,2.125-0.127,3.188-0.202
|
||||
c1.117-0.079,2.23-0.18,3.348-0.259c1.088-0.081,2.178-0.159,3.268-0.221c0.545-0.033,1.091-0.024,1.637-0.097
|
||||
c0.76-0.099,1.123,0.147,1.341,0.887c0.187,0.627,0.325,1.271,0.479,1.908c1.188,4.915,2.383,9.828,3.566,14.745
|
||||
c2.501,10.419,4.994,20.839,7.497,31.259c1.979,8.24,3.971,16.476,5.956,24.716c1.78,7.386,3.561,14.773,5.344,22.16
|
||||
C173.396,108.636,173.414,108.943,173.594,109.162z M152.945,152.818c-9.699-39.031-19.379-77.993-29.06-116.953
|
||||
c-0.019-0.077-0.053-0.153-0.086-0.23c-0.008-0.02-0.031-0.046-0.052-0.052c-0.105-0.033-0.016,0.099-0.082-0.015
|
||||
c0,0.427-0.025,0.836,0.004,1.239c0.197,2.996,0.421,5.993,0.607,8.991c0.145,2.315,0.217,4.637,0.381,6.95
|
||||
c0.066,0.955,0.104,1.912,0.167,2.863c0.138,2.21,0.308,4.414,0.442,6.621c0.135,2.235,0.209,4.476,0.381,6.705
|
||||
c0.08,1.01,0.104,2.021,0.172,3.027c0.154,2.179,0.304,4.359,0.436,6.541c0.134,2.208,0.236,4.417,0.373,6.625
|
||||
c0.192,3.08,0.412,6.157,0.598,9.238c0.143,2.316,0.223,4.635,0.39,6.953c0.066,0.953,0.104,1.908,0.163,2.863
|
||||
c0.154,2.479,0.271,4.961,0.485,7.434c0.174,2.033,0.046,4.102,0.648,6.092c0.101,0.336,0.126,0.705,0.126,1.057
|
||||
c-0.012,2.135,0.184,4.256,0.305,6.381c0.201,3.549,0.359,7.094,0.549,10.641c0.092,1.689,0.202,3.381,0.313,5.072
|
||||
c0.038,0.58,0.091,0.658,0.62,0.578c0.491-0.078,0.777,0.107,1.006,0.5c0.271,0.477,0.548,0.949,0.843,1.41
|
||||
c0.642,0.986,1.761,1.42,2.917,1.143c0.529-0.129,1.059-0.271,1.592-0.391c1.371-0.295,2.408,0.236,2.986,1.525
|
||||
c0.133,0.299,0.248,0.611,0.42,0.885c0.518,0.844,1.354,1.174,2.316,0.955c0.801-0.18,1.598-0.371,2.401-0.535
|
||||
c1.276-0.266,1.569-0.133,2.222,0.951c1.15,1.906,2.691,3.43,4.549,4.641C152.301,152.669,152.514,152.865,152.945,152.818z
|
||||
M130.748,151.707c-0.08,0.506-0.051,0.936-0.011,1.363c0.139,1.551,0.226,3.105,0.31,4.658c0.101,1.881,0.236,3.766,0.364,5.645
|
||||
c0.142,2.125,0.294,4.252,0.431,6.377c0.13,1.988,0.245,3.979,0.373,5.971c0.025,0.408,0.088,0.814,0.121,1.221
|
||||
c0.027,0.311,0.168,0.455,0.486,0.371c0.158-0.039,0.314-0.088,0.473-0.127c4.832-1.295,9.665-2.584,14.498-3.879
|
||||
c0.657-0.176,1.318-0.359,1.973-0.547c0.322-0.096,0.383-0.281,0.153-0.543c-0.054-0.063-0.108-0.123-0.165-0.182
|
||||
c-2.137-2.305-4.271-4.609-6.409-6.914c-1.581-1.701-3.167-3.396-4.745-5.104c-2.354-2.549-4.698-5.105-7.055-7.656
|
||||
C131.344,152.146,131.169,151.89,130.748,151.707z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M152.945,152.818c-0.432,0.047-0.645-0.148-0.867-0.295
|
||||
c-1.857-1.211-3.398-2.734-4.549-4.641c-0.652-1.084-0.945-1.217-2.222-0.951c-0.804,0.164-1.601,0.355-2.401,0.535
|
||||
c-0.963,0.219-1.799-0.111-2.316-0.955c-0.172-0.273-0.287-0.586-0.42-0.885c-0.578-1.289-1.615-1.82-2.986-1.525
|
||||
c-0.533,0.119-1.063,0.262-1.592,0.391c-1.156,0.277-2.275-0.156-2.917-1.143c-0.295-0.461-0.571-0.934-0.843-1.41
|
||||
c-0.229-0.393-0.515-0.578-1.006-0.5c-0.529,0.08-0.582,0.002-0.62-0.578c-0.111-1.691-0.222-3.383-0.313-5.072
|
||||
c-0.189-3.547-0.348-7.092-0.549-10.641c-0.121-2.125-0.316-4.246-0.305-6.381c0-0.352-0.025-0.721-0.126-1.057
|
||||
c-0.603-1.99-0.475-4.059-0.648-6.092c-0.214-2.473-0.331-4.955-0.485-7.434c-0.059-0.955-0.097-1.91-0.163-2.863
|
||||
c-0.167-2.318-0.247-4.637-0.39-6.953c-0.186-3.081-0.405-6.158-0.598-9.238c-0.137-2.208-0.239-4.418-0.373-6.625
|
||||
c-0.132-2.182-0.281-4.362-0.436-6.541c-0.068-1.005-0.092-2.017-0.172-3.027c-0.172-2.229-0.246-4.47-0.381-6.705
|
||||
c-0.135-2.207-0.305-4.411-0.442-6.621c-0.063-0.951-0.101-1.908-0.167-2.863c-0.164-2.313-0.236-4.635-0.381-6.95
|
||||
c-0.187-2.999-0.41-5.995-0.607-8.991c-0.029-0.403-0.004-0.813-0.004-1.239c0.066,0.114-0.023-0.018,0.082,0.015
|
||||
c0.021,0.006,0.044,0.032,0.052,0.052c0.033,0.077,0.067,0.153,0.086,0.23C133.566,74.825,143.246,113.787,152.945,152.818z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M130.748,151.707c0.421,0.184,0.596,0.439,0.797,0.654
|
||||
c2.356,2.551,4.701,5.107,7.055,7.656c1.578,1.707,3.164,3.402,4.745,5.104c2.139,2.305,4.272,4.609,6.409,6.914
|
||||
c0.057,0.059,0.111,0.119,0.165,0.182c0.229,0.262,0.169,0.447-0.153,0.543c-0.654,0.188-1.315,0.371-1.973,0.547
|
||||
c-4.833,1.295-9.666,2.584-14.498,3.879c-0.158,0.039-0.314,0.088-0.473,0.127c-0.318,0.084-0.459-0.061-0.486-0.371
|
||||
c-0.033-0.406-0.096-0.813-0.121-1.221c-0.128-1.992-0.243-3.982-0.373-5.971c-0.137-2.125-0.289-4.252-0.431-6.377
|
||||
c-0.128-1.879-0.264-3.764-0.364-5.645c-0.084-1.553-0.171-3.107-0.31-4.658C130.697,152.642,130.668,152.212,130.748,151.707z"
|
||||
/>
|
||||
</g>
|
||||
<rect x="263.025" y="46.471" fill-rule="evenodd" clip-rule="evenodd" fill="#010101" width="20.387" height="20.388"/>
|
||||
<rect x="263.025" y="72.834" fill-rule="evenodd" clip-rule="evenodd" fill="#1072BA" width="20.387" height="20.388"/>
|
||||
<rect x="263.025" y="99.197" fill-rule="evenodd" clip-rule="evenodd" fill="#F15C27" width="20.387" height="20.389"/>
|
||||
<rect x="263.025" y="125.56" fill-rule="evenodd" clip-rule="evenodd" fill="#EC2227" width="20.387" height="20.387"/>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="111.679" y1="207.164" x2="194" y2="183.371"/>
|
||||
<g>
|
||||
|
||||
<rect x="111.179" y="203.915" transform="matrix(-0.9607 0.2776 -0.2776 -0.9607 276.4689 375.1919)" width="0.999" height="6.5"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="193.5" y="180.122" transform="matrix(0.9608 -0.2773 0.2773 0.9608 -43.2408 60.9872)" width="1" height="6.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="103.09" y1="204.804" x2="56.446" y2="167.037"/>
|
||||
<g>
|
||||
<rect x="102.59" y="201.554" transform="matrix(0.7761 0.6306 -0.6306 0.7761 152.239 -19.1526)" width="1" height="6.501"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="55.947" y="163.787" transform="matrix(-0.777 -0.6295 0.6295 -0.777 -4.8341 332.3609)" width="0.999" height="6.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="209.469" y1="173.476" x2="209.469" y2="10.804"/>
|
||||
<g>
|
||||
<rect x="206.219" y="172.976" width="6.5" height="1"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="206.219" y="10.304" width="6.5" height="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 215.6255 89.0103)" fill="#010101" font-family="'Lato-Regular'" font-size="10.2658">15 cm</text>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 47.7061 195.2666)" fill="#010101" font-family="'Lato-Regular'" font-size="10.2658">7 cm</text>
|
||||
</g>
|
||||
<text transform="matrix(1 0 0 1 149.7456 211.0596)" fill="#010101" font-family="'Lato-Regular'" font-size="10.2658">7 cm</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 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,19 +1,322 @@
|
||||
function resize() {
|
||||
let p = 400 / 1030
|
||||
$('.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)
|
||||
})
|
||||
}
|
||||
|
||||
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() {
|
||||
$('.sticky').sticky({
|
||||
register_resizeables()
|
||||
|
||||
if (vw < 1080) {
|
||||
resize()
|
||||
}
|
||||
|
||||
$('.menu.sticky').sticky()
|
||||
$('.column2 .sticky').sticky({
|
||||
context: '#column'
|
||||
})
|
||||
$('#subir').sticky()
|
||||
|
||||
$('.shopping.cart').innerText = 0
|
||||
|
||||
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,51 +45,111 @@ input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, sans;
|
||||
}
|
||||
|
||||
.ui.container {
|
||||
max-width: 1030px;
|
||||
}
|
||||
|
||||
section > .container {
|
||||
height: 100%;
|
||||
}
|
||||
section > .container > .column1 {
|
||||
width: 42.9166666667rem;
|
||||
}
|
||||
section > .container > .column2 {
|
||||
width: 21.4583333333rem;
|
||||
}
|
||||
|
||||
#header {
|
||||
background-image: url("../images/header.png");
|
||||
#backgrounds .cabezal {
|
||||
height: 25rem;
|
||||
background-image: url("../images/banner.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
background-color: rgba(100, 100, 0, 0.3);
|
||||
background-size: 100rem;
|
||||
background-position: top center;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
#backgrounds .seccion1 {
|
||||
height: 25rem;
|
||||
background-image: linear-gradient(#cccccc, #cccccc);
|
||||
background-position: left 7rem;
|
||||
background-size: 100% 8rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#backgrounds .seccion2 {
|
||||
height: 27.5rem;
|
||||
background-image: url("../images/fondo23.png");
|
||||
}
|
||||
#backgrounds .seccion2 .diagonal {
|
||||
border-bottom: 27.5rem solid rgba(204, 204, 204, 0.5);
|
||||
border-right: 118.75rem solid transparent;
|
||||
}
|
||||
#backgrounds .dimensiones {
|
||||
height: 27.5rem;
|
||||
background-image: url("../images/fondo23.png");
|
||||
}
|
||||
#backgrounds .dimensiones .fondo-gris {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(204, 204, 204, 0.5);
|
||||
}
|
||||
#backgrounds .construido {
|
||||
height: 21.875rem;
|
||||
background-image: url("../images/fondo4.jpg");
|
||||
}
|
||||
#backgrounds .corporativos {
|
||||
height: 32.5rem;
|
||||
background-image: url("../images/fondo5.png");
|
||||
}
|
||||
#backgrounds .testimonios {
|
||||
height: 21.875rem;
|
||||
background-image: linear-gradient(#cccccc, #cccccc);
|
||||
background-position: left 7.1875rem;
|
||||
background-size: 100% 7.375rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#backgrounds .formulario {
|
||||
height: 30rem;
|
||||
background-color: #cccccc;
|
||||
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
body {
|
||||
height: 211.25rem;
|
||||
font-family: Roboto, sans;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: 67.5rem !important;
|
||||
height: 211.25rem;
|
||||
position: relative;
|
||||
top: -211.25rem;
|
||||
/*&>.column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
#content #header {
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 25rem;
|
||||
}
|
||||
#header > .container {
|
||||
height: 400px;
|
||||
}
|
||||
#header .ui.menu {
|
||||
#content #header .ui.menu {
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
background-color: rgba(100, 100, 100, 0.3) !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
#header .ui.menu .dropdown .menu {
|
||||
background: none !important;
|
||||
#content #header .ui.menu .dropdown .menu {
|
||||
/*background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
box-shadow: none !important;*/
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#header .ui.menu .item {
|
||||
#content #header .ui.menu .dropdown .menu .item {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
#content #header .ui.menu .item {
|
||||
color: inherit !important;
|
||||
font-size: 2rem;
|
||||
padding: 1.25rem !important;
|
||||
}
|
||||
#header .ui.menu .item .shopping.cart div {
|
||||
#content #header .ui.menu .item .shopping.cart div {
|
||||
position: relative;
|
||||
color: black;
|
||||
display: inline-block;
|
||||
@ -98,174 +158,358 @@ section > .container > .column2 {
|
||||
font-size: 1rem;
|
||||
font-family: Roboto, sans;
|
||||
}
|
||||
#header .logo {
|
||||
#content #header .logo {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
#header .logo img {
|
||||
#content #header .logo img {
|
||||
width: 50%;
|
||||
max-width: 64.375rem;
|
||||
}
|
||||
#header .logo .frase1 {
|
||||
#content #header .logo .frase1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#header .logo .frase2 {
|
||||
#content #header .logo .frase2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.simple.segment {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.simple.segment > .ui.grid {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#seccion1 {
|
||||
background-image: linear-gradient(#c8c8c8, #c8c8c8);
|
||||
background-position: left 6.3rem;
|
||||
background-size: 100% 8.375rem;
|
||||
background-repeat: no-repeat;
|
||||
#content > .grid > .column1 #seccion1 {
|
||||
height: 25rem;
|
||||
margin-bottom: 2rem !important;
|
||||
width: 100%;
|
||||
}
|
||||
#seccion1 .column1 {
|
||||
width: 42.9166666667rem;
|
||||
#content > .grid > .column1 #seccion1 .image-container {
|
||||
/*display: flex;
|
||||
justify-content: space-between;*/
|
||||
height: 15rem;
|
||||
/*img {
|
||||
height: rem(155);
|
||||
width: rem(188);
|
||||
margin-top: rem(85);
|
||||
}*/
|
||||
}
|
||||
#seccion1 .column1 .image-container {
|
||||
#content > .grid > .column1 #seccion1 .paragraph {
|
||||
padding-top: 1.75rem;
|
||||
line-height: 0.875rem;
|
||||
text-align: justify;
|
||||
}
|
||||
#content > .grid > .column1 #seccion1 .paragraph .header {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 {
|
||||
height: 27.5rem;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 > .column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 > .column::after {
|
||||
clear: both;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 .column1 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 .column1 img {
|
||||
width: 19.8125rem;
|
||||
height: 19.8125rem;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 .column2 {
|
||||
margin-top: 7.125rem;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 .column2 .row:first-child {
|
||||
background-color: #00427b;
|
||||
color: white;
|
||||
height: 11.25rem;
|
||||
width: 23.75rem;
|
||||
padding: 2rem;
|
||||
margin-left: -3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 .column2 .row:first-child .header {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 .column2 .row:first-child ul {
|
||||
list-style: disc inside;
|
||||
font-size: 0.8333333333rem;
|
||||
}
|
||||
#content > .grid > .column1 #seccion2 .column2 .row:last-child {
|
||||
margin-top: 1.125rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#seccion1 .column1 .image-container img {
|
||||
height: 9.6875rem;
|
||||
margin-top: 5rem;
|
||||
#content > .grid > .column1 #seccion2 .column2 .row:last-child img {
|
||||
width: 4.375rem;
|
||||
height: 5.3125rem;
|
||||
}
|
||||
#seccion1 .ui.simple.segment {
|
||||
background: none !important;
|
||||
margin-top: 2rem !important;
|
||||
font-size: 1.1667rem;
|
||||
}
|
||||
#seccion1 .ui.simple.segment .header {
|
||||
font-size: 1.833rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#seccion1 .grid .column, #seccion1 .grid .column .column {
|
||||
padding-top: 0;
|
||||
}
|
||||
#seccion1 img {
|
||||
height: 9.6875rem;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
#seccion2 {
|
||||
#content > .grid > .column1 #dimensiones {
|
||||
height: 27.5rem;
|
||||
background-image: url("../images/fondo23.png");
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#dimensiones {
|
||||
height: 27.5rem;
|
||||
background-image: url("../images/fondo23.png");
|
||||
#content > .grid > .column1 #dimensiones .header {
|
||||
padding: 2.3125rem 0 !important;
|
||||
}
|
||||
|
||||
#construido {
|
||||
#content > .grid > .column1 #dimensiones .header .bigger {
|
||||
font-size: 1rem;
|
||||
}
|
||||
#content > .grid > .column1 #dimensiones .images {
|
||||
display: flex;
|
||||
}
|
||||
#content > .grid > .column1 #dimensiones .images .column {
|
||||
float: left;
|
||||
}
|
||||
#content > .grid > .column1 #dimensiones .images .column > img {
|
||||
width: 19.5625rem;
|
||||
height: 14.6875rem;
|
||||
}
|
||||
#content > .grid > .column1 #dimensiones .images .column div {
|
||||
width: 19.5625rem;
|
||||
margin-top: 1.5625rem;
|
||||
}
|
||||
#content > .grid > .column1 #construido {
|
||||
height: 21.875rem;
|
||||
background-image: url("../images/fondo4.png");
|
||||
background-color: #64c8ff;
|
||||
padding-top: 1.4375rem !important;
|
||||
}
|
||||
|
||||
#corporativos {
|
||||
height: 25rem;
|
||||
background-image: url("../images/fondo5.png");
|
||||
#content > .grid > .column1 #construido .header {
|
||||
font-size: 1.8333333333rem;
|
||||
padding: 0.625rem 2.6875rem;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
#felices {
|
||||
background-image: linear-gradient(#c8c8c8, #c8c8c8);
|
||||
background-position: left 3rem;
|
||||
background-size: 100% 5rem;
|
||||
background-repeat: no-repeat;
|
||||
height: 21.875rem;
|
||||
}
|
||||
|
||||
#formulario {
|
||||
height: 30rem;
|
||||
}
|
||||
#formulario .whatsapp-link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#sticky_container {
|
||||
position: relative;
|
||||
#content > .grid > .column2 {
|
||||
height: 101.875rem;
|
||||
top: -178.75rem;
|
||||
}
|
||||
#sticky_container #column {
|
||||
position: absolute;
|
||||
width: 42.9166666667rem;
|
||||
height: 101.875rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#sticky_container .sticky {
|
||||
float: right;
|
||||
#content > .grid > .column2 .sticky {
|
||||
height: 16.5625rem;
|
||||
width: 19.375rem;
|
||||
padding-top: 2.75rem;
|
||||
margin: auto;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child {
|
||||
#content > .grid > .column2 .sticky .row:first-child {
|
||||
height: 10.625rem;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:first-child .column::after {
|
||||
clear: both;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 {
|
||||
vertical-align: bottom;
|
||||
padding-top: 1.25rem;
|
||||
width: 12.9166666667rem;
|
||||
font-size: 1.1666666667rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .titulo {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .linea {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .titulo {
|
||||
font-size: 2.0833333333rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .precio {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .precio {
|
||||
font-size: 1.3333333333rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores {
|
||||
vertical-align: center;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .white {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .text {
|
||||
margin-right: 0.1875rem;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .white {
|
||||
border: thin solid black;
|
||||
background-color: white;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .black {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .black {
|
||||
background-color: black;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .blue {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .green {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .green {
|
||||
background-color: lime;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .yellow {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .orange {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .orange {
|
||||
background-color: #ff8200;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .red {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .red {
|
||||
background-color: red;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .colores .circle {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .colores .circle {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 8000px;
|
||||
margin: auto 0.0625rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sticky_container .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;
|
||||
border: thin solid black;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0.05rem;
|
||||
font-size: 0.8333333333rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .input button {
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .input button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:first-child .column1 .input input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:first-child .column2 {
|
||||
width: 6.4583333333rem;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:first-child .column2 img {
|
||||
width: 6.875rem;
|
||||
height: 10rem;
|
||||
}
|
||||
#content > .grid > .column2 .sticky .row:last-child .button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
#content #corporativos {
|
||||
width: 100%;
|
||||
height: 32.5rem;
|
||||
}
|
||||
#content #corporativos > .column {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
#content #corporativos > .column::after {
|
||||
clear: both;
|
||||
}
|
||||
#content #corporativos .column1 {
|
||||
width: 67%;
|
||||
}
|
||||
#content #corporativos .column1 > .header {
|
||||
margin-top: 4.1875rem;
|
||||
margin-bottom: 2.3125rem;
|
||||
}
|
||||
#content #corporativos .column1 > .header .bigger {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
#content #corporativos .column1 .opciones {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#content #corporativos .column1 .opciones .opcion {
|
||||
display: inline-block;
|
||||
}
|
||||
#content #corporativos .column1 .opciones .opcion .img-grande {
|
||||
display: inline-block;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
#content #corporativos .column1 .opciones .opcion .img-grande img {
|
||||
width: 8.4375rem;
|
||||
height: 12.5rem;
|
||||
}
|
||||
#content #corporativos .column1 .opciones .opcion .descripcion {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: 12.5rem;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
#content #corporativos .column1 .opciones .opcion .descripcion .images {
|
||||
margin-top: 2.125rem;
|
||||
}
|
||||
#content #corporativos .column1 .opciones .opcion .descripcion .images img {
|
||||
width: 4.375rem;
|
||||
height: 5.3125rem;
|
||||
}
|
||||
#content #corporativos .column2 {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
}
|
||||
#content #corporativos .column2 .header {
|
||||
margin-top: 2.875rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
#content #corporativos .column2 form .colores {
|
||||
vertical-align: center;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .text {
|
||||
margin-right: 0.1875rem;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .white {
|
||||
border: thin solid black;
|
||||
background-color: white;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .black {
|
||||
background-color: black;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .blue {
|
||||
background-color: blue;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .green {
|
||||
background-color: lime;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .orange {
|
||||
background-color: #ff8200;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .red {
|
||||
background-color: red;
|
||||
}
|
||||
#content #corporativos .column2 form .colores .circle {
|
||||
display: inline-block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 8000px;
|
||||
margin: auto 0.0625rem;
|
||||
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 {
|
||||
width: 4.5rem;
|
||||
border: thin solid black;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0.05rem;
|
||||
font-size: 0.8333333333rem;
|
||||
}
|
||||
#content #corporativos .column2 form .input.cantidad button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
@ -273,23 +517,214 @@ section > .container > .column2 {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .input input {
|
||||
#content #corporativos .column2 form .input.cantidad input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column2 {
|
||||
#content #corporativos .column2 form .input [type=file] {
|
||||
display: none;
|
||||
}
|
||||
#content #corporativos .column2 form .input .file {
|
||||
display: inline-block;
|
||||
width: 10.625rem;
|
||||
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;
|
||||
}
|
||||
#sticky_container .sticky .row:last-child .button {
|
||||
#content #corporativos .column2 form .input [type=text] {
|
||||
height: 1.125rem;
|
||||
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;
|
||||
}
|
||||
#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;
|
||||
padding: 0 1rem !important;
|
||||
}
|
||||
#content #formulario .whatsapp-link {
|
||||
color: inherit;
|
||||
}
|
||||
#content #formulario > .column {
|
||||
float: left;
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
#content #formulario > .column::after {
|
||||
clear: both;
|
||||
}
|
||||
#content #formulario > .flotante {
|
||||
position: absolute;
|
||||
top: 11.4375rem;
|
||||
margin: auto;
|
||||
left: 40%;
|
||||
width: 13.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
#content #formulario > .flotante > .content {
|
||||
width: 8.125rem;
|
||||
margin: auto;
|
||||
left: -50%;
|
||||
}
|
||||
#content #formulario > .flotante > .content .item {
|
||||
display: block;
|
||||
padding: 0.3125rem 0;
|
||||
}
|
||||
#content #formulario > .flotante > .content div.whatsapp {
|
||||
height: 1.875rem;
|
||||
background-color: #1a9947;
|
||||
color: #fff;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
#content #formulario > .flotante > .content div.whatsapp > i {
|
||||
position: relative;
|
||||
font-size: 1.3333333333rem;
|
||||
top: 0.1875rem;
|
||||
}
|
||||
#content #formulario > .flotante > .content .rrss {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
#content #formulario > .flotante > .content .rrss i.inverted.grey {
|
||||
color: white !important;
|
||||
}
|
||||
#content #formulario > .column1 {
|
||||
width: 67%;
|
||||
margin-top: 1.6875rem;
|
||||
}
|
||||
#content #formulario > .column1 > img {
|
||||
width: 33.75rem;
|
||||
height: 21.875rem;
|
||||
float: left;
|
||||
}
|
||||
#content #formulario > .column2 {
|
||||
width: 33%;
|
||||
}
|
||||
#content #formulario > .column2 .header {
|
||||
margin-top: 1.25rem;
|
||||
text-align: center;
|
||||
font-size: 1.8333333333rem;
|
||||
}
|
||||
#content #formulario > .column2 .header .whatsapp-link {
|
||||
display: inline-block;
|
||||
width: 1.5625rem;
|
||||
height: 1.5625rem;
|
||||
font-size: 2.0833333333rem;
|
||||
}
|
||||
#content #formulario > .column2 .paragraph {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1.5625rem;
|
||||
justify-content: center;
|
||||
}
|
||||
#content #formulario > .column2 form input {
|
||||
border-radius: 0 !important;
|
||||
height: 1.125rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.8333333333rem;
|
||||
}
|
||||
#content #formulario > .column2 form input::placeholder {
|
||||
color: #333333;
|
||||
}
|
||||
#content #formulario > .column2 form textarea {
|
||||
border-radius: 0 !important;
|
||||
height: 4.5rem;
|
||||
margin-bottom: 1.5625rem;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.8333333333rem;
|
||||
}
|
||||
#content #formulario > .column2 form textarea::placeholder {
|
||||
color: #333333;
|
||||
}
|
||||
#content #formulario > .column2 form .button {
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
background-color: white;
|
||||
color: #333333;
|
||||
}
|
||||
#content section {
|
||||
background: none;
|
||||
}
|
||||
#content section.segment > .container {
|
||||
height: 100%;
|
||||
}
|
||||
#content section.segment > .container > .column1 {
|
||||
display: inline-block;
|
||||
width: 67rem;
|
||||
}
|
||||
#content section.segment > .container > .column2 {
|
||||
display: inline-block;
|
||||
width: 33rem;
|
||||
}
|
||||
#content .simple.segment {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
#content .simple.segment > .ui.grid {
|
||||
height: 100%;
|
||||
}
|
||||
#content .fondo-blanco {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.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
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