ProVM/stand
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Primeros cambios por cliente y pasando a responsive

Browse Source
This commit is contained in:
Aldarien
2021-01-06 23:43:16 -03:00
parent b7003db753
commit d31626b4a6
18 changed files with 2951 additions and 1603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
assets/sass/_functions.scss Normal file
View 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;
}
}
}
}

0
assets/sass/_main-phone.scss
View File

702
assets/sass/_pc.scss Normal file
View 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
View 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
View 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
View 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
View 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');

794
assets/sass/main.scss
View File

@ -1,795 +1,9 @@
@use "sass:map";
@import 'reset';
$html-font-size: 16px;
@function strip_unit($value) {
@return $value / ($value * 0 + 1);
@media screen and (max-width: 800px) {
@import 'phone';
}
@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;
}
$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;
}
}
@media screen and (min-width: 800px) {
@import 'pc';
}