v2.0.0-beta
This commit is contained in:
15
assets/html/001_head.html
Normal file
15
assets/html/001_head.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Stand Chile</title>
|
||||||
|
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
|
||||||
|
<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>
|
||||||
39
assets/html/002_banner.html
Normal file
39
assets/html/002_banner.html
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<header id="header">
|
||||||
|
<div class="ui container">
|
||||||
|
<nav id="menu" class="ui borderless sticky menu" role="navigation" aria-label="navigation">
|
||||||
|
<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="./">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">
|
||||||
|
<a class="item" href="#contacto">
|
||||||
|
<i class="shopping cart icon">
|
||||||
|
<div class="cantidad">0</div>
|
||||||
|
</i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<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">
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="left column">
|
||||||
|
<div class="images">
|
||||||
|
<div class="ui medium image">
|
||||||
|
<img src="./assets/images/seccion11.png" />
|
||||||
|
</div>
|
||||||
|
<div class="ui medium image">
|
||||||
|
<img src="./assets/images/seccion12.png" />
|
||||||
|
</div>
|
||||||
|
<div class="ui medium image">
|
||||||
|
<img src="./assets/images/seccion13.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">
|
||||||
|
<div class="diagonal"></div>
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="left column">
|
||||||
|
<div class="titulo">
|
||||||
|
VENTAJAS
|
||||||
|
</div>
|
||||||
|
<div class="ui two columns stackable grid">
|
||||||
|
<div class="column">
|
||||||
|
<div class="gallery">
|
||||||
|
<div class="ui large image">
|
||||||
|
<img src="./assets/images/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 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">
|
||||||
|
<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">
|
||||||
|
<img src="./assets/images/fotos/azul/left-small.jpg" class="left-small" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="five wide column">
|
||||||
|
<div class="ui image">
|
||||||
|
<img src="./assets/images/fotos/azul/left.jpg" class="left" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="five wide column">
|
||||||
|
<div class="ui image">
|
||||||
|
<img src="./assets/images/fotos/azul/right.jpg" class="right" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
18
assets/html/006_construido.html
Normal file
18
assets/html/006_construido.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<section id="construidos">
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="left column">
|
||||||
|
<div class="titulo">
|
||||||
|
CONSTRUIDOS CON IMPRESIÓN 3D
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<i class="chile icon"></i>
|
||||||
|
<br />
|
||||||
|
Diseñado y fabricado en Chile
|
||||||
|
<br />
|
||||||
|
<i class="recycle icon"></i>
|
||||||
|
<br />
|
||||||
|
Fabricado en plástico de orien vegetal sin derivados del petróleo
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
96
assets/html/007_corporativos.html
Normal file
96
assets/html/007_corporativos.html
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
<section id="corporativos">
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="left column">
|
||||||
|
<div class="titulo">
|
||||||
|
CORPORATIVOS
|
||||||
|
</div>
|
||||||
|
<div class="two columns stackable grid">
|
||||||
|
<div class="column">
|
||||||
|
<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">Siempre visible</li>
|
||||||
|
<li class="minus">Menor tamaño</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<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">Mayor tamaño</li>
|
||||||
|
<li class="minus">No se ve al apoyar el teléfono</li>
|
||||||
|
</ul>
|
||||||
|
</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="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>
|
||||||
|
</section>
|
||||||
25
assets/html/008_testimonios.html
Normal file
25
assets/html/008_testimonios.html
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<section id="testimonios">
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="titulo">
|
||||||
|
CLIENTES FELICES
|
||||||
|
</div>
|
||||||
|
<div class="ui grid">
|
||||||
|
<div class="three columns row">
|
||||||
|
<div class="column">
|
||||||
|
<div class="testimonio ui card"></div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="testimonio ui card"></div>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<div class="testimonio ui card"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="sixteen wide column">
|
||||||
|
<div class="nav"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
62
assets/html/009_contacto.html
Normal file
62
assets/html/009_contacto.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<section id="contacto">
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="ui stackable grid">
|
||||||
|
<div class="column">
|
||||||
|
<div class="ui stackable 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">
|
||||||
|
<div class="whatsapp">
|
||||||
|
<i class="whatsapp icon"></i>
|
||||||
|
CONVERSEMOS
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
|
<a href="mailto:contacto@3dstand.cl">
|
||||||
|
contacto@3dstand.cl
|
||||||
|
</a>
|
||||||
|
<br />
|
||||||
|
<i class="ui icons">
|
||||||
|
<a href="http://instagram.com/stand">
|
||||||
|
<i class="ui icons">
|
||||||
|
<i class="circle icon"></i>
|
||||||
|
<i class="instagram icon"></i>
|
||||||
|
</i>
|
||||||
|
</a>
|
||||||
|
<a href="http://facebook.com/stand">
|
||||||
|
<i class="ui icons">
|
||||||
|
<i class="circle icon"></i>
|
||||||
|
<i class="facebook f icon"></i>
|
||||||
|
</i>
|
||||||
|
</a>
|
||||||
|
</i>
|
||||||
|
</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">
|
||||||
|
<input type="text" name="nombre" placeholder="NOMBRE" />
|
||||||
|
<input type="text" name="mail" placeholder="E-MAIL" />
|
||||||
|
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
|
||||||
|
<button class="ui button">ENVIAR</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
7
assets/html/101_footer.html
Normal file
7
assets/html/101_footer.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<!-- Scripts -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js" integrity="sha512-1Nyd5H4Aad+OyvVfUOkO/jWPCrEvYIsQENdnVXt1+Jjc4NoJw28nyRdrpOCyFH4uvR3JmH/5WmfX1MJk2ZlhgQ==" crossorigin="anonymous"></script>
|
||||||
|
<script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>
|
||||||
|
<script type="text/javascript" src="./assets/scripts/main.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,367 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="es">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Stand</title>
|
|
||||||
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
|
|
||||||
<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>
|
|
||||||
<div id="backgrounds">
|
|
||||||
<div class="cabezal"></div>
|
|
||||||
<div class="seccion1"></div>
|
|
||||||
<div class="seccion2">
|
|
||||||
<div class="diagonal"></div>
|
|
||||||
</div>
|
|
||||||
<div class="dimensiones">
|
|
||||||
<div class="fondo-gris"></div>
|
|
||||||
</div>
|
|
||||||
<div class="construido"></div>
|
|
||||||
<div class="corporativos"></div>
|
|
||||||
<div class="testimonios"></div>
|
|
||||||
<div class="formulario"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="content" class="ui container">
|
|
||||||
<header id="header">
|
|
||||||
<nav class="ui borderless sticky menu">
|
|
||||||
<div class="ui simple dropdown item">
|
|
||||||
<div class="text">
|
|
||||||
<i class="bars icon"></i>
|
|
||||||
</div>
|
|
||||||
<div class="menu">
|
|
||||||
<a class="item" href="./">Inicio</a>
|
|
||||||
<a class="item" href="./#seccion2">Ventajas</a>
|
|
||||||
<a class="item" href="./#dimensiones">Dimensiones</a>
|
|
||||||
<a class="item" href="./#corporativos">Corporativos</a>
|
|
||||||
<a class="item" href="./#felices">Testimonios</a>
|
|
||||||
<a class="item" href="./#formulario">Contacto</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right menu">
|
|
||||||
<a class="item" href="./#formulario">
|
|
||||||
<i class="shopping cart icon">
|
|
||||||
<div>0</div>
|
|
||||||
</i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div class="logo ui center aligned basic segment">
|
|
||||||
<img src="./assets/images/logo.svg" />
|
|
||||||
<div class="frase1">
|
|
||||||
SOPORTES PARA SMARTPHONE Y TABLETS
|
|
||||||
</div>
|
|
||||||
<div class="frase2">
|
|
||||||
Diseñado y Fabricado en Chile
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="column1 column" id="column">
|
|
||||||
<section id="seccion1" class="ui simple segment">
|
|
||||||
<div class="image-container">
|
|
||||||
<div class="corte1">
|
|
||||||
<img src="./assets/images/seccion11.png" />
|
|
||||||
<img src="./assets/images/seccion12.png" />
|
|
||||||
</div>
|
|
||||||
<div class="corte2">
|
|
||||||
<img src="./assets/images/seccion13.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>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="seccion2" class="ui simple segment">
|
|
||||||
<div class="column1 column">
|
|
||||||
<img src="./assets/images/foto1.jpg" />
|
|
||||||
</div>
|
|
||||||
<div class="column2 column">
|
|
||||||
<div class="row">
|
|
||||||
<div class="header">
|
|
||||||
VENTAJAS
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>Apoyo estable del teléfono</li>
|
|
||||||
<li>Ángulo preciso de inclinación para usar en conferencias</li>
|
|
||||||
<li>Compatible con tablets permite cargar mientras se usa</li>
|
|
||||||
<li>Diseño moderno y minimalista</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<img src="./assets/images/foto2.jpg" />
|
|
||||||
<img src="./assets/images/foto3.jpg" />
|
|
||||||
<img src="./assets/images/foto1.jpg" />
|
|
||||||
<img src="./assets/images/foto2.jpg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="dimensiones" class="ui simple segment">
|
|
||||||
<div class="header">
|
|
||||||
<span class="bigger">DIMENSIONES</span> y colores
|
|
||||||
</div>
|
|
||||||
<div class="images">
|
|
||||||
<div class="column">
|
|
||||||
<img src="./assets/images/variedades.png" />
|
|
||||||
<div>
|
|
||||||
<img src="./assets/images/bandera.svg" />
|
|
||||||
DISEÑADO Y FABRICADO EN CHILE
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<img src="./assets/images/dimensiones.svg" />
|
|
||||||
<div>
|
|
||||||
Fabricado en plástico de origen vegetal sin derivados del petróleo
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="construido" class="ui simple segment">
|
|
||||||
<div class="header">
|
|
||||||
CONSTRUIDOS EN IMPRESIÓN 3D
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<div class="column2 column fondo-blanco">
|
|
||||||
<div class="ui sticky">
|
|
||||||
<form class="ui form" name="form-sticky">
|
|
||||||
<div class="row">
|
|
||||||
<div class="column1 column">
|
|
||||||
<div class="titulo linea">
|
|
||||||
STAND
|
|
||||||
</div>
|
|
||||||
<div class="precio linea">
|
|
||||||
$ 5.990
|
|
||||||
</div>
|
|
||||||
<div class="colores linea">
|
|
||||||
<input type="hidden" name="color" value="azul" />
|
|
||||||
<span class="text">COLOR</span>
|
|
||||||
<div class="white circle"></div>
|
|
||||||
<div class="black circle"></div>
|
|
||||||
<div class="blue circle"></div>
|
|
||||||
<div class="green circle"></div>
|
|
||||||
<div class="yellow circle"></div>
|
|
||||||
<div class="orange circle"></div>
|
|
||||||
<div class="red circle"></div>
|
|
||||||
</div>
|
|
||||||
<div class="input">
|
|
||||||
<button class="minus" type="button">
|
|
||||||
<i class="minus icon"></i>
|
|
||||||
</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
|
|
||||||
<i class="plus icon"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column2 column">
|
|
||||||
<img src="./assets/images/azul.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<button class="ui grey button" type="submit">AGREGAR AL CARRO</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section id="corporativos" class="ui simple segment">
|
|
||||||
<div class="column1 column">
|
|
||||||
<div class="header">
|
|
||||||
<span class="bigger">CORPORATIVOS</span> Regalos y más ...
|
|
||||||
</div>
|
|
||||||
<div class="opciones">
|
|
||||||
<div class="opcion">
|
|
||||||
<div class="img-grande">
|
|
||||||
<img src="./assets/images/foto2.jpg" />
|
|
||||||
</div>
|
|
||||||
<div class="descripcion">
|
|
||||||
<div class="content">
|
|
||||||
<div class="header">
|
|
||||||
LOGO ABAJO
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>Siempre visible</li>
|
|
||||||
<li>Menor tamaño</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="images">
|
|
||||||
<img src="./assets/images/foto3.jpg" />
|
|
||||||
<img src="./assets/images/foto1.jpg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="opcion">
|
|
||||||
<div class="img-grande">
|
|
||||||
<img src="./assets/images/foto3.jpg" />
|
|
||||||
</div>
|
|
||||||
<div class="descripcion">
|
|
||||||
<div class="content">
|
|
||||||
<div class="header">
|
|
||||||
LOGO ARRIBA
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>No se ve al apoyar el teléfono</li>
|
|
||||||
<li>Mayor tamaño</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="images">
|
|
||||||
<img src="./assets/images/foto1.jpg" />
|
|
||||||
<img src="./assets/images/foto2.jpg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column2 column fondo-blanco">
|
|
||||||
<div class="header">
|
|
||||||
COTIZA CON NOSOTROS
|
|
||||||
</div>
|
|
||||||
<form class="ui form">
|
|
||||||
<div class="row">
|
|
||||||
<div class="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="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>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="felices" class="ui simple segment">
|
|
||||||
<div class="header">
|
|
||||||
CLIENTES FELICES
|
|
||||||
</div>
|
|
||||||
<div class="testimonios">
|
|
||||||
<div class="testimonio"></div>
|
|
||||||
<div class="testimonio"></div>
|
|
||||||
<div class="testimonio"></div>
|
|
||||||
</div>
|
|
||||||
<div class="nav"></div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="formulario" class="ui simple segment">
|
|
||||||
<div class="flotante">
|
|
||||||
<div class="content">
|
|
||||||
<a href="https://wa.me/56994450117" class="item">
|
|
||||||
<div class="whatsapp">
|
|
||||||
<i class="whatsapp icon"></i>
|
|
||||||
CONVERSEMOS
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="mailto:ventas@stand.cl" class="item">
|
|
||||||
<div>
|
|
||||||
ventas@3Dstand.cl
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div class="rrss item">
|
|
||||||
<a href="http://www.instagram.com/stand">
|
|
||||||
<i class="icons">
|
|
||||||
<i class="inverted grey large circle icon"></i>
|
|
||||||
<i class="grey instagram icon"></i>
|
|
||||||
</i>
|
|
||||||
</a>
|
|
||||||
<a href="http://www.facebook.com/stand">
|
|
||||||
<i class="icons">
|
|
||||||
<i class="inverted grey large circle icon"></i>
|
|
||||||
<i class="grey facebook f icon"></i>
|
|
||||||
</i>
|
|
||||||
</a>
|
|
||||||
<!--
|
|
||||||
<a href="http://www.youtube.com/stand">
|
|
||||||
<i class="icons">
|
|
||||||
<i class="inverted grey large circle icon"></i>
|
|
||||||
<i class="grey youtube icon"></i>
|
|
||||||
</i>
|
|
||||||
</a>
|
|
||||||
<a href="http://www.linkedin.com/stand">
|
|
||||||
<i class="icons">
|
|
||||||
<i class="inverted grey large circle icon"></i>
|
|
||||||
<i class="grey linkedin in icon"></i>
|
|
||||||
</i>
|
|
||||||
</a>-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column1 column">
|
|
||||||
<img src="./assets/images/conversemos.png" />
|
|
||||||
</div>
|
|
||||||
<div class="column2 column">
|
|
||||||
<div class="header">
|
|
||||||
CONVERSEMOS! <a href="https://wa.me/56994450117" class="whatsapp-link"><i class="green whatsapp icon"></i></a>
|
|
||||||
</div>
|
|
||||||
<div class="paragraph">
|
|
||||||
scing elit, sed do eiusmod tempor incididunt ut labore et
|
|
||||||
dolore magna aliqua. Ut enim ad minim veniam, quis nosventas
|
|
||||||
</div>
|
|
||||||
<form class="ui form" id="contacto">
|
|
||||||
<input type="text" name="nombre" placeholder="NOMBRE" />
|
|
||||||
<input type="text" name="mail" placeholder="E-MAIL" />
|
|
||||||
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
|
|
||||||
<button class="ui button">ENVIAR</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Scripts -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js" integrity="sha512-1Nyd5H4Aad+OyvVfUOkO/jWPCrEvYIsQENdnVXt1+Jjc4NoJw28nyRdrpOCyFH4uvR3JmH/5WmfX1MJk2ZlhgQ==" crossorigin="anonymous"></script>
|
|
||||||
<script type="text/javascript" src="https://smtpjs.com/v3/smtp.js"></script>
|
|
||||||
<script type="text/javascript" src="./assets/scripts/main.min.js"></script>
|
|
||||||
</body>
|
|
||||||
@ -1,3 +1,42 @@
|
|||||||
|
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, 0, 255)'
|
||||||
|
},
|
||||||
|
petrol: {
|
||||||
|
name: 'petroleo',
|
||||||
|
rgb: 'rgb(0, 0, 150)'
|
||||||
|
},
|
||||||
|
cyan: {
|
||||||
|
name: 'celeste',
|
||||||
|
rgb: 'rgb(150, 150, 255)'
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
name: 'verde',
|
||||||
|
rgb: 'rgb(0, 255, 0)'
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
name: 'amarillo',
|
||||||
|
rgb: 'rgb(255, 255, 0)'
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
name: 'naranjo',
|
||||||
|
rgb: 'rgb(255, 130, 0)'
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
name: 'rojo',
|
||||||
|
rgb: 'rgb(255, 0, 0)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class Amount {
|
class Amount {
|
||||||
constructor(elem) {
|
constructor(elem) {
|
||||||
this.elem = elem
|
this.elem = elem
|
||||||
@ -113,6 +152,47 @@ class Colors {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let ventajas = {
|
||||||
|
elem: $('#ventajas'),
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let dimensiones = {
|
||||||
|
colors: available_colors,
|
||||||
|
picked: 'blue',
|
||||||
|
elem: $('#dimensiones'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.find('.colores .circle').each((i, el) => {
|
||||||
|
let color = $(el).attr('class').split(' ')[0]
|
||||||
|
if (color == 'petrol' || color == 'cyan') {
|
||||||
|
$(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')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let smtp = {
|
let smtp = {
|
||||||
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
||||||
From: 'contacto@3dstand.cl'
|
From: 'contacto@3dstand.cl'
|
||||||
@ -252,7 +332,7 @@ let testimonios = {
|
|||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
$('.menu.sticky').sticky()
|
$('#menu.sticky').sticky()
|
||||||
$('.column2 .sticky').sticky({
|
$('.column2 .sticky').sticky({
|
||||||
context: '#column'
|
context: '#column'
|
||||||
})
|
})
|
||||||
@ -260,6 +340,8 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
$('.shopping.cart').innerText = 0
|
$('.shopping.cart').innerText = 0
|
||||||
|
|
||||||
|
ventajas.setup()
|
||||||
|
dimensiones.setup()
|
||||||
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||||
let sticky_color = new Colors($('.sticky .colores'), true)
|
let sticky_color = new Colors($('.sticky .colores'), true)
|
||||||
sticky_form.setup()
|
sticky_form.setup()
|
||||||
|
|||||||
4
assets/sass/_common.scss
Normal file
4
assets/sass/_common.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@import 'header';
|
||||||
|
@import 'descripcion';
|
||||||
|
@import 'ventajas';
|
||||||
|
@import 'dimensiones';
|
||||||
7
assets/sass/_descripcion.scss
Normal file
7
assets/sass/_descripcion.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
#descripcion {
|
||||||
|
background-image: linear-gradient($gris, $gris);
|
||||||
|
|
||||||
|
.images {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
assets/sass/_dimensiones.scss
Normal file
24
assets/sass/_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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
35
assets/sass/_header.scss
Normal file
35
assets/sass/_header.scss
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
#header {
|
||||||
|
background-image: $fondo_cabezal;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
background-blend-mode: multiply;
|
||||||
|
|
||||||
|
color: $blanco;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
#menu {
|
||||||
|
background: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
|
||||||
|
.right.menu {
|
||||||
|
.item {
|
||||||
|
.shopping.cart {
|
||||||
|
.cantidad {
|
||||||
|
position: relative;
|
||||||
|
color: $blanco;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.segment {
|
||||||
|
margin: 0 !important;
|
||||||
|
#logo {
|
||||||
|
img {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,15 @@
|
|||||||
@import 'phone_vars';
|
@import 'phone_vars';
|
||||||
|
|
||||||
|
@import 'phone/header';
|
||||||
|
@import 'phone/descripcion';
|
||||||
|
@import 'phone/ventajas';
|
||||||
|
@import 'phone/dimensiones';
|
||||||
|
|
||||||
|
.left.column {
|
||||||
|
width: 75%;
|
||||||
|
padding-left: rem(5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
#backgrounds {
|
#backgrounds {
|
||||||
.cabezal {
|
.cabezal {
|
||||||
height: (map.get($heights, 'cabezal'))+rem;
|
height: (map.get($heights, 'cabezal'))+rem;
|
||||||
@ -22,7 +32,7 @@
|
|||||||
.seccion2 {
|
.seccion2 {
|
||||||
height: (map.get($heights, "seccion2"))+rem;
|
height: (map.get($heights, "seccion2"))+rem;
|
||||||
|
|
||||||
background-image: $fondo_seccion23;
|
background-image: $fondo_ventajas_dimensiones;
|
||||||
|
|
||||||
.diagonal {
|
.diagonal {
|
||||||
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
||||||
@ -32,7 +42,7 @@
|
|||||||
.dimensiones {
|
.dimensiones {
|
||||||
height: (map.get($heights, "dimensiones"))+rem;
|
height: (map.get($heights, "dimensiones"))+rem;
|
||||||
|
|
||||||
background-image: $fondo_seccion23;
|
background-image: $fondo_ventajas_dimensiones;
|
||||||
.fondo-gris {
|
.fondo-gris {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -8,8 +8,8 @@ $full_width: 600;
|
|||||||
|
|
||||||
$heights: (
|
$heights: (
|
||||||
"cabezal": (400/16),
|
"cabezal": (400/16),
|
||||||
"seccion1": 25,
|
"descripcion": 25,
|
||||||
"seccion2": 27.5,
|
"ventajas": 27.5,
|
||||||
"dimensiones": 27.5,
|
"dimensiones": 27.5,
|
||||||
"construido": 21.875,
|
"construido": 21.875,
|
||||||
"corporativos": (520/16),
|
"corporativos": (520/16),
|
||||||
|
|||||||
@ -12,6 +12,6 @@ $font_family: Roboto, sans;
|
|||||||
|
|
||||||
// Fondos
|
// Fondos
|
||||||
$fondo_cabezal: url('../images/banner.jpg');
|
$fondo_cabezal: url('../images/banner.jpg');
|
||||||
$fondo_seccion23: url('../images/fondo23.png');
|
$fondo_ventajas_dimensiones: url('../images/tripode.png');
|
||||||
$fondo_construido: url('../images/fondo4.jpg');
|
$fondo_construido: url('../images/construido.jpg');
|
||||||
$fondo_corporativo: url('../images/fondo5.png');
|
$fondo_corporativo: url('../images/corporativo.png');
|
||||||
|
|||||||
39
assets/sass/_ventajas.scss
Normal file
39
assets/sass/_ventajas.scss
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
#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;
|
||||||
|
}
|
||||||
|
.nav.left {
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.nav.right {
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,28 +1,25 @@
|
|||||||
@import 'pc_vars';
|
@import 'wide_vars';
|
||||||
|
@import 'wide/header';
|
||||||
|
@import 'wide/descripcion';
|
||||||
|
@import 'wide/ventajas';
|
||||||
|
@import 'wide/dimensiones';
|
||||||
|
|
||||||
|
.left.column {
|
||||||
|
width: 67%;
|
||||||
|
padding-left: rem(5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .titulo {
|
||||||
|
font-size: font_size(22);
|
||||||
|
padding-top: rem(54);
|
||||||
|
padding-bottom: rem(25);
|
||||||
|
}
|
||||||
|
|
||||||
#backgrounds {
|
#backgrounds {
|
||||||
.cabezal {
|
|
||||||
height: (map.get($heights, 'cabezal'))+rem;
|
|
||||||
|
|
||||||
background-image: $fondo_cabezal;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: rem(1600);
|
|
||||||
background-position: bottom rem(-40) center;
|
|
||||||
background-color: rgba(0, 0, 0, .4);
|
|
||||||
background-blend-mode: multiply;
|
|
||||||
}
|
|
||||||
.seccion1 {
|
|
||||||
height: (map.get($heights, "seccion1"))+rem;
|
|
||||||
|
|
||||||
background-image: linear-gradient($gris, $gris);
|
|
||||||
background-position: left rem(112);
|
|
||||||
background-size: 100% rem(128);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.seccion2 {
|
.seccion2 {
|
||||||
height: (map.get($heights, "seccion2"))+rem;
|
height: (map.get($heights, "seccion2"))+rem;
|
||||||
|
|
||||||
background-image: $fondo_seccion23;
|
background-image: $fondo_ventajas_dimensiones;
|
||||||
|
|
||||||
.diagonal {
|
.diagonal {
|
||||||
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
||||||
@ -32,7 +29,7 @@
|
|||||||
.dimensiones {
|
.dimensiones {
|
||||||
height: (map.get($heights, "dimensiones"))+rem;
|
height: (map.get($heights, "dimensiones"))+rem;
|
||||||
|
|
||||||
background-image: $fondo_seccion23;
|
background-image: $fondo_ventajas_dimensiones;
|
||||||
.fondo-gris {
|
.fondo-gris {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -64,14 +61,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
|
||||||
height: ($content_height)+rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: ($content_height)+rem;
|
|
||||||
font-family: $font_family;
|
|
||||||
color: $gris_standard;
|
color: $gris_standard;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -82,66 +72,6 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
top: (-$content_height)+rem;
|
top: (-$content_height)+rem;
|
||||||
|
|
||||||
#header {
|
|
||||||
color: rgb(255, 255, 255);
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: (map.get($heights, 'cabezal'))+rem;
|
|
||||||
|
|
||||||
.ui.menu {
|
|
||||||
border: none !important;
|
|
||||||
background: none !important;
|
|
||||||
//background-color: rgba(100, 100, 100, .3) !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
|
|
||||||
.dropdown .menu {
|
|
||||||
/*background: none !important;
|
|
||||||
border: none !important;
|
|
||||||
box-shadow: none !important;*/
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
font-size: 1rem;
|
|
||||||
.item {
|
|
||||||
padding: 1rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
color: inherit !important;
|
|
||||||
font-size: 2rem;
|
|
||||||
|
|
||||||
padding: rem(20) !important;
|
|
||||||
|
|
||||||
.shopping.cart div {
|
|
||||||
position: relative;
|
|
||||||
color: rgb(255, 255, 255);
|
|
||||||
display: inline-block;
|
|
||||||
top: -2.6rem;
|
|
||||||
left: 0.2rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Roboto, sans;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 50%;
|
|
||||||
max-width: rem(1030);
|
|
||||||
}
|
|
||||||
.frase1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
.frase2 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.column {
|
&>.column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
@ -212,7 +142,6 @@ body {
|
|||||||
width: rem(380);
|
width: rem(380);
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
margin-left: -3rem;
|
margin-left: -3rem;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -8,8 +8,8 @@ $full_width: 1080;
|
|||||||
|
|
||||||
$heights: (
|
$heights: (
|
||||||
"cabezal": (500/16),
|
"cabezal": (500/16),
|
||||||
"seccion1": 25,
|
"descripcion": 25,
|
||||||
"seccion2": 27.5,
|
"ventajas": 27.5,
|
||||||
"dimensiones": 27.5,
|
"dimensiones": 27.5,
|
||||||
"construido": 21.875,
|
"construido": 21.875,
|
||||||
"corporativos": (520/16),
|
"corporativos": (520/16),
|
||||||
@ -1,9 +1,16 @@
|
|||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@import 'reset';
|
@import 'reset';
|
||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: $font_family;
|
||||||
|
}
|
||||||
|
|
||||||
|
@import 'common';
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
@import 'phone';
|
@import 'phone';
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 800px) {
|
@media screen and (min-width: 800px) {
|
||||||
@import 'pc';
|
@import 'wide';
|
||||||
}
|
}
|
||||||
|
|||||||
13
assets/sass/phone/_descripcion.scss
Normal file
13
assets/sass/phone/_descripcion.scss
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
#descripcion {
|
||||||
|
.paragraph {
|
||||||
|
padding-top: rem(18);
|
||||||
|
line-height: rem(14);
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-bottom: rem(6);
|
||||||
|
font-size: font_size(18);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
padding-bottom: rem(5);
|
||||||
|
}
|
||||||
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
assets/sass/wide/_descripcion.scss
Normal file
23
assets/sass/wide/_descripcion.scss
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
#descripcion {
|
||||||
|
height: (map.get($heights, "descripcion"))+rem;
|
||||||
|
|
||||||
|
background-position: left rem(112);
|
||||||
|
background-size: 100% rem(128);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
26
assets/sass/wide/_header.scss
Normal file
26
assets/sass/wide/_header.scss
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
#header {
|
||||||
|
height: (map.get($heights, 'cabezal'))+rem;
|
||||||
|
|
||||||
|
background-size: 160%;
|
||||||
|
background-position: bottom rem(-40) center;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
#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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
16
gulpfile.js
16
gulpfile.js
@ -7,12 +7,14 @@ const sass = require('gulp-dart-sass')
|
|||||||
const babel = require('gulp-babel')
|
const babel = require('gulp-babel')
|
||||||
const uglify = require('gulp-uglify')
|
const uglify = require('gulp-uglify')
|
||||||
const htmlmin = require('gulp-htmlmin')
|
const htmlmin = require('gulp-htmlmin')
|
||||||
|
//const changed = require('gulp-changed')
|
||||||
|
//const image = require('gulp-image')
|
||||||
|
|
||||||
let source_dir = 'assets'
|
let source_dir = 'assets'
|
||||||
let output_dir = 'public/assets'
|
let output_dir = 'public/assets'
|
||||||
|
|
||||||
function js(done) {
|
function js(done) {
|
||||||
return src(path.join(source_dir, 'js', '*.js'))
|
return src(path.join(source_dir, 'js', '**', '*.js'))
|
||||||
.pipe(concat('main.js'))
|
.pipe(concat('main.js'))
|
||||||
.pipe(dest(path.join(output_dir, 'scripts')))
|
.pipe(dest(path.join(output_dir, 'scripts')))
|
||||||
.pipe(sourcemaps.init({loadMaps: true}))
|
.pipe(sourcemaps.init({loadMaps: true}))
|
||||||
@ -26,7 +28,7 @@ function js(done) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function css(done) {
|
function css(done) {
|
||||||
return src([path.join(source_dir, 'sass', '*.scss'), path.join(source_dir, 'sass', '*.sass')])
|
return src(path.join(source_dir, 'sass', 'main.scss'))
|
||||||
.pipe(sass())
|
.pipe(sass())
|
||||||
.pipe(rename('main.css'))
|
.pipe(rename('main.css'))
|
||||||
.pipe(dest(path.join(output_dir, 'styles')))
|
.pipe(dest(path.join(output_dir, 'styles')))
|
||||||
@ -38,12 +40,20 @@ function css(done) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function html(done) {
|
function html(done) {
|
||||||
return src(path.join(source_dir, '*.html'))
|
return src(path.join(source_dir, 'html', '**', '*.html'))
|
||||||
|
.pipe(concat('index.html'))
|
||||||
.pipe(htmlmin({collapseWhitespace: true}))
|
.pipe(htmlmin({collapseWhitespace: true}))
|
||||||
.pipe(rename('index.html'))
|
.pipe(rename('index.html'))
|
||||||
.pipe(dest(path.join(output_dir, '../')))
|
.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.watch = watch(source_dir, parallel(js, css, html))
|
||||||
|
|
||||||
exports.default = parallel(js, css, html)
|
exports.default = parallel(js, css, html)
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
@ -1,3 +1,42 @@
|
|||||||
|
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, 0, 255)'
|
||||||
|
},
|
||||||
|
petrol: {
|
||||||
|
name: 'petroleo',
|
||||||
|
rgb: 'rgb(0, 0, 150)'
|
||||||
|
},
|
||||||
|
cyan: {
|
||||||
|
name: 'celeste',
|
||||||
|
rgb: 'rgb(150, 150, 255)'
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
name: 'verde',
|
||||||
|
rgb: 'rgb(0, 255, 0)'
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
name: 'amarillo',
|
||||||
|
rgb: 'rgb(255, 255, 0)'
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
name: 'naranjo',
|
||||||
|
rgb: 'rgb(255, 130, 0)'
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
name: 'rojo',
|
||||||
|
rgb: 'rgb(255, 0, 0)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class Amount {
|
class Amount {
|
||||||
constructor(elem) {
|
constructor(elem) {
|
||||||
this.elem = elem
|
this.elem = elem
|
||||||
@ -113,6 +152,47 @@ class Colors {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let ventajas = {
|
||||||
|
elem: $('#ventajas'),
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let dimensiones = {
|
||||||
|
colors: available_colors,
|
||||||
|
picked: 'blue',
|
||||||
|
elem: $('#dimensiones'),
|
||||||
|
setup: function() {
|
||||||
|
this.elem.find('.colores .circle').each((i, el) => {
|
||||||
|
let color = $(el).attr('class').split(' ')[0]
|
||||||
|
if (color == 'petrol' || color == 'cyan') {
|
||||||
|
$(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')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let smtp = {
|
let smtp = {
|
||||||
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
||||||
From: 'contacto@3dstand.cl'
|
From: 'contacto@3dstand.cl'
|
||||||
@ -252,7 +332,7 @@ let testimonios = {
|
|||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
$('.menu.sticky').sticky()
|
$('#menu.sticky').sticky()
|
||||||
$('.column2 .sticky').sticky({
|
$('.column2 .sticky').sticky({
|
||||||
context: '#column'
|
context: '#column'
|
||||||
})
|
})
|
||||||
@ -260,6 +340,8 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
$('.shopping.cart').innerText = 0
|
$('.shopping.cart').innerText = 0
|
||||||
|
|
||||||
|
ventajas.setup()
|
||||||
|
dimensiones.setup()
|
||||||
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
||||||
let sticky_color = new Colors($('.sticky .colores'), true)
|
let sticky_color = new Colors($('.sticky .colores'), true)
|
||||||
sticky_form.setup()
|
sticky_form.setup()
|
||||||
|
|||||||
2
public/assets/scripts/main.min.js
vendored
2
public/assets/scripts/main.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -45,7 +45,182 @@ input {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: Roboto, sans;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
background-image: url("../images/banner.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
background-blend-mode: multiply;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#header .container #menu {
|
||||||
|
background: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
#header .container #menu .right.menu .item .shopping.cart .cantidad {
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
#header .container .segment {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
#header .container .segment #logo img {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#descripcion {
|
||||||
|
background-image: linear-gradient(#cccccc, #cccccc);
|
||||||
|
}
|
||||||
|
#descripcion .images {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ventajas {
|
||||||
|
position: relative;
|
||||||
|
background-image: url("../images/tripode.png");
|
||||||
|
}
|
||||||
|
#ventajas .diagonal {
|
||||||
|
position: absolute;
|
||||||
|
background-blend-mode: color;
|
||||||
|
}
|
||||||
|
#ventajas .gallery {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#ventajas .gallery .image {
|
||||||
|
max-height: inherit;
|
||||||
|
}
|
||||||
|
#ventajas .gallery .image img {
|
||||||
|
max-height: inherit;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
#ventajas .gallery .nav {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
#ventajas .gallery .nav.left {
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
#ventajas .gallery .nav.right {
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
#ventajas .gallery::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dimensiones {
|
||||||
|
position: relative;
|
||||||
|
background-image: url("../images/tripode.png");
|
||||||
|
}
|
||||||
|
#dimensiones .fondo-gris {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(204, 204, 204, 0.5);
|
||||||
|
}
|
||||||
|
#dimensiones .left.column > .grid > .column:first-child {
|
||||||
|
min-width: 33% !important;
|
||||||
|
}
|
||||||
|
#dimensiones .left.column > .grid > .column:last-child {
|
||||||
|
min-width: 67% !important;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
@media screen and (max-width: 800px) {
|
||||||
|
#header {
|
||||||
|
height: 25rem;
|
||||||
|
background-size: 160%;
|
||||||
|
background-position: bottom -0.9375rem center;
|
||||||
|
}
|
||||||
|
#header .container #menu {
|
||||||
|
font-size: 1.3333333333rem;
|
||||||
|
}
|
||||||
|
#header .container #menu .right.menu .item .shopping.cart .cantidad {
|
||||||
|
top: -1.875rem;
|
||||||
|
left: 0.15rem;
|
||||||
|
font-size: 0.6666666667rem;
|
||||||
|
}
|
||||||
|
#header .container .segment #logo img {
|
||||||
|
max-width: 56.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#descripcion {
|
||||||
|
padding-bottom: 0.46875rem;
|
||||||
|
}
|
||||||
|
#descripcion .paragraph {
|
||||||
|
padding-top: 1.6875rem;
|
||||||
|
line-height: 1.3125rem;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
#descripcion .paragraph .header {
|
||||||
|
margin-bottom: 0.5625rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ventajas .diagonal {
|
||||||
|
border-bottom: 100% solid rgba(204, 204, 204, 0.5);
|
||||||
|
border-right: 100% solid transparent;
|
||||||
|
}
|
||||||
|
#ventajas .gallery {
|
||||||
|
max-height: 25.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dimensiones .header {
|
||||||
|
font-size: 1.8333333333rem;
|
||||||
|
padding-top: 5.0625rem;
|
||||||
|
padding-bottom: 2.34375rem;
|
||||||
|
}
|
||||||
|
#dimensiones .colores {
|
||||||
|
vertical-align: center;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .text {
|
||||||
|
margin-right: 0.28125rem;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .white {
|
||||||
|
border: thin solid black;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .black {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .blue {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .green {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .yellow {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .orange {
|
||||||
|
background-color: #ff8200;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .red {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .circle {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.40625rem;
|
||||||
|
height: 1.40625rem;
|
||||||
|
border-radius: 8000px;
|
||||||
|
margin: auto 0.09375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .circle.selected {
|
||||||
|
width: 1.59375rem;
|
||||||
|
height: 1.59375rem;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left.column {
|
||||||
|
width: 75%;
|
||||||
|
padding-left: 0.46875rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
#backgrounds .cabezal {
|
#backgrounds .cabezal {
|
||||||
height: 25rem;
|
height: 25rem;
|
||||||
background-image: url("../images/banner.jpg");
|
background-image: url("../images/banner.jpg");
|
||||||
@ -56,23 +231,23 @@ input {
|
|||||||
background-blend-mode: multiply;
|
background-blend-mode: multiply;
|
||||||
}
|
}
|
||||||
#backgrounds .seccion1 {
|
#backgrounds .seccion1 {
|
||||||
height: 25rem;
|
height: rem;
|
||||||
background-image: linear-gradient(#cccccc, #cccccc);
|
background-image: linear-gradient(#cccccc, #cccccc);
|
||||||
background-position: left 10.5rem;
|
background-position: left 10.5rem;
|
||||||
background-size: 100% 12rem;
|
background-size: 100% 12rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
#backgrounds .seccion2 {
|
#backgrounds .seccion2 {
|
||||||
height: 27.5rem;
|
height: rem;
|
||||||
background-image: url("../images/fondo23.png");
|
background-image: url("../images/tripode.png");
|
||||||
}
|
}
|
||||||
#backgrounds .seccion2 .diagonal {
|
#backgrounds .seccion2 .diagonal {
|
||||||
border-bottom: 27.5rem solid rgba(204, 204, 204, 0.5);
|
border-bottom: rem solid rgba(204, 204, 204, 0.5);
|
||||||
border-right: 178.125rem solid transparent;
|
border-right: 178.125rem solid transparent;
|
||||||
}
|
}
|
||||||
#backgrounds .dimensiones {
|
#backgrounds .dimensiones {
|
||||||
height: 27.5rem;
|
height: 27.5rem;
|
||||||
background-image: url("../images/fondo23.png");
|
background-image: url("../images/tripode.png");
|
||||||
}
|
}
|
||||||
#backgrounds .dimensiones .fondo-gris {
|
#backgrounds .dimensiones .fondo-gris {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -81,11 +256,11 @@ input {
|
|||||||
}
|
}
|
||||||
#backgrounds .construido {
|
#backgrounds .construido {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
background-image: url("../images/fondo4.jpg");
|
background-image: url("../images/construido.jpg");
|
||||||
}
|
}
|
||||||
#backgrounds .corporativos {
|
#backgrounds .corporativos {
|
||||||
height: 32.5rem;
|
height: 32.5rem;
|
||||||
background-image: url("../images/fondo5.png");
|
background-image: url("../images/corporativo.png");
|
||||||
}
|
}
|
||||||
#backgrounds .testimonios {
|
#backgrounds .testimonios {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
@ -183,7 +358,7 @@ input {
|
|||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion1 {
|
#content > .column1 #seccion1 {
|
||||||
height: 25rem;
|
height: rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion1 .image-container {
|
#content > .column1 #seccion1 .image-container {
|
||||||
@ -205,7 +380,7 @@ input {
|
|||||||
font-size: 2.0625rem;
|
font-size: 2.0625rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 {
|
#content > .column1 #seccion2 {
|
||||||
height: 27.5rem;
|
height: rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 > .column {
|
#content > .column1 #seccion2 > .column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -349,15 +524,15 @@ input {
|
|||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .circle {
|
#content > .column2 .sticky .row:first-child .column1 .colores .circle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0.9375rem;
|
width: 1.40625rem;
|
||||||
height: 0.9375rem;
|
height: 1.40625rem;
|
||||||
border-radius: 8000px;
|
border-radius: 8000px;
|
||||||
margin: auto 0.09375rem;
|
margin: auto 0.09375rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
|
#content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
|
||||||
width: 1.125rem;
|
width: 1.59375rem;
|
||||||
height: 1.125rem;
|
height: 1.59375rem;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .input {
|
#content > .column2 .sticky .row:first-child .column1 .input {
|
||||||
@ -496,15 +671,15 @@ input {
|
|||||||
}
|
}
|
||||||
#content #corporativos .column2 form .colores .circle {
|
#content #corporativos .column2 form .colores .circle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0.9375rem;
|
width: 1.40625rem;
|
||||||
height: 0.9375rem;
|
height: 1.40625rem;
|
||||||
border-radius: 8000px;
|
border-radius: 8000px;
|
||||||
margin: auto 0.09375rem;
|
margin: auto 0.09375rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#content #corporativos .column2 form .colores .circle.selected {
|
#content #corporativos .column2 form .colores .circle.selected {
|
||||||
width: 1.125rem;
|
width: 1.59375rem;
|
||||||
height: 1.125rem;
|
height: 1.59375rem;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
#content #corporativos .column2 form .row {
|
#content #corporativos .column2 form .row {
|
||||||
@ -730,33 +905,115 @@ input {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 800px) {
|
@media screen and (min-width: 800px) {
|
||||||
#backgrounds .cabezal {
|
#header {
|
||||||
height: 31.25rem;
|
height: 31.25rem;
|
||||||
background-image: url("../images/banner.jpg");
|
background-size: 160%;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100rem;
|
|
||||||
background-position: bottom -2.5rem center;
|
background-position: bottom -2.5rem center;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
background-blend-mode: multiply;
|
|
||||||
}
|
}
|
||||||
#backgrounds .seccion1 {
|
#header .container #menu i {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
#header .container #menu .right.menu .item .shopping.cart .cantidad {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: Roboto, sans;
|
||||||
|
top: -1.75rem;
|
||||||
|
left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#descripcion {
|
||||||
height: 25rem;
|
height: 25rem;
|
||||||
background-image: linear-gradient(#cccccc, #cccccc);
|
|
||||||
background-position: left 7rem;
|
background-position: left 7rem;
|
||||||
background-size: 100% 8rem;
|
background-size: 100% 8rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
#descripcion .images .image {
|
||||||
|
max-width: 33%;
|
||||||
|
}
|
||||||
|
#descripcion .paragraph {
|
||||||
|
padding-top: 1.75rem;
|
||||||
|
line-height: 0.875rem;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
#descripcion .paragraph .header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ventajas .diagonal {
|
||||||
|
border-bottom: 27.5rem solid rgba(204, 204, 204, 0.5);
|
||||||
|
border-right: 118.75rem solid transparent;
|
||||||
|
}
|
||||||
|
#ventajas .gallery {
|
||||||
|
max-height: 25.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dimensiones {
|
||||||
|
margin-top: 0.9375rem;
|
||||||
|
}
|
||||||
|
#dimensiones .colores {
|
||||||
|
vertical-align: center;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .text {
|
||||||
|
margin-right: 0.1875rem;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .white {
|
||||||
|
border: thin solid black;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .black {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .blue {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .green {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .yellow {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .orange {
|
||||||
|
background-color: #ff8200;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .red {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .circle {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
border-radius: 8000px;
|
||||||
|
margin: auto 0.0625rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#dimensiones .colores .circle.selected {
|
||||||
|
width: 1.375rem;
|
||||||
|
height: 1.375rem;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left.column {
|
||||||
|
width: 67%;
|
||||||
|
padding-left: 0.3125rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .titulo {
|
||||||
|
font-size: 1.8333333333rem;
|
||||||
|
padding-top: 3.375rem;
|
||||||
|
padding-bottom: 1.5625rem;
|
||||||
|
}
|
||||||
|
|
||||||
#backgrounds .seccion2 {
|
#backgrounds .seccion2 {
|
||||||
height: 27.5rem;
|
height: rem;
|
||||||
background-image: url("../images/fondo23.png");
|
background-image: url("../images/tripode.png");
|
||||||
}
|
}
|
||||||
#backgrounds .seccion2 .diagonal {
|
#backgrounds .seccion2 .diagonal {
|
||||||
border-bottom: 27.5rem solid rgba(204, 204, 204, 0.5);
|
border-bottom: rem solid rgba(204, 204, 204, 0.5);
|
||||||
border-right: 118.75rem solid transparent;
|
border-right: 118.75rem solid transparent;
|
||||||
}
|
}
|
||||||
#backgrounds .dimensiones {
|
#backgrounds .dimensiones {
|
||||||
height: 27.5rem;
|
height: 27.5rem;
|
||||||
background-image: url("../images/fondo23.png");
|
background-image: url("../images/tripode.png");
|
||||||
}
|
}
|
||||||
#backgrounds .dimensiones .fondo-gris {
|
#backgrounds .dimensiones .fondo-gris {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -765,11 +1022,11 @@ input {
|
|||||||
}
|
}
|
||||||
#backgrounds .construido {
|
#backgrounds .construido {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
background-image: url("../images/fondo4.jpg");
|
background-image: url("../images/construido.jpg");
|
||||||
}
|
}
|
||||||
#backgrounds .corporativos {
|
#backgrounds .corporativos {
|
||||||
height: 32.5rem;
|
height: 32.5rem;
|
||||||
background-image: url("../images/fondo5.png");
|
background-image: url("../images/corporativo.png");
|
||||||
}
|
}
|
||||||
#backgrounds .testimonios {
|
#backgrounds .testimonios {
|
||||||
height: 21.875rem;
|
height: 21.875rem;
|
||||||
@ -784,14 +1041,7 @@ input {
|
|||||||
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
|
||||||
height: 217.5rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 217.5rem;
|
|
||||||
font-family: Roboto, sans;
|
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -801,56 +1051,6 @@ input {
|
|||||||
position: relative;
|
position: relative;
|
||||||
top: -217.5rem;
|
top: -217.5rem;
|
||||||
}
|
}
|
||||||
#content #header {
|
|
||||||
color: white;
|
|
||||||
width: 100%;
|
|
||||||
height: 31.25rem;
|
|
||||||
}
|
|
||||||
#content #header .ui.menu {
|
|
||||||
border: none !important;
|
|
||||||
background: none !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
#content #header .ui.menu .dropdown .menu {
|
|
||||||
/*background: none !important;
|
|
||||||
border: none !important;
|
|
||||||
box-shadow: none !important;*/
|
|
||||||
color: black;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
#content #header .ui.menu .dropdown .menu .item {
|
|
||||||
padding: 1rem !important;
|
|
||||||
}
|
|
||||||
#content #header .ui.menu .item {
|
|
||||||
color: inherit !important;
|
|
||||||
font-size: 2rem;
|
|
||||||
padding: 1.25rem !important;
|
|
||||||
}
|
|
||||||
#content #header .ui.menu .item .shopping.cart div {
|
|
||||||
position: relative;
|
|
||||||
color: white;
|
|
||||||
display: inline-block;
|
|
||||||
top: -2.6rem;
|
|
||||||
left: 0.2rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Roboto, sans;
|
|
||||||
}
|
|
||||||
#content #header .logo {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
#content #header .logo img {
|
|
||||||
width: 50%;
|
|
||||||
max-width: 64.375rem;
|
|
||||||
}
|
|
||||||
#content #header .logo .frase1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
#content #header .logo .frase2 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
#content > .column {
|
#content > .column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
@ -864,7 +1064,7 @@ input {
|
|||||||
width: 67%;
|
width: 67%;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion1 {
|
#content > .column1 #seccion1 {
|
||||||
height: 25rem;
|
height: rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion1 .image-container {
|
#content > .column1 #seccion1 .image-container {
|
||||||
@ -887,7 +1087,7 @@ input {
|
|||||||
font-size: 1.375rem;
|
font-size: 1.375rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 {
|
#content > .column1 #seccion2 {
|
||||||
height: 27.5rem;
|
height: rem;
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 > .column {
|
#content > .column1 #seccion2 > .column {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -914,7 +1114,6 @@ input {
|
|||||||
width: 23.75rem;
|
width: 23.75rem;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
margin-left: -3rem;
|
margin-left: -3rem;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
#content > .column1 #seccion2 .column2 .row:first-child .header {
|
#content > .column1 #seccion2 .column2 .row:first-child .header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -1031,15 +1230,15 @@ input {
|
|||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .circle {
|
#content > .column2 .sticky .row:first-child .column1 .colores .circle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0.75rem;
|
width: 1.25rem;
|
||||||
height: 0.75rem;
|
height: 1.25rem;
|
||||||
border-radius: 8000px;
|
border-radius: 8000px;
|
||||||
margin: auto 0.0625rem;
|
margin: auto 0.0625rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
|
#content > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
|
||||||
width: 0.875rem;
|
width: 1.375rem;
|
||||||
height: 0.875rem;
|
height: 1.375rem;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
#content > .column2 .sticky .row:first-child .column1 .input {
|
#content > .column2 .sticky .row:first-child .column1 .input {
|
||||||
@ -1178,15 +1377,15 @@ input {
|
|||||||
}
|
}
|
||||||
#content #corporativos .column2 form .colores .circle {
|
#content #corporativos .column2 form .colores .circle {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0.75rem;
|
width: 1.25rem;
|
||||||
height: 0.75rem;
|
height: 1.25rem;
|
||||||
border-radius: 8000px;
|
border-radius: 8000px;
|
||||||
margin: auto 0.0625rem;
|
margin: auto 0.0625rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#content #corporativos .column2 form .colores .circle.selected {
|
#content #corporativos .column2 form .colores .circle.selected {
|
||||||
width: 0.875rem;
|
width: 1.375rem;
|
||||||
height: 0.875rem;
|
height: 1.375rem;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
#content #corporativos .column2 form .row {
|
#content #corporativos .column2 form .row {
|
||||||
|
|||||||
2
public/assets/styles/main.min.css
vendored
2
public/assets/styles/main.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user