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

126
assets/index.html
View File

@ -63,74 +63,85 @@
</div> </div>
</header> </header>
<div class="column1 column" id="column"> <div class="ui grid">
<section id="seccion1" class="ui simple segment"> <div class="column1 twelve wide column" id="column">
<div class="image-container"> <section id="seccion1" class="ui simple segment">
<img src="./assets/images/seccion11.png" /> <div class="image-container">
<img src="./assets/images/seccion12.png" /> <div class="ui grid">
<img src="./assets/images/seccion13.png" /> <div class="ten wide column">
</div> <div class="ui medium images">
<div class="paragraph"> <img src="./assets/images/seccion11.png" />
<div class="header"> <img src="./assets/images/seccion12.png" />
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR </div>
</div>
<div class="six wide column">
<div class="ui medium image">
<img src="./assets/images/seccion13.png" />
</div>
</div>
</div>
</div> </div>
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu <div class="paragraph">
</div>
</section>
<section id="seccion2" class="ui simple segment">
<div class="column1 column">
<img src="./assets/images/foto1.jpg" />
</div>
<div class="column2 column">
<div class="row">
<div class="header"> <div class="header">
VENTAJAS LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
</div> </div>
<ul> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
<li>Apoyo estable del tel&eacute;fono</li>
<li>&Aacute;ngulo preciso de inclinaci&oacute;n para usar en conferencias</li>
<li>Compatible con tablets permite cargar mientras se usa</li>
<li>Dise&ntilde;o moderno y minimalista</li>
</ul>
</div> </div>
<div class="row"> </section>
<img src="./assets/images/foto2.jpg" />
<img src="./assets/images/foto3.jpg" /> <section id="seccion2" class="ui simple segment">
<div class="column1 column">
<img src="./assets/images/foto1.jpg" /> <img src="./assets/images/foto1.jpg" />
<img src="./assets/images/foto2.jpg" />
</div> </div>
</div> <div class="column2 column">
</section> <div class="row">
<div class="header">
<section id="dimensiones" class="ui simple segment"> VENTAJAS
<div class="header"> </div>
<span class="bigger">DIMENSIONES</span> y colores <ul>
</div> <li>Apoyo estable del tel&eacute;fono</li>
<div class="images"> <li>&Aacute;ngulo preciso de inclinaci&oacute;n para usar en conferencias</li>
<div class="column"> <li>Compatible con tablets permite cargar mientras se usa</li>
<img src="./assets/images/variedades.png" /> <li>Dise&ntilde;o moderno y minimalista</li>
<div> </ul>
<img src="./assets/images/bandera.svg" /> </div>
DISE&Ntilde;ADO Y FABRICADO EN CHILE <div class="row">
<img src="./assets/images/foto2.jpg" />
<img src="./assets/images/foto3.jpg" />
<img src="./assets/images/foto1.jpg" />
<img src="./assets/images/foto2.jpg" />
</div> </div>
</div> </div>
<div class="column"> </section>
<img src="./assets/images/dimensiones.svg" />
<div> <section id="dimensiones" class="ui simple segment">
Fabricado en pl&aacute;stico de origen vegetal sin derivados del petr&oacute;leo <div class="header">
<span class="bigger">DIMENSIONES</span> y colores
</div>
<div class="images">
<div class="column">
<img src="./assets/images/variedades.png" />
<div>
<img src="./assets/images/bandera.svg" />
DISE&Ntilde;ADO Y FABRICADO EN CHILE
</div>
</div>
<div class="column">
<img src="./assets/images/dimensiones.svg" />
<div>
Fabricado en pl&aacute;stico de origen vegetal sin derivados del petr&oacute;leo
</div>
</div> </div>
</div> </div>
</div> </section>
</section>
<section id="construido" class="ui simple segment"> <section id="construido" class="ui simple segment">
<div class="header"> <div class="header">
CONSTRUIDOS EN IMPRESI&Oacute;N 3D CONSTRUIDOS EN IMPRESI&Oacute;N 3D
</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">

24
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;
@ -786,7 +786,7 @@ body {
.container { .container {
text-align: right; text-align: right;
padding: 0 1rem !important; padding: 0 1rem !important;
i.icons { i.icons {
cursor: pointer; cursor: pointer;
} }

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