add contact card
This commit is contained in:
parent
c5b4008519
commit
4823c9e24d
2 changed files with 151 additions and 56 deletions
95
contact-card.html
Normal file
95
contact-card.html
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<head>
|
||||||
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
background: #eff3f6;
|
||||||
|
margin-top:20px;
|
||||||
|
}
|
||||||
|
.thumb-lg {
|
||||||
|
height: 70px;
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
border: none;
|
||||||
|
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.card-body {
|
||||||
|
padding: 1.5rem 1.5rem 1rem 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.m-b-30 {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.social-links {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.social-links li {
|
||||||
|
color: rgba(33, 37, 41, 0.75);
|
||||||
|
}
|
||||||
|
.social-links li a {
|
||||||
|
color: rgba(33, 37, 41, 0.75);
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
height: 30px;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
.media {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.25rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.media-body p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4">
|
||||||
|
<div class="card m-b-30">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="media">
|
||||||
|
<img class="d-flex mr-3 rounded-circle img-thumbnail thumb-lg" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Unknown_Member.jpg?20170805162126" alt="Generic placeholder image" />
|
||||||
|
<div class="media-body">
|
||||||
|
<h5 class="mt-0 font-18 mb-1">Dr. Gerd Britsch</h5>
|
||||||
|
<p class="text-muted font-14">Vogel- und Reptilienpraxis</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contact">
|
||||||
|
<ul class="social-links mb-0">
|
||||||
|
<li>
|
||||||
|
<i class="fa fa-phone"></i>
|
||||||
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="1234567890">
|
||||||
|
<span>+49 (0)721 6184280</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa fa-envelope"></i>
|
||||||
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook">
|
||||||
|
<span>info@vogel-und-reptilien-tierarzt.de</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa fa-home"></i>
|
||||||
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter">
|
||||||
|
<span>vogel-und-reptilien-tierarzt.de</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa fa-map"></i>
|
||||||
|
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="@skypename">
|
||||||
|
<span>Am Storrenacker 1b, 76139 Karlsruhe</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
108
index.html
108
index.html
|
|
@ -12,68 +12,67 @@
|
||||||
<link rel="stylesheet" href="https://nigelotoole.github.io/progress-tracker/styles/progress-tracker.css">
|
<link rel="stylesheet" href="https://nigelotoole.github.io/progress-tracker/styles/progress-tracker.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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,
|
<div class="stepTracker">
|
||||||
die gefunden werden - sogenannte Fundtiere.
|
<ul class="progress-tracker progress-tracker-mobile progress-tracker--text">
|
||||||
Wir haben für die Versorgung von verletzten oder
|
<li class="progress-step is-complete">
|
||||||
verwaisten Wildtieren Kontakt zu Menschen oder
|
<div class="progress-marker" data-text="1"></div>
|
||||||
Vereinen oder Institutionen, die sich um diese Tiere kümmern. Wir arbeiten mit Tierärzten zusammen,
|
<div class="progress-text">
|
||||||
damit keine Tier unversorgt bleibt.</p>
|
<h4 class="progress-title">Wildtier gefunden</h4>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
<div class="stepTracker">
|
<li class="progress-step">
|
||||||
<ul class="progress-tracker progress-tracker-mobile progress-tracker--text">
|
<div class="progress-marker" data-text="2"></div>
|
||||||
<li class="progress-step is-complete">
|
<div class="progress-text">
|
||||||
<div class="progress-marker" data-text="1"></div>
|
<h4 class="progress-title">Klassifizieren</h4>
|
||||||
<div class="progress-text">
|
</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>
|
<h4 class="progress-title">Wildtier gefunden</h4>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="progress-step">
|
<li class="progress-step">
|
||||||
<div class="progress-marker" data-text="2"></div>
|
<div class="progress-marker" data-text="2">
|
||||||
<div class="progress-text">
|
<div class="progress-text">
|
||||||
<h4 class="progress-title">Klassifizieren</h4>
|
<h4 class="progress-title">Klassifizieren</h4>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="progress-step">
|
<li class="progress-step">
|
||||||
<div class="progress-marker" data-text="3"></div>
|
<div class="progress-marker" data-text="3">
|
||||||
<div class="progress-text">
|
<div class="progress-text">
|
||||||
<h4 class="progress-title">Hilfestellung erhalten</h4>
|
<h4 class="progress-title">Hilfestellung erhalten</h4>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="progress-tracker progress-tracker-desktop progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
|
</div>
|
||||||
<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">
|
<main>
|
||||||
<div class="progress-marker" data-text="2">
|
<!-- <div class="infoArea">Test 123</div> -->
|
||||||
<div class="progress-text">
|
<div id="questionContainer"></div>
|
||||||
<h4 class="progress-title">Klassifizieren</h4>
|
</main>
|
||||||
</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>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<!-- <div class="infoArea">Test 123</div> -->
|
|
||||||
<div id="questionContainer"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.progress-tracker-desktop .progress-step:last-child {
|
.progress-tracker-desktop .progress-step:last-child {
|
||||||
|
|
@ -89,7 +88,7 @@
|
||||||
}
|
}
|
||||||
.progress-tracker {
|
.progress-tracker {
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.25rem;
|
||||||
}
|
}
|
||||||
.progress-tracker-mobile {
|
.progress-tracker-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -177,8 +176,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: top;
|
align-items: top;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
/* width: 100%; */
|
width: 100%;
|
||||||
margin: auto;
|
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
@ -186,6 +184,8 @@
|
||||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
main {
|
main {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue