Primeros cambios por cliente y pasando a responsive
This commit is contained in:
@ -4,6 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Stand</title>
|
<title>Stand</title>
|
||||||
<meta name="keywords" content="stand, chile, celular, smartphone, telefono" />
|
<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="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 rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||||
@ -66,9 +67,13 @@
|
|||||||
<div class="column1 column" id="column">
|
<div class="column1 column" id="column">
|
||||||
<section id="seccion1" class="ui simple segment">
|
<section id="seccion1" class="ui simple segment">
|
||||||
<div class="image-container">
|
<div class="image-container">
|
||||||
<img src="./assets/images/seccion11.png" />
|
<div class="corte1">
|
||||||
<img src="./assets/images/seccion12.png" />
|
<img src="./assets/images/seccion11.png" />
|
||||||
<img src="./assets/images/seccion13.png" />
|
<img src="./assets/images/seccion12.png" />
|
||||||
|
</div>
|
||||||
|
<div class="corte2">
|
||||||
|
<img src="./assets/images/seccion13.png" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="paragraph">
|
<div class="paragraph">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@ -165,7 +170,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="ui grey button" type="submit">COMPRAR</button>
|
<button class="ui grey button" type="submit">AGREGAR AL CARRO</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@ -224,6 +229,13 @@
|
|||||||
COTIZA CON NOSOTROS
|
COTIZA CON NOSOTROS
|
||||||
</div>
|
</div>
|
||||||
<form class="ui form">
|
<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="row">
|
||||||
<div class="colores linea">
|
<div class="colores linea">
|
||||||
<input type="hidden" name="color" value="azul" />
|
<input type="hidden" name="color" value="azul" />
|
||||||
@ -236,6 +248,8 @@
|
|||||||
<div class="orange circle"></div>
|
<div class="orange circle"></div>
|
||||||
<div class="red circle"></div>
|
<div class="red circle"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
<div class="input cantidad">
|
<div class="input cantidad">
|
||||||
<button class="minus" type="button">
|
<button class="minus" type="button">
|
||||||
<i class="minus icon"></i>
|
<i class="minus icon"></i>
|
||||||
@ -244,13 +258,6 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="input">
|
|
||||||
LOGO
|
|
||||||
<input type="file" name="archivo" placeholder="Cargar archivo" />
|
|
||||||
<div class="file">Cargar archivo</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<input type="text" name="nombre" placeholder="NOMBRE" />
|
<input type="text" name="nombre" placeholder="NOMBRE" />
|
||||||
@ -315,6 +322,7 @@
|
|||||||
<i class="grey facebook f icon"></i>
|
<i class="grey facebook f icon"></i>
|
||||||
</i>
|
</i>
|
||||||
</a>
|
</a>
|
||||||
|
<!--
|
||||||
<a href="http://www.youtube.com/stand">
|
<a href="http://www.youtube.com/stand">
|
||||||
<i class="icons">
|
<i class="icons">
|
||||||
<i class="inverted grey large circle icon"></i>
|
<i class="inverted grey large circle icon"></i>
|
||||||
@ -326,7 +334,7 @@
|
|||||||
<i class="inverted grey large circle icon"></i>
|
<i class="inverted grey large circle icon"></i>
|
||||||
<i class="grey linkedin in icon"></i>
|
<i class="grey linkedin in icon"></i>
|
||||||
</i>
|
</i>
|
||||||
</a>
|
</a>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,41 +1,3 @@
|
|||||||
var proportionals = []
|
|
||||||
var widths = []
|
|
||||||
var heights = []
|
|
||||||
var changeables = []
|
|
||||||
function register_resizeables() {
|
|
||||||
proportionals.push($('img'))
|
|
||||||
//widths.push()
|
|
||||||
heights.push($('#backgrounds div'))
|
|
||||||
changeables.push($('.sticky'))
|
|
||||||
}
|
|
||||||
|
|
||||||
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
|
|
||||||
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
|
|
||||||
|
|
||||||
function mod_height(elem, p) {
|
|
||||||
elem.height = (elem.height * p)
|
|
||||||
}
|
|
||||||
function mod_width(elem, p) {
|
|
||||||
elem.width = (elem.width * p)
|
|
||||||
}
|
|
||||||
function mod_dim(elem, p) {
|
|
||||||
mod_width(elem, p)
|
|
||||||
mod_height(elem, p)
|
|
||||||
}
|
|
||||||
function resize() {
|
|
||||||
let p = 400 / 1080
|
|
||||||
|
|
||||||
$.each(proportionals, (i, el) => {
|
|
||||||
mod_dim(el, p)
|
|
||||||
})
|
|
||||||
$.each(widths, (i, el) => {
|
|
||||||
mod_width(el, p)
|
|
||||||
})
|
|
||||||
$.each(heights, (i, el) => {
|
|
||||||
mod_height(el, p)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
class Amount {
|
class Amount {
|
||||||
constructor(elem) {
|
constructor(elem) {
|
||||||
this.elem = elem
|
this.elem = elem
|
||||||
@ -152,10 +114,8 @@ class Colors {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let smtp = {
|
let smtp = {
|
||||||
Host: 'smtp.google.com',
|
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
||||||
Username: 'rsalinas85@gmail.com',
|
From: 'contacto@3dstand.cl'
|
||||||
Password: 'salinas1234',
|
|
||||||
From: 'ventas@3dstand.cl'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let sticky_form = {
|
let sticky_form = {
|
||||||
@ -197,9 +157,7 @@ let cotiza_form = {
|
|||||||
this.elem.find('[name="mensaje"]').val()
|
this.elem.find('[name="mensaje"]').val()
|
||||||
]
|
]
|
||||||
let content = {
|
let content = {
|
||||||
Host: smtp.Host,
|
SecureToken: smtp.SecureToken,
|
||||||
Username: smtp.Username,
|
|
||||||
Password: smtp.Password,
|
|
||||||
To: email,
|
To: email,
|
||||||
From: smtp.From,
|
From: smtp.From,
|
||||||
Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
@ -211,8 +169,7 @@ let cotiza_form = {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
console.debug(email)
|
Email.send(content)
|
||||||
//Email.send()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let conversemos_form = {
|
let conversemos_form = {
|
||||||
@ -233,14 +190,13 @@ let conversemos_form = {
|
|||||||
this.elem.find('[name="mensaje"]').val()
|
this.elem.find('[name="mensaje"]').val()
|
||||||
]
|
]
|
||||||
let content = {
|
let content = {
|
||||||
Host: smtp.Host,
|
SecureToken: smtp.SecureToken,
|
||||||
Username: smtp.Username,
|
|
||||||
Password: smtp.Password,
|
|
||||||
From: smtp.From,
|
From: smtp.From,
|
||||||
To: email,
|
To: email,
|
||||||
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
Body: body.join('<br />')
|
Body: body.join('<br />')
|
||||||
}
|
}
|
||||||
|
Email.send(content)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -295,11 +251,6 @@ let testimonios = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
register_resizeables()
|
|
||||||
|
|
||||||
if (vw < 1080) {
|
|
||||||
resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.menu.sticky').sticky()
|
$('.menu.sticky').sticky()
|
||||||
$('.column2 .sticky').sticky({
|
$('.column2 .sticky').sticky({
|
||||||
@ -309,8 +260,6 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
$('.shopping.cart').innerText = 0
|
$('.shopping.cart').innerText = 0
|
||||||
|
|
||||||
window.onresize = resize;
|
|
||||||
|
|
||||||
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()
|
||||||
|
|||||||
57
assets/sass/_functions.scss
Normal file
57
assets/sass/_functions.scss
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
@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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.white {
|
||||||
|
border: thin solid rgb(0, 0, 0);
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
.black {
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: rgb(0, 0, 255);
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
background-color: rgb(0, 255, 0);
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
background-color: rgb(255, 255, 0);
|
||||||
|
}
|
||||||
|
.orange {
|
||||||
|
background-color: rgb(255, 130, 0);
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
background-color: rgb(255, 0, 0);
|
||||||
|
}
|
||||||
|
.circle {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
702
assets/sass/_pc.scss
Normal file
702
assets/sass/_pc.scss
Normal file
@ -0,0 +1,702 @@
|
|||||||
|
@import 'pc_vars';
|
||||||
|
|
||||||
|
#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 {
|
||||||
|
height: (map.get($heights, "seccion2"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_seccion23;
|
||||||
|
|
||||||
|
.diagonal {
|
||||||
|
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
||||||
|
border-right: rem(1900) solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dimensiones {
|
||||||
|
height: (map.get($heights, "dimensiones"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_seccion23;
|
||||||
|
.fondo-gris {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba($gris, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.construido {
|
||||||
|
height: (map.get($heights, "construido"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_construido;
|
||||||
|
}
|
||||||
|
.corporativos {
|
||||||
|
height: (map.get($heights, "corporativos"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_corporativo;
|
||||||
|
}
|
||||||
|
.testimonios {
|
||||||
|
height: (map.get($heights, "felices"))+rem;
|
||||||
|
|
||||||
|
background-image: linear-gradient($gris, $gris);
|
||||||
|
background-position: left rem(115);
|
||||||
|
background-size: 100% rem(118);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.formulario {
|
||||||
|
height: (map.get($heights, "formulario"))+rem;
|
||||||
|
background-color: $gris;
|
||||||
|
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: ($content_height)+rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: ($content_height)+rem;
|
||||||
|
font-family: $font_family;
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
max-width: rem($full_width) !important;
|
||||||
|
height: ($content_height)+rem;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: (-$content_height)+rem;
|
||||||
|
|
||||||
|
#header {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: (map.get($heights, 'cabezal'))+rem;
|
||||||
|
|
||||||
|
.ui.menu {
|
||||||
|
border: none !important;
|
||||||
|
background: none !important;
|
||||||
|
//background-color: rgba(100, 100, 100, .3) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
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 {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column1 {
|
||||||
|
width: percentage($column1/100);
|
||||||
|
|
||||||
|
|
||||||
|
#seccion1 {
|
||||||
|
height: (map.get($heights, "seccion1"))+rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: rem(112+128);
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: rem(155);
|
||||||
|
width: rem(188);
|
||||||
|
margin-top: rem(85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.paragraph {
|
||||||
|
padding-top: rem(28);
|
||||||
|
line-height: rem(14);
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: rem(22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#seccion2 {
|
||||||
|
height: (map.get($heights, "seccion2"))+rem;
|
||||||
|
|
||||||
|
&>.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column1 {
|
||||||
|
margin-top: rem(80);
|
||||||
|
img {
|
||||||
|
width: rem(317);
|
||||||
|
height: rem(317);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column2 {
|
||||||
|
margin-top: rem(114);
|
||||||
|
.row:first-child {
|
||||||
|
background-color: #00427b;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
height: rem(180);
|
||||||
|
width: rem(380);
|
||||||
|
padding: 2rem;
|
||||||
|
margin-left: -3rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: rem(16);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: disc inside;
|
||||||
|
font-size: font-size(10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row:last-child {
|
||||||
|
margin-top: rem(18);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: rem(70);
|
||||||
|
height: rem(85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#dimensiones {
|
||||||
|
height: (map.get($heights, "dimensiones"))+rem;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: rem(37) 0 !important;
|
||||||
|
.bigger {
|
||||||
|
font-size: rem(16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.column {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
&>img {
|
||||||
|
width: rem(313);
|
||||||
|
height: rem(235);
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: rem(313);
|
||||||
|
margin-top: rem(25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#construido {
|
||||||
|
height: (map.get($heights, "construido"))+rem;
|
||||||
|
padding-top: rem(23) !important;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: font_size(22);
|
||||||
|
padding: rem(10) rem(43);
|
||||||
|
background-color: rgba(255, 255, 255, .6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column2 {
|
||||||
|
width: percentage($column2/100);
|
||||||
|
height: ($column_height1)+rem;
|
||||||
|
|
||||||
|
.sticky {
|
||||||
|
height: rem(265);
|
||||||
|
width: rem(310);
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
.row:first-child {
|
||||||
|
height: rem(170);
|
||||||
|
margin-top: rem(80);
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column1 {
|
||||||
|
vertical-align: bottom;
|
||||||
|
padding-top: rem(20);
|
||||||
|
width: rem(310*2/3);
|
||||||
|
|
||||||
|
.linea {
|
||||||
|
margin-bottom: rem(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.titulo {
|
||||||
|
font-size: font_size(25);
|
||||||
|
}
|
||||||
|
.precio {
|
||||||
|
font-size: font_size(16);
|
||||||
|
}
|
||||||
|
font-size: font_size(14);
|
||||||
|
|
||||||
|
@include colors;
|
||||||
|
.input {
|
||||||
|
width: 4.5rem;
|
||||||
|
border: thin solid rgb(0, 0, 0);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column2 {
|
||||||
|
width: rem(310/3);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: rem(110);
|
||||||
|
height: rem(160);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row:last-child {
|
||||||
|
.button {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#corporativos {
|
||||||
|
width: 100%;
|
||||||
|
height: (map.get($heights, "corporativos"))+rem;
|
||||||
|
|
||||||
|
margin-top: ($column_height1)+rem !important;
|
||||||
|
|
||||||
|
&>.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column1 {
|
||||||
|
width: percentage(67/100);
|
||||||
|
|
||||||
|
&>.header {
|
||||||
|
margin-top: rem(67);
|
||||||
|
margin-bottom: rem(37);
|
||||||
|
.bigger {
|
||||||
|
font-size: rem(26);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.opciones {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.opcion {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.img-grande {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: rem(12);
|
||||||
|
img {
|
||||||
|
width: rem(135);
|
||||||
|
height: rem(200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.descripcion {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
height: rem(200);
|
||||||
|
padding-top: rem(20);
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: block;
|
||||||
|
.header {
|
||||||
|
font-size: font_size(14);
|
||||||
|
margin-bottom: rem(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: disc inside;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.images {
|
||||||
|
margin-top: rem(34);
|
||||||
|
img {
|
||||||
|
width: rem(70);
|
||||||
|
height: rem(85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column2 {
|
||||||
|
width: percentage(33/100);
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: rem(46);
|
||||||
|
margin-bottom: rem(24);
|
||||||
|
font-size: rem(26);
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
@include colors;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin-bottom: rem(9);
|
||||||
|
}
|
||||||
|
.colores.linea {
|
||||||
|
//margin-bottom: rem(25-9);
|
||||||
|
}
|
||||||
|
.input.cantidad {
|
||||||
|
width: 4.5rem;
|
||||||
|
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);
|
||||||
|
//width: rem(150);
|
||||||
|
padding-top: rem(3);
|
||||||
|
margin-left: rem(5);
|
||||||
|
//background-color: #cccccb;
|
||||||
|
//border: thin solid #333;
|
||||||
|
font-size: font_size(16);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.input [type="text"] {
|
||||||
|
height: rem(18);
|
||||||
|
background-color: rgba(255, 255, 255);
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
height: rem(72);
|
||||||
|
background-color: rgba(255, 255, 255);
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin-bottom: rem(25-9);
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #666667;
|
||||||
|
color: white;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#felices {
|
||||||
|
height: (map.get($heights, "felices"))+rem;
|
||||||
|
|
||||||
|
padding: 0 1rem !important;
|
||||||
|
padding-top: rem(60) !important;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
//margin-top: rem(60);
|
||||||
|
font-size: font_size(22);
|
||||||
|
}
|
||||||
|
.testimonios {
|
||||||
|
margin-top: rem(25);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.testimonio {
|
||||||
|
height: rem(80);
|
||||||
|
color: #666667;
|
||||||
|
margin-top: rem(20);
|
||||||
|
width: percentage(30/100);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #666667;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#formulario {
|
||||||
|
height: (map.get($heights, "formulario"))+rem;
|
||||||
|
|
||||||
|
padding: 0 1rem !important;
|
||||||
|
|
||||||
|
.whatsapp-link {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
&>.column {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.flotante {
|
||||||
|
position: absolute;
|
||||||
|
top: rem(183);
|
||||||
|
margin: auto;
|
||||||
|
left: 40%;
|
||||||
|
width: rem($full_width/5);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&>.content {
|
||||||
|
width: rem(130);
|
||||||
|
margin: auto;
|
||||||
|
left: -50%;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
padding: rem(5) 0;
|
||||||
|
}
|
||||||
|
div.whatsapp {
|
||||||
|
height: rem(30);
|
||||||
|
background-color: #1a9947;
|
||||||
|
color: #fff;
|
||||||
|
font-size: rem(10);
|
||||||
|
|
||||||
|
&>i {
|
||||||
|
position: relative;
|
||||||
|
font-size: font_size(16);
|
||||||
|
top: rem(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rrss {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
font-size: rem(20);
|
||||||
|
|
||||||
|
i.inverted.grey {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column1 {
|
||||||
|
width: percentage($column1/100);
|
||||||
|
margin-top: rem(27);
|
||||||
|
|
||||||
|
&>img {
|
||||||
|
width: rem(540);
|
||||||
|
height: rem(350);
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column2 {
|
||||||
|
width: percentage($column2/100);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: rem(20);
|
||||||
|
text-align: center;
|
||||||
|
font-size: font_size(22);
|
||||||
|
|
||||||
|
.whatsapp-link {
|
||||||
|
display: inline-block;
|
||||||
|
width: rem(25);
|
||||||
|
height: rem(25);
|
||||||
|
font-size: font_size(25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: rem(25);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
input {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
height: rem(18);
|
||||||
|
margin-bottom: rem(9);
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
font-size: font_size(10);
|
||||||
|
&::placeholder {
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
height: rem(72);
|
||||||
|
margin-bottom: rem(25);
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
font-size: font_size(10);
|
||||||
|
&::placeholder {
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background-color: white;
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
&.segment>.container {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&>.column1 {
|
||||||
|
display: inline-block;
|
||||||
|
width: ($column1)+rem;
|
||||||
|
}
|
||||||
|
&>.column2 {
|
||||||
|
display: inline-block;
|
||||||
|
width: ($column2)+rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.simple.segment {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
|
||||||
|
&>.ui.grid {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fondo-blanco {
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
assets/sass/_pc_vars.scss
Normal file
32
assets/sass/_pc_vars.scss
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
$html-font-size: 16px;
|
||||||
|
|
||||||
|
$circle_radius: 12;
|
||||||
|
|
||||||
|
$full_width: 1080;
|
||||||
|
|
||||||
|
$heights: (
|
||||||
|
"cabezal": (500/16),
|
||||||
|
"seccion1": 25,
|
||||||
|
"seccion2": 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';
|
||||||
698
assets/sass/_phone.scss
Normal file
698
assets/sass/_phone.scss
Normal file
@ -0,0 +1,698 @@
|
|||||||
|
@import 'phone_vars';
|
||||||
|
|
||||||
|
#backgrounds {
|
||||||
|
.cabezal {
|
||||||
|
height: (map.get($heights, 'cabezal'))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_cabezal;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 160%;
|
||||||
|
background-position: bottom rem(-10) 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 {
|
||||||
|
height: (map.get($heights, "seccion2"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_seccion23;
|
||||||
|
|
||||||
|
.diagonal {
|
||||||
|
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
||||||
|
border-right: rem(1900) solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dimensiones {
|
||||||
|
height: (map.get($heights, "dimensiones"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_seccion23;
|
||||||
|
.fondo-gris {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba($gris, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.construido {
|
||||||
|
height: (map.get($heights, "construido"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_construido;
|
||||||
|
}
|
||||||
|
.corporativos {
|
||||||
|
height: (map.get($heights, "corporativos"))+rem;
|
||||||
|
|
||||||
|
background-image: $fondo_corporativo;
|
||||||
|
}
|
||||||
|
.testimonios {
|
||||||
|
height: (map.get($heights, "felices"))+rem;
|
||||||
|
|
||||||
|
background-image: linear-gradient($gris, $gris);
|
||||||
|
background-position: left rem(115);
|
||||||
|
background-size: 100% rem(118);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.formulario {
|
||||||
|
height: (map.get($heights, "formulario"))+rem;
|
||||||
|
background-color: $gris;
|
||||||
|
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: $html-font-size+px;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: ($content_height)+rem;
|
||||||
|
font-family: Roboto, sans;
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
width: 100% !important;
|
||||||
|
height: ($content_height)+rem;
|
||||||
|
margin: 0 !important;
|
||||||
|
position: relative;
|
||||||
|
top: (-$content_height)+rem;
|
||||||
|
|
||||||
|
#header {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: (map.get($heights, 'cabezal'))+rem;
|
||||||
|
|
||||||
|
.ui.menu {
|
||||||
|
border: none !important;
|
||||||
|
background: none !important;
|
||||||
|
//background-color: rgba(100, 100, 100, .3) !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
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: 1rem;
|
||||||
|
|
||||||
|
.shopping.cart div {
|
||||||
|
position: relative;
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
display: inline-block;
|
||||||
|
top: -1.3rem;
|
||||||
|
left: 0.1rem;
|
||||||
|
font-size: .5rem;
|
||||||
|
font-family: Roboto, sans;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 50%;
|
||||||
|
max-width: rem($full_width);
|
||||||
|
}
|
||||||
|
.frase1 {
|
||||||
|
width: 75%;
|
||||||
|
margin: auto;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.frase2 {
|
||||||
|
font-size: .7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&>.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column1 {
|
||||||
|
width: percentage($column1/100);
|
||||||
|
|
||||||
|
|
||||||
|
#seccion1 {
|
||||||
|
height: (map.get($heights, "seccion1"))+rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: rem(112+128);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: percentage(50/100);
|
||||||
|
margin-top: rem(85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.paragraph {
|
||||||
|
padding-top: rem(28);
|
||||||
|
line-height: rem(14);
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: rem(22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#seccion2 {
|
||||||
|
height: (map.get($heights, "seccion2"))+rem;
|
||||||
|
|
||||||
|
&>.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column1 {
|
||||||
|
margin-top: rem(80);
|
||||||
|
img {
|
||||||
|
width: rem(317);
|
||||||
|
height: rem(317);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column2 {
|
||||||
|
margin-top: rem(114);
|
||||||
|
.row:first-child {
|
||||||
|
background-color: #00427b;
|
||||||
|
color: rgb(256, 256, 256);
|
||||||
|
height: rem(180);
|
||||||
|
width: rem(380);
|
||||||
|
padding: 2rem;
|
||||||
|
margin-left: -3rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: rem(16);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: disc inside;
|
||||||
|
font-size: font-size(10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row:last-child {
|
||||||
|
margin-top: rem(18);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: rem(70);
|
||||||
|
height: rem(85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#dimensiones {
|
||||||
|
height: (map.get($heights, "dimensiones"))+rem;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: rem(37) 0 !important;
|
||||||
|
.bigger {
|
||||||
|
font-size: rem(16);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.images {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.column {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
&>img {
|
||||||
|
width: rem(313);
|
||||||
|
height: rem(235);
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: rem(313);
|
||||||
|
margin-top: rem(25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#construido {
|
||||||
|
height: (map.get($heights, "construido"))+rem;
|
||||||
|
padding-top: rem(23) !important;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: font_size(22);
|
||||||
|
padding: rem(10) rem(43);
|
||||||
|
background-color: rgba(255, 255, 255, .6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column2 {
|
||||||
|
width: percentage($column2/100);
|
||||||
|
height: ($column_height1)+rem;
|
||||||
|
|
||||||
|
.sticky {
|
||||||
|
height: rem(265);
|
||||||
|
width: rem(310);
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
.row:first-child {
|
||||||
|
height: rem(170);
|
||||||
|
margin-top: rem(80);
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column1 {
|
||||||
|
vertical-align: bottom;
|
||||||
|
padding-top: rem(20);
|
||||||
|
width: rem(310*2/3);
|
||||||
|
|
||||||
|
.linea {
|
||||||
|
margin-bottom: rem(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.titulo {
|
||||||
|
font-size: font_size(25);
|
||||||
|
}
|
||||||
|
.precio {
|
||||||
|
font-size: font_size(16);
|
||||||
|
}
|
||||||
|
font-size: font_size(14);
|
||||||
|
|
||||||
|
@include colors;
|
||||||
|
.input {
|
||||||
|
width: 4.5rem;
|
||||||
|
border: thin solid rgb(0, 0, 0);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column2 {
|
||||||
|
width: rem(310/3);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: rem(110);
|
||||||
|
height: rem(160);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row:last-child {
|
||||||
|
.button {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#corporativos {
|
||||||
|
width: 100%;
|
||||||
|
height: (map.get($heights, "corporativos"))+rem;
|
||||||
|
|
||||||
|
margin-top: ($column_height1)+rem !important;
|
||||||
|
|
||||||
|
&>.column {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column1 {
|
||||||
|
width: percentage(67/100);
|
||||||
|
|
||||||
|
&>.header {
|
||||||
|
margin-top: rem(67);
|
||||||
|
margin-bottom: rem(37);
|
||||||
|
.bigger {
|
||||||
|
font-size: rem(26);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.opciones {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
.opcion {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.img-grande {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: rem(12);
|
||||||
|
img {
|
||||||
|
width: rem(135);
|
||||||
|
height: rem(200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.descripcion {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
height: rem(200);
|
||||||
|
padding-top: rem(20);
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: block;
|
||||||
|
.header {
|
||||||
|
font-size: font_size(14);
|
||||||
|
margin-bottom: rem(10);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: disc inside;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.images {
|
||||||
|
margin-top: rem(34);
|
||||||
|
img {
|
||||||
|
width: rem(70);
|
||||||
|
height: rem(85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column2 {
|
||||||
|
width: percentage(33/100);
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: rem(46);
|
||||||
|
margin-bottom: rem(24);
|
||||||
|
font-size: rem(26);
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
@include colors;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin-bottom: rem(9);
|
||||||
|
}
|
||||||
|
.colores.linea {
|
||||||
|
margin-bottom: rem(25-9);
|
||||||
|
}
|
||||||
|
.input.cantidad {
|
||||||
|
width: 4.5rem;
|
||||||
|
border: thin solid rgb(0, 0, 0);
|
||||||
|
text-align: center;
|
||||||
|
padding: .5rem 0.05rem;
|
||||||
|
font-size: font_size(10);
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
width: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 2rem;
|
||||||
|
background: none;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input [type="file"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.input .file {
|
||||||
|
display: inline-block;
|
||||||
|
height: rem(20*12/10);
|
||||||
|
width: rem(150);
|
||||||
|
padding-top: rem(3);
|
||||||
|
background-color: #cccccb;
|
||||||
|
border: thin solid #333;
|
||||||
|
font-size: font_size(10);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.input [type="text"] {
|
||||||
|
height: rem(18);
|
||||||
|
background-color: rgba(255, 255, 255);
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
height: rem(72);
|
||||||
|
background-color: rgba(255, 255, 255);
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin-bottom: rem(25-9);
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #666667;
|
||||||
|
color: white;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#felices {
|
||||||
|
height: (map.get($heights, "felices"))+rem;
|
||||||
|
|
||||||
|
padding: 0 1rem !important;
|
||||||
|
padding-top: rem(60) !important;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
//margin-top: rem(60);
|
||||||
|
font-size: font_size(22);
|
||||||
|
}
|
||||||
|
.testimonios {
|
||||||
|
margin-top: rem(25);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.testimonio {
|
||||||
|
height: rem(80);
|
||||||
|
color: #666667;
|
||||||
|
margin-top: rem(20);
|
||||||
|
width: percentage(30/100);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #666667;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#formulario {
|
||||||
|
height: (map.get($heights, "formulario"))+rem;
|
||||||
|
|
||||||
|
padding: 0 1rem !important;
|
||||||
|
|
||||||
|
.whatsapp-link {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
&>.column {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
padding-left: 1rem !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.flotante {
|
||||||
|
position: absolute;
|
||||||
|
top: rem(183);
|
||||||
|
margin: auto;
|
||||||
|
left: 40%;
|
||||||
|
width: rem($full_width/5);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&>.content {
|
||||||
|
width: rem(130);
|
||||||
|
margin: auto;
|
||||||
|
left: -50%;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
padding: rem(5) 0;
|
||||||
|
}
|
||||||
|
div.whatsapp {
|
||||||
|
height: rem(30);
|
||||||
|
background-color: #1a9947;
|
||||||
|
color: #fff;
|
||||||
|
font-size: rem(10);
|
||||||
|
|
||||||
|
&>i {
|
||||||
|
position: relative;
|
||||||
|
font-size: font_size(16);
|
||||||
|
top: rem(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rrss {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
font-size: rem(20);
|
||||||
|
|
||||||
|
i.inverted.grey {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column1 {
|
||||||
|
width: percentage($column1/100);
|
||||||
|
margin-top: rem(27);
|
||||||
|
|
||||||
|
&>img {
|
||||||
|
width: rem(540);
|
||||||
|
height: rem(350);
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.column2 {
|
||||||
|
width: percentage($column2/100);
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: rem(20);
|
||||||
|
text-align: center;
|
||||||
|
font-size: font_size(22);
|
||||||
|
|
||||||
|
.whatsapp-link {
|
||||||
|
display: inline-block;
|
||||||
|
width: rem(25);
|
||||||
|
height: rem(25);
|
||||||
|
font-size: font_size(25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.paragraph {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: rem(25);
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
input {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
height: rem(18);
|
||||||
|
margin-bottom: rem(9);
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
font-size: font_size(10);
|
||||||
|
&::placeholder {
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
height: rem(72);
|
||||||
|
margin-bottom: rem(25);
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
font-size: font_size(10);
|
||||||
|
&::placeholder {
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background-color: white;
|
||||||
|
color: $gris_standard;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
&.segment>.container {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&>.column1 {
|
||||||
|
display: inline-block;
|
||||||
|
width: ($column1)+rem;
|
||||||
|
}
|
||||||
|
&>.column2 {
|
||||||
|
display: inline-block;
|
||||||
|
width: ($column2)+rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.simple.segment {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
|
||||||
|
&>.ui.grid {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fondo-blanco {
|
||||||
|
background-color: rgba(255, 255, 255, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
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),
|
||||||
|
"seccion1": 25,
|
||||||
|
"seccion2": 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';
|
||||||
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_seccion23: url('../images/fondo23.png');
|
||||||
|
$fondo_construido: url('../images/fondo4.jpg');
|
||||||
|
$fondo_corporativo: url('../images/fondo5.png');
|
||||||
@ -1,795 +1,9 @@
|
|||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@import 'reset';
|
@import 'reset';
|
||||||
|
|
||||||
$html-font-size: 16px;
|
@media screen and (max-width: 800px) {
|
||||||
@function strip_unit($value) {
|
@import 'phone';
|
||||||
@return $value / ($value * 0 + 1);
|
|
||||||
}
|
}
|
||||||
@function rem($px_value) {
|
@media screen and (min-width: 800px) {
|
||||||
@return #{strip_unit($px_value) / strip_unit($html-font-size)}rem;
|
@import 'pc';
|
||||||
}
|
|
||||||
@function font_size($font) {
|
|
||||||
@return #{strip_unit($font) / 12}rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
$gris: rgb(204, 204, 204);
|
|
||||||
$gris-texto: rgb(51, 51, 51);
|
|
||||||
|
|
||||||
@mixin colors {
|
|
||||||
.colores {
|
|
||||||
vertical-align: center;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
margin-right: rem(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.white {
|
|
||||||
border: thin solid rgb(0, 0, 0);
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
.black {
|
|
||||||
background-color: rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
background-color: rgb(0, 0, 255);
|
|
||||||
}
|
|
||||||
.green {
|
|
||||||
background-color: rgb(0, 255, 0);
|
|
||||||
}
|
|
||||||
.yellow {
|
|
||||||
background-color: rgb(255, 255, 0);
|
|
||||||
}
|
|
||||||
.orange {
|
|
||||||
background-color: rgb(255, 130, 0);
|
|
||||||
}
|
|
||||||
.red {
|
|
||||||
background-color: rgb(255, 0, 0);
|
|
||||||
}
|
|
||||||
.circle {
|
|
||||||
display: inline-block;
|
|
||||||
$a: 12;
|
|
||||||
width: rem($a);
|
|
||||||
height: rem($a);
|
|
||||||
border-radius: 8000px;
|
|
||||||
margin: auto rem(1);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
width: rem($a + 2);
|
|
||||||
height: rem($a + 2);
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$full_width: 1080;
|
|
||||||
|
|
||||||
$heights: (
|
|
||||||
"cabezal": (400/16),
|
|
||||||
"seccion1": 25,
|
|
||||||
"seccion2": 27.5,
|
|
||||||
"dimensiones": 27.5,
|
|
||||||
"construido": 21.875,
|
|
||||||
"corporativos": (520/16),
|
|
||||||
"felices": 21.875,
|
|
||||||
"formulario": 30
|
|
||||||
);
|
|
||||||
|
|
||||||
#backgrounds {
|
|
||||||
.cabezal {
|
|
||||||
height: (map.get($heights, 'cabezal'))+rem;
|
|
||||||
|
|
||||||
background-image: url('../images/banner.jpg');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: rem(1600);
|
|
||||||
background-position: top center;
|
|
||||||
background-color: rgba(0, 0, 0, .4);
|
|
||||||
background-blend-mode: multiply;
|
|
||||||
}
|
|
||||||
.seccion1 {
|
|
||||||
height: (map.get($heights, "seccion1"))+rem;
|
|
||||||
|
|
||||||
background-image: linear-gradient($gris, $gris);
|
|
||||||
background-position: left rem(112);
|
|
||||||
background-size: 100% rem(128);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.seccion2 {
|
|
||||||
height: (map.get($heights, "seccion2"))+rem;
|
|
||||||
|
|
||||||
background-image: url('../images/fondo23.png');
|
|
||||||
//background-color: rgb(240, 240, 240);
|
|
||||||
|
|
||||||
.diagonal {
|
|
||||||
border-bottom: (map.get($heights, 'seccion2'))+rem solid rgba($gris, .5);
|
|
||||||
border-right: rem(1900) solid transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dimensiones {
|
|
||||||
height: (map.get($heights, "dimensiones"))+rem;
|
|
||||||
|
|
||||||
background-image: url('../images/fondo23.png');
|
|
||||||
.fondo-gris {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba($gris, .5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.construido {
|
|
||||||
height: (map.get($heights, "construido"))+rem;
|
|
||||||
|
|
||||||
background-image: url('../images/fondo4.jpg');
|
|
||||||
}
|
|
||||||
.corporativos {
|
|
||||||
height: (map.get($heights, "corporativos"))+rem;
|
|
||||||
|
|
||||||
background-image: url('../images/fondo5.png');
|
|
||||||
}
|
|
||||||
.testimonios {
|
|
||||||
height: (map.get($heights, "felices"))+rem;
|
|
||||||
|
|
||||||
background-image: linear-gradient($gris, $gris);
|
|
||||||
background-position: left rem(115);
|
|
||||||
background-size: 100% rem(118);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.formulario {
|
|
||||||
height: (map.get($heights, "formulario"))+rem;
|
|
||||||
background-color: $gris;
|
|
||||||
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$column1: 67;
|
|
||||||
$column2: 33;
|
|
||||||
|
|
||||||
$content_height: 0;
|
|
||||||
$column_height1: 0;
|
|
||||||
@each $name, $val in $heights {
|
|
||||||
$content_height: $content_height + $val;
|
|
||||||
@if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' and $name != 'cabezal' {
|
|
||||||
$column_height1: $column_height1 + $val;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: ($content_height)+rem;
|
|
||||||
font-family: Roboto, sans;
|
|
||||||
color: $gris-texto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
max-width: rem($full_width) !important;
|
|
||||||
height: ($content_height)+rem;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
top: (-$content_height)+rem;
|
|
||||||
|
|
||||||
#header {
|
|
||||||
color: rgb(255, 255, 255);
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: (map.get($heights, 'cabezal'))+rem;
|
|
||||||
|
|
||||||
.ui.menu {
|
|
||||||
border: none !important;
|
|
||||||
background: none !important;
|
|
||||||
background-color: rgba(100, 100, 100, .3) !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
|
|
||||||
.dropdown .menu {
|
|
||||||
/*background: none !important;
|
|
||||||
border: none !important;
|
|
||||||
box-shadow: none !important;*/
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
font-size: 1rem;
|
|
||||||
.item {
|
|
||||||
padding: 1rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
color: inherit !important;
|
|
||||||
font-size: 2rem;
|
|
||||||
|
|
||||||
padding: rem(20) !important;
|
|
||||||
|
|
||||||
.shopping.cart div {
|
|
||||||
position: relative;
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
display: inline-block;
|
|
||||||
top: -2.6rem;
|
|
||||||
left: 0.2rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-family: Roboto, sans;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 50%;
|
|
||||||
max-width: rem(1030);
|
|
||||||
}
|
|
||||||
.frase1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
.frase2 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.column {
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
padding-left: 1rem !important;
|
|
||||||
padding-right: 1rem !important;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&>.column1 {
|
|
||||||
width: percentage($column1/100);
|
|
||||||
|
|
||||||
|
|
||||||
#seccion1 {
|
|
||||||
height: (map.get($heights, "seccion1"))+rem;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.image-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: rem(112+128);
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: rem(155);
|
|
||||||
width: rem(188);
|
|
||||||
margin-top: rem(85);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.paragraph {
|
|
||||||
padding-top: rem(28);
|
|
||||||
line-height: rem(14);
|
|
||||||
text-align: justify;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
font-size: rem(22);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#seccion2 {
|
|
||||||
height: (map.get($heights, "seccion2"))+rem;
|
|
||||||
|
|
||||||
&>.column {
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column1 {
|
|
||||||
margin-top: rem(80);
|
|
||||||
img {
|
|
||||||
width: rem(317);
|
|
||||||
height: rem(317);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column2 {
|
|
||||||
margin-top: rem(114);
|
|
||||||
.row:first-child {
|
|
||||||
background-color: #00427b;
|
|
||||||
color: rgb(256, 256, 256);
|
|
||||||
height: rem(180);
|
|
||||||
width: rem(380);
|
|
||||||
padding: 2rem;
|
|
||||||
margin-left: -3rem;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: rem(16);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: disc inside;
|
|
||||||
font-size: font-size(10);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.row:last-child {
|
|
||||||
margin-top: rem(18);
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: rem(70);
|
|
||||||
height: rem(85);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#dimensiones {
|
|
||||||
height: (map.get($heights, "dimensiones"))+rem;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
padding: rem(37) 0 !important;
|
|
||||||
.bigger {
|
|
||||||
font-size: rem(16);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.images {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.column {
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
&>img {
|
|
||||||
width: rem(313);
|
|
||||||
height: rem(235);
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
width: rem(313);
|
|
||||||
margin-top: rem(25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#construido {
|
|
||||||
height: (map.get($heights, "construido"))+rem;
|
|
||||||
padding-top: rem(23) !important;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
font-size: font_size(22);
|
|
||||||
padding: rem(10) rem(43);
|
|
||||||
background-color: rgba(255, 255, 255, .6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&>.column2 {
|
|
||||||
width: percentage($column2/100);
|
|
||||||
height: ($column_height1)+rem;
|
|
||||||
|
|
||||||
.sticky {
|
|
||||||
height: rem(265);
|
|
||||||
width: rem(310);
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
.row:first-child {
|
|
||||||
height: rem(170);
|
|
||||||
margin-top: rem(80);
|
|
||||||
|
|
||||||
.column {
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column1 {
|
|
||||||
vertical-align: bottom;
|
|
||||||
padding-top: rem(20);
|
|
||||||
width: rem(310*2/3);
|
|
||||||
|
|
||||||
.linea {
|
|
||||||
margin-bottom: rem(10);
|
|
||||||
}
|
|
||||||
|
|
||||||
.titulo {
|
|
||||||
font-size: font_size(25);
|
|
||||||
}
|
|
||||||
.precio {
|
|
||||||
font-size: font_size(16);
|
|
||||||
}
|
|
||||||
font-size: font_size(14);
|
|
||||||
|
|
||||||
@include colors;
|
|
||||||
.input {
|
|
||||||
width: 4.5rem;
|
|
||||||
border: thin solid rgb(0, 0, 0);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column2 {
|
|
||||||
width: rem(310/3);
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: rem(110);
|
|
||||||
height: rem(160);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.row:last-child {
|
|
||||||
.button {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#corporativos {
|
|
||||||
width: 100%;
|
|
||||||
height: (map.get($heights, "corporativos"))+rem;
|
|
||||||
|
|
||||||
margin-top: ($column_height1)+rem !important;
|
|
||||||
|
|
||||||
&>.column {
|
|
||||||
display: inline-block;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
padding-left: 1rem !important;
|
|
||||||
padding-right: 1rem !important;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column1 {
|
|
||||||
width: percentage(67/100);
|
|
||||||
|
|
||||||
&>.header {
|
|
||||||
margin-top: rem(67);
|
|
||||||
margin-bottom: rem(37);
|
|
||||||
.bigger {
|
|
||||||
font-size: rem(26);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.opciones {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.opcion {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
.img-grande {
|
|
||||||
display: inline-block;
|
|
||||||
padding-right: rem(12);
|
|
||||||
img {
|
|
||||||
width: rem(135);
|
|
||||||
height: rem(200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.descripcion {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
height: rem(200);
|
|
||||||
padding-top: rem(20);
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: block;
|
|
||||||
.header {
|
|
||||||
font-size: font_size(14);
|
|
||||||
margin-bottom: rem(10);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: disc inside;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.images {
|
|
||||||
margin-top: rem(34);
|
|
||||||
img {
|
|
||||||
width: rem(70);
|
|
||||||
height: rem(85);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.column2 {
|
|
||||||
width: percentage(33/100);
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
margin-top: rem(46);
|
|
||||||
margin-bottom: rem(24);
|
|
||||||
font-size: rem(26);
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
@include colors;
|
|
||||||
|
|
||||||
.row {
|
|
||||||
margin-bottom: rem(9);
|
|
||||||
}
|
|
||||||
.colores.linea {
|
|
||||||
margin-bottom: rem(25-9);
|
|
||||||
}
|
|
||||||
.input.cantidad {
|
|
||||||
width: 4.5rem;
|
|
||||||
border: thin solid rgb(0, 0, 0);
|
|
||||||
text-align: center;
|
|
||||||
padding: .5rem 0.05rem;
|
|
||||||
font-size: font_size(10);
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
width: 1rem;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: 2rem;
|
|
||||||
background: none;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input [type="file"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.input .file {
|
|
||||||
display: inline-block;
|
|
||||||
height: rem(20*12/10);
|
|
||||||
width: rem(150);
|
|
||||||
padding-top: rem(3);
|
|
||||||
background-color: #cccccb;
|
|
||||||
border: thin solid #333;
|
|
||||||
font-size: font_size(10);
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.input [type="text"] {
|
|
||||||
height: rem(18);
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
height: rem(72);
|
|
||||||
background-color: rgba(255, 255, 255);
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
margin-bottom: rem(25-9);
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #666667;
|
|
||||||
color: white;
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#felices {
|
|
||||||
height: (map.get($heights, "felices"))+rem;
|
|
||||||
|
|
||||||
padding: 0 1rem !important;
|
|
||||||
padding-top: rem(60) !important;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
//margin-top: rem(60);
|
|
||||||
font-size: font_size(22);
|
|
||||||
}
|
|
||||||
.testimonios {
|
|
||||||
margin-top: rem(25);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.testimonio {
|
|
||||||
height: rem(80);
|
|
||||||
color: #666667;
|
|
||||||
margin-top: rem(20);
|
|
||||||
width: percentage(30/100);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
color: #666667;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#formulario {
|
|
||||||
height: (map.get($heights, "formulario"))+rem;
|
|
||||||
|
|
||||||
padding: 0 1rem !important;
|
|
||||||
|
|
||||||
.whatsapp-link {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
&>.column {
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
padding-left: 1rem !important;
|
|
||||||
padding-right: 1rem !important;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&>.flotante {
|
|
||||||
position: absolute;
|
|
||||||
top: rem(183);
|
|
||||||
margin: auto;
|
|
||||||
left: 40%;
|
|
||||||
width: rem($full_width/5);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&>.content {
|
|
||||||
width: rem(130);
|
|
||||||
margin: auto;
|
|
||||||
left: -50%;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
display: block;
|
|
||||||
padding: rem(5) 0;
|
|
||||||
}
|
|
||||||
div.whatsapp {
|
|
||||||
height: rem(30);
|
|
||||||
background-color: #1a9947;
|
|
||||||
color: #fff;
|
|
||||||
font-size: rem(10);
|
|
||||||
|
|
||||||
&>i {
|
|
||||||
position: relative;
|
|
||||||
font-size: font_size(16);
|
|
||||||
top: rem(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rrss {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: rem(20);
|
|
||||||
|
|
||||||
i.inverted.grey {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&>.column1 {
|
|
||||||
width: percentage($column1/100);
|
|
||||||
margin-top: rem(27);
|
|
||||||
|
|
||||||
&>img {
|
|
||||||
width: rem(540);
|
|
||||||
height: rem(350);
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&>.column2 {
|
|
||||||
width: percentage($column2/100);
|
|
||||||
|
|
||||||
.header {
|
|
||||||
margin-top: rem(20);
|
|
||||||
text-align: center;
|
|
||||||
font-size: font_size(22);
|
|
||||||
|
|
||||||
.whatsapp-link {
|
|
||||||
display: inline-block;
|
|
||||||
width: rem(25);
|
|
||||||
height: rem(25);
|
|
||||||
font-size: font_size(25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.paragraph {
|
|
||||||
padding-top: 1rem;
|
|
||||||
padding-bottom: rem(25);
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
input {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
height: rem(18);
|
|
||||||
margin-bottom: rem(9);
|
|
||||||
background-color: rgba(255, 255, 255, .5);
|
|
||||||
font-size: font_size(10);
|
|
||||||
&::placeholder {
|
|
||||||
color: $gris-texto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
height: rem(72);
|
|
||||||
margin-bottom: rem(25);
|
|
||||||
background-color: rgba(255, 255, 255, .5);
|
|
||||||
font-size: font_size(10);
|
|
||||||
&::placeholder {
|
|
||||||
color: $gris-texto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
background-color: white;
|
|
||||||
color: $gris-texto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
&.segment>.container {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&>.column1 {
|
|
||||||
display: inline-block;
|
|
||||||
width: ($column1)+rem;
|
|
||||||
}
|
|
||||||
&>.column2 {
|
|
||||||
display: inline-block;
|
|
||||||
width: ($column2)+rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.simple.segment {
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
|
|
||||||
&>.ui.grid {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fondo-blanco {
|
|
||||||
background-color: rgba(255, 255, 255, .5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#subir {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
text-align: right;
|
|
||||||
padding: 0 1rem !important;
|
|
||||||
|
|
||||||
i.icons {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -44,6 +44,6 @@ function html(done) {
|
|||||||
.pipe(dest(path.join(output_dir, '../')))
|
.pipe(dest(path.join(output_dir, '../')))
|
||||||
}
|
}
|
||||||
|
|
||||||
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)
|
||||||
|
|||||||
@ -1,41 +1,3 @@
|
|||||||
var proportionals = []
|
|
||||||
var widths = []
|
|
||||||
var heights = []
|
|
||||||
var changeables = []
|
|
||||||
function register_resizeables() {
|
|
||||||
proportionals.push($('img'))
|
|
||||||
//widths.push()
|
|
||||||
heights.push($('#backgrounds div'))
|
|
||||||
changeables.push($('.sticky'))
|
|
||||||
}
|
|
||||||
|
|
||||||
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
|
|
||||||
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
|
|
||||||
|
|
||||||
function mod_height(elem, p) {
|
|
||||||
elem.height = (elem.height * p)
|
|
||||||
}
|
|
||||||
function mod_width(elem, p) {
|
|
||||||
elem.width = (elem.width * p)
|
|
||||||
}
|
|
||||||
function mod_dim(elem, p) {
|
|
||||||
mod_width(elem, p)
|
|
||||||
mod_height(elem, p)
|
|
||||||
}
|
|
||||||
function resize() {
|
|
||||||
let p = 400 / 1080
|
|
||||||
|
|
||||||
$.each(proportionals, (i, el) => {
|
|
||||||
mod_dim(el, p)
|
|
||||||
})
|
|
||||||
$.each(widths, (i, el) => {
|
|
||||||
mod_width(el, p)
|
|
||||||
})
|
|
||||||
$.each(heights, (i, el) => {
|
|
||||||
mod_height(el, p)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
class Amount {
|
class Amount {
|
||||||
constructor(elem) {
|
constructor(elem) {
|
||||||
this.elem = elem
|
this.elem = elem
|
||||||
@ -152,10 +114,8 @@ class Colors {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let smtp = {
|
let smtp = {
|
||||||
Host: 'smtp.google.com',
|
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
||||||
Username: 'rsalinas85@gmail.com',
|
From: 'contacto@3dstand.cl'
|
||||||
Password: 'salinas1234',
|
|
||||||
From: 'ventas@3dstand.cl'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let sticky_form = {
|
let sticky_form = {
|
||||||
@ -197,9 +157,7 @@ let cotiza_form = {
|
|||||||
this.elem.find('[name="mensaje"]').val()
|
this.elem.find('[name="mensaje"]').val()
|
||||||
]
|
]
|
||||||
let content = {
|
let content = {
|
||||||
Host: smtp.Host,
|
SecureToken: smtp.SecureToken,
|
||||||
Username: smtp.Username,
|
|
||||||
Password: smtp.Password,
|
|
||||||
To: email,
|
To: email,
|
||||||
From: smtp.From,
|
From: smtp.From,
|
||||||
Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
@ -211,8 +169,7 @@ let cotiza_form = {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
console.debug(email)
|
Email.send(content)
|
||||||
//Email.send()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let conversemos_form = {
|
let conversemos_form = {
|
||||||
@ -233,14 +190,13 @@ let conversemos_form = {
|
|||||||
this.elem.find('[name="mensaje"]').val()
|
this.elem.find('[name="mensaje"]').val()
|
||||||
]
|
]
|
||||||
let content = {
|
let content = {
|
||||||
Host: smtp.Host,
|
SecureToken: smtp.SecureToken,
|
||||||
Username: smtp.Username,
|
|
||||||
Password: smtp.Password,
|
|
||||||
From: smtp.From,
|
From: smtp.From,
|
||||||
To: email,
|
To: email,
|
||||||
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
|
||||||
Body: body.join('<br />')
|
Body: body.join('<br />')
|
||||||
}
|
}
|
||||||
|
Email.send(content)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -295,11 +251,6 @@ let testimonios = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
register_resizeables()
|
|
||||||
|
|
||||||
if (vw < 1080) {
|
|
||||||
resize()
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.menu.sticky').sticky()
|
$('.menu.sticky').sticky()
|
||||||
$('.column2 .sticky').sticky({
|
$('.column2 .sticky').sticky({
|
||||||
@ -309,8 +260,6 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
$('.shopping.cart').innerText = 0
|
$('.shopping.cart').innerText = 0
|
||||||
|
|
||||||
window.onresize = resize;
|
|
||||||
|
|
||||||
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
File diff suppressed because it is too large
Load Diff
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