/* defaults */
html, body {
margin: 0;
padding: 0;
height: 100%;
font-size: 14px;
}
body {
background-color: #ddd;
}
.emptyContainer {
height: 200vh;
}
.empty2Container {
height: 100vh;
background: #ddd;
position: relative;
}
.rond01 {
width: 80vh;
height: 80vh;
margin: auto;
position: sticky;
top: 50%;
background-color: white;
background-size: auto 100%;
background-position: top;
transform: translate(0, -50%);
border-radius: 50%;
box-shadow: -1vh -1vh 14vh 2vh rgba(153, 0, 255, 0.432);
}
.titre{
font-family: calluna,serif;
font-weight: 400;
font-style: italic;
font-size: 10vh;
text-align: center;
color: black;
padding-top: 3vh;
padding-bottom: 5vh;
top: 50%;
position: relative;
transform: translate(0, -50%);
}
.intro {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 8vh;
text-align: center;
color: rgb(153, 0, 255);
position: fixed;
padding-top:5vh;
padding-bottom: 20vh;
padding-right: 5vh;
padding-left: 5vh;
}
/* @media only screen and (max-width: 600px) {
.intro {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 4vh;
text-align: center;
color: rgb(153, 0, 255);
position: fixed;
padding-top:5vh;
padding-bottom: 20vh;
padding-right: 5vh;
padding-left: 5vh;
}
}
@media only screen and (max-width: 600px) {
.introspan {
font-family: calluna,serif;
font-weight: 400;
font-style: italic;
font-size: 3vh;
} */
}
.footer {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 8vh;
text-align: center;
color: rgb(153, 0, 255);
position: fixed;
padding-bottom: 20vh;
}
.secondContainer {
width: 100%;
height: 200vh;
/* overflow: scroll; */
}
.second2Container {
width: 100%;
height: 200vh;
background: #ddd;
position: relative;
/* overflow: scroll; */
}
.secondContainer div, .secondContainer p {
/* float: left; */
}
.thirdContainer {
background: #ddd;
z-index: 10000;
position: relative;
}
.fin {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 8vh;
text-align: center;
color: rgb(153, 0, 255);
margin-top: 20vh;
padding-top:5vh;
padding-bottom: 20vh;
padding-right: 5vh;
padding-left: 5vh;
}
.introspan {
font-family: calluna,serif;
font-weight: 400;
font-style: italic;
font-size: 9.3vh;
}
.introspan:hover {
color: rgb(153, 0, 255);
}
.arrow {
transform: rotate(-45deg);
position: absolute;
margin-left: 50%;
border-left: 0.8vh solid black;
border-bottom: 0.8vh solid black;
width: 6vh;
height: 6vh;
}
p+p {
text-indent: 7%;
}
.para1{
font-family: presicav,sans-serif;
font-weight: 300;
font-style: normal;
font-size: 6rem;
text-transform: uppercase;
color: rgb(255, 255, 255);
text-align: center;
padding-left: 6em;
padding-right: 6em;
padding-top: 2em;
padding-bottom: 1em;
}
.para3{
font-family: calluna,serif;
font-weight: 400;
font-style: italic;
font-size: 7vh;
text-align: center;
padding-top: 13vh;
padding-left: 21vh;
padding-right: 18vh;
padding-bottom: 7vh;
color: rgb(153 0 255);
}
@media only screen and (max-width: 800px) {
.para3 {
font-family: calluna,serif;
font-weight: 400;
font-style: italic;
font-size: 5vh;
text-align: center;
padding-top: 20vh;
padding-left: 5vh;
padding-right: 5vh;
padding-bottom: 7vh;
color: rgb(153 0 255);
}
}
.main {
position: relative;
margin-top: 10%;
margin-bottom: 2%;
}
.quisontils {
position: relative;
width: 100%;
height : 10vh;
margin-top: 10rem;
/* background-color: rgb(153, 0, 255); */
border-radius: 100px;
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
text-align: center;
}
.quisontils p {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 9vh;
text-align: center;
color: rgb(0, 0, 0);
padding-top: 6vh;
padding-bottom: 5vh;
}
.categories {
position: relative;
width: 100%;
height : 8vh;
margin-bottom: 0.5em;
background-color: rgb(255, 255, 255);
border-radius: 50px;
font-family: presicav,sans-serif;
font-weight: 300;
font-style: normal;
}
.categories p {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 9vh;
position: absolute;
top: 50%;
left: 50%;
color: rgb(0, 0, 0);
transform: translate3d(-50%, -50%, 0);
text-transform: uppercase;
}
@media only screen and (max-width: 750px) {
.categories p {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 6vh;
position: absolute;
top: 50%;
left: 50%;
color: rgb(0, 0, 0);
transform: translate3d(-50%, -50%, 0);
text-transform: uppercase;
}
}
.categories:hover {
background-color: rgb(153 0 255);
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
}
.categories p:hover {
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
text-transform: uppercase;
}
section {
width: 100%;
height: 92vh;
transition: height 1s ease-in-out;
overflow: hidden;
position: relative;
}
.formes {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0px;
filter: drop-shadow(-1vh -1vh 14vh 2vh rgba(153, 0, 255, 0.432));
}
.formes img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hiddenSection {
height: 0vh;
}
.italic {
font-family: calluna,serif;
font-size: 2.8vh;
font-style: italic;
}
span:hover {
color: rgb(153, 0, 255);
}
.txt {
z-index: 10;
color: black;
font-family: poppins, sans-serif;;
font-weight: 300;
font-style: normal;
font-size: 2.3vh;
position: relative;
}
/* APPARENCE!!!!!!! */
.apparence .forme_apparence {
/* z-index: 2; */
background-color: rgb(153, 0, 255);
background-size: auto 100%;
background-position: top;
clip-path: polygon(0% 0%,
25% 20%, 45% 20%,
60% 0%, 85% 0%,
85% 15%, 100% 15%,
100% 50%,65% 50%,
40% 75%,
60% 90%,
30% 100%,
0% 85%,
0% 75%);
animation: anim_apparence 5s infinite alternate-reverse;
}
.apparence .txt {
top: 50vh;
left: 62vw;
width:35%;
}
@media only screen and (max-width: 600px) {
.apparence .txt {
top: 20vh;
left: 5vw;
width:90%;
}
}
@keyframes anim_apparence {
0% {
clip-path: polygon(0% 0%,
25% 20%, 45% 20%,
60% 0%, 85% 0%,
85% 15%, 100% 15%,
100% 50%,60% 50%,
40% 75%,
60% 90%,
30% 100%,
0% 85%,
0% 75%);
}
100% {
clip-path: polygon(0% 30%,
25% 0%, 45% 30%,
60% 0%, 85% 0%,
85% 15%, 100% 20%,
90% 50%,60% 50%,
60% 75%,
60% 100%,
30% 90%,
0% 100%,
0% 75%);
}
}
/* SECTIONS!!!!!!!!!!!!!!! */
/* DEPLACEMENT!!!!!!! */
.deplacement .forme_deplacement {
/* z-index: 2; */
background-color: rgb(153, 0, 255);
background-size: auto 100%;
background-position: top;
clip-path: polygon(25% 75%,
25% 50%, 45% 50%,
45% 30%, 60% 30%,
60% 15%, 70% 15%,
70% 0%, 85% 0%,
85% 15%, 100% 15%,
100% 50%,85% 50%,
85% 75%, 60% 75%,
60% 90%, 100% 90%,
100% 100%, 15% 100%,
15% 90%, 0% 90%,
0% 75%);
animation: anim_deplacement 5s infinite alternate-reverse;
}
.deplacement .txt {
top: 4vh;
left: 4vw;
width:38%;
}
@media only screen and (max-width: 600px) {
.deplacement .txt {
top: 6vh;
left: 45w;
width:90%;
}
}
@keyframes anim_deplacement {
0% {
clip-path: polygon(25% 100%,
25% 100%, 45% 100%,
45% 100%, 60% 100%,
60% 100%, 70% 100%,
70% 100%, 85% 100%,
85% 100%, 100% 100%,
100% 100%,85% 100%,
85% 100%, 60% 100%,
60% 100%, 100% 100%,
100% 100%, 15% 100%,
15% 100%, 0% 100%,
0% 100%);
}
10% {
clip-path: polygon(25% 90%, 25% 90%, 45% 90%, 45% 90%, 60% 90%, 60% 90%, 70% 90%, 70% 90%, 85% 90%, 85% 90%, 100% 90%, 100% 90%,85% 90%, 85% 90%, 60% 90%,
60% 90%, 100% 90%,
100% 100%, 15% 100%,
15% 90%, 0% 90%,0% 90%);
}
20% {
clip-path: polygon(25% 75%, 25% 75%, 45% 75%, 45% 75%, 60% 75%, 60% 75%, 70% 75%, 70% 75%, 85% 75%, 85% 75%, 100% 75%, 100% 75%,85% 75%, 85% 75%, 60% 75%,
60% 90%, 100% 90%,
100% 100%, 15% 100%,
15% 90%, 0% 90%,
0% 75%);
}
30% {
clip-path: polygon(25% 75%,
25% 50%, 45% 50%, 45% 50%, 60% 50%, 60% 50%, 70% 50%, 70% 50%, 85% 50%, 85% 50%, 100% 50%, 100% 50%,85% 50%,
85% 75%, 60% 75%,
60% 90%, 100% 90%,
100% 100%, 15% 100%,
15% 90%, 0% 90%,
0% 75%);
}
40% {
clip-path: polygon(25% 75%,
25% 50%, 45% 50%,
45% 30%, 60% 30%, 60% 30%, 70% 30%, 70% 30%, 85% 30%, 85% 30%, 100% 30%,
100% 50%,85% 50%,
85% 75%, 60% 75%,
60% 90%, 100% 90%,
100% 100%, 15% 100%,
15% 90%, 0% 90%,
0% 75%);
}
50% {
clip-path: polygon(25% 75%,
25% 50%, 45% 50%,
45% 30%, 60% 30%,
60% 15%, 70% 15%, 70% 15%, 85% 15%, 85% 15%, 100% 15%,
100% 50%,85% 50%,
85% 75%, 60% 75%,
60% 90%, 100% 90%,
100% 100%, 15% 100%,
15% 90%, 0% 90%,
0% 75%);
}
60% {
clip-path: polygon(25% 75%,
25% 50%, 45% 50%,
45% 30%, 60% 30%,
60% 15%, 70% 15%,
70% 0%, 85% 0%,
85% 15%, 100% 15%,
100% 50%,85% 50%,
85% 75%, 60% 75%,
60% 90%, 100% 90%,
100% 100%, 15% 100%,
15% 90%, 0% 90%,
0% 75%);
}
}
/* NOURRITURE!!!!!!! */
.nourriture .forme_nourriture {
/* z-index: 2; */
background-color: rgb(153, 0, 255);
/* background-image: url("../images/patte.jpg"); */
background-size: auto 100%;
background-position: top;
clip-path: polygon(0% 85%, 25% 85%,
25% 50%, 45% 50%,
45% 0%, 75% 0%,
75% 15%, 100% 15%,
100% 60%,75% 60%,
75% 100%, 50% 100%,
50% 90%, 60% 90%,
60% 50%, 80% 50%,
80% 45%, 85% 45%,
85% 35%, 70% 35%,
70% 10%, 65% 10%,
65% 35%, 55% 35%,
55% 70%, 35% 70%,
35% 80%, 45% 80%,
45% 90%, 50% 90%,
50% 100%,
0% 100%
);
animation: anim_nourriture 5s infinite alternate-reverse;
}
.nourriture .txt{
top: 8vh;
left: 3vw;
width: 40%;
}
@media only screen and (max-width: 600px) {
.nourriture .txt{
top: 12vh;
left: 5vw;
width: 90%;
}
}
@keyframes anim_nourriture {
0% {
clip-path: polygon(0% 85%, 25% 85%,
25% 50%, 45% 50%,
45% 0%, 75% 0%,
75% 15%, 100% 15%,
100% 60%,75% 60%,
75% 100%, 50% 100%,
50% 90%, 60% 90%,
60% 50%, 80% 50%,
80% 45%, 85% 45%,
85% 35%, 70% 35%,
70% 10%, 65% 10%,
65% 35%, 55% 35%,
55% 70%, 35% 70%,
35% 80%, 45% 80%,
45% 90%, 50% 90%,
50% 100%,
0% 100%
);
}
33% {
clip-path: polygon(0% 85%, 25% 85%,
25% 50%, 45% 50%,
45% 0%, 75% 0%,
75% 15%, 100% 15%,
100% 60%,75% 60%,
75% 100%, 50% 100%,
53% 90%, 63% 90%,
63% 50%, 83% 50%,
83% 45%, 88% 45%,
88% 35%, 73% 35%,
73% 10%, 68% 10%,
68% 35%, 58% 35%,
58% 70%, 38% 70%,
38% 80%, 48% 80%,
48% 90%, 53% 90%,
53% 100%,
0% 100%
);
}
66% {
clip-path: polygon(0% 85%, 25% 85%,
25% 50%, 45% 50%,
45% 0%, 75% 0%,
75% 15%, 100% 15%,
100% 60%,75% 60%,
75% 100%, 50% 100%,
53% 87%, 63% 87%,
63% 47%, 83% 47%,
83% 42%, 88% 42%,
88% 32%, 73% 32%,
73% 7%, 68% 7%,
68% 32%, 58% 32%,
58% 67%, 38% 67%,
38% 77%, 48% 77%,
48% 87%, 53% 87%,
53% 100%,
0% 100%
);
}
100% {
clip-path: polygon(0% 85%, 25% 85%,
25% 50%, 45% 50%,
45% 0%, 75% 0%,
75% 15%, 100% 15%,
100% 60%,75% 60%,
75% 100%, 50% 100%,
50% 87%, 60% 87%,
60% 47%, 80% 47%,
80% 42%, 85% 42%,
85% 32%, 70% 32%,
70% 7%, 65% 7%,
65% 32%, 55% 32%,
55% 67%, 35% 67%,
35% 77%, 45% 77%,
45% 87%, 50% 87%,
50% 100%,
0% 100%
);
}
}
/* COMMUNICATION!! */
.communication .forme_communication {
z-index: 2;
height: 100vh;
background-color: rgb(153, 0, 255);
background-size: auto 100%;
background-position: top;
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 90%, 50% 90%,
50% 100%, 40% 100%,
40% 80%, 52% 80%,
52% 75%, 80% 75%,
80% 65%, 75% 65%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
animation: anim_communication 5s infinite alternate-reverse;
}
.communication .txt{
top: 37vh;
left: 27vw;
width: 47%;
}
@media only screen and (max-width: 600px) {
.communication .txt{
top: 10vh;
left: 5vw;
width: 90%;
}
}
@keyframes anim_communication {
0% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 90%, 50% 90%,
50% 100%, 40% 100%,
40% 80%, 52% 80%,
52% 75%, 80% 75%,
80% 65%, 75% 65%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
64% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 90%, 50% 90%,
50% 100%, 40% 100%,
40% 80%, 52% 80%,
52% 75%, 80% 75%,
80% 65%, 75% 65%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
67% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 90%, 50% 90%, 50% 90%, 40% 90%,
40% 80%, 52% 80%,
52% 75%, 80% 75%,
80% 65%, 75% 65%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
70% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 90%, 52% 90%, 52% 90%, 52% 90%,
52% 80%, 52% 80%,
52% 75%, 80% 75%,
80% 65%, 75% 65%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
73% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 90%, 80% 90%, 80% 90%, 80% 90%,
80% 80%, 80% 80%,
80% 75%, 80% 75%,
80% 65%, 75% 65%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
76% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 65%, 80% 65%, 80% 65%, 80% 65%,
80% 65%, 80% 65%, 80% 65%, 80% 65%,
80% 65%, 75% 65%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
79% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 100% 10%,
100% 35%, 80% 35%, 80% 35%, 80% 35%,
80% 35%, 80% 35%, 80% 35%, 80% 35%,
80% 35%, 75% 35%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
82% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 90% 5%,
90% 10%, 90% 10%,
90% 35%, 80% 35%, 80% 35%, 80% 35%,
80% 35%, 80% 35%, 80% 35%, 80% 35%,
80% 35%, 75% 35%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
85% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 70% 0%,
70% 5%, 70% 5%,
70% 10%, 70% 10%,
70% 35%, 70% 35%, 70% 35%, 70% 35%,
70% 35%, 70% 35%, 70% 35%, 70% 35%,
70% 35%, 70% 35%,
75% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
88% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 50% 0%,
50% 5%, 50% 5%,
50% 10%, 50% 10%,
50% 35%, 50% 35%, 50% 35%, 50% 35%,
50% 50%, 50% 35%, 50% 35%, 50% 35%,
50% 35%, 50% 35%,
50% 35%, 50% 35%,
50% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
91% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 0%, 25% 0%,
25% 5%, 25% 5%,
25% 10%, 25% 10%,
25% 35%, 25% 35%, 25% 35%, 25% 35%,
25% 50%, 25% 35%, 25% 35%, 25% 35%,
25% 35%, 25% 35%,
25% 35%, 25% 35%,
25% 25%, 25% 25%,
25% 70%, 15% 70%,
15% 100%
);
}
94% {
clip-path: polygon(0% 100%,
0% 40%, 3% 40%,
3% 40%, 25% 40%,
25% 40%, 25% 40%,
25% 40%, 25% 40%,
25% 40%, 25% 40%, 25% 40%, 25% 40%,
25% 40%, 25% 40%, 25% 40%, 25% 40%,
25% 40%, 25% 40%,
25% 40%, 25% 40%,
25% 40%, 25% 40%,
25% 70%, 15% 70%,
15% 100%
);
}
97% {
clip-path: polygon(0% 100%,
0% 70%, 3% 70%,
3% 70%, 25% 70%,
25% 70%, 25% 70%,
25% 70%, 25% 70%,
25% 70%, 25% 70%, 25% 70%, 25% 70%,
25% 70%, 25% 70%, 25% 70%, 25% 70%,
25% 70%, 25% 70%,
25% 70%, 25% 70%,
25% 70%, 25% 70%,
25% 70%, 15% 70%,
15% 100%
);
}
100% {
clip-path: polygon(0% 100%,
0% 100%, 3% 100%,
3% 100%, 25% 100%,
25% 100%, 25% 100%,
25% 100%, 25% 100%,
25% 100%, 25% 100%, 25% 100%, 25% 100%,
25% 100%, 25% 100%, 25% 100%, 25% 100%,
25% 100%, 25% 100%,
25% 100%, 25% 100%,
25% 100%, 25% 100%,
25% 100%, 15% 100%,
15% 100%
);
}
}
/* *** ACTIVITES!!!!!**** */
.activites .forme_activites {
z-index: 2;
height: 100vh;
background-color: rgb(153, 0, 255);
background-size: auto 100%;
background-position: top;
clip-path: polygon(0% 15%,
5% 15%,
5% 0%,
90% 0%,
50% 8%,
30% 15%,
55% 16%,
25% 30%,
45% 45%,
18% 60%,
60% 65%,
35% 75%,
30% 90%,
45% 88%,
90% 100%,
0% 100%);
animation: anim_activites 5s infinite alternate-reverse;
}
.activites .txt{
top: 9vh;
left: 63vw;
right: 20vw;
width: 35%;
}
@media only screen and (max-width: 600px) {
.activites .txt{
top: 2vh;
left: 5vw;
right: 20vw;
width: 90%;
}
}
@keyframes anim_activites {
0% {
clip-path: polygon(0% 15%,
5% 15%,
5% 0%,
90% 0%,
50% 8%,
30% 15%,
55% 16%,
25% 30%,
45% 45%,
18% 60%,
60% 65%,
35% 75%,
30% 90%,
45% 88%,
90% 100%,
0% 100%);
}
30% {
clip-path: polygon(0% 65%,
5% 65%,
5% 0%,
70% 0%,
50% 8%,
40% 15%,
60% 16%,
25% 30%,
60% 45%,
30% 60%,
60% 70%,
35% 75%,
30% 90%,
80% 88%,
90% 100%,
0% 100%);
}
60% {
clip-path: polygon(0% 65%,
0% 65%,
0% 0%,
70% 0%,
50% 8%,
40% 15%,
60% 30%,
20% 45%,
50% 45%,
30% 70%,
60% 70%,
50% 75%,
30% 80%,
80% 88%,
90% 100%,
0% 100%);
}
100% {
clip-path: polygon(0% 65%,
0% 65%,
0% 0%,
70% 5%,
50% 10%,
20% 15%,
60% 30%,
20% 45%,
50% 45%,
30% 60%,
80% 70%,
50% 75%,
30% 80%,
80% 88%,
90% 100%,
0% 100%);
}
}
/* CONSTRUCTION!!! */
.construction .forme_construction {
z-index: 2;
height: 100vh;
background-color: rgb(153, 0, 255);
background-size: auto 100%;
background-position: top;
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 0%, 55% 0%,
55% 10%,70% 10%,
70% 40%, 75% 40%,
75% 55%, 85% 55%,
85% 75%, 100% 75%,
100% 100%, 75% 100%,
75% 95%,65% 95%,
65% 100%, 45% 100%,
45% 90%, 25% 90%,
25% 100%
);
animation: anim_construction 5s infinite alternate-reverse;
}
.construction .txt{
top: 4vh;
left: 3vw;
right: 20vw;
width: 35%;
}
@media only screen and (max-width: 600px) {
.construction .txt{
top: 20vh;
left: 5vw;
right: 20vw;
width: 90%;
}
}
@keyframes anim_construction {
0% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 0%, 55% 0%,
55% 10%,70% 10%,
70% 40%, 75% 40%,
75% 55%, 85% 55%,
85% 75%, 100% 75%,
100% 100%, 75% 100%,
75% 95%,65% 95%,
65% 100%, 45% 100%,
45% 90%, 25% 90%,
25% 100%
);
}
55% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 0%, 55% 0%,
55% 10%,70% 10%,
70% 40%, 75% 40%,
75% 55%, 85% 55%,
85% 75%, 100% 75%,
100% 100%, 75% 100%,
75% 95%,65% 95%,
65% 100%, 45% 100%,
45% 90%, 25% 90%,
25% 100%
);
}
60% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 0%, 55% 0%,
55% 10%,70% 10%,
70% 40%, 75% 40%,
75% 55%, 85% 55%,
85% 100%, 100% 100%,100% 100%, 75% 100%,
75% 95%,65% 95%,
65% 100%, 45% 100%,
45% 90%, 25% 90%,
25% 100%
);
}
65% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 0%, 55% 0%,
55% 10%,70% 10%,
70% 40%, 75% 40%,
75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%,
75% 95%,65% 95%,
65% 100%, 45% 100%,
45% 90%, 25% 90%,
25% 100%
);
}
70% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 0%, 55% 0%,
55% 10%,70% 10%,
70% 100%, 75% 100%,75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%, 75% 100%,65% 100%, 65% 100%, 45% 100%,
45% 90%, 25% 90%,
25% 100%
);
}
75% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 0%, 55% 0%,
55% 100%,70% 100%,70% 100%, 75% 100%,75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%, 75% 100%,65% 100%, 65% 100%, 45% 100%,
45% 90%, 25% 90%,
25% 100%
);
}
80% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 30%, 40% 30%,
40% 100%, 55% 100%,55% 100%,70% 100%,70% 100%, 75% 100%,75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%, 75% 100%,65% 100%, 65% 100%, 45% 100%,45% 100%, 25% 100%,25% 100%
);
}
85% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 60%, 30% 60%,
30% 100%, 40% 100%,40% 100%, 55% 100%,55% 100%,70% 100%,70% 100%, 75% 100%,75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%, 75% 100%,65% 100%, 65% 100%, 45% 100%,45% 100%, 25% 100%,25% 100%
);
}
90% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 80%, 15% 80%,
15% 100%, 30% 100%, 30% 100%, 40% 100%,40% 100%, 55% 100%,55% 100%,70% 100%,70% 100%, 75% 100%,75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%, 75% 100%,65% 100%, 65% 100%, 45% 100%,45% 100%, 25% 100%,25% 100%
);
}
95% {
clip-path: polygon(0% 100%,
0% 90%, 10% 90%,
10% 100%, 15% 100%, 15% 100%, 30% 100%, 30% 100%, 40% 100%,40% 100%, 55% 100%,55% 100%,70% 100%,70% 100%, 75% 100%,75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%, 75% 100%,65% 100%, 65% 100%, 45% 100%,45% 100%, 25% 100%,25% 100%
);
}
100% {
clip-path: polygon(0% 100%, 0% 100%, 10% 100%,10% 100%, 15% 100%, 15% 100%, 30% 100%, 30% 100%, 40% 100%,40% 100%, 55% 100%,55% 100%,70% 100%,70% 100%, 75% 100%,75% 100%, 85% 100%, 85% 100%, 100% 100%,100% 100%, 75% 100%, 75% 100%,65% 100%, 65% 100%, 45% 100%,45% 100%, 25% 100%,25% 100%
);
}