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

Estructuracion

Browse Source
This commit is contained in:
Aldarien
2020-12-27 10:17:44 -03:00
parent d459ae5052
commit ec238c5ca5
5 changed files with 100 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
assets/sass/main.scss
View File

@ -5,18 +5,21 @@ body {
font-family: Roboto, sans; font-family: Roboto, sans;
} }
$column1: (1030*2/3/16); $column1: (1030*2/3/16-1);
$column2: (1030/3/16); $column2: (1030/3/16-1);
.ui.container { .ui.container {
max-width: 1030px; max-width: 1030px;
} }
section>.container { section>.container {
height: 100%; height: 100%;
&>.column1 { &>.column1 {
display: inline-block;
width: ($column1)+rem; width: ($column1)+rem;
} }
&>.column2 { &>.column2 {
display: inline-block;
width: ($column2)+rem; width: ($column2)+rem;
} }
} }
@ -25,7 +28,7 @@ section>.container {
background-image: url('../images/header.png'); background-image: url('../images/header.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto; background-size: auto;
$header-background: rgba(100, 100, 0, .3); $header-background: rgba(70, 49, 12, .8);
background-color: $header-background; background-color: $header-background;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
@ -117,11 +120,15 @@ $heights: (
justify-content: space-between; justify-content: space-between;
img { img {
height: 9.6875rem; height: (155/16)+rem;
width: (188/16)+rem;
margin-top: 5rem; margin-top: 5rem;
} }
} }
} }
.column2 {
height: 100%;
}
} }
#seccion2 { #seccion2 {
@ -129,12 +136,20 @@ $heights: (
background-image: url('../images/fondo23.png'); background-image: url('../images/fondo23.png');
background-color: rgb(240, 240, 240); background-color: rgb(240, 240, 240);
.column2 {
height: 100%;
}
} }
#dimensiones { #dimensiones {
height: (map.get($heights, "dimensiones"))+rem; height: (map.get($heights, "dimensiones"))+rem;
background-image: url('../images/fondo23.png'); background-image: url('../images/fondo23.png');
.column2 {
height: 100%;
}
} }
#construido { #construido {
@ -142,12 +157,20 @@ $heights: (
background-image: url('../images/fondo4.png'); background-image: url('../images/fondo4.png');
background-color: rgb(100, 200, 255); background-color: rgb(100, 200, 255);
.column2 {
height: 100%;
}
} }
#corporativos { #corporativos {
height: (map.get($heights, "corporativos"))+rem; height: (map.get($heights, "corporativos"))+rem;
background-image: url('../images/fondo5.png'); background-image: url('../images/fondo5.png');
.column2 {
height: 100%;
}
} }
#felices { #felices {
@ -167,23 +190,23 @@ $heights: (
} }
} }
$column1: 0; $column_height1: 0;
$sticky: 0; $sticky: 0;
@each $name, $val in $heights { @each $name, $val in $heights {
$sticky: $sticky + $val; $sticky: $sticky + $val;
@if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' { @if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' {
$column1: $column1 + $val; $column_height1: $column_height1 + $val;
} }
} }
#sticky_container { #sticky_container {
position: relative; position: relative;
height: ($column1)+rem; height: ($column_height1)+rem;
top: -($sticky)+rem; top: -($sticky)+rem;
#column { #column {
position: absolute; position: absolute;
width: (1030*2/3/16)+rem; width: ($column1)+rem;
height: ($column1)+rem; height: ($column_height1)+rem;
top: 0; top: 0;
left: 0; left: 0;
padding: 0; padding: 0;
@ -192,13 +215,20 @@ $sticky: 0;
float: right; float: right;
height: (265/16)+rem; height: (265/16)+rem;
width: (310/16)+rem; width: (310/16)+rem;
padding-top: ((265-170-35-16)/16)+rem; margin-left: ($column1)+rem;
.row:first-child { .row:first-child {
height: (170/16)+rem; height: (170/16)+rem;
.column1 { .column1 {
display: inline-block; display: inline-block;
vertical-align: bottom;
padding-top: (2/16)+rem;
width: (310/16*2/3)+rem;
.linea {
margin-bottom: (10/16)+rem;
}
.titulo { .titulo {
font-size: (25/12)+rem; font-size: (25/12)+rem;
@ -245,6 +275,7 @@ $sticky: 0;
border: thin solid rgb(0, 0, 0); border: thin solid rgb(0, 0, 0);
text-align: center; text-align: center;
padding: .5rem 0.05rem; padding: .5rem 0.05rem;
font-size: (10/12)+rem;
button { button {
background: none; background: none;
@ -266,7 +297,12 @@ $sticky: 0;
} }
.column2 { .column2 {
display: inline-block; display: inline-block;
width: (170/16)+rem; width: ((310/16-1)/3)+rem;
img {
width: (110/16)+rem;
height: (170/16)+rem;
}
} }
} }
.row:last-child { .row:last-child {
@ -279,5 +315,6 @@ $sticky: 0;
} }
.fondo-blanco { .fondo-blanco {
float: right;
background-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .5);
} }

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

@ -57,17 +57,19 @@ section > .container {
height: 100%; height: 100%;
} }
section > .container > .column1 { section > .container > .column1 {
width: 42.9166666667rem; display: inline-block;
width: 41.9166666667rem;
} }
section > .container > .column2 { section > .container > .column2 {
width: 21.4583333333rem; display: inline-block;
width: 20.4583333333rem;
} }
#header { #header {
background-image: url("../images/header.png"); background-image: url("../images/header.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto; background-size: auto;
background-color: rgba(100, 100, 0, 0.3); background-color: rgba(70, 49, 12, 0.8);
color: white; color: white;
width: 100%; width: 100%;
} }
@ -140,23 +142,11 @@ section > .container > .column2 {
} }
#seccion1 .column1 .image-container img { #seccion1 .column1 .image-container img {
height: 9.6875rem; height: 9.6875rem;
width: 11.75rem;
margin-top: 5rem; margin-top: 5rem;
} }
#seccion1 .ui.simple.segment { #seccion1 .column2 {
background: none !important; height: 100%;
margin-top: 2rem !important;
font-size: 1.1667rem;
}
#seccion1 .ui.simple.segment .header {
font-size: 1.833rem;
margin-bottom: 1rem;
}
#seccion1 .grid .column, #seccion1 .grid .column .column {
padding-top: 0;
}
#seccion1 img {
height: 9.6875rem;
margin-top: 5rem;
} }
#seccion2 { #seccion2 {
@ -164,22 +154,34 @@ section > .container > .column2 {
background-image: url("../images/fondo23.png"); background-image: url("../images/fondo23.png");
background-color: #f0f0f0; background-color: #f0f0f0;
} }
#seccion2 .column2 {
height: 100%;
}
#dimensiones { #dimensiones {
height: 27.5rem; height: 27.5rem;
background-image: url("../images/fondo23.png"); background-image: url("../images/fondo23.png");
} }
#dimensiones .column2 {
height: 100%;
}
#construido { #construido {
height: 21.875rem; height: 21.875rem;
background-image: url("../images/fondo4.png"); background-image: url("../images/fondo4.png");
background-color: #64c8ff; background-color: #64c8ff;
} }
#construido .column2 {
height: 100%;
}
#corporativos { #corporativos {
height: 25rem; height: 25rem;
background-image: url("../images/fondo5.png"); background-image: url("../images/fondo5.png");
} }
#corporativos .column2 {
height: 100%;
}
#felices { #felices {
background-image: linear-gradient(#c8c8c8, #c8c8c8); background-image: linear-gradient(#c8c8c8, #c8c8c8);
@ -203,7 +205,7 @@ section > .container > .column2 {
} }
#sticky_container #column { #sticky_container #column {
position: absolute; position: absolute;
width: 42.9166666667rem; width: 41.9166666667rem;
height: 101.875rem; height: 101.875rem;
top: 0; top: 0;
left: 0; left: 0;
@ -213,15 +215,21 @@ section > .container > .column2 {
float: right; float: right;
height: 16.5625rem; height: 16.5625rem;
width: 19.375rem; width: 19.375rem;
padding-top: 2.75rem; margin-left: 41.9166666667rem;
} }
#sticky_container .sticky .row:first-child { #sticky_container .sticky .row:first-child {
height: 10.625rem; height: 10.625rem;
} }
#sticky_container .sticky .row:first-child .column1 { #sticky_container .sticky .row:first-child .column1 {
display: inline-block; display: inline-block;
vertical-align: bottom;
padding-top: 0.125rem;
width: 12.9166666667rem;
font-size: 1.1666666667rem; font-size: 1.1666666667rem;
} }
#sticky_container .sticky .row:first-child .column1 .linea {
margin-bottom: 0.625rem;
}
#sticky_container .sticky .row:first-child .column1 .titulo { #sticky_container .sticky .row:first-child .column1 .titulo {
font-size: 2.0833333333rem; font-size: 2.0833333333rem;
} }
@ -264,6 +272,7 @@ section > .container > .column2 {
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;
} }
#sticky_container .sticky .row:first-child .column1 .input button { #sticky_container .sticky .row:first-child .column1 .input button {
background: none; background: none;
@ -283,7 +292,11 @@ section > .container > .column2 {
} }
#sticky_container .sticky .row:first-child .column2 { #sticky_container .sticky .row:first-child .column2 {
display: inline-block; display: inline-block;
width: 10.625rem; width: 6.125rem;
}
#sticky_container .sticky .row:first-child .column2 img {
width: 6.875rem;
height: 10.625rem;
} }
#sticky_container .sticky .row:last-child .button { #sticky_container .sticky .row:last-child .button {
border-radius: 0 !important; border-radius: 0 !important;
@ -291,5 +304,6 @@ section > .container > .column2 {
} }
.fondo-blanco { .fondo-blanco {
float: right;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }

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

19
public/index.html
View File

@ -64,6 +64,7 @@
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 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
</p> </p>
</div> </div>
<div class="column2 fondo-blanco"></div>
</div> </div>
</section> </section>
@ -72,13 +73,17 @@
<div class="column1"> <div class="column1">
<img src="./assets/images/phone-pc.png" /> <img src="./assets/images/phone-pc.png" />
</div> </div>
<div class="column2 fondo-blanco"></div>
</div> </div>
</section> </section>
<section id="dimensiones" class="ui simple segment"> <section id="dimensiones" class="ui simple segment">
<div class="ui container"> <div class="ui container">
<div class="column1">
DIMENSIONES DIMENSIONES
</div> </div>
<div class="column2 fondo-blanco"></div>
</div>
</section> </section>
<section id="construido" class="ui simple segment"> <section id="construido" class="ui simple segment">
@ -86,8 +91,7 @@
<div class="column1"> <div class="column1">
CONSTRUIDOS EN IMPRESI&Oacute;N 3D CONSTRUIDOS EN IMPRESI&Oacute;N 3D
</div> </div>
<div class="column2 fondo-blanco"> <div class="column2 fondo-blanco"></div>
</div>
</div> </div>
</section> </section>
@ -96,7 +100,7 @@
<div class="column1"> <div class="column1">
CORPORATIVOS CORPORATIVOS
</div> </div>
<div class="column2"> <div class="column2 fondo-blanco">
COTIZA CON NOSOSTROS COTIZA CON NOSOSTROS
</div> </div>
</div> </div>
@ -104,8 +108,11 @@
<section id="felices" class="ui simple segment"> <section id="felices" class="ui simple segment">
<div class="ui container"> <div class="ui container">
<div class="column1">
CLIENTES FELICES CLIENTES FELICES
</div> </div>
<div class="column2 fondo-blanco"></div>
</div>
</section> </section>
<section id="formulario" class="ui simple segment"> <section id="formulario" class="ui simple segment">
@ -133,13 +140,13 @@
<div class="ui sticky"> <div class="ui sticky">
<div class="row"> <div class="row">
<div class="column1"> <div class="column1">
<div class="titulo"> <div class="titulo linea">
STAND STAND
</div> </div>
<div class="precio"> <div class="precio linea">
$ 5.990 $ 5.990
</div> </div>
<div class="colores"> <div class="colores linea">
COLOR COLOR
<div class="white circle"></div> <div class="white circle"></div>
<div class="black circle"></div> <div class="black circle"></div>