Difference between revisions of "Team:TecCEM"

(Prototype team page)
 
 
(276 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{IGEM_TopBar}}
+
{{TecCEM/header_generator_test}}
−
{{TecCEM}}
+
<html lang="en">
−
<html>
+
  <head>
 +
    <meta charset="UTF-8" />
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 +
    <title>Document</title>
  
 +
    <style>
 +
      @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap");
 +
      deMenu,
 +
      #top_title,
 +
      .patrollink,
 +
      #firstHeading,
 +
      #home_logo,
 +
      #sideMenu {
 +
        display: none;
 +
      }
  
 +
      #content {
 +
        padding: 0px;
 +
        width: 100%;
 +
        margin-top: -7px;
 +
        margin-left: 0px;
 +
        border: none;
 +
      }
  
−
<div class="column full_size" >
+
      #bodyContent h1,
−
<h1> Welcome to iGEM 2021! </h1>
+
      #bodyContent h2,
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
      #bodyContent h3,
 +
      #bodyContent h4,
 +
      #bodyContent h5 {
 +
        margin-bottom: 0px;
 +
      }
  
−
<img src="https://via.placeholder.com/1080x320">
+
      #bodyContent a[href ^="https://"],
 +
        .link-https {
 +
        padding-right: 0px;
 +
      }
  
−
</div>
+
      * {
 +
        box-sizing: border-box;
 +
        margin: 0;
 +
        padding: 0;
 +
      }
  
 +
      h1 {
 +
        font-size: 50px;
 +
      }
  
−
<div class="column full_size" >
+
      .content {
 +
        background: rgb(2, 0, 36);
 +
        background: linear-gradient(
 +
          0deg,
 +
          rgba(2, 0, 36, 1) 0%,
 +
          rgba(4, 102, 171, 1) 0%,
 +
          rgba(181, 217, 255, 1) 40%,
 +
          rgba(173, 244, 255, 1) 100%
 +
        );
 +
        padding-bottom: 300px;
 +
      }
  
−
<h3>Before you start</h3>
+
      header {
−
<p> Please read the following pages:</p>
+
        height: 80vh;
−
<ul>
+
        display: flex;
−
<li> <a href="https://2021.igem.org/Competition">Competition Hub</a> </li>
+
        justify-content: center;
−
<li> <a href="https://2021.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
        align-items: center;
−
<li> <a href="https://2021.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
      }
−
</ul>
+
−
</div>
+
  
 +
      .container {
 +
        display: flex;
 +
        padding-bottom: 130px;
 +
        padding-top: 50px;
 +
      }
  
−
<div class="clear extra_space"></div>
+
      .item-10 {
−
<div class="line_divider"></div>
+
        text-align: center;
−
<div class="clear extra_space"></div>
+
        width: 10%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
 +
      .item-20 {
 +
        text-align: center;
 +
        width: 20%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
 +
      .item-30 {
 +
        text-align: center;
 +
        width: 30%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
−
<div class="column full_size" >
+
      .item-40 {
−
<h3> Styling your wiki </h3>
+
        text-align: center;
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
        width: 40%;
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
−
</div>
+
      .item-50 {
 +
        text-align: center;
 +
        width: 50%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
 +
      .item-60 {
 +
        text-align: center;
 +
        width: 60%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
 +
      .item-70 {
 +
        text-align: center;
 +
        width: 70%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
 +
      .item-80 {
 +
        text-align: center;
 +
        width: 80%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
−
<div class="clear extra_space"></div>
+
      .item-90 {
 +
        text-align: center;
 +
        width: 90%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
 +
      .item-100 {
 +
        text-align: center;
 +
        width: 100%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
  
 +
      .animation_1 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
  
−
<div class="column third_size" >
+
      .animation_2 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
  
−
<h3> Uploading pictures and files </h3>
+
      .animation_3 {
−
<p> You must upload any pictures and files to the iGEM 2021 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
+
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
  
 +
      .drop_1 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 75%;
 +
      }
  
−
<p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
      .drop_2 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30 px;
 +
        left: 25%;
 +
      }
  
−
<div class="button_link">
+
      .drop_3 {
−
<a href="https://2021.igem.org/Special:Upload">
+
        height: 150px;
−
UPLOAD FILES
+
        position: absolute;
−
</a>
+
        top: 30px;
−
</div>
+
        left: 73%;
 +
      }
  
−
</div>
+
      .datos,
 +
      .problematica,
 +
      .deteccion,
 +
      .remocion,
 +
      .resultados,
 +
      .impacto {
 +
        opacity: 0;
 +
        transition: 400ms;
 +
      }
  
−
<div class="column third_size" >
+
      .show {
−
<h3> Wiki template information </h3>
+
        opacity: 1;
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2021.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
        transition: 3s;
 +
      }
  
−
</div>
+
      .menu_close {
 +
        position: absolute;
 +
        top: 0;
 +
        left: 0;
 +
        z-index: 999;
 +
        display: flex;
 +
        justify-content: flex-start;
 +
        cursor: pointer;
 +
      }
 +
      .menu_icon {
 +
        top: 30px;
 +
        height: 90%;
 +
        width: 10%;
 +
        display: flex;
 +
        flex-direction: column;
 +
        justify-content: center;
 +
        align-items: center;
 +
      }
 +
      .menu_icon img {
 +
        width: 100%;
 +
        display: block;
 +
        margin: 0;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
      }
 +
      /*=============== SubMenus ==========*/
 +
      .menu_icon:hover .menu_item {
 +
        display: block;
 +
        visibility: visible;
 +
      }
  
 +
      .menu_item {
 +
        margin-left: 0%;
 +
        margin-top: 92%;
 +
        display: none;
 +
        padding-top: 50%;
 +
        top: 115px;
 +
        position: absolute;
 +
        list-style: none;
 +
        transition: transform 0.6s ease-out;
 +
        visibility: hidden;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
      }
 +
      .menu_item > li {
 +
        position: relative;
 +
        display: inline-block;
 +
        padding: 0px;
 +
        margin-bottom: 5px;
 +
        padding: 10px 12px;
 +
        padding-top: 220px;
 +
      }
  
 +
      .menu_item > li:hover {
 +
        text-decoration: underline;
 +
        text-decoration-color: white;
 +
        cursor: pointer;
 +
      }
  
−
<div class="column third_size" >
+
      /*======================================*/
−
<div class="highlight decoration_B_full">
+
−
<h3> Editing your wiki </h3>
+
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
−
<p>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
  
−
<div class="button_link">
+
      .menu_hidden {
−
<a href="https://2021.igem.org/wiki/index.php?title=Team:TecCEM&action=edit">
+
        transform: translateX(-0%) translateY(-70%);
−
EDIT PAGE
+
        /*100% - .menu.height + .menu_teccem.heigh
−
</a>
+
      100 - 35 + 25 = 90
−
</div>
+
      100 + 35 - 55 - 10 =
 +
      */
 +
      }
 +
      .menu_iconos {
 +
        width: 100vw;
 +
        height: 100%;
 +
        /*background: green;  - jose's edit*/
 +
        padding-left: 5rem;
 +
        padding-right: 1.5rem;
 +
        overflow: hidden;
 +
        display: flex;
 +
        flex-wrap: wrap;
 +
        justify-content: space-around;
 +
        align-content: center;
 +
      }
 +
      .menu_teccem > p {
 +
        font-size: 25px;
 +
      }
 +
      .menu_teccem {
 +
        height: 50%;
 +
        padding: 0;
 +
        display: flex;
 +
        justify-content: center;
 +
        align-items: center;
 +
        z-index: 9999;
 +
      }
 +
      .menu {
 +
        display: flex;
 +
        flex-direction: column;
 +
        align-items: center;
 +
        transition: transform 0.6s ease-out;
 +
        position: absolute;
 +
        width: 97vw;
 +
        margin-top: 0;
 +
        /*background: red;  -jose's edit*/
 +
        top: 0.5%;
 +
        z-index: 9999;
 +
      }
  
 +
      .animated {
 +
        transform: translatey(0px);
 +
        animation: float 6s ease-in-out infinite;
 +
      }
  
−
</div>
+
      .animated2 {
−
</div>
+
        transform: translatey(0px);
 +
        animation: float2 6s ease-in-out infinite;
 +
      }
  
 +
      @keyframes float {
 +
        0% {
 +
          transform: translatey(0px);
 +
        }
 +
        50% {
 +
          transform: translatey(-13px);
 +
        }
 +
        100% {
 +
          transform: translatey(0px);
 +
        }
 +
      }
  
 +
      @keyframes float2 {
 +
        0% {
 +
          transform: translatey(-10px);
 +
        }
 +
        50% {
 +
          transform: translatey(0px);
 +
        }
 +
        100% {
 +
          transform: translatey(-10px);
 +
        }
 +
      }
 +
    </style>
 +
    <script>
 +
      window.onload = function () {
 +
        generate_header(
 +
          "Tec CEM",
 +
          "https://www.solidbackgrounds.com/images/950x350/950x350-sky-blue-solid-color-background.jpg",
 +
          "#FDE68A",
 +
          "#0099ff",
 +
          "#acf2fb"
 +
        );
 +
      };
 +
    </script>
 +
  </head>
  
 +
  <body>
 +
    <section class="body">
 +
        <div class="menu">
 +
            <p
 +
            style="position: absolute; left:15px; top: 490px; font-family:Nunito,sans-serif; color:white; font-size:70px;"
 +
            >
 +
            Disrupting Disruptors
 +
            </p>
 +
            <div class="menu_iconos">
 +
                <div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/0/04/T--TecCEM--main.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Home</p>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM/Team">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/6/6d/T--TecCEM--CEM_equipo_icono.svg"
 +
                    alt=""
 +
                    class="animated"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Team</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Team" style="color: white">Members</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Collaborations" style="color: white">Collaborations</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Attributions" style="color: white">Attributions</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Contribution" style="color: white">Contribution</a></li>
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM/Description">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--Proyecto_Icono_texem.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Project</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Description" style="color: white">Description</a></li>
  
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Notebook" style="color: white">Notebook</a></li>
  
−
<div class="clear extra_space"></div>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Implementation" style="color: white">Implementation</a></li>
−
<div class="line_divider"></div>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results" style="color: white">Results</a></li>
−
<div class="clear extra_space"></div>
+
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Zetasizer" style="color: white">Particle detection</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Engineering" style="color: white">Engineering</a></li>
 +
 +
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
 +
<a href="https://2021.igem.org/Team:TecCEM/Safety">
 +
                        <img
 +
                        src="https://static.igem.org/mediawiki/2021/b/ba/T--TecCEM--TecCEMpremiosicono.svg"
 +
                        alt=""
 +
                        class="animated"
 +
                      />
 +
                      <img
 +
                    src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                    class="animated"
 +
                    style="position: relative; top: -30px;"
 +
                    alt=""
 +
                  />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold; color: white;">Awards</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Model" style="color: white">Model</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Hardware" style="color: white">Hardware</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Software" style="color: white">Software</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Sustainable" style="color: white">Sustainable Development Goals</a></li>
  
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Safety" style="color: white">Safety</a></li>
 +
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM/Human_Practices">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/1/1d/T--TecCEM--HumanPractices_Icono_Texem.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Human Practices</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Human_Practices" style="color: white">Human Practices</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Communication" style="color: white">Education and Engagement</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;"><a href="https://2021.igem.org/Team:TecCEM/Results_Survey" style="color: white">Survey Results</a></li>
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://2021.igem.org/Team:TecCEM/Parts">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/archive/c/ce/20211005011830%21T--TecCEM--Biobrick_Icono_Texem.svg"
 +
                    alt=""
 +
                    class="animated"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Parts</p>
 +
<ul class = "menu_item">
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Parts" style="color: white">Overview</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/Biosensorparts" style="color: white">Biosensor Parts</a></li>
 +
<li style="font-size: 1rem; font-family: 'Nunito', Times; font-weight: bold;color: white;"><a href="https://2021.igem.org/Team:TecCEM/SelectionMarkerParts" style="color: white">Selection Marker Parts</a></li>
 +
</ul>
 +
</div>
 +
<div class="menu_icon">
 +
<a href="https://igem.org/2021_Judging_Form?team=TecCEM">
 +
<img
 +
                    src="https://static.igem.org/mediawiki/2021/a/a1/T--TecCEM--Form_Icono_Texem.svg"
 +
                    alt=""
 +
                    class="animated2"
 +
                  />
 +
                  <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b0/T--TecCEM--waves.png"
 +
                class="animated2"
 +
                style="position: relative; top: -30px;"
 +
                alt=""
 +
              />
 +
</a>
 +
<p style="font-size: 2rem; font-family: 'Nunito', Times; font-weight: bold;color: white;">Judging form</p>
 +
</div>
 +
</div>
 +
<div class="menu_teccem">
 +
 +
</div>
 +
          </div>
 +
         
 +
      <div class="overlay_container landing_image_div"></div>
 +
      <section class="content">
 +
        <header>
 +
          <center>
 +
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
              Detecting compounds in an easy, fast and affordable manner:
 +
            </h1>
 +
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
              Disrupting Disruptors. An Endocrine Disrupting Chemicals
 +
            </h1>
 +
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
              sensing device
 +
            </h1>
 +
            <h5 style="font-size: 18px; font-weight: normal">
 +
              <strong>Key Concepts:</strong> Microplastics, Endocrine Disruptive
 +
              Chemicals (EDCs), Biosensor, Human Estrogen Receptor (hER⍺, ESR1),
 +
              Piezoelectric Sensor.
 +
            </h5>
 +
          </center>
 +
        </header>
 +
        <div style="height: 2px;"></div>
 +
        <section class="animation_1">
 +
          <img
 +
            class="drop_1"
 +
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
 +
            alt="img"
 +
          />
 +
          <div class="container">
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/6/6e/T--TecCEM--data.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; left: 20px; bottom: 290px"
 +
                alt=""
 +
              />
 +
            </div>
 +
            <div class="item-50">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Let’s explore some facts...
 +
              </h1>
 +
              <p class="datos" style="font-size: 14.7px">
 +
                Microplastics are generated by the incomplete degradation of plastics from cosmetics, bottles,textile industry, fibers and other plastic related products. They may also be intentionally manufactured.</br>
 +
                Microplastics have a size of 5 mm or lower and may be composed of different materials such as Polyester fibers. </br>
 +
                Endocrine Disrupting Chemicals (EDCs) are compounds that mimic certain hormones and interfere with body signaling.</br>
 +
                EDCs may have its origin from the degradation of microplastics and processes related to plastic bottles manufacturing.</br>
 +
                Currently, there aren’t any methods with the needed quality to detect EDCs in an efficient manner. Most methods are either too expensive or not reliable enough. </br>
 +
                The lack of quantifying methods has an impact on the existing regulations and standards regarding the quality of drinking water, since they usually don’t take into account either Microplastics or EDCs.</br></p>
 +
            </div>
 +
            <div class="item-30"></div>
 +
          </div>
 +
          <div class="container">
 +
            <div class="item-40"></div>
 +
            <div class="item-40">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Problematic
 +
              </h1>
 +
              <p class="problematica" style="font-size: 15.5px">
 +
                Microplastics are a huge problem and many researchers and even
 +
                some iGEM Teams are trying to put a stop to them. However, have
 +
                you heard about Endocrine Disrupting Chemicals? If not, don’t
 +
                feel bad, many people including regulatory agencies from all
 +
                around the world have overlooked them. Endocrine Disrupting
 +
                Chemicals or EDCs are dangerous compounds that come from many
 +
                sources but are mostly associated with the degradation of
 +
                certain plastics and its manufacturing processes. They may even
 +
                be found in drinkable water, so we are exposed to them o a
 +
                regular basis. Besides, their detection is a challenge due to
 +
                their characteristics: they are too small and there are too
 +
                many. In addition, they are difficult to eliminate from water
 +
                and accumulate in the organism that consumes them. EDCs are
 +
                related to several diseases that range from metabolic and
 +
                hormonal health issues to even cancer. We want to tackle this
 +
                problem, we want to detect them and even eliminate them.
 +
              </p>
 +
            </div>
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/9/98/T--TecCEM--problematic.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; right: 20px; top: 310px"
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
        </section>
 +
        <section class="animation_2">
 +
          <img
 +
            class="drop_2"
 +
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
 +
            alt="img"
 +
          />
 +
          <div class="container">
 +
            <div class="item-50"></div>
 +
            <div class="item-30">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Detection
 +
              </h1>
 +
              <p class="deteccion" style="font-size: 16px">
 +
                We began the development of our own biosensor which has several
 +
                characteristics that make it unique. Our inspiration came from
 +
                our research, in which we found that several people had already
 +
                developed a biosensor for the detection of these compounds.
 +
                However, they had some problems that include a high sensitivity
 +
                towards interference and the potential to become too expensive.
 +
                So we decided to implement a biosensor that could measure EDCs
 +
                in situ, that could be fast and easy to use, in addition to
 +
                being cheaper to produce. This biosensor will work through the
 +
                immobilization of hER⍺ protein receptor on a quartz, which is
 +
                part of a piezoelectric sensor.
 +
              </p>
 +
            </div>
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/9/9a/T--TecCEM--detection.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; right: 20px; bottom: 260px"
 +
                alt=""
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
          <div class="container">
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/1/13/T--TecCEM--degradation2.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; left: 20px; top: 310px"
 +
                alt=""
 +
              />
 +
            </div>
 +
            <div class="item-30">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Degradation
 +
              </h1>
 +
              <p class="remocion" style="font-size: 16px">
 +
                We know that detection isn’t enough in our battle against EDCs
 +
                so we decided to also get into the degradation of these harmful
 +
                compounds. We used a Laccase from another iGEM Team and we
 +
                established a protocol that could help us to mass produce this
 +
                enzyme. In the future, we plan on introducing this step as part
 +
                of the purification process of fresh water.
 +
              </p>
 +
            </div>
 +
            <div class="item-50">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/7/73/T--TecCEM--science.svg"
 +
                width="500px"
 +
                height="300px"
 +
                style="position: absolute; left: 60%; bottom: 4"
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
        </section>
 +
        <section class="animation_3">
 +
          <img
 +
            class="drop_3"
 +
            src="https://static.igem.org/mediawiki/2021/3/36/T--TecCEM--cleanwater.svg"
 +
            alt="img"
 +
          />
 +
          <div class="container">
 +
            <div class="item-20"></div>
 +
            <div class="item-50">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Results
 +
              </h1>
 +
              <p class="resultados" style="font-size: 15.5px">
 +
                We completed the design of the hardware and the software for our
 +
                biosensor. In fact, we created a program that lets users have a
 +
                real time visualization of the oscillation frequency in order to
 +
                analyze the output; moreover, we provided a mathematical model
 +
                to find the exact value of the amount of mass present in the
 +
                sensor. In the molecular section of our project, we tested the
 +
                expression of our protein through some experiments. We designed
 +
                several Biobricks to meet our goals and established the
 +
                conditions to express large quantities of our protein in order
 +
                to standardize the manufacturing process of our Biosensor. With
 +
                the Laccase, we actually managed to conduct an assay and
 +
                determine its activity towards three different substrates. We
 +
                also created a protocol that could be used to mass produce this
 +
                enzyme and use it to purify water from EDCs in a treatment
 +
                facility.
 +
              </p>
 +
            </div>
 +
            <div class="item-30"></div>
 +
          </div>
 +
          <div class="container">
 +
            <div class="item-30">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/b/b3/T--TecCEM--results2.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; left: 20px; bottom: 290px"
 +
                alt=""
 +
              />
 +
            </div>
 +
            <div class="item-50">
 +
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
 +
                Impact
 +
              </h1>
 +
              <p class="impacto" style="font-size: 15.5px">
 +
                We hope that in the future we will be able to get our sensor in
 +
                the market. This has huge implications since people could
 +
                measure the amount of EDCs they are exposed to. It could also
 +
                work as a Quality Assurance tool in the manufacturing of plastic
 +
                bottles and the bottled water industry, since companies could
 +
                sell their products guaranteeing to their consumers that their
 +
                water is 100% EDC free. Regulatory agencies might also be
 +
                interested in our sensor and the findings we do with it. Most
 +
                countries don’t have any regulations whatsoever regarding
 +
                microplastics or EDCs as pollutants in drinking water, so we
 +
                hope that our project could be the basis of a new set of Norms
 +
                that enforce the regulation of these contaminants. We’ve also
 +
                aligned our project with three of the Sustainable Development
 +
                Goals, which are “Water and Sanitation”, “Health and Wellness”
 +
                and “Life Below Water”.
 +
              </p>
 +
            </div>
 +
            <div class="item-20">
 +
              <img
 +
                src="https://static.igem.org/mediawiki/2021/2/2b/T--TecCEM--impact-2.svg"
 +
                width="250px"
 +
                height="650px"
 +
                style="position: absolute; right: 20px; top: 310px"
 +
                alt=""
 +
              />
 +
            </div>
 +
          </div>
 +
        </section>
 +
      </section>
 +
    </section>
  
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
 +
      integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
 +
      integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"
 +
      integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"
 +
      integrity="sha512-/8phkpsAzxsbuX18zNkQ2gCq4Q5JsWoPo1jHLDeZorPUHRtx9YJxpdk+os05oDhPJVCNzA2/NMl4rmJyQ+6Fvg=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"
 +
      integrity="sha512-I0VFyPo7hdM7YrEbQ0pvX4bX2904k0+B19u/xBrPrQoMprfcSnIDfGFD8kP52GbAhwtDjkEVhXlQvj8+vkJyew=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"
 +
      integrity="sha512-ht40uOoiTef4nKq0THVzjIGh3VS108J577LVVgNXnQLXza3doXjoM3owin2vd+Hm6w88k12RIrePIVY2WNzz6Q=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script
 +
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/BezierPlugin.min.js"
 +
      integrity="sha512-oOy5+mtZRcqjn6b9k4oj+tk2/hVIetzOAM9Y5cndEHgLxiIGavAz1agbHf6JjGzxXZ2SMbu08Uy1DDF0UwA0qQ=="
 +
      crossorigin="anonymous"
 +
    ></script>
 +
    <script>
 +
      const dropPath1 = {
 +
        curviness: 0.2,
 +
        autoRotate: false,
 +
        values: [
 +
          {
 +
            x: 0,
 +
            y: 305,
 +
          },
 +
          {
 +
            x: -810,
 +
            y: 315,
 +
          },
 +
          {
 +
            x: -810,
 +
            y: 800,
 +
          },
 +
          {
 +
            x: 200,
 +
            y: window.innerHeight,
 +
          },
 +
        ],
 +
      };
  
−
<div class="column two_thirds_size" >
+
      const dropPath2 = {
−
<h3>Tips</h3>
+
        curviness: 0.2,
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
        autoRotate: false,
−
<ul>
+
        values: [
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
          {
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
            x: 0,
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
            y: 350,
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
          },
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
          {
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2021.igem.org/Calendar">iGEM 2021 calendar</a> </li>
+
            x: 700,
−
<li>Have lots of fun! </li>
+
            y: 360,
−
</ul>
+
          },
−
</div>
+
          {
 +
            x: 700,
 +
            y: window.innerHeight,
 +
          },
 +
        ],
 +
      };
  
 +
      const dropPath3 = {
 +
        curviness: 0.2,
 +
        autoRotate: false,
 +
        values: [
 +
          {
 +
            x: 0,
 +
            y: 285,
 +
          },
 +
          {
 +
            x: -850,
 +
            y: 285,
 +
          },
 +
          {
 +
            x: -850,
 +
            y: 510,
 +
          },
 +
        ],
 +
      };
  
−
<div class="column third_size">
+
      const tween1 = new TimelineLite();
−
<div class="highlight decoration_A_full">
+
−
<h3>Inspiration</h3>
+
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
−
<ul>
+
−
<li> <a href="https://2019.igem.org/Team:Vilnius-Lithuania"> 2019 Vilnius Lithuania</a> </li>
+
−
<li> <a href="https://2019.igem.org/Team:NUS_Singapore">2019 NUS Singapore</a> </li>
+
−
<li> <a href="https://2019.igem.org/Team:Lambert_GA">2019 Lambert GA</a> </li>
+
−
<li> <a href="https://2020.igem.org/Team:Waterloo"> 2020 Waterloo</a></li>
+
−
<li> <a href="https://2020.igem.org/Team:TUDelft">2020 TUDelft</a></li>
+
−
<li> <a href="https://2020.igem.org/Team:XMU-China"> 2020 XMU China </a></li>
+
−
<li> <a href="https://2020.igem.org/Team:TAS_Taipei"> 2020 TAS Taipei </a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
  
 +
      tween1.add(
 +
        TweenLite.to(".drop_1", 5, {
 +
          bezier: dropPath1,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
 +
      const tween2 = new TimelineLite();
  
 +
      tween2.add(
 +
        TweenLite.to(".drop_2", 5, {
 +
          bezier: dropPath2,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
 +
      const tween3 = new TimelineLite();
 +
 +
      tween3.add(
 +
        TweenLite.to(".drop_3", 5, {
 +
          bezier: dropPath3,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
 +
 +
      const controller = new ScrollMagic.Controller();
 +
 +
      const scene1 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween1)
 +
        .setPin(".animation_1")
 +
        .addTo(controller);
 +
 +
      const scene2 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween2)
 +
        .setPin(".animation_2")
 +
        .addTo(controller);
 +
 +
      const scene3 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_3",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween3)
 +
        .setPin(".animation_3")
 +
        .addTo(controller);
 +
 +
      const datos = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
      })
 +
        .setClassToggle(".datos", "show")
 +
        .addTo(controller);
 +
 +
      const problematica = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
      })
 +
        .setClassToggle(".problematica", "show")
 +
        .addTo(controller);
 +
 +
      const deteccion = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
      })
 +
        .setClassToggle(".deteccion", "show")
 +
        .addTo(controller);
 +
 +
      const remocion = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
      })
 +
        .setClassToggle(".remocion", "show")
 +
        .addTo(controller);
 +
 +
      const resultados = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_3",
 +
      })
 +
        .setClassToggle(".resultados", "show")
 +
        .addTo(controller);
 +
 +
      const impacto = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_3",
 +
      })
 +
        .setClassToggle(".impacto", "show")
 +
        .addTo(controller);
 +
    </script>
 +
  </body>
 
</html>
 
</html>
 +
{{TecCEM/Footer}}

Latest revision as of 03:36, 22 October 2021

Document

Disrupting Disruptors

Home

Team

Project

Awards

Human Practices

Parts

Judging form

Detecting compounds in an easy, fast and affordable manner:

Disrupting Disruptors. An Endocrine Disrupting Chemicals

sensing device

Key Concepts: Microplastics, Endocrine Disruptive Chemicals (EDCs), Biosensor, Human Estrogen Receptor (hER⍺, ESR1), Piezoelectric Sensor.
img

Let’s explore some facts...

Microplastics are generated by the incomplete degradation of plastics from cosmetics, bottles,textile industry, fibers and other plastic related products. They may also be intentionally manufactured.
Microplastics have a size of 5 mm or lower and may be composed of different materials such as Polyester fibers.
Endocrine Disrupting Chemicals (EDCs) are compounds that mimic certain hormones and interfere with body signaling.
EDCs may have its origin from the degradation of microplastics and processes related to plastic bottles manufacturing.
Currently, there aren’t any methods with the needed quality to detect EDCs in an efficient manner. Most methods are either too expensive or not reliable enough.
The lack of quantifying methods has an impact on the existing regulations and standards regarding the quality of drinking water, since they usually don’t take into account either Microplastics or EDCs.

Problematic

Microplastics are a huge problem and many researchers and even some iGEM Teams are trying to put a stop to them. However, have you heard about Endocrine Disrupting Chemicals? If not, don’t feel bad, many people including regulatory agencies from all around the world have overlooked them. Endocrine Disrupting Chemicals or EDCs are dangerous compounds that come from many sources but are mostly associated with the degradation of certain plastics and its manufacturing processes. They may even be found in drinkable water, so we are exposed to them o a regular basis. Besides, their detection is a challenge due to their characteristics: they are too small and there are too many. In addition, they are difficult to eliminate from water and accumulate in the organism that consumes them. EDCs are related to several diseases that range from metabolic and hormonal health issues to even cancer. We want to tackle this problem, we want to detect them and even eliminate them.

img

Detection

We began the development of our own biosensor which has several characteristics that make it unique. Our inspiration came from our research, in which we found that several people had already developed a biosensor for the detection of these compounds. However, they had some problems that include a high sensitivity towards interference and the potential to become too expensive. So we decided to implement a biosensor that could measure EDCs in situ, that could be fast and easy to use, in addition to being cheaper to produce. This biosensor will work through the immobilization of hER⍺ protein receptor on a quartz, which is part of a piezoelectric sensor.

Degradation

We know that detection isn’t enough in our battle against EDCs so we decided to also get into the degradation of these harmful compounds. We used a Laccase from another iGEM Team and we established a protocol that could help us to mass produce this enzyme. In the future, we plan on introducing this step as part of the purification process of fresh water.

img

Results

We completed the design of the hardware and the software for our biosensor. In fact, we created a program that lets users have a real time visualization of the oscillation frequency in order to analyze the output; moreover, we provided a mathematical model to find the exact value of the amount of mass present in the sensor. In the molecular section of our project, we tested the expression of our protein through some experiments. We designed several Biobricks to meet our goals and established the conditions to express large quantities of our protein in order to standardize the manufacturing process of our Biosensor. With the Laccase, we actually managed to conduct an assay and determine its activity towards three different substrates. We also created a protocol that could be used to mass produce this enzyme and use it to purify water from EDCs in a treatment facility.

Impact

We hope that in the future we will be able to get our sensor in the market. This has huge implications since people could measure the amount of EDCs they are exposed to. It could also work as a Quality Assurance tool in the manufacturing of plastic bottles and the bottled water industry, since companies could sell their products guaranteeing to their consumers that their water is 100% EDC free. Regulatory agencies might also be interested in our sensor and the findings we do with it. Most countries don’t have any regulations whatsoever regarding microplastics or EDCs as pollutants in drinking water, so we hope that our project could be the basis of a new set of Norms that enforce the regulation of these contaminants. We’ve also aligned our project with three of the Sustainable Development Goals, which are “Water and Sanitation”, “Health and Wellness” and “Life Below Water”.