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

95
contact-card.html Normal file
View 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>

8
index.html
View file

@ -12,7 +12,6 @@
<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
@ -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 {