Difference between revisions of "Team:Heidelberg"
Lukas Adam (Talk | contribs) |
|||
| 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 123: | Line 122: | ||
<!-- Assets --> | <!-- Assets --> | ||
<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"> | ||
| 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> | ||
| − | + | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Heidelberg/styles2/CSS?action=raw&ctype=text/css"> | |
| Line 562: | Line 149: | ||
<!-- 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 228: | ||
#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 258: | ||
#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 279: | ||
} | } | ||
#toolbox-row2 { | #toolbox-row2 { | ||
| − | top: | + | top: 180px; |
} | } | ||
#toolbox-row3 { | #toolbox-row3 { | ||
| − | top: | + | top: 360px; |
} | } | ||
wrapper { | wrapper { | ||
| Line 690: | Line 289: | ||
| − | video { | + | .landing-video { |
position: relative; | position: relative; | ||
| Line 701: | Line 300: | ||
#Icon1 { | #Icon1 { | ||
position: absolute; | position: absolute; | ||
| − | + | ||
left: 4%; | left: 4%; | ||
} | } | ||
| Line 712: | Line 311: | ||
#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 326: | ||
#Icon6 { | #Icon6 { | ||
position: absolute; | position: absolute; | ||
| − | right: | + | right: 10%; |
width: 300px; | width: 300px; | ||
} | } | ||
| Line 735: | Line 334: | ||
top: 20px; | top: 20px; | ||
left: 130px; | left: 130px; | ||
| + | |||
| + | |||
} | } | ||
| Line 741: | Line 342: | ||
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 372: | ||
| − | #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 381: | ||
| − | #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 389: | ||
| − | #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 398: | ||
| − | #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 412: | ||
#toolbox { | #toolbox { | ||
position: absolute; | position: absolute; | ||
| − | top: | + | top: 3900px; |
min-height: 600px ; | min-height: 600px ; | ||
width: 100%; | width: 100%; | ||
| Line 841: | Line 445: | ||
transition: all 1s ease-out; | transition: all 1s ease-out; | ||
} | } | ||
| − | + | ||
| + | |||
| + | @media (max-width: 1200px) { | ||
#wrapper { | #wrapper { | ||
| Line 851: | Line 457: | ||
#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 490: | ||
#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 535: | ||
#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,192: | Line 610: | ||
<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,199: | Line 617: | ||
<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#lac" class="sublink" style="color: #ffd700 !important">Beta-lactamase</a> and reprogrammed <a href="https://2017.igem.org/Team:Heidelberg/Validation#gusgal" class="sublink" style="color: #ffd700 !important">Beta-glucuronidase!</a></p> | |
| − | + | </p> | |
| + | |||
| + | |||
| + | </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/Organosilicones"><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/Organosilicones" class="sublink" style="color: #F8991D !important">organosilicons</a>. Using T7 polymerase as modular platform, we also showcase the evolution of improved <a href="https://2017.igem.org/Team:Heidelberg/Protein_Interaction" class="sublink" style="color: #F8991D !important">protein-protein interaction.</a></p> | |
| − | + | ||
</div> | </div> | ||
| − | + | <div class="textblock" id="textblock8"> | |
| − | + | <p class="aligner-left"> Now it’s on you. Our toolbox guide and RFC help you to get started.</p> | |
| − | + | ||
</div> | </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>Opto-Genetics</h5><p>Adapt selection stringency with light</p></a></div></div> | |
| − | <div id="Icon5" class="icon"><img src="https://static.igem.org/mediawiki/2017/ | + | <div id="Icon5" class="icon"><a href="https://2017.igem.org/Team:Heidelberg/Organosilicones"><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/Organosilicones"><h5>Organo silicones</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,337: | Line 713: | ||
| − | </body | + | </body> |
</html> | </html> | ||
| + | {{Heidelberg/footer}} | ||
Revision as of 22:23, 31 October 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 T7 polymerase as modular platform, we also showcase the evolution of improved protein-protein interaction.
Now it’s on you. Our toolbox guide and RFC help you to get started.
