switch to bootstrap
This commit is contained in:
parent
4823c9e24d
commit
734c79aef3
1 changed files with 122 additions and 31 deletions
151
index.html
151
index.html
|
|
@ -4,14 +4,15 @@
|
||||||
<title>Questionnaire Wizard</title>
|
<title>Questionnaire Wizard</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Condensed:wght@100;200;300;400&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://unpkg.com/feather-icons"></script>
|
<script src="https://unpkg.com/feather-icons"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
||||||
<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">
|
||||||
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="questionaire">
|
||||||
<p style="display: none;">Wir sind ein Verein, der sich um Wildtiere kümmert,
|
<p style="display: none;">Wir sind ein Verein, der sich um Wildtiere kümmert,
|
||||||
die gefunden werden - sogenannte Fundtiere.
|
die gefunden werden - sogenannte Fundtiere.
|
||||||
Wir haben für die Versorgung von verletzten oder
|
Wir haben für die Versorgung von verletzten oder
|
||||||
|
|
@ -73,8 +74,70 @@
|
||||||
<!-- <div class="infoArea">Test 123</div> -->
|
<!-- <div class="infoArea">Test 123</div> -->
|
||||||
<div id="questionContainer"></div>
|
<div id="questionContainer"></div>
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
<style>
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
background-color: #f7fafa;
|
||||||
|
}
|
||||||
|
.questionaire {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
.progress-tracker-desktop .progress-step:last-child {
|
.progress-tracker-desktop .progress-step:last-child {
|
||||||
display: inline-table !important;
|
display: inline-table !important;
|
||||||
flex-grow: unset !important;
|
flex-grow: unset !important;
|
||||||
|
|
@ -87,8 +150,8 @@
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
.progress-tracker {
|
.progress-tracker {
|
||||||
margin: 30px auto;
|
|
||||||
padding: 0 0.25rem;
|
padding: 0 0.25rem;
|
||||||
|
margin: 1rem auto !important;
|
||||||
}
|
}
|
||||||
.progress-tracker-mobile {
|
.progress-tracker-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -134,11 +197,11 @@
|
||||||
}
|
}
|
||||||
.progress-marker::before {
|
.progress-marker::before {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
font-weight: 1000;
|
font-weight: 500;
|
||||||
padding: 0.1rem;
|
padding: 0.1rem;
|
||||||
}
|
}
|
||||||
.progress-title {
|
.progress-title {
|
||||||
font-weight: 400;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
.progress-text {
|
.progress-text {
|
||||||
background-color: #f7fafa !important;
|
background-color: #f7fafa !important;
|
||||||
|
|
@ -151,21 +214,9 @@
|
||||||
.progress-step.is-complete .progress-marker::before, .progress-step.is-progress .progress-marker::before {
|
.progress-step.is-complete .progress-marker::before, .progress-step.is-progress .progress-marker::before {
|
||||||
background-color: #008296 !important;
|
background-color: #008296 !important;
|
||||||
}
|
}
|
||||||
html {
|
|
||||||
background: #f7fafa;
|
|
||||||
font-family: "Roboto Condensed";
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 0rem;
|
margin: 1rem 0;
|
||||||
font-weight: 800;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a.backLink {
|
a.backLink {
|
||||||
|
|
@ -175,7 +226,7 @@
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: top;
|
align-items: top;
|
||||||
max-width: 500px;
|
max-width: 600px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
@ -184,8 +235,7 @@
|
||||||
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;
|
margin: 1rem !important
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
main {
|
main {
|
||||||
|
|
@ -198,10 +248,8 @@
|
||||||
box-shadow: 0px 2px 5px rgba(213, 217, 217, 0.5);
|
box-shadow: 0px 2px 5px rgba(213, 217, 217, 0.5);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
color: black;
|
color: black;
|
||||||
margin: 5px 0;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 9px 20px 9px 32px;
|
padding: 9px 15px 9px 27px;
|
||||||
font-size: 0.8rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -210,14 +258,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
button svg {
|
button svg {
|
||||||
height: 0.8rem;
|
height: 1rem;
|
||||||
stroke-width: 3;
|
stroke-width: 2;
|
||||||
|
min-width: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#buttonContainer {
|
#buttonContainer {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: calc(50% - 6.5px) calc(50% - 6.5px);
|
||||||
gap: 7px 13px;
|
gap: 13px 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
|
@ -233,6 +282,7 @@
|
||||||
#questionContainer {
|
#questionContainer {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.25s ease-in-out;
|
transition: opacity 0.25s ease-in-out;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#questionContainer.show {
|
#questionContainer.show {
|
||||||
|
|
@ -240,10 +290,51 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#questionContainer > svg {
|
#questionContainer > svg {
|
||||||
margin-bottom: -6px;
|
margin-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
.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>
|
||||||
<script>
|
<script>
|
||||||
var questions = {
|
var questions = {
|
||||||
"1": {
|
"1": {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue