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

Line 1: Line 1:
−
{{Template:Cologne-Duesseldorf/css}}
+
<html>
 +
<style>
  
−
<html >
+
/******Wiki Styles*************************************/
−
<head>
+
−
  <meta charset="UTF-8">
+
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
  <title>Create a Sidebar Menu</title>
+
−
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
−
</head>
+
  
−
<body>
+
html {
−
  <html>
+
font-size: 16px;
−
<head>
+
}
−
<title>SideBar Menu</title>
+
body {
−
<link rel="stylesheet" type="text/css" href="style.css">
+
background-color: #fff;
−
</head>
+
font: medium sans-serif;
−
<body>
+
color: black;
 +
margin: 0;
 +
/*margin-top: 20px;*/
 +
margin-top: 18px;
 +
padding: 0;
 +
}
 +
#globalWrapper {
 +
position: relative;
 +
font-size: 100%;
 +
width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#top_menu_under {
 +
display: none;
 +
position: relative;
 +
width: 100%;
 +
height: 0;
 +
}
 +
/*the igem menu bar*/
  
−
<div id="sidebar">
+
#top_menu_14 {
−
<ul>
+
position: fixed;
−
<!-- Home -->
+
width: 100%;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf">Home</a></li>
+
top: 0px;
−
+
left: 0px;
−
<!-- Team -->
+
height: 16px;
−
<ul class="sub">
+
background-color: #383838;
−
<a href="#">Team</a>
+
border-bottom: 2px solid black;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Team">Team</a></li>
+
z-index: 9999;
−
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Collaborations">Collaborations</a></li>
+
}
−
</ul>
+
#content {
 +
width: 100%;
 +
padding: 0;
 +
margin: 0;
 +
border: none;
 +
color: inherit;
 +
background-color: inherit;
 +
position: relative;
 +
}
 +
#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;
 +
}
 +
}
 +
.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;
 +
}
  
−
+
#footer {
−
+
font-size:100%;
−
<!-- 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>
+
/*************WIKI FONTS**************/
−
</div>
+
 
 +
#HQ_page h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
color: #149375;
 +
border: none;
 +
font-weight: normal;
 +
font-style: normal;
 +
text-rendering: optimizeLegibility;
 +
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 +
}
 +
#content h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
font-weight: normal;
 +
}
 +
#bodyContent h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
margin: 0 0 0.5rem 0;
 +
}
 +
#bodyContent h1,
 +
#bodyContent h2 {
 +
margin: 0 0 0.5rem 0;
 +
}
 +
#bodyContent h3,
 +
#bodyContent h4,
 +
#bodyContent h5 {
 +
margin: 0 0 0.5rem 0;
 +
}
 +
 
 +
#HQ_page p {
 +
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 +
font-size: 16px;
 +
text-align: justify;
 +
}
 +
 
 +
#HQ_page table {
 +
    border: none;
 +
    border-collapse: collapse;
 +
    width: 100%;
 +
margin: 0;
 +
 
 +
}
 +
table {
 +
background: white;
 +
font-size: 100%;
 +
color: black;
 +
}
 +
 
 +
#HQ_page th {
 +
    background-color: inherit;
 +
    padding: 0;
 +
    color: black;
 +
    border: none;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
}
 +
 
 +
#HQ_page td {
 +
    padding: 0;
 +
    border: none;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/****************** SITE STYLES ******
 +
*************************************/
 +
 
 +
 
 +
 
 +
 
 +
body{
 +
margin:0px;
 +
padding:0px;
 +
font-family:Roboto;
 +
background: #149375;
 +
overflow-x: hidden;
 +
}
 +
 
 +
body.inactive{
 +
background-color: rgba(0,0,0,0.5);
 +
}
 +
 
 +
 
 +
img{
 +
  display:flex;
 +
  margin: auto;
 +
  height: auto;
 +
  max-width: 100%;
 +
  vertical-align: middle;
 +
}
 +
 
 +
#container h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
padding: 0;
 +
overflow: hidden;
 +
background: none;
 +
line-height: 1.4;
 +
}
 +
#container h1 {
 +
    font-size: 2.986em;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h2 {
 +
    font-size: 2.488em;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h3 {
 +
    font-size: 2.074em;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h4 {
 +
    font-size: 1.728em;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h5 {
 +
    font-size: 1.44em;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
#container h6 {
 +
    font-size: 1.2em;
 +
    margin-top: 0;
 +
    margin-bottom: .5rem
 +
}
 +
 
 +
#container p {
 +
margin: 0;
 +
  line-height: 1.7;
 +
}
 +
#container a {
 +
text-decoration: none;
 +
font-weight: normal;
 +
color: #149375;
 +
background: none;
 +
}
 +
#container a:link {
 +
color: #149375;
 +
}
 +
#container a:visited {
 +
color: #149375;
 +
}
 +
#container a:hover,
 +
#container a:focus {
 +
color: #149375;
 +
text-decoration: none;
 +
}
 +
#container a:active {
 +
color: #149375;
 +
}
 +
 
 +
#container hr {
 +
    height: 1px;
 +
    color: #aaa;
 +
    margin: 16px 0;
 +
}
 +
 
 +
#sidebar{
 +
z-index: 3;
 +
background:#151718;
 +
width:250px;
 +
height:100%;
 +
display:block;
 +
position:fixed;
 +
top: 18px;
 +
transition:0.5s linear;
 +
visibility: hidden;
 +
opacity: 0;
 +
transition: all 0.5s ease;
 +
overflow-y: auto;
 +
}
 +
 
 +
#sidebar.visible{
 +
visibility: visible;
 +
opacity: 1;
 +
}
 +
 
 +
#sidebar ul{
 +
margin:0px;
 +
padding:0px;
 +
}
 +
 
 +
#sidebar ul li{
 +
list-style:none;
 
 
 +
transition: all 2s ease;
 +
}
 +
 +
#sidebar ul li a{
 +
background:#1C1E1F;
 +
color:#ccc;
 +
border-bottom:1px solid #111;
 +
display:block;
 +
width:230px;
 +
padding:10px;
 +
text-decoration: none;
 +
}
 +
 +
#sidebar ul li a:hover{
 +
background-color: rgba(255,255,255,0.3)
 +
}
 +
 +
/*** Accordion Menu ***/
 +
#sidebar ul ul a {
 +
background:#1C1E1F;
 +
color:#ccc;
 +
border-bottom:1px solid #111;
 +
display:block;
 +
width:230px;
 +
padding:10px;
 +
text-decoration: none;
 +
}
 +
 +
#sidebar ul ul a:hover{
 +
background-color: rgba(255,255,255,0.3)
 +
}
 +
 +
#sidebar ul ul.sub li{
 +
display:none;
 +
padding-left: 15px;
 +
}
 +
 +
#sidebar ul ul.sub li.active{
 +
display: block;
 +
}
 +
 +
#overlay{
 +
    position: fixed;
 +
    width: 100%;
 +
    height: 100%;
 +
    top: 0;
 +
    left: 250px;
 +
    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;
 +
}
 +
 +
#overlay.active{
 +
visibility: visible;
 +
opacity: 1;
 +
}
 +
 +
#container{
 +
transition:0.5s linear;
 +
display: flex;
 +
flex-direction: column;
 +
align-items: center;
 +
padding: 5%;
 +
}
 +
 +
#paper {
 +
    display: flex;
 +
flex-direction: column;
 +
    max-width: 1024px;
 +
    background: white;
 +
    box-shadow: 0 0 12px 0px rgba(0,0,0,0.4);
 +
padding: 5%;
 +
}
 +
 +
#sidebar-btn{
 +
    font-size: 24pt;
 +
    z-index: 2;
 +
    position: fixed;
 +
    right: 2%;
 +
    top: 4%;
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: center;
 +
    align-items: center;
 +
    width: 20px;
 +
    height: 20px;
 +
    cursor: pointer;
 +
    background: #149375;
 +
    padding: 20px;
 +
    color: white;
 +
    border: 3px solid white;
 +
    border-radius: 100%;
 +
    box-shadow: 0px 4px 12px 2px rgba(0,0,0,0.3);
 +
}
 +
 +
#sidebar-btn:hover{
 +
border: 3px solid black;
 +
}
 +
 +
#sidebar-btn:hover i{
 +
color:black;
 +
}
 +
 +
section{
 +
margin: 8px;
 +
}
 +
 +
section#header{
 +
justify-content: center;
 +
margin-bottom: 24px;
 +
}
 +
 +
section#gallery {
 +
    display: flex;
 +
    flex-direction: column;
 +
}
 +
 +
 +
section#gallery .col2 {
 +
display: flex;
 +
flex-direction: row;
 +
}
 +
 +
section#gallery .col2 > div {
 +
width: 50%;
 +
padding: 10px;
 +
}
 +
 +
section#gallery .col2 > div:first-child {
 +
margin-right: 20px;
 +
}
 +
 +
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);
 +
}
 +
 +
button.accordion {
 +
    background-color: #eee;
 +
    color: #444;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    border: none;
 +
    text-align: left;
 +
    outline: none;
 +
    font-size: 15px;
 +
    transition: 0.4s;
 +
}
 +
 +
button.accordion.active, button.accordion:hover {
 +
    background-color: rgba(20, 147, 117,0.7);
 +
}
 +
 +
button.accordion:after {
 +
    content: '\002B';
 +
    color: #777;
 +
    font-weight: bold;
 +
    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;
 +
}
 +
 +
span.label {
 +
    display: inline-block;
 +
    padding: 0 6px;
 +
    border-radius: 20px;
 +
    white-space: nowrap;
 +
    cursor: default;
 +
    background: #149375;
 +
    color: #fefefe;
 +
}
 +
 +
b, strong {
 +
    font-weight: bold;
 +
    line-height: inherit;
 +
    color: #149375;
 +
}
 +
 +
div.callout {
 +
    margin: 24px 0;
 +
    padding: 10px;
 +
    border: 2px solid rgba(20, 147, 117, 0.5);
 +
    border-radius: 0;
 +
}
 +
 +
#container table {
 +
    width: 100%;
 +
    margin-bottom: 1rem;
 +
}
 +
 +
#container table thead{
 +
    background-color: inherit;
 +
    background: rgba(20, 147, 117, 0.2);
 +
    color: #263238
 +
}
 +
#container table thead tr {
 +
background:inherit;
 +
}
 +
#container table thead th {
 +
    padding: .5rem .625rem .625rem
 +
}
 +
#container table thead td {
 +
    padding: .5rem .625rem .625rem
 +
}
 +
 
 
−
+
#container table tbody {
−
<div id="sidebar-btn">
+
    background-color: inherit;
−
<i class="fa fa-bars"></i>
+
}
−
</div>
+
#container table tbody tr {
−
<div id="overlay"></div>
+
background:inherit;
−
<div id="container">
+
}
−
<div id="paper">
+
#container table tbody tr:nth-child(even) {
−
<section id="header">
+
    background-color: rgba(20, 147, 117, 0.08)
−
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg">
+
}
−
</section>
+
#container table tbody th {
−
<section id="article">
+
    padding: .5rem .625rem .625rem
−
<h3>Designing a Customizable Synthetic Cell Compartment Toolbox</h3>
+
}
−
<hr>
+
#container table tbody td {
−
<p>
+
    padding: .5rem .625rem .625rem
−
Synthetic organisms provide a wide range of applications with the potential to tackle
+
}
−
the biggest challenges humanity faces. Their creation is therefore one of the major
+
−
goals in synthetic biology. Many breakthroughs have been achieved in the last
+
−
decade, however, the <strong>creation of a fully synthetic cell is yet a milestone to reach for.</strong>
+
−
<br>
+
−
A common approach tries to build up artificial cells from scratch, whereas we want to
+
−
start by engineering artificial compartments through orthogonalization. For designing
+
−
these new compartments we plan to establish an open source toolbox accessible to
+
−
the community at large. This will make it possible to boot up a compartment perfectly
+
−
tailored for a specific application, which will enable cheaper and more efficient
+
−
production of biofuels, pharmaceuticals, or high value chemicals.  
+
−
<br>
+
−
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we
+
−
gain higher concentrations of enzymes and metabolites and provide a basis for the
+
−
ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates
+
−
can be sustained and naturally incompatible reactions can take place
+
−
simultaneously.
+
−
<br>
+
−
We have chosen <span class="label">yeast peroxisomes</span> as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.
+
−
</p>
+
−
</section>
+
−
<section id="accordion">
+
−
<h2>Accordion</h2>
+
−
<hr>
+
−
<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>
+
#container table.hover thead tr:hover {
−
<div class="panel">
+
    background-color: rgba(17, 125, 99, 0.2);
−
  <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>
+
#container table.hover tbody tr:hover {
 +
    background-color: rgba(17, 125, 99, 0.2);
 +
}
  
−
<button class="accordion">Section 3</button>
+
.card {
−
<div class="panel">
+
    margin-bottom: 1rem;
−
  <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>
+
    border: 1px solid #eceff1;
−
</div>
+
    border-radius: 0;
−
</section>
+
    background: #eceff1;
−
+
    box-shadow: none;
−
<div class="callout">
+
    overflow: hidden;
−
<h3>Callout</h3>
+
    color: #263238
−
<hr>
+
}
−
<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>
+
.card>:last-child {
−
</div>
+
    margin-bottom: 0
−
+
}
−
<div>
+
.card-divider {
−
<h1>Tables</h1>
+
    padding: 1rem;
−
<hr>
+
    background: #eceff1
−
<table class="hover">
+
}
−
<thead>
+
.card-divider>:last-child {
−
<tr>
+
    margin-bottom: 0
−
<th>Table Header</th>
+
}
−
<th>Table Header</th>
+
.card-section {
−
<th>Table Header</th>
+
    padding: 1rem
−
<th>Table Header</th>
+
}
−
</tr>
+
.card-section>:last-child {
−
</thead>
+
    margin-bottom: 0
−
<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>
+
−
+
−
<div>
+
−
<h1>Cards</h1>
+
−
<hr>
+
−
<div class="row">
+
−
<div class="card col2">
+
−
<div class="card-divider">
+
−
<h4>I'm featured</h4>
+
−
</div>
+
−
<div class="card-section">
+
−
<img src="http://placehold.it/350x150">
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
</div>
+
−
</div>
+
−
<div class="card col2">
+
−
<div class="card-divider">
+
−
<h4>I'm featured</h4>
+
−
</div>
+
−
<div class="card-section">
+
−
<img src="http://placehold.it/350x150">
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
</div>
+
−
</div>
+
−
<div class="card col2">
+
−
<div class="card-divider">
+
−
<h4>I'm featured</h4>
+
−
</div>
+
−
<div class="card-section">
+
−
<img src="http://placehold.it/350x150">
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
</div>
+
−
</div>
+
−
<div class="card col2">
+
−
<div class="card-divider">
+
−
<h4>I'm featured</h4>
+
−
</div>
+
−
<div class="card-section">
+
−
<img src="http://placehold.it/350x150">
+
−
<p>It has an easy to override visual style, and is appropriately subdued.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
  
−
 
−
 
−
 
−
<!-- End Article-->
 
−
</div>
 
−
<!-- End Container -->
 
−
</div>
 
−
<!-- Footer -->
 
−
 
−
<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>
 
−
<!--- Scripts ---->
 
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
−
<script>
 
−
$(document).ready(function(){
 
−
$('#sidebar-btn').click(function(){
 
−
$('#sidebar').toggleClass('visible');
 
−
$('#overlay').toggleClass('active');
 
−
$('#container').toggleClass('inactive');
 
−
$('#sidebar-btn').toggleClass('inactive');
 
−
});
 
−
$('#overlay').click(function(){
 
−
$('#sidebar').toggleClass('visible');
 
−
$('#overlay').toggleClass('active');
 
−
$('#container').toggleClass('inactive');
 
−
$('#sidebar-btn').toggleClass('inactive');
 
−
});
 
−
 
−
$('#sidebar ul ul.sub').click(function(){
 
−
$(this).children().toggleClass('active');
 
−
});
 
−
});
 
−
</script>
 
−
<!-- w3 Accordion -->
 
−
<script>
 
−
var acc = document.getElementsByClassName("accordion");
 
−
var i;
 
  
−
for (i = 0; i < acc.length; i++) {
+
.row {
−
  acc[i].onclick = function() {
+
display:flex;
−
this.classList.toggle("active");
+
flex-direction: row;
−
var panel = this.nextElementSibling;
+
justify-content: space-around;
−
if (panel.style.maxHeight){
+
    flex-wrap: wrap;
−
  panel.style.maxHeight = null;
+
}
−
} else {
+
 
−
  panel.style.maxHeight = panel.scrollHeight + "px";
+
.col2{
−
}  
+
width: 45%;
−
  }
+
}
 +
.col3{
 +
width: 30%;
 +
}
 +
.col4{
 +
width: 22.5%;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/****************** MEDIA QUERIES **
 +
**********************************/
 +
 
 +
@media (max-width: 768px){
 +
body{
 +
background: white;
 +
}
 +
#sidebar-btn {
 +
right: 0;
 +
top: 18px;
 +
width: 100%;
 +
height: 50px;
 +
cursor: pointer;
 +
background: #1C1E1F;
 +
padding: 0 5% 0 0;
 +
border: none;
 +
border-radius: 0;
 +
justify-content: flex-end;
 +
}
 +
#sidebar-btn:hover{
 +
border: none;
 +
}
 +
#sidebar-btn:hover i{
 +
color: #149375;
 +
}
 +
#container {
 +
margin-top: 68px;
 +
padding: 0;
 
}
 
}
−
</script>
+
#container.inactive{
−
 
+
transform: translate(250px,0)
−
 
+
}
−
</body>
+
#sidebar-btn.inactive{
 +
#background: rgba(0,0,0,0.5);
 +
}
 +
section#gallery .col2 {
 +
flex-direction:column;
 +
}
 +
section#gallery .col2 > div {
 +
width: 100%;
 +
}
 +
}
 +
 
 +
@media (min-width: 1024px){
 +
section#footer i {
 +
font-size: 3vw;
 +
}
 +
}
 +
 
 +
 
 +
</style>
 
</html>
 
</html>

Revision as of 19:46, 4 May 2017