(Prototype team page) |
KevinYLi123 (Talk | contribs) |
||
(40 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
− | {{Lambert_GA}} | + | {{:Team:Lambert_GA/Template}} |
<html> | <html> | ||
+ | <head> | ||
− | < | + | <link href="https://fonts.googleapis.com/css?family=Codystar:300,400" rel="stylesheet"> |
+ | <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
+ | <style type="text/css"> | ||
+ | #holder { | ||
+ | position: fixed; | ||
+ | top: 0%; | ||
+ | left: 0%; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | z-index: -3; | ||
+ | } | ||
+ | #oceanvideo { | ||
+ | position: fixed; | ||
+ | top: 0%; | ||
+ | left: 0%; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | object-fit: fill; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | #overlay { | ||
+ | position: fixed; | ||
+ | top: 0%; | ||
+ | left: 0%; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #000000; | ||
+ | opacity: 0.3; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | #bigtitle { | ||
+ | position: absolute; | ||
+ | top: 43%; | ||
+ | left: 0%; | ||
+ | height: 10%; | ||
+ | width: 100%; | ||
+ | z-index: 2; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | color: #FFFFFF; | ||
+ | font-size: 70px; | ||
+ | text-align: center; | ||
+ | z-index: 4; | ||
+ | } | ||
+ | #actualtext { | ||
+ | position: relative; | ||
+ | top: 400%; | ||
+ | left: 0%; | ||
+ | height: 170%; | ||
+ | width: 100%; | ||
+ | background-color: #FFFFFF; | ||
+ | z-index: 4; | ||
+ | } | ||
+ | #afterhome { | ||
+ | position: relative; | ||
+ | top: 99%; | ||
+ | left: 0%; | ||
+ | height: 170%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | #sidebar { | ||
+ | position: absolute; | ||
+ | top: 0%; | ||
+ | left: 8%; | ||
+ | height: 35%; | ||
+ | width: 13%; | ||
+ | z-index: 6; | ||
+ | } | ||
+ | #link { | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | color: #000000; | ||
+ | font-size: 24px; | ||
+ | cursor: pointer; | ||
+ | transition: all 0.4s ease; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | } | ||
+ | #link:hover { | ||
+ | color: #0077be; | ||
+ | text-decoration: none; | ||
+ | } | ||
− | + | #maincontent { | |
− | + | position: relative; | |
+ | top: 0%; | ||
+ | left: 28%; | ||
+ | height: 92%; | ||
+ | width: 64%; | ||
+ | } | ||
+ | #subheading1 { | ||
+ | font-size: 36px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | } | ||
+ | #content1 { | ||
+ | font-family: 'Lora', serif; | ||
+ | font-size: 15px; | ||
+ | line-height: 1.75em; | ||
+ | } | ||
+ | #subheading2 { | ||
+ | font-size: 36px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | } | ||
+ | #content2 { | ||
+ | font-family: 'Lora', serif; | ||
+ | font-size: 15px; | ||
+ | line-height: 1.75em; | ||
+ | |||
+ | } | ||
+ | #subheading3 { | ||
+ | font-size: 36px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | } | ||
+ | #content3 { | ||
+ | font-family: 'Lora', serif; | ||
+ | font-size: 15px; | ||
+ | line-height: 1.75em; | ||
+ | |||
+ | } | ||
+ | #subheading4 { | ||
+ | font-size: 36px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | } | ||
+ | #subheading5 { | ||
+ | font-size: 36px; | ||
+ | font-family: 'Montserrat', sans-serif; | ||
+ | } | ||
+ | #footer { | ||
+ | height: 100px; | ||
+ | width: 100%; | ||
+ | background-color: #FFFFFF; | ||
+ | z-index: 7; | ||
+ | } | ||
+ | #flogo { | ||
+ | font-size:28px; | ||
+ | color: #767676; | ||
+ | transition: all 0.4s ease; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | } | ||
+ | #target1{ | ||
+ | position: relative; | ||
+ | top: -80px; | ||
+ | } | ||
+ | #target2{ | ||
+ | position: relative; | ||
+ | top: -80px; | ||
+ | } | ||
+ | #target3{ | ||
+ | position: relative; | ||
+ | top: -80px; | ||
+ | } | ||
+ | #flogo:hover { | ||
+ | color: #3B5998; | ||
+ | } | ||
+ | #tlogo { | ||
+ | font-size:28px; | ||
+ | color: #767676; | ||
+ | transition: all 0.4s ease; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | } | ||
+ | #tlogo:hover { | ||
+ | color: #00aced; | ||
+ | } | ||
+ | #ilogo { | ||
+ | font-size:28px; | ||
+ | color: #767676; | ||
+ | transition: all 0.4s ease; | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -ms-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | } | ||
+ | #ilogo:hover { | ||
+ | color: #bc2a8d; | ||
+ | } | ||
+ | #afterhome { | ||
+ | position: relative; | ||
+ | top: 99%; | ||
+ | left: 0%; | ||
+ | height: 170%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | |||
+ | <div id="holder"> | ||
+ | <video style= "z-index:1;" id="oceanvideo" autoplay muted loop> | ||
+ | <source src="https://static.igem.org/mediawiki/2018/5/54/T--Lambert_GA--Notebook.mp4" type="video/mp4"> | ||
+ | Your browser does not support video. | ||
+ | </video> | ||
+ | <div id="overlay"></div> | ||
+ | <div id="bigtitle"> | ||
+ | N O T E B O O K | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <br><br><br> | ||
+ | <div id="actualtext"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <div id="afterhome"> | ||
+ | <div id="sidebar"> | ||
+ | <br><br> | ||
+ | <div id="link"> | ||
+ | <b><a style="color:black; text-decoration: none; line-height:1.1;" href="#target1">CLONING WORKFLOW</a></b> | ||
+ | </div> | ||
+ | <br><br> | ||
+ | <div id="link"> | ||
+ | <b><a style="color:black; text-decoration: none; line-height:1.1;" href="#target2">NOTEBOOK</a></b> | ||
+ | </div> | ||
+ | <br><br> | ||
+ | <div id="link"> | ||
+ | <b><a style="color:black; text-decoration: none; line-height:1.1;" href="#target3">BIOBRICK NOTEBOOK</a></b> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div | + | <div id="maincontent"> |
− | + | ||
− | + | ||
− | + | ||
− | < | + | <br><br><br> |
− | < | + | <center> |
− | < | + | <div id="target1"></div> |
− | < | + | <div id="subheading1"> |
− | < | + | <b>VIEW OUR CLONING WORKFLOW</b> |
− | </ | + | |
</div> | </div> | ||
+ | |||
+ | <br><br> | ||
+ | <div id="pdf-display-container"> | ||
+ | <div id="pdf-viewer-container"> | ||
+ | <iframe height="1100px" iframe width = "900px" id="pdf-viewer" src="https://static.igem.org/mediawiki/2018/4/43/T--Lambert_GA--Workflow_PDF.pdf" frameborder="0"> <center>Cloning Workflow</center></iframe> | ||
+ | </div> | ||
</div> | </div> | ||
+ | </center> | ||
+ | <br> | ||
+ | <center> | ||
+ | <div> | ||
+ | <center><p style="font-size: 18px"> Click here to download your own <a href="https://static.igem.org/mediawiki/2017/a/a5/Copy_of_Ligation_Calculator.xlsx">Ligation Calculator</a>.</p></center> | ||
+ | </div> | ||
+ | <div> | ||
+ | <i>Cloning Workflow</i> | ||
+ | <br ><br></div> | ||
+ | <br><br> | ||
+ | <center> | ||
+ | <div id="target2"></div> | ||
+ | <div id="subheading2"> | ||
+ | <b>VIEW OUR TEAM'S NOTEBOOKS</b> | ||
+ | </div> | ||
+ | </center> | ||
+ | <div><br><br></div> | ||
+ | <center> | ||
+ | |||
+ | <div id="pdf-display-container"> | ||
+ | <div id="pdf-viewer-container"> | ||
+ | <iframe height="1100px" iframe width = "900px" id="pdf-viewer" src="https://static.igem.org/mediawiki/2018/e/e5/T--Lambert_GA--Notebook.pdf" frameborder="0"> Team Notebook</iframe> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div> | ||
+ | <br> | ||
+ | <i >Team Notebook</i> | ||
+ | |||
+ | <br ><br></div> | ||
+ | </center> | ||
+ | |||
+ | <center> | ||
+ | <div id="target3"></div> | ||
+ | <div id="subheading2"> | ||
+ | <b>VIEW OUR BIOBRICK NOTEBOOKS</b> | ||
+ | </div> | ||
+ | </center> | ||
+ | <div><br><br></div> | ||
+ | <center> | ||
+ | |||
+ | <div id="pdf-display-container"> | ||
+ | <div id="pdf-viewer-container"> | ||
+ | <iframe height="1100px" iframe width = "900px" id="pdf-viewer" src="https://static.igem.org/mediawiki/2018/7/76/T--Lambert_GA--biobrickworkflow.pdf | ||
+ | " frameborder="0">Biobrick Notebook</iframe> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div > | ||
+ | <br> | ||
+ | <i >Biobrick Notebook</i> | ||
+ | <br ><br></div> | ||
+ | </center> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div id="footer"> | ||
+ | <br><br> | ||
+ | <a href="https://www.facebook.com/groups/198318606966726/"><i class="fa fa-facebook" id="flogo"></i></a> | ||
+ | |||
+ | <a href="https://twitter.com/lamberths_igem?lang=en"><i class="fa fa-twitter" id="tlogo"></i></a> | ||
+ | |||
+ | <a href="https://www.instagram.com/lambertigem/"><i class="fa fa-instagram" id="ilogo"></i></a> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="clear"></div> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||
+ | <script> | ||
+ | $(window).scroll(function(e){ | ||
+ | parallax(); | ||
+ | }); | ||
+ | |||
+ | //PARALLAX FUNCTION | ||
+ | function parallax(){ | ||
+ | var scrolled = $(window).scrollTop(); | ||
+ | $('#oceanvideo').css('top',-(scrolled*0.35)+'px'); | ||
+ | } | ||
+ | |||
+ | //NOT THE MOST EFFICIENT PARALLAX, BUT SIMPLE | ||
+ | </script> | ||
+ | |||
+ | </head> | ||
</html> | </html> |
Latest revision as of 02:25, 18 October 2018
N O T E B O O K
VIEW OUR CLONING WORKFLOW
Click here to download your own Ligation Calculator.
Cloning Workflow
VIEW OUR TEAM'S NOTEBOOKS
Team Notebook
VIEW OUR BIOBRICK NOTEBOOKS
Biobrick Notebook