From 5726785ea0868f2df4104a61344c12c1c0da8348 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 14 Jun 2024 20:02:29 +0200
Subject: [PATCH] general beck to the top button
---
static/hint.css | 293 ++++++++++++++++++++++++++++++++++++++++
static/style.css | 50 ++++++-
wiki/layout.html | 13 +-
wiki/pages/bfh.html | 45 +-----
wiki/pages/example.html | 70 +++++++++-
5 files changed, 417 insertions(+), 54 deletions(-)
create mode 100644 static/hint.css
diff --git a/static/hint.css b/static/hint.css
new file mode 100644
index 00000000..185eb096
--- /dev/null
+++ b/static/hint.css
@@ -0,0 +1,293 @@
+:root {
+ /* our colours*/
+ --darkpurple: #850F78;
+ --mediumpurple: #bc15aa;
+ /*--purple: #B85BD1; */
+ --highlight2: #F57D22;
+ --lightorange: #f9b581;
+ --highlight: #F4CC1E;
+ --lightyellow: #fae99e;
+ --lightblue: #A0A7F3 ;
+ --offblack: #32232C ;
+ --offwhite: #e9dff1;
+ --darkoffwhite: #d7c5e6;
+ --ourbeige: #FFF6F2;
+ --background: #4ea194;
+ /*igem colours*/
+ --igemdarkgreen: #006530;
+ --igemmediumgreen: #019968;
+ --igemlightgreen: #99cb9a;
+
+ --info-border-color: var(--mediumpurple);
+ --vp-ct: var(--darkpurple);
+ --info-border-color: var(--highlight);
+ --info-bg-color: var(--lightyellow);
+ --info-title-color: var(--darkpurple);
+ --info-code-bg-color: var(--lightyellow);
+ --note-border-color: var(--darkpurple);
+ --note-bg-color: var(--darkoffwhite);
+ --note-title-color: var(--darkpurple);
+ --note-code-bg-color: var(--darkoffwhite);
+ --tip-border-color: var(--darkpurple);
+ --tip-bg-color: var(--darkoffwhite);
+ --tip-title-color: var(--darkpurple);
+ --tip-code-bg-color: var(--darkoffwhite);
+ --warning-border-color: var(--highlight2);
+ --warning-bg-color: var(--lightorange);
+ --warning-title-color: var(--darkpurple);
+ --warning-code-bg-color: var(--lightorange);
+ }
+
+.hint-container {
+ position:relative;
+ transition:background var(--vp-ct),border-color var(--vp-ct),color var(--vp-ct)
+ }
+ @media print {
+ .hint-container {
+ page-break-inside:avoid
+ }
+ }
+ .hint-container .hint-container-title {
+ position:relative;
+ font-weight:600;
+ line-height:1.25
+ }
+ .hint-container.info,
+ .hint-container.note,
+ .hint-container.tip,
+ .hint-container.warning,
+ .hint-container.danger {
+ margin:1rem 0;
+ padding:.25rem 1rem;
+ border-inline-start-width:.3rem;
+ border-inline-start-style:solid;
+ border-radius:.5rem;
+ color:inherit
+ }
+ @media (max-width: 419px) {
+ .hint-container.info,
+ .hint-container.note,
+ .hint-container.tip,
+ .hint-container.warning,
+ .hint-container.danger {
+ margin-inline:-.75rem
+ }
+ }
+ .hint-container.info .hint-container-title,
+ .hint-container.note .hint-container-title,
+ .hint-container.tip .hint-container-title,
+ .hint-container.warning .hint-container-title,
+ .hint-container.danger .hint-container-title {
+ padding-inline-start:1.75rem
+ }
+ @media print {
+ .hint-container.info .hint-container-title,
+ .hint-container.note .hint-container-title,
+ .hint-container.tip .hint-container-title,
+ .hint-container.warning .hint-container-title,
+ .hint-container.danger .hint-container-title {
+ padding-inline-start:0
+ }
+ }
+ .hint-container.info .hint-container-title:before,
+ .hint-container.note .hint-container-title:before,
+ .hint-container.tip .hint-container-title:before,
+ .hint-container.warning .hint-container-title:before,
+ .hint-container.danger .hint-container-title:before {
+ content:" ";
+ position:absolute;
+ top:calc(50% - .6125em);
+ left:0;
+ width:1.25em;
+ height:1.25em;
+ background-position:left;
+ background-repeat:no-repeat
+ }
+ @media print {
+ .hint-container.info .hint-container-title:before,
+ .hint-container.note .hint-container-title:before,
+ .hint-container.tip .hint-container-title:before,
+ .hint-container.warning .hint-container-title:before,
+ .hint-container.danger .hint-container-title:before {
+ display:none
+ }
+ }
+ html[dir=rtl] .hint-container.info .hint-container-title:before,
+ html[dir=rtl] .hint-container.note .hint-container-title:before,
+ html[dir=rtl] .hint-container.tip .hint-container-title:before,
+ html[dir=rtl] .hint-container.warning .hint-container-title:before,
+ html[dir=rtl] .hint-container.danger .hint-container-title:before {
+ right:0;
+ left:unset
+ }
+ .hint-container.info p,
+ .hint-container.note p,
+ .hint-container.tip p,
+ .hint-container.warning p,
+ .hint-container.danger p {
+ line-height:1.5
+ }
+ .hint-container.info a,
+ .hint-container.note a,
+ .hint-container.tip a,
+ .hint-container.warning a,
+ .hint-container.danger a {
+ color:var(--vp-tc)
+ }
+ .hint-container.info {
+ border-color:var(--info-border-color);
+ background:var(--info-bg-color)
+ }
+ .hint-container.info>.hint-container-title {
+ color:var(--info-title-color)
+ }
+ .hint-container.info>.hint-container-title:before {
+ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%234cb3d4'/%3E%3C/svg%3E")
+ }
+ .hint-container.info code {
+ background:var(--info-code-bg-color)
+ }
+ .hint-container.note {
+ border-color:var(--note-border-color);
+ background:var(--note-bg-color)
+ }
+ .hint-container.note>.hint-container-title {
+ color:var(--note-title-color)
+ }
+ .hint-container.note>.hint-container-title:before {
+ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='%23ccc'/%3E%3C/svg%3E")
+ }
+ .hint-container.note code {
+ background:var(--note-code-bg-color)
+ }
+ .hint-container.tip {
+ border-color:var(--tip-border-color);
+ background:var(--tip-bg-color)
+ }
+ .hint-container.tip>.hint-container-title {
+ color:var(--tip-title-color)
+ }
+ .hint-container.tip>.hint-container-title:before {
+ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23009400' d='M7.941 18c-.297-1.273-1.637-2.314-2.187-3a8 8 0 1 1 12.49.002c-.55.685-1.888 1.726-2.185 2.998H7.94zM16 20v1a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h8zm-3-9.995V6l-4.5 6.005H11v4l4.5-6H13z'/%3E%3C/svg%3E")
+ }
+ .hint-container.tip code {
+ background:var(--tip-code-bg-color)
+ }
+ .hint-container.warning {
+ border-color:var(--warning-border-color);
+ background:var(--warning-bg-color)
+ }
+ .hint-container.warning>.hint-container-title {
+ color:var(--warning-title-color)
+ }
+ .hint-container.warning>.hint-container-title:before {
+ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M576.286 752.57v-95.425q0-7.031-4.771-11.802t-11.3-4.772h-96.43q-6.528 0-11.3 4.772t-4.77 11.802v95.424q0 7.031 4.77 11.803t11.3 4.77h96.43q6.528 0 11.3-4.77t4.77-11.803zm-1.005-187.836 9.04-230.524q0-6.027-5.022-9.543-6.529-5.524-12.053-5.524H456.754q-5.524 0-12.053 5.524-5.022 3.516-5.022 10.547l8.538 229.52q0 5.023 5.022 8.287t12.053 3.265h92.913q7.032 0 11.803-3.265t5.273-8.287zM568.25 95.65l385.714 707.142q17.578 31.641-1.004 63.282-8.538 14.564-23.354 23.102t-31.892 8.538H126.286q-17.076 0-31.892-8.538T71.04 866.074q-18.582-31.641-1.004-63.282L455.75 95.65q8.538-15.57 23.605-24.61T512 62t32.645 9.04 23.605 24.61z' fill='%23e6a700'/%3E%3C/svg%3E")
+ }
+ .hint-container.warning code {
+ background:var(--warning-code-bg-color)
+ }
+ .hint-container.danger {
+ border-color:var(--danger-border-color);
+ background:var(--danger-bg-color)
+ }
+ .hint-container.danger>.hint-container-title {
+ color:var(--danger-title-color)
+ }
+ .hint-container.danger>.hint-container-title:before {
+ background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10v3.764a2 2 0 0 1-1.106 1.789L18 19v1a3 3 0 0 1-2.824 2.995L14.95 23a2.5 2.5 0 0 0 .044-.33L15 22.5V22a2 2 0 0 0-1.85-1.995L13 20h-2a2 2 0 0 0-1.995 1.85L9 22v.5c0 .171.017.339.05.5H9a3 3 0 0 1-3-3v-1l-2.894-1.447A2 2 0 0 1 2 15.763V12C2 6.477 6.477 2 12 2zm-4 9a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z' fill='%23e13238'/%3E%3C/svg%3E")
+ }
+ .hint-container.danger code {
+ background:var(--danger-code-bg-color)
+ }
+ .hint-container.details {
+ position:relative;
+ display:block;
+ margin:1.6em 0;
+ padding:1.5rem;
+ border-radius:.5rem;
+ background:var(--detail-bg-color);
+ color:var(--detail-text-color);
+ transition:background var(--vp-tt),color var(--vp-tt)
+ }
+ @media print {
+ .hint-container.details {
+ display:none
+ }
+ }
+ @media (max-width: 419px) {
+ .hint-container.details {
+ margin-inline:-.75rem
+ }
+ }
+ .hint-container.details h4 {
+ margin-top:0
+ }
+ .hint-container.details figure:last-child,
+ .hint-container.details p:last-child {
+ margin-bottom:0;
+ padding-bottom:0
+ }
+ .hint-container.details a {
+ color:var(--vp-tc)
+ }
+ .hint-container.details code {
+ background:var(--detail-code-bg-color)
+ }
+ .hint-container.details summary {
+ position:relative;
+ margin:-1.5rem;
+ padding-top:1.5rem;
+ padding-bottom:1.5rem;
+ padding-inline-start:4rem;
+ padding-inline-end:1.5rem;
+ list-style:none;
+ cursor:pointer
+ }
+ .hint-container.details summary::-webkit-details-marker,
+ .hint-container.details summary::marker {
+ color:transparent;
+ font-size:0
+ }
+ .hint-container.details summary:before,
+ .hint-container.details summary:after {
+ content:" ";
+ position:absolute;
+ top:calc(50% - .75rem);
+ left:1.5rem;
+ width:1.5rem;
+ height:1.5rem
+ }
+ @media print {
+ .hint-container.details summary:before,
+ .hint-container.details summary:after {
+ display:block
+ }
+ }
+ html[dir=rtl] .hint-container.details summary:before,
+ html[dir=rtl] .hint-container.details summary:after {
+ right:1.5rem;
+ left:unset
+ }
+ .hint-container.details summary:before {
+ border-radius:50%;
+ background:#ccc;
+ transition:background var(--vp-ct),transform var(--vp-tt)
+ }
+ html[data-theme=dark] .hint-container.details summary:before {
+ background:#555
+ }
+ .hint-container.details summary:after {
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
+ line-height:normal;
+ transition:transform var(--vp-tt);
+ transform:rotate(90deg)
+ }
+ html[data-theme=dark] .hint-container.details summary:after {
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E")
+ }
+ .hint-container.details[open]>summary {
+ margin-bottom:.5em
+ }
+ .hint-container.details[open]>summary:after {
+ transform:rotate(180deg)
+ }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 26e13a8e..0a4018f7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -5,6 +5,9 @@ body {
background-color: var(--offwhite);
color: var(--offblack);
}
+.col{
+ object-fit: contain;
+}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: var(--darkpurple) !important; }
.bg-hero { background-color: var(--purple) }
@@ -31,9 +34,11 @@ body {
:root {
/* our colours*/
--darkpurple: #850F78;
+ --mediumpurple: #bc15aa;
/*--purple: #B85BD1; */
--highlight2: #F57D22;
--highlight: #F4CC1E;
+ --lightyellow: #fae99e;
--lightblue: #A0A7F3 ;
--offblack: #32232C ;
--offwhite: #e9dff1;
@@ -59,8 +64,8 @@ body {
/*collapsible*/
/* Style the button that is used to open and close the collapsible content */
.collapsible {
- background-color: var(--lightblue);
- color: #444;
+ background-color: var(--mediumpurple);
+ color: var(--offblack);
cursor: pointer;
padding: 18px;
width: 100%;
@@ -70,6 +75,8 @@ body {
font-size: 15px;
margin: 5px;
border-radius: 3px;
+ border-style: outset;
+ border-color: var(--darkpurple);
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
@@ -84,6 +91,8 @@ body {
overflow: hidden;
background-color: var(--offwhite);
border-radius: 3px;
+ border-color: var(--darkpurple);
+ border-style: dotted;
}
@@ -164,7 +173,7 @@ svg text:hover{
width: 100% !important;
height: auto !important;
}
-.round-img{
+.round-img-vert{
width: 100% !important;
height: auto !important;
border-radius:50%;
@@ -174,11 +183,44 @@ svg text:hover{
align-items: center;
margin: auto;
}
+.round-img-hor{
+ border-radius:50%;
+ overflow:hidden;
+ padding-top: 5%;
+ padding-bottom: 5%;
+ align-items: center;
+ margin: auto;
+}
+.round-img-vert:hover{
+ width: 110% !important;
+ transition: all 0.1s linear;
+}
.videoblock{
- width: 100%;
+ width: 100%;
+ padding-top: 15px;
+ padding-bottom: 15px;
}
.video-desc{
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
+}
+
+
+.backtotop {
+ place-self:end;
+ /* visual styling */
+ text-decoration: none;
+ padding: 10px;
+ color:var(--offwhite);
+ background: var(--darkpurple);
+ border-radius: 100px;
+ white-space: nowrap;
+ text-align: right;
+}
+.backtotop:hover{
+ font-size: 1.2rem;
+ color: var(--highlight);
+ transition: all 0.1s linear;
+
}
\ No newline at end of file
diff --git a/wiki/layout.html b/wiki/layout.html
index bcfa537f..96d345f1 100644
--- a/wiki/layout.html
+++ b/wiki/layout.html
@@ -15,6 +15,7 @@
<link href="{{ url_for('static', filename = 'menu.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename = 'footer.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename = 'sidebar.css') }}" rel="stylesheet">
+ <link href="{{ url_for('static', filename = 'hint.css') }}" rel="stylesheet">
<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
@@ -49,12 +50,22 @@
<div class="col">
{% block page_content %}{% endblock %}
</div>
-
<div class="col-1 d-none d-lg-block">
<!-- empty so far -->
</div>
</div>
+ <div class="row mt-5">
+ <div class="col-2 d-none d-lg-block"></div>
+ <div class="col">
+ <a href="#" class="backtotop">
+ Back to Top ↑
+ </a>
+ </div>
+ <div class="col-1 d-none d-lg-block" style="text-align: right;"></div>
+ </div>
+
+
</div>
diff --git a/wiki/pages/bfh.html b/wiki/pages/bfh.html
index a983864b..9f2dd18a 100644
--- a/wiki/pages/bfh.html
+++ b/wiki/pages/bfh.html
@@ -114,50 +114,7 @@
</p>
<h3 id="program"> The program</h3>
<hr>
-
- <!-- Video Block Anordnung A-->
- <div class="row align-items-center">
- <div class="col-5">
- <div class="col">
- Video1
- </div>
- <div class="col">
- Description
- </div>
- </div>
- <div class="col-1">
- <div class="col">
- Person1
- </div>
- <div class="col">
- Person2
- </div>
- </div>
- <div class="col-5">
- <div class="col">
- Video2
- </div>
- <div class="col">
- Text
- </div>
- </div>
- </div>
-
- <!-- Video Block Anordnung B-->
- <div class="row align-items-center">
- <div class="col-7">
- Video
- </div>
- <div class="col-5">
- <div class="col">
- Text 1
- </div>
- <div class="col">
- Text 2
- </div>
- </div>
- </div>
-
+
diff --git a/wiki/pages/example.html b/wiki/pages/example.html
index 2bf641cc..5fa627bd 100644
--- a/wiki/pages/example.html
+++ b/wiki/pages/example.html
@@ -49,10 +49,10 @@
</div>
<div class="col-1" style="padding: 0%; margin: 0%; vertical-align: middle;">
<div class="col" style="vertical-align: middle;">
- <img class="round-img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
+ <img class="round-img-vert" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
</div>
<div class="col">
- <img class="round-img" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
+ <img class="round-img-vert" src="https://static.igem.wiki/teams/5247/placeholders/placehilderperson.jpeg">
</div>
</div>
<div class="col">
@@ -69,21 +69,81 @@
</div>
</div>
</div>
+ <p>
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </p>
+ <div class="videoblock">
+ <div class="row align-items-center">
+ <div class="col-7">
+ <img class="fit" src="https://static.igem.wiki/teams/5247/placeholders/videoplaceholder.jpeg">
+ </div>
+ <div class="col-5">
+ <div class="col">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ <div class="col">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ <button type="button" class="collapsible">More</button>
+ <div class="content">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ </div>
<!-- End portion under Heading 2 -->
</div>
<div class="h">
<div id="two">
<h2>Untertitel Zwei</h2>
<hr>
+ <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+ <div class="hint-container tip">
+ <p class="hint-container-title">
+ Infobox Typ 1
+ </p>
+ <div class="v-card-text">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+ <div class="hint-container info">
+ <p class="hint-container-title">
+ Infobox Typ 2
+ </p>
+ <div class="v-card-text">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
<p>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
+ <div class="row align-items-center">
+ <div class="col">
+ <div class="hint-container warning">
+ <p class="hint-container-title">
+ Infobox Typ 3
+ </p>
+ <div class="v-card-text">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="hint-container tip">
+ <p class="hint-container-title">
+ Halbe Größe Box
+ </p>
+ <div class="v-card-text">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
+
<div class="h">
<div id="three"> <h2>Untertitel Drei</h2>
<hr>
--
GitLab