Estructuracion
This commit is contained in:
@ -5,18 +5,21 @@ body {
|
||||
font-family: Roboto, sans;
|
||||
}
|
||||
|
||||
$column1: (1030*2/3/16);
|
||||
$column2: (1030/3/16);
|
||||
$column1: (1030*2/3/16-1);
|
||||
$column2: (1030/3/16-1);
|
||||
|
||||
.ui.container {
|
||||
max-width: 1030px;
|
||||
}
|
||||
section>.container {
|
||||
height: 100%;
|
||||
|
||||
&>.column1 {
|
||||
display: inline-block;
|
||||
width: ($column1)+rem;
|
||||
}
|
||||
&>.column2 {
|
||||
display: inline-block;
|
||||
width: ($column2)+rem;
|
||||
}
|
||||
}
|
||||
@ -25,7 +28,7 @@ section>.container {
|
||||
background-image: url('../images/header.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
$header-background: rgba(100, 100, 0, .3);
|
||||
$header-background: rgba(70, 49, 12, .8);
|
||||
background-color: $header-background;
|
||||
color: rgb(255, 255, 255);
|
||||
|
||||
@ -117,11 +120,15 @@ $heights: (
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
height: 9.6875rem;
|
||||
height: (155/16)+rem;
|
||||
width: (188/16)+rem;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.column2 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#seccion2 {
|
||||
@ -129,12 +136,20 @@ $heights: (
|
||||
|
||||
background-image: url('../images/fondo23.png');
|
||||
background-color: rgb(240, 240, 240);
|
||||
|
||||
.column2 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#dimensiones {
|
||||
height: (map.get($heights, "dimensiones"))+rem;
|
||||
|
||||
background-image: url('../images/fondo23.png');
|
||||
|
||||
.column2 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#construido {
|
||||
@ -142,12 +157,20 @@ $heights: (
|
||||
|
||||
background-image: url('../images/fondo4.png');
|
||||
background-color: rgb(100, 200, 255);
|
||||
|
||||
.column2 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#corporativos {
|
||||
height: (map.get($heights, "corporativos"))+rem;
|
||||
|
||||
background-image: url('../images/fondo5.png');
|
||||
|
||||
.column2 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#felices {
|
||||
@ -167,23 +190,23 @@ $heights: (
|
||||
}
|
||||
}
|
||||
|
||||
$column1: 0;
|
||||
$column_height1: 0;
|
||||
$sticky: 0;
|
||||
@each $name, $val in $heights {
|
||||
$sticky: $sticky + $val;
|
||||
@if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' {
|
||||
$column1: $column1 + $val;
|
||||
$column_height1: $column_height1 + $val;
|
||||
}
|
||||
}
|
||||
#sticky_container {
|
||||
position: relative;
|
||||
height: ($column1)+rem;
|
||||
height: ($column_height1)+rem;
|
||||
top: -($sticky)+rem;
|
||||
|
||||
#column {
|
||||
position: absolute;
|
||||
width: (1030*2/3/16)+rem;
|
||||
height: ($column1)+rem;
|
||||
width: ($column1)+rem;
|
||||
height: ($column_height1)+rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
@ -192,13 +215,20 @@ $sticky: 0;
|
||||
float: right;
|
||||
height: (265/16)+rem;
|
||||
width: (310/16)+rem;
|
||||
padding-top: ((265-170-35-16)/16)+rem;
|
||||
margin-left: ($column1)+rem;
|
||||
|
||||
.row:first-child {
|
||||
height: (170/16)+rem;
|
||||
|
||||
.column1 {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
padding-top: (2/16)+rem;
|
||||
width: (310/16*2/3)+rem;
|
||||
|
||||
.linea {
|
||||
margin-bottom: (10/16)+rem;
|
||||
}
|
||||
|
||||
.titulo {
|
||||
font-size: (25/12)+rem;
|
||||
@ -245,6 +275,7 @@ $sticky: 0;
|
||||
border: thin solid rgb(0, 0, 0);
|
||||
text-align: center;
|
||||
padding: .5rem 0.05rem;
|
||||
font-size: (10/12)+rem;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
@ -266,7 +297,12 @@ $sticky: 0;
|
||||
}
|
||||
.column2 {
|
||||
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 {
|
||||
@ -279,5 +315,6 @@ $sticky: 0;
|
||||
}
|
||||
|
||||
.fondo-blanco {
|
||||
float: right;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
@ -57,17 +57,19 @@ section > .container {
|
||||
height: 100%;
|
||||
}
|
||||
section > .container > .column1 {
|
||||
width: 42.9166666667rem;
|
||||
display: inline-block;
|
||||
width: 41.9166666667rem;
|
||||
}
|
||||
section > .container > .column2 {
|
||||
width: 21.4583333333rem;
|
||||
display: inline-block;
|
||||
width: 20.4583333333rem;
|
||||
}
|
||||
|
||||
#header {
|
||||
background-image: url("../images/header.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
background-color: rgba(100, 100, 0, 0.3);
|
||||
background-color: rgba(70, 49, 12, 0.8);
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
@ -140,23 +142,11 @@ section > .container > .column2 {
|
||||
}
|
||||
#seccion1 .column1 .image-container img {
|
||||
height: 9.6875rem;
|
||||
width: 11.75rem;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
#seccion1 .ui.simple.segment {
|
||||
background: none !important;
|
||||
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;
|
||||
#seccion1 .column2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#seccion2 {
|
||||
@ -164,22 +154,34 @@ section > .container > .column2 {
|
||||
background-image: url("../images/fondo23.png");
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
#seccion2 .column2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#dimensiones {
|
||||
height: 27.5rem;
|
||||
background-image: url("../images/fondo23.png");
|
||||
}
|
||||
#dimensiones .column2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#construido {
|
||||
height: 21.875rem;
|
||||
background-image: url("../images/fondo4.png");
|
||||
background-color: #64c8ff;
|
||||
}
|
||||
#construido .column2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#corporativos {
|
||||
height: 25rem;
|
||||
background-image: url("../images/fondo5.png");
|
||||
}
|
||||
#corporativos .column2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#felices {
|
||||
background-image: linear-gradient(#c8c8c8, #c8c8c8);
|
||||
@ -203,7 +205,7 @@ section > .container > .column2 {
|
||||
}
|
||||
#sticky_container #column {
|
||||
position: absolute;
|
||||
width: 42.9166666667rem;
|
||||
width: 41.9166666667rem;
|
||||
height: 101.875rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -213,15 +215,21 @@ section > .container > .column2 {
|
||||
float: right;
|
||||
height: 16.5625rem;
|
||||
width: 19.375rem;
|
||||
padding-top: 2.75rem;
|
||||
margin-left: 41.9166666667rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child {
|
||||
height: 10.625rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
padding-top: 0.125rem;
|
||||
width: 12.9166666667rem;
|
||||
font-size: 1.1666666667rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .linea {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .titulo {
|
||||
font-size: 2.0833333333rem;
|
||||
}
|
||||
@ -264,6 +272,7 @@ section > .container > .column2 {
|
||||
border: thin solid black;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0.05rem;
|
||||
font-size: 0.8333333333rem;
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column1 .input button {
|
||||
background: none;
|
||||
@ -283,7 +292,11 @@ section > .container > .column2 {
|
||||
}
|
||||
#sticky_container .sticky .row:first-child .column2 {
|
||||
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 {
|
||||
border-radius: 0 !important;
|
||||
@ -291,5 +304,6 @@ section > .container > .column2 {
|
||||
}
|
||||
|
||||
.fondo-blanco {
|
||||
float: right;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
2
public/assets/styles/main.min.css
vendored
2
public/assets/styles/main.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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
|
||||
</p>
|
||||
</div>
|
||||
<div class="column2 fondo-blanco"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -72,12 +73,16 @@
|
||||
<div class="column1">
|
||||
<img src="./assets/images/phone-pc.png" />
|
||||
</div>
|
||||
<div class="column2 fondo-blanco"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dimensiones" class="ui simple segment">
|
||||
<div class="ui container">
|
||||
DIMENSIONES
|
||||
<div class="column1">
|
||||
DIMENSIONES
|
||||
</div>
|
||||
<div class="column2 fondo-blanco"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -86,8 +91,7 @@
|
||||
<div class="column1">
|
||||
CONSTRUIDOS EN IMPRESIÓN 3D
|
||||
</div>
|
||||
<div class="column2 fondo-blanco">
|
||||
</div>
|
||||
<div class="column2 fondo-blanco"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -96,7 +100,7 @@
|
||||
<div class="column1">
|
||||
CORPORATIVOS
|
||||
</div>
|
||||
<div class="column2">
|
||||
<div class="column2 fondo-blanco">
|
||||
COTIZA CON NOSOSTROS
|
||||
</div>
|
||||
</div>
|
||||
@ -104,7 +108,10 @@
|
||||
|
||||
<section id="felices" class="ui simple segment">
|
||||
<div class="ui container">
|
||||
CLIENTES FELICES
|
||||
<div class="column1">
|
||||
CLIENTES FELICES
|
||||
</div>
|
||||
<div class="column2 fondo-blanco"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -133,13 +140,13 @@
|
||||
<div class="ui sticky">
|
||||
<div class="row">
|
||||
<div class="column1">
|
||||
<div class="titulo">
|
||||
<div class="titulo linea">
|
||||
STAND
|
||||
</div>
|
||||
<div class="precio">
|
||||
<div class="precio linea">
|
||||
$ 5.990
|
||||
</div>
|
||||
<div class="colores">
|
||||
<div class="colores linea">
|
||||
COLOR
|
||||
<div class="white circle"></div>
|
||||
<div class="black circle"></div>
|
||||
|
||||
Reference in New Issue
Block a user