diff --git a/static/hint.css b/static/hint.css
new file mode 100644
index 0000000000000000000000000000000000000000..185eb096da480c4dfc43819bfda0d885f846589b
--- /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 26e13a8e756ebe2fb7a72eeffd46f54e70f60c74..0a4018f74d94b632831fe5f5858a063b680ff27c 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 bcfa537fe0fb3a6b7084ca9daa9be886bf02bc29..96d345f1220f43974be480a571964cfa1283d738 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 a983864b45c5436e37808256051c9b560a0b3a6d..9f2dd18af6fbb8a090857463e42a640946e18a34 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 2bf641cc88287858178242988c8431fe7f66ace1..5fa627bdc353ae8e3a7a4dfcd8ba98b221338460 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>