Difference between revisions of "Team:TecCEM"

 
(69 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{TecCEM/Menu}}
+
{{TecCEM/header_generator_test}}
−
{{TecCEM/BubblesTemplate}}
+
<html lang="en">
−
<html>
+
  <head>
−
<head>
+
    <meta charset="UTF-8" />
−
<meta charset="utf-8">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
−
<title>Untitled Document</title>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
−
</head>
+
    <title>Document</title>
  
−
<script text="text/javascript">
+
    <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;
 +
      }
  
−
window.onload = function(){  
+
      #content {
−
//alert(teamMembersPhotosArray.toString());
+
        padding: 0px;
 +
        width: 100%;
 +
        margin-top: -7px;
 +
        margin-left: 0px;
 +
        border: none;
 +
      }
  
 +
      #bodyContent h1,
 +
      #bodyContent h2,
 +
      #bodyContent h3,
 +
      #bodyContent h4,
 +
      #bodyContent h5 {
 +
        margin-bottom: 0px;
 +
      }
  
−
var numOfBubbles = 10;
+
      #bodyContent a[href ^="https://"],
−
                        console.log("numOfBuublesDeclaredCorrectly");
+
        .link-https {
 +
        padding-right: 0px;
 +
      }
  
−
for (j = 0;j < numOfBubbles;j++){
+
      * {
−
    var bubble_size = generateRandomNumber(10,60);
+
        box-sizing: border-box;
−
    var left = generateRandomNumber(85, 95);
+
        margin: 0;
−
    var speed_percentage = generateRandomNumber(40,60);
+
        padding: 0;
−
    generate_bubble(bubble_size, left, speed_percentage);
+
      }
−
}
+
  
−
    }
+
      h1 {
 +
        font-size: 50px;
 +
      }
  
−
</script>
+
      .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;
 +
      }
  
−
<body>
+
      header {
−
<div class="Imagen_principal">
+
        height: 80vh;
−
<img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
        display: flex;
−
<div class="Titulo">
+
        justify-content: center;
−
<h1 style= "font-family: 'Nunito', Times; font-weight: bold">Team</h1>
+
        align-items: center;
−
</div>
+
      }
−
<div class="Difuminado"></div>
+
 
−
</div>
+
      .container {
−
+
        display: flex;
−
<div class="cuerpo_principal bubbles_window">
+
        padding-bottom: 130px;
−
+
        padding-top: 50px;
−
<div class="Espacio_menu_lateral">
+
      }
−
+
 
−
</div>
+
      .item-10 {
−
+
        text-align: center;
−
<div class="Texto" style="display: flex">
+
        width: 10%;
−
<br id="primer">
+
        height: 30vh;
−
<br>
+
        padding-top: 1em;
−
<h2 style="font-family: Nunito, Times; font-size: 5rem;">Título 1</h2>
+
        padding-bottom: 1em;
−
<br>
+
      }
−
<div class="txt">
+
 
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">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.
+
      .item-20 {
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestias, rem a? In explicabo, eligendi veniam odio vero deserunt consequatur recusandae cupiditate, dolor minima ipsa corrupti error qui consectetur. Laudantium?</p></p>
+
        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;
 +
      }
 +
 
 +
      .item-40 {
 +
        text-align: center;
 +
        width: 40%;
 +
        height: 30vh;
 +
        padding-top: 1em;
 +
        padding-bottom: 1em;
 +
      }
 +
 
 +
      .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>
−
+
<div class="menu_icon">
−
+
<a href="https://2021.igem.org/Team:TecCEM/Team">
−
<br id="segundo">
+
<img
−
<br>
+
                    src="https://static.igem.org/mediawiki/2021/6/6d/T--TecCEM--CEM_equipo_icono.svg"
−
<h2 style="font-family: Nunito, Times; font-size: 5rem">Título 2</h2>
+
                    alt=""
−
<br>
+
                    class="animated"
−
<div class="txt">
+
                  />
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">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.
+
                  <img
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestias, rem a? In explicabo, eligendi veniam odio vero deserunt consequatur recusandae cupiditate, dolor minima ipsa corrupti error qui consectetur. Laudantium?</p></p>
+
                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>
−
+
<div class="menu_icon">
−
+
<a href="https://2021.igem.org/Team:TecCEM/Description">
−
<br id="tercero">
+
<img
−
<br>
+
                    src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--Proyecto_Icono_texem.svg"
−
<h2 style="font-family: Nunito, Times; font-size: 5rem">Título 3</h2>
+
                    alt=""
−
<br>
+
                    class="animated2"
−
<div class="txt">
+
                  />
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">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.
+
                  <img
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestias, rem a? In explicabo, eligendi veniam odio vero deserunt consequatur recusandae cupiditate, dolor minima ipsa corrupti error qui consectetur. Laudantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolores aperiam error, odit quas illo illum cum earum fuga id autem, inventore voluptatibus recusandae, voluptatum distinctio veritatis, ducimus repellat enim!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate totam eos debitis necessitatibus natus ipsa, possimus reiciendis quaerat. Harum sit ducimus voluptatum, id quia fuga, sequi tempore perferendis veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci expedita eum fugit culpa corporis laborum perferendis, magnam iure! Et voluptatem iste aperiam perspiciatis modi officia necessitatibus, veritatis quasi aliquam quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis architecto voluptas unde expedita labore, ipsa, vel, minus autem modi nisi quo ab esse pariatur voluptatibus tempora! Enim nihil, eum officiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi repellat omnis magnam recusandae necessitatibus optio, nostrum perferendis assumenda, culpa. Tenetur amet at temporibus unde ratione quaerat eos quam iusto. Deserunt.Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolores aperiam error, odit quas illo illum cum earum fuga id autem, inventore voluptatibus recusandae, voluptatum distinctio veritatis, ducimus repellat enim!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate totam eos debitis necessitatibus natus ipsa, possimus reiciendis quaerat. Harum sit ducimus voluptatum, id quia fuga, sequi tempore perferendis veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci expedita eum fugit culpa corporis laborum perferendis, magnam iure! Et voluptatem iste aperiam perspiciatis modi officia necessitatibus, veritatis quasi aliquam quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis architecto voluptas unde expedita labore, ipsa, vel, minus autem modi nisi quo ab esse pariatur voluptatibus tempora! Enim nihil, eum officiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi repellat omnis magnam recusandae necessitatibus optio, nostrum perferendis assumenda, culpa. Tenetur amet at temporibus unde ratione quaerat eos quam iusto. Deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam rem quod, quia, minima illo voluptatum nesciunt maxime ipsam magni inventore est quisquam aspernatur tempore id suscipit animi quaerat ea mollitia.</p></p>
+
                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>
−
+
<div class="menu_icon">
−
<br id="cuarto">
+
−
<br>
+
−
<h2 style="font-family: Nunito, Times; font-size: 5rem">Título 4</h2>
+
−
<br>
+
−
<div class="txt">
+
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">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 style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem molestias, rem a? In explicabo, eligendi veniam odio vero deserunt consequatur recusandae cupiditate, dolor minima ipsa corrupti error qui consectetur. Laudantium?</p></p>
+
<a href="https://2021.igem.org/Team:TecCEM/Safety">
−
</div>
+
                        <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>
  
−
<img id="fig1" src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
+
<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>
−
+
−
<p class="Caption" style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem; font-style: italic">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>
+
</ul>
−
+
−
+
−
<br id="quinto">
+
−
<br>
+
−
<h2 style="font-family: Nunito, Times; font-size: 5rem">Título 5</h2>
+
−
<br>
+
−
<div class="txt">
+
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">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 ametLorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolores aperiam error, odit quas illo illum cum earum fuga id autem, inventore voluptatibus recusandae, voluptatum distinctio veritatis, ducimus repellat enim!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate totam eos debitis necessitatibus natus ipsa, possimus reiciendis quaerat. Harum sit ducimus voluptatum, id quia fuga, sequi tempore perferendis veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci expedita eum fugit culpa corporis laborum perferendis, magnam iure! Et voluptatem iste aperiam perspiciatis modi officia necessitatibus, veritatis quasi aliquam quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis architecto voluptas unde expedita labore, ipsa, vel, minus autem modi nisi quo ab esse pariatur voluptatibus tempora! Enim nihil, eum officiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi repellat omnis magnam recusandae necessitatibus optio, nostrum perferendis assumenda, culpa. Tenetur amet at temporibus unde ratione quaerat eos quam iusto. Deserunt.Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolores aperiam error, odit quas illo illum cum earum fuga id autem, inventore voluptatibus recusandae, voluptatum distinctio veritatis, ducimus repellat enim!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate totam eos debitis necessitatibus natus ipsa, possimus reiciendis quaerat. Harum sit ducimus voluptatum, id quia fuga, sequi tempore perferendis veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci expedita eum fugit culpa corporis laborum perferendis, magnam iure! Et voluptatem iste aperiam perspiciatis modi officia necessitatibus, veritatis quasi aliquam quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis architecto voluptas unde expedita labore, ipsa, vel, minus autem modi nisi quo ab esse pariatur voluptatibus tempora! Enim nihil, eum officiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi repellat omnis magnam recusandae necessitatibus optio, nostrum perferendis assumenda, culpa. Tenetur amet at temporibus unde ratione quaerat eos quam iusto. Deserunt.Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolores aperiam error, odit quas illo illum cum earum fuga id autem, inventore voluptatibus recusandae, voluptatum distinctio veritatis, ducimus repellat enim!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate totam eos debitis necessitatibus natus ipsa, possimus reiciendis quaerat. Harum sit ducimus voluptatum, id quia fuga, sequi tempore perferendis veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci expedita eum fugit culpa corporis laborum perferendis, magnam iure! Et voluptatem iste aperiam perspiciatis modi officia necessitatibus, veritatis quasi aliquam quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis architecto voluptas unde expedita labore, ipsa, vel, minus autem modi nisi quo ab esse pariatur voluptatibus tempora! Enim nihil, eum officiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi repellat omnis magnam recusandae necessitatibus optio, nostrum perferendis assumenda, culpa. Tenetur amet at temporibus unde ratione quaerat eos quam iusto. Deserunt.Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolores aperiam error, odit quas illo illum cum earum fuga id autem, inventore voluptatibus recusandae, voluptatum distinctio veritatis, ducimus repellat enim!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur cupiditate totam eos debitis necessitatibus natus ipsa, possimus reiciendis quaerat. Harum sit ducimus voluptatum, id quia fuga, sequi tempore perferendis veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci expedita eum fugit culpa corporis laborum perferendis, magnam iure! Et voluptatem iste aperiam perspiciatis modi officia necessitatibus, veritatis quasi aliquam quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis architecto voluptas unde expedita labore, ipsa, vel, minus autem modi nisi quo ab esse pariatur voluptatibus tempora! Enim nihil, eum officiis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi repellat omnis magnam recusandae necessitatibus optio, nostrum perferendis assumenda, culpa. Tenetur amet at temporibus unde ratione quaerat eos quam iusto. Deserunt.Lorem ipsum dolor sit , consectetur adipisicing elit. Voluptas saepe porro eveniet cum minima error obcaecati est qui ex ea eligendi omnis molestiae consequuntur voluptates, ullam commodi praesentium et.</p>
+
−
+
−
<div class="Apacite">
+
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">Altan A et al. (2020)</p>
+
−
<span class="cite">
+
−
<h3>Referencia</h3>
+
−
<p>[3] Altan, A., & Karasu, S. (2020). Recognition of COVID-19 disease from X-ray images by hybrid model consisting of 2D curvelet transform, chaotic salp swarm algorithm and deep learning technique. Chaos, Solitons and Fractals, 140, 110071. https://doi.org/10.1016/j.chaos.2020.110071</p>
+
−
</span>
+
 
</div>
 
</div>
−
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.3rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid modi, hic illo? Saepe necessitatibus, vero quaerat aliquam minus qui. Eveniet aperiam illum praesentium eaque enim? Ipsam labore mollitia quos, atque?</p>
+
<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">
 
 
−
<br id="final">
 
 
</div>
 
</div>
−
</div>
+
          </div>
−
+
         
−
</div>
+
      <div class="overlay_container landing_image_div"></div>
−
<div class="menu_lateral" id="menu_lateral">
+
      <section class="content">
−
<ul style="list-style: none; margin: 0; padding: 0;">
+
        <header>
−
<li style="margin-top: 1rem; cursor: default; font-weight: bold; font-size: 1.7rem; font-family: Nunito, Times; border-bottom: 2.5px solid #000">
+
          <center>
−
<center>Index</center></li>
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
<li id="to1" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Primer Título</li>
+
              Detecting compounds in an easy, fast and affordable manner:
−
<li id="to2" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Trabajo en laboratorio sobre</li>
+
            </h1>
−
<li id="to3" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Tercer Título</li>
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
<li id="to4" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Cuarto Título</li>
+
              Disrupting Disruptors. An Endocrine Disrupting Chemicals
−
<li id="to5" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Quinto Título</li>
+
            </h1>
−
</ul>
+
            <h1 style="padding-bottom: 20px; font-family: 'Nunito', Times">
−
<div style="align-self: center; border-radius: 100rem; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);">
+
              sensing device
−
<img src="https://static.igem.org/mediawiki/2021/1/1c/T--TecCEM--logo.png" style = "width: 100%" alt="TecCEM logo">
+
            </h1>
−
</div>
+
            <h5 style="font-size: 18px; font-weight: normal">
−
+
              <strong>Key Concepts:</strong> Microplastics, Endocrine Disruptive
−
</div>
+
              Chemicals (EDCs), Biosensor, Human Estrogen Receptor (hER⍺, ESR1),
−
<div class="tips">
+
              Piezoelectric Sensor.
−
<img src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--idea.png" style="width: 25%; display: inline-block" alt="idea">
+
            </h5>
−
<h4 style="display: inline-block; font-family: Nunito; font-size: 1.5rem">Tips</h4>
+
          </center>
−
<p style="padding: 0; margin: 0; display: inline; font-family: Roboto">Hover the references</p>
+
        </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>
  
−
</div>
+
    <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,
 +
          },
 +
        ],
 +
      };
  
−
<!--------------------- BREAKS FOR FOOTER TEMPLATE ---------------------->
+
      const dropPath3 = {
−
<br><br><br><br>
+
        curviness: 0.2,
−
<br><br><br><br>
+
        autoRotate: false,
−
<br><br><br><br>
+
        values: [
−
<br><br>
+
          {
 +
            x: 0,
 +
            y: 285,
 +
          },
 +
          {
 +
            x: -850,
 +
            y: 285,
 +
          },
 +
          {
 +
            x: -850,
 +
            y: 510,
 +
          },
 +
        ],
 +
      };
  
−
</body>
+
      const tween1 = new TimelineLite();
  
−
</html>
+
      tween1.add(
 +
        TweenLite.to(".drop_1", 5, {
 +
          bezier: dropPath1,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
−
{{TecCEM/Footer}}
+
      const tween2 = new TimelineLite();
  
−
<html>
+
      tween2.add(
−
<style>
+
        TweenLite.to(".drop_2", 5, {
−
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
+
          bezier: dropPath2,
−
.tips{
+
          ease: Power1.easeInOut,
−
display: flex;
+
        })
−
transition: transform 0.6s ease-out;
+
      );
−
flex-wrap: wrap;
+
−
width: 10%;
+
−
background: #FDEBC5;
+
−
border-radius: 2rem;
+
−
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+
−
justify-content: center;
+
−
align-content: center;
+
−
align-items: center;
+
−
max-height: 45rem;
+
−
position: fixed;
+
−
top: 15%;
+
−
margin-left: 2rem;
+
−
padding: 1rem;
+
−
right: 25px;
+
−
/*transform: translateX(-150%) translateY(0);*/
+
−
+
−
}
+
−
.menu_lateral_hidden{
+
−
transform: translateX(0%) translateY(0);
+
−
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
+
−
100 - 35 + 20 = 85
+
−
*/
+
−
}
+
−
+
−
h1{
+
−
font-family: "Hoefler Text", "Liberation Serif", "Times New Roman", "serif";
+
−
font-size: 1.3rem;
+
−
}
+
−
h2, h3{
+
−
border-left: 4px solid #CDECA9;
+
−
border-right: 4px solid #CDECA9;
+
−
display: inline-block;
+
−
width: 100%;
+
−
min-height: 50px;
+
  
−
text-align: center;
+
      const tween3 = new TimelineLite();
−
color: #45ACFF;
+
−
}
+
−
+
−
.txt{
+
−
text-align: justify;
+
−
  text-justify: inter-word;
+
−
}
+
−
.survey{
+
−
display: flex;
+
−
align-content: center;
+
−
justify-content: center;
+
−
align-items: center;
+
−
}
+
−
body{
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
.Imagen_principal{
+
−
display: flex;
+
−
align-content: center;
+
−
justify-content: center;
+
−
align-items: center;
+
−
width: 100vw;
+
−
height: 100vh;
+
−
}
+
−
.Imagen_principal > img{
+
−
width: 100vw;
+
−
height: 100%;
+
−
}
+
−
.Titulo{
+
−
position: absolute;
+
−
background: white;
+
−
padding: 1rem;
+
−
border-radius: 1rem;
+
−
z-index: 10;
+
−
}
+
−
.Titulo > h1{
+
−
display: inline;
+
−
opacity: 1;
+
−
font-size: 4rem;
+
−
}
+
−
.Difuminado{
+
−
width: 100vw;
+
−
height: 100vh;
+
−
position: absolute;
+
−
z-index: 9;
+
−
background: white;
+
−
opacity: .4;
+
−
}
+
−
.cuerpo_principal{
+
−
display: flex;
+
−
flex-direction: row;
+
−
width: 100vw;
+
−
}
+
−
.menu_lateral{
+
−
display: flex;
+
−
transition: transform 0.6s ease-out;
+
−
+
−
flex-wrap: wrap;
+
−
width: 10%;
+
−
justify-content: center;
+
−
align-content: center;
+
−
align-items: center;
+
−
max-height: 45rem;
+
−
position: fixed;
+
−
top: 10%;
+
−
margin-left: 2rem;
+
−
padding: 1rem;
+
−
transform: translateX(-150%) translateY(0);
+
−
+
−
}
+
−
.menu_lateral_hidden{
+
−
transform: translateX(0%) translateY(0);
+
−
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
+
−
100 - 35 + 20 = 85
+
−
*/
+
−
}
+
−
.Espacio_menu_lateral{
+
−
width: 17%;
+
−
}
+
−
.menu_lateral li{
+
−
margin-bottom: 1rem;
+
−
cursor: pointer;
+
−
transition: all 0.4s ease-out;
+
−
+
−
}
+
−
.menu_section:hover{
+
−
transform: translateX(10%) translateY(0);
+
−
text-decoration: underline;
+
−
}
+
−
.sobresalirmenu{
+
−
transform: translateX(10%) translateY(0);
+
−
text-decoration: underline;
+
−
}
+
−
.Texto{
+
−
width: 65%;
+
−
padding: 1rem;
+
−
justify-content: center;
+
−
display: flex;
+
−
flex-direction: column;
+
−
align-items: center;
+
−
display: inline;
+
−
+
−
}
+
−
.Texto h2{
+
−
align-self: left;
+
−
}
+
−
+
−
.Texto p {
+
−
text-align: justify;
+
−
display: inline;
+
−
}
+
−
+
−
.Texto img{
+
−
width: 70%;
+
−
max-height: 500px;
+
−
}
+
−
+
−
.Caption{
+
−
width: 70%;
+
−
}
+
−
html, body {
+
−
    height: 100vh;
+
−
}
+
−
.cite{
+
−
position: absolute;
+
−
bottom: 55px;
+
−
width: 500px;
+
−
background: #fff;
+
−
padding: 20px;
+
−
box-sizing: border-box;
+
−
box-shadow: 6px 4px 4px 4px rgba(0, 0, 0, 0.2);
+
−
visibility: hidden;
+
−
opacity: 0;
+
−
border-radius: 20px;
+
−
transition: 0.5s;
+
−
transform: translateX(-50%) translateY(50px)
+
−
}
+
−
.Apacite:hover .cite{
+
−
visibility: visible;
+
−
opacity: 1;
+
−
transform: translateX(-50%) translateY(0px);
+
−
z-index: 99999;
+
−
+
−
}
+
−
.Apacite {
+
−
  position: relative;
+
−
display: inline;
+
−
transition: 0.5s;
+
−
cursor: pointer;
+
−
width: auto;
+
−
}
+
−
.Apacite:hover{
+
−
text-decoration: underline;
+
−
}
+
−
+
−
</style>
+
−
+
−
<script>
+
  
 +
      tween3.add(
 +
        TweenLite.to(".drop_3", 5, {
 +
          bezier: dropPath3,
 +
          ease: Power1.easeInOut,
 +
        })
 +
      );
  
−
function getElementY(query) {
+
      const controller = new ScrollMagic.Controller();
−
  return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
+
−
}
+
  
−
function doScrolling(element, duration) {
+
      const scene1 = new ScrollMagic.Scene({
−
var startingY = window.pageYOffset + 50
+
        triggerElement: ".animation_1",
−
  var elementY = getElementY(element)
+
        duration: 1000,
−
  // If element is close to page's bottom then window will scroll only to some position above the element.
+
        triggerHook: 0,
−
  var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
+
      })
−
var diff = targetY - startingY
+
        .setTween(tween1)
−
  // Easing function: easeInOutCubic
+
        .setPin(".animation_1")
−
  // From: https://gist.github.com/gre/1650294
+
        .addTo(controller);
−
  var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
+
−
  var start
+
  
−
  if (!diff) return
+
      const scene2 = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_2",
 +
        duration: 1000,
 +
        triggerHook: 0,
 +
      })
 +
        .setTween(tween2)
 +
        .setPin(".animation_2")
 +
        .addTo(controller);
  
−
// Bootstrap our animation - it will get called right before next frame shall be rendered.
+
      const scene3 = new ScrollMagic.Scene({
−
window.requestAnimationFrame(function step(timestamp) {
+
        triggerElement: ".animation_3",
−
    if (!start) start = timestamp
+
        duration: 1000,
−
    // Elapsed miliseconds since start of scrolling.
+
        triggerHook: 0,
−
    var time = timestamp - start
+
      })
−
// Get percent of completion in range [0, 1].
+
        .setTween(tween3)
−
    var percent = Math.min(time / duration, 1)
+
        .setPin(".animation_3")
−
    // Apply the easing.
+
        .addTo(controller);
−
    // It can cause bad-looking slow frames in browser performance tool, so be careful.
+
−
    percent = easing(percent)
+
  
−
    window.scrollTo(0, startingY + diff * percent - 50)
+
      const datos = new ScrollMagic.Scene({
 +
        triggerElement: ".animation_1",
 +
      })
 +
        .setClassToggle(".datos", "show")
 +
        .addTo(controller);
  
−
// Proceed with animation as long as we wanted it to.
+
      const problematica = new ScrollMagic.Scene({
−
    if (time < duration) {
+
        triggerElement: ".animation_1",
−
      window.requestAnimationFrame(step)
+
      })
−
    }
+
        .setClassToggle(".problematica", "show")
−
+
        .addTo(controller);
−
  })
+
−
console.log(elementY)
+
−
}
+
  
−
// Apply event handlers. Example of firing the scrolling mechanism.
+
      const deteccion = new ScrollMagic.Scene({
−
document.getElementById('to1').addEventListener('click', doScrolling.bind(null, '#primer', 1000))
+
        triggerElement: ".animation_2",
−
document.getElementById('to2').addEventListener('click', doScrolling.bind(null, '#segundo', 1000))
+
      })
−
document.getElementById('to3').addEventListener('click', doScrolling.bind(null, '#tercero', 1000))
+
        .setClassToggle(".deteccion", "show")
−
document.getElementById('to4').addEventListener('click', doScrolling.bind(null, '#cuarto', 1000))
+
        .addTo(controller);
−
document.getElementById('to5').addEventListener('click', doScrolling.bind(null, '#quinto', 1000))
+
−
</script>
+
−
<script>
+
−
$(window).scroll(function(){
+
−
  if($(document).scrollTop() > 650){
+
−
document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden");
+
−
  }else{
+
−
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
+
−
  }
+
−
});
+
−
</script>
+
−
<script>
+
−
$(window).scroll(function(){
+
−
var f = $(document).scrollTop();
+
−
                var pri = getElementY("#primer")-52
+
−
var seg = getElementY("#segundo")-52;
+
−
var ter =  getElementY("#tercero")-52;
+
−
var cuar = getElementY("#cuarto")-52;
+
−
var quin =  getElementY("#quinto")-52;
+
−
var final =  getElementY("#final")-250;
+
−
if(f >= pri){
+
−
if(f >= seg){
+
−
if(f >= ter){
+
−
if(f >= cuar){
+
−
if(f>=quin){
+
−
if(f>=final){
+
−
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
+
−
console.log("Debería de esconderlo");
+
−
}else{
+
−
console.log("quinta");
+
−
document.querySelector("#to5").classList.add("sobresalirmenu");
+
−
document.querySelector("#to4").classList.remove("sobresalirmenu");
+
−
}
+
−
//.sobresalirmenu
+
−
}else{
+
−
console.log("cuarta");
+
−
document.querySelector("#to3").classList.remove("sobresalirmenu");
+
−
document.querySelector("#to4").classList.add("sobresalirmenu");
+
−
document.querySelector("#to5").classList.remove("sobresalirmenu");
+
−
}
+
−
}else{
+
−
console.log("tercera");  
+
−
document.querySelector("#to3").classList.add("sobresalirmenu");
+
−
document.querySelector("#to2").classList.remove("sobresalirmenu");
+
−
document.querySelector("#to4").classList.remove("sobresalirmenu");
+
−
}
+
−
}else{
+
−
console.log("Segunda");  
+
−
document.querySelector("#to2").classList.add("sobresalirmenu");
+
−
document.querySelector("#to3").classList.remove("sobresalirmenu");
+
−
document.querySelector("#to1").classList.remove("sobresalirmenu");
+
−
}
+
−
  }else{
+
−
console.log("Primera sección");  
+
−
  document.querySelector("#to1").classList.add("sobresalirmenu");
+
−
document.querySelector("#to2").classList.remove("sobresalirmenu");
+
−
  }
+
−
}  
+
−
});
+
  
−
</script>
+
      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”.