v2.0.2-beta

This commit is contained in:
2021-01-13 14:17:30 -03:00
parent daab2b65f5
commit 10622c2e94
28 changed files with 456 additions and 744 deletions

View File

@ -4,3 +4,5 @@
@import 'dimensiones';
@import 'construidos';
@import 'corporativos';
@import 'testimonios';
@import 'contacto';

View 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
View 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";
}

View File

@ -0,0 +1,13 @@
#testimonios {
.testimonios {
.ui.card {
background-color: $gris;
.rating {
.icon {
color: white;
}
}
}
}
}

View File

@ -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;

View File

@ -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';
}

View File

@ -0,0 +1,3 @@
#construidos {
margin-top: rem(15);
}

View File

@ -0,0 +1,12 @@
#contacto {
.image {
margin: auto;
vertical-align: middle;
}
.button {
width: 100%;
background-color: #666667;
color: white;
}
}

View File

@ -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;
}
}
}

View File

@ -0,0 +1,3 @@
#testimonios {
margin-top: rem(15);
}