v2.0.2-beta
This commit is contained in:
@ -8,7 +8,7 @@
|
||||
<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>
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui center aligned basic segment">
|
||||
<i class="angle icon"></i>
|
||||
<i class="angle font-icon"></i>
|
||||
<br />
|
||||
Ángulo preciso de inclinación para usar en conferencias
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="ui grid">
|
||||
<div class="doubling two columns row">
|
||||
<div class="content column">
|
||||
<i class="chile icon"></i>
|
||||
<i class="chile font-icon"></i>
|
||||
<br />
|
||||
Diseñado y fabricado en Chile
|
||||
<br /><br />
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
<div class="titulo">
|
||||
COTIZA CON NOSOTROS
|
||||
</div>
|
||||
<form>
|
||||
<form class="ui form">
|
||||
<div class="row">
|
||||
<div class="input">
|
||||
LOGO
|
||||
|
||||
@ -3,16 +3,9 @@
|
||||
<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 class="ui center aligned grid">
|
||||
<div class="one columns row">
|
||||
<div class="ui three center aligned cards testimonios">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<section id="contacto">
|
||||
<div class="background"></div>
|
||||
<div class="ui container">
|
||||
<div class="ui stackable grid">
|
||||
<div class="column">
|
||||
@ -20,17 +21,17 @@
|
||||
<a href="mailto:contacto@3dstand.cl">
|
||||
contacto@3dstand.cl
|
||||
</a>
|
||||
<br />
|
||||
<br /><br />
|
||||
<i class="ui icons">
|
||||
<a href="http://instagram.com/stand">
|
||||
<i class="ui icons">
|
||||
<i class="circle icon"></i>
|
||||
<i class="large 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="large circle icon"></i>
|
||||
<i class="facebook f icon"></i>
|
||||
</i>
|
||||
</a>
|
||||
@ -50,10 +51,16 @@
|
||||
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>
|
||||
<form class="ui form" id="contacto_form">
|
||||
<div class="row">
|
||||
<input type="text" name="nombre" placeholder="NOMBRE" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<input type="text" name="mail" placeholder="E-MAIL" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<textarea name="mensaje" placeholder="MENSAJE"></textarea>
|
||||
</div>
|
||||
<button class="ui button">ENVIAR</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -273,7 +273,7 @@ let cotiza_form = {
|
||||
}
|
||||
}
|
||||
let conversemos_form = {
|
||||
elem: $('#contacto'),
|
||||
elem: $('#contacto_form'),
|
||||
setup: function() {
|
||||
this.elem.submit((e) => {
|
||||
e.preventDefault()
|
||||
@ -302,38 +302,91 @@ let conversemos_form = {
|
||||
|
||||
let testimonios = {
|
||||
testimonios: [
|
||||
"Este soporte que compré en @Stand-cl me cambió la vida, me sirve para el teléfono y el ipad, y ya no tengo que andar acomodando los aparatos en cualquier parte para las videollamadas",
|
||||
"Siiii todo mi gusto.. me encantó lo completo que es. Gracias",
|
||||
"Está super cool se ve de buena calidad",
|
||||
"Llego el mío, y es excelente, estoy feliz con mi compra",
|
||||
"Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida",
|
||||
"Perfecto el producto, funciona impecable, muchas gracias",
|
||||
"Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman",
|
||||
"Hola! Quería decirte que me encantaron los soportes, Muy útiles!",
|
||||
"Compré 3 y olvidé decirte que los encontré geniales! Me encantaron",
|
||||
"Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Este soporte que compré en @Stand-cl me cambió la vida, me sirve para el teléfono y el ipad, y ya no tengo que andar acomodando los aparatos en cualquier parte para las videollamadas"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Siiii todo mi gusto.. me encantó lo completo que es. Gracias"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Está super cool se ve de buena calidad"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Llego el mío, y es excelente, estoy feliz con mi compra"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Perfecto el producto, funciona impecable, muchas gracias"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Hola! Quería decirte que me encantaron los soportes, Muy útiles!"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Compré 3 y olvidé decirte que los encontré geniales! Me encantaron"
|
||||
},
|
||||
{
|
||||
"autor": "John Master",
|
||||
"contenido": "Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
|
||||
}
|
||||
],
|
||||
elem: $('#felices .testimonios'),
|
||||
elem: $('#testimonios'),
|
||||
page: 0,
|
||||
setup: function() {
|
||||
if (this.amount != 3) {
|
||||
this.elem.find('.testimonios').removeClass('three')
|
||||
this.elem.find('.testimonios').addClass(this.word_amount[this.amount])
|
||||
}
|
||||
this.draw()
|
||||
},
|
||||
amount: 3,
|
||||
word_amount: {
|
||||
1: 'one',
|
||||
3: 'three'
|
||||
},
|
||||
draw: function() {
|
||||
var n = this.page * 3
|
||||
this.elem.find('.testimonio').each((i, el) => {
|
||||
var n = this.page * this.amount
|
||||
let p = this.elem.find('.testimonios')
|
||||
p.html('')
|
||||
for (var i = 0; i < this.amount; i ++) {
|
||||
if (n >= this.testimonios.length) {
|
||||
$(el).html('')
|
||||
return
|
||||
break
|
||||
}
|
||||
$(el).html(this.testimonios[n])
|
||||
n += 1
|
||||
})
|
||||
p.append(
|
||||
$('<div></div>').attr('class', 'ui centered fluid card').append(
|
||||
$('<div></div>').attr('class', 'center aligned content').append(
|
||||
$('<div></div>').attr('class', 'header').html(this.testimonios[n]['autor'].toUpperCase())
|
||||
).append(
|
||||
$('<div></div>').attr('class', 'description').html(this.testimonios[n]['contenido'])
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').attr('class', 'center aligned content').append(
|
||||
$('<div></div>').attr('class', 'ui mini black rating disabled').attr('data-rating', '5').attr('data-max-rating', '5')
|
||||
)
|
||||
)
|
||||
)
|
||||
n ++
|
||||
}
|
||||
this.elem.find('.ui.rating').rating()
|
||||
this.draw_nav()
|
||||
},
|
||||
draw_nav: function() {
|
||||
let N = Math.ceil(this.testimonios.length / 3)
|
||||
let N = Math.ceil(this.testimonios.length / this.amount)
|
||||
let k = this.page
|
||||
let nav = this.elem.parent().find('.nav')
|
||||
let nav = this.elem.find('.nav')
|
||||
let tests = this
|
||||
nav.html('')
|
||||
for (var i = 0; i < N; i ++) {
|
||||
@ -351,7 +404,6 @@ let testimonios = {
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$('#menu.sticky').sticky()
|
||||
$('.column2 .sticky').sticky({
|
||||
context: '#column'
|
||||
@ -369,5 +421,15 @@ $(document).ready(function() {
|
||||
let cotiza_color = new Colors($('#corporativos .colores'))
|
||||
cotiza_form.setup()
|
||||
conversemos_form.setup()
|
||||
|
||||
window.mobileCheck = function() {
|
||||
let check = false;
|
||||
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
|
||||
return check;
|
||||
};
|
||||
|
||||
if (window.mobileCheck()) {
|
||||
testimonios.amount = 1
|
||||
}
|
||||
testimonios.setup()
|
||||
})
|
||||
|
||||
@ -4,3 +4,5 @@
|
||||
@import 'dimensiones';
|
||||
@import 'construidos';
|
||||
@import 'corporativos';
|
||||
@import 'testimonios';
|
||||
@import 'contacto';
|
||||
|
||||
58
assets/sass/_contacto.scss
Normal file
58
assets/sass/_contacto.scss
Normal file
@ -0,0 +1,58 @@
|
||||
#contacto {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $gris;
|
||||
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
.column {
|
||||
height: 100%;
|
||||
}
|
||||
.column:first-child {
|
||||
width: 67%;
|
||||
}
|
||||
.column:last-child {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
div.whatsapp {
|
||||
background-color: green;
|
||||
padding: .5rem 0;
|
||||
color: $blanco;
|
||||
}
|
||||
|
||||
.icons {
|
||||
.icon:first-child {
|
||||
color: $blanco;
|
||||
}
|
||||
.icon:last-child {
|
||||
color: $gris;
|
||||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: .5rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
form {
|
||||
.row {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
input {
|
||||
height: 1.5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
33
assets/sass/_fonts.scss
Normal file
33
assets/sass/_fonts.scss
Normal file
@ -0,0 +1,33 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('../fonts/icomoon.eotiedbpz');
|
||||
src: url('../fonts/icomoon.eot?iedbpz#iefix') format('embedded-opentype'),
|
||||
url('../fonts/icomoon.ttf?iedbpz') format('truetype'),
|
||||
url('../fonts/icomoon.woff?iedbpz') format('woff'),
|
||||
url('../fonts/icomoon.svg?iedbpz#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="font-icon"], [class*=" font-icon"] {
|
||||
// use !important to prevent issues with browser extensions that change fonts
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
// Better Font Rendering ===========
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
i.font-icon.angle:before {
|
||||
content: "\e900";
|
||||
}
|
||||
i.font-icon.chile:before {
|
||||
content: "\e901";
|
||||
}
|
||||
13
assets/sass/_testimonios.scss
Normal file
13
assets/sass/_testimonios.scss
Normal file
@ -0,0 +1,13 @@
|
||||
#testimonios {
|
||||
.testimonios {
|
||||
.ui.card {
|
||||
background-color: $gris;
|
||||
|
||||
.rating {
|
||||
.icon {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,8 +3,10 @@
|
||||
@import 'wide/descripcion';
|
||||
@import 'wide/ventajas';
|
||||
@import 'wide/dimensiones';
|
||||
|
||||
@import 'wide/construidos';
|
||||
@import 'wide/corporativos';
|
||||
@import 'wide/testimonios';
|
||||
@import 'wide/contacto';
|
||||
|
||||
.left.column {
|
||||
width: 67% !important;
|
||||
@ -20,52 +22,6 @@ section .titulo {
|
||||
padding-bottom: rem(25);
|
||||
}
|
||||
|
||||
#backgrounds {
|
||||
.seccion2 {
|
||||
height: (map.get($heights, "seccion2"))+rem;
|
||||
|
||||
background-image: $fondo_ventajas_dimensiones;
|
||||
|
||||
.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_ventajas_dimensiones;
|
||||
.fondo-gris {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($gris, .5);
|
||||
}
|
||||
}
|
||||
.construido {
|
||||
height: (map.get($heights, "construido"))+rem;
|
||||
|
||||
background-image: $fondo_construidos;
|
||||
}
|
||||
.corporativos {
|
||||
height: (map.get($heights, "corporativos"))+rem;
|
||||
|
||||
background-image: $fondo_corporativos;
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: $gris_standard;
|
||||
}
|
||||
@ -90,128 +46,6 @@ body {
|
||||
}
|
||||
&>.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;
|
||||
|
||||
.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);
|
||||
@ -296,161 +130,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
|
||||
|
||||
@ -7,10 +7,11 @@ html {
|
||||
}
|
||||
|
||||
@import 'common';
|
||||
@import 'fonts';
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
@media screen and (orientation: portrait) {
|
||||
@import 'phone';
|
||||
}
|
||||
@media screen and (min-width: 800px) {
|
||||
@media screen and (orientation: landscape) {
|
||||
@import 'wide';
|
||||
}
|
||||
|
||||
3
assets/sass/wide/_construidos.scss
Normal file
3
assets/sass/wide/_construidos.scss
Normal file
@ -0,0 +1,3 @@
|
||||
#construidos {
|
||||
margin-top: rem(15);
|
||||
}
|
||||
12
assets/sass/wide/_contacto.scss
Normal file
12
assets/sass/wide/_contacto.scss
Normal file
@ -0,0 +1,12 @@
|
||||
#contacto {
|
||||
.image {
|
||||
margin: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
background-color: #666667;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,12 @@
|
||||
#corporativos {
|
||||
margin-top: rem(15);
|
||||
|
||||
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);
|
||||
@ -41,34 +40,24 @@
|
||||
.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);
|
||||
.row {
|
||||
input {
|
||||
height: 1.5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
background-color: #666667;
|
||||
color: white;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3
assets/sass/wide/_testimonios.scss
Normal file
3
assets/sass/wide/_testimonios.scss
Normal file
@ -0,0 +1,3 @@
|
||||
#testimonios {
|
||||
margin-top: rem(15);
|
||||
}
|
||||
Reference in New Issue
Block a user