546 lines
No EOL
10 KiB
CSS
Executable file
546 lines
No EOL
10 KiB
CSS
Executable file
@font-face {
|
|
font-family: 'Product Sans';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
src: local('Product Sans'), url('ProductSans-Regular.woff') format('woff');
|
|
}
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
|
|
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
height: 100vh;
|
|
perspective: 1px;
|
|
transform-style: preserve-3d;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30px 10%;
|
|
|
|
}
|
|
|
|
title {
|
|
font-family: 'Product Sans', sans-serif;
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 25px;
|
|
border: none;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
position: relative;
|
|
font-family: 'Product Sans', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 110%;
|
|
color: #ffffff;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
button:hover {
|
|
transition: all 0.3s ease-out;
|
|
bottom: 0.2px;
|
|
}
|
|
|
|
table {
|
|
border: none;
|
|
box-shadow: 10px 12px 26px rgba(0, 0, 0, 0.30);
|
|
width: 81vh;
|
|
height: 40vh;
|
|
margin-left:50%;
|
|
margin-right:50%;
|
|
}
|
|
|
|
table#material tr:nth-child(even) {
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
table#material tr:nth-child(odd) {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
table#material th {
|
|
color: #ffffff;
|
|
background: linear-gradient(65deg, #1a237e, #01579b);
|
|
}
|
|
|
|
td {
|
|
text-align: left;
|
|
font-family: 'Roboto';
|
|
font-weight: 300;
|
|
color: #1c1c1c;
|
|
}
|
|
|
|
tr {
|
|
text-align: center;
|
|
font-family: 'Product Sans';
|
|
color: #1c1c1c;
|
|
text-shadow: 0 6px 8px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
.basicbutton {
|
|
background: linear-gradient(65deg, #1a237e, #01579b);
|
|
}
|
|
|
|
.basicbutton:hover {
|
|
background: linear-gradient(65deg, #2330ad, #0363af);
|
|
box-shadow: 0 3px 12px 0 rgba(1, 87, 155, 0.7);
|
|
}
|
|
|
|
.offbutton {
|
|
background: linear-gradient(65deg, #3b3f6e, #527795);
|
|
}
|
|
|
|
.offbutton:hover {
|
|
background: linear-gradient(65deg, #282b4d, #3b566c);
|
|
box-shadow: 0 3px 12px 0 rgba(77, 90, 145, 0.7);
|
|
}
|
|
|
|
.backgroundbg {
|
|
box-sizing: border-box;
|
|
width: relative;
|
|
height: 100px;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #0d184e;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
li, a {
|
|
font-family: 'Product Sans', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 110%;
|
|
color: #cbc4f5;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.icon {
|
|
cursor: pointer;
|
|
height: 100px;
|
|
width: 100px;
|
|
margin: 20px;
|
|
|
|
}
|
|
|
|
.nav_links {
|
|
list-style: none;
|
|
z-index: 2;
|
|
position: relative;
|
|
}
|
|
|
|
.nav_links li {
|
|
display: inline-block;
|
|
padding: 0px 15px;
|
|
}
|
|
|
|
.nav_links li a {
|
|
transition: all 0.3s ease 0s;
|
|
}
|
|
|
|
.nav_links li a:hover {
|
|
color: #0363af;
|
|
}
|
|
|
|
.parallax-wrapper {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding-top: 20vh;
|
|
box-sizing: border-box;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.parallax-wrapper::before {
|
|
content:"";
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
background-repeat: round;
|
|
position: absolute;
|
|
z-index: -1;
|
|
transform: translateZ(-1px) scale(2);
|
|
}
|
|
|
|
.parallax-background1::before{
|
|
background-image: url('img/intro.png');
|
|
}
|
|
|
|
.parallax-background2::before{
|
|
background-image: url('img/intro5.png');
|
|
}
|
|
|
|
.parallax-background3::before{
|
|
background-image: url('img/intro1.png');
|
|
}
|
|
|
|
.parallax-background4::before{
|
|
background-image: url('img/intro4.png');
|
|
}
|
|
|
|
.parallax-background5::before{
|
|
background-image: url('img/intro3.png');
|
|
}
|
|
|
|
.parallax-background6::before{
|
|
background-image: url('img/intro2.png');
|
|
}
|
|
|
|
.colorlink {
|
|
color: #0363af;
|
|
}
|
|
|
|
.quidir {
|
|
position: relative;
|
|
color: #cbc4f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-shadow: 10px 12px 26px rgba(0, 0, 0, 0.30);
|
|
font-family: 'Product Sans';
|
|
}
|
|
|
|
.intro {
|
|
font-family: 'Product Sans', sans-serif;
|
|
font-size: 140px;
|
|
font-weight: 700;
|
|
text-shadow: 10px 12px 26px rgba(0, 0, 0, 0.30);
|
|
position: relative;
|
|
color: #edf0f1;
|
|
text-align: center;
|
|
top: 15vh;
|
|
}
|
|
|
|
.subintro {
|
|
font-family: 'Product Sans', sans-serif;
|
|
font-size: 50px;
|
|
font-weight: 500;
|
|
text-shadow: 10px 12px 26px rgba(0, 0, 0, 0.30);
|
|
position: relative;
|
|
color: #edf0f1;
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
top: 15vh;
|
|
}
|
|
|
|
.divtitle {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
height: 13vh;
|
|
position: absolute;
|
|
left: 125px;
|
|
}
|
|
|
|
.div1 {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 550px;
|
|
position: relative;
|
|
}
|
|
|
|
.div2 {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 500px;
|
|
position: relative;
|
|
}
|
|
|
|
.div3 {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 550px;
|
|
position: relative;
|
|
}
|
|
|
|
.div4 {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 650px;
|
|
position: relative;
|
|
}
|
|
|
|
.div5 {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 400px;
|
|
position: relative;
|
|
}
|
|
|
|
.div6 {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 500px;
|
|
position: relative;
|
|
}
|
|
|
|
.centered {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.divfinal {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100px;
|
|
position: relative;
|
|
}
|
|
|
|
.divpers {
|
|
box-sizing: border-box;
|
|
padding-right: 20vh;
|
|
padding-left: 20vh;
|
|
background-color: #edf0f1;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 12vh;
|
|
position: relative;
|
|
}
|
|
|
|
.divcontent {
|
|
box-sizing: border-box;
|
|
padding-left: 5vh;
|
|
background-color: #edf0f1;
|
|
width: 100%;
|
|
height: 10vh;
|
|
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.divbuttonright {
|
|
display:flex;
|
|
overflow: auto;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
height: 13vh;
|
|
position: absolute;
|
|
right: 125px;
|
|
}
|
|
|
|
.divbuttonleft {
|
|
display:flex;
|
|
overflow: auto;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
height: 13vh;
|
|
position: absolute;
|
|
left: 125px;
|
|
}
|
|
|
|
.contenu{
|
|
position: relative;
|
|
width: 50%;
|
|
}
|
|
|
|
.outcentered {
|
|
height: 100%;
|
|
display: table;
|
|
}
|
|
|
|
.incentered {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.img1 {
|
|
width: 440px;
|
|
height: 275px;
|
|
}
|
|
|
|
.img2 {
|
|
width: 448px;
|
|
height: 297.5px;
|
|
}
|
|
|
|
.img0 {
|
|
cursor: pointer;
|
|
width: 50px;
|
|
height: 50px;
|
|
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.3);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.img3 {
|
|
width: 400px;
|
|
height: 200px;
|
|
}
|
|
|
|
.img4 {
|
|
width: 402.6px;
|
|
height: 183.7px;
|
|
}
|
|
|
|
.img6 {
|
|
width: 500px;
|
|
height: 275px;
|
|
}
|
|
|
|
.img0:hover {
|
|
transition: 0.3s ease-in;
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.img1:hover {
|
|
transition: 0.22s ease-in;
|
|
box-shadow: 0 8px 21px 0 rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.img2:hover {
|
|
transition: 0.22s ease-in;
|
|
box-shadow: 0 8px 21px 0 rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.img3:hover {
|
|
transition: 0.22s ease-in;
|
|
box-shadow: 0 8px 21px 0 rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.img4:hover {
|
|
transition: 0.22s ease-in;
|
|
box-shadow: 0 8px 21px 0 rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.img6:hover {
|
|
transition: 0.22s ease-in;
|
|
box-shadow: 0 8px 21px 0 rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.overlay1 {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 448px;
|
|
height: 297.5px;
|
|
opacity: 0;
|
|
transition: 0.22s ease-in;
|
|
background: linear-gradient(65deg, #1a237e, #01579b);
|
|
box-shadow: 0 8px 21px 0 rgba(0,0,0,0.7);
|
|
font-family: 'Product Sans', sans-serif;
|
|
}
|
|
|
|
.contenu:hover .overlay1{
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.textcontenu1 {
|
|
color: white;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-shadow: 0px 4px 8px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.textpers {
|
|
font-family: 'Product Sans', sans-serif;
|
|
font-style: normal;
|
|
font-size: 130%;
|
|
text-align: left;
|
|
margin: 3vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.text1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.textfont1 {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-style: normal;
|
|
font-size: 130%;
|
|
text-align: left;
|
|
margin: 5vh;
|
|
color: #1c1c1c;
|
|
}
|
|
|
|
.text2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.textfont2 {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-style: normal;
|
|
font-size: 130%;
|
|
text-align: right;
|
|
margin: 5vh;
|
|
color: #1c1c1c;
|
|
}
|
|
|
|
.textfont3 {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-style: normal;
|
|
font-size: 130%;
|
|
text-align: center;
|
|
margin: 5vh;
|
|
color: #1c1c1c;
|
|
}
|
|
|
|
.text3 {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-style: normal;
|
|
font-size: 130%;
|
|
text-align: left;
|
|
margin: 5vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #1c1c1c;
|
|
} |