diff --git a/assets/js/main.js b/assets/js/main.js index d70297a..c78bae4 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,5 +1,19 @@ +function resize() { + let p = 400 / 1030 + $('.container').each(function(i, el) { + let height = $(this).height + let width = $(this).width + + $(this).width = height * p; + }) +} + $(document).ready(function() { $('.sticky').sticky({ context: '#column' }) + + $('.shopping.cart').innerText = 0 + + window.onresize = resize; }) diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss new file mode 100644 index 0000000..b78f47f --- /dev/null +++ b/assets/sass/_reset.scss @@ -0,0 +1,46 @@ +*, *: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; +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 70711a1..0eb7257 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,16 +1,35 @@ +@use "sass:map"; +@import 'reset'; + +body { + font-family: Roboto, sans; +} + .ui.container { - position: relative; + max-width: 1030px; +} +section>.container { + height: 100%; + &>.column1 { + width: (1030*2/3/16)+rem; + } + &>.column2 { + width: (1030/3/16)+rem; + } } #header { background-image: url('../images/header.png'); background-repeat: no-repeat; background-size: auto; - background-color: rgba(100, 100, 0, .3); + $header-background: rgba(100, 100, 0, .3); + background-color: $header-background; color: rgb(255, 255, 255); width: 100%; - height: 30rem; + &>.container { + height: 400px; + } .ui.menu { border: none !important; @@ -26,6 +45,17 @@ .item { color: inherit !important; + font-size: 2rem; + + .shopping.cart div { + position: relative; + color: black; + display: inline-block; + top: -2.6rem; + left: 0.2rem; + font-size: 1rem; + font-family: Roboto, sans; + } } } @@ -34,10 +64,10 @@ margin: 0 !important; img { - width: 10rem; + width: 50%; } .frase1 { - font-size: 2rem; + font-size: 1.5rem; } .frase2 { font-size: 1rem; @@ -57,49 +87,93 @@ } } +$heights: ( + "seccion1": 25, + "seccion2": 27.5, + "dimensiones": 27.5, + "construido": 21.875, + "corporativos": 25, + "felices": 21.875, + "formulario": 30 +); + #seccion1 { background-image: linear-gradient(rgb(200, 200, 200), rgb(200, 200, 200)); - background-position: left 3rem; - background-size: 100% 5rem; + background-position: left 6.3rem; + background-size: 100% (134/16)+rem; background-repeat: no-repeat; - height: 20rem; + height: (map.get($heights, "seccion1"))+rem; + margin-bottom: 2rem !important; + + .column1 { + width: (1030*2/3/16)+rem; + + .image-container { + display: flex; + justify-content: space-between; + + img { + height: 9.6875rem; + margin-top: 5rem; + } + } + } .ui.simple.segment { background: none !important; + + margin-top: 2rem !important; + + font-size: 1.1667rem; + + .header { + font-size: 1.833rem; + + margin-bottom: 1rem; + } + + } + + .grid .column { + &, & .column { + padding-top: 0; + } } img { - height: 10rem; + height: 9.6875rem; + + margin-top: 5rem; } } #seccion2 { - height: 20rem; + height: (map.get($heights, "seccion2"))+rem; background-image: url('../images/fondo23.png'); background-color: rgb(240, 240, 240); + + } #dimensiones { - height: 20rem; + height: (map.get($heights, "dimensiones"))+rem; background-image: url('../images/fondo23.png'); - background-color: rgb(240, 240, 240); } #construido { - height: 20rem; + height: (map.get($heights, "construido"))+rem; background-image: url('../images/fondo4.png'); background-color: rgb(100, 200, 255); } #corporativos { - height: 20rem; + height: (map.get($heights, "corporativos"))+rem; background-image: url('../images/fondo5.png'); - background-color: rgb(250, 250, 250); } #felices { @@ -108,31 +182,125 @@ background-size: 100% 5rem; background-repeat: no-repeat; - height: 20rem; + height: (map.get($heights, "felices"))+rem; } #formulario { - height: 30rem; + height: (map.get($heights, "formulario"))+rem; .whatsapp-link { color: inherit; } } +$column1: 0; +$sticky: 0; +@each $name, $val in $heights { + $sticky: $sticky + $val; + @if $name != 'corporativos' and $name != 'felices' and $name != 'formulario' { + $column1: $column1 + $val; + } +} #sticky_container { - position: absolute; - width: 100%; - height: 75rem; + position: relative; + height: ($column1)+rem; + top: -($sticky)+rem; - top: 30rem; - left: 1rem; - - .column { - height: inherit; + #column { + position: absolute; + width: (1030*2/3/16)+rem; + height: ($column1)+rem; + top: 0; + left: 0; padding: 0; } - .sticky .grid { - margin: 1rem !important; + .sticky { + float: right; + height: (265/16)+rem; + width: (310/16)+rem; + padding-top: ((265-170-35-16)/16)+rem; + + .row:first-child { + height: (170/16)+rem; + + .column1 { + display: inline-block; + + .titulo { + font-size: (25/12)+rem; + } + .precio { + font-size: (16/12)+rem; + } + font-size: (14/12)+rem; + + .colores { + vertical-align: center; + + .white { + border: thin solid rgb(0, 0, 0); + background-color: rgb(255, 255, 255); + } + .black { + background-color: rgb(0, 0, 0); + } + .blue { + background-color: rgb(0, 0, 255); + } + .green { + background-color: rgb(0, 255, 0); + } + .yellow { + background-color: rgb(255, 255, 0); + } + .orange { + background-color: rgb(255, 130, 0); + } + .red { + background-color: rgb(255, 0, 0); + } + .circle { + display: inline-block; + width: 1rem; + height: 1rem; + border-radius: 8000px; + } + } + .input { + width: 4.5rem; + border: thin solid rgb(0, 0, 0); + text-align: center; + padding: .5rem 0.05rem; + + button { + background: none; + border: none; + width: 1rem; + margin: 0; + padding: 0; + cursor: pointer; + } + input { + width: 2rem; + background: none; + margin: 0; + border: 0; + padding: 0; + text-align: right; + } + } + } + .column2 { + display: inline-block; + width: (170/16)+rem; + } + } + .row:last-child { + .button { + border-radius: 0 !important; + width: 100%; + } + } } } diff --git a/public/assets/images/Medidas stand.svg b/public/assets/images/Medidas stand.svg new file mode 100644 index 0000000..e54117f --- /dev/null +++ b/public/assets/images/Medidas stand.svg @@ -0,0 +1,154 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 15 cm + + + 7 cm + +7 cm + diff --git a/public/assets/images/fondo23.png b/public/assets/images/fondo23.png new file mode 100644 index 0000000..7184014 Binary files /dev/null and b/public/assets/images/fondo23.png differ diff --git a/public/assets/images/fondo5.png b/public/assets/images/fondo5.png new file mode 100644 index 0000000..30490cb Binary files /dev/null and b/public/assets/images/fondo5.png differ diff --git a/public/assets/images/logo.svg b/public/assets/images/logo.svg new file mode 100644 index 0000000..4bfa1f7 --- /dev/null +++ b/public/assets/images/logo.svg @@ -0,0 +1,450 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/scripts/main.js b/public/assets/scripts/main.js index d70297a..c78bae4 100644 --- a/public/assets/scripts/main.js +++ b/public/assets/scripts/main.js @@ -1,5 +1,19 @@ +function resize() { + let p = 400 / 1030 + $('.container').each(function(i, el) { + let height = $(this).height + let width = $(this).width + + $(this).width = height * p; + }) +} + $(document).ready(function() { $('.sticky').sticky({ context: '#column' }) + + $('.shopping.cart').innerText = 0 + + window.onresize = resize; }) diff --git a/public/assets/scripts/main.min.js b/public/assets/scripts/main.min.js index 09bfa51..8484da3 100644 --- a/public/assets/scripts/main.min.js +++ b/public/assets/scripts/main.min.js @@ -1,2 +1,2 @@ -$(document).ready(function(){$(".sticky").sticky({context:"#column"})}); +function resize(){$(".container").each(function(i,t){var n=$(this).height;$(this).width;$(this).width=n*(400/1030)})}$(document).ready(function(){$(".sticky").sticky({context:"#column"}),$(".shopping.cart").innerText=0,window.onresize=resize}); //# sourceMappingURL=maps/main.min.js.map diff --git a/public/assets/scripts/maps/main.min.js.map b/public/assets/scripts/maps/main.min.js.map index 0b89ab9..428deb3 100644 --- a/public/assets/scripts/maps/main.min.js.map +++ b/public/assets/scripts/maps/main.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["main.js"],"names":["$","document","ready","sticky","context"],"mappings":"AAAAA,EAAEC,UAAUC,MAAM,WAChBF,EAAE,WAAWG,OAAO,CAClBC,QAAS","file":"../main.min.js","sourcesContent":["$(document).ready(function() {\r\n $('.sticky').sticky({\r\n context: '#column'\r\n })\r\n})\r\n"]} \ No newline at end of file +{"version":3,"sources":["main.js"],"names":["resize","$","each","i","el","height","this","width","ready","sticky","context","innerText","window","onresize"],"mappings":"AAAA,SAASA,SAEPC,EAAE,cAAcC,KAAK,SAAAC,EAAAC,GACnB,IAAIC,EAASJ,EAAEK,MAAMD,OACTJ,EAAEK,MAAMC,MAFtBN,EAAAK,MAAAC,MAAAF,GADQ,IAAM,QAUdJ,EAAAA,UAAEO,MAAWC,WACXC,EAAAA,WAASD,OAAA,CADXC,QAAA,YADFT,EAAA,kBAAAU,UAAA,EAOEC,OAAOC,SAAWb","file":"../main.min.js","sourcesContent":["function resize() {\r\n let p = 400 / 1030\r\n $('.container').each(function(i, el) {\r\n let height = $(this).height\r\n let width = $(this).width\r\n\r\n $(this).width = height * p;\r\n })\r\n}\r\n\r\n$(document).ready(function() {\r\n $('.sticky').sticky({\r\n context: '#column'\r\n })\r\n\r\n $('.shopping.cart').innerText = 0\r\n\r\n window.onresize = resize;\r\n})\r\n"]} \ No newline at end of file diff --git a/public/assets/styles/main.css b/public/assets/styles/main.css index c4f9307..88bee71 100644 --- a/public/assets/styles/main.css +++ b/public/assets/styles/main.css @@ -1,5 +1,66 @@ +*, *: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 { - position: relative; + max-width: 1030px; +} + +section > .container { + height: 100%; +} +section > .container > .column1 { + width: 42.9166666667rem; +} +section > .container > .column2 { + width: 21.4583333333rem; } #header { @@ -9,7 +70,9 @@ background-color: rgba(100, 100, 0, 0.3); color: white; width: 100%; - height: 30rem; +} +#header > .container { + height: 400px; } #header .ui.menu { border: none !important; @@ -24,16 +87,26 @@ } #header .ui.menu .item { color: inherit !important; + font-size: 2rem; +} +#header .ui.menu .item .shopping.cart div { + position: relative; + color: black; + display: inline-block; + top: -2.6rem; + left: 0.2rem; + font-size: 1rem; + font-family: Roboto, sans; } #header .logo { padding: 0 !important; margin: 0 !important; } #header .logo img { - width: 10rem; + width: 50%; } #header .logo .frase1 { - font-size: 2rem; + font-size: 1.5rem; } #header .logo .frase2 { font-size: 1rem; @@ -52,40 +125,60 @@ #seccion1 { background-image: linear-gradient(#c8c8c8, #c8c8c8); - background-position: left 3rem; - background-size: 100% 5rem; + background-position: left 6.3rem; + background-size: 100% 8.375rem; background-repeat: no-repeat; - height: 20rem; + 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: 10rem; + height: 9.6875rem; + margin-top: 5rem; } #seccion2 { - height: 20rem; + height: 27.5rem; background-image: url("../images/fondo23.png"); background-color: #f0f0f0; } #dimensiones { - height: 20rem; + height: 27.5rem; background-image: url("../images/fondo23.png"); - background-color: #f0f0f0; } #construido { - height: 20rem; + height: 21.875rem; background-image: url("../images/fondo4.png"); background-color: #64c8ff; } #corporativos { - height: 20rem; + height: 25rem; background-image: url("../images/fondo5.png"); - background-color: #fafafa; } #felices { @@ -93,7 +186,7 @@ background-position: left 3rem; background-size: 100% 5rem; background-repeat: no-repeat; - height: 20rem; + height: 21.875rem; } #formulario { @@ -104,18 +197,97 @@ } #sticky_container { - position: absolute; - width: 100%; - height: 75rem; - top: 30rem; - left: 1rem; + position: relative; + height: 101.875rem; + top: -178.75rem; } -#sticky_container .column { - height: inherit; +#sticky_container #column { + position: absolute; + width: 42.9166666667rem; + height: 101.875rem; + top: 0; + left: 0; padding: 0; } -#sticky_container .sticky .grid { - margin: 1rem !important; +#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 black; + background-color: white; +} +#sticky_container .sticky .row:first-child .column1 .colores .black { + background-color: black; +} +#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: yellow; +} +#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 black; + text-align: center; + padding: 0.5rem 0.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 { diff --git a/public/assets/styles/main.min.css b/public/assets/styles/main.min.css index 6df56cd..e7ea6a9 100644 --- a/public/assets/styles/main.min.css +++ b/public/assets/styles/main.min.css @@ -1,2 +1,2 @@ -.ui.container{position:relative}#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%;height:30rem}#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}#header .logo{padding:0 !important;margin:0 !important}#header .logo img{width:10rem}#header .logo .frase1{font-size:2rem}#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 3rem;background-size:100% 5rem;background-repeat:no-repeat;height:20rem}#seccion1 .ui.simple.segment{background:none !important}#seccion1 img{height:10rem}#seccion2{height:20rem;background-image:url("../images/fondo23.png");background-color:#f0f0f0}#dimensiones{height:20rem;background-image:url("../images/fondo23.png");background-color:#f0f0f0}#construido{height:20rem;background-image:url("../images/fondo4.png");background-color:#64c8ff}#corporativos{height:20rem;background-image:url("../images/fondo5.png");background-color:#fafafa}#felices{background-image:linear-gradient(#c8c8c8, #c8c8c8);background-position:left 3rem;background-size:100% 5rem;background-repeat:no-repeat;height:20rem}#formulario{height:30rem}#formulario .whatsapp-link{color:inherit}#sticky_container{position:absolute;width:100%;height:75rem;top:30rem;left:1rem}#sticky_container .column{height:inherit;padding:0}#sticky_container .sticky .grid{margin:1rem !important}.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{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)} /*# 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 7b4b8d1..1aa2bb5 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,cACE,kBAGF,QACE,6CACA,4BACA,qBACA,oCACA,WACA,WACA,aAEF,iBACE,uBACA,2BACA,2BACA,oBAEF,iCACE,2BACA,uBACA,2BAEF,uBACE,yBAEF,cACE,qBACA,oBAEF,kBACE,YAEF,sBACE,eAEF,sBACE,eAGF,gBACE,uBACA,2BACA,2BACA,oBACA,qBAEF,yBACE,YAGF,UACE,mDACA,8BACA,0BACA,4BACA,aAEF,6BACE,2BAEF,cACE,aAGF,UACE,aACA,8CACA,yBAGF,aACE,aACA,8CACA,yBAGF,YACE,aACA,6CACA,yBAGF,cACE,aACA,6CACA,yBAGF,SACE,mDACA,8BACA,0BACA,4BACA,aAGF,YACE,aAEF,2BACE,cAGF,kBACE,kBACA,WACA,aACA,UACA,UAEF,0BACE,eACA,UAEF,gCACE,uBAGF,cACE","file":"../main.min.css","sourcesContent":[".ui.container {\n position: relative;\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 height: 30rem;\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}\n#header .logo {\n padding: 0 !important;\n margin: 0 !important;\n}\n#header .logo img {\n width: 10rem;\n}\n#header .logo .frase1 {\n font-size: 2rem;\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 3rem;\n background-size: 100% 5rem;\n background-repeat: no-repeat;\n height: 20rem;\n}\n#seccion1 .ui.simple.segment {\n background: none !important;\n}\n#seccion1 img {\n height: 10rem;\n}\n\n#seccion2 {\n height: 20rem;\n background-image: url(\"../images/fondo23.png\");\n background-color: #f0f0f0;\n}\n\n#dimensiones {\n height: 20rem;\n background-image: url(\"../images/fondo23.png\");\n background-color: #f0f0f0;\n}\n\n#construido {\n height: 20rem;\n background-image: url(\"../images/fondo4.png\");\n background-color: #64c8ff;\n}\n\n#corporativos {\n height: 20rem;\n background-image: url(\"../images/fondo5.png\");\n background-color: #fafafa;\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: 20rem;\n}\n\n#formulario {\n height: 30rem;\n}\n#formulario .whatsapp-link {\n color: inherit;\n}\n\n#sticky_container {\n position: absolute;\n width: 100%;\n height: 75rem;\n top: 30rem;\n left: 1rem;\n}\n#sticky_container .column {\n height: inherit;\n padding: 0;\n}\n#sticky_container .sticky .grid {\n margin: 1rem !important;\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,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 diff --git a/public/index.html b/public/index.html index bc72475..5145d28 100644 --- a/public/index.html +++ b/public/index.html @@ -5,11 +5,14 @@ Stand + + + -
-
+ -
-
-
-
-
- -
-
- -
-
- -
+
+
+
+
+ + + +
+

+

+ LOREM IPSUM DOLOR SIT AMET, CONSECTETUR
-
-
- LOREM IPSUM DOLOR SIT AMET, CONSECTETUR -
- 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 +

-
+
-
-
-
-
-
- -
-
-
+
+
+
+
-
+
+
-
- 3 -
+
+
+ DIMENSIONES +
+
-
+
+
+
+ CONSTRUIDOS EN IMPRESIÓN 3D +
+
+
+
+
+ +
+
- 4 -
-
-
-
- -
-
-
- 5 + CORPORATIVOS
COTIZA CON NOSOSTROS
-
+ +
-
+
+
CLIENTES FELICES -
+ +
-
+
+
@@ -124,23 +126,40 @@
-
+ +
-
-
-
-
-
-
- STAND
- $ 5.990
- COLOR -
-
- -
+
+
+
+
+
+
+ STAND +
+
+ $ 5.990 +
+
+ COLOR +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+