Difference between revisions of "Team:Bielefeld-CeBiTec/Basic Part"

Line 1: Line 1:
 
{{:Team:Bielefeld-CeBiTec/Basic_Navbar}}
 
{{:Team:Bielefeld-CeBiTec/Basic_Navbar}}
 +
{{:Team:Bielefeld-CeBiTec/CSS}}
 +
 
<html>
 
<html>
 +
<head>
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
 +
<script>
 +
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 +
document.getElementById("page-arrow-top").style.display = "block";
 +
} else {
 +
document.getElementById("page-arrow-top").style.display = "none";
 +
}
 +
}
 +
 +
function topFunction() {
 +
document.body.scrollTop = 0; // For Chrome, Safari and Opera
 +
document.documentElement.scrollTop = 0; // For IE and Firefox
 +
}
 +
</script>
 +
 +
<style>
 +
.collapse.navbar-collapse {
 +
float:right;
 +
                padding: 0;
 +
                padding-right: 5%;
 +
}
 +
</style>
 +
 +
</head>
 +
 +
 +
<body style="height:100%";>
 +
   
 +
      <div class="container">
 +
          <div class="main_content">
 +
 +
               
 +
                <div class="title">Basic Parts</div>
 +
 +
  <article>For our metal resource recovery system we build lots of new biobricks for accumulation and storage of metal ions, toxicity counteractions and nanoparticle formation. We also designed Parts for our siRNA expression and analyzation tool to regulate expression of individual genes on RNA level.
 +
 +
                  </article>
 +
 +
<table id="t01" class="centern">
 +
  <tr>
 +
<th>Firstname</th>
 +
<th>Lastname</th>
 +
<th>Age</th>
 +
  </tr>
 +
  <tr>
 +
<td>Jill</td>
 +
<td>Smith</td>
 +
<td>50</td>
 +
  </tr>
 +
  <tr>
 +
<td>Eve</td>
 +
<td>Jackson</td>
 +
<td>94</td>
 +
  </tr>
 +
  <tr>
 +
<td>John</td>
 +
<td>Doe</td>
 +
<td>80</td>
 +
  </tr>
 +
</table>
 +
 +
 +
                  <hr style="width:60%"></hr>
 +
 +
                  <h2>References</h2>
 +
                  <div class="reftext">
 +
                  hier Referenz eins<br/>
 +
                  hier Referenz zwei<br/>
 +
                  .........<br/>
 +
                  </div>
 +
                 
 +
 +
 +
 +
    </div>
 +
      </div>
 +
 +
       
 +
 +
 +
 +
<!-- Footer -->
 +
<footer class="w3-container w3-padding-32 w3-center w3-black w3-xlarge" style="position: absolute; width:98%;">
 +
  <a class="footer-icon" href="https://www.facebook.com/igembielefeld/"> <i class="fa fa-facebook-official" ></i></a>
 +
  <a class="footer-icon" href="https://www.instagram.com/igem.bielefeld/?hl=de"><i class="fa fa-instagram"></i></a>
 +
  <a class="footer-icon" href="https://twitter.com/iGEM_Bielefeld"><i class="fa fa-twitter"></i></a>
 +
</footer>
  
 +
<img id="page-arrow-top"  src="https://static.igem.org/mediawiki/2018/d/d4/T--Bielefeld-CeBiTec--top_arrow_vk.svg" style="width:3%" onclick="topFunction()"></img>
  
−
<div class="column full_size judges-will-not-evaluate">
 
−
<h3>★  ALERT! </h3>
 
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
 
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
 
−
</div>
 
  
 +
</body>
  
 
</html>
 
</html>

Revision as of 21:14, 25 August 2018

/* HQ CSS*/ .firstHeading { display: none; }

.mw-content-text { display: none; }

.logo_2018 { display: none; }

  1. globalWrapper {

padding: 0px; margin: 0px; padding-bottom: 0px; }

  1. content {

margin-left:0px; padding:0px; width:100%; margin-top: -7px; }


.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ margin:0px; }

  1. top_title {

margin-bottom: 0px; }

  1. top_menu_14{

border-bottom: 0px solid black; }

  1. HQ_page p {

margin: 0; }

/*NAVBAR*/

@charset "UTF-8";

body{ margin-top:0px; }

.navigation { height: 70px; background: #002a5c; position: fixed; width:100%; text-decoration: none; }

.brand { position: absolute; padding-left: 20px; float: left; line-height: 70px; text-transform: uppercase; font-size: 1.4em; width: 300px; }

.logo-img{ width: 70%; margin-top: 1%; }

@media only screen and (max-width: 1350px) { .logo-img{ width: 70%; margin-top: 2%; }

.navigation{ position: absolute; }

}

@media only screen and (max-width: 790px) { .logo-img{ width: 70%; margin-top: 3%; }

.navigation{ position: absolute; }

}


.brand a, .brand a:visited { color: #ffffff; text-decoration: none; }

.nav-container { max-width: auto; margin: 0 auto; text-decoration: none; }

nav { float: right; text-decoration: none; } nav ul { list-style: none; margin: 0; padding: 0; text-decoration: none; } nav ul li { float: left; position: relative; text-decoration: none; } nav ul li a, nav ul li a:visited, nav ul li a:focus{ display: block; padding: 0 20px; line-height: 70px; background: #002a5c; color: #ffffff; text-decoration: none; margin-bottom:-4px; border-color:#002a5c; } nav ul li a:hover, nav ul li a:visited:hover { background: #4d9dff; color: #ffffff; text-decoration: none; } nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after { padding-left: 4px; content: " ▾"; text-decoration: none; } nav ul li ul li { min-width: 190px; text-decoration: none; } nav ul li ul li a { padding: 15px; line-height: 20px; text-decoration: none; text-decoration: none; }

.nav-dropdown { position: absolute; display: none; z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); text-decoration: none; }

/* Mobile navigation */ .nav-mobile { display: none; position: absolute; top: 0; right: 0; background: #002a5c; height: 70px; width: 70px; }

@media only screen and (max-width: 1350px) {


.nav-mobile { display: block; }

nav { width: 100%; padding: 70px 0 15px; } nav ul { display: none; max-height: 280px; overflow-y: auto; } nav ul li { float: none; } nav ul li a { padding: 15px; line-height: 20px; text-decoration: none; } nav ul li ul li a { padding-left: 30px; text-decoration: none; }

.nav-dropdown { position: static; } } @media screen and (min-width: 1351px) { .nav-list { display: block !important; } }

  1. nav-toggle {

position: absolute; left: 18px; top: 22px; cursor: pointer; padding: 10px 35px 16px 0px; max-height: 280px; overflow-y: auto; }

  1. nav-toggle span,
  2. nav-toggle span:before,
  3. nav-toggle span:after {

cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: #ffffff; position: absolute; display: block; content: ""; transition: all 300ms ease-in-out; }

  1. nav-toggle span:before {

top: -10px; }

  1. nav-toggle span:after {

bottom: -10px; }

  1. nav-toggle.active span {

background-color: transparent; }

  1. nav-toggle.active span:before, #nav-toggle.active span:after {

top: 0; }

  1. nav-toggle.active span:before {

transform: rotate(45deg); }

  1. nav-toggle.active span:after {

transform: rotate(-45deg); }

article { max-width: 1000px; margin: 0 auto; padding: 10px; line-height: 1.5; }

.article { max-width: 1000px; margin: 0 auto; padding: 10px; line-height: 1.5; padding-right: 5%; padding-left : 5%;

}

/* W3 Schools templates*/

.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1;} .w3-top{top:0;} .w3-bottom{bottom:0;}

  1. footer{display:block;width:98%}

.w3-container:after,.w3-container:before{content:"";display:table;clear:both;width:98%;}

.w3-container{}

.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important;}

.w3-center .w3-bar{display:inline-block;width:auto;}

.w3-center{text-align:center!important;}

.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important;}

.w3-xlarge{font-size:24px!important;}


/*OWN STYLES*/

body { font-family: "Lato", sans-serif; }

@media only screen and (min-width: 1010px){ .main_content {

background-color: white; border: 1px solid #000000; border-radius: 0px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); min-height: 100px; border-top: none; border-bottom: none; margin-left:25%; margin-right:25%; padding-bottom: 4%; min-height: 420px; position: sticky; margin-top: -100px; } }

@media only screen and (max-width: 1009px){ .main_content {

background-color: white; border: 1px solid #000000; border-radius: 0px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); min-height: 100px; border-top: none; border-bottom: none; margin-left:0; margin-right:0; padding-bottom: 4%; position: sticky; margin-top: -100px; } }


  1. container{

position: relative; min-height: 100%; height: 100%; }

.container{ padding-top:0px; background-color: #001633; }

.section{ margin: 1%; }

.half{ max-width: 48%; }

.half.left { float: left; margin-right: 1%; }

.half.right { float: right; margin-left: 1%;

}

article, .article { text-align: justify; display: block; margin: auto; font-size: 16px; padding-bottom: 20px; }

article, .article, .contentline { width: 90%; font-size: 16px; padding-bottom: 30px; }

.contentline article, .contentline .article { width: 100%; }

h1, h2, h3, h4, h5, h6 { width: 92%; margin: auto; margin-top: 0px; padding-top: 20px; padding-bottom: 15px; }

.p { text-align: justify; }

.title { font-size: 40px; padding-top: 5%; padding-left: 3%; padding-bottom: 40px; font-weight: bold; background-color: rgb(255,255,255); margin-top: -70px; position:sticky; line-height:1.5em; text-align:left; }

h2 { padding-left: 3%; font-size:14; }

br { display: block; /* makes it have a width */ content: ""; /* clears default height */ margin-top: 20px; /* change this to whatever height you want it */ }

p { font-size:14px; }

body { padding-top: 0px; }



article{ padding-right: 5%; padding-left : 5%; }

  1. page-arrow-top {

display: none; cursor: pointer; padding: 0; margin: 0; position: fixed; bottom: 20px; right: 50px; }

.half { width: 48%; }

.half.left { float: left; margin-right: 1%; }

.half.right { float: right; margin-left: 1%; }

.sidenavi{

margin-top: 50px; margin-left: 4%; display: block; position: -webkit-sticky; position: sticky; top: 150px; float: left; background-color: #001633; border-radius: 30px; border-color: white; border-style: solid; }


.side_list{ display: block; margin-right: 10px; margin-bottom: 15px; margin-top: 10px; margin-left: 10px; color: white; }

.side_link{ color: white; font-size: 20px; text-decoration:none; padding: 10px; }

.side_list > a:hover{ text-decoration:none; color: white; }

.side_list > a{ text-decoration:none; font-size: 18px; padding: 10px; width:100%; cursor: pointer; color: white; }


@media only screen and (max-width: 1150px){ .sidenavi{

margin-top: 50px; margin-left: 1%; display: block; position: -webkit-sticky; position: sticky; top: 150px; float: left; background-color: #001633; border-radius: 30px; border-color: white; border-style: solid; }

.side_list{ display: block; margin-right: 10px; margin-bottom: 15px; margin-top: 10px; margin-left: 10px; color: white; }

.side_link{ color: white; font-size: 10px; text-decoration:none; padding: 10px; }

.side_list > a:hover{ text-decoration:none; color: white; }

.side_list > a{ text-decoration:none; font-size: 16px; padding: 12px; width:100%; cursor: pointer; color: white; }

}


@media only screen and (max-width: 1685px){ .sidenavi{

margin-top: 50px; margin-left: 1%; display: block; position: -webkit-sticky; position: sticky; top: 150px; float: left; background-color: #001633; border-radius: 30px; border-color: white; border-style: solid; }

.side_list{ display: block; margin-right: 10px; margin-bottom: 15px; margin-top: 10px; margin-left: 10px; color: white; }

.side_link{ color: white; font-size: 10px; text-decoration:none; padding: 10px; }

.side_list > a:hover{ text-decoration:none; color: white; }

.side_list > a{ text-decoration:none; font-size: 16px; padding: 8px; width:100%; cursor: pointer; color: white; }

}


@media only screen and (max-width: 1300px){ .sidenavi{ display: none;

} }


figure { text-align: center; margin-bottom: 30px;

}

figcaption{ text-align: justify; font-size: 13px; margin-top:10px; }

.figure.eighty { width:80%; }

.figure.ten { width:10%; }

.figure.twenty { width:20%; }

.figure.thirty { width:30%; }

.figure.fourty { width:40%; }

.figure.fifty { width:50%; }

.figure.sixty { width:60%; }

.figure.seventy { width:70%; }

.figure.ninety { width:90%; }

.figure.hundred { width:100%; }


table, th, td { border: 1px solid black; border-collapse: collapse; font-size:17px; } th, td { padding: 15px; text-align: left; } table#t01 tr:first-child td{ background-color: #eee; }

table#t01 tr td:first-child { background-color: #eee; color: black; }


table.centern{ margin-left:15%; margin-right:15%; margin-top: 100px; margin-top: 5%; }

  1. HQ_page table {

border: 1px solid #ccc; border-collapse: collapse; width: 70%; margin: auto; margin-bottom: 0px; margin-top: 100px; margin-right: auto; margin-left: auto; }

hr { margin-top: 10%; margin-bottom: 20px; border: 0; text-align: center; border-top: 2px solid #000000; margin-left: auto; margin-right: auto;

}

.reftext { display: block; text-align: justify; margin-left: 5%; margin-right: 5%; font-size: 14px; padding-bottom: 20px; line-height: 20px; }

/*Footer*/ .fa-facebook-official:before { content: "\f230"; color: white; }


.fa-instagram:before { content: "\f230"; color: white; }

.fa-twitter:before { content: "\f230"; color: white; }

  1. myDIV {

margin-top: 10px; display:none; }

.refbtn{ background-color: white; border: none; font-size: 150%; font-weight: bold; color: black; margin-left: 5%; margin-bottom: 26px; margin-top: 30px;

}

a.shifted-anchor { display: block; position:relative; top: -100px; }

active{

text-decoration: none; }

html,body { background-color: #001633; }


  1. myVideo {

position: static; top:0; left:0 right: 0; bottom: 0; height: auto; margin-top: 70px; z-index:1; }


.title_picture{ width:100%; padding-top:40px; }


@-webkit-keyframes animateBubble { 0% { margin-top: 310%; } 100% { margin-top: 5%; } }

@-moz-keyframes animateBubble { 0% { margin-top: 310%; } 100% { margin-top: 5%; } }

@keyframes animateBubble { 0% { margin-top: 310%; } 100% { margin-top: 5%; } }


@-webkit-keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -200%; } }

@-moz-keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -200%; } }

@keyframes animateBubbleSeite { 0% { margin-top: 40px; } 100% { margin-top: -200%; } }


@-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }

@-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }

@keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } }


.s1 { -webkit-animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubbleSeite 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 5%; top: 95%; z-index:1; overflow: hidden;

-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }


.x1 { -webkit-animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 100s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: -5%; top: 20%; z-index:1; overflow: hidden;

-webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x2 { -webkit-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 5%; top: 20%; z-index:1; overflow: hidden; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x3 { -webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 10%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x4 { -webkit-animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 90s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 20%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x5 { -webkit-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 30%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x6 { -webkit-animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 115s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 50%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x7 { -webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 65%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x8 { -webkit-animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 100s linear infinite, sideWays 3s ease-in-out infinite alternate;

left: 80%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); transform: scale(0.2); }

.x9 { -webkit-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;

left: 90%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }

.x10 { -webkit-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 120s linear infinite, sideWays 2s ease-in-out infinite alternate;

left: 80%; top: 20%; overflow: hidden; z-index:1; -webkit-transform: scale(0.1); -moz-transform: scale(0.1); transform: scale(0.1); }


.bubble { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;

-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

height: 200px; position: absolute; width: 200px; }

.bubble:after { background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 0%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(0%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 0%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;

-webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3); box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

content: ""; height: 180px; left: 10px; position: absolute; width: 180px; }

@media only screen and (max-width: 1700px) {

.bubble.x1, .bubble.x2, .bubble.x8, .bubble.x9, .bubble.x10{ display:none; }


}


@media only screen and (max-width: 1200px) {

.bubble.x1, .bubble.x2, .bubble.x7, .bubble.x8, .bubble.x9, .bubble.x10{ display:none; } }


.timer_box{ 

   border: white;
   border-style: solid;
   padding-bottom: 125px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

  1. gold {
 float: left;
 font-size: 50px;
 margin-top: 10px;
 width: 50%;
 color:white;

text-align: center;

}

  1. gold_text {
 float: left;
 font-size: 20px;
 margin-top: 0px;
 width: 50%;
 color:white;

text-align: center; }

  1. silver {
 float: left;
 text-align: center;
 font-size: 50px;
 margin-top: 10px;
 width: 50%;
 color:white;

}

  1. silver_text {
 float: left;
 text-align: center;
 font-size: 20px;
 margin-top: 0px;
 width: 50%;
 color:white;

}

.img_text{ text-align:center; position:absolute; }

  1. home_imgs {
   margin-top:100px;
   width:60%;

}


@media only screen and (max-width: 1300px) {

  1. home_imgs{

width:70%;

}

  1. silver{

font-size: 30px;

}

  1. gold{

font-size: 30px;

}

  1. silver_text{

font-size: 20px;

}


  1. gold_text{

font-size: 20px; }

}


@media only screen and (max-width: 900px) {

.timer_box{ 

   border: white;
   border-style: solid;
   padding-bottom: 100px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

  1. home_imgs{

margin-top:50px; width:90%; }

  1. silver{

font-size: 20px;

}

  1. gold{

font-size: 20px;

}

  1. silver_text{

font-size: 15px;

}


  1. gold_text{

font-size: 15px; }

}


@media only screen and (max-width: 600px) {

.timer_box{ 

   border: white;
   border-style: solid;
   padding-bottom: 100px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

  1. home_imgs{

margin-top:15px; width:100%; }

  1. silver{

font-size: 15px;

}

  1. gold{

font-size: 15px;

}

  1. silver_text{

font-size: 10px;

}


  1. gold_text{

font-size: 10px; }

}


@media only screen and (max-width: 400px) {

.timer_box{ 

   border: white;
   border-style: solid;
   padding-bottom: 50px;
   padding-left: 10px;
   padding_top:10px;
   marging-bottom: 100px;

}

  1. home_imgs{

margin-top:5px; width:100%; }

  1. silver{

font-size: 10px;

}

  1. gold{

font-size: 10px;

}

  1. silver_text{

font-size: 5px;

}


  1. gold_text{

font-size: 5px; }

}

Basic Parts
For our metal resource recovery system we build lots of new biobricks for accumulation and storage of metal ions, toxicity counteractions and nanoparticle formation. We also designed Parts for our siRNA expression and analyzation tool to regulate expression of individual genes on RNA level.
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

References

hier Referenz eins
hier Referenz zwei
.........