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

Intento de cambiar a grilla de semantic

Browse Source
This commit is contained in:
Aldarien
2021-01-05 12:39:01 -03:00
parent b7003db753
commit dde8727363
6 changed files with 152 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/index.html
View File

@ -63,13 +63,24 @@
</div> </div>
</header> </header>
<div class="column1 column" id="column"> <div class="ui grid">
<div class="column1 twelve wide 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">
<div class="ui grid">
<div class="ten wide column">
<div class="ui medium images">
<img src="./assets/images/seccion11.png" /> <img src="./assets/images/seccion11.png" />
<img src="./assets/images/seccion12.png" /> <img src="./assets/images/seccion12.png" />
</div>
</div>
<div class="six wide column">
<div class="ui medium image">
<img src="./assets/images/seccion13.png" /> <img src="./assets/images/seccion13.png" />
</div> </div>
</div>
</div>
</div>
<div class="paragraph"> <div class="paragraph">
<div class="header"> <div class="header">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
@ -130,7 +141,7 @@
</div> </div>
</section> </section>
</div> </div>
<div class="column2 column fondo-blanco"> <div class="column2 four wide column fondo-blanco">
<div class="ui sticky"> <div class="ui sticky">
<form class="ui form" name="form-sticky"> <form class="ui form" name="form-sticky">
<div class="row"> <div class="row">
@ -170,6 +181,7 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<section id="corporativos" class="ui simple segment"> <section id="corporativos" class="ui simple segment">
<div class="column1 column"> <div class="column1 column">

22
assets/sass/main.scss
View File

@ -225,7 +225,7 @@ body {
} }
} }
&>.column { /*&>.column {
display: inline-block; display: inline-block;
float: left; float: left;
@ -235,9 +235,9 @@ body {
&::after { &::after {
clear: both; clear: both;
} }
} }*/
&>.column1 { &>.grid>.column1 {
width: percentage($column1/100); //width: percentage($column1/100);
#seccion1 { #seccion1 {
@ -245,15 +245,15 @@ body {
width: 100%; width: 100%;
.image-container { .image-container {
display: flex; /*display: flex;
justify-content: space-between; justify-content: space-between;*/
height: rem(112+128); height: rem(112+128);
img { /*img {
height: rem(155); height: rem(155);
width: rem(188); width: rem(188);
margin-top: rem(85); margin-top: rem(85);
} }*/
} }
.paragraph { .paragraph {
padding-top: rem(28); padding-top: rem(28);
@ -362,8 +362,8 @@ body {
} }
} }
} }
&>.column2 { &>.grid>.column2 {
width: percentage($column2/100); //width: percentage($column2/100);
height: ($column_height1)+rem; height: ($column_height1)+rem;
.sticky { .sticky {
@ -449,7 +449,7 @@ body {
width: 100%; width: 100%;
height: (map.get($heights, "corporativos"))+rem; height: (map.get($heights, "corporativos"))+rem;
margin-top: ($column_height1)+rem !important; //margin-top: ($column_height1)+rem !important;
&>.column { &>.column {
display: inline-block; display: inline-block;

139
public/assets/styles/main.css
View File

@ -110,6 +110,17 @@ body {
height: 211.25rem; height: 211.25rem;
position: relative; position: relative;
top: -211.25rem; top: -211.25rem;
/*&>.column {
display: inline-block;
float: left;
padding-left: 1rem !important;
padding-right: 1rem !important;
&::after {
clear: both;
}
}*/
} }
#content #header { #content #header {
color: white; color: white;
@ -161,63 +172,51 @@ body {
#content #header .logo .frase2 { #content #header .logo .frase2 {
font-size: 1rem; font-size: 1rem;
} }
#content > .column { #content > .grid > .column1 #seccion1 {
display: inline-block;
float: left;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
#content > .column::after {
clear: both;
}
#content > .column1 {
width: 67%;
}
#content > .column1 #seccion1 {
height: 25rem; height: 25rem;
width: 100%; width: 100%;
} }
#content > .column1 #seccion1 .image-container { #content > .grid > .column1 #seccion1 .image-container {
display: flex; /*display: flex;
justify-content: space-between; justify-content: space-between;*/
height: 15rem; height: 15rem;
/*img {
height: rem(155);
width: rem(188);
margin-top: rem(85);
}*/
} }
#content > .column1 #seccion1 .image-container img { #content > .grid > .column1 #seccion1 .paragraph {
height: 9.6875rem;
width: 11.75rem;
margin-top: 5.3125rem;
}
#content > .column1 #seccion1 .paragraph {
padding-top: 1.75rem; padding-top: 1.75rem;
line-height: 0.875rem; line-height: 0.875rem;
text-align: justify; text-align: justify;
} }
#content > .column1 #seccion1 .paragraph .header { #content > .grid > .column1 #seccion1 .paragraph .header {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.375rem; font-size: 1.375rem;
} }
#content > .column1 #seccion2 { #content > .grid > .column1 #seccion2 {
height: 27.5rem; height: 27.5rem;
} }
#content > .column1 #seccion2 > .column { #content > .grid > .column1 #seccion2 > .column {
display: inline-block; display: inline-block;
float: left; float: left;
width: 50%; width: 50%;
} }
#content > .column1 #seccion2 > .column::after { #content > .grid > .column1 #seccion2 > .column::after {
clear: both; clear: both;
} }
#content > .column1 #seccion2 .column1 { #content > .grid > .column1 #seccion2 .column1 {
margin-top: 5rem; margin-top: 5rem;
} }
#content > .column1 #seccion2 .column1 img { #content > .grid > .column1 #seccion2 .column1 img {
width: 19.8125rem; width: 19.8125rem;
height: 19.8125rem; height: 19.8125rem;
} }
#content > .column1 #seccion2 .column2 { #content > .grid > .column1 #seccion2 .column2 {
margin-top: 7.125rem; margin-top: 7.125rem;
} }
#content > .column1 #seccion2 .column2 .row:first-child { #content > .grid > .column1 #seccion2 .column2 .row:first-child {
background-color: #00427b; background-color: #00427b;
color: white; color: white;
height: 11.25rem; height: 11.25rem;
@ -226,120 +225,119 @@ body {
margin-left: -3rem; margin-left: -3rem;
overflow: hidden; overflow: hidden;
} }
#content > .column1 #seccion2 .column2 .row:first-child .header { #content > .grid > .column1 #seccion2 .column2 .row:first-child .header {
font-weight: bold; font-weight: bold;
font-size: 1rem; font-size: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#content > .column1 #seccion2 .column2 .row:first-child ul { #content > .grid > .column1 #seccion2 .column2 .row:first-child ul {
list-style: disc inside; list-style: disc inside;
font-size: 0.8333333333rem; font-size: 0.8333333333rem;
} }
#content > .column1 #seccion2 .column2 .row:last-child { #content > .grid > .column1 #seccion2 .column2 .row:last-child {
margin-top: 1.125rem; margin-top: 1.125rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
#content > .column1 #seccion2 .column2 .row:last-child img { #content > .grid > .column1 #seccion2 .column2 .row:last-child img {
width: 4.375rem; width: 4.375rem;
height: 5.3125rem; height: 5.3125rem;
} }
#content > .column1 #dimensiones { #content > .grid > .column1 #dimensiones {
height: 27.5rem; height: 27.5rem;
} }
#content > .column1 #dimensiones .header { #content > .grid > .column1 #dimensiones .header {
padding: 2.3125rem 0 !important; padding: 2.3125rem 0 !important;
} }
#content > .column1 #dimensiones .header .bigger { #content > .grid > .column1 #dimensiones .header .bigger {
font-size: 1rem; font-size: 1rem;
} }
#content > .column1 #dimensiones .images { #content > .grid > .column1 #dimensiones .images {
display: flex; display: flex;
} }
#content > .column1 #dimensiones .images .column { #content > .grid > .column1 #dimensiones .images .column {
float: left; float: left;
} }
#content > .column1 #dimensiones .images .column > img { #content > .grid > .column1 #dimensiones .images .column > img {
width: 19.5625rem; width: 19.5625rem;
height: 14.6875rem; height: 14.6875rem;
} }
#content > .column1 #dimensiones .images .column div { #content > .grid > .column1 #dimensiones .images .column div {
width: 19.5625rem; width: 19.5625rem;
margin-top: 1.5625rem; margin-top: 1.5625rem;
} }
#content > .column1 #construido { #content > .grid > .column1 #construido {
height: 21.875rem; height: 21.875rem;
padding-top: 1.4375rem !important; padding-top: 1.4375rem !important;
} }
#content > .column1 #construido .header { #content > .grid > .column1 #construido .header {
font-size: 1.8333333333rem; font-size: 1.8333333333rem;
padding: 0.625rem 2.6875rem; padding: 0.625rem 2.6875rem;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
} }
#content > .column2 { #content > .grid > .column2 {
width: 33%;
height: 101.875rem; height: 101.875rem;
} }
#content > .column2 .sticky { #content > .grid > .column2 .sticky {
height: 16.5625rem; height: 16.5625rem;
width: 19.375rem; width: 19.375rem;
margin: auto; margin: auto;
} }
#content > .column2 .sticky .row:first-child { #content > .grid > .column2 .sticky .row:first-child {
height: 10.625rem; height: 10.625rem;
margin-top: 5rem; margin-top: 5rem;
} }
#content > .column2 .sticky .row:first-child .column { #content > .grid > .column2 .sticky .row:first-child .column {
display: inline-block; display: inline-block;
float: left; float: left;
} }
#content > .column2 .sticky .row:first-child .column::after { #content > .grid > .column2 .sticky .row:first-child .column::after {
clear: both; clear: both;
} }
#content > .column2 .sticky .row:first-child .column1 { #content > .grid > .column2 .sticky .row:first-child .column1 {
vertical-align: bottom; vertical-align: bottom;
padding-top: 1.25rem; padding-top: 1.25rem;
width: 12.9166666667rem; width: 12.9166666667rem;
font-size: 1.1666666667rem; font-size: 1.1666666667rem;
} }
#content > .column2 .sticky .row:first-child .column1 .linea { #content > .grid > .column2 .sticky .row:first-child .column1 .linea {
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
#content > .column2 .sticky .row:first-child .column1 .titulo { #content > .grid > .column2 .sticky .row:first-child .column1 .titulo {
font-size: 2.0833333333rem; font-size: 2.0833333333rem;
} }
#content > .column2 .sticky .row:first-child .column1 .precio { #content > .grid > .column2 .sticky .row:first-child .column1 .precio {
font-size: 1.3333333333rem; font-size: 1.3333333333rem;
} }
#content > .column2 .sticky .row:first-child .column1 .colores { #content > .grid > .column2 .sticky .row:first-child .column1 .colores {
vertical-align: center; vertical-align: center;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .text { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .text {
margin-right: 0.1875rem; margin-right: 0.1875rem;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .white { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .white {
border: thin solid black; border: thin solid black;
background-color: white; background-color: white;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .black { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .black {
background-color: black; background-color: black;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .blue { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .blue {
background-color: blue; background-color: blue;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .green { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .green {
background-color: lime; background-color: lime;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .yellow { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .yellow {
background-color: yellow; background-color: yellow;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .orange { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .orange {
background-color: #ff8200; background-color: #ff8200;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .red { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .red {
background-color: red; background-color: red;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .circle { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .circle {
display: inline-block; display: inline-block;
width: 0.75rem; width: 0.75rem;
height: 0.75rem; height: 0.75rem;
@ -347,19 +345,19 @@ body {
margin: auto 0.0625rem; margin: auto 0.0625rem;
cursor: pointer; cursor: pointer;
} }
#content > .column2 .sticky .row:first-child .column1 .colores .circle.selected { #content > .grid > .column2 .sticky .row:first-child .column1 .colores .circle.selected {
width: 0.875rem; width: 0.875rem;
height: 0.875rem; height: 0.875rem;
cursor: default; cursor: default;
} }
#content > .column2 .sticky .row:first-child .column1 .input { #content > .grid > .column2 .sticky .row:first-child .column1 .input {
width: 4.5rem; width: 4.5rem;
border: thin solid black; border: thin solid black;
text-align: center; text-align: center;
padding: 0.5rem 0.05rem; padding: 0.5rem 0.05rem;
font-size: 0.8333333333rem; font-size: 0.8333333333rem;
} }
#content > .column2 .sticky .row:first-child .column1 .input button { #content > .grid > .column2 .sticky .row:first-child .column1 .input button {
background: none; background: none;
border: none; border: none;
width: 1rem; width: 1rem;
@ -368,7 +366,7 @@ body {
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
} }
#content > .column2 .sticky .row:first-child .column1 .input input { #content > .grid > .column2 .sticky .row:first-child .column1 .input input {
width: 2rem; width: 2rem;
background: none; background: none;
margin: 0; margin: 0;
@ -376,21 +374,20 @@ body {
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
#content > .column2 .sticky .row:first-child .column2 { #content > .grid > .column2 .sticky .row:first-child .column2 {
width: 6.4583333333rem; width: 6.4583333333rem;
} }
#content > .column2 .sticky .row:first-child .column2 img { #content > .grid > .column2 .sticky .row:first-child .column2 img {
width: 6.875rem; width: 6.875rem;
height: 10rem; height: 10rem;
} }
#content > .column2 .sticky .row:last-child .button { #content > .grid > .column2 .sticky .row:last-child .button {
border-radius: 0 !important; border-radius: 0 !important;
width: 100%; width: 100%;
} }
#content #corporativos { #content #corporativos {
width: 100%; width: 100%;
height: 32.5rem; height: 32.5rem;
margin-top: 101.875rem !important;
} }
#content #corporativos > .column { #content #corporativos > .column {
display: inline-block; display: inline-block;

2
public/assets/styles/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/assets/styles/maps/main.min.css.map
View File

File diff suppressed because one or more lines are too long

2
public/index.html
View File

File diff suppressed because one or more lines are too long