Difference between revisions of "Team:RUM-UPRM"

 
(56 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{IGEM_TopBar}}
 
 
{{RUM-UPRM}}
 
{{RUM-UPRM}}
 +
{{RUM-UPRM/Nav}}
 
<html lang="en">
 
<html lang="en">
 
     <head>
 
     <head>
Line 13: Line 13:
 
         <!--Preloader-->
 
         <!--Preloader-->
 
         <div class="se-pre-con">
 
         <div class="se-pre-con">
−
            <!-- <p>Synthesizing...</p> check css and html preloader for text -->
 
 
         </div>
 
         </div>
  
−
        <!-- Navigation-->
+
              <!-- Masthead-->
−
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
+
−
            <div class="container">
+
−
                <a class="navbar-brand js-scroll-trigger" href="#page-top">RUM-UPRM</a>
+
−
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+
−
                    Menu
+
−
                    <i class="fas fa-bars"></i>
+
−
                </button>
+
−
                <div class="collapse navbar-collapse" id="navbarResponsive">
+
−
                    <ul class="navbar-nav ml-auto">
+
−
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
+
−
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#projects">Projects</a></li>
+
−
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Members">Team</a></li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
        </nav>
+
−
        <!-- Masthead-->
+
 
         <header class="masthead">
 
         <header class="masthead">
 
             <div class="container d-flex h-100 align-items-center">
 
             <div class="container d-flex h-100 align-items-center">
 
                 <div class="mx-auto text-center">
 
                 <div class="mx-auto text-center">
−
                     <h1 class="mx-auto my-0 text-uppercase">Coli.CTRL</h1>
+
                     <h1 class="mx-auto my-0 text-uppercase">Mer-Nite</h1>
 
                         <h2 id="autoTyper" class="text-white-50 mx-auto mt-2 mb-5"></h2>
 
                         <h2 id="autoTyper" class="text-white-50 mx-auto mt-2 mb-5"></h2>
−
                     <a class="btn btn-primary js-scroll-trigger" href="#about">Get Started</a>
+
                     <a class="btn btn-primary js-scroll-trigger" href="#about" style="background-color: rgba(59,185,255,0.6); text-color: #ffffff !important;">To the rescue</a>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 46: Line 28:
 
             <div class="wrapper-bg">
 
             <div class="wrapper-bg">
 
               <video id="globalView" playsinline muted>
 
               <video id="globalView" playsinline muted>
−
                   <source src="assets/vid/globalView.mp4" type="video/mp4">
+
                   <source src="https://static.igem.org/mediawiki/2020/0/0b/T--RUM-UPRM--globeZoom.mp4" type="video/mp4">
 
               </video>
 
               </video>
 
             </div>
 
             </div>
Line 58: Line 40:
 
                     <div class="col-lg-8 mx-auto">
 
                     <div class="col-lg-8 mx-auto">
 
                         <h1 class="text-white mb-4">Abstract</h1>
 
                         <h1 class="text-white mb-4">Abstract</h1>
−
                         <p class="text-white-50">
+
                         <p class="text-white-50 text-justify">
−
                             This is the wiki — for now.
+
                             For over six decades, Vieques, an island-municipality of Puerto Rico, was used as a military training site. An array of contamination was left behind due to the materials and explosives used, devastating the biodiversity, and increasing health risks for the Viequenses. Initiatives to clean the waters and soil of Vieques exist; however, it has been a costly and lengthy process. iGEM RUM-UPRM proposes Mer-Nite, a solution to decrease the contamination in Vieques due to the military practices. Phase 1 of the project consisted of designing a genetic system to absorb and bioremediate mercury through the expression of the mer operon, combined with a second circuit that will be activated upon the presence of RDX and degrade the contaminant through the expression of the xplA and xplB genes. Mer-Nite represents an alternative solution to decrease the contamination, conserve biodiversity, and improve the quality of life of Vieques.  
 
                         </p>
 
                         </p>
 
                         <h1 class="text-white mb-4">The Story</h1>
 
                         <h1 class="text-white mb-4">The Story</h1>
−
                         <p class="text-white-50">
+
                         <p class="text-white-50 text-justify">
−
                            The wiki is designed...
+
                          Synthetic Biology has helped provide many solutions for a wide variety of the world's current environmental problems. We propose to implement the use of synthetic biology to mediate contamination caused by military practices in Anones Lagoon Vieques, Puerto Rico. Our project, Mer-Nite to the rescue, focuses on the bioremediation of mercury and biodegradation RDX.
−
                            The black gradient in the background sort of gravitates you down the page. Near the end of the gradient section we can add a 3D model of bacteria. I added a placeholder image that looks okay,
+
                          To achieve this, our prototypes will consist of a construct bacterium of <i>Pseudomona putida</i>, that will be able to detect, absorb, and biodegrade or bioremediate the contaminants. Meanwhile, the hardware shall work as a water filter device that will draw in the contaminated water into the chamber with our construct bacterium and release the water free of mercury and RDX. Want to leant more about our project? Click <a href="https://2020.igem.org/Team:RUM-UPRM/Description">here</a>
−
                            but one that looks more like
+
 
−
                            <a href="https://www.google.com/search?q=bacteria&tbm=isch&ved=2ahUKEwianYzN_f_qAhVtajABHbssANEQ2-cCegQIABAA&oq=bacteria&gs_lcp=CgNpbWcQAzIECAAQQzIECAAQQzIECAAQQzIECAAQQzIECAAQQzIECAAQQzIECAAQQzIECAAQQzICCAAyAggAUOnZAVjP3gFgjuMBaABwAHgAgAGGA4gBsgSSAQcwLjEuMC4xmAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=_4EoX9qhN-3UwbkPu9mAiA0&bih=1001&biw=1920&hl=en#imgrc=sOZJfbN5dSk-yM">this one</a>
+
−
                            would be better (although with the transparent background and cut off at the bottom). The image can also be annotated to complement the understanding of the topic.
+
−
                            <!--
+
−
                            https://2019.igem.org/Team:CU
+
−
                            https://2019.igem.org/Team:Linkoping_Sweden
+
−
                            https://2019.igem.org/Team:TU_Kaiserslautern
+
−
                            https://2019.igem.org/Team:GreatBay_SZ
+
−
                            https://2019.igem.org/Team:Wageningen_UR/Description
+
−
                            https://2014.igem.org/Team:Aalto-Helsinki
+
−
                            -->
+
 
                         </p>
 
                         </p>
 
                         <div id="project-context">
 
                         <div id="project-context">
−
                           <video controls preload="metadata" class=" img-fluid">
+
                           <video controls preload="metadata" class="text-center img-fluid col-lg-8">
−
                               <source src="assets/vid/Project-Context.mp4" type="video/mp4">
+
                               <source src="https://static.igem.org/mediawiki/2020/b/b7/T--RUM-UPRM--PromoVideo1.mp4" type="video/mp4">
 
                           </video>
 
                           </video>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
−
                <img class="img-fluid" src="assets/img/bacteria.png" alt="" />
 
 
             </div>
 
             </div>
 
         </section>
 
         </section>
Line 90: Line 61:
 
         <section class="projects-section bg-light" id="projects">
 
         <section class="projects-section bg-light" id="projects">
 
             <div class="container">
 
             <div class="container">
 +
 
 +
                      <center><video autoplay playsinline muted loop preload="metadata" class="text-center img-fluid mx-auto col-lg-8">
 +
                                  <source src="https://static.igem.org/mediawiki/2020/1/1f/T--RUM-UPRM--equipo1.mov" type="video/mp4">
 +
                                    </video></center>
 +
 +
  
−
                <!-- The Team -->
 
−
                <div class="container">
 
−
                  <div class="row">
 
−
                    <!-- Team Member 1 -->
 
−
                    <div class="col-xl-3 col-md-6 mb-4">
 
−
                      <div class="card border-0 shadow">
 
−
                        <img src="assets/img/Team-Pictures/IMG_5819.jpg" class="card-img-top" alt="...">
 
−
                        <div class="card-body text-center">
 
−
                          <h5 class="card-title mb-0">Team Member</h5>
 
−
                          <div class="card-text text-black-50">Web Developer</div>
 
−
                        </div>
 
−
                      </div>
 
−
                    </div>
 
−
                    <!-- Team Member 2 -->
 
−
                    <div class="col-xl-3 col-md-6 mb-4">
 
−
                      <div class="card border-0 shadow">
 
−
                        <img src="https://source.unsplash.com/9UVmlIb0wJU/500x350" class="card-img-top" alt="...">
 
−
                        <div class="card-body text-center">
 
−
                          <h5 class="card-title mb-0">Team Member</h5>
 
−
                          <div class="card-text text-black-50">Web Developer</div>
 
−
                        </div>
 
−
                      </div>
 
−
                    </div>
 
−
                    <!-- Team Member 3 -->
 
−
                    <div class="col-xl-3 col-md-6 mb-4">
 
−
                      <div class="card border-0 shadow">
 
−
                        <img src="https://source.unsplash.com/sNut2MqSmds/500x350" class="card-img-top" alt="...">
 
−
                        <div class="card-body text-center">
 
−
                          <h5 class="card-title mb-0">Team Member</h5>
 
−
                          <div class="card-text text-black-50">Web Developer</div>
 
−
                        </div>
 
−
                      </div>
 
−
                    </div>
 
−
                    <!-- Team Member 4 -->
 
−
                    <div class="col-xl-3 col-md-6 mb-4">
 
−
                      <div class="card border-0 shadow">
 
−
                        <img src="https://source.unsplash.com/ZI6p3i9SbVU/500x350" class="card-img-top" alt="...">
 
−
                        <div class="card-body text-center">
 
−
                          <h5 class="card-title mb-0">Team Member</h5>
 
−
                          <div class="card-text text-black-50">Web Developer</div>
 
−
                        </div>
 
−
                      </div>
 
−
                    </div>
 
−
                  </div>
 
−
                </div>
 
−
                <!-- /.container -->
 
  
 +
        <html>
 +
<head>
 +
<style>
 +
* {box-sizing: border-box;}
 +
 +
.column {float: left;
 +
                width: 33.33%;
 +
                padding: 5px;}
 +
 +
/* Clearfix (clear floats) */
 +
.row::after {
 +
  content: "";
 +
  clear: both;
 +
  display: table;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
<br></br>
 +
<center><h3>Check out this brochure!</h3></center>
 +
 +
<div class="row">
 +
  <div class="column">
 +
        <img src="https://static.igem.org/mediawiki/2020/2/26/T--RUM-UPRM--DVieques1.jpeg" alt="1" style="width:100%">
 +
  </div>
 +
  <div class="column">
 +
        <img src="https://static.igem.org/mediawiki/2020/7/73/T--RUM-UPRM--DVieques2.jpeg" alt="2" style="width:100.3%">
 +
  </div>
 +
  <div class="column">
 +
        <img src="https://static.igem.org/mediawiki/2020/7/78/T--RUM-UPRM--DVieques3.jpeg" alt="3" style="width:95.5%">
 +
 +
</div>     
  
 
                 <!-- Featured Project Row-->
 
                 <!-- Featured Project Row-->
 
                 <div class="row align-items-center no-gutters mb-4 mb-lg-5">
 
                 <div class="row align-items-center no-gutters mb-4 mb-lg-5">
 
                     <div class="col-xl-8 col-lg-7">
 
                     <div class="col-xl-8 col-lg-7">
−
                         <img class="img-fluid mb-3 mb-lg-0" src="assets/img/bg-masthead.jpg" alt="" /> <!-- https://www.dangerous-business.com/visiting-vieques-puerto-rico/ -->
+
                         <img class="img-fluid mb-3 mb-lg-0" src="" alt="" />
−
                    </div>
+
−
                    <div class="col-xl-4 col-lg-5">
+
−
                        <div class="featured-text text-center text-lg-left">
+
−
                            <h4>Shoreline</h4>
+
−
                            <p class="text-black-50 mb-0">A cool photo. There is really not much to say. It's the same photo you saw at the top of the page. Try scaling the webpage and see how everything moves. Pretty responsive!</p>
+
−
                        </div>
+
 
                     </div>
 
                     </div>
 +
 
                 </div>
 
                 </div>
 
                 <!-- Project One Row-->
 
                 <!-- Project One Row-->
 
                 <div class="row justify-content-center no-gutters mb-5 mb-lg-0">
 
                 <div class="row justify-content-center no-gutters mb-5 mb-lg-0">
−
                     <div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-01.jpg" alt=""/></div>
+
                     <div class="col-lg-6"><center><img class="img-fluid" src="https://static.igem.org/mediawiki/2020/1/10/T--RUM-UPRM--logo.png" style="width:400px; height:500px" alt=""/></center></div>
 
                     <div class="col-lg-6">
 
                     <div class="col-lg-6">
 
                         <div class="bg-black text-center h-100 project">
 
                         <div class="bg-black text-center h-100 project">
 
                             <div class="d-flex h-100">
 
                             <div class="d-flex h-100">
 
                                 <div class="project-text w-100 my-auto text-center text-lg-left">
 
                                 <div class="project-text w-100 my-auto text-center text-lg-left">
−
                                     <h4 class="text-white">Misty</h4>
+
                                 
−
                                    <p class="mb-0 text-white-50">Another example of where you can put an image of the project, or anything else, along with a description. </p>
+
                                     <p class="mb-0 text-white-50"><img class="img-fluid" src="https://static.igem.org/mediawiki/2020/4/44/T--RUM-UPRM--LOGOFINAL.png"> </p>
 
                                     <hr class="d-none d-lg-block mb-0 ml-0" />
 
                                     <hr class="d-none d-lg-block mb-0 ml-0" />
 
                                 </div>
 
                                 </div>
Line 168: Line 126:
 
                 <!-- Project Two Row-->
 
                 <!-- Project Two Row-->
 
                 <div class="row justify-content-center no-gutters">
 
                 <div class="row justify-content-center no-gutters">
−
                     <div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-02.jpg" alt="" /></div>
+
                     <div class="col-lg-6"></div>
 
                     <div class="col-lg-6 order-lg-first">
 
                     <div class="col-lg-6 order-lg-first">
 
                         <div class="bg-black text-center h-100 project">
 
                         <div class="bg-black text-center h-100 project">
 
                             <div class="d-flex h-100">
 
                             <div class="d-flex h-100">
 
                                 <div class="project-text w-100 my-auto text-center text-lg-right">
 
                                 <div class="project-text w-100 my-auto text-center text-lg-right">
−
                                     <h4 class="text-white">Mountains</h4>
+
                                     <h4 class="text-white">Mer-nite</h4>
−
                                    <p class="mb-0 text-white-50">At this point I don't know what to write so I'll just invent some words. Scarapaduya, postimastacular, and contevertabrae!</p>
+
                                <p class="mb-0 text-white-50">Mer-nite, our hero, fights to bioremediate mercury and biodegrade RDX in Vieques, Puerto Rico. Her superpower is using GMOs to fight environmental challenges. <br> <img class="img-fluid" src="https://static.igem.org/mediawiki/2020/a/a1/T--RUM-UPRM--BACTERIASOLA.png" style="width:200px; height: 100px"></p>
 
                                     <hr class="d-none d-lg-block mb-0 mr-0" />
 
                                     <hr class="d-none d-lg-block mb-0 mr-0" />
 
                                 </div>
 
                                 </div>
Line 186: Line 144:
  
  
−
 
−
        <!-- Signup-->
 
−
        <section class="signup-section" id="signup">
 
−
            <div class="container">
 
−
                <div class="row">
 
−
                    <div class="col-md-10 col-lg-8 mx-auto text-center">
 
−
                        <i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
 
−
                        <h2 class="text-white mb-5">Subscribe to receive updates!</h2>
 
−
                        <form class="form-inline d-flex">
 
−
                            <input class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputEmail" type="email" placeholder="Enter email address..." />
 
−
                            <button class="btn btn-primary mx-auto" type="submit">Subscribe</button>
 
−
                        </form>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </section>
 
−
        <!-- Contact-->
 
−
        <section class="contact-section bg-black" id="contact">
 
−
            <div class="container">
 
−
                <div class="row">
 
−
                    <div class="col-md-4 mb-3 mb-md-0">
 
−
                        <div class="card py-4 h-100">
 
−
                            <div class="card-body text-center">
 
−
                                <i class="fas fa-map-marked-alt text-primary mb-2"></i>
 
−
                                <h4 class="text-uppercase m-0">Address</h4>
 
−
                                <hr class="my-4" />
 
−
                                <div class="small text-black-50">PR-108, Mayagüez, Puerto Rico, 00682</div>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
                    <div class="col-md-4 mb-3 mb-md-0">
 
−
                        <div class="card py-4 h-100">
 
−
                            <div class="card-body text-center">
 
−
                                <i class="fas fa-envelope text-primary mb-2"></i>
 
−
                                <h4 class="text-uppercase m-0">Email</h4>
 
−
                                <hr class="my-4" />
 
−
                                <div class="small text-black-50"><a href="#!">uprm.rum@igememail.edu</a></div>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
                    <div class="col-md-4 mb-3 mb-md-0">
 
−
                        <div class="card py-4 h-100">
 
−
                            <div class="card-body text-center">
 
−
                                <i class="fas fa-mobile-alt text-primary mb-2"></i>
 
−
                                <h4 class="text-uppercase m-0">Phone</h4>
 
−
                                <hr class="my-4" />
 
−
                                <div class="small text-black-50">+1 (787) 000-0000</div>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="social d-flex justify-content-center">
 
−
                    <a class="mx-2" href="#!"><i class="fab fa-twitter"></i></a>
 
−
                    <a class="mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
 
−
                    <a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
 
−
                </div>
 
 
             </div>
 
             </div>
 
         </section>
 
         </section>
−
        <!-- Footer-->
 
−
        <footer class="footer bg-black small text-center text-white-50"><div class="container">Copyright © UPRM-RUM 2020</div></footer>
 
 
     </body>
 
     </body>
 
</html>
 
</html>
 +
{{RUM-UPRM/Footer}}

Latest revision as of 03:51, 28 October 2020


RUM-UPRM Wiki Source Code

RUM-UPRM Wiki Source Code

Mer-Nite

To the rescue

Abstract

For over six decades, Vieques, an island-municipality of Puerto Rico, was used as a military training site. An array of contamination was left behind due to the materials and explosives used, devastating the biodiversity, and increasing health risks for the Viequenses. Initiatives to clean the waters and soil of Vieques exist; however, it has been a costly and lengthy process. iGEM RUM-UPRM proposes Mer-Nite, a solution to decrease the contamination in Vieques due to the military practices. Phase 1 of the project consisted of designing a genetic system to absorb and bioremediate mercury through the expression of the mer operon, combined with a second circuit that will be activated upon the presence of RDX and degrade the contaminant through the expression of the xplA and xplB genes. Mer-Nite represents an alternative solution to decrease the contamination, conserve biodiversity, and improve the quality of life of Vieques.

The Story

Synthetic Biology has helped provide many solutions for a wide variety of the world's current environmental problems. We propose to implement the use of synthetic biology to mediate contamination caused by military practices in Anones Lagoon Vieques, Puerto Rico. Our project, Mer-Nite to the rescue, focuses on the bioremediation of mercury and biodegradation RDX. To achieve this, our prototypes will consist of a construct bacterium of Pseudomona putida, that will be able to detect, absorb, and biodegrade or bioremediate the contaminants. Meanwhile, the hardware shall work as a water filter device that will draw in the contaminated water into the chamber with our construct bacterium and release the water free of mercury and RDX. Want to leant more about our project? Click here



Check out this brochure!

1
2
3

Mer-nite

Mer-nite, our hero, fights to bioremediate mercury and biodegrade RDX in Vieques, Puerto Rico. Her superpower is using GMOs to fight environmental challenges.

Our Sponsors

Amgen Snapgene UPRM Goya Genscript PRABIA MolecularCloud MatLab IDT ReviveRestore Twist

Follows Us!