(Prototype team page) |
|||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | #bg-video { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | bottom: 0px; | ||
+ | left: 0; | ||
+ | overflow: hidden; | ||
+ | z-index: -100; | ||
+ | width:100%; | ||
+ | } | ||
+ | </style> | ||
− | < | + | <!--glyphicons--> |
− | + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
− | < | + | <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/Bootstrap?action=raw&ctype=text/css" /> |
− | < | + | <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/libraries/css/fonts?action=raw&ctype=text/css" /> |
− | + | <link rel="stylesheet" href="https://2017.igem.org/Team:Dalhousie/css3?action=raw&ctype=text/css" /> | |
− | + | ||
− | < | + | <!--------------------oldnavbar---------------> |
− | < | + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
− | |||
− | < | + | <!-------------------------------------need this---------------------------> |
− | + | <style> | |
− | + | #home_logo, #sideMenu { display:none; } | |
− | + | #sideMenu, #top_title, .patrollink {display:none;} | |
− | + | #content { width:100%; padding:0px; margin-top:-20px; margin-left:0px; background-color: white;} | |
− | + | body {background-color:white; } | |
− | </ | + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 10px; background-color: transparent; z-index:100;} |
+ | .jumbotron { | ||
+ | height: 850px; | ||
+ | position: relative; | ||
+ | |||
+ | } | ||
+ | .navbar-default .navbar-nav>.active>a, .nav > li > a:hover, .nav > li > a:focus { | ||
+ | background-color: #C1D35D; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | </style> | ||
− | |||
− | < | + | </head> |
− | < | + | |
− | <ul> | + | <body> |
− | <li><a href="https:// | + | |
− | <li><a href="https:// | + | <!-------------------navbar----------------------> |
− | <li><a href="https:// | + | <div id="nav" class="noBackground" style="width:100%; z-index:100;" > |
− | </ul> | + | <div class="inner" > |
+ | <div id="navWrap"> | ||
+ | <nav > | ||
+ | <div class="container-fluid"> | ||
+ | <ul class="nav navbar-nav navbar-center"> | ||
+ | |||
+ | <li class="active" ><a href="https://2017.igem.org/Team:Dalhousie/test3" style=" color: white;">Home</a></li> | ||
+ | |||
+ | <li class="dropdown" > | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Project | ||
+ | </a> | ||
+ | <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);"> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Description" >Description</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Design">Design</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Requirements">Requirements</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Results | ||
+ | </a> | ||
+ | <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);"> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/InterLab">Interlab</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Results">Results</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Team | ||
+ | </a> | ||
+ | <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);"> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Team">Team</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Collaborations">Collaborations</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Attributions">Attributions</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Sponsors">Sponsors</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Human Practices | ||
+ | </a> | ||
+ | <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);"> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Human_Practices">Summary</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Silver_Integrated">Silver HP</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Gold_Integrated">Integrated and Gold</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Public_Engagement">Public Engagement</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Science_Literacy">Science Literacy</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/Ethics">Ethics</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Lab | ||
+ | </a> | ||
+ | <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);"> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Parts">Parts</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Safety" >Safety</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Experiments">Experiments</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Notebook">Notebook</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Improve">Improve</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <li class="dropdown"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#" style=" color: white;">Awards | ||
+ | </a> | ||
+ | <ul class="dropdown-menu" style=" background-color: rgba(193,211,93,0.8);"> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Applied_Design">Applied Design</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/Entrepreneurship">Entrepreneurship</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | |||
+ | <!--------------------------contact us------------------------------------------> | ||
+ | <ul class="nav navbar-nav navbar-right"> | ||
+ | <div class="navbar-header"> | ||
+ | <a class="navbar-brand" style=" color: white;">Contact us today </a> | ||
+ | </div> | ||
+ | <li> | ||
+ | <a href="mailto:igemdalhousie@gmail.com" ><i class="fa fa-envelope-o fa-fw" style=" color: white;" ></i> <span class="network-name"></span></a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a target="_blank" href="https://twitter.com/dalhousie_igem?lang=en" ><i class="fa fa-twitter fa-fw" style=" color: white;" ></i> <span class="network-name"></span></a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a target="_blank" href="https://www.facebook.com/Dalhousie.iGEM/" ><i class="fa fa-facebook fa-fw" style=" color: white;" ></i> <span class="network-name"></span></a> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </nav> | ||
</div> | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
+ | |||
+ | <div class="panel" id="panel1" > | ||
+ | <div class="inner" > | ||
+ | <div class="top" ><div class="title" >Applied Design</div></div> | ||
+ | |||
+ | <img src= "https://static.igem.org/mediawiki/2017/9/92/Wooddal.jpg" style="top:0px; left:0px; padding-bottom:0px; position:fixed; width:100%; height: 100%; z-index:-100; " align="center" height="70%" width="70%"> | ||
+ | <!--------------------------------fade title----------------------------> | ||
+ | <style>body { | ||
+ | margin: 0; | ||
+ | height: 10px; | ||
+ | } | ||
+ | .top { | ||
+ | margin-top: 350px; | ||
+ | position: absolute; | ||
+ | width:65%; | ||
+ | left:250px; | ||
+ | background-color: transparent; | ||
+ | height: 150px; | ||
+ | text-align: center; | ||
+ | font-family: 'Trebuchet MS'; | ||
+ | font-size: 80px; | ||
+ | font-weight: 400; | ||
+ | color: white; | ||
+ | line-height: 60px; | ||
+ | } | ||
− | </html> | + | .title { |
+ | position: relative; | ||
+ | top: 30%; | ||
+ | |||
+ | left: 0px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | <!---------------------------------------------------------------------------------this-------------------------------------------------------------------------------------------> | ||
+ | <script> $(window).scroll(function(){ | ||
+ | $(".top").css("opacity", 1 - $(window).scrollTop() / 400); | ||
+ | });</script> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="panel" id="panel2"> | ||
+ | <div class="inner"> | ||
+ | |||
+ | </br>applied design</br> | ||
+ | This is a prize for the team that has developed a synbio product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways. | ||
+ | |||
+ | To compete for the Best Applied Design prize, please describe your work on this page and also fill out the description on the judging form. | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="container" style="height:450px; width:100%; position: relative;"><!--------empty panel----------> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="panel panel-red" id="panel3"> | ||
+ | <div class="inner"> | ||
+ | <p style="text-align:center; color:white; font-size: 30px; margin-top:100px;"> | ||
+ | Learn more... hopefully have links to next pages here</p> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | html { | ||
+ | height: 100%; | ||
+ | min-height: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .panel { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: black; | ||
+ | color: #fff; | ||
+ | padding-left: 5%; | ||
+ | padding-right: 5%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .panel.panel-red { | ||
+ | background: black; | ||
+ | |||
+ | } | ||
+ | #nav { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 96%; | ||
+ | padding: 2%; | ||
+ | z-index: 100; | ||
+ | color: white; | ||
+ | height: 80px; | ||
+ | } | ||
+ | |||
+ | .noBackground { | ||
+ | background-color: rgba(0,0,0,0); | ||
+ | visibility: visible; | ||
+ | width:100%; | ||
+ | padding-right:0px; | ||
+ | -webkit-transition: all 1.0s ease; | ||
+ | -moz-transition: all 1.0s ease; | ||
+ | -o-transition: all 1.0s ease; | ||
+ | transition: all 1.0s ease; | ||
+ | } | ||
+ | |||
+ | .blackBackground { | ||
+ | background-color: rgba(35,47,19,0.7); | ||
+ | visibility: visible; | ||
+ | width:100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | #nav .inner { | ||
+ | z-index:100; | ||
+ | padding-bottom:40px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #nav ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #inner{ | ||
+ | z-index:101; | ||
+ | |||
+ | } | ||
+ | |||
+ | #panel1{ | ||
+ | background: transparent; | ||
+ | height: 850px; | ||
+ | width:100%; | ||
+ | z-index:100; | ||
+ | } | ||
+ | #panel2{ | ||
+ | width:100%; | ||
+ | height: 700px; | ||
+ | margin-bottom:0px; | ||
+ | background: black; | ||
+ | text-align:center; | ||
+ | |||
+ | } | ||
+ | #panel3{ | ||
+ | width:100%; | ||
+ | height: 200px; | ||
+ | margin-bottom:-100px; | ||
+ | background: rgba(35,47,19,0.9); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | <script> | ||
+ | $( function() { | ||
+ | //caches a jQuery object containing the header element | ||
+ | var header = $('.noBackground'); | ||
+ | $(window).scroll(function() { | ||
+ | var scroll = $(window).scrollTop(); | ||
+ | |||
+ | if (scroll >= 100) { | ||
+ | header.addClass('blackBackground'); | ||
+ | } else { | ||
+ | header.removeClass('blackBackground'); | ||
+ | |||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
+ | <html> |
Latest revision as of 18:53, 18 October 2017
Applied Design
![](https://static.igem.org/mediawiki/2017/9/92/Wooddal.jpg)
applied design
This is a prize for the team that has developed a synbio product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.
To compete for the Best Applied Design prize, please describe your work on this page and also fill out the description on the judging form.
Learn more... hopefully have links to next pages here