Compare commits
26 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| fb1c8d6ef5 | |||
| 429a6ac9ee | |||
| afa90fb4bc | |||
| c6dabb0627 | |||
| d9e492fb40 | |||
| 7b43fb0880 | |||
| 0320b990c6 | |||
| 05e12addac | |||
| 1ac2789f28 | |||
| 10622c2e94 | |||
| daab2b65f5 | |||
| 47c3e3924f | |||
| 81f6ae876e | |||
| d31626b4a6 | |||
| b7003db753 | |||
| a434feb0f0 | |||
| a212e7567e | |||
| 57e13ccabb | |||
| ec238c5ca5 | |||
| d459ae5052 | |||
| 52e1e9995c | |||
| a6b9f70747 | |||
| 95ed898c95 | |||
| 50258d255c | |||
| d82734deab | |||
| 4cb708b654 |
19
Readme.md
Normal file
19
Readme.md
Normal file
@ -0,0 +1,19 @@
|
||||
# Web Simple Stand
|
||||
|
||||
Una pagina simple para mostrar los productos con adicional de forma de pago a un formulario simple.
|
||||
|
||||
## Incluye
|
||||
|
||||
1. HTML
|
||||
1. Layout general
|
||||
1. Formulario de compra
|
||||
1. CSS
|
||||
1. Layout en base a fomantic-ui para responsive
|
||||
1. Javascript
|
||||
1. Scripts
|
||||
1. jQuery
|
||||
1. Fomantic
|
||||
1. Envio de carro de compra
|
||||
|
||||
# Copyright
|
||||
ProVM Ltda., Santiago, Chile
|
||||
18
assets/html/001_head.html
Normal file
18
assets/html/001_head.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Stand Chile</title>
|
||||
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
|
||||
<meta name="description" content="Stand Chile, soporte para celulares y tablets" />
|
||||
<meta name="author" content="Aldarien" />
|
||||
<meta name="copyright" content="ProVM" />
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||
<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>
|
||||
59
assets/html/0021_sticky.html
Normal file
59
assets/html/0021_sticky.html
Normal file
@ -0,0 +1,59 @@
|
||||
<div id="columna_sticky">
|
||||
<div class="ui container">
|
||||
<div class="ui grid">
|
||||
<div class="left column" id="column"></div>
|
||||
<div class="right column">
|
||||
<div id="sticky_form" class="ui sticky">
|
||||
<form class="ui form">
|
||||
<div class="ui grid">
|
||||
<div class="row">
|
||||
<div class="ten wide column">
|
||||
<div class="titulo">
|
||||
STAND
|
||||
</div>
|
||||
<div class="precio">$ 5.990</div>
|
||||
<div class="colores">
|
||||
<input type="hidden" name="color" value="azul" />
|
||||
<span class="text">COLOR</span>
|
||||
<br />
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
<div class="blue circle"></div>
|
||||
<div class="petrol circle"></div>
|
||||
<div class="cyan 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="six wide column">
|
||||
<div class="ui image">
|
||||
<img src="./assets/images/fotos/azul/left.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sixteen wide column">
|
||||
<button class="ui button">AGREGAR AL CARRO</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="side_button" class="ui sticky">
|
||||
<div class="rotated">
|
||||
AGREGAR
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
assets/html/002_banner.html
Normal file
15
assets/html/002_banner.html
Normal file
@ -0,0 +1,15 @@
|
||||
<header id="header">
|
||||
<div class="ui container">
|
||||
<div class="ui center aligned basic segment">
|
||||
<div id="logo">
|
||||
<img src="./assets/images/logo.svg" />
|
||||
</div>
|
||||
<div class="paragraph">
|
||||
<div class="header">
|
||||
SOPORTES PARA SMARTPHONE Y TABLETS
|
||||
</div>
|
||||
Diseñado y Fabricado en Chile
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
23
assets/html/003_descripcion.html
Normal file
23
assets/html/003_descripcion.html
Normal file
@ -0,0 +1,23 @@
|
||||
<section id="descripcion" class="columna">
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
<div class="images">
|
||||
<div class="ui medium image">
|
||||
<img src="./assets/images/descripcion1.png" />
|
||||
</div>
|
||||
<div class="ui medium image">
|
||||
<img src="./assets/images/descripcion2.png" />
|
||||
</div>
|
||||
<div class="ui medium image">
|
||||
<img src="./assets/images/descripcion3.png" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
61
assets/html/004_ventajas.html
Normal file
61
assets/html/004_ventajas.html
Normal file
@ -0,0 +1,61 @@
|
||||
<section id="ventajas" class="columna">
|
||||
<div class="diagonal"></div>
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
<div class="titulo">
|
||||
VENTAJAS
|
||||
</div>
|
||||
<div class="ui two columns stackable middle aligned grid">
|
||||
<div class="column">
|
||||
<div class="gallery">
|
||||
<div class="ui large image agrandable">
|
||||
<img src="./assets/images/galeria/foto1.jpg" />
|
||||
</div>
|
||||
<div class="nav left">
|
||||
<i class="angle left icon"></i>
|
||||
</div>
|
||||
<div class="nav right">
|
||||
<i class="angle right icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui two columns grid">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="ui center aligned basic segment">
|
||||
<i class="pallet icon"></i>
|
||||
<br />
|
||||
Apoyo estable para el dispositivo
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui center aligned basic segment">
|
||||
<i class="angle font-icon"></i>
|
||||
<br />
|
||||
Ángulo preciso de inclinación para usar en conferencias
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<div class="ui center aligned basic segment">
|
||||
<i class="bolt icon"></i>
|
||||
<br />
|
||||
Compatible con tablets, permite cargar mientras se usa
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui center aligned basic segment">
|
||||
<i class="thumbs up icon"></i>
|
||||
<br />
|
||||
Diseño moderno y minimalista
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
53
assets/html/005_dimensiones.html
Normal file
53
assets/html/005_dimensiones.html
Normal file
@ -0,0 +1,53 @@
|
||||
<section id="dimensiones" class="columna">
|
||||
<div class="fondo-gris"></div>
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
<div class="titulo">
|
||||
DIMENSIONES Y COLORES
|
||||
</div>
|
||||
<div class="ui stackable grid">
|
||||
<div class="column">
|
||||
<div class="ui medium image">
|
||||
<img src="./assets/images/dimensiones.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui grid">
|
||||
<div class="row">
|
||||
<div class="sixteen wide column">
|
||||
<div class="colores">
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
<div class="blue selected circle"></div>
|
||||
<div class="petrol circle"></div>
|
||||
<div class="cyan circle"></div>
|
||||
<div class="green circle"></div>
|
||||
<div class="yellow circle"></div>
|
||||
<div class="orange circle"></div>
|
||||
<div class="red circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row fotos">
|
||||
<div class="five wide column">
|
||||
<div class="ui image agrandable">
|
||||
<img src="./assets/images/fotos/azul/left.jpg" class="left" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide column">
|
||||
<div class="ui image agrandable">
|
||||
<img src="./assets/images/fotos/azul/center.jpg" class="center" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide column">
|
||||
<div class="ui image agrandable">
|
||||
<img src="./assets/images/fotos/azul/right.jpg" class="right" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
22
assets/html/006_construidos.html
Normal file
22
assets/html/006_construidos.html
Normal file
@ -0,0 +1,22 @@
|
||||
<section id="construidos" class="columna">
|
||||
<div class="ui container">
|
||||
<div class="left column">
|
||||
<div class="titulo">
|
||||
CONSTRUIDOS CON IMPRESIÓN 3D
|
||||
</div>
|
||||
<div class="ui grid">
|
||||
<div class="doubling two columns row">
|
||||
<div class="content column">
|
||||
<i class="chile font-icon"></i>
|
||||
<br />
|
||||
Diseñado y fabricado en Chile
|
||||
<br /><br />
|
||||
<i class="recycle icon"></i>
|
||||
<br />
|
||||
Fabricado en plástico de orien vegetal sin derivados del petróleo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
104
assets/html/007_corporativos.html
Normal file
104
assets/html/007_corporativos.html
Normal file
@ -0,0 +1,104 @@
|
||||
<section id="corporativos">
|
||||
<div class="ui container">
|
||||
<div class="ui stackable grid">
|
||||
<div class="left column">
|
||||
<div class="titulo">
|
||||
CORPORATIVOS
|
||||
</div>
|
||||
<div class="ui two columns stackable grid">
|
||||
<div class="column">
|
||||
<div class="ui basic segment">
|
||||
<div class="ui large image">
|
||||
<img src="./assets/images/logo_abajo.jpg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
LOGO ABAJO
|
||||
</div>
|
||||
<ul>
|
||||
<li class="plus"><i class="small grey plus icon"></i> Siempre visible</li>
|
||||
<li class="minus"><i class="small grey minus icon"></i> Menor tamaño</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui basic segment">
|
||||
<div class="ui large image">
|
||||
<img src="./assets/images/logo_arriba.jpg" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
LOGO ARRIBA
|
||||
</div>
|
||||
<ul>
|
||||
<li class="plus"><i class="small grey plus icon"></i> Mayor tamaño</li>
|
||||
<li class="minus"><i class="small grey minus icon"></i> No se ve al apoyar el teléfono</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right column">
|
||||
<div class="titulo">
|
||||
COTIZA CON NOSOTROS
|
||||
</div>
|
||||
<form class="ui form">
|
||||
<div class="row">
|
||||
<div class="input">
|
||||
LOGO
|
||||
<input type="file" name="archivo" placeholder="Cargar archivo" />
|
||||
<div class="file"><i class="upload icon"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<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="petrol circle"></div>
|
||||
<div class="cyan circle"></div>
|
||||
<div class="green circle"></div>
|
||||
<div class="yellow circle"></div>
|
||||
<div class="orange circle"></div>
|
||||
<div class="red circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
18
assets/html/008_testimonios.html
Normal file
18
assets/html/008_testimonios.html
Normal file
@ -0,0 +1,18 @@
|
||||
<section id="testimonios">
|
||||
<div class="ui container">
|
||||
<div class="titulo">
|
||||
CLIENTES FELICES
|
||||
</div>
|
||||
<div class="ui center aligned grid">
|
||||
<div class="one columns row">
|
||||
<div class="ui three center aligned cards testimonios">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sixteen wide column">
|
||||
<div class="nav"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
72
assets/html/009_contacto.html
Normal file
72
assets/html/009_contacto.html
Normal file
@ -0,0 +1,72 @@
|
||||
<section id="contacto">
|
||||
<div class="background"></div>
|
||||
<div class="ui container">
|
||||
<div class="ui stackable middle aligned grid">
|
||||
<div class="column">
|
||||
<div class="ui stackable middle aligned grid">
|
||||
<div class="column">
|
||||
<div class="ui large image">
|
||||
<img src="./assets/images/conversemos.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui center aligned basic segment">
|
||||
<a href="http://wa.me/56965872558" target="_blank">
|
||||
<div class="whatsapp">
|
||||
<i class="whatsapp icon"></i>
|
||||
CONVERSEMOS
|
||||
</div>
|
||||
</a>
|
||||
<br />
|
||||
<a href="mailto:contacto@3dstand.cl">
|
||||
contacto@3dstand.cl
|
||||
</a>
|
||||
<div class="ui centered fluid horizontal basic segments">
|
||||
<div class="segment">
|
||||
<a href="http://instagram.com/Stand_cl" target="_blank">
|
||||
<i class="ui icons">
|
||||
<i class="large circle icon"></i>
|
||||
<i class="instagram icon"></i>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="segment">
|
||||
<a href="https://www.facebook.com/StAnd-105399181257587" target="_blank">
|
||||
<i class="ui icons">
|
||||
<i class="large circle icon"></i>
|
||||
<i class="facebook f icon"></i>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="titulo">
|
||||
CONVERSEMOS!
|
||||
<a href="http://wa.me/56965872558">
|
||||
<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_form">
|
||||
<div class="row">
|
||||
<input type="text" name="nombre" placeholder="NOMBRE" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<input type="text" name="mail" placeholder="E-MAIL" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
|
||||
</div>
|
||||
<button class="ui button">ENVIAR</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
26
assets/html/010_nav.html
Normal file
26
assets/html/010_nav.html
Normal file
@ -0,0 +1,26 @@
|
||||
<nav id="menu" class="ui borderless top fixed menu" role="navigation" aria-label="navigation">
|
||||
<div class="ui container">
|
||||
<div class="left menu item">
|
||||
<div class="ui simple dropdown">
|
||||
<div class="text">
|
||||
<i class="bars icon"></i>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<a class="item" href="#header">Inicio</a>
|
||||
<a class="item" href="#ventajas">Ventajas</a>
|
||||
<a class="item" href="#dimensiones">Dimensiones</a>
|
||||
<a class="item" href="#corporativos">Corporativos</a>
|
||||
<a class="item" href="#testimonios">Testimonios</a>
|
||||
<a class="item" href="#contacto">Contacto</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right menu">
|
||||
<div class="item">
|
||||
<i class="shopping cart icon">
|
||||
<div class="cantidad">0</div>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
7
assets/html/011_modal_images.html
Normal file
7
assets/html/011_modal_images.html
Normal file
@ -0,0 +1,7 @@
|
||||
<div class="ui modal" id="images">
|
||||
<div class="header">
|
||||
<i class="close icon"></i>
|
||||
</div>
|
||||
<div class="content image">
|
||||
</div>
|
||||
</div>
|
||||
23
assets/html/012_carro.html
Normal file
23
assets/html/012_carro.html
Normal file
@ -0,0 +1,23 @@
|
||||
<div id="carro" class="ui modal">
|
||||
<i class="close icon"></i>
|
||||
<div class="header">
|
||||
CARRITO
|
||||
</div>
|
||||
<form>
|
||||
<div class="content productos">
|
||||
<table class="ui table">
|
||||
<tbody></tbody>
|
||||
<tfoot class="total">
|
||||
<tr>
|
||||
<td colspan="3">TOTAL</td>
|
||||
<td class="precio">$ <span class="valor">0</span></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="content">
|
||||
<button class="ui button">COMPRAR</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
9
assets/html/013_arriba.html
Normal file
9
assets/html/013_arriba.html
Normal file
@ -0,0 +1,9 @@
|
||||
<div class="ui bottom fixed text menu">
|
||||
<div class="ui container">
|
||||
<div class="right menu">
|
||||
<a class="item" href="#header">
|
||||
<i class="bordered up arrow icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
45
assets/html/014_modal_sticky.html
Normal file
45
assets/html/014_modal_sticky.html
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="ui modal" id="modal_sticky">
|
||||
<form class="ui form">
|
||||
<div class="ui grid">
|
||||
<div class="row">
|
||||
<div class="ten wide column">
|
||||
<div class="titulo">
|
||||
STAND
|
||||
</div>
|
||||
<div class="precio">$ 5.990</div>
|
||||
<div class="colores">
|
||||
<input type="hidden" name="color" value="azul" />
|
||||
<span class="text">COLOR</span>
|
||||
<br />
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
<div class="blue circle"></div>
|
||||
<div class="petrol circle"></div>
|
||||
<div class="cyan 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="six wide column">
|
||||
<div class="ui image">
|
||||
<img src="./assets/images/fotos/azul/left.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="sixteen wide column">
|
||||
<button class="ui button">AGREGAR AL CARRO</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
8
assets/html/101_footer.html
Normal file
8
assets/html/101_footer.html
Normal file
@ -0,0 +1,8 @@
|
||||
<!-- 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js" integrity="sha512-YYiD5ZhmJ0GCdJvx6Xe6HzHqHvMpJEPomXwPbsgcpMFPW+mQEeVBU6l9n+2Y+naq+CLbujk91vHyN18q6/RSYw==" 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>
|
||||
</html>
|
||||
704
assets/js/main.js
Normal file
704
assets/js/main.js
Normal file
@ -0,0 +1,704 @@
|
||||
const valor = 6990
|
||||
let available_colors = {
|
||||
white: {
|
||||
name: 'blanco',
|
||||
rgb: 'rgb(255, 255, 255)'
|
||||
},
|
||||
black: {
|
||||
name: 'negro',
|
||||
rgb: 'rgb(0, 0, 0)'
|
||||
},
|
||||
blue: {
|
||||
name: 'azul',
|
||||
rgb: 'rgb(0, 110, 230)'
|
||||
},
|
||||
petrol: {
|
||||
name: 'azul_petroleo',
|
||||
rgb: 'rgb(0, 80, 120)'
|
||||
},
|
||||
cyan: {
|
||||
name: 'celeste',
|
||||
rgb: 'rgb(80, 200, 255)'
|
||||
},
|
||||
green: {
|
||||
name: 'verde',
|
||||
rgb: 'rgb(10, 200, 100)'
|
||||
},
|
||||
yellow: {
|
||||
name: 'amarillo',
|
||||
rgb: 'rgb(255, 240, 70)'
|
||||
},
|
||||
orange: {
|
||||
name: 'naranjo',
|
||||
rgb: 'rgb(255, 130, 70)'
|
||||
},
|
||||
red: {
|
||||
name: 'rojo',
|
||||
rgb: 'rgb(255, 20, 50)'
|
||||
}
|
||||
}
|
||||
|
||||
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.colors = available_colors
|
||||
this.picked = 'blue'
|
||||
this.elem = elem
|
||||
this.input = elem.find('input[name="color"]')
|
||||
this.changing = null
|
||||
if (changing) {
|
||||
this.changing = elem.parent().parent().find('.column img')
|
||||
}
|
||||
this.setup()
|
||||
}
|
||||
setup() {
|
||||
this.elem.find('.circle').each((i, el) => {
|
||||
let color = $(el).attr('class').split(' ')[0]
|
||||
let cssColor = $(el).css('background-color')
|
||||
if (cssColor != this.colors[color]['rgb']) {
|
||||
$(el).css('background-color', this.colors[color]['rgb'])
|
||||
}
|
||||
$(el).click((e) => {
|
||||
this.change_color(color)
|
||||
})
|
||||
})
|
||||
this.change_color('blue')
|
||||
}
|
||||
default_color_format(el) {
|
||||
$(el).removeClass('selected')
|
||||
}
|
||||
change_color(color) {
|
||||
this.picked = this.colors[color]['name']
|
||||
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/fotos/' + this.picked + '/thumb.jpg')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let ventajas = {
|
||||
elem: $('#ventajas'),
|
||||
fotos: 6,
|
||||
setup: function() {
|
||||
let h = this.elem.css('height')
|
||||
let w = this.elem.css('width')
|
||||
|
||||
this.elem.find('.diagonal').css('borderBottomWidth', h)
|
||||
this.elem.find('.diagonal').css('borderRightWidth', w)
|
||||
|
||||
this.elem.find('.nav.left').click((e) => {
|
||||
this.prev()
|
||||
})
|
||||
this.elem.find('.nav.right').click((e) => {
|
||||
this.next()
|
||||
})
|
||||
|
||||
this.elem.find('.gallery').swipe({
|
||||
swipeLeft: (e, dir, d, t, n, data) => {
|
||||
this.next()
|
||||
},
|
||||
swipeRight: (e, dir, d, t, n, data) => {
|
||||
this.prev()
|
||||
}
|
||||
})
|
||||
},
|
||||
current: 1,
|
||||
next: function() {
|
||||
var n = this.current + 1
|
||||
if (n > this.fotos) {
|
||||
n = 1
|
||||
}
|
||||
this.elem.find('.gallery .image img').attr('src', './assets/images/galeria/foto' + n + '.jpg')
|
||||
this.current = n
|
||||
},
|
||||
prev: function() {
|
||||
var n = this.current - 1
|
||||
if (n < 1) {
|
||||
n = this.fotos
|
||||
}
|
||||
this.elem.find('.gallery .image img').attr('src', './assets/images/galeria/foto' + n + '.jpg')
|
||||
this.current = n
|
||||
}
|
||||
}
|
||||
let dimensiones = {
|
||||
colors: available_colors,
|
||||
elem: $('#dimensiones'),
|
||||
setup: function() {
|
||||
this.elem.find('.colores .circle').each((i, el) => {
|
||||
let color = $(el).attr('class').split(' ')[0]
|
||||
let cssColor = $(el).css('background-color')
|
||||
if (cssColor != this.colors[color]['rgb']) {
|
||||
$(el).css('background-color', this.colors[color]['rgb'])
|
||||
}
|
||||
$(el).click((e) => {
|
||||
this.change_color(color)
|
||||
})
|
||||
})
|
||||
},
|
||||
change_color: function(color) {
|
||||
this.picked = this.colors[color]['name']
|
||||
this.elem.find('.colores .circle').each((i, el) => {
|
||||
$(el).removeClass('selected')
|
||||
})
|
||||
this.elem.find('.colores .' + color + '.circle').addClass('selected')
|
||||
this.change_images(this.colors[color]['name'])
|
||||
},
|
||||
change_images: function(color) {
|
||||
this.elem.find('.fotos img').each((i, el) => {
|
||||
let pos = $(el).attr('class')
|
||||
$(el).attr('src', './assets/images/fotos/' + color + '/' + pos + '.jpg')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const smtp = {
|
||||
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
||||
From: 'contacto@3dstand.cl'
|
||||
}
|
||||
|
||||
let sticky_form = {
|
||||
elem: $('.sticky form'),
|
||||
color: null,
|
||||
amount: null,
|
||||
setup: function() {
|
||||
this.amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||
this.color = new Colors($('.sticky .colores'), true)
|
||||
|
||||
this.elem.submit((e) => {
|
||||
e.preventDefault()
|
||||
this.submit()
|
||||
return false
|
||||
})
|
||||
},
|
||||
submit: function() {
|
||||
carro.add(this.elem.find('[name="cantidad"]').val(), this.elem.find('[name="color"]').val())
|
||||
this.color.change_color('blue')
|
||||
this.amount.n = 0
|
||||
this.amount.print()
|
||||
this.elem.trigger('reset')
|
||||
}
|
||||
}
|
||||
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 = {
|
||||
SecureToken: smtp.SecureToken,
|
||||
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')
|
||||
}
|
||||
]
|
||||
}
|
||||
Email.send(content)
|
||||
}
|
||||
}
|
||||
let conversemos_form = {
|
||||
elem: $('#contacto_form'),
|
||||
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 = {
|
||||
SecureToken: smtp.SecureToken,
|
||||
From: smtp.From,
|
||||
To: email,
|
||||
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||
Body: body.join('<br />')
|
||||
}
|
||||
Email.send(content)
|
||||
}
|
||||
}
|
||||
|
||||
let testimonios = {
|
||||
testimonios: [
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "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"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Siiii todo mi gusto.. me encantó lo completo que es. Gracias"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Está super cool se ve de buena calidad"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Llego el mío, y es excelente, estoy feliz con mi compra"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Perfecto el producto, funciona impecable, muchas gracias"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Hola! Quería decirte que me encantaron los soportes, Muy útiles!"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Compré 3 y olvidé decirte que los encontré geniales! Me encantaron"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
|
||||
}
|
||||
],
|
||||
elem: $('#testimonios'),
|
||||
page: 0,
|
||||
maxPages: 1,
|
||||
amount: 3,
|
||||
word_amount: {
|
||||
1: 'one',
|
||||
3: 'three'
|
||||
},
|
||||
setup: function() {
|
||||
this.maxPages = Math.ceil(this.testimonios.length / this.amount)
|
||||
this.elem.find('.testimonios').swipe({
|
||||
swipeRight: (e, dir, d, t, n, data) => {
|
||||
this.page --
|
||||
if (this.page < 0) {
|
||||
this.page = this.maxPages - 1
|
||||
}
|
||||
this.draw()
|
||||
},
|
||||
swipeLeft: (e, dir, d, t, n, data) => {
|
||||
this.page ++
|
||||
if (this.page >= this.maxPages) {
|
||||
this.page = 0
|
||||
}
|
||||
this.draw()
|
||||
}
|
||||
})
|
||||
if (this.amount != 3) {
|
||||
this.elem.find('.testimonios').removeClass('three')
|
||||
this.elem.find('.testimonios').addClass(this.word_amount[this.amount])
|
||||
}
|
||||
this.draw()
|
||||
},
|
||||
draw: function() {
|
||||
var n = this.page * this.amount
|
||||
let p = this.elem.find('.testimonios')
|
||||
p.html('')
|
||||
for (var i = 0; i < this.amount; i ++) {
|
||||
if (n >= this.testimonios.length) {
|
||||
break
|
||||
}
|
||||
p.append(
|
||||
$('<div></div>').attr('class', 'ui centered fluid card').append(
|
||||
$('<div></div>').attr('class', 'center aligned content').append(
|
||||
$('<div></div>').attr('class', 'header').html(this.testimonios[n]['autor'].toUpperCase())
|
||||
).append(
|
||||
$('<div></div>').attr('class', 'description').html(this.testimonios[n]['contenido'])
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').attr('class', 'center aligned content').append(
|
||||
$('<div></div>').attr('class', 'ui mini black rating disabled').attr('data-rating', '5').attr('data-max-rating', '5')
|
||||
)
|
||||
)
|
||||
)
|
||||
n ++
|
||||
}
|
||||
this.elem.find('.ui.rating').rating()
|
||||
this.draw_nav()
|
||||
},
|
||||
draw_nav: function() {
|
||||
let N = this.maxPages
|
||||
let k = this.page
|
||||
let nav = this.elem.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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let sticky_button = {
|
||||
elem: $('#columna_sticky #side_button'),
|
||||
setup: function() {
|
||||
$('#modal_sticky').modal()
|
||||
this.elem.click((e) => {
|
||||
$('#modal_sticky').modal('show')
|
||||
})
|
||||
this.elem.sticky({
|
||||
context: '#column'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let modal_sticky_form = {
|
||||
elem: $('#modal_sticky form'),
|
||||
color: null,
|
||||
amount: null,
|
||||
setup: function() {
|
||||
this.amount = new Amount($('#modal_sticky form .input input[name="cantidad"]'))
|
||||
this.color = new Colors($('#modal_sticky form .colores'), true)
|
||||
|
||||
this.elem.submit((e) => {
|
||||
e.preventDefault()
|
||||
this.submit()
|
||||
this.elem.parent('#modal_sticky').modal('hide')
|
||||
return false
|
||||
})
|
||||
},
|
||||
submit: function() {
|
||||
carro.add(this.elem.find('[name="cantidad"]').val(), this.elem.find('[name="color"]').val())
|
||||
this.color.change_color('blue')
|
||||
this.amount.n = 0
|
||||
this.amount.print()
|
||||
this.elem.trigger('reset')
|
||||
}
|
||||
}
|
||||
|
||||
let sticky = {
|
||||
elem: $('#columna_sticky'),
|
||||
setup: function() {
|
||||
var h = 0
|
||||
$('section.columna').each((i, el) => {
|
||||
h += $(el).outerHeight(true)
|
||||
})
|
||||
this.elem.height(h)
|
||||
this.elem.find('#column').height(h)
|
||||
|
||||
sticky_form.setup()
|
||||
|
||||
this.elem.find('.sticky .precio').html('$ ' + format(valor))
|
||||
|
||||
if ($('#columna_sticky .sticky').css('display') != 'none') {
|
||||
$('#columna_sticky .sticky').sticky({
|
||||
context: '#column'
|
||||
})
|
||||
} else {
|
||||
sticky_button.setup()
|
||||
modal_sticky_form.setup()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let image = {
|
||||
elem: $('.agrandable'),
|
||||
modal: $('#images.modal'),
|
||||
setup: function() {
|
||||
this.modal.modal()
|
||||
this.modal.find('.close.icon').click((e) => {
|
||||
this.modal.modal('hide')
|
||||
this.modal.find('.image').html('')
|
||||
})
|
||||
let p = this
|
||||
this.elem.click(function(e) {
|
||||
let img = $(this).find('img').attr('src')
|
||||
p.modal.find('.image').html('')
|
||||
p.modal.find('.image').append(
|
||||
$('<img />').attr('src', img)
|
||||
)
|
||||
p.modal.find('.image img').css('width', '100%')
|
||||
p.modal.modal('show')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function format(value) {
|
||||
return (''+value).split('').reverse().join('').match(/.{1,3}/g).join('.').split('').reverse().join('')
|
||||
}
|
||||
|
||||
class Producto {
|
||||
constructor(id, cantidad, color) {
|
||||
this.id = id
|
||||
this.cantidad = cantidad
|
||||
this.color = color
|
||||
}
|
||||
colorName() {
|
||||
return this.color.toLowerCase().split(' ').map(function(str) {
|
||||
return str.replace(str[0], str[0].toUpperCase())
|
||||
}).join(' ')
|
||||
}
|
||||
precio(formateado = false) {
|
||||
let precio = this.cantidad * valor
|
||||
if (!formateado) {
|
||||
return precio
|
||||
}
|
||||
return format(precio)
|
||||
}
|
||||
increase() {
|
||||
this.cantidad ++
|
||||
carro.cantidad ++
|
||||
this.updateCantidad()
|
||||
}
|
||||
decrease() {
|
||||
this.cantidad --
|
||||
carro.cantidad --
|
||||
this.updateCantidad()
|
||||
if (this.cantidad <= 0) {
|
||||
carro.remove(this.id)
|
||||
}
|
||||
}
|
||||
updateCantidad() {
|
||||
$('tr[data-id="' + this.id + '"]').find('input[name="cantidad' + this.id + '"]').val(this.cantidad)
|
||||
carro.update()
|
||||
carro.draw()
|
||||
}
|
||||
draw() {
|
||||
let row = $('<tr></tr>').attr('data-id', this.id).append(
|
||||
$('<td></td>').append(
|
||||
$('<div></div>').attr('class', 'ui tiny image').append(
|
||||
$('<img />').attr('src', './assets/images/fotos/' + this.color + '/thumb.jpg')
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').html('Stand ' + this.colorName())
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'input cantidad').append(
|
||||
$('<button></button>').attr('class', 'minus').attr('type', 'button').append(
|
||||
$('<i></i>').attr('class', 'minus icon')
|
||||
)
|
||||
).append(
|
||||
$('<input />').attr('type', 'text').attr('name', 'cantidad' + this.id).attr('value', this.cantidad)
|
||||
).append(
|
||||
$('<button></button>').attr('class', 'plus').attr('type', 'button').append(
|
||||
$('<i></i>').attr('class', 'plus icon')
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'precio').html('$ ' + this.precio(true))
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
$('<i></i>').attr('class', 'trash icon')
|
||||
)
|
||||
)
|
||||
row.find('button.minus').click((e) => {
|
||||
this.decrease()
|
||||
})
|
||||
row.find('button.plus').click((e) => {
|
||||
this.increase()
|
||||
})
|
||||
row.find('.trash.icon').click((e) => {
|
||||
carro.remove(this.id)
|
||||
})
|
||||
return row
|
||||
}
|
||||
}
|
||||
let carro = {
|
||||
elem: $('#carro'),
|
||||
boton: $('nav#menu .shopping.cart'),
|
||||
cantidad: 0,
|
||||
compras: [],
|
||||
setup: function() {
|
||||
this.boton.click((e) => {
|
||||
this.draw()
|
||||
})
|
||||
this.elem.find('.close.icon').click((e) => {
|
||||
this.elem.modal('hide')
|
||||
})
|
||||
this.elem.find('form').submit((e) => {
|
||||
e.preventDefault()
|
||||
this.submit()
|
||||
return false
|
||||
})
|
||||
this.update()
|
||||
},
|
||||
update: function() {
|
||||
this.boton.find('.cantidad').html(this.cantidad)
|
||||
},
|
||||
add: function(amount, color) {
|
||||
amount = parseInt(amount)
|
||||
if (amount <= 0) {
|
||||
return
|
||||
}
|
||||
this.cantidad += amount
|
||||
this.update()
|
||||
let idx = this.compras.map(x => {return x.color}).indexOf(color)
|
||||
if (idx > -1) {
|
||||
this.compras[idx].cantidad += amount
|
||||
return
|
||||
}
|
||||
let f = Date.now()
|
||||
this.compras.push(new Producto(f, amount, color))
|
||||
},
|
||||
remove: function(id) {
|
||||
if (this.compras.length == 0) {
|
||||
this.cantidad = 0
|
||||
this.update()
|
||||
return
|
||||
}
|
||||
id = parseInt(id)
|
||||
let idx = this.compras.map(x => {return x.id}).indexOf(id)
|
||||
let n = this.compras[idx].cantidad
|
||||
this.compras.splice(idx, 1)
|
||||
this.cantidad -= n
|
||||
this.update()
|
||||
this.draw()
|
||||
},
|
||||
total: function(formateado = false) {
|
||||
let total = this.cantidad * valor
|
||||
if (!formateado) {
|
||||
return total
|
||||
}
|
||||
return format(total)
|
||||
},
|
||||
draw: function() {
|
||||
let t = this.elem.find('.productos table tbody')
|
||||
t.html('')
|
||||
$.each(this.compras, (i, el) => {
|
||||
t.append(el.draw())
|
||||
})
|
||||
t.parent().find('.total .valor').html(this.total(true))
|
||||
this.elem.modal('show')
|
||||
},
|
||||
submit: function() {
|
||||
console.debug('Comprar')
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#subir').sticky()
|
||||
|
||||
carro.setup()
|
||||
|
||||
sticky.setup()
|
||||
ventajas.setup()
|
||||
dimensiones.setup()
|
||||
let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
|
||||
let cotiza_color = new Colors($('#corporativos .colores'))
|
||||
cotiza_form.setup()
|
||||
conversemos_form.setup()
|
||||
image.setup()
|
||||
|
||||
window.mobileCheck = function() {
|
||||
let check = false;
|
||||
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
|
||||
return check;
|
||||
};
|
||||
|
||||
if (window.mobileCheck()) {
|
||||
testimonios.amount = 1
|
||||
}
|
||||
testimonios.setup()
|
||||
})
|
||||
44
assets/sass/_common.scss
Normal file
44
assets/sass/_common.scss
Normal file
@ -0,0 +1,44 @@
|
||||
@import 'common/header';
|
||||
@import 'common/descripcion';
|
||||
@import 'common/ventajas';
|
||||
@import 'common/dimensiones';
|
||||
@import 'common/construidos';
|
||||
@import 'common/corporativos';
|
||||
@import 'common/testimonios';
|
||||
@import 'common/contacto';
|
||||
@import 'common/nav';
|
||||
@import 'common/image_modal';
|
||||
@import 'common/carro';
|
||||
|
||||
.white.circle {
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.black.circle {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
.blue.circle {
|
||||
background-color: rgb(0, 110, 230);
|
||||
}
|
||||
.petrol.circle {
|
||||
background-color: rgb(0, 80, 120);
|
||||
}
|
||||
.cyan.circle {
|
||||
background-color: rgb(80, 200, 255);
|
||||
}
|
||||
.green.circle {
|
||||
background-color: rgb(10, 200, 100);
|
||||
}
|
||||
.yellow.circle {
|
||||
background-color: rgb(255, 240, 70);
|
||||
}
|
||||
.orange.circle {
|
||||
background-color: rgb(255, 130, 70);
|
||||
}
|
||||
.red.circle {
|
||||
background-color: rgb(255, 20, 50);
|
||||
}
|
||||
|
||||
.column:not(.row) {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
33
assets/sass/_fonts.scss
Normal file
33
assets/sass/_fonts.scss
Normal file
@ -0,0 +1,33 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('../fonts/icomoon.eotiedbpz');
|
||||
src: url('../fonts/icomoon.eot?iedbpz#iefix') format('embedded-opentype'),
|
||||
url('../fonts/icomoon.ttf?iedbpz') format('truetype'),
|
||||
url('../fonts/icomoon.woff?iedbpz') format('woff'),
|
||||
url('../fonts/icomoon.svg?iedbpz#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="font-icon"], [class*=" font-icon"] {
|
||||
// use !important to prevent issues with browser extensions that change fonts
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
// Better Font Rendering ===========
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
i.font-icon.angle:before {
|
||||
content: "\e900";
|
||||
}
|
||||
i.font-icon.chile:before {
|
||||
content: "\e901";
|
||||
}
|
||||
35
assets/sass/_functions.scss
Normal file
35
assets/sass/_functions.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
@mixin colors {
|
||||
.colores {
|
||||
vertical-align: center;
|
||||
|
||||
.text {
|
||||
margin-right: rem(3);
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
|
||||
width: rem($circle_radius);
|
||||
height: rem($circle_radius);
|
||||
border-radius: 8000px;
|
||||
margin: auto rem(1);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
width: rem($circle_radius + 2);
|
||||
height: rem($circle_radius + 2);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
assets/sass/_phone.scss
Normal file
35
assets/sass/_phone.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import 'phone_vars';
|
||||
|
||||
@import 'phone/header';
|
||||
@import 'phone/descripcion';
|
||||
@import 'phone/ventajas';
|
||||
@import 'phone/dimensiones';
|
||||
@import 'phone/construidos';
|
||||
@import 'phone/corporativos';
|
||||
|
||||
@import 'phone/sticky';
|
||||
@import 'phone/nav';
|
||||
|
||||
.left.column {
|
||||
width: 75% !important;
|
||||
padding-left: rem(5) !important;
|
||||
}
|
||||
.right.column {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.titulo {
|
||||
padding-top: rem(25);
|
||||
padding-bottom: rem(20);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $html-font-size+px;
|
||||
}
|
||||
|
||||
body {
|
||||
height: ($content_height)+rem;
|
||||
font-family: Roboto, sans;
|
||||
color: $gris_standard;
|
||||
}
|
||||
32
assets/sass/_phone_vars.scss
Normal file
32
assets/sass/_phone_vars.scss
Normal file
@ -0,0 +1,32 @@
|
||||
@import 'variables';
|
||||
|
||||
$html-font-size: (16*8/12);
|
||||
|
||||
$circle_radius: 10;
|
||||
|
||||
$full_width: 600;
|
||||
|
||||
$heights: (
|
||||
"cabezal": (400/16),
|
||||
"descripcion": 25,
|
||||
"ventajas": 27.5,
|
||||
"dimensiones": 27.5,
|
||||
"construido": 21.875,
|
||||
"corporativos": (520/16),
|
||||
"felices": 21.875,
|
||||
"formulario": 30
|
||||
);
|
||||
|
||||
$column1: 90;
|
||||
$column2: 10;
|
||||
|
||||
$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;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'functions';
|
||||
46
assets/sass/_reset.scss
Normal file
46
assets/sass/_reset.scss
Normal file
@ -0,0 +1,46 @@
|
||||
*, *:before, *:after{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
footer, header, nav, section, main{
|
||||
display: block;
|
||||
}
|
||||
|
||||
body{
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q{
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after, q:before, q:after{
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
input{
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
17
assets/sass/_variables.scss
Normal file
17
assets/sass/_variables.scss
Normal file
@ -0,0 +1,17 @@
|
||||
// Colores
|
||||
$blanco: rgb(255, 255, 255);
|
||||
$negro: rgb(0, 0, 0);
|
||||
$gris: rgb(204, 204, 204);
|
||||
$gris_transparencia: rgba($gris, .5);
|
||||
$gris_standard: rgb(51, 51, 51);
|
||||
$gris_claro: rgb(102, 102, 102);
|
||||
$azul: rgb(0, 66, 123);
|
||||
|
||||
// Tipografias
|
||||
$font_family: Roboto, sans;
|
||||
|
||||
// Fondos
|
||||
$fondo_cabezal: url('../images/banner.jpg');
|
||||
$fondo_ventajas_dimensiones: url('../images/tripode.png');
|
||||
$fondo_construidos: url('../images/construido.jpg');
|
||||
$fondo_corporativos: url('../images/corporativo.png');
|
||||
29
assets/sass/_wide.scss
Normal file
29
assets/sass/_wide.scss
Normal file
@ -0,0 +1,29 @@
|
||||
@import 'wide_vars';
|
||||
@import 'wide/header';
|
||||
@import 'wide/descripcion';
|
||||
@import 'wide/ventajas';
|
||||
@import 'wide/dimensiones';
|
||||
@import 'wide/construidos';
|
||||
@import 'wide/corporativos';
|
||||
@import 'wide/testimonios';
|
||||
@import 'wide/contacto';
|
||||
@import 'wide/sticky';
|
||||
@import 'wide/nav';
|
||||
|
||||
.left.column {
|
||||
width: 67% !important;
|
||||
padding-left: rem(5) !important;
|
||||
}
|
||||
.right.column {
|
||||
width: 33% !important;
|
||||
}
|
||||
|
||||
section .titulo {
|
||||
font-size: font_size(22);
|
||||
padding-top: rem(54);
|
||||
padding-bottom: rem(25);
|
||||
}
|
||||
|
||||
body {
|
||||
color: $gris_standard;
|
||||
}
|
||||
32
assets/sass/_wide_vars.scss
Normal file
32
assets/sass/_wide_vars.scss
Normal file
@ -0,0 +1,32 @@
|
||||
@import 'variables';
|
||||
|
||||
$html-font-size: 16px;
|
||||
|
||||
$circle_radius: 12;
|
||||
|
||||
$full_width: 1080;
|
||||
|
||||
$heights: (
|
||||
"cabezal": (500/16),
|
||||
"descripcion": 25,
|
||||
"ventajas": 27.5,
|
||||
"dimensiones": 27.5,
|
||||
"construido": 21.875,
|
||||
"corporativos": (520/16),
|
||||
"felices": 21.875,
|
||||
"formulario": 30
|
||||
);
|
||||
|
||||
$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;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'functions';
|
||||
40
assets/sass/common/_carro.scss
Normal file
40
assets/sass/common/_carro.scss
Normal file
@ -0,0 +1,40 @@
|
||||
#carro {
|
||||
form {
|
||||
.input.cantidad {
|
||||
width: 4.5rem;
|
||||
background: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: 10pt;
|
||||
color: rgba(0, 0, 0, .87) !important;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: inherit !important;
|
||||
}
|
||||
input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.precio {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.content>.button {
|
||||
width: 100%;
|
||||
color: $blanco;
|
||||
background-color: $gris_standard;
|
||||
}
|
||||
}
|
||||
7
assets/sass/common/_construidos.scss
Normal file
7
assets/sass/common/_construidos.scss
Normal file
@ -0,0 +1,7 @@
|
||||
#construidos {
|
||||
background-image: $fondo_construidos;
|
||||
background-color: linear-gradient(to right, rgb(0, 0, 0, .6), rgb(0, 0, 0, 0));
|
||||
color: $blanco;
|
||||
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
58
assets/sass/common/_contacto.scss
Normal file
58
assets/sass/common/_contacto.scss
Normal file
@ -0,0 +1,58 @@
|
||||
#contacto {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $gris;
|
||||
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
.column {
|
||||
height: 100%;
|
||||
}
|
||||
.column:first-child {
|
||||
width: 67%;
|
||||
}
|
||||
.column:last-child {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
div.whatsapp {
|
||||
background-color: green;
|
||||
padding: .5rem 0;
|
||||
color: $blanco;
|
||||
}
|
||||
|
||||
.icons {
|
||||
.icon:first-child {
|
||||
color: $blanco;
|
||||
}
|
||||
.icon:last-child {
|
||||
color: $gris;
|
||||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: .5rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
form {
|
||||
.row {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
input {
|
||||
height: 1.5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
assets/sass/common/_corporativos.scss
Normal file
18
assets/sass/common/_corporativos.scss
Normal file
@ -0,0 +1,18 @@
|
||||
#corporativos {
|
||||
background-image: $fondo_corporativos;
|
||||
|
||||
.segment {
|
||||
.content {
|
||||
.header {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
text-indent: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
assets/sass/common/_descripcion.scss
Normal file
7
assets/sass/common/_descripcion.scss
Normal file
@ -0,0 +1,7 @@
|
||||
#descripcion {
|
||||
background-image: linear-gradient($gris, $gris);
|
||||
|
||||
.images {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
24
assets/sass/common/_dimensiones.scss
Normal file
24
assets/sass/common/_dimensiones.scss
Normal file
@ -0,0 +1,24 @@
|
||||
#dimensiones {
|
||||
position: relative;
|
||||
|
||||
background-image: $fondo_ventajas_dimensiones;
|
||||
|
||||
.fondo-gris {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($gris, .5);
|
||||
}
|
||||
|
||||
.left.column {
|
||||
&>.grid {
|
||||
&>.column:first-child {
|
||||
min-width: 33% !important;
|
||||
}
|
||||
&>.column:last-child {
|
||||
min-width: 67% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
assets/sass/common/_header.scss
Normal file
19
assets/sass/common/_header.scss
Normal file
@ -0,0 +1,19 @@
|
||||
#header {
|
||||
background-image: $fondo_cabezal;
|
||||
background-repeat: no-repeat;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
color: $blanco;
|
||||
|
||||
.container {
|
||||
.segment {
|
||||
margin: 0 !important;
|
||||
#logo {
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
assets/sass/common/_image_modal.scss
Normal file
14
assets/sass/common/_image_modal.scss
Normal file
@ -0,0 +1,14 @@
|
||||
#images.modal {
|
||||
text-align: center;
|
||||
|
||||
.header {
|
||||
text-align: right;
|
||||
}
|
||||
.content {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
18
assets/sass/common/_nav.scss
Normal file
18
assets/sass/common/_nav.scss
Normal file
@ -0,0 +1,18 @@
|
||||
#menu {
|
||||
z-index: 100;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
cursor: pointer;
|
||||
.cantidad {
|
||||
position: relative;
|
||||
color: $blanco;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
assets/sass/common/_testimonios.scss
Normal file
13
assets/sass/common/_testimonios.scss
Normal file
@ -0,0 +1,13 @@
|
||||
#testimonios {
|
||||
.testimonios {
|
||||
.ui.card {
|
||||
background-color: $gris;
|
||||
|
||||
.rating {
|
||||
.icon {
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
42
assets/sass/common/_ventajas.scss
Normal file
42
assets/sass/common/_ventajas.scss
Normal file
@ -0,0 +1,42 @@
|
||||
#ventajas {
|
||||
position: relative;
|
||||
|
||||
background-image: $fondo_ventajas_dimensiones;
|
||||
|
||||
.diagonal {
|
||||
position: absolute;
|
||||
background-blend-mode: color;
|
||||
}
|
||||
.gallery {
|
||||
position: relative;
|
||||
|
||||
text-align: center;
|
||||
|
||||
.image {
|
||||
max-height: inherit;
|
||||
img {
|
||||
max-height: inherit;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: rgb(255, 255, 255, .5);
|
||||
}
|
||||
.nav.left {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.nav.right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
assets/sass/main.scss
Normal file
17
assets/sass/main.scss
Normal file
@ -0,0 +1,17 @@
|
||||
@use "sass:map";
|
||||
@import 'reset';
|
||||
@import 'variables';
|
||||
|
||||
html {
|
||||
font-family: $font_family;
|
||||
}
|
||||
|
||||
@import 'common';
|
||||
@import 'fonts';
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
@import 'phone';
|
||||
}
|
||||
@media screen and (orientation: landscape) {
|
||||
@import 'wide';
|
||||
}
|
||||
3
assets/sass/phone/_construidos.scss
Normal file
3
assets/sass/phone/_construidos.scss
Normal file
@ -0,0 +1,3 @@
|
||||
#construidos {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
62
assets/sass/phone/_corporativos.scss
Normal file
62
assets/sass/phone/_corporativos.scss
Normal file
@ -0,0 +1,62 @@
|
||||
#corporativos {
|
||||
margin-top: 1rem !important;
|
||||
|
||||
form {
|
||||
@include colors;
|
||||
|
||||
.row {
|
||||
margin-bottom: rem(9);
|
||||
|
||||
input {
|
||||
height: 1.5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.input.cantidad {
|
||||
width: 4.5rem;
|
||||
background: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: font_size(10);
|
||||
color: rgba(191, 191, 191, .87) !important;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: rgba(191, 191, 191, .87) !important;
|
||||
}
|
||||
input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: rgba(191, 191, 191, .87) !important;
|
||||
}
|
||||
}
|
||||
.input [type="file"] {
|
||||
display: none;
|
||||
}
|
||||
.input .file {
|
||||
display: inline-block;
|
||||
height: rem(20*12/10);
|
||||
padding-top: rem(3);
|
||||
margin-left: rem(5);
|
||||
font-size: font_size(16);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
background-color: $gris_standard;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
assets/sass/phone/_descripcion.scss
Normal file
14
assets/sass/phone/_descripcion.scss
Normal file
@ -0,0 +1,14 @@
|
||||
#descripcion {
|
||||
padding-bottom: rem(5);
|
||||
|
||||
.paragraph {
|
||||
padding-top: rem(18);
|
||||
line-height: rem(14);
|
||||
text-align: justify;
|
||||
|
||||
.header {
|
||||
margin-bottom: rem(6);
|
||||
font-size: font_size(18);
|
||||
}
|
||||
}
|
||||
}
|
||||
10
assets/sass/phone/_dimensiones.scss
Normal file
10
assets/sass/phone/_dimensiones.scss
Normal file
@ -0,0 +1,10 @@
|
||||
#dimensiones {
|
||||
.header {
|
||||
font-size: font_size(22);
|
||||
padding-top: rem(54);
|
||||
padding-bottom: rem(25);
|
||||
}
|
||||
|
||||
$circle_radius: 15;
|
||||
@include colors;
|
||||
}
|
||||
30
assets/sass/phone/_header.scss
Normal file
30
assets/sass/phone/_header.scss
Normal file
@ -0,0 +1,30 @@
|
||||
#header {
|
||||
height: (map.get($heights, 'cabezal'))+rem;
|
||||
|
||||
background-size: 160%;
|
||||
background-position: bottom rem(-10) center;
|
||||
|
||||
.container {
|
||||
#menu {
|
||||
font-size: font_size(16);
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
.cantidad {
|
||||
top: rem(-20);
|
||||
left: rem(1.6);
|
||||
font-size: font_size(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.segment {
|
||||
#logo {
|
||||
img {
|
||||
max-width: rem($full_width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
assets/sass/phone/_nav.scss
Normal file
17
assets/sass/phone/_nav.scss
Normal file
@ -0,0 +1,17 @@
|
||||
#menu {
|
||||
i {
|
||||
font-size: font-size(18);
|
||||
}
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
.cantidad {
|
||||
font-size: font-size(12);
|
||||
font-family: $font_family;
|
||||
top: rem(-14);
|
||||
left: rem(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
143
assets/sass/phone/_sticky.scss
Normal file
143
assets/sass/phone/_sticky.scss
Normal file
@ -0,0 +1,143 @@
|
||||
#columna_sticky {
|
||||
position: absolute;
|
||||
top: (map.get($heights, 'cabezal'))+rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.column {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&>.container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.left.column {
|
||||
pointer-events: none;
|
||||
}
|
||||
#sticky_form {
|
||||
display: none;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
|
||||
z-index: 10;
|
||||
|
||||
margin-top: rem(40);
|
||||
padding-top: rem(54);
|
||||
|
||||
.row {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.column:first-child {
|
||||
vertical-align: bottom;
|
||||
padding-top: rem(20);
|
||||
|
||||
.titulo {
|
||||
font-size: font_size(25);
|
||||
}
|
||||
.precio {
|
||||
font-size: font_size(16);
|
||||
}
|
||||
font-size: font_size(14);
|
||||
|
||||
@include colors;
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
#side_button {
|
||||
background-color: $gris_standard;
|
||||
color: rgb(255, 255, 255);
|
||||
width: 100%;
|
||||
height: 12rem;
|
||||
cursor: pointer;
|
||||
|
||||
padding-top: 6rem;
|
||||
|
||||
.rotated {
|
||||
transform: rotate(-90deg);
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#modal_sticky {
|
||||
.column:first-child {
|
||||
vertical-align: bottom;
|
||||
padding-top: rem(20);
|
||||
|
||||
.titulo {
|
||||
font-size: font_size(25);
|
||||
}
|
||||
.precio {
|
||||
font-size: font_size(16);
|
||||
}
|
||||
font-size: font_size(14);
|
||||
|
||||
@include colors;
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
color: $blanco;
|
||||
background-color: $gris_standard;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
assets/sass/phone/_ventajas.scss
Normal file
12
assets/sass/phone/_ventajas.scss
Normal file
@ -0,0 +1,12 @@
|
||||
#ventajas {
|
||||
//height: (map.get($heights, "ventajas"))+rem;
|
||||
|
||||
.diagonal {
|
||||
border-bottom: 100% solid rgba($gris, .5);
|
||||
border-right: 100% solid transparent;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
max-height: (map.get($heights, 'ventajas')-32/16)+rem;
|
||||
}
|
||||
}
|
||||
3
assets/sass/wide/_construidos.scss
Normal file
3
assets/sass/wide/_construidos.scss
Normal file
@ -0,0 +1,3 @@
|
||||
#construidos {
|
||||
margin-top: rem(15);
|
||||
}
|
||||
12
assets/sass/wide/_contacto.scss
Normal file
12
assets/sass/wide/_contacto.scss
Normal file
@ -0,0 +1,12 @@
|
||||
#contacto {
|
||||
.image {
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
background-color: $gris_standard;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
62
assets/sass/wide/_corporativos.scss
Normal file
62
assets/sass/wide/_corporativos.scss
Normal file
@ -0,0 +1,62 @@
|
||||
#corporativos {
|
||||
margin-top: rem(15);
|
||||
|
||||
form {
|
||||
@include colors;
|
||||
|
||||
.row {
|
||||
margin-bottom: rem(9);
|
||||
|
||||
input {
|
||||
height: 1.5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.input.cantidad {
|
||||
width: 4.5rem;
|
||||
background: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: font_size(10);
|
||||
color: rgba(191, 191, 191, .87) !important;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: rgba(191, 191, 191, .87) !important;
|
||||
}
|
||||
input {
|
||||
width: 2rem;
|
||||
background: none;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: rgba(191, 191, 191, .87) !important;
|
||||
}
|
||||
}
|
||||
.input [type="file"] {
|
||||
display: none;
|
||||
}
|
||||
.input .file {
|
||||
display: inline-block;
|
||||
height: rem(20*12/10);
|
||||
padding-top: rem(3);
|
||||
margin-left: rem(5);
|
||||
font-size: font_size(16);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
background-color: $gris_standard;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
assets/sass/wide/_descripcion.scss
Normal file
24
assets/sass/wide/_descripcion.scss
Normal file
@ -0,0 +1,24 @@
|
||||
#descripcion {
|
||||
background-position: left rem(112);
|
||||
background-size: 100% rem(110);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
padding-top: rem(100);
|
||||
margin-bottom: rem(25);
|
||||
|
||||
.images {
|
||||
.image {
|
||||
max-width: 33%;
|
||||
}
|
||||
}
|
||||
.paragraph {
|
||||
padding-top: rem(28);
|
||||
line-height: rem(14);
|
||||
text-align: justify;
|
||||
|
||||
.header {
|
||||
margin-bottom: rem(16);
|
||||
font-size: font_size(22/16*12);
|
||||
}
|
||||
}
|
||||
}
|
||||
6
assets/sass/wide/_dimensiones.scss
Normal file
6
assets/sass/wide/_dimensiones.scss
Normal file
@ -0,0 +1,6 @@
|
||||
#dimensiones {
|
||||
margin-top: rem(15);
|
||||
|
||||
$circle_radius: 20;
|
||||
@include colors;
|
||||
}
|
||||
6
assets/sass/wide/_header.scss
Normal file
6
assets/sass/wide/_header.scss
Normal file
@ -0,0 +1,6 @@
|
||||
#header {
|
||||
height: (map.get($heights, 'cabezal'))+rem;
|
||||
|
||||
background-size: 160%;
|
||||
background-position: bottom rem(-40) center;
|
||||
}
|
||||
17
assets/sass/wide/_nav.scss
Normal file
17
assets/sass/wide/_nav.scss
Normal file
@ -0,0 +1,17 @@
|
||||
#menu {
|
||||
i {
|
||||
font-size: font-size(24);
|
||||
}
|
||||
.right.menu {
|
||||
.item {
|
||||
.shopping.cart {
|
||||
.cantidad {
|
||||
font-size: font-size(12);
|
||||
font-family: $font_family;
|
||||
top: rem(-28);
|
||||
left: rem(3.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
74
assets/sass/wide/_sticky.scss
Normal file
74
assets/sass/wide/_sticky.scss
Normal file
@ -0,0 +1,74 @@
|
||||
#columna_sticky {
|
||||
position: absolute;
|
||||
top: (map.get($heights, 'cabezal'))+rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.left.column {
|
||||
pointer-events: none;
|
||||
}
|
||||
#sticky_form {
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
|
||||
z-index: 10;
|
||||
|
||||
margin-top: rem(40);
|
||||
padding-top: rem(54);
|
||||
|
||||
.row {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.column:first-child {
|
||||
vertical-align: bottom;
|
||||
padding-top: rem(20);
|
||||
|
||||
.titulo {
|
||||
font-size: font_size(25);
|
||||
}
|
||||
.precio {
|
||||
font-size: font_size(16);
|
||||
}
|
||||
font-size: font_size(14);
|
||||
|
||||
@include colors;
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.button {
|
||||
border-radius: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
color: $blanco;
|
||||
background-color: $gris_standard;
|
||||
}
|
||||
}
|
||||
}
|
||||
#side_button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
3
assets/sass/wide/_testimonios.scss
Normal file
3
assets/sass/wide/_testimonios.scss
Normal file
@ -0,0 +1,3 @@
|
||||
#testimonios {
|
||||
margin-top: rem(15);
|
||||
}
|
||||
10
assets/sass/wide/_ventajas.scss
Normal file
10
assets/sass/wide/_ventajas.scss
Normal file
@ -0,0 +1,10 @@
|
||||
#ventajas {
|
||||
.diagonal {
|
||||
border-bottom: (map.get($heights, 'ventajas'))+rem solid rgba($gris, .5);
|
||||
border-right: rem(1900) solid transparent;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
max-height: (map.get($heights, 'ventajas')-32/16)+rem;
|
||||
}
|
||||
}
|
||||
59
gulpfile.js
Normal file
59
gulpfile.js
Normal file
@ -0,0 +1,59 @@
|
||||
const {watch, src, dest, series, parallel} = require('gulp')
|
||||
const path = require('path')
|
||||
const concat = require('gulp-concat')
|
||||
const rename = require('gulp-rename')
|
||||
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')
|
||||
//const changed = require('gulp-changed')
|
||||
//const image = require('gulp-image')
|
||||
|
||||
let source_dir = 'assets'
|
||||
let output_dir = 'public/assets'
|
||||
|
||||
function js(done) {
|
||||
return src(path.join(source_dir, 'js', '**', '*.js'))
|
||||
.pipe(concat('main.js'))
|
||||
.pipe(dest(path.join(output_dir, 'scripts')))
|
||||
.pipe(sourcemaps.init({loadMaps: true}))
|
||||
.pipe(babel({
|
||||
presets: ['@babel/preset-env']
|
||||
}))
|
||||
.pipe(uglify())
|
||||
.pipe(rename('main.min.js'))
|
||||
.pipe(sourcemaps.write('./maps'))
|
||||
.pipe(dest(path.join(output_dir, 'scripts')))
|
||||
}
|
||||
|
||||
function css(done) {
|
||||
return src(path.join(source_dir, 'sass', 'main.scss'))
|
||||
.pipe(sass())
|
||||
.pipe(rename('main.css'))
|
||||
.pipe(dest(path.join(output_dir, 'styles')))
|
||||
.pipe(sourcemaps.init({loadMaps: true}))
|
||||
.pipe(sass({outputStyle: 'compressed'}))
|
||||
.pipe(rename('main.min.css'))
|
||||
.pipe(sourcemaps.write('./maps'))
|
||||
.pipe(dest(path.join(output_dir, 'styles')))
|
||||
}
|
||||
|
||||
function html(done) {
|
||||
return src(path.join(source_dir, 'html', '**', '*.html'))
|
||||
.pipe(concat('index.html'))
|
||||
.pipe(htmlmin({collapseWhitespace: true}))
|
||||
.pipe(rename('index.html'))
|
||||
.pipe(dest(path.join(output_dir, '../')))
|
||||
}
|
||||
|
||||
function images(done) {
|
||||
return src(path.join(source_dir, 'images', '*.*'))
|
||||
.pipe(changed(path.join(output_dir, 'images')))
|
||||
.pipe(image())
|
||||
.pipe(dest(path.join(output_dir, 'images')))
|
||||
}
|
||||
|
||||
exports.watch = 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>
|
||||
32
package.json
Normal file
32
package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "stand",
|
||||
"version": "1.0.0",
|
||||
"description": "Web simple para Stand",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"keywords": [
|
||||
"stand",
|
||||
"celular",
|
||||
"telefono",
|
||||
"smartphone",
|
||||
"chile",
|
||||
"soporte",
|
||||
"tablet"
|
||||
],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
BIN
public/assets/fonts/icomoon.eot
Normal file
BIN
public/assets/fonts/icomoon.eot
Normal file
Binary file not shown.
12
public/assets/fonts/icomoon.svg
Normal file
12
public/assets/fonts/icomoon.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icomoon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="angle" horiz-adv-x="1325" d="M1141.196 132.785h-457.624c-10.618 93.644-46.826 180.902-105.693 254.713l392.607 392.604c10.889 10.889 16.888 25.367 16.888 40.768s-5.998 29.878-16.886 40.764c-10.888 10.891-25.366 16.888-40.766 16.888s-29.877-5.997-40.768-16.886l-745.74-745.736c-11.067-11.065-17.217-26.386-16.873-42.034 0.062-2.823 0.333-5.655 0.805-8.418 0.721-4.228 1.919-8.388 3.569-12.375 8.955-21.621 29.863-35.591 53.265-35.591h957.217c31.791 0 57.654 25.863 57.654 57.654s-25.864 57.65-57.655 57.65zM567.304 132.785h-244.139l172.512 172.511c37.893-50.979 62.317-109.804 71.626-172.511z" />
|
||||
<glyph unicode="" glyph-name="chile" horiz-adv-x="1604" d="M1604.11-64h-1604.11v1021.898h1604.037v-1021.898zM67.638 3.566h1468.905v886.766h-1468.905v-886.766zM1604.11-64h-1604.11v544.659h1604.037v-544.659zM67.638 3.566h1468.905v409.528h-1468.905v-409.528zM628.754 413.093h-628.754v544.804h628.754v-544.804zM67.638 480.659h493.622v409.673h-493.622v-409.673zM314.341 632.32l-61.331-32.261 11.672 68.436-49.732 48.427 68.726 10.004 30.666 62.346 30.738-62.346 68.798-10.004-49.732-48.427 11.744-68.436zM230.536 569.104l16.022 93.519-67.856 66.188 93.737 13.629 41.83 85.037 41.975-85.037 93.809-13.629-67.783-66.188 16.094-93.447-84.022 44.077-83.805-44.15zM314.341 651.459l39.148-20.516-7.467 43.497 31.608 30.738-43.787 6.38-19.501 39.51-19.429-39.51-43.642-6.38 31.536-30.738-7.395-43.497 38.93 20.516z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public/assets/fonts/icomoon.ttf
Normal file
BIN
public/assets/fonts/icomoon.ttf
Normal file
Binary file not shown.
BIN
public/assets/fonts/icomoon.woff
Normal file
BIN
public/assets/fonts/icomoon.woff
Normal file
Binary file not shown.
BIN
public/assets/images/banner.jpg
Normal file
BIN
public/assets/images/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
public/assets/images/construido.jpg
Normal file
BIN
public/assets/images/construido.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
public/assets/images/conversemos.png
Normal file
BIN
public/assets/images/conversemos.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
public/assets/images/corporativo.png
Normal file
BIN
public/assets/images/corporativo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
public/assets/images/descripcion1.png
Normal file
BIN
public/assets/images/descripcion1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
public/assets/images/descripcion2.png
Normal file
BIN
public/assets/images/descripcion2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
public/assets/images/descripcion3.png
Normal file
BIN
public/assets/images/descripcion3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
161
public/assets/images/dimensiones.svg
Normal file
161
public/assets/images/dimensiones.svg
Normal file
@ -0,0 +1,161 @@
|
||||
<?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="235.238px" height="234.096px" viewBox="0 0 235.238 234.096" enable-background="new 0 0 235.238 234.096"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<polygon fill="#D2D3D4" points="236.877,234.406 1,234.406 28.9,143.036 208.979,143.036 "/>
|
||||
<g>
|
||||
<path fill="none" d="M157.367,110.951c-0.184-0.223-0.201-0.534-0.27-0.825c-1.813-7.508-3.622-15.016-5.432-22.523
|
||||
c-2.019-8.375-4.042-16.746-6.055-25.121c-2.543-10.59-5.077-21.18-7.619-31.771c-1.203-4.998-2.418-9.991-3.625-14.986
|
||||
c-0.157-0.649-0.298-1.303-0.487-1.94c-0.222-0.751-0.591-1.001-1.363-0.901c-0.555,0.074-1.11,0.064-1.664,0.098
|
||||
c-1.108,0.063-2.216,0.143-3.321,0.225c-1.135,0.08-2.267,0.183-3.403,0.263c-1.08,0.076-2.16,0.125-3.24,0.206
|
||||
c-1.965,0.144-3.925,0.315-5.891,0.455c-1.882,0.135-3.768,0.232-5.648,0.371c-2.738,0.2-5.477,0.449-8.218,0.621
|
||||
c-2.462,0.157-4.927,0.333-7.389,0.493c-2.465,0.16-4.927,0.324-7.39,0.51c-1.991,0.151-3.989,0.215-5.981,0.381
|
||||
c-0.94,0.075-1.885,0.098-2.823,0.182c-1.603,0.142-3.201,0.332-4.819,0.298c-0.246-0.002-0.5,0-0.745,0.043
|
||||
c-0.729,0.135-1.219,0.706-1.244,1.449c-0.019,0.501,0.012,0.998,0.064,1.496c0.108,1.076,0.182,2.158,0.25,3.238
|
||||
c0.081,1.246,0.073,2.502,0.227,3.738c0.114,0.941,0.081,1.884,0.159,2.825c0.112,1.326,0.226,2.656,0.283,3.983
|
||||
c0.059,1.333,0.123,2.666,0.225,3.992c0.237,3.125,0.315,6.265,0.61,9.386c0.101,1.052,0.13,2.106,0.2,3.156
|
||||
c0.134,2.024,0.313,4.039,0.452,6.06c0.139,2.02,0.236,4.044,0.379,6.068c0.195,2.82,0.425,5.641,0.619,8.465
|
||||
c0.143,2.079,0.217,4.161,0.385,6.233c0.071,0.886,0.109,1.775,0.178,2.658c0.153,2.016,0.307,4.038,0.443,6.058
|
||||
c0.084,1.247,0.119,2.498,0.207,3.742c0.196,2.796,0.455,5.589,0.61,8.385c0.113,2.05,0.31,4.093,0.399,6.148
|
||||
c0.042,0.967,0.104,1.939,0.184,2.908c0.104,1.245,0.191,2.487,0.276,3.732c0.075,1.109,0.131,2.219,0.208,3.324
|
||||
c0.149,2.131,0.311,4.26,0.455,6.394c0.079,1.16,0.121,2.325,0.205,3.491c0.144,2.099,0.322,4.2,0.462,6.304
|
||||
c0.139,2.049,0.208,4.102,0.383,6.148c0.072,0.86,0.102,1.718,0.171,2.577c0.156,1.99,0.306,3.983,0.442,5.975
|
||||
c0.083,1.22,0.086,2.445,0.222,3.657c0.098,0.885,0.098,1.774,0.168,2.66c0.147,1.936,0.313,3.869,0.439,5.811
|
||||
c0.142,2.104,0.205,4.213,0.391,6.311c0.081,0.915,0.1,1.83,0.171,2.743c0.152,1.907,0.293,3.815,0.438,5.723
|
||||
c0.008,0.142,0.008,0.28-0.014,0.417c-0.03,0.201-0.161,0.282-0.357,0.243c-0.137-0.024-0.271-0.066-0.403-0.112
|
||||
c-2.613-0.853-5.229-1.709-7.841-2.566c-0.236-0.076-0.514-0.118-0.663-0.328c-0.391-0.54-0.936-0.753-1.564-0.838
|
||||
c-0.156-0.019-0.325-0.098-0.452-0.198c-1.352-1.021-2.733-2.008-3.512-3.6c-0.443-0.907-0.646-0.971-1.661-0.723
|
||||
c-1.593,0.392-3.194,0.751-4.768,1.206c-0.808,0.232-1.359,0.06-1.914-0.546c-0.681-0.744-1.295-1.526-1.868-2.347
|
||||
c-0.538-0.769-1.208-1.079-2.154-0.818c-1.314,0.363-2.65,0.638-3.959,1.008c-0.688,0.199-1.25,0.094-1.775-0.357
|
||||
c-0.21-0.185-0.418-0.365-0.625-0.554c-0.798-0.713-1.344-1.621-1.932-2.496c-0.67-0.99-1.249-1.234-2.417-0.955
|
||||
c-0.783,0.182-1.555,0.419-2.322,0.661c-1.042,0.33-1.266,0.648-1.104,1.714c0.256,1.674,0.512,3.348,0.946,4.991
|
||||
c0.281,1.067,0.839,1.897,1.715,2.572c3.706,2.882,7.385,5.801,11.083,8.695c6.061,4.738,12.125,9.478,18.193,14.211
|
||||
c3.331,2.595,6.673,5.178,10.015,7.758c1.914,1.479,3.847,2.929,5.754,4.414c0.989,0.767,1.977,1.017,3.249,0.613
|
||||
c3.046-0.958,6.134-1.773,9.21-2.646c12.589-3.559,25.181-7.11,37.77-10.674c10.771-3.056,21.539-6.123,32.307-9.186
|
||||
c0.832-0.235,1.66-0.465,2.477-0.735c0.73-0.239,0.914-0.591,0.797-1.334c-0.02-0.135-0.063-0.272-0.094-0.402
|
||||
c-1.119-4.788-2.246-9.58-3.361-14.367c-1.814-7.791-3.623-15.589-5.428-23.383c-0.51-2.189-1.002-4.385-1.492-6.584
|
||||
c-0.152-0.66-0.168-1.303,0.145-1.948c2.189-4.558,4.363-9.124,6.541-13.688c1.217-2.559,2.436-5.117,3.652-7.68
|
||||
c0.217-0.449,0.402-0.914,0.506-1.408c0.33-1.552-0.605-2.568-2.16-2.352c-0.166,0.022-0.326,0.064-0.492,0.093
|
||||
c-3.607,0.652-7.209,1.338-10.832,1.906c-0.949,0.149-1.848,0.411-2.488,1.204C157.67,110.845,157.576,110.96,157.367,110.951z"
|
||||
/>
|
||||
<path d="M157.367,110.951c0.209,0.01,0.303-0.106,0.387-0.208c0.643-0.792,1.541-1.054,2.49-1.204
|
||||
c3.623-0.568,7.225-1.253,10.832-1.906c0.166-0.029,0.326-0.071,0.492-0.093c1.553-0.216,2.49,0.8,2.16,2.352
|
||||
c-0.105,0.494-0.289,0.958-0.506,1.408c-1.219,2.562-2.436,5.121-3.652,7.68c-2.18,4.564-4.352,9.13-6.543,13.688
|
||||
c-0.313,0.646-0.295,1.289-0.145,1.948c0.49,2.198,0.984,4.395,1.492,6.585c1.805,7.794,3.615,15.592,5.43,23.383
|
||||
c1.113,4.787,2.24,9.579,3.361,14.366c0.031,0.132,0.072,0.27,0.094,0.403c0.117,0.742-0.066,1.094-0.797,1.334
|
||||
c-0.816,0.271-1.645,0.498-2.477,0.735c-10.77,3.063-21.535,6.13-32.308,9.186c-12.589,3.563-25.182,7.115-37.77,10.674
|
||||
c-3.075,0.872-6.163,1.687-9.21,2.646c-1.272,0.404-2.26,0.154-3.249-0.612c-1.907-1.485-3.841-2.935-5.754-4.414
|
||||
c-3.341-2.58-6.683-5.162-10.015-7.758c-6.069-4.734-12.133-9.473-18.193-14.211c-3.699-2.895-7.377-5.813-11.083-8.695
|
||||
c-0.875-0.675-1.433-1.505-1.715-2.572c-0.434-1.644-0.69-3.317-0.946-4.991c-0.162-1.065,0.062-1.383,1.104-1.714
|
||||
c0.767-0.242,1.54-0.479,2.322-0.661c1.168-0.279,1.747-0.034,2.417,0.955c0.588,0.875,1.134,1.783,1.932,2.496
|
||||
c0.207,0.188,0.414,0.369,0.625,0.554c0.525,0.45,1.087,0.557,1.775,0.357c1.309-0.371,2.645-0.646,3.959-1.008
|
||||
c0.945-0.261,1.616,0.05,2.154,0.818c0.572,0.82,1.187,1.602,1.868,2.347c0.554,0.605,1.106,0.778,1.914,0.546
|
||||
c1.574-0.454,3.174-0.815,4.768-1.205c1.014-0.249,1.217-0.186,1.661,0.722c0.779,1.592,2.16,2.579,3.512,3.6
|
||||
c0.127,0.101,0.296,0.181,0.452,0.198c0.63,0.085,1.174,0.298,1.564,0.837c0.149,0.211,0.427,0.253,0.663,0.329
|
||||
c2.612,0.858,5.228,1.715,7.841,2.566c0.131,0.046,0.266,0.088,0.403,0.112c0.195,0.038,0.326-0.042,0.357-0.242
|
||||
c0.021-0.138,0.021-0.276,0.014-0.418c-0.146-1.907-0.285-3.815-0.439-5.724c-0.071-0.912-0.089-1.827-0.17-2.742
|
||||
c-0.187-2.098-0.25-4.206-0.391-6.311c-0.127-1.941-0.292-3.875-0.439-5.811c-0.071-0.886-0.071-1.775-0.169-2.66
|
||||
c-0.135-1.211-0.139-2.438-0.222-3.657c-0.136-1.991-0.285-3.983-0.442-5.975c-0.069-0.859-0.099-1.717-0.171-2.577
|
||||
c-0.174-2.047-0.244-4.099-0.383-6.148c-0.14-2.104-0.319-4.205-0.462-6.305c-0.083-1.165-0.126-2.33-0.205-3.49
|
||||
c-0.145-2.134-0.305-4.263-0.455-6.394c-0.077-1.106-0.132-2.216-0.208-3.324c-0.085-1.246-0.173-2.488-0.276-3.732
|
||||
c-0.081-0.969-0.142-1.941-0.184-2.908c-0.089-2.055-0.286-4.098-0.399-6.148c-0.155-2.796-0.413-5.589-0.611-8.385
|
||||
c-0.088-1.245-0.122-2.496-0.207-3.743c-0.136-2.019-0.29-4.041-0.443-6.058c-0.067-0.883-0.105-1.772-0.178-2.657
|
||||
c-0.169-2.073-0.242-4.154-0.385-6.234c-0.193-2.822-0.424-5.643-0.619-8.464c-0.143-2.024-0.24-4.047-0.379-6.067
|
||||
c-0.139-2.021-0.318-4.036-0.451-6.06c-0.071-1.051-0.101-2.105-0.2-3.156c-0.295-3.122-0.372-6.262-0.611-9.387
|
||||
c-0.102-1.326-0.166-2.659-0.225-3.992c-0.058-1.328-0.171-2.657-0.284-3.983c-0.078-0.941-0.045-1.884-0.159-2.825
|
||||
c-0.153-1.236-0.146-2.491-0.227-3.738c-0.067-1.08-0.141-2.162-0.25-3.238c-0.052-0.498-0.081-0.995-0.064-1.496
|
||||
c0.024-0.745,0.515-1.313,1.245-1.449c0.245-0.043,0.499-0.045,0.745-0.043c1.619,0.034,3.216-0.156,4.819-0.298
|
||||
c0.938-0.084,1.884-0.107,2.823-0.183c1.992-0.164,3.99-0.229,5.981-0.38c2.462-0.185,4.925-0.35,7.39-0.51
|
||||
c2.462-0.16,4.927-0.337,7.389-0.492c2.741-0.171,5.479-0.421,8.218-0.621c1.88-0.138,3.766-0.235,5.648-0.371
|
||||
c1.965-0.14,3.925-0.312,5.891-0.456c1.081-0.08,2.16-0.129,3.24-0.205c1.135-0.081,2.267-0.184,3.403-0.263
|
||||
c1.105-0.083,2.213-0.162,3.321-0.225c0.554-0.034,1.109-0.024,1.664-0.098c0.772-0.101,1.141,0.149,1.363,0.901
|
||||
c0.19,0.638,0.33,1.292,0.487,1.939c1.207,4.996,2.422,9.989,3.624,14.987c2.542,10.59,5.075,21.181,7.621,31.771
|
||||
c2.011,8.375,4.036,16.747,6.053,25.121c1.811,7.508,3.619,15.016,5.432,22.523C157.166,110.416,157.184,110.728,157.367,110.951
|
||||
z M136.379,155.323c-9.857-39.67-19.697-79.271-29.536-118.87c-0.019-0.078-0.054-0.155-0.087-0.234
|
||||
c-0.008-0.02-0.031-0.046-0.053-0.053c-0.106-0.033-0.017,0.1-0.083-0.016c0,0.435-0.025,0.849,0.003,1.26
|
||||
c0.201,3.045,0.428,6.091,0.617,9.138c0.147,2.353,0.221,4.712,0.388,7.064c0.066,0.97,0.105,1.943,0.17,2.909
|
||||
c0.14,2.247,0.313,4.486,0.449,6.729c0.137,2.272,0.212,4.55,0.387,6.815c0.081,1.027,0.105,2.055,0.175,3.077
|
||||
c0.157,2.214,0.309,4.431,0.443,6.648c0.137,2.245,0.24,4.49,0.379,6.734c0.195,3.13,0.419,6.258,0.608,9.39
|
||||
c0.146,2.354,0.227,4.711,0.396,7.066c0.067,0.969,0.106,1.94,0.165,2.911c0.157,2.52,0.276,5.042,0.493,7.556
|
||||
c0.177,2.065,0.047,4.169,0.659,6.192c0.103,0.34,0.128,0.717,0.128,1.073c-0.012,2.169,0.187,4.325,0.31,6.485
|
||||
c0.205,3.606,0.365,7.212,0.559,10.816c0.093,1.716,0.205,3.436,0.318,5.153c0.039,0.59,0.092,0.669,0.63,0.588
|
||||
c0.499-0.079,0.79,0.109,1.022,0.508c0.275,0.486,0.557,0.965,0.856,1.434c0.653,1.003,1.79,1.443,2.965,1.163
|
||||
c0.538-0.132,1.077-0.276,1.618-0.398c1.394-0.3,2.448,0.24,3.035,1.55c0.135,0.305,0.252,0.62,0.427,0.9
|
||||
c0.527,0.856,1.376,1.192,2.354,0.971c0.814-0.184,1.625-0.377,2.441-0.544c1.296-0.271,1.594-0.136,2.258,0.967
|
||||
c1.168,1.938,2.735,3.485,4.624,4.717C135.725,155.171,135.942,155.37,136.379,155.323z M113.819,154.193
|
||||
c-0.082,0.515-0.052,0.952-0.011,1.385c0.141,1.578,0.229,3.156,0.315,4.735c0.103,1.911,0.24,3.828,0.37,5.738
|
||||
c0.145,2.159,0.299,4.321,0.438,6.481c0.132,2.02,0.249,4.043,0.379,6.067c0.025,0.415,0.089,0.829,0.123,1.241
|
||||
c0.027,0.316,0.17,0.463,0.493,0.378c0.161-0.04,0.319-0.09,0.481-0.13c4.912-1.316,9.823-2.626,14.736-3.941
|
||||
c0.668-0.18,1.339-0.365,2.006-0.557c0.327-0.098,0.389-0.285,0.155-0.552c-0.054-0.065-0.11-0.125-0.167-0.185
|
||||
c-2.172-2.344-4.341-4.685-6.514-7.028c-1.607-1.729-3.219-3.452-4.823-5.188c-2.392-2.591-4.775-5.188-7.17-7.781
|
||||
C114.424,154.639,114.247,154.379,113.819,154.193z"/>
|
||||
<path fill="none" d="M136.379,155.323c-0.438,0.048-0.656-0.15-0.881-0.3c-1.887-1.231-3.454-2.778-4.624-4.717
|
||||
c-0.663-1.103-0.96-1.237-2.258-0.967c-0.817,0.167-1.627,0.36-2.44,0.544c-0.979,0.222-1.829-0.114-2.354-0.971
|
||||
c-0.175-0.278-0.291-0.596-0.427-0.9c-0.587-1.31-1.641-1.85-3.035-1.55c-0.542,0.121-1.08,0.267-1.618,0.398
|
||||
c-1.174,0.28-2.312-0.159-2.965-1.163c-0.299-0.469-0.58-0.948-0.856-1.434c-0.232-0.398-0.523-0.587-1.022-0.508
|
||||
c-0.538,0.081-0.592,0.002-0.63-0.588c-0.113-1.718-0.226-3.438-0.318-5.153c-0.192-3.604-0.354-7.21-0.558-10.816
|
||||
c-0.123-2.16-0.321-4.316-0.31-6.485c0-0.356-0.025-0.733-0.128-1.073c-0.613-2.023-0.483-4.127-0.659-6.192
|
||||
c-0.217-2.514-0.336-5.036-0.492-7.556c-0.06-0.971-0.099-1.942-0.166-2.911c-0.169-2.355-0.251-4.712-0.397-7.066
|
||||
c-0.188-3.131-0.411-6.259-0.608-9.39c-0.139-2.244-0.242-4.49-0.379-6.734c-0.134-2.217-0.285-4.434-0.443-6.648
|
||||
c-0.069-1.021-0.093-2.049-0.175-3.077c-0.175-2.265-0.25-4.543-0.387-6.815c-0.137-2.243-0.31-4.483-0.449-6.729
|
||||
c-0.064-0.966-0.104-1.938-0.17-2.909c-0.167-2.352-0.24-4.712-0.388-7.064c-0.19-3.048-0.417-6.093-0.617-9.138
|
||||
c-0.029-0.411-0.004-0.826-0.004-1.26c0.067,0.116-0.023-0.018,0.083,0.016c0.021,0.006,0.044,0.033,0.053,0.053
|
||||
c0.034,0.079,0.068,0.156,0.088,0.234C116.683,76.052,126.522,115.652,136.379,155.323z"/>
|
||||
<path fill="none" d="M113.819,154.193c0.428,0.188,0.605,0.446,0.81,0.665c2.395,2.594,4.778,5.19,7.17,7.781
|
||||
c1.604,1.734,3.216,3.458,4.823,5.188c2.173,2.344,4.342,4.685,6.514,7.028c0.058,0.06,0.113,0.119,0.167,0.185
|
||||
c0.233,0.267,0.172,0.454-0.155,0.552c-0.666,0.191-1.337,0.377-2.006,0.557c-4.913,1.315-9.824,2.625-14.736,3.941
|
||||
c-0.161,0.04-0.319,0.09-0.481,0.13c-0.323,0.085-0.466-0.063-0.493-0.378c-0.034-0.411-0.098-0.826-0.123-1.241
|
||||
c-0.13-2.024-0.247-4.047-0.379-6.067c-0.139-2.16-0.294-4.322-0.438-6.481c-0.13-1.91-0.269-3.827-0.37-5.738
|
||||
c-0.085-1.579-0.174-3.157-0.315-4.735C113.767,155.144,113.737,154.706,113.819,154.193z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="94.438" y1="210.56" x2="178.107" y2="186.376"/>
|
||||
<g>
|
||||
|
||||
<rect x="93.921" y="207.263" transform="matrix(0.9608 -0.2771 0.2771 0.9608 -54.6566 34.417)" width="1.015" height="6.606"/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<rect x="177.603" y="183.076" transform="matrix(-0.9607 0.2776 -0.2776 -0.9607 400.9664 315.9814)" width="1.017" height="6.607"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="85.708" y1="208.16" x2="38.299" y2="169.775"/>
|
||||
<g>
|
||||
|
||||
<rect x="85.207" y="204.857" transform="matrix(-0.7762 -0.6305 0.6305 -0.7762 20.9901 423.7733)" width="1.016" height="6.608"/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<rect x="37.803" y="166.474" transform="matrix(0.7776 0.6288 -0.6288 0.7776 115.2769 13.6744)" width="1.014" height="6.607"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="193.83" y1="176.319" x2="193.83" y2="10.981"/>
|
||||
<g>
|
||||
<rect x="190.527" y="175.811" width="6.605" height="1.016"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="190.527" y="10.473" width="6.605" height="1.017"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 200.0879 90.47)" fill="#010101" font-family="'Lato-Regular'" font-size="10.434">15 cm</text>
|
||||
</g>
|
||||
<g>
|
||||
<text transform="matrix(1 0 0 1 29.416 198.468)" fill="#010101" font-family="'Lato-Regular'" font-size="10.434">7 cm</text>
|
||||
</g>
|
||||
<text transform="matrix(1 0 0 1 133.1274 214.5188)" fill="#010101" font-family="'Lato-Regular'" font-size="10.434">7 cm</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 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: 4.5 KiB |
BIN
public/assets/images/fotos/amarillo/center.jpg
Normal file
BIN
public/assets/images/fotos/amarillo/center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
public/assets/images/fotos/amarillo/left.jpg
Normal file
BIN
public/assets/images/fotos/amarillo/left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
BIN
public/assets/images/fotos/amarillo/right.jpg
Normal file
BIN
public/assets/images/fotos/amarillo/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
public/assets/images/fotos/amarillo/thumb.jpg
Normal file
BIN
public/assets/images/fotos/amarillo/thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
public/assets/images/fotos/azul/center.jpg
Normal file
BIN
public/assets/images/fotos/azul/center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
public/assets/images/fotos/azul/left.jpg
Normal file
BIN
public/assets/images/fotos/azul/left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
public/assets/images/fotos/azul/right.jpg
Normal file
BIN
public/assets/images/fotos/azul/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
public/assets/images/fotos/azul/thumb.jpg
Normal file
BIN
public/assets/images/fotos/azul/thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/assets/images/fotos/azul_petroleo/center.jpg
Normal file
BIN
public/assets/images/fotos/azul_petroleo/center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
public/assets/images/fotos/azul_petroleo/left.jpg
Normal file
BIN
public/assets/images/fotos/azul_petroleo/left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
public/assets/images/fotos/azul_petroleo/right.jpg
Normal file
BIN
public/assets/images/fotos/azul_petroleo/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
public/assets/images/fotos/azul_petroleo/thumb.jpg
Normal file
BIN
public/assets/images/fotos/azul_petroleo/thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/assets/images/fotos/blanco/center.jpg
Normal file
BIN
public/assets/images/fotos/blanco/center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
BIN
public/assets/images/fotos/blanco/left.jpg
Normal file
BIN
public/assets/images/fotos/blanco/left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
BIN
public/assets/images/fotos/blanco/right.jpg
Normal file
BIN
public/assets/images/fotos/blanco/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
public/assets/images/fotos/blanco/thumb.jpg
Normal file
BIN
public/assets/images/fotos/blanco/thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/assets/images/fotos/celeste/center.jpg
Normal file
BIN
public/assets/images/fotos/celeste/center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
public/assets/images/fotos/celeste/left.jpg
Normal file
BIN
public/assets/images/fotos/celeste/left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
public/assets/images/fotos/celeste/right.jpg
Normal file
BIN
public/assets/images/fotos/celeste/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
public/assets/images/fotos/celeste/thumb.jpg
Normal file
BIN
public/assets/images/fotos/celeste/thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/assets/images/fotos/naranjo/center.jpg
Normal file
BIN
public/assets/images/fotos/naranjo/center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
public/assets/images/fotos/naranjo/left.jpg
Normal file
BIN
public/assets/images/fotos/naranjo/left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
public/assets/images/fotos/naranjo/right.jpg
Normal file
BIN
public/assets/images/fotos/naranjo/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
public/assets/images/fotos/naranjo/thumb.jpg
Normal file
BIN
public/assets/images/fotos/naranjo/thumb.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/assets/images/fotos/negro/center.jpg
Normal file
BIN
public/assets/images/fotos/negro/center.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
public/assets/images/fotos/negro/left.jpg
Normal file
BIN
public/assets/images/fotos/negro/left.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
public/assets/images/fotos/negro/right.jpg
Normal file
BIN
public/assets/images/fotos/negro/right.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user