Difference between revisions of "Team:Heidelberg"
Lukas Adam (Talk | contribs) |
Lukas Adam (Talk | contribs) |
||
| (16 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | <html> | |
| − | <html | + | |
<head> | <head> | ||
<meta charset="UTF-8" /> | <meta charset="UTF-8" /> | ||
| Line 40: | Line 39: | ||
| − | + | <div id="top-section"> | |
| − | + | <script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script> | |
| − | + | ||
| Line 116: | Line 114: | ||
} | } | ||
</style> | </style> | ||
| + | |||
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/jasnybootstrapmin?action=raw&ctype=text/css" /> | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Heidelberg/css/jasnybootstrapmin?action=raw&ctype=text/css" /> | ||
| Line 124: | Line 123: | ||
<link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" /> | <link rel="stylesheet" href="http://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" /> | ||
| − | |||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500"> | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400|Roboto:300,400,500"> | ||
<link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css"> | <link rel="stylesheet" href="http://azmind.com/demo/bootstrap-navbar-menu/layout-3/assets/bootstrap/css/bootstrap.min.css"> | ||
| Line 133: | Line 131: | ||
<link rel="stylesheet" type="text/css" | <link rel="stylesheet" type="text/css" | ||
href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&ctype=text/css" /> | href="https://2017.igem.org/Template:Heidelberg/general/CSS?action=raw&ctype=text/css" /> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<!-- Favicon and touch icons --> | <!-- Favicon and touch icons --> | ||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> | ||
| + | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Heidelberg/styles2/CSS?action=raw&ctype=text/css"> | ||
| Line 555: | Line 144: | ||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> | <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<!-- jQuery CDN --> | <!-- jQuery CDN --> | ||
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> | <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> | ||
| Line 569: | Line 151: | ||
<!-- jQuery Nicescroll CDN --> | <!-- jQuery Nicescroll CDN --> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script> | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js"></script> | ||
| − | + | ||
| − | + | <style> | |
| − | + | body { | |
| − | + | font-family: 'Josefin Sans' !important; | |
| + | font-size: 16px; | ||
| + | font-weight: 300; | ||
| + | color: #888; | ||
| + | |||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .textblock > p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;} | ||
| + | |||
#textblock1 { | #textblock1 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 100px; |
| − | left: | + | left: 20px; |
| − | width: 500px; | + | width:500px; |
} | } | ||
#textblock2 { | #textblock2 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 960px; |
| − | left: | + | left: 220px; |
| − | width: | + | width: 450px; |
} | } | ||
#textblock3 { | #textblock3 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 960px; |
| − | right: | + | right: 20px; |
width: 500px; | width: 500px; | ||
| − | height: | + | height: 300px; |
} | } | ||
#textblock4 { | #textblock4 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 1500px; |
| − | left: | + | left: 20px; |
| − | width: | + | width:450px; |
} | } | ||
#textblock5 { | #textblock5 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 2100px; |
| − | right: | + | right: 20px; |
| − | width: | + | width: 550px; |
} | } | ||
#textblock6 { | #textblock6 { | ||
position: absolute; | position: absolute; | ||
top: 2700px; | top: 2700px; | ||
| − | left: | + | left: 20px; |
width: 500px; | width: 500px; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
#textblock7 { | #textblock7 { | ||
position: absolute; | position: absolute; | ||
top: 3250px; | top: 3250px; | ||
| − | right: | + | right: 20px; |
| − | width: | + | width: 600px; |
} | } | ||
| − | #textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p { | + | #textblock8 { |
| + | position: absolute; | ||
| + | top: 3750px; | ||
| + | left: 50px; | ||
| + | width: 400px; | ||
| + | } | ||
| + | #textblock9 { | ||
| + | position: absolute; | ||
| + | top: 3750px; | ||
| + | right: 50px; | ||
| + | width: 400px; | ||
| + | } | ||
| + | |||
| + | #textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p, #textblock8 > p { | ||
color: white !important; | color: white !important; | ||
text-align: center; | text-align: center; | ||
| − | font-size: | + | font-size: 26px !important; |
font-weight: 300 !important; | font-weight: 300 !important; | ||
} | } | ||
| Line 632: | Line 230: | ||
#textblock1 > a { | #textblock1 > a { | ||
color: #F8991D; | color: #F8991D; | ||
| − | font-size: | + | font-size: 60px !important; |
| + | line-height: 60px !important; | ||
} | } | ||
| − | #textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, # | + | #textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, #textblock9 > a:hover { |
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
#textblock2 > a { | #textblock2 > a { | ||
| − | color: | + | color: #fbb74b; |
| − | font-size: | + | font-size: 60px; |
| − | line-height: | + | line-height: 60px; |
} | } | ||
#textblock4 > a { | #textblock4 > a { | ||
| − | color:# | + | color:#9D1C20; |
| − | font-size: | + | font-size: 60px; |
| − | line-height: | + | line-height: 60px; |
} | } | ||
#textblock5 > a { | #textblock5 > a { | ||
| − | color: | + | color:#Fee000; |
font-size: 50px; | font-size: 50px; | ||
line-height: 50px; | line-height: 50px; | ||
} | } | ||
#textblock6 > a { | #textblock6 > a { | ||
| − | + | color: #6698be; | |
font-size: 50px; | font-size: 50px; | ||
line-height: 50px; | line-height: 50px; | ||
| Line 661: | Line 260: | ||
#textblock7 > a { | #textblock7 > a { | ||
| − | color: # | + | color:#F8991D; |
font-size: 50px; | font-size: 50px; | ||
line-height: 50px; | line-height: 50px; | ||
} | } | ||
| − | # | + | #textblock9 > a { |
| − | color: | + | color: white; |
| − | font-size: | + | font-size: 60px !important; |
| + | line-height: 60px !important; | ||
} | } | ||
| + | |||
#toolbox-icon1 { | #toolbox-icon1 { | ||
| Line 680: | Line 281: | ||
} | } | ||
#toolbox-row2 { | #toolbox-row2 { | ||
| − | top: | + | top: 180px; |
} | } | ||
#toolbox-row3 { | #toolbox-row3 { | ||
| − | top: | + | top: 360px; |
} | } | ||
wrapper { | wrapper { | ||
| Line 690: | Line 291: | ||
| − | video { | + | .landing-video { |
position: relative; | position: relative; | ||
| Line 701: | Line 302: | ||
#Icon1 { | #Icon1 { | ||
position: absolute; | position: absolute; | ||
| − | + | ||
left: 4%; | left: 4%; | ||
} | } | ||
| Line 712: | Line 313: | ||
#Icon3 { | #Icon3 { | ||
position: absolute; | position: absolute; | ||
| − | left: | + | left: 4%; |
width: 400px; | width: 400px; | ||
} | } | ||
#Icon4 { | #Icon4 { | ||
position: absolute; | position: absolute; | ||
| − | right: | + | right: 12%; |
width: 300px; | width: 300px; | ||
} | } | ||
| Line 727: | Line 328: | ||
#Icon6 { | #Icon6 { | ||
position: absolute; | position: absolute; | ||
| − | right: | + | right: 10%; |
width: 300px; | width: 300px; | ||
} | } | ||
| Line 735: | Line 336: | ||
top: 20px; | top: 20px; | ||
left: 130px; | left: 130px; | ||
| + | |||
| + | |||
} | } | ||
| Line 741: | Line 344: | ||
top: 20px; | top: 20px; | ||
right: 0px; | right: 0px; | ||
| + | |||
width: 300px; | width: 300px; | ||
} | } | ||
| − | #Icon1 > .icon-text | + | #Icon1 > .icon-text h5 { |
text-transform: uppercase; | text-transform: uppercase; | ||
| − | color: # | + | color: #b3dede !important; |
font-weight: 400 !important; | font-weight: 400 !important; | ||
line-height: 40px !important; | line-height: 40px !important; | ||
} | } | ||
| − | #Icon1:hover > .icon-text | + | #Icon1:hover > .icon-text p,#Icon2:hover > .icon-text p,#Icon3:hover > .icon-text p,#Icon4:hover > .icon-text-right p,#Icon5:hover > .icon-text-right p,#Icon6:hover > .icon-text-right p { |
| − | + | opacity: 1 !important; | |
text-align: center; | text-align: center; | ||
| − | transition: | + | transition: opacity 1s ease; |
| − | + | ||
} | } | ||
| − | #Icon1 > .icon-text | + | #Icon1 > .icon-text p,#Icon2 > .icon-text p,#Icon3 > .icon-text p,#Icon4 > .icon-text-right p,#Icon5 > .icon-text-right p,#Icon6 > .icon-text-right p { |
| − | + | opacity: 0 !important; | |
| + | color: white !important; | ||
| + | font-family: 'Josefin Sans' !important; | ||
| + | font-size: 25px !important; | ||
} | } | ||
| − | #Icon2 > .icon-text | + | #Icon2 > .icon-text h5 { |
text-transform: uppercase; | text-transform: uppercase; | ||
| − | color: # | + | color: #b2cbdd !important; |
font-weight: 400 !important; | font-weight: 400 !important; | ||
line-height: 40px !important; | line-height: 40px !important; | ||
| Line 768: | Line 374: | ||
| − | #Icon3 > .icon-text | + | #Icon3 > .icon-text h5 { |
text-transform: uppercase; | text-transform: uppercase; | ||
| − | color: # | + | color: #fed699!important; |
font-weight: 400 !important; | font-weight: 400 !important; | ||
line-height: 40px !important; | line-height: 40px !important; | ||
| Line 777: | Line 383: | ||
| − | #Icon4 > .icon-text-right | + | #Icon4 > .icon-text-right h5 { |
text-transform: uppercase; | text-transform: uppercase; | ||
| − | color: # | + | color: #d89f9c !important; |
font-weight: 400 !important; | font-weight: 400 !important; | ||
line-height: 40px !important; | line-height: 40px !important; | ||
| Line 785: | Line 391: | ||
| − | #Icon5 > .icon-text-right | + | #Icon5 > .icon-text-right h5 { |
text-transform: uppercase; | text-transform: uppercase; | ||
| − | color: # | + | color: #fef39b !important; |
font-weight: 400 !important; | font-weight: 400 !important; | ||
line-height: 40px !important; | line-height: 40px !important; | ||
| Line 794: | Line 400: | ||
| − | #Icon6 > .icon-text-right | + | #Icon6 > .icon-text-right h5 { |
text-transform: uppercase; | text-transform: uppercase; | ||
| − | color: # | + | color: #9ad5c3 !important; |
font-weight: 400 !important; | font-weight: 400 !important; | ||
line-height: 40px !important; | line-height: 40px !important; | ||
| Line 808: | Line 414: | ||
#toolbox { | #toolbox { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 3900px; |
min-height: 600px ; | min-height: 600px ; | ||
width: 100%; | width: 100%; | ||
| Line 841: | Line 447: | ||
transition: all 1s ease-out; | transition: all 1s ease-out; | ||
} | } | ||
| − | + | ||
| + | |||
| + | @media (max-width: 1200px) { | ||
#wrapper { | #wrapper { | ||
| Line 851: | Line 459: | ||
#textblock1 { | #textblock1 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 50px; |
left: 0px; | left: 0px; | ||
width: 400px; | width: 400px; | ||
} | } | ||
| − | #textblock1 > p, #textblock3 > p, #textblock5 > p { | + | #textblock1 > p, #textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p,#textblock7 > p,#textblock8 > p,#textblock9 > p { |
color: white !important; | color: white !important; | ||
| − | + | ||
font-size: 24px !important; | font-size: 24px !important; | ||
font-weight: 300 !important; | font-weight: 300 !important; | ||
} | } | ||
| − | #textblock1 > a { | + | #textblock1 > a, #textblock2 > a,#textblock3 > a, #textblock4 > a,#textblock5 > a,#textblock6 > a,#textblock7 > a,#textblock8 > a,#textblock9 > a { |
| − | line-height: 50px; | + | line-height: 50px !important; |
| − | font-size: 50px; | + | font-size: 50px !Important; |
} | } | ||
| Line 884: | Line 492: | ||
#textblock4 { | #textblock4 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 1250px; |
left: 0px; | left: 0px; | ||
| − | width: | + | width: 400px; |
} | } | ||
#textblock5 { | #textblock5 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 1700px; |
| − | right: | + | right: 0px; |
width: 500px; | width: 500px; | ||
} | } | ||
#textblock6 { | #textblock6 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 2220px; |
left: 0px; | left: 0px; | ||
| − | width: | + | width: 450px; |
} | } | ||
#textblock7 { | #textblock7 { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 2700px; |
| − | right: | + | right: 0px; |
| + | width: 550px; | ||
} | } | ||
| − | + | #textblock8 { | |
| − | # | + | |
position: absolute; | position: absolute; | ||
| − | top: | + | top: 3200px; |
| − | + | left: 0px; | |
| − | + | width: 400px; | |
} | } | ||
| − | # | + | #textblock9 { |
| − | position: | + | position: absolute; |
| − | + | top: 3200px; | |
| + | right: 0px; | ||
| + | width: 400px; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
#toolbox { | #toolbox { | ||
| − | top: | + | position: absolute; |
| + | top: 3700px; | ||
} | } | ||
| − | |||
| − | |||
#toolbox-image { | #toolbox-image { | ||
position: relative; | position: relative; | ||
| Line 1,020: | Line 537: | ||
#Icon1 { | #Icon1 { | ||
left: 100px; | left: 100px; | ||
| − | |||
} | } | ||
#Icon2 { | #Icon2 { | ||
left: 100px; | left: 100px; | ||
| − | |||
} | } | ||
#Icon3 { | #Icon3 { | ||
left: 100px; | left: 100px; | ||
| − | |||
} | } | ||
#Icon4 { | #Icon4 { | ||
right: 200px; | right: 200px; | ||
| − | |||
} | } | ||
#Icon5 { | #Icon5 { | ||
right: 200px; | right: 200px; | ||
| − | + | ||
} | } | ||
#Icon6 { | #Icon6 { | ||
right: 200px; | right: 200px; | ||
| − | |||
} | } | ||
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .sublink { | |
| − | + | font-weight: 400 !important; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .sublink:hover { | ||
| + | |||
| + | text-decoration: underline !important; | ||
| + | } | ||
| + | |||
| + | .aligner-left { | ||
| + | text-align: center !important; | ||
| + | } | ||
| − | + | .aligner-right { | |
| − | + | text-align: center !important; | |
| − | + | } | |
| − | + | ||
| − | + | #overall-wrapper { | |
| − | + | min-width: 1000px; | |
| − | + | } | |
| − | + | ||
| − | + | @media (max-width: 960px) { | |
| − | + | body { | |
| − | + | width: 1000px; | |
| − | + | overflow-x: scroll; | |
| − | + | } | |
| − | + | } | |
| − | + | @media screen and (max-width: 960px) { | |
| − | + | .t-container { | |
| − | + | width: 1000px ! important; | |
| − | + | max-width: 1200px !important; | |
| − | + | min-width: 980px !important; | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</style> | </style> | ||
| − | |||
</head> | </head> | ||
<body class="t-body"> | <body class="t-body"> | ||
| − | + | <!-- Top menu --> | |
| − | + | </html> | |
| − | + | {{Heidelberg/navbar}} | |
| − | + | <html> | |
| − | + | <div id="overall-wrapper"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<!-- cover --> | <!-- cover --> | ||
| − | + | <div class="t-cover" style="height:100vh;" > | |
<div id="media-box"> | <div id="media-box"> | ||
| − | <video id="landing-page-video" poster="" style="position:absolute" playsinline autoplay muted> | + | <video id="landing-page-video" class="landing-video" poster="https://static.igem.org/mediawiki/2017/0/06/T--Heidelberg--2017_Landing_Page_Poster.svg" style="position:absolute" playsinline autoplay muted> |
<source src="https://static.igem.org/mediawiki/2017/2/25/T--Heidelberg--2017_Wiki_Intro_iGEM2017.mp4" type="video/mp4"> | <source src="https://static.igem.org/mediawiki/2017/2/25/T--Heidelberg--2017_Wiki_Intro_iGEM2017.mp4" type="video/mp4"> | ||
</video> | </video> | ||
| Line 1,349: | Line 612: | ||
<div style="position:relative; height: 15px; ; z-index: 5; box-shadow: 0em -0.1em 3em 0.5em black; background-color: white"> | <div style="position:relative; height: 15px; ; z-index: 5; box-shadow: 0em -0.1em 3em 0.5em black; background-color: white"> | ||
<a href="#textblock1" style="position: absolute; bottom: 40px;right: 40px; background-color:transparent;"> | <a href="#textblock1" style="position: absolute; bottom: 40px;right: 40px; background-color:transparent;"> | ||
| − | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/6/6d/T--Heidelberg--2017_Phage_on_top2.svg" class="phage-scroller"></a> |
</div> | </div> | ||
<div style="background: #393939; z-index: 5;" id="wrapper"> | <div style="background: #393939; z-index: 5;" id="wrapper"> | ||
| Line 1,356: | Line 619: | ||
<div class="t-container" style="position: relative; padding-bottom: 50px; background-color: transparent;"> | <div class="t-container" style="position: relative; padding-bottom: 50px; background-color: transparent;"> | ||
<div class="t-col t-col_12"> | <div class="t-col t-col_12"> | ||
| − | |||
| + | <img width="100%" src="https://static.igem.org/mediawiki/2017/c/cc/T--Heidelberg--2017_Red_Thread3.svg"> | ||
</div> | </div> | ||
| − | <div | + | <div class="textblock" id="textblock1"> |
| − | <p> | + | <p style="padding-bottom: 10px" class="aligner-left">Life shows an astonishing diversity and complexity, resulting from millions of years of random mutation and selection.</p><p> We, <a href="https://2017.igem.org/Team:Heidelberg/Team" class="sublink" style="color: #f8991d !important">the iGEM Team Heidelberg</a>,</p> |
| − | <a href=" | + | <a href="https://2017.igem.org/Team:Heidelberg/Description" id="accelerated_evolution"><strong>Accelerate Evolution</strong></a> |
| − | + | <p>to drive <a href="https://2017.igem.org/Team:Heidelberg/Achievements" class="sublink" style="color: #f8991d !important">Innovation</a> for human benefit</p> | |
| + | <a href="https://2017.igem.org/Team:Heidelberg/Description" style="color: white !important; padding: 20px; background-color: #f8991d !important; border-radius: 5px;font-size: 30px !important;">Explore our project</a> | ||
</div> | </div> | ||
| − | <div id="textblock2"> | + | <div class="textblock" id="textblock2"> |
| − | < | + | <a href="https://2017.igem.org/Team:Heidelberg/Design"><strong>Curious how?</strong></a> |
| − | <a href="#">< | + | <p style="padding-top: 30px" class="aligner-left">To speed up and direct evolution, we use <a href="https://2017.igem.org/Team:Heidelberg/Pace" class="sublink" style="color: #fbb74b !important">phage-assisted continuous evolution</a> and our newly created & simple method called <a href="https://2017.igem.org/Team:Heidelberg/Predcel" class="sublink" style="color: #fbb74b !important">PREDCEL</a></p> |
</div> | </div> | ||
| − | + | <div id="textblock3" style="z-index: 2;"> | |
| − | + | <video poster="" style="position:absolute;" controls> | |
| + | <source src="https://static.igem.org/mediawiki/2017/a/a9/T--Heidelberg--2017_1st_Video_iGEM_lq.mp4" type="video/mp4"> | ||
| + | </video> | ||
| + | <p style="font-family: 'Josefin Sans' !important; font-size: 20px !important; color: white; position: absolute; bottom: -44px; text-align: center;"> <a style="font-size: 20px; font-family: 'Josefin Sans' !important; color: #fbb74b; text-decoration: underline;" href="https://2017.igem.org/Team:Heidelberg/Design">Klick here</a> for our second video!</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="textblock" id="textblock4"> | ||
| + | <p>No way to be fast enough without</p><a href="https://2017.igem.org/Team:Heidelberg/Model"><strong>Modeling</strong></a><p class="aligner-left"> Learn how we optimized our experimental parameters using ODE models calibrated with wet lab data.</p><p class="aligner-left"> And the best: Our interactive models run <a href="https://2017.igem.org/Team:Heidelberg/Model/Tools" class="sublink" style="color: #9d1c20 !important">entirely in your browser!</a></p> | ||
| + | |||
</div> | </div> | ||
| − | + | <div class="textblock" id="textblock5"> | |
| − | + | <p>Still too slow? Meet our Artificial Intelligence for Genetic Evolution Mimicking,</p><a href="https://2017.igem.org/Team:Heidelberg/Software" id="artificial_intelligence"><strong>AiGEM!</strong></a><p style="padding-top: 10px;" class="aligner-right"> AiGEM comprises a<a href="https://2017.igem.org/Team:Heidelberg/Software/DeeProtein" class="sublink" style="color: #ffd700 !important"> deep neuronal network</a> and accompanying <a href="https://2017.igem.org/Team:Heidelberg/Software/GAIA" class="sublink" style="color: #ffd700 !important">genetic algorithm</a> able to fast-forward directed evolution in silico</p><p class="aligner-right"> Not convinced yet? | |
| − | + | Check out our fully in silico evolved, optimized <a href="https://2017.igem.org/Team:Heidelberg/Validation#bLac" class="sublink" style="color: #ffd700 !important">Beta-lactamase</a> and reprogrammed <a href="https://2017.igem.org/Team:Heidelberg/Validation#GUS2GAL" class="sublink" style="color: #ffd700 !important">Beta-glucuronidase!</a></p> | |
| − | + | </p> | |
| + | |||
| + | |||
</div> | </div> | ||
| − | + | <div class="textblock" id="textblock6"> | |
| − | + | ||
| − | + | <p>To make a difference, we need to consider the whole</p> <a href="https://2017.igem.org/Team:Heidelberg/Human_Practices"><strong>Colorful Picture</strong></a><p style="padding-top: 10px;" class="aligner-left">Our integrated human practice activities helped us to make our technology <a href="https://2017.igem.org/Team:Heidelberg/Safety" class="sublink" style="color:#6698be !important">safer</a> and stimulate its <a href="https://2017.igem.org/Team:Heidelberg/Interviews" class="sublink" style="color:#6698be !important">responsible use</a>, ideally to address urgent human needs.</p> | |
| − | + | ||
</div> | </div> | ||
| − | + | <div class="textblock" id="textblock7"> | |
| − | + | <a href="https://2017.igem.org/Team:Heidelberg/Organosilicons"><strong>Our Applications:</strong></a> | |
| − | + | <p class="aligner-right">Evolving novel cytochromes with help of <a href="https://2017.igem.org/Team:Heidelberg/Software/MAWS" class="sublink" style="color: #F8991D !important">in silico predicted riboswitches</a>, to enable fully biological production of <a href="https://2017.igem.org/Team:Heidelberg/Organosilicons" class="sublink" style="color: #F8991D !important">organosilicons</a>. Using PREDCEL, we engineered the product specificity of <a href="https://2017.igem.org/Team:Heidelberg/Cytochrome_Engineering" class="sublink" style="color: #F8991D !important">cytochrome P450 1A2</a> towards theophylline.</p> | |
</div> | </div> | ||
| − | <div id=" | + | <div class="textblock" id="textblock8"> |
| − | <p> | + | <p class="aligner-left"> Now it’s on you. Our toolbox guide and RFC help you to get started.</p> |
| − | + | </div> | |
| + | <div class="textblock" id="textblock9"> | ||
| + | <a href="https://2017.igem.org/Team:Heidelberg/Toolbox"><strong>Learn. </strong><strong>Evolve.</strong><strong> PREDCEL! </strong></a> | ||
</div> | </div> | ||
| − | |||
<div id="toolbox"> | <div id="toolbox"> | ||
| − | + | <div style="position: relative;" id="toolbox-row1"> | |
| − | + | <div id="Icon1" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/Protein_Interaction"><img src="https://static.igem.org/mediawiki/2017/4/4b/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Protein_Interaction.svg" class="toolbox-icon" style="left: 0px;"></a><div class="icon-text" style="width: 300px;"><a href="https://2017.igem.org/Team:Heidelberg/Protein_Interaction"><h5>Protein Interaction</h5><p>Evolve specific binding</p></a></div></div> | |
| − | + | <div id="Icon4" class="icon"> <a href="https://2017.igem.org/Team:Heidelberg/Cytochrome_Engineering"><img src="https://static.igem.org/mediawiki/2017/9/9c/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Product_Specificity.svg" class="toolbox-icon" style="left: 280px;"></a><div class="icon-text-right"> <a href="https://2017.igem.org/Team:Heidelberg/Cytochrome_Engineering"><h5>Cytochrome Engineering</h5><p>Turning promiscous enzymes into specific biofactories</p></a></div></div> | |
</div> | </div> | ||
<div style="position: relative;" id="toolbox-row2"> | <div style="position: relative;" id="toolbox-row2"> | ||
| − | + | <div id="Icon2" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/Optogenetics"><img src="https://static.igem.org/mediawiki/2017/3/38/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Opto_Genetics.svg" class="toolbox-icon" style="left: 0px;"></a><div class="icon-text" style="width: 300px;"><a href="https://2017.igem.org/Team:Heidelberg/Optogenetics"><h5>Optogenetics</h5><p>Adapt selection stringency with light</p></a></div></div> | |
| − | <div id="Icon5" class="icon">< | + | <div id="Icon5" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/Organosilicons"><img src="https://static.igem.org/mediawiki/2017/e/e9/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Carbonsilicones.svg" class="toolbox-icon" style="left: 270px;"></a><div class="icon-text-right"><a href="https://2017.igem.org/Team:Heidelberg/Organosilicons"><h5>Organo-<br>silicons</h5><p>Teaching nature carbonsilicon chemistry</p></a></div></div> |
</div> | </div> | ||
<div style="position: relative;t" id="toolbox-row3"> | <div style="position: relative;t" id="toolbox-row3"> | ||
| − | + | <div id="Icon3" class="icon"> <a href="https://2017.igem.org/Team:Heidelberg/CRISPR"><img src="https://static.igem.org/mediawiki/2017/c/cd/T--Heidelberg--2017_T--Heidelberg--2017_Icon_DNA_Editing.svg" class="toolbox-icon" style="left: 0px;"></a><div class="icon-text" style="width: 230px;"> <a href="https://2017.igem.org/Team:Heidelberg/CRISPR"><h5>CRISPR Cas9</h5><p>Towards next-generation nucleases</p></a></div></div> | |
| − | + | <div id="Icon6" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/RFC"><img src="https://static.igem.org/mediawiki/2017/2/27/T--Heidelberg--2017_Icon_RFC.svg" class="toolbox-icon" style="left: 280px;"></a><div class="icon-text-right"><a href="https://2017.igem.org/Team:Heidelberg/RFC"><h5>RFC</h5><p>Our in vivo Evolution Standard</p></a></div></div> | |
</div> | </div> | ||
| + | |||
| + | |||
</div> | </div> | ||
| + | |||
</div> | </div> | ||
</div> | </div> | ||
| − | + | ||
| − | + | </body> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </div> | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<script> | <script> | ||
| Line 1,488: | Line 710: | ||
}, 1000, 'swing') | }, 1000, 'swing') | ||
}); | }); | ||
| + | |||
| + | $( document ).ready( function() { | ||
| + | $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2017/0/08/T--Heidelberg--2017_favicon.png'); | ||
| + | }); | ||
| + | |||
</script> | </script> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </body | + | </body> |
</html> | </html> | ||
| + | {{Heidelberg/footer}} | ||
Latest revision as of 17:29, 14 December 2017
WikitemplateA home
From 2014.igem.org
Life shows an astonishing diversity and complexity, resulting from millions of years of random mutation and selection.
Accelerate Evolutionto drive Innovation for human benefit
Explore our project
Curious how?
To speed up and direct evolution, we use phage-assisted continuous evolution and our newly created & simple method called PREDCEL
Klick here for our second video!
No way to be fast enough without
ModelingLearn how we optimized our experimental parameters using ODE models calibrated with wet lab data.
And the best: Our interactive models run entirely in your browser!
Still too slow? Meet our Artificial Intelligence for Genetic Evolution Mimicking,
AiGEM!AiGEM comprises a deep neuronal network and accompanying genetic algorithm able to fast-forward directed evolution in silico
Not convinced yet? Check out our fully in silico evolved, optimized Beta-lactamase and reprogrammed Beta-glucuronidase!
To make a difference, we need to consider the whole
Colorful PictureOur integrated human practice activities helped us to make our technology safer and stimulate its responsible use, ideally to address urgent human needs.
Our Applications:
Evolving novel cytochromes with help of in silico predicted riboswitches, to enable fully biological production of organosilicons. Using PREDCEL, we engineered the product specificity of cytochrome P450 1A2 towards theophylline.
Now it’s on you. Our toolbox guide and RFC help you to get started.
