Landing page + countdown #11
2 changed files with 9 additions and 6 deletions
|
@ -108,14 +108,13 @@
|
||||||
|
|
||||||
@keyframes compare-anim {
|
@keyframes compare-anim {
|
||||||
0% {
|
0% {
|
||||||
clip-path: inset(100% 100% 100% 0%);
|
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
clip-path: inset(100% 100% 100% 100%);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.compare-items-dynamic {
|
.compare-items-dynamic {
|
||||||
.compare-duet {
|
.compare-duet {
|
||||||
|
border-radius: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@ -126,12 +125,16 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clip-path: inset(100% 100% 100% 0%);
|
clip-path: inset(100% 100% 100% 0%);
|
||||||
}
|
}
|
||||||
|
.compare-hidden {
|
||||||
|
clip-path: inset(100% 100% 100% 0%);
|
||||||
|
transition: clip-path 2s cubic-bezier(.86,0,.07,1);
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.compare-duet:hover {
|
.compare-duet:hover {
|
||||||
.compare-hidden {
|
.compare-hidden {
|
||||||
animation: compare-anim 2s cubic-bezier(.86,0,.07,1);
|
clip-path: inset(100% 100% 100% 100%);
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -76,7 +76,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<figcaption>Comparaison crypte vers l'est</figcaption>
|
<figcaption>Comparaison de la crypte vers l'est</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<div class="compare-item compare-west">
|
<div class="compare-item compare-west">
|
||||||
|
@ -93,7 +93,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<figcaption>Comparaison crypte vers l'ouest</figcaption>
|
<figcaption>Comparaison de la crypte vers l'ouest</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue