| Line 1: | Line 1: | ||
| − | + | <!DOCTYPE html> | |
| − | <html> | + | <html lang="en"> |
| + | <head> | ||
| + | <meta charset="UTF-8"> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| + | <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| + | <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> | ||
| + | <link | ||
| + | rel="stylesheet" | ||
| + | href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" | ||
| + | /> | ||
| + | <link | ||
| + | href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" | ||
| + | rel="stylesheet" | ||
| + | integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" | ||
| + | crossorigin="anonymous" | ||
| + | /> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | ||
| + | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> | ||
| + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> | ||
| + | <title>iGEM | Bioriidl</title> | ||
| + | <style> | ||
| + | body, html { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | scroll-behavior: smooth; | ||
| + | } | ||
| + | /* Scrollbar customized */ | ||
| + | ::-webkit-scrollbar { | ||
| + | width: 12px; | ||
| + | } | ||
| − | + | ::-webkit-scrollbar-track { | |
| − | + | box-shadow: inset 0 0 5px #00695c; | |
| − | + | background: #ddd; | |
| + | } | ||
| + | ::-webkit-scrollbar-thumb { | ||
| + | background: linear-gradient(to bottom, #007722, #00aa55); | ||
| + | border-radius: 3px; | ||
| + | box-shadow: 2px 2px 4px grey; | ||
| + | } | ||
| − | + | ::-webkit-scrollbar-thumb:hover { | |
| − | + | background: linear-gradient(to bottom, #7d1b54, #e6369c); | |
| + | border: 2px solid #75194f; | ||
| + | } | ||
| − | + | /* Navbar */ | |
| + | nav img { | ||
| + | height: 48px; | ||
| + | width: auto; | ||
| + | border-radius: 3px; | ||
| + | } | ||
| − | + | .navbar { | |
| + | border-radius: 0; | ||
| + | margin: 0; | ||
| + | position: sticky; | ||
| + | } | ||
| − | + | .navbar-brand { | |
| − | + | padding: 10px 20px 50px 20px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .navbar-nav > li > a { | ||
| + | padding: 25px; | ||
| + | text-decoration: none; | ||
| + | color: #00b129; | ||
| + | border-radius: 3px; | ||
| + | font-size: 16px; | ||
| + | transition: 0.2s; | ||
| + | } | ||
| − | + | .navbar-nav > li > a:hover { | |
| − | + | background: #00a126; | |
| − | + | color: #fff; | |
| + | } | ||
| + | .navbar-toggle img { | ||
| + | height: 25px; | ||
| + | } | ||
| + | .navbar-right { | ||
| + | margin-right: 2vw; | ||
| + | } | ||
| − | + | .glyphicon { | |
| − | + | margin-right: 1vw; | |
| − | + | } | |
| − | + | ||
| − | + | .nav-transparent { | |
| + | transition: 0.3s; | ||
| + | } | ||
| + | .nav-colored { | ||
| + | background-color:#fff; | ||
| + | border-bottom: 1px solid #444; | ||
| + | transition: 0.3s; | ||
| + | } | ||
| + | @media (max-width: 765px) { | ||
| + | .navbar { | ||
| + | background: #fff; | ||
| + | } | ||
| + | .navbar-nav { | ||
| + | background: #fff; | ||
| + | } | ||
| + | } | ||
| − | + | /* Landing Page */ | |
| + | .landing { | ||
| + | height: 100vh; | ||
| + | background: url("./img/bg.jpg"); | ||
| + | background-attachment: fixed; | ||
| + | background-position: center; | ||
| + | background-size: cover; | ||
| + | } | ||
| + | .overlay { | ||
| + | height: 100vh; | ||
| + | background: rgba(0, 0, 0, 0.85); | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | } | ||
| − | + | .heroText { | |
| + | margin: auto; | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | } | ||
| − | + | .heroText h1 { | |
| − | + | margin: 0; | |
| + | margin-top: 6vh; | ||
| + | font-family: Georgia, serif; | ||
| + | color: #fff; | ||
| + | font-weight: 500; | ||
| + | text-align: center; | ||
| + | font-size: 60px; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: 3px; | ||
| + | } | ||
| + | .heroText p { | ||
| + | margin: 4vh 0; | ||
| + | text-align: center; | ||
| + | font-family: sans-serif; | ||
| + | font-size: 20px; | ||
| + | margin-bottom: 10vh; | ||
| + | color: #fff; | ||
| + | } | ||
| − | + | .heroText a { | |
| + | margin: auto; | ||
| + | } | ||
| − | + | .heroText button { | |
| − | + | margin: auto; | |
| − | + | border: 3px solid #fff; | |
| − | + | border-radius: 50%; | |
| − | + | background: none; | |
| + | color: white; | ||
| + | height: 60px; | ||
| + | width: 60px; | ||
| + | padding-top: 5px; | ||
| + | cursor: pointer; | ||
| + | font-size: 25px; | ||
| + | transition: 0.5s; | ||
| + | } | ||
| − | + | .heroText button:hover { | |
| + | background: #fff; | ||
| + | color: #666; | ||
| + | font-size: 26px; | ||
| + | padding-top: 10px; | ||
| + | } | ||
| − | + | @media (max-width: 760px) { | |
| − | + | .heroText h1 { | |
| − | + | font-size: 48px; | |
| + | } | ||
| − | + | .heroText p { | |
| + | font-size: 16px; | ||
| + | } | ||
| + | } | ||
| + | /* Description */ | ||
| + | .desc { | ||
| + | min-height: 100vh; | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | padding-top: 12vh; | ||
| + | margin-bottom: 10vh; | ||
| + | } | ||
| − | + | .textSection { | |
| − | + | display: flex; | |
| − | + | width: 64%; | |
| − | + | margin: 10vh auto; | |
| − | + | } | |
| − | + | .leftText { | |
| − | + | flex: 2; | |
| − | + | display: flex; | |
| − | + | } | |
| − | + | ||
| + | .leftText p { | ||
| + | width: 80%; | ||
| + | margin: auto; | ||
| + | margin-top: 5vh; | ||
| + | font-size: 15px; | ||
| + | text-align: justify; | ||
| + | color: #777; | ||
| + | font-family: sans-serif; | ||
| + | } | ||
| − | + | .rightImg { | |
| − | + | flex: 1; | |
| + | display: flex; | ||
| + | } | ||
| + | .rightImg img { | ||
| + | height: 150px; | ||
| + | width: auto; | ||
| + | margin: auto; | ||
| + | } | ||
| + | #reverseText { | ||
| + | order: 2; | ||
| + | } | ||
| + | #reverseImg { | ||
| + | order: 1; | ||
| + | } | ||
| + | .productDesc { | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | margin: auto; | ||
| + | background: linear-gradient(to bottom, #000, #003811); | ||
| + | min-height: 80vh; | ||
| + | padding: 15vh 0; | ||
| + | } | ||
| − | + | .productDesc p { | |
| − | + | font-size: 16px; | |
| − | + | line-height: 1.8; | |
| + | width: 64%; | ||
| + | text-align: center; | ||
| + | margin: auto; | ||
| + | color: #fff; | ||
| + | font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | ||
| + | } | ||
| + | @media (max-width: 760px) { | ||
| + | .textSection { | ||
| + | flex-direction: column; | ||
| + | margin: 5vh auto; | ||
| + | } | ||
| + | .leftText p { | ||
| + | margin-top: 0; | ||
| + | } | ||
| − | + | .rightImg img { | |
| − | + | margin-top: 10vh; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | #reverseText { | ||
| + | order: 1; | ||
| + | } | ||
| − | + | #reverseImg { | |
| − | + | order: 2; | |
| − | + | } | |
| − | + | ||
| − | + | .productDesc p { | |
| − | + | width: 78%; | |
| − | + | text-align: justify; | |
| − | + | font-size: 16px; | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | /* Cards */ | ||
| − | + | .cardsDiv { | |
| − | + | min-height: 100vh; | |
| − | + | display: flex; | |
| + | flex-direction: column; | ||
| + | margin: 15vh 0; | ||
| + | } | ||
| + | .cardRow { | ||
| + | display: flex; | ||
| + | margin: 0 auto; | ||
| + | } | ||
| − | + | .card { | |
| − | + | margin: 5vh 3vw; | |
| + | width: 15vw; | ||
| + | height: 40vh; | ||
| + | border-radius: 8px; | ||
| + | box-shadow: 3px 4px 6px #888; | ||
| + | } | ||
| − | + | .cardOverlay { | |
| + | background: rgba(0, 0, 0, 0.7); | ||
| + | height: 100%; | ||
| + | border-radius: 8px; | ||
| + | display: flex; | ||
| + | backface-visibility: hidden; | ||
| + | } | ||
| + | .cardOverlay h2 { | ||
| + | margin: auto; | ||
| + | text-align: center; | ||
| + | color: #fff; | ||
| + | font-family: sans-serif; | ||
| + | font-size: 28px; | ||
| + | line-height: 1.5; | ||
| + | width: 80%; | ||
| + | } | ||
| − | + | @media (max-width: 760px) { | |
| + | .cardRow { | ||
| + | flex-direction: column; | ||
| + | } | ||
| − | + | .card { | |
| − | + | width: 72vw; | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | /* Footer */ | ||
| − | + | .footer { | |
| − | + | height: 10vh; | |
| − | + | background-color: #ddd; | |
| + | color: #444; | ||
| + | text-align: center; | ||
| + | display: flex; | ||
| + | } | ||
| + | .footer p { | ||
| + | font-size: 12px; | ||
| + | margin: auto; | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | <nav class="navbar navbar-fixed-top" style="position: fixed;" id="myNav"> | ||
| + | <div class="container-fluid"> | ||
| + | <div class="navbar-header"> | ||
| + | <button | ||
| + | type="button" | ||
| + | class="navbar-toggle" | ||
| + | data-toggle="collapse" | ||
| + | data-target="#myNavbar" | ||
| + | > | ||
| + | <img src="./img/ham.png" alt="" style="margin-top: 3px;" /> | ||
| + | </button> | ||
| + | <a class="navbar-brand" href="#homeSection"> | ||
| + | <img src="./img/igem.png" alt="igem logo" /> | ||
| + | </a> | ||
| + | </div> | ||
| + | <div class="collapse navbar-collapse" id="myNavbar"> | ||
| + | <ul class="nav navbar-nav"> | ||
| + | <li><a href="https://2019.igem.org/Team:Bioriidl_Somaiya/Team">About</a></li> | ||
| + | <li><a href="https://2019.igem.org/Team:Bioriidl_Somaiya/Description">Project</a></li> | ||
| + | <li><a href="https://2019.igem.org/Team:Bioriidl_Somaiya/Parts">Parts</a></li> | ||
| + | <li><a href="https://2019.igem.org/Team:Bioriidl_Somaiya/Results">Result</a></li> | ||
| + | <li><a href="https://2019.igem.org/Team:Bioriidl_Somaiya/Human_Practices">People</a></li> | ||
| + | <li><a href="#medal">Medal Criteria</a></li> | ||
| + | </ul> | ||
| + | <!-- <ul class="nav navbar-nav navbar-right"> | ||
| + | <li> | ||
| + | <a href="./login/login.html" | ||
| + | ><span class="glyphicon glyphicon-log-in"></span> Login</a | ||
| + | > | ||
| + | </li> | ||
| + | </ul> --> | ||
| + | </div> | ||
| + | </div> | ||
| + | </nav> | ||
| + | <div class="landing" id="land"> | ||
| + | <div class="overlay"> | ||
| + | <div class="heroText"> | ||
| + | <h1>Steriport</h1> | ||
| + | <p>Making Sterilization + Dispensing Fast and Portable</p> | ||
| + | <a href="javascript:void(5);" onclick="scrollDown()"> | ||
| + | <button><i class="fa fa-angle-double-down" aria-hidden="true"></i></button> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| − | <div class=" | + | <div class="desc" id="desc"> |
| − | < | + | <div class="textSection"> |
| − | <p> | + | <div class="leftText"> |
| − | + | <p>Currently, in the world people wait for around 210 hours per year, waiting for their media to get sterilized. Requiring to wait for approx 2 hours per batch of media (From preparing to wrap the requirements to unloading material).</p> | |
| + | </div> | ||
| − | </div> | + | <div class="rightImg"> |
| + | <img src="./img/clock.png" alt=""> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="textSection"> | ||
| + | <div class="leftText" id="reverseText"> | ||
| + | <p>According to UNESCO, the scientific research field harbors around 7.8 million life-science researchers in the world as per 2013. 90% of these have to go home after setting up the autoclave and carry out their experiment the next day. 78% of these very life-science researchers lose motivation to carry out their projects due to the taxing waiting intervals.</p> | ||
| + | </div> | ||
| + | <div class="rightImg" id="reverseImg"> | ||
| + | <img src="./img/sci.png" alt=""> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="textSection"> | ||
| + | <div class="leftText"> | ||
| + | <p>No alternative techniques have been implemented else than steam sterilization for media. As people started to live with the traditional technique.</p> | ||
| + | </div> | ||
| − | <div class=" | + | <div class="rightImg"> |
| + | <img src="./img/idea.png" alt=""> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="productDesc"> | ||
| + | <p> | ||
| + | But as a research team, it’s always important to improvise every basic need of a dedicated researcher. Let it be the primary step of media preparation only. | ||
| + | So as a part of the iGEM project, we have taken up this topic to develop a portable sterilization system, the ‘STERIPORT’. | ||
| + | </p> | ||
| + | <p> | ||
| + | So our solution to this is Steriport a better way to sterilization system that can sterilize media within 10 mins and can be effortlessly carried by the operator. This system involves a hassle-free working process, involving sterilization of media and then after automated dispensing mechanism. This implies the use of components like heat, U.V., and alcohol, with also implementing BioBrick parts to sterilize the desired media. | ||
| + | </p> | ||
| + | </div> | ||
| + | <div class="cardsDiv"> | ||
| + | <div class="cardRow"> | ||
| + | <div class="card" style="background: url('./img/bg1.jpg'); background-position: center; background-size: cover;"> | ||
| + | <div class="cardOverlay"> | ||
| + | <h2>Wetlab</h2> | ||
| + | </div> | ||
| + | </div> | ||
| − | <div class=" | + | <div class="card" style="background: url('./img/design.jpg'); background-position: center; background-size: cover;"> |
| + | <div class="cardOverlay"> | ||
| + | <h2>Design</h2> | ||
| + | </div> | ||
| + | </div> | ||
| − | < | + | <div class="card" style="background: url('./img/hard.jpg'); background-position: center; background-size: cover;"> |
| − | < | + | <div class="cardOverlay"> |
| + | <h2>Hardware</h2> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="card" style="background: url('./img/res.jpg'); background-position: center; background-size: cover;"> | ||
| + | <div class="cardOverlay"> | ||
| + | <h2>Results</h2> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| − | < | + | <div class="cardRow"> |
| + | <div class="card" style="background: url('./img/part.jpg'); background-position: center; background-size: cover;"> | ||
| + | <div class="cardOverlay"> | ||
| + | <h2>Parts</h2> | ||
| + | </div> | ||
| + | </div> | ||
| − | <div class=" | + | <div class="card" style="background: url('./img/model.jpg'); background-position: center; background-size: cover;"> |
| − | + | <div class="cardOverlay"> | |
| − | + | <h2>Models</h2> | |
| − | </ | + | </div> |
| − | </div> | + | </div> |
| − | + | <div class="card" style="background: url('./img/ppl.jpg'); background-position: center; background-size: cover;"> | |
| − | + | <div class="cardOverlay"> | |
| − | <div class=" | + | <h2>People</h2> |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class=" | + | |
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
| − | </div> | + | |
| − | </div> | + | |
| + | <div class="card" style="background: url('./img/medal.jpg'); background-position: center; background-size: cover;"> | ||
| + | <div class="cardOverlay"> | ||
| + | <h2>Medal Criteria</h2> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="footer"> | ||
| + | <p>Bioriidl © Copyright 2019. All rights reserved.</p> | ||
| + | </div> | ||
| + | <script> | ||
| + | var myNav = document.getElementById('myNav'); | ||
| + | window.onscroll = function () { | ||
| + | var toggleHeight = document.getElementById('desc').offsetTop - myNav.offsetHeight; | ||
| + | if (window.scrollY >= toggleHeight ) { | ||
| + | myNav.classList.add("nav-colored"); | ||
| + | myNav.classList.remove("nav-transparent"); | ||
| + | } | ||
| + | else { | ||
| + | myNav.classList.add("nav-transparent"); | ||
| + | myNav.classList.remove("nav-colored"); | ||
| + | } | ||
| + | }; | ||
| + | var off = document.getElementById('desc').offsetTop; | ||
| + | function scrollDown() { | ||
| + | window.scroll(0,off); | ||
| + | } | ||
| + | </script> | ||
| + | </body> | ||
</html> | </html> | ||
Revision as of 13:32, 20 October 2019
<!DOCTYPE html>
Currently, in the world people wait for around 210 hours per year, waiting for their media to get sterilized. Requiring to wait for approx 2 hours per batch of media (From preparing to wrap the requirements to unloading material).
According to UNESCO, the scientific research field harbors around 7.8 million life-science researchers in the world as per 2013. 90% of these have to go home after setting up the autoclave and carry out their experiment the next day. 78% of these very life-science researchers lose motivation to carry out their projects due to the taxing waiting intervals.
No alternative techniques have been implemented else than steam sterilization for media. As people started to live with the traditional technique.
But as a research team, it’s always important to improvise every basic need of a dedicated researcher. Let it be the primary step of media preparation only. So as a part of the iGEM project, we have taken up this topic to develop a portable sterilization system, the ‘STERIPORT’.
So our solution to this is Steriport a better way to sterilization system that can sterilize media within 10 mins and can be effortlessly carried by the operator. This system involves a hassle-free working process, involving sterilization of media and then after automated dispensing mechanism. This implies the use of components like heat, U.V., and alcohol, with also implementing BioBrick parts to sterilize the desired media.