Difference between revisions of "Team:UNebraska-Lincoln/Safety"

(Prototype team page)
 
Line 1: Line 1:
−
{{UNebraska-Lincoln}}
+
<!DOCTYPE HTML>
 +
<!--
 +
Solid State by HTML5 UP
 +
html5up.net | @ajlkn
 +
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 +
-->
 
<html>
 
<html>
 +
<head>
 +
<title>Elements - Solid State by HTML5 UP</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
 +
<link rel="stylesheet" href="https://2016.igem.org/Team:UNebraska-Lincoln/css/Safetymain?action=raw&amp;ctype=text/css" />
 +
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
 +
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
 +
</head>
 +
<body >
  
 +
<style>
 +
/* styling for the menu items */
 +
 +
span.reference{
 +
position:fixed;
 +
left:10px;
 +
bottom:10px;
 +
font-size:12px;
 +
}
 +
span.reference a{
 +
color:#aaa;
 +
text-transform:uppercase;
 +
text-decoration:none;
 +
text-shadow:1px 1px 1px #000;
 +
margin-right:30px;
 +
}
 +
span.reference a:hover{
 +
color:#ddd;
 +
}
 +
ul.sdt_menu{
 +
margin-top:300px;
 +
}
  
−
<div class="column full_size">
+
/* when hovering on a menu item */
  
 +
#NavBar{
 +
background-image: url("https://static.igem.org/mediawiki/2016/7/73/T--UNebraska-Lincoln--NavigationBackGround.jpg");
 +
padding-left: 200px;
 +
padding-top: 100px;
 +
height: 250px;}
  
−
<p>Please visit <a href="https://2016.igem.org/Safety">the main Safety page</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p>
+
#wrapper{
 +
    background-image: url("https://static.igem.org/mediawiki/2016/b/b6/T--UNebraska-Lincoln--labmanual.png");
 +
      background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: cover;
  
−
<p>On this page of your wiki, you should write about how you are addressing any safety issues in your project. The wiki is a place where you can <strong>go beyond the questions on the safety forms</strong>, and write about whatever safety topics are most interesting in your project. (You do not need to copy your safety forms onto this wiki page.)</p>
+
    height: 400px;
 +
}
  
−
</div>
 
  
  
−
<div class="column full_size">
 
−
<h5>Safe Project Design</h5>
 
  
−
<p>Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:</p>
+
</style>
  
−
<ul>
+
<!-- Page Wrapper -->
−
<li>Choosing a non-pathogenic chassis</li>
+
<div id="page-wrapper" style="background-color: #9ECBDF;">
−
<li>Choosing parts that will not harm humans / animals / plants</li>
+
 
−
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
+
<!-- Header -->
−
<li>Including an "induced lethality" or "kill-switch" device</li>
+
−
</ul>
+
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
 +
<link rel="stylesheet" href="https://2016.igem.org/Team:UNebraska-Lincoln/css/NavigationMenu?action=raw&amp;ctype=text/css" type="text/css" media="screen"/>
 +
<!-- Menu -->
 +
<div id="NavBar">
 +
<ul id="sdt_menu" class="sdt_menu">
 +
<li>
 +
<a href="#">
 +
<img src="images/2.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Home</span>
 +
<span class="sdt_descr">Our home</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2016/4/46/T--UNebraska-Lincoln--TeamStock.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Team</span>
 +
<span class="sdt_descr">Get to know us</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2016/8/81/T--UNebraska-Lincoln--ProjectStock.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Project</span>
 +
<span class="sdt_descr">Our work</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box">
 +
<a href="#">Background</a>
 +
<a href="#">Design</a>
 +
<a href="#">Experiment</a>
 +
                   
 +
<a href="#">Safety cases</a> </div>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2016/9/92/T--UNebraska-Lincoln--OutreachStock.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link" style="">Outreach</span>
 +
<span class="sdt_descr">The Real World</span>
 +
                            <div class="sdt_box">
 +
<a href="#">Human Practice</a>
 +
</div>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="https://static.igem.org/mediawiki/2016/a/a6/T--UNebraska-Lincoln--SafetyStock.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Safety</span>
 +
<span class="sdt_descr">I like to photograph</span>
 +
</span>
 +
</a>
 +
</li>
 +
<li>
 +
<a href="#">
 +
<img src="images/5.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">Blog</span>
 +
<span class="sdt_descr">I write about design</span>
 +
</span>
 +
</a>
 +
</li>
 +
 +
</ul>
  
 
</div>
 
</div>
  
−
<div class="column half_size">
 
−
<h5>Safe Lab Work</h5>
 
  
−
<p>What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!</p>
+
<!-- Wrapper -->
 +
<section id="wrapper">
 +
<header >
 +
<div class="inner" >
 +
</div>
 +
</header>
  
−
</div>
+
<!-- Content -->
 +
<div class="wrapper">
 +
<div class="inner">
 +
<style>.image{
 +
  position: relative;
 +
}
 +
.image a{
 +
  display: block;     
 +
  position: absolute;
 +
}</style>
 +
<section>
 +
<h2 class="major">Safety</h2>
 +
<p>Put stuff about safety here </p>
 +
</section>
  
−
<div class="column half_size">
+
<!-- Footer -->
−
<h5>Safe Shipment</h5>
+
<section id="footer">
 +
<div class="inner">
 +
<h2 class="major">Want to see Results?</h2>
 +
<center><a href="https://2016.igem.org/Team:UNebraska-Lincoln/laboratory"><img src="https://static.igem.org/mediawiki/2016/e/e5/T--UNebraska-Lincoln--backtothelab.png"  style="width:60%;height:auto;" transform:scale(0.2)"></a></center>
 +
 +
 +
 +
</div>
 +
</section>
 +
 
 +
</div>
 +
 
 +
 +
<!-- Scripts -->
 +
<script src="https://2016.igem.org/Team:UNebraska-Lincoln/libraries/skelmin?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="https://2016.igem.org/Team:UNebraska-Lincoln/libraries/jquery1?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="https://2016.igem.org/Team:UNebraska-Lincoln/libraries/jqueryscrollex?action=raw&amp;ctype=text/javascript"></script>
 +
<script src="https://2016.igem.org/Team:UNebraska-Lincoln/libraries/util?action=raw&amp;ctype=text/javascript"></script>
 +
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
 +
<script src="https://2016.igem.org/Team:UNebraska-Lincoln/libraries/main?action=raw&amp;ctype=text/javascript"></script>
 +
 
 +
 
 +
<!-- Scripts -->
 +
<!-- Nav bar -->
 +
 
 +
<script type="text/javascript" src="https://2016.igem.org/Team:UNebraska-Lincoln/libraries/jquery_easing_1_3?action=raw&amp;ctype=text/javascript"></script>
 +
        <script type="text/javascript">
 +
            $(function() {
 +
/**
 +
* for each menu element, on mouseenter,
 +
* we enlarge the image, and show both sdt_active span and
 +
* sdt_wrap span. If the element has a sub menu (sdt_box),
 +
* then we slide it - if the element is the last one in the menu
 +
* we slide it to the left, otherwise to the right
 +
*/
 +
                $('#sdt_menu > li').bind('mouseenter',function(){
 +
var $elem = $(this);
 +
$elem.find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'170px',
 +
'height':'170px',
 +
'left':'0px'
 +
},400,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
    .stop(true)
 +
.animate({'top':'140px'},500,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_active')
 +
    .stop(true)
 +
.animate({'height':'170px'},300,function(){
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length){
 +
var left = '170px';
 +
if($elem.parent().children().length == $elem.index()+1)
 +
left = '-170px';
 +
$sub_menu.show().animate({'left':left},200);
 +
}
 +
});
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length)
 +
$sub_menu.hide().css('left','0px');
 +
 +
$elem.find('.sdt_active')
 +
.stop(true)
 +
.animate({'height':'0px'},300)
 +
.andSelf().find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'0px',
 +
'height':'0px',
 +
'left':'85px'},400)
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'25px'},500);
 +
});
 +
            });
 +
        </script>
  
−
<p>Did you face any safety problems in sending your DNA parts to the Registry? How did you solve those problems?</p>
 
−
</div>
 
  
  
 +
</body>
 
</html>
 
</html>

Revision as of 18:02, 18 October 2016

<!DOCTYPE HTML> Elements - Solid State by HTML5 UP

Safety

Put stuff about safety here