onny/witas-ka
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add contact card

Browse source
This commit is contained in:
Jonas Heinrich 2024-01-18 18:01:57 +01:00
parent c5b4008519
commit 4823c9e24d
2 changed files with 151 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

112
index.html
View file

@ -12,68 +12,67 @@
<link rel="stylesheet" href="https://nigelotoole.github.io/progress-tracker/styles/progress-tracker.css">
</head>
<body>
<p style="display: none;">Wir sind ein Verein, der sich um Wildtiere kümmert,
die gefunden werden - sogenannte Fundtiere.
Wir haben für die Versorgung von verletzten oder
verwaisten Wildtieren Kontakt zu Menschen oder
Vereinen oder Institutionen, die sich um diese Tiere kümmern. Wir arbeiten mit Tierärzten zusammen,
damit keine Tier unversorgt bleibt.</p>
<p style="display: none;">Wir sind ein Verein, der sich um Wildtiere kümmert,
die gefunden werden - sogenannte Fundtiere.
Wir haben für die Versorgung von verletzten oder
verwaisten Wildtieren Kontakt zu Menschen oder
Vereinen oder Institutionen, die sich um diese Tiere kümmern. Wir arbeiten mit Tierärzten zusammen,
damit keine Tier unversorgt bleibt.</p>
<div class="stepTracker">
<ul class="progress-tracker progress-tracker-mobile progress-tracker--text">
<li class="progress-step is-complete">
<div class="progress-marker" data-text="1"></div>
<div class="progress-text">
<h4 class="progress-title">Wildtier gefunden</h4>
</div>
</li>
<div class="stepTracker">
<ul class="progress-tracker progress-tracker-mobile progress-tracker--text">
<li class="progress-step is-complete">
<div class="progress-marker" data-text="1"></div>
<div class="progress-text">
<li class="progress-step">
<div class="progress-marker" data-text="2"></div>
<div class="progress-text">
<h4 class="progress-title">Klassifizieren</h4>
</div>
</li>
<li class="progress-step">
<div class="progress-marker" data-text="3"></div>
<div class="progress-text">
<h4 class="progress-title">Hilfestellung erhalten</h4>
</div>
</li>
</ul>
<ul class="progress-tracker progress-tracker-desktop progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
<li class="progress-step is-complete">
<div class="progress-marker" data-text="1">
<div class="progress-text">
<h4 class="progress-title">Wildtier gefunden</h4>
</div>
</div>
</li>
<li class="progress-step">
<div class="progress-marker" data-text="2"></div>
<div class="progress-text">
</li>
<li class="progress-step">
<div class="progress-marker" data-text="2">
<div class="progress-text">
<h4 class="progress-title">Klassifizieren</h4>
</div>
</div>
</li>
<li class="progress-step">
<div class="progress-marker" data-text="3"></div>
<div class="progress-text">
</li>
<li class="progress-step">
<div class="progress-marker" data-text="3">
<div class="progress-text">
<h4 class="progress-title">Hilfestellung erhalten</h4>
</div>
</div>
</li>
</ul>
<ul class="progress-tracker progress-tracker-desktop progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
<li class="progress-step is-complete">
<div class="progress-marker" data-text="1">
<div class="progress-text">
<h4 class="progress-title">Wildtier gefunden</h4>
</div>
</div>
</li>
<li class="progress-step">
<div class="progress-marker" data-text="2">
<div class="progress-text">
<h4 class="progress-title">Klassifizieren</h4>
</div>
</div>
</li>
<li class="progress-step">
<div class="progress-marker" data-text="3">
<div class="progress-text">
<h4 class="progress-title">Hilfestellung erhalten</h4>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<main>
<!-- <div class="infoArea">Test 123</div> -->
<div id="questionContainer"></div>
</main>
<main>
<!-- <div class="infoArea">Test 123</div> -->
<div id="questionContainer"></div>
</main>
<style>
.progress-tracker-desktop .progress-step:last-child {
@ -89,7 +88,7 @@
}
.progress-tracker {
margin: 30px auto;
padding: 0 0.5rem;
padding: 0 0.25rem;
}
.progress-tracker-mobile {
display: none;
@ -177,8 +176,7 @@
display: flex;
align-items: top;
max-width: 500px;
/* width: 100%; */
margin: auto;
width: 100%;
padding: 40px;
background-color: #fff;
border-radius: 5px;
@ -186,6 +184,8 @@
box-shadow: 0 0 10px rgba(0,0,0,.1);
font-size: 0.95rem;
gap: 2rem;
margin: 0 auto;
box-sizing: border-box;
}
@media (max-width: 600px) {
main {