Afinando
This commit is contained in:
@ -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;
|
||||
})
|
||||
|
||||
46
assets/sass/_reset.scss
Normal file
46
assets/sass/_reset.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user