Difference between revisions of "Team:TecCEM"

 
(230 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{TecCEM/Menu}}
+
{{TecCEM/header_generator_test}}
−
<html>
+
<html lang="en">
−
<head>
+
  <head>
−
<meta charset="utf-8">
+
    <meta charset="UTF-8" />
−
<title>Untitled Document</title>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
−
</head>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 +
    <title>Document</title>
  
−
<body>
+
    <style>
−
<div class="Imagen_principal">
+
      @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap");
−
<img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
      deMenu,
−
<div class="Titulo">
+
      #top_title,
−
<h1>Team</h1>
+
      .patrollink,
−
</div>
+
      #firstHeading,
−
<div class="Difuminado"></div>
+
      #home_logo,
−
</div>
+
      #sideMenu {
−
+
        display: none;
−
<div class="cuerpo_principal">
+
      }
−
+
 
−
<div class="Espacio_menu_lateral">
+
      #content {
−
+
        padding: 0px;
−
</div>
+
        width: 100%;
−
+
        margin-top: -7px;
−
<div class="Texto">
+
        margin-left: 0px;
−
<h2 id="1">Título 1</h2>
+
        border: none;
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
      }
−
+
 
−
<h2>Título 2</h2>
+
      #bodyContent h1,
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
      #bodyContent h2,
−
+
      #bodyContent h3,
−
<h2>Título 3</h2>
+
      #bodyContent h4,
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
      #bodyContent h5 {
−
+
        margin-bottom: 0px;
−
<h2>Título 4</h2>
+
      }
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
 
−
+
      #bodyContent a[href ^="https://"],
−
<img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
        .link-https {
−
+
        padding-right: 0px;
−
<p class="Caption">Fig 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, nam, maiores. Inventore ex eum doloremque eligendi id, voluptates quod illum, dolore deserunt iste alias. Dolor libero illo hic, temporibus harum.</p>
+
      }
−
+
 
−
<h2>Título 5</h2>
+
      * {
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, aperiam provident tempora. Deleniti neque dolorem veritatis ipsa maiores nihil optio in labore dolorum, eius quas rem facilis, maxime soluta temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et possimus.</p>
+
        box-sizing: border-box;
−
</div>
+
        margin: 0;
−
+
        padding: 0;
−
</div>
+
      }
−
<div class="menu_lateral" id="menu_lateral">
+
 
−
<ul style="list-style: none; margin: 0; padding: 0;">
+
      h1 {
−
<li>Primer</li>
+
        font-size: 50px;
−
<li>Segundo</li>
+
      }
−
<li>Tercero</li>
+
 
−
</ul>
+
      .content {
−
</div>
+
        background: rgb(2, 0, 36);
−
+
        background: linear-gradient(
−
</body>
+
          0deg,
−
<style>
+
          rgba(2, 0, 36, 1) 0%,
−
body{
+
          rgba(4, 102, 171, 1) 0%,
−
margin: 0;
+
          rgba(181, 217, 255, 1) 40%,
−
padding: 0;
+
          rgba(173, 244, 255, 1) 100%
−
}
+
        );
−
.Imagen_principal{
+
        padding-bottom: 300px;
−
display: flex;
+
      }
−
align-content: center;
+
 
−
justify-content: center;
+
      header {
−
align-items: center;
+
        height: 80vh;
−
width: 100vw;
+
        display: flex;
−
height: 100vh;
+
        justify-content: center;
−
}
+
        align-items: center;
−
.Imagen_principal > img{
+
      }
−
width: 100%;
+
 
−
height: 100%;
+
      .container {
−
}
+
        display: flex;
−
.Titulo{
+
        padding-bottom: 130px;
−
position: absolute;
+
        padding-top: 50px;
−
background: white;
+
      }
−
padding: 1rem;
+
 
−
border-radius: 1rem;
+
      .item-10 {
−
z-index: 10;
+
        text-align: center;
−
}
+
        width: 10%;
−
.Titulo > h1{
+
        height: 30vh;
−
display: inline;
+
        padding-top: 1em;
−
opacity: 1;
+
        padding-bottom: 1em;
−
font-size: 4rem;
+
      }
−
}
+
 
−
.Difuminado{
+
      .item-20 {
−
width: 100vw;
+
        text-align: center;
−
height: 100vh;
+
        width: 20%;
−
position: absolute;
+
        height: 30vh;
−
z-index: 9;
+
        padding-top: 1em;
−
background: black;
+
        padding-bottom: 1em;
−
opacity: .4;
+
      }
−
}
+
 
−
.cuerpo_principal{
+
      .item-30 {
−
display: flex;
+
        text-align: center;
−
flex-direction: row;
+
        width: 30%;
−
}
+
        height: 30vh;
−
.menu_lateral{
+
        padding-top: 1em;
−
display: flex;
+
        padding-bottom: 1em;
−
transition: transform 0.6s ease-out;
+
      }
−
background: gray;
+
 
−
flex-wrap: wrap;
+
      .item-40 {
−
width: 10%;
+
        text-align: center;
−
justify-content: center;
+
        width: 40%;
−
align-content: center;
+
        height: 30vh;
−
align-items: center;
+
        padding-top: 1em;
−
max-height: 45rem;
+
        padding-bottom: 1em;
−
position: fixed;
+
      }
−
top: 50%;
+
 
−
transform: translateX(-100%) translateY(0);
+
      .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;
 +
      }
 +
 
 +
      .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;
 +
      }
 +
 
 +
      .animation_2 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .animation_3 {
 +
        background-repeat: no-repeat;
 +
        background-position: center;
 +
        position: relative;
 +
        overflow: hidden;
 +
      }
 +
 
 +
      .drop_1 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 75%;
 +
      }
 +
 
 +
      .drop_2 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30 px;
 +
        left: 25%;
 +
      }
 +
 
 +
      .drop_3 {
 +
        height: 150px;
 +
        position: absolute;
 +
        top: 30px;
 +
        left: 73%;
 +
      }
 +
 
 +
      .datos,
 +
      .problematica,
 +
      .deteccion,
 +
      .remocion,
 +
      .resultados,
 +
      .impacto {
 +
        opacity: 0;
 +
        transition: 400ms;
 +
      }
 +
 
 +
      .show {
 +
        opacity: 1;
 +
        transition: 3s;
 +
      }
 +
 
 +
      .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;
 +
      }
 +
 
 +
      /*======================================*/
 +
 
 +
      .menu_hidden {
 +
        transform: translateX(-0%) translateY(-70%);
 +
        /*100% - .menu.height + .menu_teccem.heigh
 +
      100 - 35 + 25 = 90
 +
      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;
 +
      }
 +
 
 +
      .animated2 {
 +
        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>
 +
 
 +
<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>
 +
<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>
 +
<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>
−
.menu_lateral_hidden{
+
          </div>
−
transform: translateX(0%) translateY(0);
+
         
−
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
+
      <div class="overlay_container landing_image_div"></div>
−
100 - 35 + 20 = 85
+
      <section class="content">
−
*/
+
        <header>
−
}
+
          <center>
−
.Espacio_menu_lateral{
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
width: 10%;
+
              Detecting compounds in an easy, fast and affordable manner:
−
}
+
            </h1>
−
.menu_lateral li{
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
margin-bottom: 1rem;
+
              Disrupting Disruptors. An Endocrine Disrupting Chemicals
−
cursor: pointer;
+
            </h1>
−
}
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
.Texto{
+
              sensing device
−
width: 85%;
+
            </h1>
−
padding: 1rem;
+
            <h5 style="font-size: 18px; font-weight: normal">
−
justify-content: center;
+
              <strong>Key Concepts:</strong> Microplastics, Endocrine Disruptive
−
display: flex;
+
              Chemicals (EDCs), Biosensor, Human Estrogen Receptor (hER⍺, ESR1),
−
flex-direction: column;
+
              Piezoelectric Sensor.
−
align-items: center;
+
            </h5>
−
+
          </center>
−
}
+
        </header>
−
.Texto h2{
+
        <div style="height: 2px;"></div>
−
align-self: left;
+
        <section class="animation_1">
−
}
+
          <img
−
+
            class="drop_1"
−
.Texto p {
+
            src="https://static.igem.org/mediawiki/2021/6/66/T--TecCEM--contaminatedwater.svg"
−
text-align: justify;
+
            alt="img"
−
}
+
          />
−
+
          <div class="container">
−
.Texto img{
+
            <div class="item-20">
−
width: 70%;
+
              <img
−
max-height: 500px;
+
                src="https://static.igem.org/mediawiki/2021/6/6e/T--TecCEM--data.svg"
−
}
+
                width="250px"
−
+
                height="650px"
−
.Caption{
+
                style="position: absolute; left: 20px; bottom: 290px"
−
width: 70%;
+
                alt=""
−
}
+
              />
−
html, body {
+
            </div>
−
    height: 100vh;
+
            <div class="item-50">
−
}
+
              <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
+
                Let’s explore some facts...
−
</style>
+
              </h1>
−
+
              <p class="datos" style="font-size: 14.7px">
−
<script>
+
                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>
−
$(window).scroll(function(){
+
                Microplastics have a size of 5 mm or lower and may be composed of different materials such as Polyester fibers. </br>
−
  if($(document).scrollTop() > 650){
+
                Endocrine Disrupting Chemicals (EDCs) are compounds that mimic certain hormones and interfere with body signaling.</br>
−
document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden");
+
                EDCs may have its origin from the degradation of microplastics and processes related to plastic bottles manufacturing.</br>
−
  }else{
+
                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>
−
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
+
                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>
−
</script>
+
          <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,
 +
          },
 +
        ],
 +
      };
 +
 
 +
      const dropPath2 = {
 +
        curviness: 0.2,
 +
        autoRotate: false,
 +
        values: [
 +
          {
 +
            x: 0,
 +
            y: 350,
 +
          },
 +
          {
 +
            x: 700,
 +
            y: 360,
 +
          },
 +
          {
 +
            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,
 +
          },
 +
        ],
 +
      };
 +
 
 +
      const tween1 = new TimelineLite();
 +
 
 +
      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”.