|
|
Line 3: |
Line 3: |
| | | |
| | | |
− | <div class="column full_size"> | + | <div class="has-animations description no-js" id="container"> |
| + | <div class="container"> |
| | | |
− | <h1> Safety </h1> | + | <!------------------------------------------ NAVIGATION --------------------------------------------------> |
− | <p>Please visit the <a href="https://2019.igem.org/Safety">Safety Hub</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p> | + | <!-- INFO: move the class="active" to the correct <a> Tag --> |
| | | |
− | <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> | + | <nav> |
| + | <div class="width-limit nav-content"> |
| + | <div> |
| + | <a href="/Team:Humboldt_Berlin"> |
| + | <img class="nav-logo" src="https://static.igem.org/mediawiki/2019/4/41/T--Humboldt_Berlin--logo-only.png" alt="small header logo" /> |
| + | </a> |
| + | </div> |
| + | <div class="nav-right"> |
| + | <input type="checkbox" /> |
| + | <span></span> |
| + | <span></span> |
| + | <span></span> |
| | | |
− | </div> | + | <div class="menu-items"> |
| + | <a href="/Team:Humboldt_Berlin"> |
| + | Home |
| + | </a> |
| + | <div class="devider"></div> |
| + | <div class="item"> |
| + | <a href="/Team:Humboldt_Berlin/Team">Team</a> |
| + | <div class="submenu"> |
| + | <a href="/Team:Humboldt_Berlin/Team">Team members</a> |
| + | <a href="/Team:Humboldt_Berlin/Collaborations">Collaboration</a> |
| + | </div> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <div class="item"> |
| + | <a href="/Team:Humboldt_Berlin/Description">Project</a> |
| + | <div class="submenu"> |
| + | <a href="/Team:Humboldt_Berlin/Description">Description</a> |
| + | <a href="/Team:Humboldt_Berlin/Design">Design</a> |
| + | <a href="/Team:Humboldt_Berlin/Experiments">Experimentals</a> |
| + | <a href="/Team:Humboldt_Berlin/Notebook">Notebook</a> |
| + | <a href="/Team:Humboldt_Berlin/Contribution">Contribution</a> |
| + | <a href="/Team:Humboldt_Berlin/Results">Results</a> |
| + | <a href="/Team:Humboldt_Berlin/Demonstrate">Demonstrate</a> |
| + | <a href="/Team:Humboldt_Berlin/Improve">Improve</a> |
| + | <a href="/Team:Humboldt_Berlin/Attributions">Attributions</a> |
| + | </div> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <div class="item"> |
| + | <a href="/Team:Humboldt_Berlin/Parts">Parts</a> |
| + | <div class="submenu"> |
| + | <a href="/Team:Humboldt_Berlin/Parts">Parts overview</a> |
| + | <a href="/Team:Humboldt_Berlin/Basic_Part">Basic parts</a> |
| + | <a href="/Team:Humboldt_Berlin/Composite_Part">Composite parts</a> |
| + | <a href="/Team:Humboldt_Berlin/Part_Collection">Parts collection</a> |
| + | </div> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <div class="item"> |
| + | <a class="active" href="/Team:Humboldt_Berlin/Safety">Safety</a> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <div class="item"> |
| + | <a href="/Team:Humboldt_Berlin/Human_Practices">Human Practices</a> |
| + | <div class="submenu"> |
| + | <a href="/Team:Humboldt_Berlin/Human_Practices">Human Practises</a> |
| + | <a href="/Team:Humboldt_Berlin/Public_Engagement">Education & Engagement</a> |
| + | </div> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <div class="item"> |
| + | <a>Awards</a> |
| + | <div class="submenu"> |
| + | <a href="/Team:Humboldt_Berlin/Entrepreneurship">Entrepreneurship</a> |
| + | <a href="/Team:Humboldt_Berlin/Hardware">Hardware</a> |
| + | <a href="/Team:Humboldt_Berlin/Measurement">Measurement</a> |
| + | <a href="/Team:Humboldt_Berlin/Model">Model</a> |
| + | <a href="/Team:Humboldt_Berlin/Plant">Plant</a> |
| + | <a href="/Team:Humboldt_Berlin/Software">Software</a> |
| + | </div> |
| + | </div> |
| + | <div class="devider"></div> |
| + | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> |
| + | For Judges |
| + | </a> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </nav> |
| | | |
| + | <!------------------------------------------ NAVIGATION END --------------------------------------------------> |
| | | |
− | <div class="column two_thirds_size"> | + | <!------------------------------------------ HEADER--------------------------------------------------> |
− | <h3>Safe Project Design</h3> | + | <div class="fixed-header-container"> |
| + | <section class="fixed-image-header"> |
| + | <!-- HEADER IMAGE --> |
| + | <img src="https://static.igem.org/mediawiki/2019/e/e9/T--Humboldt_Berlin--description-header.jpg" alt="notebook" /> |
| + | </section> |
| + | |
| + | <!-- HEADLINE TEXT --> |
| + | <h1 class="page-headline description">Headline</h1> |
| + | </div> |
| | | |
− | <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> | + | <!------------------------------------------ HEADER END --------------------------------------------------> |
| | | |
− | <ul> | + | <section class="page-content fixed-header-content"> |
− | <li>Choosing a non-pathogenic chassis</li>
| + | <!---------- SUB HEADLINE -------------> |
− | <li>Choosing parts that will not harm humans / animals / plants</li> | + | <h2 class="page-subheadline">Subheadline</h2> |
− | <li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
| + | |
− | <li>Including an "induced lethality" or "kill-switch" device</li> | + | |
− | </ul> | + | |
| | | |
− | </div>
| |
| | | |
− | <div class="column third_size"> | + | <!------------------------------------------ TWO COLUMN IMG LEFT --------------------------------------------------> |
− | <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> | + | <div class="width-limit"> |
| + | <div class="two-columns"> |
| + | <div> |
| + | <!-- IMAGE --> |
| + | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/5/54/T--Humboldt_Berlin--ideonella_grafik.png" alt="ideonella grafic" /> |
| + | </div> |
| + | <div> |
| + | <!-----------------------------------------------------------------------> |
| + | <!----------------------------TEXT----------------------------> |
| + | <!-----------------------------------------------------------------------> |
| + | <h3 class="headline3">Text Headline</h3> |
| + | <p class="block-text medium-sized"> |
| + | Text for the two column thingy here |
| + | </p> |
| + | </div> |
| + | </div> |
| | | |
| | | |
| + | <!--------------------------------------- TWO COLUMN IMG LEFT END -----------------------------------------------> |
| + | |
| + | <!---------------------------------------------- QUOTE --------------------------------------------------------> |
| + | |
| + | <blockquote class="quote image-left"> |
| + | <div class="quote-image-container"> |
| + | <!-- QUOTE IMAGE --> |
| + | <img src="https://static.igem.org/mediawiki/2019/2/2d/T--Humboldt_Berlin--flasche_igem.png" alt="plastic bottle illustration" /> |
| + | </div> |
| + | <div class="block-text big-underline big-text"> |
| + | <!-----------------------------------------------------------------------> |
| + | <!---------------------------- Quote Text ----------------------------> |
| + | <!-----------------------------------------------------------------------> |
| + | <p><b> |
| + | Have the Quote Text Here - it is underlined |
| + | </b></p> |
| + | </div> |
| + | </blockquote> |
| + | |
| + | <!---------------------------------------------- QUOTE END -------------------------------------------------------> |
| + | |
| + | |
| + | <!------------------------------------------ TWO COLUMN IMG RIGHT ------------------------------------------------> |
| + | |
| + | <div class="two-columns"> |
| + | <div> |
| + | <!-----------------------------------------------------------------------> |
| + | <!------------------IGEM PROJECTS THAT INSPIRED US-----------------------> |
| + | <!-----------------------------------------------------------------------> |
| + | <h3 class="headline3">Headline</h3> |
| + | <p class="block-text medium-sized"> |
| + | Text for the two column image right block |
| + | </p> |
| + | </div> |
| + | <div> |
| + | <!--- IMAGE ---> |
| + | <img class="is-revealing" src="https://static.igem.org/mediawiki/2019/b/bc/T--Humboldt_Berlin--microplastic_icon.png" alt="microplastic icon" /> |
| + | </div> |
| + | </div> |
| + | |
| + | <!--------------------------------------- TWO COLUMN IMG RIGHT END ------------------------------------------------> |
| + | |
| + | |
| + | <!------------------------------------------ TWO COLUMN LONG TEXT ------------------------------------------------> |
| + | <div class="two-columns-headline"> |
| + | <!-- HEADLINE --> |
| + | <h3 class="headline3">Long text headline</h3> |
| + | </div> |
| + | <div class="two-columns block-text medium-sized not-centered no-margin-top"> |
| + | <div> |
| + | <!-- TEXT - PARAGRAPHS ARE WRAPPED IN <p> TAGS --> |
| + | <p> |
| + | Paragraph Left 1 |
| + | </p> |
| + | <p> |
| + | Paragraph Left 2 |
| + | </p> |
| + | <br /> |
| + | <!-- IMAGE INBETWEEN --> |
| + | <img src="https://static.igem.org/mediawiki/2019/4/42/T--Humboldt_Berlin--chlamy_overview-cloning-system.png" alt="Pverview of the hierarchical and modular cloning system"/> |
| + | <p> |
| + | Paragraph Left 3 |
| + | </p> |
| + | </div> |
| + | <div> |
| + | <p> |
| + | Paragraph Right 1 |
| + | </p> |
| + | <p> |
| + | Paragraph Right 2 |
| + | </p> |
| + | <p> |
| + | Paragraph Right 3 |
| + | </p> |
| + | <p> |
| + | Paragraph Right 4 |
| + | </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </section> |
| + | |
| + | <!------------------------------------------ TWO COLUMN LONG TEXT END --------------------------------------------> |
| + | |
| + | <!------------------------------------------ DEVIDER LINE --------------------------------------------> |
| + | <div class="greyblue-devider"></div> |
| + | <!------------------------------------------ DEVIDER LINE END --------------------------------------------> |
| + | |
| + | |
| + | <!------------------------------------------ TWO COLUMN SMALL TEXT --------------------------------------------> |
| + | |
| + | <section class="width-limit"> |
| + | <div class="two-columns block-text not-centered small-sized"> |
| + | <div> |
| + | <!-- TEXT LEFT COLUMN --> |
| + | <p>Small Text Left Column |
| + | </div> |
| + | <div> |
| + | <!-- TEXT RIGHT COLUMN --> |
| + | <p>Small Text Right Column</p> |
| + | </div> |
| + | </div> |
| + | </section> |
| + | |
| + | <!------------------------------------------ TWO COLUMN SMALL TEXT END ----------------------------------------> |
| + | |
| + | </main> |
| + | |
| + | <!------------------------------------------ FOOTER ----------------------------------------> |
| + | <div class="footer-container"> |
| + | <footer class="width-limit"> |
| + | <img src="https://static.igem.org/mediawiki/2019/e/ee/T--Humboldt_Berlin--logo_black.png" class="footer-logo" alt="Chlamylicious Logo Black" /> |
| + | <div class="footer-right"> |
| + | <ul> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin"> |
| + | Home |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Team"> |
| + | Team |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Description"> |
| + | Project |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | <ul> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Parts"> |
| + | Parts |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Safety"> |
| + | Safety |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="/Team:Humboldt_Berlin/Human_Practices"> |
| + | Human Practices |
| + | </a> |
| + | </li> |
| + | <li> |
| + | <a href="https://igem.org/2019_Judging_Form?team=Humboldt_Berlin"> |
| + | For Judges |
| + | </a> |
| + | </li> |
| + | </ul> |
| + | </div> |
| + | </footer> |
| + | </div> |
| + | |
| + | |
| + | <!------------------------------------------ FOOTER END ----------------------------------------> |
| + | |
| + | <script> |
| + | (function () { |
| + | document.querySelector('.no-js').classList.add('js') |
| + | document.querySelector('.no-js').classList.remove('no-js') |
| + | }()) |
| + | |
| + | window.addEventListener("scroll", function () { |
| + | const elements = document.querySelectorAll('.is-revealing'); |
| + | |
| + | [].forEach.call(elements, function(el) { |
| + | if (isElementVisible(el)) { |
| + | el.classList.add('is-revealing-visible') |
| + | } |
| + | }); |
| + | }); |
| + | |
| + | function isElementVisible(el) { |
| + | var top = el.offsetTop; |
| + | var height = el.offsetHeight; |
| + | |
| + | while(el.offsetParent) { |
| + | el = el.offsetParent; |
| + | top += el.offsetTop; |
| + | } |
| + | |
| + | return ( |
| + | (top + height) <= (window.pageYOffset + window.innerHeight) + 100 |
| + | ); |
| + | } |
| + | </script> |
| | | |
| </html> | | </html> |