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

Compare commits

base: ProVM:afa90fb4bc40271908f97258f9de1349c1e6a4e1
Branches Tags
ProVM:develop ProVM:features/grid ProVM:master
...
compare: ProVM:features/grid
Branches Tags
ProVM:develop ProVM:features/grid ProVM:master

1 Commits
afa90fb4bc ... features/g

Author SHA1 Message Date
Aldarien
dde8727363 Intento de cambiar a grilla de semantic 2021-01-05 12:39:01 -03:00
6 changed files with 152 additions and 143 deletions
Expand all files Collapse all files

126
assets/index.html
View File

@ -63,74 +63,85 @@
</div>
</header>
<div class="column1 column" id="column">
<section id="seccion1" class="ui simple segment">
<div class="image-container">
<img src="./assets/images/seccion11.png" />
<img src="./assets/images/seccion12.png" />
<img src="./assets/images/seccion13.png" />
</div>
<div class="paragraph">
<div class="header">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
<div class="ui grid">
<div class="column1 twelve wide column" id="column">
<section id="seccion1" class="ui simple segment">
<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/seccion12.png" />
</div>
</div>
<div class="six wide column">
<div class="ui medium image">
<img src="./assets/images/seccion13.png" />
</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>
</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="paragraph">
<div class="header">
VENTAJAS
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
</div>
<ul>
<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>
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>
<div class="row">
<img src="./assets/images/foto2.jpg" />
<img src="./assets/images/foto3.jpg" />
</section>
<section id="seccion2" class="ui simple segment">
<div class="column1 column">
<img src="./assets/images/foto1.jpg" />
<img src="./assets/images/foto2.jpg" />
</div>
</div>
</section>
<section id="dimensiones" class="ui simple segment">
<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 class="column2 column">
<div class="row">
<div class="header">
VENTAJAS
</div>
<ul>
<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 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 class="column">
<img src="./assets/images/dimensiones.svg" />
<div>
Fabricado en pl&aacute;stico de origen vegetal sin derivados del petr&oacute;leo
</section>
<section id="dimensiones" class="ui simple segment">
<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>
</section>
</section>
<section id="construido" class="ui simple segment">
<div class="header">
CONSTRUIDOS EN IMPRESI&Oacute;N 3D
</div>
</section>
</div>
<div class="column2 column fondo-blanco">
<section id="construido" class="ui simple segment">
<div class="header">
CONSTRUIDOS EN IMPRESI&Oacute;N 3D
</div>
</section>
</div>
<div class="column2 four wide column fondo-blanco">
<div class="ui sticky">
<form class="ui form" name="form-sticky">
<div class="row">
@ -170,6 +181,7 @@
</form>
</div>
</div>
</div>
<section id="corporativos" class="ui simple segment">
<div class="column1 column">

24
assets/sass/main.scss
View File

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

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

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