(Prototype team page) |
|||
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> | |
− | + | ||
− | < | + | <body> |
− | + | ||
− | < | + | |
− | + | <!-------------------navbar----------------------> | |
− | </ | + | <div id="nav" class="noBackground" style="width:100%; z-index:100;" > |
+ | <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/HP/Applied_Design">Applied Design</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Dalhousie/HP/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=" | + | </div> |
− | < | + | |
− | < | + | |
− | < | + | <div class="panel" id="panel1" > |
− | < | + | |
− | < | + | <div class="inner" > |
− | < | + | <div class="top" ><div class="title" >gold</div></div> |
− | < | + | |
− | </ | + | |
− | < | + | <img src= "https://static.igem.org/mediawiki/2017/c/c5/Dalhums.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; | ||
+ | } | ||
+ | |||
+ | .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>gold</br> | ||
+ | |||
+ | This page will contain information for your Gold medal Human Practices work, which you can also use to nominate your team for the Best Integrated Human Practices page. To make things easier, we have combined the Gold medal page with the Best Integrated Human Practices page since we expect the work to overlap considerably. | ||
+ | iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies. | ||
+ | Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. | ||
+ | </br> | ||
+ | Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the design and/or execution of your project. | ||
+ | |||
+ | </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: 100%; | ||
+ | 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> |
Revision as of 16:22, 18 October 2017
gold
gold
This page will contain information for your Gold medal Human Practices work, which you can also use to nominate your team for the Best Integrated Human Practices page. To make things easier, we have combined the Gold medal page with the Best Integrated Human Practices page since we expect the work to overlap considerably.
iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies.
Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest.
Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the design and/or execution of your project.
Learn more... hopefully have links to next pages here