Difference between revisions of "Team:Cologne-Duesseldorf/Test2"

(Blanked the page)
 
(118 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
 
<head>
 
<meta charset="UTF-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
<style>
 
@import url('https://fonts.googleapis.com/css?family=Quicksand');
 
/*****************
 
Page Backbone
 
******************/
 
  
* {
 
box-sizing: border-box;
 
margin: 0;
 
padding: 0;
 
}
 
html {
 
font-size: 20px;
 
}
 
body {
 
width: 100%;
 
margin: 48px 0 0 0;
 
padding: 0;
 
color: black;
 
background-color: #149375;
 
font: medium sans-serif;
 
}
 
#globalWrapper {
 
width: 100%;
 
padding: 0;
 
background-color: #149375;
 
position: relative;
 
font-size: 100%;
 
}
 
#content {
 
width: 100%;
 
//max-width: 1024px;
 
min-height: 80vh;
 
margin: auto;
 
padding: 5%;
 
border: none;
 
color: inherit;
 
background-color: #ffffff;
 
position: relative;
 
}
 
#HQ_page {
 
width: 100%;
 
margin: auto;
 
padding: 5%;
 
background: #ffffff;
 
}
 
#bodyContent {}
 
/*****************
 
Wiki overrides
 
******************/
 
 
#top_menu_under {
 
display: none;
 
position: relative;
 
width: 100%;
 
height: 0;
 
}
 
#top_menu_14 {
 
position: fixed;
 
width: 100%;
 
top: 0px;
 
left: 0px;
 
height: 16px;
 
background-color: #383838;
 
border-bottom: 2px solid black;
 
z-index: 9999;
 
}
 
#top_title {
 
display: none;
 
}
 
#sideMenu {
 
display: none;
 
width: 170px;
 
position: absolute;
 
top: 20px;
 
left: 1020px;
 
z-index: 10;
 
padding-top: 0px;
 
padding-bottom: 15px;
 
padding-left: 15px;
 
padding-right: 15px;
 
background-color: white;
 
text-align: left;
 
}
 
#bodyContent a[href ^="https://"],
 
.link-https {
 
background: none;
 
padding: 0
 
}
 
.pop_why_cover {
 
display: none;
 
z-index: 100;
 
margin-top: -65px;
 
margin-left: -40px;
 
width: 980px;
 
height: 2100px;
 
float: left;
 
position: absolute;
 
opacity: 0.5;
 
background-color: #b2b2b2;
 
}
 
.pop_why_box {
 
display: none;
 
left: 250px;
 
top: 0px;
 
background-color: white;
 
padding: 15px;
 
width: 500px;
 
position: absolute;
 
border: 3px solid #4e606e;
 
border-radius: 3px;
 
z-index: 100;
 
}
 
/*****************
 
Page styles
 
******************/
 
 
#bodyContent img {
 
display: block;
 
max-width: 100%;
 
margin: auto;
 
}
 
#bodyContent h1,
 
h2,
 
h3,
 
h4,
 
h5,
 
h6 {
 
color: #149375;
 
border: none;
 
font-weight: normal;
 
font-style: normal;
 
text-rendering: optimizeLegibility;
 
font-family: 'Quicksand', sans-serif;
 
margin: 1rem 0;
 
line-height: 1.5;
 
border-bottom: 1px solid #ccc
 
}
 
#bodyContent h1 {
 
font-size: 2.986em;
 
}
 
#bodyContent h2 {
 
font-size: 2.488em;
 
}
 
#bodyContent h3 {
 
font-size: 2.074em;
 
}
 
#bodyContent h4 {
 
font-size: 1.728em;
 
}
 
#bodyContent h5 {
 
font-size: 1.44em;
 
}
 
#bodyContent h6 {
 
font-size: 1.2em;
 
}
 
#bodyContent p {
 
font-family: 'Quicksand', sans-serif;
 
font-size: 20px;
 
text-align: justify;
 
line-height: 1.5;
 
margin: 0.5rem 0;
 
}
 
#bodyContent table {
 
border: none;
 
border-collapse: collapse;
 
width: 100%;
 
background: white;
 
margin: 0 0 1rem 0;
 
font-size: 100%;
 
color: black;
 
}
 
#bodyContent th {
 
background-color: inherit;
 
padding: 0;
 
color: black;
 
border: none;
 
border-collapse: collapse;
 
vertical-align: text-top;
 
}
 
#bodyContent td {
 
padding: 0;
 
border: none;
 
border-collapse: collapse;
 
vertical-align: text-top;
 
}
 
#bodyContent table thead{
 
background-color: inherit;
 
background: rgba(20, 147, 117, 0.2);
 
color: #263238
 
 
}
 
#bodyContent table thead tr {
 
background: inherit;
 
}
 
#bodyContent table thead th {
 
padding: .5rem .625rem .625rem
 
}
 
#bodyContent table thead td {
 
padding: .5rem .625rem .625rem
 
}
 
#bodyContent table tbody {
 
background-color: inherit;
 
}
 
#bodyContent table tbody tr {
 
background: inherit;
 
}
 
#bodyContent table tbody tr:nth-child(even) {
 
background-color: rgba(20, 147, 117, 0.08)
 
}
 
#bodyContent table tbody th {
 
padding: .5rem .625rem .625rem
 
}
 
#bodyContent table tbody td {
 
padding: .5rem .625rem .625rem
 
}
 
#bodyContent table.hover thead tr:hover {
 
background-color: rgba(17, 125, 99, 0.2);
 
}
 
#bodyContent table.hover tbody tr:hover {
 
background-color: rgba(17, 125, 99, 0.2);
 
}
 
#bodyContent ul {
 
list-style-type: disc;
 
color: #149375;
 
margin: 0 0 0 18px;
 
list-style-image: none;
 
padding: 0;
 
line-height: 1.5;
 
}
 
#bodyContent li {
 
margin: 0;
 
padding: 0;
 
line-height: 1.5;
 
}
 
#bodyContent a {
 
font-family: 'Quicksand', sans-serif;
 
font-size: 20px;
 
text-align: justify;
 
line-height: 1.5;
 
list-style-image: none;
 
list-style-type: none;
 
color: #149375;
 
}
 
#bodyContent a:hover {
 
color: #0e6752;
 
}
 
#bodyContent a:active {
 
color: #0e6752;
 
}
 
#bodyContent a:visited {
 
color: #149375;
 
}
 
/*****************
 
Navigation button
 
******************/
 
 
#bodyContent #sidebar-btn {
 
width: 100%;
 
height: 50px;
 
padding: 0 5vw 0 0;
 
position: fixed;
 
top: 16px;
 
right: 0;
 
display: flex;
 
flex-direction: row;
 
justify-content: flex-end;
 
align-items: center;
 
font-size: 24pt;
 
cursor: pointer;
 
z-index: 2;
 
color: white;
 
background: #1C1E1F;
 
border: none;
 
border-radius: 0;
 
box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 
}
 
#bodyContent #sidebar-btn:hover {
 
border: none;
 
}
 
#bodyContent #sidebar-btn:hover i {
 
color: #149375;
 
}
 
/*****************
 
Navigation  bar
 
******************/
 
 
#bodyContent #sidebar {
 
z-index: 5;
 
background: #151718;
 
width: 250px;
 
height: 100%;
 
display: block;
 
position: fixed;
 
top: 16px;
 
left: 0;
 
visibility: hidden;
 
opacity: 0;
 
transition: all 0.5s ease;
 
overflow-y: auto;
 
}
 
#bodyContent #sidebar.visible {
 
visibility: visible;
 
opacity: 1;
 
}
 
#bodyContent #sidebar ul {
 
margin: 0px;
 
padding: 0px;
 
}
 
#bodyContent #sidebar ul li {
 
list-style: none;
 
transition: all 2s ease;
 
}
 
#bodyContent #sidebar ul li a {
 
font-size: 16px;
 
background: #1C1E1F;
 
color: #ccc;
 
border-bottom: 1px solid #111;
 
display: block;
 
width: 250px;
 
padding: 10px;
 
text-decoration: none;
 
}
 
#bodyContent #sidebar ul li a:hover {
 
background-color: rgba(255, 255, 255, 0.3)
 
}
 
#bodyContent #sidebar ul ul a {
 
font-size: 16px;
 
background: #1C1E1F;
 
color: #ccc;
 
border-bottom: 1px solid #111;
 
display: block;
 
width: 250px;
 
padding: 10px;
 
text-decoration: none;
 
}
 
#bodyContent #sidebar ul ul a:hover {
 
background-color: rgba(255, 255, 255, 0.3)
 
}
 
#bodyContent #sidebar ul ul.sub li {
 
display: none;
 
padding-left: 15px;
 
}
 
#bodyContent #sidebar ul ul.sub li.active {
 
display: block;
 
}
 
#bodyContent #overlay {
 
position: fixed;
 
width: 100%;
 
height: 100%;
 
top: 0;
 
left: 0;
 
right: 0;
 
bottom: 0;
 
background-color: rgba(0, 0, 0, 0.5);
 
z-index: 1;
 
cursor: pointer;
 
visibility: hidden;
 
opacity: 0;
 
transition: all 0.5s ease;
 
}
 
#bodyContent #overlay.active {
 
visibility: visible;
 
opacity: 1;
 
}
 
/*****************
 
Sections
 
******************/
 
 
#bodyContent section#article p {
 
column-count: 1;
 
column-gap: 40px;
 
//column-rule: 1px solid #ccc;
 
padding: 10px 0;
 
}
 
#bodyContent #back-to-top {
 
position: fixed;
 
font-size: 35pt;
 
right: 3vw;
 
bottom: 3vw;
 
color: rgba(0, 0, 0, 0.6);
 
}
 
section#footer {
 
display: flex;
 
flex-direction: row;
 
justify-content: center;
 
align-items: center;
 
height: 15vw;
 
max-height: 250px;
 
margin: 0;
 
background: #1C1E1F;
 
position: absolute;
 
left: 0;
 
right: 0;
 
}
 
section#footer i {
 
color: rgba(255, 255, 255, 0.3);
 
padding: 20px;
 
font-size: 5vw;
 
}
 
section#footer i:hover {
 
color: rgba(255, 255, 255, 1);
 
}
 
/*****************
 
Custom styles
 
******************/
 
 
/* gallery */
 
#bodyContent .flex-gallery {
 
display: flex;
 
flex-flow: column;
 
justify-content: center;
 
}
 
#bodyContent .flex-gallery a {
 
margin: 10px;
 
}
 
#bodyContent .flex-gallery a img {
 
width: 200px;
 
height: auto;
 
filter: grayscale(100%);
 
transition: all 0.5s ease;
 
}
 
#bodyContent .flex-gallery a img:hover {
 
filter: grayscale(0%);
 
}
 
#bodyContent .modalDialog {
 
position: absolute;
 
top: 0;
 
right: 0;
 
bottom: 0;
 
left: 0;
 
background: rgba(0, 0, 0, 0.8);
 
z-index: 99999;
 
opacity: 0;
 
transition: opacity 400ms ease-in;
 
pointer-events: none;
 
}
 
#bodyContent .modalDialog:target {
 
opacity: 1;
 
pointer-events: auto;
 
}
 
#bodyContent .modalDialog>div {
 
position: absolute;
 
width: 70vw;
 
top: 15vw;
 
left: 15vw;
 
border-radius: 20px;
 
background: #fff;
 
}
 
#bodyContent .modalDialog > .flex {
 
flex-direction: row;
 
}
 
#bodyContent .modalDialog > .flex > div {
 
padding: 25px;
 
}
 
#bodyContent a.close {
 
font-size: 24pt;
 
z-index: 3;
 
position: absolute;
 
right: -3vw;
 
top: -3vw;
 
display: flex;
 
flex-direction: row;
 
justify-content: center;
 
align-items: center;
 
width: 20px;
 
height: 20px;
 
cursor: pointer;
 
padding: 28px;
 
border: 3px solid white;
 
border-radius: 100%;
 
box-shadow: 0px 4px 12px 2px rgba(0, 0, 0, 0.3);
 
}
 
#bodyContent a.close {
 
background: #149375;
 
color: white;
 
}
 
#bodyContent a.close:visited {
 
color: white;
 
}
 
#bodyContent a.close:link {
 
color: white;
 
}
 
#bodyContent a.close:hover {
 
border: 3px solid black;
 
color: black;
 
}
 
 
/* text stuff */
 
#bodyContent abbr {
 
vertical-align: baseline;
 
font-size: inherit;
 
text-decoration: none;
 
color: rgba(0, 0, 0, 0.4);
 
}
 
#bodyContent abbr[title],.explain[title] {
 
border-bottom: none;
 
cursor: help;
 
}
 
#bodyContent b,strong {
 
font-weight: bold;
 
line-height: inherit;
 
color: #149375;
 
}
 
 
/* other elements */
 
#bodyContent div.callout {
 
margin: 24px 0;
 
padding: 10px;
 
border: 2px solid rgba(20, 147, 117, 0.5);
 
border-radius: 0;
 
}
 
/* accordion */
 
button.accordion {
 
font: 20px Quicksand;
 
background: #fefefe;
 
cursor: pointer;
 
padding: 18px;
 
width: 100%;
 
border: none;
 
text-align: left;
 
outline: none;
 
transition: 0.4s;
 
}
 
button.accordion.active,
 
button.accordion:hover {
 
background-color: rgba(20, 147, 117, 0.7);
 
}
 
button.accordion:after {
 
content: '\002B';
 
color: #777;
 
float: right;
 
margin-left: 5px;
 
}
 
button.accordion.active:after {
 
content: "\2212";
 
}
 
div.panel {
 
padding: 0 18px;
 
background-color: white;
 
max-height: 0;
 
overflow: hidden;
 
transition: max-height 0.2s ease-out;
 
}
 
/* label */
 
span.label {
 
display: inline-block;
 
padding: 0 6px;
 
border-radius: 20px;
 
white-space: nowrap;
 
cursor: default;
 
background: #149375;
 
color: #fefefe;
 
}
 
/* mega menu */
 
#mega-menu {
 
display: flex;
 
justify-content: space-around;
 
margin: 5vw 0;
 
}
 
#mega-menu i {
 
font-size: 10vw;
 
}
 
#mega-menu a {
 
color: #263238;
 
}
 
#mega-menu a:link {
 
color: #263238;
 
}
 
#mega-menu a:visited {
 
color: #263238;
 
}
 
#mega-menu a:hover,
 
a:focus,
 
a:active {
 
color: #149375;
 
}
 
/*****************
 
Media Queries
 
******************/
 
/*****************
 
Laptop
 
******************/
 
 
@media (min-width: 900px) {
 
body {
 
margin: 16px 0 0 0;
 
}
 
#globalWrapper {
 
padding: 10%;
 
}
 
#bodyContent section#article p {
 
column-count: 2;
 
//border-bottom: 1px solid #ccc;
 
}
 
#bodyContent #sidebar-btn {
 
width: 20px;
 
height: 20px;
 
padding: 28px;
 
right: 2vw;
 
top: 4vw;
 
justify-content: center;
 
background: #149375;
 
border: 3px solid white;
 
border-radius: 100%;
 
}
 
#bodyContent #sidebar-btn:hover {
 
border: 3px solid black;
 
}
 
#bodyContent #sidebar-btn:hover i {
 
color: black;
 
}
 
#bodyContent #back-to-top {
 
color: rgba(0, 0, 0, 0.6);
 
}
 
}
 
/*****************
 
Desktop
 
******************/
 
@media (min-width: 1600px) {
 
#bodyContent section#article p {
 
column-count: 3;
 
}
 
}
 
</style>
 
</head>
 
<body>
 
<section id="header">
 
<div id="sidebar">
 
<ul>
 
<!-- Home -->
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf">Home</a></li>
 
<!-- Team -->
 
<ul class="sub">
 
<a href="#">Team</a>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Team">Team</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Collaborations">Collaborations</a></li>
 
</ul>
 
<!-- Project -->
 
<ul class="sub">
 
<a href="#">Project</a>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Description">Description</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Design">Design</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Experiments">Experiments</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Notebook">Notebook</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/InterLab">InterLab</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Contribution">Contribution</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Model">Model</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Results">Results</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Demonstrate">Demonstrate</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Improve">Improve</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Attributions">Attributions</a></li>
 
</ul>
 
<!-- Parts -->
 
<ul class="sub">
 
<a href="#">Parts</a>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Parts">Parts</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Basic_Part">Basic Parts</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Composite_Part">Composite Parts</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Part_Collection">Part Collection</a></li>
 
</ul>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Safety">Safety</a></li>
 
<!-- Human Practices -->
 
<ul class="sub">
 
<a href="#">Human Practices</a>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Silver">Silver</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Gold_Integrated">Integrated Practices</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Engagement">Public Engagement</a></li>
 
</ul>
 
<!-- Awards -->
 
<ul class="sub">
 
<a href="#">Awards</a>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Applied_Design">Applied Design</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Entrepreneurship">Entrepreneurship</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Hardware">Hardware</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Measurement">Measurement</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Model">Model</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Plant">Plant</a></li>
 
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Software">Software</a></li>
 
</ul>
 
<!-- Judging Form -->
 
<li><a href="https://igem.org/2017_Judging_Form?team=Cologne-Duesseldorf">Judging Form</a></li>
 
</ul>
 
</div>
 
<div id="sidebar-btn">
 
<i class="fa fa-bars"></i>
 
</div>
 
<div id="overlay"></div>
 
</section>
 
<section id="banner">
 
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg">
 
</section>
 
<section id="article">
 
<h1>Heading</h1>
 
<div id="ToC"></div>
 
<h3 id="one">Heading one</h3>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus pharetra mollis. Quisque a nisi felis. Curabitur gravida orci a enim sodales convallis. Duis magna quam, finibus id nulla id, eleifend imperdiet ex. Maecenas lacinia fermentum nisl, sollicitudin interdum turpis imperdiet tincidunt. Sed ultricies sagittis orci pharetra vulputate. Nunc ac ipsum augue. Suspendisse dapibus quam a rutrum congue. Pellentesque nec mauris et purus interdum tristique id semper odio. Fusce in est maximus, sollicitudin augue non, iaculis leo. Integer vitae metus id felis volutpat imperdiet. Cras elit est, egestas sit amet orci condimentum, aliquet rhoncus purus. Duis sed lectus interdum, vestibulum orci et, aliquam elit. Aliquam eleifend purus nec lorem accumsan, a tincidunt nibh vehicula. Etiam lobortis volutpat lorem, ac dictum libero egestas efficitur. Fusce condimentum tempor ipsum ut condimentum.</p>
 
<h3 id="two">Bioreactor simulation</h3>
 
<!-- Plot p450 Bioreactor -->
 
<img src="https://static.igem.org/mediawiki/2017/f/f7/T--Cologne-Duesseldorf--Nootkatone-p450-Model-Bioreactor.svg">
 
<p>The yield of $154.9 \ \frac{\text{mg}}{\text{L}}$ Nootkatol was lower than the published results of Wriessnegger 2014. Our first guess was that the assumption of all enzymes being equally concentrated was probably false. We therefore varied the enzyme concentrations and found that overexpression of valencene synthase increased the yield dramatically by converting way more FPP than before, while overexpressing the other enzymes had little to no effect at all:</p>
 
<!-- Plot Expression analysis -->
 
<img src="https://static.igem.org/mediawiki/2017/8/8a/T--Cologne-Duesseldorf--Nootkatone-Expression-3D.svg">
 
<p>What can be seen in the plot above is that the system is mostly influenced by concentration changes of valencene synthase. Since the Nootkatone production did not seem to increase further after increasing the valencene synthase concentration by 20-fold, we stuck to that number and simulated our model under the changed conditions.</p>
 
<h3 id="accordion">Accordion</h3>
 
<button class="accordion">Section 1</button>
 
<div class="panel">
 
<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>
 
<button class="accordion">Section 2</button>
 
<div class="panel">
 
<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>
 
<button class="accordion">Section 3</button>
 
<div class="panel">
 
<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="callout">
 
<h4 id="Callout">Callout</h4>
 
<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>
 
<h3 id="tables">Tables</h3>
 
<table class="hover">
 
<thead>
 
<tr>
 
<th>Table Header</th>
 
<th>Table Header</th>
 
<th>Table Header</th>
 
<th>Table Header</th>
 
</tr>
 
</thead>
 
<tbody>
 
<tr>
 
<td>Content Goes Here</td>
 
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
 
<td>Content Goes Here</td>
 
<td>Content Goes Here</td>
 
</tr>
 
<tr>
 
<td>Content Goes Here</td>
 
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
 
<td>Content Goes Here</td>
 
<td>Content Goes Here</td>
 
</tr>
 
<tr>
 
<td>Content Goes Here</td>
 
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
 
<td>Content Goes Here</td>
 
<td>Content Goes Here</td>
 
</tr>
 
</tbody>
 
</table>
 
</div>
 
<!-- Large Menu -->
 
<h3 id="large-menu">Mega menu</h3>
 
 
<div id="mega-menu">
 
<a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Description"><i class="fa fa-cog" aria-hidden="true"></i></a>
 
<a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Team"><i class="fa fa-users" aria-hidden="true"></i></a>
 
<a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Gold_Integrated"><i class="fa fa-user-plus" aria-hidden="true"></i></a>
 
<a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Part_Collection"><i class="fa fa-cogs" aria-hidden="true"></i></a>
 
</div>
 
<p>Morbi quis faucibus tellus. Quisque ultrices diam non neque fringilla, scelerisque porttitor quam porta. Suspendisse fermentum suscipit pulvinar. Integer finibus orci id cursus ornare. Donec pretium vulputate quam ut sagittis. Ut sodales sit amet felis et blandit. Cras non velit ac mi faucibus gravida. Vivamus placerat blandit velit ut convallis. Donec imperdiet mi feugiat, lacinia urna nec, sagittis mauris. Aenean convallis, sapien quis consectetur cursus, lacus magna scelerisque purus, et malesuada lacus lorem eu justo. Mauris ornare dictum sem, quis vestibulum magna sodales a. Nulla facilisi. Nam justo urna, gravida eget venenatis eu, rutrum ut quam. Morbi ultrices, sapien ac interdum rutrum, ex neque cursus justo, eget lacinia mauris felis in lacus. Quisque in turpis in ante pharetra semper ut sed erat.</p>
 
</section>
 
 
<section id="footer">
 
<a href="https://twitter.com/igem17dus_cgn"><i class="fa fa-twitter" aria-hidden="true"></i></a>
 
<a href="https://www.facebook.com/igemduscgn/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
 
<a href="https://www.instagram.com/igem2017dus_cgn/"><i class="fa fa-instagram" aria-hidden="true"></i></a>
 
<a href="mailto:iGEM_DUS_CGN@hhu.de"><i class="fa fa-envelope" aria-hidden="true"></i></a>
 
<a href="http://www.igem.hhu.de/"><i class="fa fa-university" aria-hidden="true"></i><a>
 
</section>
 
 
 
 
 
 
 
 
 
<a id="back-to-top" href="#ToC"><i class="fa fa-chevron-circle-up"></i></a>
 
<!-- Scripts -->
 
<script type="text/javascript" src="https://2017.igem.org/Template:Cologne-Duesseldorf/js-hammer?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 
<script type="text/x-mathjax-config">
 
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 
MathJax.Ajax.config.path["mhchem"] ="https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.1.0";
 
MathJax.Hub.Config({
 
  TeX: {
 
extensions: ["[mhchem]/mhchem.js"]
 
  },
 
  messageStyle: "none",
 
  scale: 100,
 
  "HTML-CSS": {
 
  showMathMenu: false,
 
  linebreaks: { automatic: true, width: "container" } ,
 
  preferredFont: "STIX",
 
  availableFonts: ["STIX","TeX"]
 
  },
 
  SVG: { linebreaks: { automatic: true, width: "container" } }  
 
});
 
MathJax.Hub.Configured();
 
</script>
 
<script>
 
// ===== Table of contents ====
 
var ToC =
 
  "<nav role='navigation' class='table-of-contents'>" +
 
"<h2>On this page</h2>" +
 
"<ul>";
 
 
var newLine, el, title, link;
 
 
$("section#article h3").each(function() {
 
 
  el = $(this);
 
  title = el.text();
 
  link = "#" + el.attr("id");
 
 
  newLine =
 
"<li>" +
 
  "<a href='" + link + "'>" +
 
title +
 
  "</a>" +
 
"</li>";
 
 
  ToC += newLine;
 
 
});
 
 
ToC +=
 
  "</ul>" +
 
  "</nav>";
 
 
$("section#article #ToC").prepend(ToC);
 
 
// ===== Scroll to Top ====
 
$(window).scroll(function() {
 
if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
 
$('#return-to-top').fadeIn(200);    // Fade in the arrow
 
} else {
 
$('#return-to-top').fadeOut(200);  // Else fade out the arrow
 
}
 
});
 
$('#return-to-top').click(function() {      // When arrow is clicked
 
$('body,html').animate({
 
scrollTop : 0                      // Scroll to top of body
 
}, 500);
 
});
 
</script>
 
  </body>
 
</html>
 
{{Template:Cologne-Duesseldorf/js}}
 

Latest revision as of 10:12, 10 December 2017