|
|
| (8 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| + | {{:Team:TEC-Costa_Rica/Template:Header}} |
| − | <head>
| + | |
| − | <meta charset="utf-8">
| + | |
| − | <meta name="viewport" content="initial-scale=1.0,width=device-width"/>
| + | |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
| + | |
| − | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
| + | |
| − | <style type="text/css">
| + | |
| − | .jumbotron {
| + | |
| − | height: 350px;
| + | |
| − | width: 100%;
| + | |
| − | margin-bottom: 0;
| + | |
| − | padding: 0;
| + | |
| − | display: table;
| + | |
| − | color: white;
| + | |
| − | background-image: url('https://static.pexels.com/photos/4154/clinic-doctor-health-hospital-large.jpg');
| + | |
| − | background-size: cover;
| + | |
| − | background-position: top;
| + | |
| − | background-attachment: fixed;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | }
| + | |
| − | .jumbotron h1 {
| + | |
| − | display: table-cell;
| + | |
| − | vertical-align: middle;
| + | |
| − | background-color: rgba(0, 0, 0, 0.2);
| + | |
| − | }
| + | |
| − | .parallax {
| + | |
| − | perspective: 1px;
| + | |
| − | overflow-x: hidden;
| + | |
| − | overflow-y: auto;
| + | |
| − | }
| + | |
| − | .concept {
| + | |
| − | display: block;
| + | |
| − | text-align: center;
| + | |
| − | margin: 10px auto 0 auto;
| + | |
| − | width: 80%
| + | |
| − | }
| + | |
| − | .project .container-fluid {
| + | |
| − | padding: 30px 25px;
| + | |
| − | }
| + | |
| − | .project .container-fluid .row {
| + | |
| − | padding-bottom: 20px;
| + | |
| − | border-bottom: 1px solid #d3d3d3;
| + | |
| − | }
| + | |
| − | .project .container-fluid .row a {
| + | |
| − | color: black;
| + | |
| − | }
| + | |
| − | .project .container-fluid .row .col-sm-4 {
| + | |
| − | padding: 20px;
| + | |
| − | }
| + | |
| − | .section-image {
| + | |
| − | border-radius: 50%;
| + | |
| − | height: 250px;
| + | |
| − | width: 250px;
| + | |
| − | background-color: #364C5E;
| + | |
| − | }
| + | |
| − | .section-image img {
| + | |
| − | margin: 0 auto 0 auto;
| + | |
| − | height: 150px;
| + | |
| − | width: 150px;
| + | |
| − | margin-top: 25px;
| + | |
| − | }
| + | |
| − | .image-align {
| + | |
| − | padding-top: 20px;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .slideanim {visibility:hidden;}
| + | |
| − | .slide {
| + | |
| − | animation-name: slide;
| + | |
| − | -webkit-animation-name: slide;
| + | |
| − | animation-duration: 1s;
| + | |
| − | -webkit-animation-duration: 1s;
| + | |
| − | visibility: visible;
| + | |
| − | }
| + | |
| − | @keyframes slide {
| + | |
| − | 0% {
| + | |
| − | opacity: 0;
| + | |
| − | transform: translateY(70%);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateY(0%);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
| + | |
| − | }
| + | |
| − | @media screen and (max-width: 1280px) {
| + | |
| − | }
| + | |
| − | @media screen and (max-width: 980px) {
| + | |
| − | }
| + | |
| − | @media screen and (max-width: 736px) {
| + | |
| − | }
| + | |
| − | @media screen and (max-width: 480px) {
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | <header>
| + | |
| − | <div class="container">
| + | |
| − | <navbar class="navbar navbar-inverse navbar-fixed-top" role="navigation">
| + | |
| − | <div class="container-fluid">
| + | |
| − | <div class="navbar-header">
| + | |
| − | <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
| + | |
| − | <span class="sr-only">Toggle navigation</span>
| + | |
| − | <span class="icon-bar" ></span>
| + | |
| − | <span class="icon-bar"></span>
| + | |
| − | <span class="icon-bar"></span>
| + | |
| − | </button>
| + | |
| − | <a class="navbar-brand" href="https://2016.igem.org/Team:TEC-Costa_Rica">
| + | |
| − | <img id="prostal-logo" alt="Prostal Brand" class="featurette-image img-responsive center-block" src="https://static.igem.org/mediawiki/2016/0/0e/T--TEC-Costa_Rica--prostal_logo.png"></a>
| + | |
| − | </div>
| + | |
| − | <div id="navbar" class="collapse navbar-collapse pull-right">
| + | |
| − | <ul class="nav navbar-nav">
| + | |
| − | <li class="dropdown"><a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica">Home</a></li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Team">Team</a>
| + | |
| − | <ul class="dropdown-menu">
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Members">Members</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Instructors">Instructors</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Investigators">Investigators</a></li>
| + | |
| − | <li role="separator" class="divider"></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Sponsors">Sponsors</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown active">
| + | |
| − | <a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Project">Project</a>
| + | |
| − | <ul class="dropdown-menu">
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/System">System</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Modelling_Simulations">Modelling & Simulations</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Parts">Parts</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Collaborations">Collaborations</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Safety">Safety</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging">Judging</a>
| + | |
| − | <ul class="dropdown-menu">
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging/Golden_Medals">Golden Medals</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging/Silver_Medals">Silver Medals</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging/Bronze_Medals">Bronze Medals</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice">Human Practice</a>
| + | |
| − | <ul class="dropdown-menu">
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon">Synbiothon</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown">
| + | |
| − | <a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Notebook">Notebook</a>
| + | |
| − | <ul class="dropdown-menu">
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Notebook/Laboratory">Laboratory</a></li>
| + | |
| − | <li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Notebook/Protocols">Protocols</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class="dropdown"><a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Interlab">Interlab</a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </navbar>
| + | |
| − | </div>
| + | |
| − | </header>
| + | |
| − | </body>
| + | |
| − | </html>
| + | |
| | {{:Team:TEC-Costa_Rica/Template:Stylesheet}} | | {{:Team:TEC-Costa_Rica/Template:Stylesheet}} |
| | <html> | | <html> |
| | + | <style type="text/css"> |
| | + | .jumbotron { |
| | + | height: 350px; |
| | + | width: 100%; |
| | + | margin-bottom: 0; |
| | + | display: table; |
| | + | color: white; |
| | + | background-image: url('https://static.igem.org/mediawiki/2016/1/17/T--TEC-Costa_Rica--prostal_project_safety_bg.jpg'); |
| | + | background-size: cover; |
| | + | background-position: top; |
| | + | background-attachment: fixed; |
| | + | background-repeat: no-repeat; |
| | + | } |
| | + | .jumbotron h1 { |
| | + | display: table-cell; |
| | + | vertical-align: middle; |
| | + | } |
| | + | .jumbotron span { font-size: 40px; } |
| | + | .parallax { |
| | + | perspective: 1px; |
| | + | overflow-x: hidden; |
| | + | overflow-y: auto; |
| | + | } |
| | + | .concept { |
| | + | display: block; |
| | + | text-align: center; |
| | + | margin: 10px auto 0 auto; |
| | + | width: 80% |
| | + | } |
| | + | #safety-elements { |
| | + | margin-top: 30px; |
| | + | margin-bottom: 25px; |
| | + | } |
| | + | #safety-elements p { text-align: center; } |
| | + | .col-sm-3 { margin-bottom: 40px; } |
| | + | .col-sm-3 img { |
| | + | width: 150px; |
| | + | height: 150px; |
| | + | } |
| | + | #project-safety .container-fluid { |
| | + | padding: 30px 25px; |
| | + | } |
| | + | #project-safety .container-fluid .row .col-sm-4 { |
| | + | padding: 20px; |
| | + | } |
| | + | #project-safety img { |
| | + | margin: 0 auto; |
| | + | width: 200px; |
| | + | } |
| | + | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { |
| | + | } |
| | + | @media screen and (max-width: 1280px) { |
| | + | } |
| | + | @media screen and (max-width: 980px) { |
| | + | } |
| | + | @media screen and (max-width: 736px) { |
| | + | } |
| | + | @media screen and (max-width: 480px) { |
| | + | } |
| | + | </style> |
| | <body> | | <body> |
| − | <main class="project well"> | + | <main class="project-safety well"> |
| | <div class="jumbotron text-center parallax"> | | <div class="jumbotron text-center parallax"> |
| − | <h1 style="font-size: 50px;">Project</h1> | + | <h1 style="font-size: 50px;">Project<br><span>Safety</span></h1> |
| | </div> | | </div> |
| | <div class="concept"> | | <div class="concept"> |
| − | <p style="text-align: center;">Prostal is a non-invasive, innovative system which aims to detect RNA and to produce a signal which is easy to read. To achieve this, we have separated our project in two main modules: I) detection of RNA and II) Signal. For the RNA detection, we chose the dCas9 (D10A, H840A) protein of <em>Streptococcus pyogenes</em>. This protein binds to the RNA and is engineered to produce a measurable signal.</p> | + | <p style="text-align: center;">Our project is related to the detection of a human disease via a biomarker molecule found in the urine of patients with prostate cancer. Since local regulation does not allow us to work with human samples, we designed our project in a way that it can work as a proof-of-concept of a detection system and pose no risk to human health.</p> |
| − | </div> | + | </div> |
| − | <h2>Background</h2> | + | <h1>Lab work</h1> |
| − | <p>Prostate cancer (pCa) is the second most common type of cancer among men in Costa Rica, with a man dying every 27 hours in average. Yearly data since 2012 shows that an average of 373 men die every year of this disease, and 44 of every 100 000 men suffer from this illness. Globally, an estimated 300 000 men die every year of pCa, and more than a million men are diagnosed, so this is a global concern. This data is aggravated by the fact that most of deaths occur because men refuse to undergo clinical examination, which consists mainly in Digital Rectal Examination (DRE). Therefore, if a method which can detect pCa is developed in which DRE or a biopsy are not needed, the rate of deaths could be dramatically reduced, since pCa is not aggressive if properly treated. There are alternative tests, such as Prostate Specific Antigen (PSA) or RNA-PCR amplification, but the first is not really specific for cancer, and the second one is expensive and requires costly equipment. Therefore, we propose a bacterial-based system which can detect RNA and produce an easy-to-read signal.</p> | + | <p>During our work in the lab, we followed a series of rules to ascertain that no risks were undertaken.</p> |
| − | <h2>Overview</h2> | + | <div id="safety-elements" class="container-fluid text-center"> |
| − | <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
| + | |
| − | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
| + | |
| − | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
| + | <img src="https://static.igem.org/mediawiki/2016/4/44/T--TEC-Costa_Rica--prostal_project_safety_labcoat.png"> |
| − | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
| + | <p>Use of lab coat</p> |
| − | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
| + | </div> |
| − | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
| + | |
| − | | + | <img src="https://static.igem.org/mediawiki/2016/1/19/T--TEC-Costa_Rica--prostal_project_safety_gloves.png"> |
| − | <!-- Container (About Section) -->
| + | <p>Use of nitrile gloves</p> |
| − | <div class="container-fluid slideanim">
| + | </div> |
| − | | + | <div class="col-sm-3"> |
| − | | + | <img src="https://static.igem.org/mediawiki/2016/4/47/T--TEC-Costa_Rica--prostal_project_safety_goggles.png"> |
| − | <div class="section-image">
| + | <p>Use of safety goggles</p> |
| − | <div class=" image- align"> | + | </div> |
| − | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/System"><img id="system" src="https://static.igem.org/mediawiki/2016/6/6b/T--TEC-Costa_Rica--prostal_project_system.png" class="img-responsive" alt="Project System"></a>
| + | <div class="col-sm-3"> |
| − | </div>
| + | <img src="https://static.igem.org/mediawiki/2016/6/66/T--TEC-Costa_Rica--prostal_project_safety_bacteria.png"> |
| − | </div>
| + | <p>Management of bacteria in biosafety cabinet</p> |
| | + | </div> |
| | </div> | | </div> |
| − | <div class="col-sm-8"> | + | <div class="row slideanim" style="border-bottom: 1px solid #d3d3d3;"> |
| − | <h2>System</h2>
| + | |
| − | <p>Our system was designed aiming to detect PCA3, a long non-coding RNA that works as a biomarker for prostate cancer detection, but it can be used to detect any DNA or RNA molecule. This system uses a modified dCas9 to detect an specific nucleic acid molecule and the conformational change this protein suffers when it binds to the target molecule is used to trigger the signaling mechanism.</p>
| + | <img src="https://static.igem.org/mediawiki/2016/1/18/T--TEC-Costa_Rica--prostal_project_safety_volatil.png"> |
| − | <br><a class="btn btn-default btn-lg" href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/System">Get in Touch</a>
| + | <p>Usage of volatile chemicals in fume hood</p> |
| − | </div>
| + | </div> |
| − | </div>
| + | <div class="col-sm-3"> |
| | + | <img src="https://static.igem.org/mediawiki/2016/f/fe/T--TEC-Costa_Rica--prostal_project_safety_cleaning.png"> |
| | + | <p>Cleaning and Sterilization of the Lab</p> |
| | + | </div> |
| | + | <div class="col-sm-3"> |
| | + | <img src="https://static.igem.org/mediawiki/2016/f/f6/T--TEC-Costa_Rica--prostal_project_safety_biohazard.png"> |
| | + | <p>Correct disposal of bio-hazardous residues</p> |
| | + | </div> |
| | + | <div class="col-sm-3"> |
| | + | <img src="https://static.igem.org/mediawiki/2016/8/8e/T--TEC-Costa_Rica--prostal_project_safety_areas.png"> |
| | + | <p>Separate areas for work with bacteria, DNA and electrophoresis</p> |
| | + | </div> |
| | + | </div> |
| | </div> | | </div> |
| − | | + | <div id="project-safety" class="container-fluid slideanim"> |
| − | <div class="container-fluid slideanim"> | + | |
| − | <div class="row">
| + | |
| − | <div class="col-sm-4 col-sm-push-8">
| + | |
| − | <div class="section-image">
| + | |
| − | <div class="image-align">
| + | |
| − | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Modelling_Simulations"><img id="modelling_simulations" src="https://static.igem.org/mediawiki/2016/1/1c/T--TEC-Costa_Rica--prostal_project_simulations.png" class="img-responsive" alt="Project Modelling & Simulations"></a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="col-sm-8 col-sm-pull-4">
| + | |
| − | <h2>Modelling & Simulations</h2>
| + | |
| − | <p>The modelling for the Project can be classified into two categories:</p>
| + | |
| − | <ul>
| + | |
| − | <li><p>Mathematical modelling</p></li>
| + | |
| − | <li><p>Structural modelling</p></li>
| + | |
| − | </ul>
| + | |
| − | <br><a class="btn btn-default btn-lg" href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Modelling_Simulations">Get in Touch</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="container-fluid slideanim">
| + | |
| | <div class="row"> | | <div class="row"> |
| | <div class="col-sm-4"> | | <div class="col-sm-4"> |
| − | <div class="section-image">
| + | <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/7/78/T--TEC-Costa_Rica--prostal_project_project-safety.png" alt="Project Safety"> |
| − | <div class="image-align">
| + | |
| − | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Parts"><img id="parts" src="https://static.igem.org/mediawiki/2016/1/1c/T--TEC-Costa_Rica--prostal_project_simulations.png" class="img-responsive" alt="Project Parts"></a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| | <div class="col-sm-8"> | | <div class="col-sm-8"> |
| − | <h2>Parts</h2>
| + | <h1>Project safety</h1> |
| − | <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> | + | <p> In order to have a functional system without having to use human samples, we decided to synthesize a DNA fragment of the gene we are going to detect, so we can express it in the bacteria. Then, we are working with dCas9, inteins, TEV protease, and GFP proteins, which are not from pathogenic organisms and were obtained from the Distribution or as gBlocks. All the experiments and cloning is made in Escherichia coli strains DH5alpha, TOP10 and BL21. No pathogenic organisms are used in the lab.</ p> |
| − | <br><a class="btn btn-default btn-lg" href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Modelling_Simulations">Get in Touch</a>
| + | |
| | </div> | | </div> |
| | </div> | | </div> |
| − | </div> | + | </div> |
| − | | + | </main> |
| − | <div class="container-fluid slideanim">
| + | |
| − | <div class="row">
| + | |
| − | <div class="col-sm-4 col-sm-push-8">
| + | |
| − | <div class="section-image">
| + | |
| − | <div class="image-align">
| + | |
| − | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Safety"><img id="safety" src="https://static.igem.org/mediawiki/2016/5/5e/T--TEC-Costa_Rica--prostal_project_safety.png" class="img-responsive" alt="Project Safety"></a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="col-sm-8 col-sm-pull-4">
| + | |
| − | <h2>Safety</h2>
| + | |
| − | <p>Our project is related to the detection of a human disease via a biomarker molecule found in the urine of patients with prostate cancer. Since local regulation does not allow us to work with human samples, we designed our project in a way that it can work as a proof-of-concept of a detection system and pose no risk to human health.</p>
| + | |
| − | <br><a class="btn btn-default btn-lg" href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Safety">Get in Touch</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="container-fluid slideanim">
| + | |
| − | <div class="row" style="border: none;">
| + | |
| − | <div class="col-sm-4">
| + | |
| − | <div class="section-image">
| + | |
| − | <div class="image-align">
| + | |
| − | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Collaborations"><img id="collaborations" src="https://static.igem.org/mediawiki/2016/7/76/T--TEC-Costa_Rica--prostal_project_collaborations.png" alt="Project Collaborations"></a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="col-sm-8">
| + | |
| − | <h2>Collaborations</h2>
| + | |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
| + | |
| − | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
| + | |
| − | <br><a class="btn btn-default btn-lg" href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Collaborations">Get in Touch</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </main> | + | |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| − | var system = document.getElementById('system'); | + | var navs = document.getElementsByClassName('dropdown'); |
| − | system.addEventListener("mouseover", function() { | + | Array.prototype.forEach.call(navs, function(nav) { |
| − | this.style.height = "175px";
| + | navs.className = ""; |
| − | this.style.width = "175px";
| + | navs.className = "dropdown"; |
| − | this.style.marginTop = "10px";
| + | |
| − | });
| + | |
| − | system.addEventListener("mouseout", function() {
| + | |
| − | this.style.height = "150px"; | + | |
| − | this.style.width = "150px"; | + | |
| − | this.style.marginTop = "25px";
| + | |
| − | });
| + | |
| − | var modelling_simulations = document.getElementById('modelling_simulations');
| + | |
| − | var parts = document.getElementById('parts');
| + | |
| − | var safety = document.getElementById('safety');
| + | |
| − | var collaborations = document.getElementById('collaborations');
| + | |
| − | var elements = [modelling_simulations, safety, collaborations];
| + | |
| − | elements.forEach(function(element) {
| + | |
| − | element.addEventListener("mouseover", function() {
| + | |
| − | this.style.height = "175px";
| + | |
| − | this.style.width = "175px";
| + | |
| − | this.style.marginTop = "5px";
| + | |
| − | });
| + | |
| − | element.addEventListener("mouseout", function() {
| + | |
| − | this.style.height = "150px";
| + | |
| − | this.style.width = "150px";
| + | |
| − | this.style.marginTop = "25px";
| + | |
| − | });
| + | |
| | }); | | }); |
| − | </script> | + | var nav = document.getElementById('nav-project'); |
| | + | nav.className += " active"; |
| | + | </script> |
| | </body> | | </body> |
| | </html> | | </html> |
| | {{:Team:TEC-Costa_Rica/Template:Scripts}} | | {{:Team:TEC-Costa_Rica/Template:Scripts}} |
| | {{:Team:TEC-Costa_Rica/Template:Footer}} | | {{:Team:TEC-Costa_Rica/Template:Footer}} |
