Line 5:
Line 5:
This template was designed by Chris Soueidan of Global Affairs Canada's InnoLab Group in the SIAI Division. Visit innolab.site for more information.
This template was designed by Chris Soueidan of Global Affairs Canada's InnoLab Group in the SIAI Division. Visit innolab.site for more information.
-->
-->
−
<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>
<body>
<body>