style_landing.css
style_landing.css
— 3 KB
Continguts del fitxer
.masonry h1 { text-align: center; margin-top: 5px; } .masonry p { text-align: center; margin-bottom:5px; font-size:1.5em; line-height:1.5em; } .masonry h2{ text-align:center; line-height:80px; font-weight:normal; font-size:2em; } .masonry { /* Masonry container */ -webkit-column-count: 3; -moz-column-count:3; column-count: 3; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; margin: 1.5em; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; } .item { display: inline-block; background: #fff; padding: 1em; margin: 0 0 1.5em; width: 100%; -webkit-transition:1s ease all; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .item:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .item img{ max-width:100%; } .item_a { display: inline-block; background: #fff; padding: 1em; margin: 0 0 1.5em; width: 100%; -webkit-transition:1s ease all; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); border-top: 5px solid #0073B3; } .item_a:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .item_b { display: inline-block; background: #fff; padding: 1em; margin: 0 0 1.5em; width: 100%; -webkit-transition:1s ease all; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); border-top: 5px solid #7BC7DF; } .item_b:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .item_c { display: inline-block; background: #fff; padding: 1em; margin: 0 0 1.5em; width: 100%; -webkit-transition:1s ease all; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); border-top: 5px solid #DF97C0; } .item_c:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } @media only screen and (min-width: 250px) { .masonry { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } @media only screen and (min-width: 600px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (min-width: 900px) { .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 1200px) { .masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } /*Carousel */ .css-img { display: inline-block; width: 200px; height: auto; } .carousel { width: 100%; height: 200px; overflow: hidden; padding: 8px; box-sizing: border-box; margin: 0 auto; } .holder { animation: carousel 25s linear infinite; white-space: nowrap; will-change: transform; &:hover { animation-play-state: paused; } } @keyframes carousel { 0% { transform: translateX(0); } 50% { transform: translateX(-100%); } 100% { transform: translateX(0); } }