From ec238c5ca5ae9f84c8dd17c867e164ae98f60f11 Mon Sep 17 00:00:00 2001 From: Aldarien Date: Sun, 27 Dec 2020 10:17:44 -0300 Subject: [PATCH] Estructuracion --- assets/sass/main.scss | 59 ++++++++++++++++++---- public/assets/styles/main.css | 56 ++++++++++++-------- public/assets/styles/main.min.css | 2 +- public/assets/styles/maps/main.min.css.map | 2 +- public/index.html | 23 ++++++--- 5 files changed, 100 insertions(+), 42 deletions(-) diff --git a/assets/sass/main.scss b/assets/sass/main.scss index f8f1151..6a06794 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -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); } diff --git a/public/assets/styles/main.css b/public/assets/styles/main.css index 88bee71..4d5f71d 100644 --- a/public/assets/styles/main.css +++ b/public/assets/styles/main.css @@ -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); } \ No newline at end of file diff --git a/public/assets/styles/main.min.css b/public/assets/styles/main.min.css index e7ea6a9..8f2db11 100644 --- a/public/assets/styles/main.min.css +++ b/public/assets/styles/main.min.css @@ -1,2 +1,2 @@ -*,*:before,*:after{box-sizing:border-box}html,body,div,span,object,iframe,figure,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,em,img,small,strike,strong,sub,sup,tt,b,u,i,ol,ul,li,fieldset,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,canvas,embed,footer,header,nav,section,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}footer,header,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input{-webkit-appearance:none;border-radius:0}body{font-family:Roboto,sans}.ui.container{max-width:1030px}section>.container{height:100%}section>.container>.column1{width:42.9166666667rem}section>.container>.column2{width:21.4583333333rem}#header{background-image:url("../images/header.png");background-repeat:no-repeat;background-size:auto;background-color:rgba(100,100,0,.3);color:#fff;width:100%}#header>.container{height:400px}#header .ui.menu{border:none !important;background:none !important;box-shadow:none !important;margin:0 !important}#header .ui.menu .dropdown .menu{background:none !important;border:none !important;box-shadow:none !important}#header .ui.menu .item{color:inherit !important;font-size:2rem}#header .ui.menu .item .shopping.cart div{position:relative;color:#000;display:inline-block;top:-2.6rem;left:.2rem;font-size:1rem;font-family:Roboto,sans}#header .logo{padding:0 !important;margin:0 !important}#header .logo img{width:50%}#header .logo .frase1{font-size:1.5rem}#header .logo .frase2{font-size:1rem}.simple.segment{border:none !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important;padding:0 !important}.simple.segment>.ui.grid{height:100%}#seccion1{background-image:linear-gradient(#c8c8c8, #c8c8c8);background-position:left 6.3rem;background-size:100% 8.375rem;background-repeat:no-repeat;height:25rem;margin-bottom:2rem !important}#seccion1 .column1{width:42.9166666667rem}#seccion1 .column1 .image-container{display:flex;justify-content:space-between}#seccion1 .column1 .image-container img{height:9.6875rem;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}#seccion2{height:27.5rem;background-image:url("../images/fondo23.png");background-color:#f0f0f0}#dimensiones{height:27.5rem;background-image:url("../images/fondo23.png")}#construido{height:21.875rem;background-image:url("../images/fondo4.png");background-color:#64c8ff}#corporativos{height:25rem;background-image:url("../images/fondo5.png")}#felices{background-image:linear-gradient(#c8c8c8, #c8c8c8);background-position:left 3rem;background-size:100% 5rem;background-repeat:no-repeat;height:21.875rem}#formulario{height:30rem}#formulario .whatsapp-link{color:inherit}#sticky_container{position:relative;height:101.875rem;top:-178.75rem}#sticky_container #column{position:absolute;width:42.9166666667rem;height:101.875rem;top:0;left:0;padding:0}#sticky_container .sticky{float:right;height:16.5625rem;width:19.375rem;padding-top:2.75rem}#sticky_container .sticky .row:first-child{height:10.625rem}#sticky_container .sticky .row:first-child .column1{display:inline-block;font-size:1.1666666667rem}#sticky_container .sticky .row:first-child .column1 .titulo{font-size:2.0833333333rem}#sticky_container .sticky .row:first-child .column1 .precio{font-size:1.3333333333rem}#sticky_container .sticky .row:first-child .column1 .colores{vertical-align:center}#sticky_container .sticky .row:first-child .column1 .colores .white{border:thin solid #000;background-color:#fff}#sticky_container .sticky .row:first-child .column1 .colores .black{background-color:#000}#sticky_container .sticky .row:first-child .column1 .colores .blue{background-color:blue}#sticky_container .sticky .row:first-child .column1 .colores .green{background-color:lime}#sticky_container .sticky .row:first-child .column1 .colores .yellow{background-color:#ff0}#sticky_container .sticky .row:first-child .column1 .colores .orange{background-color:#ff8200}#sticky_container .sticky .row:first-child .column1 .colores .red{background-color:red}#sticky_container .sticky .row:first-child .column1 .colores .circle{display:inline-block;width:1rem;height:1rem;border-radius:8000px}#sticky_container .sticky .row:first-child .column1 .input{width:4.5rem;border:thin solid #000;text-align:center;padding:.5rem .05rem}#sticky_container .sticky .row:first-child .column1 .input button{background:none;border:none;width:1rem;margin:0;padding:0;cursor:pointer}#sticky_container .sticky .row:first-child .column1 .input input{width:2rem;background:none;margin:0;border:0;padding:0;text-align:right}#sticky_container .sticky .row:first-child .column2{display:inline-block;width:10.625rem}#sticky_container .sticky .row:last-child .button{border-radius:0 !important;width:100%}.fondo-blanco{background-color:rgba(255,255,255,.5)} +*,*:before,*:after{box-sizing:border-box}html,body,div,span,object,iframe,figure,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,em,img,small,strike,strong,sub,sup,tt,b,u,i,ol,ul,li,fieldset,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,canvas,embed,footer,header,nav,section,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}footer,header,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input{-webkit-appearance:none;border-radius:0}body{font-family:Roboto,sans}.ui.container{max-width:1030px}section>.container{height:100%}section>.container>.column1{display:inline-block;width:41.9166666667rem}section>.container>.column2{display:inline-block;width:20.4583333333rem}#header{background-image:url("../images/header.png");background-repeat:no-repeat;background-size:auto;background-color:rgba(70,49,12,.8);color:#fff;width:100%}#header>.container{height:400px}#header .ui.menu{border:none !important;background:none !important;box-shadow:none !important;margin:0 !important}#header .ui.menu .dropdown .menu{background:none !important;border:none !important;box-shadow:none !important}#header .ui.menu .item{color:inherit !important;font-size:2rem}#header .ui.menu .item .shopping.cart div{position:relative;color:#000;display:inline-block;top:-2.6rem;left:.2rem;font-size:1rem;font-family:Roboto,sans}#header .logo{padding:0 !important;margin:0 !important}#header .logo img{width:50%}#header .logo .frase1{font-size:1.5rem}#header .logo .frase2{font-size:1rem}.simple.segment{border:none !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important;padding:0 !important}.simple.segment>.ui.grid{height:100%}#seccion1{background-image:linear-gradient(#c8c8c8, #c8c8c8);background-position:left 6.3rem;background-size:100% 8.375rem;background-repeat:no-repeat;height:25rem;margin-bottom:2rem !important}#seccion1 .column1{width:42.9166666667rem}#seccion1 .column1 .image-container{display:flex;justify-content:space-between}#seccion1 .column1 .image-container img{height:9.6875rem;width:11.75rem;margin-top:5rem}#seccion1 .column2{height:100%}#seccion2{height:27.5rem;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);background-position:left 3rem;background-size:100% 5rem;background-repeat:no-repeat;height:21.875rem}#formulario{height:30rem}#formulario .whatsapp-link{color:inherit}#sticky_container{position:relative;height:101.875rem;top:-178.75rem}#sticky_container #column{position:absolute;width:41.9166666667rem;height:101.875rem;top:0;left:0;padding:0}#sticky_container .sticky{float:right;height:16.5625rem;width:19.375rem;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:.125rem;width:12.9166666667rem;font-size:1.1666666667rem}#sticky_container .sticky .row:first-child .column1 .linea{margin-bottom:.625rem}#sticky_container .sticky .row:first-child .column1 .titulo{font-size:2.0833333333rem}#sticky_container .sticky .row:first-child .column1 .precio{font-size:1.3333333333rem}#sticky_container .sticky .row:first-child .column1 .colores{vertical-align:center}#sticky_container .sticky .row:first-child .column1 .colores .white{border:thin solid #000;background-color:#fff}#sticky_container .sticky .row:first-child .column1 .colores .black{background-color:#000}#sticky_container .sticky .row:first-child .column1 .colores .blue{background-color:blue}#sticky_container .sticky .row:first-child .column1 .colores .green{background-color:lime}#sticky_container .sticky .row:first-child .column1 .colores .yellow{background-color:#ff0}#sticky_container .sticky .row:first-child .column1 .colores .orange{background-color:#ff8200}#sticky_container .sticky .row:first-child .column1 .colores .red{background-color:red}#sticky_container .sticky .row:first-child .column1 .colores .circle{display:inline-block;width:1rem;height:1rem;border-radius:8000px}#sticky_container .sticky .row:first-child .column1 .input{width:4.5rem;border:thin solid #000;text-align:center;padding:.5rem .05rem;font-size:.8333333333rem}#sticky_container .sticky .row:first-child .column1 .input button{background:none;border:none;width:1rem;margin:0;padding:0;cursor:pointer}#sticky_container .sticky .row:first-child .column1 .input input{width:2rem;background:none;margin:0;border:0;padding:0;text-align:right}#sticky_container .sticky .row:first-child .column2{display:inline-block;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;width:100%}.fondo-blanco{float:right;background-color:rgba(255,255,255,.5)} /*# sourceMappingURL=maps/main.min.css.map */ diff --git a/public/assets/styles/maps/main.min.css.map b/public/assets/styles/maps/main.min.css.map index 1aa2bb5..113eb12 100644 --- a/public/assets/styles/maps/main.min.css.map +++ b/public/assets/styles/maps/main.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.css"],"names":[],"mappings":"AAAA,mBACE,sBAGF,sPACE,SACA,UACA,SACA,eACA,aACA,wBACA,kCACA,mCACA,sBAGF,+BACE,cAGF,KACE,cAGF,MACE,gBAGF,aACE,YAGF,oDACE,WACA,aAGF,MACE,yBACA,iBAGF,MACE,wBACA,gBAGF,KACE,wBAGF,cACE,iBAGF,mBACE,YAEF,4BACE,uBAEF,4BACE,uBAGF,QACE,6CACA,4BACA,qBACA,oCACA,WACA,WAEF,mBACE,aAEF,iBACE,uBACA,2BACA,2BACA,oBAEF,iCACE,2BACA,uBACA,2BAEF,uBACE,yBACA,eAEF,0CACE,kBACA,WACA,qBACA,YACA,WACA,eACA,wBAEF,cACE,qBACA,oBAEF,kBACE,UAEF,sBACE,iBAEF,sBACE,eAGF,gBACE,uBACA,2BACA,2BACA,oBACA,qBAEF,yBACE,YAGF,UACE,mDACA,gCACA,8BACA,4BACA,aACA,8BAEF,mBACE,uBAEF,oCACE,aACA,8BAEF,wCACE,iBACA,gBAEF,6BACE,2BACA,2BACA,oBAEF,qCACE,mBACA,mBAEF,wDACE,cAEF,cACE,iBACA,gBAGF,UACE,eACA,8CACA,yBAGF,aACE,eACA,8CAGF,YACE,iBACA,6CACA,yBAGF,cACE,aACA,6CAGF,SACE,mDACA,8BACA,0BACA,4BACA,iBAGF,YACE,aAEF,2BACE,cAGF,kBACE,kBACA,kBACA,eAEF,0BACE,kBACA,uBACA,kBACA,MACA,OACA,UAEF,0BACE,YACA,kBACA,gBACA,oBAEF,2CACE,iBAEF,oDACE,qBACA,0BAEF,4DACE,0BAEF,4DACE,0BAEF,6DACE,sBAEF,oEACE,uBACA,sBAEF,oEACE,sBAEF,mEACE,sBAEF,oEACE,sBAEF,qEACE,sBAEF,qEACE,yBAEF,kEACE,qBAEF,qEACE,qBACA,WACA,YACA,qBAEF,2DACE,aACA,uBACA,kBACA,qBAEF,kEACE,gBACA,YACA,WACA,SACA,UACA,eAEF,iEACE,WACA,gBACA,SACA,SACA,UACA,iBAEF,oDACE,qBACA,gBAEF,kDACE,2BACA,WAGF,cACE","file":"../main.min.css","sourcesContent":["*, *:before, *:after {\n box-sizing: border-box;\n}\n\nhtml, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n text-size-adjust: none;\n}\n\nfooter, header, nav, section, main {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol, ul {\n list-style: none;\n}\n\nblockquote, q {\n quotes: none;\n}\n\nblockquote:before, blockquote:after, q:before, q:after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ninput {\n -webkit-appearance: none;\n border-radius: 0;\n}\n\nbody {\n font-family: Roboto, sans;\n}\n\n.ui.container {\n max-width: 1030px;\n}\n\nsection > .container {\n height: 100%;\n}\nsection > .container > .column1 {\n width: 42.9166666667rem;\n}\nsection > .container > .column2 {\n width: 21.4583333333rem;\n}\n\n#header {\n background-image: url(\"../images/header.png\");\n background-repeat: no-repeat;\n background-size: auto;\n background-color: rgba(100, 100, 0, 0.3);\n color: white;\n width: 100%;\n}\n#header > .container {\n height: 400px;\n}\n#header .ui.menu {\n border: none !important;\n background: none !important;\n box-shadow: none !important;\n margin: 0 !important;\n}\n#header .ui.menu .dropdown .menu {\n background: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n#header .ui.menu .item {\n color: inherit !important;\n font-size: 2rem;\n}\n#header .ui.menu .item .shopping.cart div {\n position: relative;\n color: black;\n display: inline-block;\n top: -2.6rem;\n left: 0.2rem;\n font-size: 1rem;\n font-family: Roboto, sans;\n}\n#header .logo {\n padding: 0 !important;\n margin: 0 !important;\n}\n#header .logo img {\n width: 50%;\n}\n#header .logo .frase1 {\n font-size: 1.5rem;\n}\n#header .logo .frase2 {\n font-size: 1rem;\n}\n\n.simple.segment {\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n.simple.segment > .ui.grid {\n height: 100%;\n}\n\n#seccion1 {\n background-image: linear-gradient(#c8c8c8, #c8c8c8);\n background-position: left 6.3rem;\n background-size: 100% 8.375rem;\n background-repeat: no-repeat;\n height: 25rem;\n margin-bottom: 2rem !important;\n}\n#seccion1 .column1 {\n width: 42.9166666667rem;\n}\n#seccion1 .column1 .image-container {\n display: flex;\n justify-content: space-between;\n}\n#seccion1 .column1 .image-container img {\n height: 9.6875rem;\n margin-top: 5rem;\n}\n#seccion1 .ui.simple.segment {\n background: none !important;\n margin-top: 2rem !important;\n font-size: 1.1667rem;\n}\n#seccion1 .ui.simple.segment .header {\n font-size: 1.833rem;\n margin-bottom: 1rem;\n}\n#seccion1 .grid .column, #seccion1 .grid .column .column {\n padding-top: 0;\n}\n#seccion1 img {\n height: 9.6875rem;\n margin-top: 5rem;\n}\n\n#seccion2 {\n height: 27.5rem;\n background-image: url(\"../images/fondo23.png\");\n background-color: #f0f0f0;\n}\n\n#dimensiones {\n height: 27.5rem;\n background-image: url(\"../images/fondo23.png\");\n}\n\n#construido {\n height: 21.875rem;\n background-image: url(\"../images/fondo4.png\");\n background-color: #64c8ff;\n}\n\n#corporativos {\n height: 25rem;\n background-image: url(\"../images/fondo5.png\");\n}\n\n#felices {\n background-image: linear-gradient(#c8c8c8, #c8c8c8);\n background-position: left 3rem;\n background-size: 100% 5rem;\n background-repeat: no-repeat;\n height: 21.875rem;\n}\n\n#formulario {\n height: 30rem;\n}\n#formulario .whatsapp-link {\n color: inherit;\n}\n\n#sticky_container {\n position: relative;\n height: 101.875rem;\n top: -178.75rem;\n}\n#sticky_container #column {\n position: absolute;\n width: 42.9166666667rem;\n height: 101.875rem;\n top: 0;\n left: 0;\n padding: 0;\n}\n#sticky_container .sticky {\n float: right;\n height: 16.5625rem;\n width: 19.375rem;\n padding-top: 2.75rem;\n}\n#sticky_container .sticky .row:first-child {\n height: 10.625rem;\n}\n#sticky_container .sticky .row:first-child .column1 {\n display: inline-block;\n font-size: 1.1666666667rem;\n}\n#sticky_container .sticky .row:first-child .column1 .titulo {\n font-size: 2.0833333333rem;\n}\n#sticky_container .sticky .row:first-child .column1 .precio {\n font-size: 1.3333333333rem;\n}\n#sticky_container .sticky .row:first-child .column1 .colores {\n vertical-align: center;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .white {\n border: thin solid black;\n background-color: white;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .black {\n background-color: black;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .blue {\n background-color: blue;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .green {\n background-color: lime;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .yellow {\n background-color: yellow;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .orange {\n background-color: #ff8200;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .red {\n background-color: red;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .circle {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border-radius: 8000px;\n}\n#sticky_container .sticky .row:first-child .column1 .input {\n width: 4.5rem;\n border: thin solid black;\n text-align: center;\n padding: 0.5rem 0.05rem;\n}\n#sticky_container .sticky .row:first-child .column1 .input button {\n background: none;\n border: none;\n width: 1rem;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n#sticky_container .sticky .row:first-child .column1 .input input {\n width: 2rem;\n background: none;\n margin: 0;\n border: 0;\n padding: 0;\n text-align: right;\n}\n#sticky_container .sticky .row:first-child .column2 {\n display: inline-block;\n width: 10.625rem;\n}\n#sticky_container .sticky .row:last-child .button {\n border-radius: 0 !important;\n width: 100%;\n}\n\n.fondo-blanco {\n background-color: rgba(255, 255, 255, 0.5);\n}"]} \ No newline at end of file +{"version":3,"sources":["main.css"],"names":[],"mappings":"AAAA,mBACE,sBAGF,sPACE,SACA,UACA,SACA,eACA,aACA,wBACA,kCACA,mCACA,sBAGF,+BACE,cAGF,KACE,cAGF,MACE,gBAGF,aACE,YAGF,oDACE,WACA,aAGF,MACE,yBACA,iBAGF,MACE,wBACA,gBAGF,KACE,wBAGF,cACE,iBAGF,mBACE,YAEF,4BACE,qBACA,uBAEF,4BACE,qBACA,uBAGF,QACE,6CACA,4BACA,qBACA,mCACA,WACA,WAEF,mBACE,aAEF,iBACE,uBACA,2BACA,2BACA,oBAEF,iCACE,2BACA,uBACA,2BAEF,uBACE,yBACA,eAEF,0CACE,kBACA,WACA,qBACA,YACA,WACA,eACA,wBAEF,cACE,qBACA,oBAEF,kBACE,UAEF,sBACE,iBAEF,sBACE,eAGF,gBACE,uBACA,2BACA,2BACA,oBACA,qBAEF,yBACE,YAGF,UACE,mDACA,gCACA,8BACA,4BACA,aACA,8BAEF,mBACE,uBAEF,oCACE,aACA,8BAEF,wCACE,iBACA,eACA,gBAEF,mBACE,YAGF,UACE,eACA,8CACA,yBAEF,mBACE,YAGF,aACE,eACA,8CAEF,sBACE,YAGF,YACE,iBACA,6CACA,yBAEF,qBACE,YAGF,cACE,aACA,6CAEF,uBACE,YAGF,SACE,mDACA,8BACA,0BACA,4BACA,iBAGF,YACE,aAEF,2BACE,cAGF,kBACE,kBACA,kBACA,eAEF,0BACE,kBACA,uBACA,kBACA,MACA,OACA,UAEF,0BACE,YACA,kBACA,gBACA,6BAEF,2CACE,iBAEF,oDACE,qBACA,sBACA,oBACA,uBACA,0BAEF,2DACE,sBAEF,4DACE,0BAEF,4DACE,0BAEF,6DACE,sBAEF,oEACE,uBACA,sBAEF,oEACE,sBAEF,mEACE,sBAEF,oEACE,sBAEF,qEACE,sBAEF,qEACE,yBAEF,kEACE,qBAEF,qEACE,qBACA,WACA,YACA,qBAEF,2DACE,aACA,uBACA,kBACA,qBACA,yBAEF,kEACE,gBACA,YACA,WACA,SACA,UACA,eAEF,iEACE,WACA,gBACA,SACA,SACA,UACA,iBAEF,oDACE,qBACA,eAEF,wDACE,eACA,iBAEF,kDACE,2BACA,WAGF,cACE,YACA","file":"../main.min.css","sourcesContent":["*, *:before, *:after {\n box-sizing: border-box;\n}\n\nhtml, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n text-rendering: optimizeLegibility;\n -webkit-font-smoothing: antialiased;\n text-size-adjust: none;\n}\n\nfooter, header, nav, section, main {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol, ul {\n list-style: none;\n}\n\nblockquote, q {\n quotes: none;\n}\n\nblockquote:before, blockquote:after, q:before, q:after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ninput {\n -webkit-appearance: none;\n border-radius: 0;\n}\n\nbody {\n font-family: Roboto, sans;\n}\n\n.ui.container {\n max-width: 1030px;\n}\n\nsection > .container {\n height: 100%;\n}\nsection > .container > .column1 {\n display: inline-block;\n width: 41.9166666667rem;\n}\nsection > .container > .column2 {\n display: inline-block;\n width: 20.4583333333rem;\n}\n\n#header {\n background-image: url(\"../images/header.png\");\n background-repeat: no-repeat;\n background-size: auto;\n background-color: rgba(70, 49, 12, 0.8);\n color: white;\n width: 100%;\n}\n#header > .container {\n height: 400px;\n}\n#header .ui.menu {\n border: none !important;\n background: none !important;\n box-shadow: none !important;\n margin: 0 !important;\n}\n#header .ui.menu .dropdown .menu {\n background: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n#header .ui.menu .item {\n color: inherit !important;\n font-size: 2rem;\n}\n#header .ui.menu .item .shopping.cart div {\n position: relative;\n color: black;\n display: inline-block;\n top: -2.6rem;\n left: 0.2rem;\n font-size: 1rem;\n font-family: Roboto, sans;\n}\n#header .logo {\n padding: 0 !important;\n margin: 0 !important;\n}\n#header .logo img {\n width: 50%;\n}\n#header .logo .frase1 {\n font-size: 1.5rem;\n}\n#header .logo .frase2 {\n font-size: 1rem;\n}\n\n.simple.segment {\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n margin: 0 !important;\n padding: 0 !important;\n}\n.simple.segment > .ui.grid {\n height: 100%;\n}\n\n#seccion1 {\n background-image: linear-gradient(#c8c8c8, #c8c8c8);\n background-position: left 6.3rem;\n background-size: 100% 8.375rem;\n background-repeat: no-repeat;\n height: 25rem;\n margin-bottom: 2rem !important;\n}\n#seccion1 .column1 {\n width: 42.9166666667rem;\n}\n#seccion1 .column1 .image-container {\n display: flex;\n justify-content: space-between;\n}\n#seccion1 .column1 .image-container img {\n height: 9.6875rem;\n width: 11.75rem;\n margin-top: 5rem;\n}\n#seccion1 .column2 {\n height: 100%;\n}\n\n#seccion2 {\n height: 27.5rem;\n background-image: url(\"../images/fondo23.png\");\n background-color: #f0f0f0;\n}\n#seccion2 .column2 {\n height: 100%;\n}\n\n#dimensiones {\n height: 27.5rem;\n background-image: url(\"../images/fondo23.png\");\n}\n#dimensiones .column2 {\n height: 100%;\n}\n\n#construido {\n height: 21.875rem;\n background-image: url(\"../images/fondo4.png\");\n background-color: #64c8ff;\n}\n#construido .column2 {\n height: 100%;\n}\n\n#corporativos {\n height: 25rem;\n background-image: url(\"../images/fondo5.png\");\n}\n#corporativos .column2 {\n height: 100%;\n}\n\n#felices {\n background-image: linear-gradient(#c8c8c8, #c8c8c8);\n background-position: left 3rem;\n background-size: 100% 5rem;\n background-repeat: no-repeat;\n height: 21.875rem;\n}\n\n#formulario {\n height: 30rem;\n}\n#formulario .whatsapp-link {\n color: inherit;\n}\n\n#sticky_container {\n position: relative;\n height: 101.875rem;\n top: -178.75rem;\n}\n#sticky_container #column {\n position: absolute;\n width: 41.9166666667rem;\n height: 101.875rem;\n top: 0;\n left: 0;\n padding: 0;\n}\n#sticky_container .sticky {\n float: right;\n height: 16.5625rem;\n width: 19.375rem;\n margin-left: 41.9166666667rem;\n}\n#sticky_container .sticky .row:first-child {\n height: 10.625rem;\n}\n#sticky_container .sticky .row:first-child .column1 {\n display: inline-block;\n vertical-align: bottom;\n padding-top: 0.125rem;\n width: 12.9166666667rem;\n font-size: 1.1666666667rem;\n}\n#sticky_container .sticky .row:first-child .column1 .linea {\n margin-bottom: 0.625rem;\n}\n#sticky_container .sticky .row:first-child .column1 .titulo {\n font-size: 2.0833333333rem;\n}\n#sticky_container .sticky .row:first-child .column1 .precio {\n font-size: 1.3333333333rem;\n}\n#sticky_container .sticky .row:first-child .column1 .colores {\n vertical-align: center;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .white {\n border: thin solid black;\n background-color: white;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .black {\n background-color: black;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .blue {\n background-color: blue;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .green {\n background-color: lime;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .yellow {\n background-color: yellow;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .orange {\n background-color: #ff8200;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .red {\n background-color: red;\n}\n#sticky_container .sticky .row:first-child .column1 .colores .circle {\n display: inline-block;\n width: 1rem;\n height: 1rem;\n border-radius: 8000px;\n}\n#sticky_container .sticky .row:first-child .column1 .input {\n width: 4.5rem;\n border: thin solid black;\n text-align: center;\n padding: 0.5rem 0.05rem;\n font-size: 0.8333333333rem;\n}\n#sticky_container .sticky .row:first-child .column1 .input button {\n background: none;\n border: none;\n width: 1rem;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n#sticky_container .sticky .row:first-child .column1 .input input {\n width: 2rem;\n background: none;\n margin: 0;\n border: 0;\n padding: 0;\n text-align: right;\n}\n#sticky_container .sticky .row:first-child .column2 {\n display: inline-block;\n width: 6.125rem;\n}\n#sticky_container .sticky .row:first-child .column2 img {\n width: 6.875rem;\n height: 10.625rem;\n}\n#sticky_container .sticky .row:last-child .button {\n border-radius: 0 !important;\n width: 100%;\n}\n\n.fondo-blanco {\n float: right;\n background-color: rgba(255, 255, 255, 0.5);\n}"]} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 9ea930d..899a37c 100644 --- a/public/index.html +++ b/public/index.html @@ -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

+
@@ -72,12 +73,16 @@
+
- DIMENSIONES +
+ DIMENSIONES +
+
@@ -86,8 +91,7 @@
CONSTRUIDOS EN IMPRESIÓN 3D
-
-
+
@@ -96,7 +100,7 @@
CORPORATIVOS
-
+
COTIZA CON NOSOSTROS
@@ -104,7 +108,10 @@
- CLIENTES FELICES +
+ CLIENTES FELICES +
+
@@ -133,13 +140,13 @@
-
+
STAND
-
+
$ 5.990
-
+
COLOR