Difference between revisions of "Team:Marburg/test"

Line 2: Line 2:
 
<html>
 
<html>
 
<style>
 
<style>
code {
+
body {
display: inline-block;
+
overflow-x: hidden !important;
background-color:rgb(50,50,50);
+
border-radius: 3px;
+
color:rgb(200,200,200);
+
padding:15px;
+
text-align: left;
+
font-weight:normal;
+
font-size: 1.0em;
+
 
}
 
}
code pre {
+
.home {
-moz-tab-size: 4;
+
  width: 100%;
border: unset;
+
background-color: unset;
+
color: white;
+
tab-size: 4px;
+
 
}
 
}
.html_box {
+
 
  position: fixed;
+
section {
opacity: 0;
+
position: relative;
left:5%;
+
overflow: hidden;
right: 5%;
+
width: 100%;
top:5%;
+
background-color:black;
bottom:5%;
+
height: 120vh;
z-index: 10;
+
padding: 3%;
transform:scale(0.5);
+
box-sizing: border-box;
box-shadow: 0 0 50px rgba(0,0,0,0.5);pointer-events: none;
+
border-radius:15px;
+
background-color:rgb(50,50,50);
+
transition: all 0.3s ease-in-out;
+
 
}
 
}
.html_box textarea {
+
 
width: calc(100% - 50px);
+
.logoSection:before {
height: calc(100% - 90px);
+
position: absolute;
background-color:rgb(60,60,60);
+
width: 100%;
margin: 25px auto 0 auto;
+
height: 100%;
color:whitesmoke;
+
left:0;
font-size: 1.0em;
+
top:0;
font-family: consolas;
+
content: "";
resize: none;
+
opacity: 0.9;
border:2px solid rgb(40,40,40);
+
background-size: cover;
 +
background-position: center;
 
}
 
}
.html_box div {
+
.logoSection {
  width: 150px;
+
width: 100%;
height: 40px;
+
padding: 8% 5% 5% 5%;
line-height: 40px;
+
box-sizing: border-box;
color:white;
+
font-size: 1.7em;
+
 
text-align: center;
 
text-align: center;
margin: 8px auto 0 auto;
+
min-height: 100vh;
border-radius: 5px;
+
background-color: white;
background-color:rgb(30,30,30);
+
background-size: cover;
cursor: pointer;
+
}
transition: box-shadow 0.3s ease-in-out;
+
.logoBackground {
 +
position: absolute;
 +
width: 100%;
 +
height: calc(100% + 54px);
 +
left:0;
 +
top:0;
 +
background-size: cover;
 +
background-image: url(https://static.igem.org/mediawiki/2018/a/a6/T--Marburg--logo_background.png);
 +
}
 +
.logoSection img {
 +
position: absolute;
 +
display: inline-block;
 +
width: 60%;
 +
left:50%;
 +
top:50%;
 +
transform: translate(-50%, -50%);
 +
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
 +
padding-top: 4%;
 +
animation: mlogo_fadeIn 1s ease-in-out;
 +
}
 +
@keyframes mlogo_fadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.75); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }}
 +
.sectionBackground {
 +
position: absolute;
 +
width: 100%;
 +
height: 110%;
 +
left:0;
 +
top:-5%;
 +
background-size: cover;
 +
background-position: center;
 +
opacity: 0.3;
 +
background-color: black;
 +
}
 +
.sectionBackground:before {
 +
position: absolute;
 +
left: 0;
 +
top:0;
 +
content: "";
 +
width: 100%;
 +
height: 100%;
 +
 
}
 
}
  
.html_box div:hover {
+
 
box-shadow: 0 0 10px rgba(0,180,255,0.3);
+
.sectionContent {
 +
display: flex;
 +
justify-content: space-around;
 +
align-content: center;
 +
align-items: center;
 +
padding: 4%;
 +
height: 100%;
 +
box-sizing: border-box;
 
}
 
}
  
.html_box_visible {
+
.sectionContent figure img {
  opacity: 1;
+
display:inline-block;
transform:scale(1.0);
+
width: 100%;
visibility: show;
+
pointer-events: auto;
+
 
}
 
}
  
.btn_edit {
+
.sectionContent figure {
  position: fixed;
+
width: 25%;
 +
}
 +
 
 +
.sectionContent aside {
 
display:inline-block;
 
display:inline-block;
right:0;
+
align-self: center;
top:110px;
+
position: relative;
padding:2px;
+
width: 70%;
color:rgba(55,55,55,0.3);
+
color:white;
font-size: 1.0em;
+
background-color: rgba(0, 0, 0, 0);
cursor: pointer;
+
font-size: 2.3vw;
z-index: 10;
+
text-align: justify;
transition: all 0.2s ease-in-out;
+
 
}
 
}
.btn_edit:hover {
+
.spacer {
font-size: 1.5em;
+
position: relative;
color:whitesmoke;
+
width: 100%;
padding:5px;
+
height: 2px;
border-radius: 5px 0 0 5px;
+
background-color:#fff;
background-color:rgba(0,0,0,0.2);
+
box-shadow: 0 0 15px rgba(255,255,255,1);
 +
z-index: 2;
 
}
 
}
 +
.spacerH {
 +
position: absolute;
 +
text-align: center;
 +
background-color: white;
 +
font-size: 2.8vw;
 +
left:50%;
 +
top:50%;
 +
transform: translate(-50%, -50%);
 +
border-radius: 55px;
 +
padding: 1% 2% 1% 2%;
 +
text-align: center;
 +
}
 +
.scrollFade {
 +
opacity: 0;
 +
transition: all 1.5s ease-in-out;
 +
}
 +
.scaleIn {
 +
transform: scale(0.8);
 +
}
 +
.slideInLeft {
 +
transform: translate(-15%, 0);
 +
}
 +
.slideInRight {
 +
transform: translate(15%, 0);
 +
}
 +
.fadeIn {
 +
opacity: 1;
 +
}
 +
.transformIn {
 +
opacity: 1;
 +
transform: translate(0) scale(1.0);
 +
}
 +
 +
.logoSpacer {
 +
position: absolute;
 +
width: 100%;
 +
height: 15px;
 +
background-color:#fff;
 +
box-shadow: 0 0 15px rgba(255,255,255,1);z-index: 2;
 +
}
 +
.medalBody {
 +
width: 100%;
 +
border-radius: 25px;
 +
box-shadow: 0 15px 20px rgb(0, 0, 0, 0.1);
 +
padding: 5%;
 +
box-sizing:border-box;
 +
}
 +
 
</style>
 
</style>
<div class="btn_edit">Edit Page</div>
 
<div class="html_box">
 
<textarea spellcheck="false"></textarea>
 
<div id="btn_preview">Preview</div>
 
</div>
 
<div class="titleWrapper"><div class="titleBackground" style="background-image:url('http://212.224.125.161:8765/igem_2018/img/some_code_render3.png')"></div><div class="title">Example Page</div></div>
 
<article>
 
<h1>Read this before doing fancy styling</h1>
 
<hr>
 
<img style="float:right;width:200px;" src="https://vignette.wikia.nocookie.net/jokeverse/images/5/5d/Bob_Ross_Render.png">
 
 
 
<b>Alle Klassen</b> welche im <b>style</b> tag deklariert werden <b>überschreiben</b> alle vorherigen deklarationen welche die <b>selben Klassennamen</b> haben.
 
<p>
 
Bei <b>semantischen</b> Elementen wie z.B. <b>ul, li</b> etc.:
 
</p><p>
 
DONT<br>
 
<code>ul { my style }</code></p><p>
 
DO<br>
 
<code>article ul { my style }</code>
 
</p><p>
 
Somit beziehen sich die Deklarationen nur auf den Inhalt des article Containers
 
</p><p>
 
<br>
 
<h1>Image on the right</h1>
 
<hr>
 
<img style="float:right;width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
 
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>
 
</p><h3>Code</h3>
 
<code>&lt;img style="float:right; width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg"&gt;</code>
 
<p>
 
<br>
 
</p><div class="skipTarget" skipname="Left Image"></div>
 
  
 +
<div class="home">
 +
<div class="logoSection">
 +
<div class="logoBackground"></div>
 +
<img class="scaleIn" fadeTo="transformIn" src="https://static.igem.org/mediawiki/2018/b/b5/T--Marburg--m_logo.png" alt="">
 +
</div>
 +
<!-- 1. VIBRIO BASICS -->
 +
<div class="spacer"></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/8/86/T--Marburg--home_1.jpg)"></div>
 +
<div class="sectionContent">
 +
<aside class="scrollFade slideInLeft" fadeTo="transformIn" tabindex="0">
 +
Establishing <i>Vibrio natriegens</i> as the new chassis organism for synthetic biology.<br>
 +
With a doubling time of 7 minutes, we were able to complete a full cloning cycle in less than 12 hours!
 +
</aside>
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/a/a6/T--Marburg--VibrioNatriegensBig.gif" alt="">
 +
</figure>
 +
</div>
 +
</section>
 +
<!-- 2. STRAIN ENGINEERING -->
 +
<div class="spacer"><div class="spacerH" tabindex="0">Strain Engineering</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/4/4a/T--Marburg--home_2.jpg)"></div>
 +
<div class="sectionContent">
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/6/60/T--Marburg--StrainEngineeringNoBG.png" alt="">
 +
</figure>
 +
<aside class="scrollFade slideInRight" fadeTo="transformIn" tabindex="0">
 +
We established three new strains derived from the original wildtype strain as chassis organisms for cloning, protein expression and protein interaction studies. Moreover, we got first evidence for a CRISPR/Cas9 mediated knockout.
 +
</aside>
 +
</div>
 +
</section>
 +
<!-- 3. PART COLLECTION -->
 +
<div class="spacer"><div class="spacerH" tabindex="0">Marburg Collection</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/2/27/T--Marburg--home_3-2.jpeg)"></div>
 +
<div class="sectionContent">
 +
<aside class="scrollFade slideInLeft" fadeTo="transformIn" tabindex="0">
 +
We created the Marburg Collection, a highly flexible golden-gate based cloning toolbox consisting of 123 individual parts. Our novel measurement workflow was applied to obtain highly reproducible data on the behavior of our parts in <i>V. natriegens</i>.
 +
</aside>
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/5/58/T--Marburg--PartCollectionMLogo.gif" alt="">
 +
</figure>
 +
</div>
 +
</section>
 +
<!-- 4. METABOLIC -->
 +
<div class="spacer"><div class="spacerH" tabindex="0">Metabolic Engineering</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/2/29/T--Marburg--home_4.jpg)"></div>
 +
<div class="sectionContent">
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/c/c2/T--Marburg--Metabolic-EngineeringCell.gif" alt="">
 +
</figure>
 +
<aside class="scrollFade slideInRight" fadeTo="transformIn" tabindex="0">
 +
We developed a workflow for accelerating metabolic engineering. As a proof of concept we established the first synthetic pathway in <i>Vibrio natriegens</i> to produce the platform chemical 3-hydroxypropionic acid.
 +
</aside>
 +
</div>
 +
</section>
 +
<!-- 5. INTERLAB -->
 +
<div class="spacer"><div class="spacerH" tabindex="0">Interlab</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/a/a7/T--Marburg--home_5.jpg)"></div>
 +
<div class="sectionContent">
 +
<aside class="scrollFade slideInLeft" fadeTo="transformIn" tabindex="0">
 +
To collaborate with other teams and spread the word to other scientists on <i>Vibrio natriegens'</i> advantages we had teams from all over Europe conduct a growth curve or a InterLab inspired experiment.
 +
</aside>
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/8/88/T--Marburg--InterLabLogoCell2.gif
 +
" alt="">
 +
</figure>
 +
</div>
 +
</section>
 +
<!-- 6. BLISTA -->
 +
<div class="spacer"><div class="spacerH" tabindex="0">Accessible Science</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/b/bd/T--Marburg--home_6.jpg)"></div>
 +
<div class="sectionContent">
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/0/09/T--Marburg--accessible_wiki_green_small.png" alt="">
 +
</figure>
 +
<aside class="scrollFade slideInRight" fadeTo="transformIn" tabindex="0">
 +
This Wiki is designed to be accessible for everyone!
 +
For this years Human Practices, iGEM Marburg decided to partner up with the BLISTA again. The BLISTA is the only Highschool for visually impaired students in Europe. As part of our project we (and other teams) designed a barrier-free website to take this step to remove barriers in communication!
 +
</aside>
 +
</div>
 +
</section>
  
 +
<!-- OTHER STUFF -->
  
 +
<style>
  
<h1>Image on the left</h1>
 
<hr>
 
<img style="float:left;width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
 
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. <dfn data-info="Lorem ipsum dolor">Lorem</dfn> ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
 
<p>
 
</p><h3>Code</h3>
 
<code>&lt;img style="float:left; width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg"&gt;</code>
 
<p>
 
<br>
 
</p><p><br>
 
</p><div class="skipTarget" skipname="Center Image"></div>
 
<h1>Image centered on the top</h1>
 
<hr>
 
<img style="display:block; margin:0 auto 0 auto; width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
 
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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
 
<p>
 
</p><h3>Code</h3>
 
<code>&lt;img style="display:block; margin:0 auto 0 auto; width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg"&gt;</code>
 
<p>
 
<br>
 
</p><div class="skipTarget" skipname="Tables"></div>
 
<h1>Styled Table</h1>
 
<hr>
 
<p>
 
<style>
 
article table {
 
border-spacing: 0;
 
border: 1px solid  rgb(220,220,220);
 
font-size: 0.75em;
 
border-collapse:collapse;
 
}
 
article th, td {
 
border-right: 1px solid rgb(220,220,220);
 
padding:25px !important;
 
}
 
article th{
 
border-bottom: 2px solid rgb(200,200,200) !important;
 
background-color: white !important;
 
}
 
article tr:nth-child(even){
 
background-color: rgb(240,240,240);
 
}
 
</style>
 
</p><table>
 
<tbody><tr>
 
<th>Veniam</th>
 
<th>Iriure</th>
 
<th>Iusto</th>
 
<th>Duis</th>
 
<th>Enim</th>
 
</tr>
 
<tr>
 
<td>Luptatum</td>
 
<td>Blandit</td>
 
<td>Odio</td>
 
<td>Magna</td>
 
<td>Eros</td>
 
</tr>
 
<tr>
 
<td>Aliquyam</td>
 
<td>Eirmod</td>
 
<td>Ipsum</td>
 
<td>Justo</td>
 
<td>Nonumy</td>
 
</tr>
 
<tr>
 
<td>Lorem</td>
 
<td>Accusam</td>
 
<td>Sadipscing</td>
 
<td>Amet</td>
 
<td>Consetetur</td>
 
</tr>
 
</tbody></table>
 
  
<p>
 
</p><h3>Code</h3>
 
<code><pre>&lt;style&gt;
 
article table {
 
border-spacing: 0;
 
border: 1px solid  rgb(220,220,220);
 
font-size: 0.75em;
 
border-collapse:collapse;
 
}
 
article th, td {
 
border-right: 1px solid rgb(220,220,220);
 
padding:25px !important;
 
}
 
article th{
 
border-bottom: 2px solid rgb(200,200,200) !important;
 
background-color: white !important;
 
}
 
article tr:nth-child(even){
 
background-color: rgb(240,240,240);
 
}
 
&lt;/style&gt;
 
&lt;table&gt;
 
&lt;tr&gt;
 
&lt;th&gt;Veniam&lt;/th&gt;
 
&lt;th&gt;Iriure&lt;/th&gt;
 
&lt;th&gt;Iusto&lt;/th&gt;
 
&lt;th&gt;Duis&lt;/th&gt;
 
&lt;th&gt;Enim&lt;/th&gt;
 
&lt;/tr&gt;
 
&lt;tr&gt;
 
&lt;td&gt;Luptatum&lt;/td&gt;
 
&lt;td&gt;Blandit&lt;/td&gt;
 
&lt;td&gt;Odio&lt;/td&gt;
 
&lt;td&gt;Magna&lt;/td&gt;
 
&lt;td&gt;Eros&lt;/td&gt;
 
&lt;/tr&gt;
 
&lt;tr&gt;
 
&lt;td&gt;Aliquyam&lt;/td&gt;
 
&lt;td&gt;Eirmod&lt;/td&gt;
 
&lt;td&gt;Ipsum&lt;/td&gt;
 
&lt;td&gt;Justo&lt;/td&gt;
 
&lt;td&gt;Nonumy&lt;/td&gt;
 
&lt;/tr&gt;
 
&lt;tr&gt;
 
&lt;td&gt;Lorem&lt;/td&gt;
 
&lt;td&gt;Accusam&lt;/td&gt;
 
&lt;td&gt;Sadipscing&lt;/td&gt;
 
&lt;td&gt;Amet&lt;/td&gt;
 
&lt;td&gt;Consetetur&lt;/td&gt;
 
&lt;/tr&gt;
 
&lt;/table&gt;</pre></code><p><br>
 
More about Tables: <a href="https://www.w3schools.com/html/html_tables.asp">Click here</a>
 
<p>
 
<br>
 
</p><div class="skipTarget" skipname="Center Text"></div>
 
<h1>Centered Text</h1>
 
<hr>
 
<span style="display:block; text-align: center;">
 
At vero eos et accusam et justo duo dolores et ea rebum.<br>
 
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
 
At vero eos et accusam et justo duo dolores et ea rebum.<br>
 
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum.<br>
 
sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</span>
 
<p>
 
</p><h3>Code</h3>
 
<code>&lt;span style="display:block; text-align: center;"&gt; Text &lt;/span&gt;</code>
 
<p>
 
<br>
 
</p><div class="skipTarget" skipname="Lists"></div>
 
<h1>Unordered List</h1>
 
<hr>
 
<style>
 
article ul li {
 
font-size: 0.8em;
 
padding:5px;
 
}
 
</style>
 
<ul>
 
<li>Tempor</li>
 
<li>Stet</li>
 
<li>Voluptua</li>
 
<li>Elitr</li>
 
<li>Ipsum</li>
 
<li>Lorem</li>
 
<li>Solores</li>
 
<li>Kasd</li>
 
<li>Sea</li>
 
</ul>
 
<p>
 
</p><h3>Code</h3>
 
<code>
 
<pre>&lt;style&gt;
 
article ul li {
 
font-size: 0.8em;
 
padding:5px;
 
}
 
&lt;/style&gt;
 
&lt;ul&gt;
 
&lt;li&gt;Tempor&lt;/li&gt;
 
&lt;li&gt;Stet&lt;/li&gt;
 
&lt;li&gt;Voluptua&lt;/li&gt;
 
&lt;li&gt;Elitr&lt;/li&gt;
 
&lt;li&gt;Ipsum&lt;/li&gt;
 
&lt;li&gt;Lorem&lt;/li&gt;
 
&lt;li&gt;Solores&lt;/li&gt;
 
&lt;li&gt;Kasd&lt;/li&gt;
 
&lt;li&gt;Sea&lt;/li&gt;
 
&lt;/ul&gt;</pre></code>
 
<p>
 
<br>
 
</p><h1>Ordered List</h1>
 
<hr>
 
<style>
 
article ol li {
 
font-size: 0.8em;
 
padding:5px;
 
}
 
</style>
 
<ol>
 
<li>Tempor</li>
 
<li>Stet</li>
 
<li>Voluptua</li>
 
<li>Elitr</li>
 
<li>Ipsum</li>
 
<li>Lorem</li>
 
<li>Solores</li>
 
<li>Kasd</li>
 
<li>Sea</li>
 
</ol>
 
<p>
 
</p><h3>Code</h3>
 
<code><pre>&lt;style&gt;
 
article ol li {
 
font-size: 0.8em;
 
padding:5px;
 
}
 
&lt;/style&gt;
 
&lt;ol&gt;
 
&lt;li&gt;Tempor&lt;/li&gt;
 
&lt;li&gt;Stet&lt;/li&gt;
 
&lt;li&gt;Voluptua&lt;/li&gt;
 
&lt;li&gt;Elitr&lt;/li&gt;
 
&lt;li&gt;Ipsum&lt;/li&gt;
 
&lt;li&gt;Lorem&lt;/li&gt;
 
&lt;li&gt;Solores&lt;/li&gt;
 
&lt;li&gt;Kasd&lt;/li&gt;
 
&lt;li&gt;Sea&lt;/li&gt;
 
&lt;/ol&gt;</pre></code>
 
<p>
 
<br>
 
</p><div class="skipTarget" skipname="Content Splitting"></div>
 
<h1>Splitting Content</h1>
 
<hr>
 
<div style="display: inline-block;">
 
<div style="float:left; max-width: 50%;">
 
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, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
 
<p>
 
</p></div>
 
<div style="float:right; max-width: 50%;">
 
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.
 
</div>
 
</div>
 
<p>
 
<br>
 
</p><h3>Code</h3>
 
<code><pre>&lt;div style="display: inline-block;"&gt;
 
&lt;div style="float:left; width: 50%;"&gt;
 
ContentA
 
&lt;/div&gt;
 
&lt;div style="float:left; width: 50%;"&gt;
 
ContentB
 
&lt;/div&gt;
 
&lt;/div&gt;</pre></code>
 
<p>
 
<br>
 
</p><div class="skipTarget" skipname="Abbreviation extention"></div>
 
  
<h1>Link insertion</h1>
 
<hr>
 
<p><span style="font-size:1.5em"><a href="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg"><abbr title="Mr.EGGFACE">Lorem Ipsum dolor</a></span>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
<p>
 
</p><h3>Code</h3>
 
<code>&lt;a href=&quot;https://image.freepik.com/free-icon/monster-funny_318-36004.jpg&quot;&gt;&lt;abbr title=&quot;Mr.EGGFACE&quot;&gt; Lorem Ipsum dolor &lt;/abbr&gt;&lt;/a&gt;</code>
 
<p>
 
<br>
 
</p>
 
  
<h1>Abbreviation extention</h1>
 
<hr>
 
<p><span style="font-size:1.5em"><dfn data-info="Lorem ipsum dolor">Lorem</dfn></span> Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
<p>
 
</p><h3>Code</h3>
 
<code>&lt;dfn data-info=&quot;Lorem ipsum dolor&quot;&gt; Lorem &lt;/dfn&gt;</code>
 
<p>
 
<br>
 
</p>
 
  
<div class="skipTarget" skipname="Flexible Boxes"></div>
+
 
<h1>Multiple Images in a Row</h1>
+
 
<hr>
+
 
<style>
+
 
.imageContainer {
+
 
  display: flex;
+
 
  justify-content: space-around;
+
 
  align-items: center;
+
 
 +
 
 +
.sectionH {
 +
width: 100%;
 +
padding: 0 0 4% 0;
 +
text-align: center;
 +
font-size: 1.5em;
 +
box-sizing: border-box;
 
}
 
}
.imageContainer img {
+
.sectionText {
  width: 30%;
+
padding: 5% 0 15% 0;
 +
}
 +
.medal_container {
 +
position: relative;
 +
display:flex;
 +
justify-content: space-around;
 +
width: 100%;
 +
z-index: 2;
 
}
 
}
</style>
 
  
<div class="imageContainer">
+
.medal_container>div {
<img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
+
position: relative;
<img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
+
width: 20%;
<img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
+
padding-bottom: 20%;
</div> 
+
margin-bottom: 2%;
<p>
+
<h3>Code</h3>
+
<code><pre>
+
&lt;style&gt;
+
.imageContainer {
+
  display: flex;
+
  justify-content: space-around;
+
  align-items: center;
+
 
}
 
}
.imageContainer img {
+
 
  width: 30%;
+
.medal_container>div>img {
 +
position: absolute;
 +
width: 100%;
 +
top:50%;
 +
left:50%;
 +
transform: translate(-50%,-50%);
 +
}
 +
.medal_content_container {
 +
  position: relative;
 +
margin-bottom: 10%;
 +
}
 +
.medal_content {
 +
position: absolute;
 +
opacity: 0;
 +
top:0;
 +
transform:translate(0,0);
 +
font-size: 1em;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.medal_content h2 a {
 +
color: unset !important;
 +
}
 +
.medal_content_selected {
 +
opacity: 1;
 +
z-index: 2;
 +
}
 +
.bottomSection .sectionContent aside {
 +
font-size: 2em;
 +
}
 +
.medal_content:nth-of-type(3) {
 +
position: relative;
 
}
 
}
&lt;/style&gt;
 
  
&lt;div class=&quot;imageContainer&quot;&gt;
+
.medalButton {
&lt;img src=&quot;url&quot;&gt;
+
transition: transform 0.3s ease-in-out;
&lt;img src=&quot;url&quot;&gt;
+
cursor: pointer;
&lt;img src=&quot;url&quot;&gt;
+
}
&lt;/div&gt;
+
</pre></code>
+
<p>
+
<br>
+
</p>
+
  
<h1>Multiple Images in a Grid</h1>
+
.medalButton_selected {
<hr>
+
transform: scale(1.1);
<style>
+
.imageContainer2 {
+
  display: flex;
+
  flex-wrap: wrap;
+
  justify-content: space-around;
+
  align-items: center;
+
 
}
 
}
.imageContainer2 img {
+
 
  width: 40%;
+
.noAnim {
  margin-bottom: 2%;
+
transition: none;
 
}
 
}
</style>
 
  
<div class="imageContainer2">
+
.bottomSection {
<img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
+
height: unset;
<img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
+
background-color:white;
<img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
+
<img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">
+
</div> 
+
<p>
+
<h3>Code</h3>
+
<code><pre>
+
&lt;style&gt;
+
.imageContainer2 {
+
  display: flex;
+
  flex-wrap: wrap;
+
  justify-content: space-around;
+
  align-items: center;
+
 
}
 
}
.imageContainer2 img {
+
 
  width: 40%;
+
.bottomSection aside {
  margin-bottom: 2%;
+
color: #333;
 
}
 
}
&lt;/style&gt;
 
  
&lt;div class=&quot;imageContainer2&quot;&gt;
+
.medal_table table {
&lt;img src=&quot;url&quot;&gt;
+
border-spacing: 0;
&lt;img src=&quot;url&quot;&gt;
+
border: 2px solid rgb(231, 231, 231) !important;
&lt;img src=&quot;url&quot;&gt;
+
font-size: 0.9em;
&lt;img src=&quot;url&quot;&gt;
+
width: 100%;
&lt;/div&gt;
+
border-collapse: unset !important;
</pre></code>
+
border-radius: 1vw;
<p>
+
text-align: center;
<br>
+
}
</p>
+
.medal_table th, td {
<h3>Using elements with content</h3>
+
border-right: none !;
 +
padding:3% !important;
 +
color:#505050 !important;
 +
}
 +
.medal_table td {
 +
position: relative;
 +
}
 +
.medal_table th{
 +
border-top: none !important;
 +
border-right: none !important;
 +
border-left: none !important;
 +
border-bottom: 2px solid rgb(231, 231, 231) !important;
 +
background-color: white !important;
 +
}
 +
.medal_table tr td:first-of-type {
 +
border:none !important;
 +
}
 +
.medal_table tr td:last-of-type {
 +
border:none !important;
 +
width: 22%;
 +
border-left: 2px solid rgb(231, 231, 231) !important;*/
 +
}
 +
.medal_table tr:nth-child(even){
 +
background-color: rgb(255, 255, 255);
 +
}
  
<style>
+
.checkmark {
.imageContainer3 {
+
position: absolute;
  display: flex;
+
width: 25%;
  justify-content: space-around;
+
padding-bottom: 25%;
  align-items: center;
+
top:50%;
 +
left: 50%;
 +
transform: translate(-50%, -50%);
 +
background-position: center;
 +
background-size: contain;
 +
background-image:url(https://static.igem.org/mediawiki/2018/2/23/T--Marburg--checkmark.svg);
 +
opacity: 0.7;
 
}
 
}
.imageContainer3 div {
+
 
   width: 20%;
+
/* - - - - - - -   MEDIA QUERIES - - - - - - - */
  margin-bottom: 2%;
+
/* medium desktops */
  text-align: center;
+
@media only screen and (max-width: 1800px) {
 +
 
 
}
 
}
.imageContainer3 div img {
+
@media only screen and (max-width: 1500px) {
  width: 100%;
+
 
 
}
 
}
</style>
+
/* small desktops */
 +
@media only screen and (max-width: 1100px) {
  
<div class="imageContainer3">
 
<div><img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">A</div>
 
<div><img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">B</div>
 
<div><img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">C</div>
 
<div><img src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">D</div>
 
</div> 
 
<p>
 
<h3>Code</h3>
 
<code><pre>
 
&lt;style&gt;
 
.imageContainer3 {
 
  display: flex;
 
  justify-content: space-around;
 
  align-items: center;
 
 
}
 
}
.imageContainer3 div {
+
/* landscape tablets */
  width: 20%;
+
@media only screen and (max-width: 992px) {
  margin-bottom: 2%;
+
.medal_content {
  text-align: center;
+
font-size: 0.8em;
 +
}
 
}
 
}
.imageContainer3 div img {
+
 
   width: 100%;
+
/* larger phones, portrait tablets */
 +
@media only screen and (max-width: 786px) {
 +
.logoSection img {
 +
width: 80%;
 +
}
 +
.slideInLeft {
 +
transform: none;
 +
}
 +
.slideInRight {
 +
transform: none;
 +
}
 +
section:nth-of-type(even) .sectionContent {
 +
flex-wrap: wrap;
 +
}
 +
section:nth-of-type(odd) .sectionContent {
 +
flex-wrap: wrap-reverse;
 +
}
 +
.sectionContent figure {
 +
  width: 50%;
 +
   }
 +
.sectionContent aside {
 +
width: 100%;
 +
font-size: 1.5em;
 +
}
 +
.spacerH {
 +
font-size: 6vw;
 +
padding: 1% 3% 1% 3%;
 +
text-align: center;
 +
}
 +
.sectionH {
 +
font-size: 6vw;
 +
}
 +
/*.medal_table table {
 +
border: 2px solid rgb(231, 231, 231) !important;
 +
}
 +
.medal_table th{
 +
border-bottom: 2px solid rgb(231, 231, 231) !important;
 +
}
 +
.medal_table tr td:last-of-type {
 +
border-left: 2px solid rgb(231, 231, 231) !important;
 +
}*/
 +
.medal_table table {
 +
  font-size:  0.7em !important;
 +
  }
 +
}
 +
/* small phones */
 +
@media only screen and (max-width: 600px) {
 +
.logoSection img {
 +
width: 100%;
 +
}
 +
.medal_table table {
 +
  font-size:  0.5em !important;
 +
  }
 +
.sectionContent figure {
 +
  width: 70%;
 +
  }
 
}
 
}
&lt;/style&gt;
 
  
&lt;div class=&quot;imageContainer3&quot;&gt;
+
 
&lt;div&gt;&lt;img src=&quot;url&quot;&gt;A&lt;/div&gt;
+
 
&lt;div&gt;&lt;img src=&quot;url&quot;&gt;B&lt;/div&gt;
+
 
&lt;div&gt;&lt;img src=&quot;url&quot;&gt;C&lt;/div&gt;
+
 
&lt;div&gt;&lt;img src=&quot;url&quot;&gt;D&lt;/div&gt;
+
 
&lt;/div&gt;
+
 
</pre></code>
+
</style>
<p>
+
<section class="bottomSection">
 +
<div class="sectionContent">
 +
<aside>
 +
                        <div class="medalBody">
 +
<div class="sectionH scrollFade" fadeTo="fadeIn"><h1>Medal Criteria</h1></div>
 +
<div class="medal_container scrollFade" fadeTo="fadeIn">
 +
<div class="medalButton" mContent="m_a">
 +
          <img src="https://static.igem.org/mediawiki/2018/4/41/T--Marburg--BronzeCriteria.png" alt="">
 +
</div>
 +
<div class="medalButton" mContent="m_b">
 +
          <img src="https://static.igem.org/mediawiki/2018/3/38/T--Marburg--SilverCriteria.png" alt="">
 +
</div>
 +
<div class="medalButton" mContent="m_c">
 +
          <img src="https://static.igem.org/mediawiki/2018/0/01/T--Marburg--GoldCriteria.png" alt="">
 +
</div>
 +
<div class="medalButton" mContent="m_d">
 +
          <img src="https://static.igem.org/mediawiki/2018/9/97/T--Marburg--CrystalCriteria.png" alt="">
 +
</div>
 +
</div>
 +
<div class="medal_content_container">
 +
<div id="m_a" class="medal_content" tabindex="0">
 +
<h1>Bronze</h1>
 +
We fulfilled all bronze medal criteria.
 +
</h2>
 +
Our team registered for iGEM, we had a challenging but great iGEM season and we are really looking forward to attend the Giant Jamboree.
 +
<h2>Deliverables</h2>
 +
We already finalized our Wiki and <a href="https://igem.org/2018_Judging_Form?id=2560">Judging Form</a>. We will hold our presentation at the Giant Jamboree in Boston and we expect exciting discussions at our poster.
 +
<h2>Attributions</h2>
 +
Our project was only possible with a great <a href="https://2018.igem.org/Team:Marburg/Team">team</a> and we also want to thank people, institutions and companies who helped with financial and infrastructural support or scientific advice, and we are grateful to honor them on our <a href="https://2018.igem.org/Team:Marburg/Attributions">attributions page</a>.
 +
<h2>Characterization</h2>
 +
We participated in the fifth <a href="https://2018.igem.org/Team:Marburg/InterLab">iGEM InterLab</a>  measurement study, submitted our data in time and we are happy that our results were accepted by the measurement committee. 
 +
</div>
 +
<div id="m_b" class="medal_content" tabindex="0">
 +
<h1>Silver</h1>
 +
We are certain that we completed all silver medal criteria
 +
<h2>Validated Part</h2> We submitted <a href="http://parts.igem.org/Part:BBa_K2560069">BBa_K2560069</a> as a new basic parts. This part fulfills all formal requirements and was submitted to the registry. <a href="http://parts.igem.org/Part:BBa_K2560069">BBa_K2560069</a> is a 5’ Connector which was newly designed by us. We validated its function by showing that it can reduce crosstalk from backbone features 14 fold.
 +
<h2><a href="https://2018.igem.org/Team:Marburg/Collaborations">Collaborations</a></h2>
 +
We strengthened the iGEM community in Germany by hosting the <a href="https://2018.igem.org/Team:Marburg/Collaborations">German iGEM Meetup</a> and we planned and realized the <a href="https://2018.igem.org/Team:Marburg/Collaborations">Vibrigens InterLab study</a> with eleven participating teams.
 +
 
 +
<h2><a href="https://2018.igem.org/Team:Marburg/Human_Practices">Human Practices</a></h2>
 +
We got into contact with the BLISTA as part of our local community to open our project for everyone and we achieved to present our project in an accessible manner for the visually impaired.
 +
</div>
 +
<div id="m_c" class="medal_content" tabindex="0">
 +
<h1>Gold</h1>
 +
We hope that we can convince you that we fulfilled all gold medal criteria.
 +
<h2><a href="https://2018.igem.org/Team:Marburg/Human_Practices">Integrated Human Practices</a></h2>
 +
We integrated valuable input from society, academia and industry into the design and execution of our project by starting a wiki collaboration and implementing the suggestions of stakeholders into the design of our strains.
 +
<h2><a href="https://2018.igem.org/Team:Marburg/Improve">Improve a previous part</a></h2>
 +
We improved <a href="http://parts.igem.org/Part:BBa_P10500">BBa_P10500</a> by replacing the dropout with a sfGFP cassette, resulting in <a href="http://parts.igem.org/Part:BBa_K2560002">BBa_K2560002</a>.
 +
 +
<h2><a href="https://2018.igem.org/Team:Marburg/Model">Model Your Project</a></h2>
 +
Using modeling we predicted the metabolic pathway that yields optimal 3HPA producting and conducted foundational work towards a novel pathway.
 +
 +
<h2><a href="https://2018.igem.org/Team:Marburg/Demonstrate">Demonstration of Your Work</a></h2>
 +
We succeeded in all major parts of our project. We established genome engineering methods, created a toolbox and showed production of 3-HPA.
 +
</div>
 +
<div id="m_d" class="medal_content" tabindex="0">
 +
<h1>Special Prizes</h1>
 +
We are proud about what we achieved and applied for the following special awards:<br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Human_Practices">Integrated Human Practices</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Public_Engagement">Education and Public Engagement</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Model">Model</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Measurement">Measurement</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Software">Software Tool</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Measurement">Measurement</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Basic_Part">Best New Basic Part</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Composite_Part">Best New Composite Part</a><br><br>
 +
<a href="https://2018.igem.org/Team:Marburg/Part_Collection">Best Part Collection</a>
 +
</div>
 +
                </div>
 +
</div>
 
<br>
 
<br>
</p>
 
More about Flexible Boxes <a href="https://www.w3schools.com/css/css3_flexbox.asp" target="_blank">Click here</a>
 
<p>
 
 
<br>
 
<br>
<div class="skipTarget" skipname="Collapsible Elements"></div>
+
<div class="medal_table" tabindex="0">
<h1>Collapsible elements</h1>
+
<table>
<hr>
+
<tr>
<p>
+
<th>Results</th>
<div class="collapsible">
+
<th>Achieved</th>
<div class="btn_expand">Click to show more</div>
+
</tr>
<div class="content">
+
<tr>
Some content
+
<td class="scrollFade slideInRight" fadeTo="transformIn">Initially, we carried out foundational experiments to characterize the growth rate, pH, salt and antibiotic tolerance of <i>V. natriegens</i> and sequenced its genome.
 +
</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">We performed Cloning in One day: From transformation to isolated plasmids in less than 12 hours!</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">Low amounts of DNA could be transformed reliably and we successfully demonstrated challenging clonings such as Gibson Assembly with 5 and Aquacloning with 3 fragments as well as 8 part golden-gate reactions.</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">We designed and constructed the Marburg Collection, a highly flexible golden-gate based toolbox consisting of 123 parts.
 +
</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">Dozens of test constructs were built and tested to obtain characterization data for all part categories in our toolbox.
 +
</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">This was only possible with our novel experimental and data analysis workflow using platereader measurements.
 +
</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">We successfully demonstrated a genome engineering workflow in <i>V. natriegens</i> to establish three new lab strains for diverse applications.
 +
</td>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn"><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">Subsequently, we were able to use Flp/FRT recombinase system for marker recycling thus allowing additional rounds of genomic modifications.</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">Chromosomal locations suitable for genomic integration were identified and characterized to detect possible fitness effects. </td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">We accelerated metabolic engineering by developing a workflow for rapid pathway assembly and pathway optimization in <i>V. natriegens</i>.</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
                                                <tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">Model-predicted parts were used to construct a pathway for maximal 3-hydroxypropionate production in <i>V. natriegens</i> and we demonstrated its functionality.</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
                                                <tr>
 +
<td class="scrollFade slideInRight" fadeTo="transformIn">Via mass spectrometry, we detected our pathway product                          3-hydroxypropionic acid in <i>V. natriegens</i>.
 +
</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
</table>
 +
</div>
 +
</aside>
 
</div>
 
</div>
</div>
+
</section>
<div class="collapsible">
+
<div class="btn_expand">Click to show more</div>
+
<div class="content">
+
Some content
+
<div class="collapsible">
+
<div class="btn_expand">Click to show more</div>
+
<div class="content">
+
Some content
+
</div>
+
</div>
+
</div>
+
</div>
+
<div style="display:inline-block">
+
<div class="collapsible" style="width: 49%; float:left;">
+
<div class="btn_expand">Click to show more</div>
+
<div class="content">
+
<h1>Hello there</h1>
+
<hr>
+
<img style="float:left;width:400px;" src="http://212.224.125.161:8765/igem_2018/img/placeholder/1.svg">
+
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. <dfn data-info="Lorem ipsum dolor">Lorem</dfn> ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+
</div>
+
</div>
+
<div class="collapsible" style="width: 49%; float:right;">
+
<div class="btn_expand">Click to show more</div>
+
<div class="content">
+
<h1>Hello</h1>
+
<hr>
+
<img style="float:right;width:400px;" src="http://212.224.125.161:8765/igem_2018/img/placeholder/1.svg">
+
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.
+
</div>
+
</div>
+
 
</div>
 
</div>
<p>
 
<h3>Code</h3>
 
<code>
 
<pre>&lt;div class=&quot;collapsible&quot;&gt;
 
&lt;div class=&quot;btn_expand&quot;&gt;Click to show more&lt;/div&gt;
 
&lt;div class=&quot;content&quot;&gt;
 
Some content
 
&lt;/div&gt;
 
&lt;/div&gt;
 
</pre></code>
 
 
<p>
 
<br>
 
</article>
 
 
<script>
 
<script>
 
$(document).ready(function() {
 
$(document).ready(function() {
var article = $("main").find("article");
+
var last = null;
var html_box = $(".html_box");
+
$(".medalButton").each(function(i){
var textarea = html_box.find("textarea");
+
if(last == null){
textarea.val(article.prop('innerHTML'));
+
last = $(this).attr("mContent");
$("#btn_preview").click(function(){
+
$("#"+last).addClass("medal_content_selected");
html_box.removeClass("html_box_visible");
+
$(this).addClass("medalButton_selected");
article.html(textarea.val());
+
}
var skipBar = $(".skipBar");
+
//lastX = 0;
skipBar.empty();
+
$(this).click(function(){
$(".skipTarget").each(function(i){
+
if($(this).attr("mContent") != last){
var e = $(this);
+
var content = $("#"+$(this).attr("mContent"));
var btn = document.createElement('div');
+
/*var x = $(this).position().left;
btn.className = "btnSkip";
+
var dir = x > lastX ? -1 : 1;*/
var name = document.createElement('div');
+
//$(content).css({"opacity":"1"});
$(name).text($(this).attr('skipName'));
+
$(content).addClass("medal_content_selected");
btn.append(name);
+
//$("#"+last).css({"opacity":"0"});
skipBar.append(btn);
+
$("#"+last).removeClass("medal_content_selected");
$(btn).click(function(){
+
$(this).addClass("medalButton_selected");
$('html, body').stop().animate({ scrollTop: e.offset().top - 100 }, 500);
+
$(".medalButton[mContent='"+last+"']").removeClass("medalButton_selected");
});
+
last = content.attr("id");
 +
//lastX = x;
 +
}
 
});
 
});
// collapsible elements
 
$(".collapsible").each(function(i){
 
var parent = $(this);
 
var btn = $(this).find(".btn_expand");
 
var content = $(this).find(".content");
 
$(this).prop('collapsed', true);
 
$(btn).click(function(){
 
var collapsed = $(parent).prop('collapsed');
 
if(collapsed){
 
$(content).addClass("expanded");
 
$(btn).addClass("btn_expanded");
 
} else {
 
$(content).removeClass("expanded");
 
$(btn).removeClass("btn_expanded");
 
}
 
$(parent).prop('collapsed', !collapsed);
 
});
 
});
 
});
 
$(".btn_edit").click(function(){
 
html_box.addClass("html_box_visible");
 
 
});
 
});
 
});
 
});

Revision as of 17:35, 25 November 2018

Strain Engineering
Marburg Collection
Metabolic Engineering
Interlab
Accessible Science
B. Marchal