59 lines
1.6 KiB
HTML
59 lines
1.6 KiB
HTML
---
|
|
layout: page
|
|
permalink: '/kontakt/ok/'
|
|
---
|
|
<script src="{{ '/assets/js/kontakt.js' | relative_url }}"></script>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<div class="container" id="section-wrapper">
|
|
<section id="kontakt">
|
|
<div class="center row">
|
|
<h2 class="thin-text">Kontakt</h2>
|
|
</div>
|
|
<div class="row">
|
|
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
|
|
</div>
|
|
<div class="row center">
|
|
<p class="flow-text">Deine Nachricht wurde gesendet und wird bald bearbeitet.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<style>
|
|
.checkmark {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
stroke-width: 2;
|
|
stroke: #fff;
|
|
stroke-miterlimit: 10;
|
|
margin: 5% auto;
|
|
box-shadow: inset 0px 0px 0px #2e7d32;
|
|
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
|
|
}
|
|
|
|
.checkmark__check {
|
|
transform-origin: 50% 50%;
|
|
stroke-dasharray: 48;
|
|
stroke-dashoffset: 48;
|
|
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
|
|
}
|
|
|
|
@keyframes stroke {
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
@keyframes scale {
|
|
0%, 100% {
|
|
transform: none;
|
|
}
|
|
50% {
|
|
transform: scale3d(1.1, 1.1, 1);
|
|
}
|
|
}
|
|
@keyframes fill {
|
|
100% {
|
|
box-shadow: inset 0px 0px 0px 60px #2e7d32;
|
|
}
|
|
}
|
|
</style> |