Difference between revisions of "Team:Ecuador/Background"

(Blanked the page)
Line 1: Line 1:
{{Ecuador}}
 
<html>
 
<style>
 
  
@import url('https://fonts.googleapis.com/css?family=Raleway');
 
  *{
 
      margin: 0px;
 
      font-family: 'Raleway', sans-serif;
 
  }
 
    @keyframes slide-in {
 
      from {
 
        margin-left: -100%;
 
        border-bottom-right-radius: 30px;
 
        border-top-right-radius: 30px;
 
      }
 
 
      to {
 
        margin-left: 0%;
 
        border-bottom-right-radius: 0;
 
        border-top-right-radius: 0px;
 
      }
 
    }
 
 
    @keyframes slide-in-menu {
 
      from {
 
        margin-left: -120%;
 
        border-bottom-right-radius: 30px;
 
        border-top-right-radius: 30px;
 
        opacity: 0.5;
 
      }
 
 
      to {
 
        margin-left: 0%;
 
        border-bottom-right-radius: 0;
 
        border-top-right-radius: 0px;
 
        opacity: 1;
 
      }
 
    }
 
 
    @keyframes fade-in {
 
      from {
 
        opacity: 0;
 
      }
 
 
      to {
 
        opacity: 1;
 
      }
 
    }
 
    @keyframes slide-in-oposite {
 
      from {
 
        margin-left: 100%;
 
      }
 
 
      to {
 
        margin-left: 0%;
 
      }
 
    }
 
 
    @keyframes slide-in-oposite-chooser {
 
      from {
 
        right: -50px;
 
      }
 
 
      to {
 
        right: 50px;
 
      }
 
    }
 
 
    @keyframes slide-in-up {
 
      from {
 
        margin-top: 100%;
 
      }
 
 
      to {
 
        margin-left: 0%;
 
      }
 
    }
 
 
    @keyframes slide-in-up-oposite {
 
      from {
 
        margin-top: -100%;
 
      }
 
 
      to {
 
        margin-left: 0%;
 
      }
 
    }
 
 
    .igem_2018_team_menu.displaying_menu {
 
      display: none;
 
    }
 
    .ecuador_menu {
 
      font-size: 14px;
 
      width: 100%;
 
      height: 80px;
 
      position: fixed;
 
      left: 0px;
 
      top: 15px;
 
      background-color: #2471A3;
 
      animation-name: fade-in;
 
      animation-duration: 2s;
 
      -webkit-box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.75);
 
      -moz-box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.75);
 
      box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.75);
 
      display: flex;
 
      z-index: 5;
 
    }
 
 
    .ecuador_home {
 
      width: 16%;
 
      height: 100%;
 
      display: flex;
 
      justify-content: center;
 
      background-color: #1F618D;
 
      position: absolute;
 
      align-items: center;
 
      margin: auto auto;
 
      left: 1.5%;
 
      color: #FFF;
 
      transition: 0.5s;
 
      -webkit-box-shadow: inset -50px -42px 114px -30px rgba(0,0,0,0.75);
 
      -moz-box-shadow: inset -50px -42px 114px -30px rgba(0,0,0,0.75);
 
      box-shadow: inset -50px -42px 114px -30px rgba(0,0,0,0.75);
 
      z-index: 10;
 
    }
 
 
    .ecuador_home:hover {
 
      cursor: pointer;
 
      font-size: 16px;
 
      background-color: #1A5276;
 
      box-shadow: none;
 
    }
 
 
    .menu_options_container {
 
      width: 79%;
 
      height: 50px;
 
      position: absolute;
 
      left: 19%;
 
      top: 15px;
 
      display: flex;
 
      justify-content: center;
 
    }
 
 
    .menu_option {
 
      width: 14.28%;
 
      height: 100%;
 
      position: relative;
 
      justify-content: center;
 
      align-items: center;
 
      display: flex;
 
      color: #FFFFFF;
 
      transition: 0.2s;
 
      text-align: center;
 
    }
 
 
    #project {
 
      animation-name: slide-in-up-oposite;
 
      animation-duration: 0.5s;
 
      animation-delay: 0.5s;
 
      animation-fill-mode: backwards;
 
      position: absolute;
 
      left: 0%;
 
      z-index: 9;
 
    }
 
 
    #people {
 
      animation-name: slide-in-up-oposite;
 
      animation-duration: 0.5s;
 
      animation-delay: 0.6s;
 
      animation-fill-mode: backwards;
 
      position: absolute;
 
      left: 14.28%;
 
      z-index: 9;
 
    }
 
 
    #notebook {
 
      animation-name: slide-in-up-oposite;
 
      animation-duration: 0.5s;
 
      animation-delay: 0.7s;
 
      animation-fill-mode: backwards;
 
      position: absolute;
 
      left: 28.56%;
 
      z-index: 9;
 
    }
 
 
    #human_practice {
 
      animation-name: slide-in-up-oposite;
 
      animation-duration: 0.5s;
 
      animation-delay: 0.8s;
 
      animation-fill-mode: backwards;
 
      position: absolute;
 
      left: 42.84%;
 
      z-index: 9;
 
    }
 
 
    #parts {
 
      animation-name: slide-in-up-oposite;
 
      animation-duration: 0.5s;
 
      animation-delay: 0.9s;
 
      animation-fill-mode: backwards;
 
      position: absolute;
 
      left: 57.12%;
 
      z-index: 9;
 
    }
 
 
    #safety {
 
      animation-name: slide-in-up-oposite;
 
      animation-duration: 0.5s;
 
      animation-delay: 1s;
 
      animation-fill-mode: backwards;
 
      position: absolute;
 
      left: 71.40%;
 
      z-index: 9;
 
    }
 
 
    #interlab {
 
      animation-name: slide-in-up-oposite;
 
      animation-duration: 0.5s;
 
      animation-delay: 1.1s;
 
      animation-fill-mode: backwards;
 
      position: absolute;
 
      left: 85.68%;
 
      z-index: 9;
 
    }
 
 
    .ecuador_href_text {
 
      width: 14.28% !important;
 
      height: 100% !important;
 
      position: relative !important;
 
      justify-content: center !important;
 
      align-items: center !important;
 
      display: flex !important;
 
      color: #FFFFFF !important;
 
      transition: 0.2s !important;
 
      text-align: center !important;
 
      text-decoration: none !important;
 
    }
 
 
    .ecuador_href_sub_text {
 
      width: 100% !important;
 
      height: 40px !important;
 
      position: relative !important;
 
      text-align: left !important;
 
      text-indent: 20px !important;
 
      display: flex !important;
 
      background-color: #000 !important;
 
      margin: auto auto !important;
 
      align-items: center !important;
 
      transition: 0.2s !important;
 
      color: #D5DBDB !important;
 
      text-decoration: none !important;
 
    }
 
 
    .menu_option:hover {
 
      margin-top: 3px;
 
      cursor: pointer;
 
    }
 
 
    .menu_option:hover div.menu_sub_options_container{
 
      display: block;
 
    }
 
 
    .menu_sub_options_container {
 
      width: 90%;
 
      height: auto;
 
      position: absolute;
 
      top: 50px;
 
      display: none;
 
    }
 
 
    .sub_menu_option {
 
      width: 100%;
 
      height: 40px;
 
      position: relative;
 
      text-align: left;
 
      text-indent: 20px;
 
      display: flex;
 
      background-color: #000;
 
      margin: auto auto;
 
      align-items: center;
 
      transition: 0.2s;
 
      color: #D5DBDB;
 
    }
 
 
    .sub_menu_option:hover {
 
      text-indent: 25px;
 
      background-color: #2E86C1;
 
    }
 
 
    .ecuador_footer {
 
      width: 100%;
 
      height: 250px;
 
      position: absolute;
 
      left: 0px;
 
      top: 1290px;
 
      background-color: #212F3C;
 
    }
 
 
    .ecuador_footer_igem_logo {
 
      width: 180px;
 
      height: 180px;
 
      position: absolute;
 
      right: 80px;
 
      top: 35px;
 
      background-image: url(https://static.igem.org/mediawiki/2018/5/55/T--Ecuador--iGEM--Logo--Black.png);
 
      background-size: 100%;
 
      background-repeat: no-repeat;
 
      background-position: center;
 
    }
 
 
    .ecuador_footer_information_layout {
 
      width: 75%;
 
      height: 80%;
 
      position: absolute;
 
      left: 60px;
 
      top: 15%;
 
      display: flex;
 
    }
 
 
    .ecuador_footer_information_container {
 
      width: 33.33%;
 
      height: 100%;
 
      position: relative;
 
    }
 
 
    .ecuador_footer_information_title_container {
 
      width: 100%;
 
      height: 25px;
 
      position: relative;
 
      top: 0px;
 
      text-align: center;
 
      font-size: 20px;
 
      font-weight: bold;
 
      color: #B2BABB;
 
    }
 
 
    .ecuador_follow_us_icons_container {
 
      width: 50%;
 
      height: 60px;
 
      position: relative;
 
      top: 40px;
 
      margin: auto;
 
      display: flex;
 
    }
 
 
    .ecuador_follow_us_icon {
 
      width: 60px;
 
      height: 60px;
 
      position: relative;
 
      margin: auto;
 
    }
 
 
    #facebook {
 
      background-image: url(https://static.igem.org/mediawiki/2018/4/42/T--Ecuador--Facebook.png);
 
      background-repeat: no-repeat;
 
      background-position: center;
 
      background-size: 80%;
 
      transition: 0.4s;
 
      border-radius: 5px;
 
    }
 
 
    #facebook:hover {
 
      background-image: url(https://static.igem.org/mediawiki/2018/4/40/T--Ecuador--Facebook--White.png);
 
      cursor: pointer;
 
    }
 
 
    #instagram {
 
      background-image: url(https://static.igem.org/mediawiki/2018/9/90/T--Ecuador--Instagram.png);
 
      background-repeat: no-repeat;
 
      background-position: center;
 
      background-size: 80%;
 
      transition: 0.4s;
 
      border-radius: 5px;
 
    }
 
 
    #instagram:hover {
 
      background-image: url(https://static.igem.org/mediawiki/2018/4/49/T--Ecuador--Instagram--White.png);
 
      cursor: pointer;
 
    }
 
 
    /*Background*/
 
 
    .ecuador_background_container {
 
      width: 100%;
 
      height: 600px;
 
      position: absolute;
 
      left: 0px;
 
      top: 110px;
 
      background-color: #F8F9F9;
 
      display: block;
 
    }
 
 
    .ecuador_background_title_cotainer {
 
      width: 100%;
 
      height: 70px;
 
      position: absolute;
 
      color: #141515;
 
      font-size: 70px;
 
      font-weight: 500;
 
      display: flex;
 
      justify-content: center;
 
      align-items: center;
 
      animation-name: fade-in;
 
      animation-duration: 1.5s;
 
      animation-fill-mode: backwards;
 
      animation-delay: 0.5s;
 
      display: none;
 
      top: 40px;
 
    }
 
 
    .ecuador_background_team_main_cotainer {
 
      width: 100%;
 
      height: auto;
 
      position: relative;
 
      top: 60px;
 
      display: flex;
 
      transition: 2s;
 
    }
 
 
    .ecuador_background_team_logo {
 
      width: 55%;
 
      position: relative;
 
      height: 300px;
 
      background-image: url(https://static.igem.org/mediawiki/2018/b/bf/T--Ecuador--Clastin--logo.png);
 
      background-position: center;
 
      background-size: 100%;
 
      background-repeat: no-repeat;
 
      margin-left: 3%;
 
      margin-top: -1%;
 
      animation-name: fade-in;
 
      animation-duration: 2.5s;
 
      animation-fill-mode: backwards;
 
      animation-delay: 1.25s;
 
    }
 
 
    #igem{
 
      animation-name: fade-in;
 
      animation-duration: 0.75s;
 
      animation-fill-mode: backwards;
 
      animation-delay: 0.5s;
 
      transition: 0.5s;
 
    }
 
 
    #team{
 
      animation-name: fade-in;
 
      animation-delay: 0.75s;
 
      animation-duration: 0.5s;
 
      animation-fill-mode: backwards;
 
      transition: 0.5s;
 
    }
 
 
    #ecuador {
 
      animation-name: fade-in;
 
      animation-delay: 1s;
 
      animation-duration: 0.5s;
 
      animation-fill-mode: backwards;
 
      transition: 0.5s;
 
    }
 
 
    .ecuador_background_team_text_cotainer {
 
      width: 37%;
 
      height: auto;
 
      position: relative;
 
      transition: 0.5s;
 
    }
 
 
    .ecuador_background_team_title_text_cotainer {
 
      text-indent: 10%;
 
      height: 100px;
 
      font-size: 800%;
 
      text-align: justify;
 
      text-align: right;
 
      color: #333333;
 
    }
 
 
    .take_a_look_button_container {
 
      width: 100%;
 
      height: 60px;
 
      position: relative;
 
      margin-top: 90px;
 
    }
 
 
    .take_a_look_button {
 
      width: 15%;
 
      height: 60px;
 
      position: relative;
 
      background-color: #333333;
 
      margin: auto;
 
      color: #FFF;
 
      text-align: center;
 
      align-items: center;
 
      justify-content: center;
 
      display: flex;
 
      font-size: 140%;
 
      transition: 0.4s;
 
      animation-name: fade-in;
 
      animation-duration: 1.5s;
 
      animation-fill-mode: backwards;
 
      animation-delay: 1.5s;
 
    }
 
 
    .take_a_look_button:hover {
 
      -webkit-box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      -moz-box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      cursor: pointer;
 
    }
 
 
    .ecuador_background_logo {
 
      width: 100%;
 
      height: auto;
 
      display: block;
 
      justify-content: center;
 
      padding-top: 2%;
 
    }
 
 
    .ecuador_background_logo_container{
 
      width: 450px;
 
      height: 450px;
 
      position: relative;
 
      animation-name: fade-in;
 
      animation-duration: 3s;
 
      margin: auto;
 
      background-image: url(https://static.igem.org/mediawiki/2018/9/94/T--Ecuador--Background--Logo.png);
 
      background-position: center;
 
      background-size: 90%;
 
      background-repeat: no-repeat;
 
      transition: 0.5s;
 
      margin-top: -20px;
 
      display: none;
 
    }
 
 
    .ecuador_background_logo_container:hover{
 
      background-size: 99%;
 
      cursor: pointer;
 
      transition: 0.5s;
 
    }
 
 
    .ecuador_background_phases{
 
      width: 100%;
 
      height: 60%;
 
      display: flex;
 
      position: absolute;
 
      align-self: center;
 
      top: 160px;
 
      display: none;
 
      margin: auto;
 
      overflow-x: hidden;
 
      overflow-y: hidden;
 
      transition: 0.5s;
 
    }
 
 
    .ecuador_backgound_phase {
 
      width: 25%;
 
      height: 100%;
 
      position: absolute;
 
      left: 7%;
 
      border-radius: 1%;
 
      transition: 0.2s;
 
    }
 
 
    .ecuador_backgound_phase:hover{
 
      -webkit-box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      -moz-box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      cursor: pointer;
 
    }
 
 
    .ecuador_background_phase_title {
 
      width: 100%;
 
      height: 25px;
 
      color: #1A1A1A;
 
      font-size: 20px;
 
      font-weight: 600;
 
      justify-content: center;
 
      margin: auto;
 
 
      margin-top: 15px;
 
      text-align: center;
 
    }
 
 
    #phase_1 {
 
      background-color: #EB984E;
 
      animation-name: slide-in;
 
      animation-duration: 0.75s;
 
    }
 
 
    #phase_2 {
 
      background-color: #00A99D;
 
      animation-name: slide-in-up;
 
      animation-duration: 0.75s;
 
      left: 37.5%;
 
      animation-delay: 0.5s;
 
      animation-fill-mode: backwards;
 
    }
 
 
    #phase_3 {
 
      background-color: #3498DB;
 
      animation-name: slide-in-oposite;
 
      animation-duration: 0.75s;
 
      left: 67.5%;
 
      animation-delay: 1s;
 
      animation-fill-mode: backwards;
 
    }
 
 
    .ecuador_background_phase_logo {
 
      width: 64px;
 
      height: 64px;
 
      position: absolute;
 
      bottom: 0px;
 
      margin-bottom: 5px;
 
      margin-left: 5px;
 
    }
 
 
    #phase_1_logo{
 
      background-image: url(https://static.igem.org/mediawiki/2018/0/0c/T--Ecuador--Phase--1--black.png);
 
      background-position: 5px -2px;
 
      background-repeat: no-repeat;
 
      background-size: 100%;
 
    }
 
 
    #phase_2_logo{
 
      background-image: url(https://static.igem.org/mediawiki/2018/9/9f/T--Ecuador--Phase--2--black.png);
 
      background-position: center;
 
      background-repeat: no-repeat;
 
      background-size: 80%;
 
    }
 
 
    #phase_3_logo{
 
      background-image: url(https://static.igem.org/mediawiki/2018/5/59/T--Ecuador--Phase--3--black.png);
 
      background-position: center;
 
      background-repeat: no-repeat;
 
      background-size: 65%;
 
    }
 
 
    .ecuador_background_separator_1 {
 
      width: 100%;
 
      height: 140px;
 
    }
 
 
    .ecuador_backgound_phase_more {
 
      position: absolute;
 
      left: 80%;
 
      width: auto;
 
      height: auto;
 
      color: #1A1A1A;
 
      font-size: 20px;
 
      bottom: 7.5%;
 
    }
 
 
    .phase_menu_chooser {
 
      width: 80px;
 
      height: auto;
 
      position: fixed;
 
      right: 50px;
 
      top: 130px;
 
      z-index: 5;
 
      display: none;
 
      animation-name: slide-in-oposite-chooser;
 
      animation-duration: 0.5s;
 
    }
 
 
    .phase_menu_option {
 
      width: 100%;
 
      height: 80px;
 
      position: relative;
 
      border-radius: 100%;
 
      margin-top: 5%;
 
      transition: 0.5s;
 
      opacity: 0.9;
 
    }
 
 
    .phase_menu_option:hover {
 
      -webkit-box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      -moz-box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      box-shadow: 1px 1px 16px -1px rgba(0,0,0,0.75);
 
      cursor: pointer;
 
      opacity: 1;
 
    }
 
 
    #phase_1_menu_option {
 
      background-color: #EB984E;
 
      background-image: url(https://static.igem.org/mediawiki/2018/0/0c/T--Ecuador--Phase--1--black.png);
 
      background-position: 10px 11px;
 
      background-repeat: no-repeat;
 
      background-size: 80%;
 
    }
 
 
    #phase_2_menu_option {
 
      background-color: #00A99D;
 
      background-image: url(https://static.igem.org/mediawiki/2018/9/9f/T--Ecuador--Phase--2--black.png);
 
      background-position: center;
 
      background-repeat: no-repeat;
 
      background-size: 70%;
 
    }
 
 
    #phase_3_menu_option {
 
      background-color: #3498DB;
 
      background-image: url(https://static.igem.org/mediawiki/2018/5/59/T--Ecuador--Phase--3--black.png);
 
      background-position: 14px 12px;
 
      background-repeat: no-repeat;
 
      background-size: 60%;
 
    }
 
 
    .phase_1_main_container {
 
      width: 100%;
 
      position: absolute;
 
      height: 500px;
 
      top: 150px;
 
      display: none;
 
      transition: 0.5s;
 
      animation-name: slide-in;
 
      animation-duration: 0.5s;
 
    }
 
 
    .phase_2_main_container {
 
      width: 100%;
 
      position: absolute;
 
      height: 500px;
 
      top: 150px;
 
      display: none;
 
      transition: 0.5s;
 
      animation-name: slide-in;
 
      animation-duration: 0.5s;
 
    }
 
 
    .phase_3_main_container {
 
      width: 100%;
 
      position: absolute;
 
      height: 500px;
 
      top: 150px;
 
      display: none;
 
      transition: 0.5s;
 
      animation-name: slide-in;
 
      animation-duration: 0.5s;
 
    }
 
 
    .ecuador_phase_summary {
 
      width: 90%;
 
      height: 65%;
 
      position: relative;
 
      left: 5%;
 
      top: 1.5%;
 
      color: #1A1A1A;
 
      font-size: 18px;
 
      text-align: justify;
 
    }
 
 
    .ecuador_phase_subtitle {
 
      font-weight: 600;
 
      color: #1A1A1A;
 
    }
 
 
    @media only screen and (max-device-width: 600px) {
 
      .menu_options_container {
 
          display: none;
 
      }
 
    }
 
 
    @media only screen and (max-width: 600px) {
 
      .menu_options_container {
 
          display: none;
 
      }
 
    }
 
 
  </style>
 
 
  <div class="ecuador_menu">
 
    <a href="https://2018.igem.org/Team:Ecuador">
 
      <div class="ecuador_home">
 
        iGEM ECUADOR
 
      </div>
 
    </a>
 
    <div class="menu_options_container">
 
      <div id="project" class="menu_option">
 
        PROJECT
 
        <div class="menu_sub_options_container">
 
          <a class="ecuador_href_sub_text" href="https://2018.igem.org/Team:Ecuador/Description">
 
            <div class="sub_menu_option">
 
              OVERVIEW
 
            </div>
 
          </a>
 
          <a class="ecuador_href_sub_text" href="https://2018.igem.org/Team:Ecuador/Background">
 
            <div class="sub_menu_option">
 
              BACKGROUND
 
            </div>
 
          </a>
 
          <div class="sub_menu_option">
 
            MODELING
 
          </div>
 
          <div class="sub_menu_option">
 
            DESIGN
 
          </div>
 
        </div>
 
      </div>
 
      <div id="people" class="menu_option">
 
        PEOPLE
 
        <div class="menu_sub_options_container">
 
          <div class="sub_menu_option">
 
            SPONSIRING
 
          </div>
 
          <div class="sub_menu_option">
 
            ATTRIBUTIONS
 
          </div>
 
          <div class="sub_menu_option">
 
            TEAM
 
          </div>
 
        </div>
 
      </div>
 
      <div id="notebook" class="menu_option">
 
        NOTEBOOK
 
        <div class="menu_sub_options_container">
 
          <div class="sub_menu_option">
 
            LAB BOOK
 
          </div>
 
          <div class="sub_menu_option">
 
            PROTOCOLS
 
          </div>
 
        </div>
 
      </div>
 
      <div id="human_practice" class="menu_option">
 
        HUMAN PRACTICE
 
        <div class="menu_sub_options_container">
 
          <div class="sub_menu_option">
 
            COLLABORATIONS
 
          </div>
 
        </div>
 
      </div>
 
      <div id="parts" class="menu_option">
 
        PARTS
 
        <div class="menu_sub_options_container">
 
          <div class="sub_menu_option">
 
            LIST
 
          </div>
 
          <div class="sub_menu_option">
 
            COMPOSITE
 
          </div>
 
          <div class="sub_menu_option">
 
            BASIC
 
          </div>
 
        </div>
 
      </div>
 
      <div id="safety" class="menu_option">
 
        SAFETY
 
      </div>
 
      <div id="interlab" class="menu_option">
 
        <a class="ecuador_href_text" href="http://2018.iGEM.org/Team:Ecuador/Interlab">
 
          INTERLAB
 
        </a>
 
      </div>
 
    </div>
 
  </div>
 
  <div id="phase_menu_chooser" class="phase_menu_chooser">
 
    <div onclick="chosePhase(1)" id="phase_1_menu_option" class="phase_menu_option">
 
 
    </div>
 
    <div onclick="chosePhase(2)" id="phase_2_menu_option" class="phase_menu_option">
 
 
    </div>
 
    <div onclick="chosePhase(3)" id="phase_3_menu_option" class="phase_menu_option">
 
 
    </div>
 
  </div>
 
  <div class="ecuador_background_container">
 
    <div id="ecuador_background_title_cotainer" class="ecuador_background_title_cotainer">
 
      PROJECT BACKGROUND
 
    </div>
 
    <div id="ecuador_background_team_main_cotainer" class="ecuador_background_team_main_cotainer">
 
      <div id="ecuador_background_team_text_cotainer" class="ecuador_background_team_text_cotainer">
 
        <div id="igem" class="ecuador_background_team_title_text_cotainer">
 
          iGEM
 
        </div>
 
        <div id="team" class="ecuador_background_team_title_text_cotainer">
 
          TEAM
 
        </div>
 
        <div id="ecuador" class="ecuador_background_team_title_text_cotainer">
 
          ECUADOR
 
        </div>
 
      </div>
 
      <div id="ecuador_background_team_logo" class="ecuador_background_team_logo">
 
 
      </div>
 
    </div>
 
    <div class="take_a_look_button_container">
 
      <div id="take_a_look" class="take_a_look_button">
 
          TAKE A LOOK
 
      </div>
 
    </div>
 
    <div class="ecuador_background_logo">
 
      <div class="ecuador_background_logo_container" id="ecuador_background_logo_container">
 
 
      </div>
 
      <div class="ecuador_background_phases" id="ecuador_background_phases">
 
        <div onclick="chosePhase(1)" class="ecuador_backgound_phase" id="phase_1">
 
          <div class="ecuador_background_phase_title">
 
            PHASE 1 </br> BACTERIAL CELLULOSE
 
          </div>
 
          <div class="ecuador_phase_summary">
 
          </br>
 
          </br>
 
            Bacterial cellulose (BC) is a glucose polysaccharide that exhibits numerous properties such as unique nanostructure, high water holding capacity, high degree of polymerization, mechanical strength and high crystallinity </br>
 
            These properties clearly show that BC has tremendous potential and provide a promising future in various fie.
 
          </div>
 
          <div class="ecuador_background_phase_logo" id="phase_1_logo">
 
 
          </div>
 
          <div class="ecuador_backgound_phase_more">
 
            MORE
 
          </div>
 
        </div>
 
        <div  onclick="chosePhase(2)" class="ecuador_backgound_phase" id="phase_2">
 
          <div class="ecuador_background_phase_title">
 
            PHASE 2 </br> FUSION PROTEIN CBD-ELP-BMP2
 
          </div>
 
          <div class="ecuador_phase_summary">
 
          </br>
 
          </br>
 
            This fusion protein is composed by the cellulose binding domain cipA (CBD cipA) that exhibits a high affinity to cellulose, followed by an elastin like polypeptide (ELP) which allows us an easy and rapid purification and finally the bone morphogenetic protein 2 (BMP-2) that is a potent osteoinductive cytokine capable of inducing bone and cartilage formation.
 
          </div>
 
          <div class="ecuador_background_phase_logo" id="phase_2_logo">
 
 
          </div>
 
          <div class="ecuador_backgound_phase_more">
 
            MORE
 
          </div>
 
        </div>
 
        <div  onclick="chosePhase(3)" class="ecuador_backgound_phase" id="phase_3">
 
          <div class="ecuador_background_phase_title">
 
            PHASE 3 </br> BIOMATERIAL FUNCTIONALIZATION
 
          </div>
 
          <div class="ecuador_phase_summary">
 
          </br>
 
          </br>
 
            In order to get an elastic and functional biomaterial the fusion protein CBD-ELP-BMP2 was coupled to bacterial cellulose by a crosslinking process. This biomaterial can be used in biomedical applications focused on bone and cartilage formation because of its compatibility with the human body.
 
          </div>
 
          <div class="ecuador_background_phase_logo" id="phase_3_logo">
 
 
          </div>
 
          <div class="ecuador_backgound_phase_more">
 
            MORE
 
          </div>
 
        </div>
 
      </div>
 
    </div>
 
    <div class="ecuador_background_separator_1">
 
 
    </div>
 
    <div id="phase_1_main_container" class="phase_1_main_container">
 
      Phase 1
 
    </div>
 
    <div id="phase_2_main_container" class="phase_2_main_container">
 
      Phase 2
 
    </div>
 
    <div id="phase_3_main_container" class="phase_3_main_container">
 
      Phase 3
 
    </div>
 
    <div class="ecuador_footer">
 
      <div class="ecuador_footer_igem_logo">
 
      </div>
 
      <div class="ecuador_footer_information_layout">
 
        <div class="ecuador_footer_information_container">
 
          <div class="ecuador_footer_information_title_container">
 
            SPONSORS
 
          </div>
 
        </div>
 
        <div class="ecuador_footer_information_container">
 
          <div class="ecuador_footer_information_title_container">
 
            FOLLOW US
 
            <div class="ecuador_follow_us_icons_container">
 
              <div id="facebook" class="ecuador_follow_us_icon">
 
 
              </div>
 
              <div id="instagram" class="ecuador_follow_us_icon">
 
 
              </div>
 
            </div>
 
          </div>
 
        </div>
 
        <div class="ecuador_footer_information_container">
 
          <div class="ecuador_footer_information_title_container">
 
            CONTACT US
 
          </div>
 
        </div>
 
      </div>
 
    </div>
 
  </div>
 
 
 
 
<script>
 
  document.getElementById("take_a_look").onclick = function() {
 
    document.getElementById("take_a_look").style.display = "none";
 
    var backgroundPhasesDiv = document.getElementById("ecuador_background_phases");
 
    backgroundPhasesDiv.style.display = "flex";
 
    var igemEcuadorTitle = document.getElementById("ecuador_background_team_text_cotainer");
 
    igemEcuadorTitle.style.marginLeft = "-37%";
 
    igemEcuadorTitle.style.width = "56.5%";
 
    igemEcuadorTitle.style.opacity = "0";
 
    var backgoundTitle = document.getElementById("ecuador_background_title_cotainer");
 
    backgoundTitle.style.display = "flex";
 
    var backgroundDiv = document.getElementById("ecuador_background_team_main_cotainer");
 
    backgroundDiv.style.opacity = "0";
 
    backgroundDiv.style.visibility = "hidden";
 
  }
 
 
  function chosePhase(phase){
 
    var backgroundPhasesDiv =  document.getElementById("ecuador_background_phases");
 
    backgroundPhasesDiv.style.opacity = "0";
 
    backgroundPhasesDiv.style.visibility = "hidden";
 
    if(phase == 1){
 
      document.getElementById("phase_1_menu_option").style.display = "none";
 
      document.getElementById("phase_2_menu_option").style.display = "block";
 
      document.getElementById("phase_3_menu_option").style.display = "block";
 
      document.getElementById("phase_1_main_container").style.display = "flex";
 
      document.getElementById("phase_2_main_container").style.display = "none";
 
      document.getElementById("phase_3_main_container").style.display = "none";
 
    }
 
    if(phase == 2){
 
      document.getElementById("phase_2_menu_option").style.display = "none";
 
      document.getElementById("phase_1_menu_option").style.display = "block";
 
      document.getElementById("phase_3_menu_option").style.display = "block";
 
      document.getElementById("phase_2_main_container").style.display = "flex";
 
      document.getElementById("phase_1_main_container").style.display = "none";
 
      document.getElementById("phase_3_main_container").style.display = "none";
 
    }
 
    if(phase == 3){
 
      document.getElementById("phase_3_menu_option").style.display = "none";
 
      document.getElementById("phase_2_menu_option").style.display = "block";
 
      document.getElementById("phase_1_menu_option").style.display = "block";
 
      document.getElementById("phase_3_main_container").style.display = "flex";
 
      document.getElementById("phase_2_main_container").style.display = "none";
 
      document.getElementById("phase_1_main_container").style.display = "none";
 
    }
 
    var phaseMenuChooser = document.getElementById("phase_menu_chooser");
 
    phaseMenuChooser.style.display = "block"
 
  }
 
 
</script>
 
 
</html>
 

Revision as of 05:02, 31 July 2018