Difference between revisions of "Team:IIT Delhi/Safety"

Line 1: Line 1:
−
{{IIT_Delhi}}
+
<!DOCTYPE html>
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
body {
 +
    margin: 0;
 +
}
  
 +
ul {
 +
    list-style-type: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    width: 25%;
 +
    background-color: #f1f1f1;
 +
    position: fixed;
 +
    height: 100%;
 +
    overflow: auto;
 +
}
  
−
<div class="column full_size">
+
li a {
 +
    display: block;
 +
    color: #000;
 +
    padding: 8px 16px;
 +
    text-decoration: none;
 +
}
  
−
<h1> Safety </h1>
+
li a.active {
−
<p>Please visit the <a href="https://2018.igem.org/Safety">Safety Hub</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p>
+
    background-color: #4CAF50;
 +
    color: white;
 +
}
  
−
<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>
+
li a:hover:not(.active) {
−
 
+
    background-color: #555;
−
</div>
+
    color: white;
−
 
+
}
−
 
+
</style>
−
<div class="column two_thirds_size">
+
</head>
−
<h3>Safe Project Design</h3>
+
<body>
−
 
+
−
<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>
+
  
 
<ul>
 
<ul>
−
<li>Choosing a non-pathogenic chassis</li>
+
  <li><a class="active" href="#home">Home</a></li>
−
<li>Choosing parts that will not harm humans / animals / plants</li>
+
  <li><a href="#news">News</a></li>
−
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
+
  <li><a href="#contact">Contact</a></li>
−
<li>Including an "induced lethality" or "kill-switch" device</li>
+
  <li><a href="#about">About</a></li>
 
</ul>
 
</ul>
  
 +
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
 +
  <h2>Fixed Full-height Side Nav</h2>
 +
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
 +
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
 +
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
 +
  <p>Some text..</p>
 +
  <p>Some text..</p>
 +
  <p>Some text..</p>
 +
  <p>Some text..</p>
 +
  <p>Some text..</p>
 +
  <p>Some text..</p>
 +
  <p>Some text..</p>
 
</div>
 
</div>
  
−
<div class="column third_size">
+
</body>
−
<h3>Safe Lab Work</h3>
+
−
 
+
−
<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>
+
−
 
+
−
 
+
−
<h3>Safe Shipment</h3>
+
−
 
+
−
<p>Did you face any safety problems in sending your DNA parts to the Registry? How did you solve those problems?</p>
+
−
</div>
+
−
 
+
−
 
+
 
</html>
 
</html>

Revision as of 08:57, 17 July 2018

<!DOCTYPE html>

Fixed Full-height Side Nav

Try to scroll this area, and see how the sidenav sticks to the page

Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.

Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).

Some text..

Some text..

Some text..

Some text..

Some text..

Some text..

Some text..