Template:Loogart Labs css
Revision as of 09:51, 26 March 2018 by Chris.soueidan (talk | contribs) (Created page with "<html> <style> body { overflow-y: hidden; background-color: #f8f8f8; } div#mw-head { position: absolute; top: 145px; right: 0; widt...")
<html> <style>
body { overflow-y: hidden; background-color: #f8f8f8; } div#mw-head { position: absolute; top: 145px; right: 0; width: 100%; display: none; } div#mw-panel { font-size: inherit; position: absolute; top: 160px; padding-top: 1em; width: 10em; left: 0; display: none; } #footer { display: none; } .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin: 0; } .mw-body .mw-body-content h1 { margin-top: 0; } .mw-body h1, .mw-body h2 { font-family: sans-serif; line-height: 1.3; margin-bottom: .25em; padding: 0; border-bottom: 1px solid transparent; } h4 { padding-top: 0; } .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { line-height: 1.2; margin-top: .1em; margin-bottom: .1em; padding-bottom: 0; }
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
html,
super-body {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.super-body {
/* overflow: auto;*/ overflow-x: hidden; overflow-y: scroll; -webkit-perspective: 1px; perspective: 1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.super-body, .super-body * {
-webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.container {
padding: 10%; max-width: 100%; margin: auto;
}
.container :nth-child(1) {
-webkit-transform: translateZ(-0.4px) scale(1.4); transform: translateZ(-0.4px) scale(1.4); z-index: -400; top: 200px; left: 10%;
}
.container :nth-child(2) {
-webkit-transform: translateZ(0.2px) scale(0.8); transform: translateZ(0.2px) scale(0.8); z-index: 200; top: 200px; left: 30%;
}
.container :nth-child(3) {
-webkit-transform: translateZ(0.3px) scale(0.7); transform: translateZ(0.3px) scale(0.7); z-index: 300; top: 400px; left: 40%;
}
.container :nth-child(4) {
-webkit-transform: translateZ(0.1px) scale(0.9); transform: translateZ(0.1px) scale(0.9); z-index: 100; top: 500px; left: 30%; background-color: aquamarine;
}
.container :nth-child(5) {
-webkit-transform: translateZ(-2px) scale(3); transform: translateZ(-2px) scale(3); z-index: -2000; top: 50%; left: 50%;
}
.container :nth-child(6) {
-webkit-transform: translateZ(0.4px) scale(0.6); transform: translateZ(0.4px) scale(0.6); z-index: 400; top: 600px; left: 300px;
}
.container :nth-child(7) {
-webkit-transform: translateZ(-1px) scale(2); transform: translateZ(-1px) scale(2); z-index: -1000; top: 400px; left: 1000px;
}
.container :nth-child(8) {
-webkit-transform: translateZ(-0.4px) scale(1.4); transform: translateZ(-0.4px) scale(1.4); z-index: -400; top: 100px; left: 1400px;
}
.container :nth-child(9) {
-webkit-transform: translateZ(0.4px) scale(0.6); transform: translateZ(0.4px) scale(0.6); z-index: 400; top: 900px; left: 500px;
}
.container :nth-child(10) {
-webkit-transform: translateZ(-1px) scale(2); transform: translateZ(-1px) scale(2); z-index: -1000; top: 1600px; left: 100px;
}
.container > * {
position: absolute;
}
.super-body {
font-family: Roboto, sans-serif; font-weight: 100; background: #EEF1F3; line-height: 1; background-image: url("http://v4.loogart.com/img/portfolio/upa/upa-cityline-2015-zoomer.jpg"); background-size: cover; position: fixed; overflow-y: scroll; overflow-x: hidden; -ms-overflow-x: hidden; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background-color: #fff; -webkit-transition: all .2s ease-in; transition: all .5s ease-in; font-family: 'Roboto', sans-serif; font-size: 14px; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar;
}
h1, h2 {
font-weight: 700; margin: 0;
}
h1 {
font-size: 5em; color: #fff;
}
h2 {
font-size: 3em; -webkit-transform: translateZ(0.2px) scale(0.8); transform: translateZ(0.2px) scale(0.8); z-index: 200; color: #fff;
}
</style> </html>