Difference between revisions of "Team:Ecuador/Background"

Line 2: Line 2:
 
<html>
 
<html>
 
<style>
 
<style>
−
@import url('https://fonts.googleapis.com/css?family=Questrial');
+
 
−
    *{
+
@import url('https://fonts.googleapis.com/css?family=Raleway');
−
        margin: 0px;
+
  *{
−
        font-family: 'Questrial', sans-serif;
+
      margin: 0px;
−
    }
+
      font-family: 'Raleway', sans-serif;
 +
  }
 
     @keyframes slide-in {
 
     @keyframes slide-in {
 
       from {
 
       from {
Line 55: Line 56:
 
       }
 
       }
 
     }
 
     }
 +
 +
    @keyframes slide-in-oposite-chooser {
 +
      from {
 +
        right: -50px;
 +
      }
 +
 +
      to {
 +
        right: 50px;
 +
      }
 +
    }
 +
 
     @keyframes slide-in-up {
 
     @keyframes slide-in-up {
 
       from {
 
       from {
Line 64: Line 76:
 
       }
 
       }
 
     }
 
     }
 +
 +
    @keyframes slide-in-up-oposite {
 +
      from {
 +
        margin-top: -100%;
 +
      }
 +
 +
      to {
 +
        margin-left: 0%;
 +
      }
 +
    }
 +
 
     .igem_2018_team_menu.displaying_menu {
 
     .igem_2018_team_menu.displaying_menu {
 
       display: none;
 
       display: none;
Line 70: Line 93:
 
       font-size: 14px;
 
       font-size: 14px;
 
       width: 100%;
 
       width: 100%;
−
       height: 100px;
+
       height: 80px;
 
       position: fixed;
 
       position: fixed;
 
       left: 0px;
 
       left: 0px;
Line 114: Line 137:
 
       position: absolute;
 
       position: absolute;
 
       left: 19%;
 
       left: 19%;
−
       top: 25px;
+
       top: 15px;
 
       display: flex;
 
       display: flex;
 
       justify-content: center;
 
       justify-content: center;
Line 120: Line 143:
  
 
     .menu_option {
 
     .menu_option {
−
       width: 16.66%;
+
       width: 14.28%;
 
       height: 100%;
 
       height: 100%;
 
       position: relative;
 
       position: relative;
Line 132: Line 155:
  
 
     #project {
 
     #project {
−
       animation-name: slide-in-menu;
+
       animation-name: slide-in-up-oposite;
 
       animation-duration: 0.5s;
 
       animation-duration: 0.5s;
−
       animation-delay: 0.7s;
+
       animation-delay: 0.5s;
 
       animation-fill-mode: backwards;
 
       animation-fill-mode: backwards;
 
       position: absolute;
 
       position: absolute;
Line 142: Line 165:
  
 
     #people {
 
     #people {
−
       animation-name: slide-in-menu;
+
       animation-name: slide-in-up-oposite;
 
       animation-duration: 0.5s;
 
       animation-duration: 0.5s;
−
       animation-delay: 1s;
+
       animation-delay: 0.6s;
 
       animation-fill-mode: backwards;
 
       animation-fill-mode: backwards;
 
       position: absolute;
 
       position: absolute;
−
       left: 16.66%;
+
       left: 14.28%;
 
       z-index: 9;
 
       z-index: 9;
 
     }
 
     }
  
 
     #notebook {
 
     #notebook {
−
       animation-name: slide-in-menu;
+
       animation-name: slide-in-up-oposite;
 
       animation-duration: 0.5s;
 
       animation-duration: 0.5s;
−
       animation-delay: 1.2s;
+
       animation-delay: 0.7s;
 
       animation-fill-mode: backwards;
 
       animation-fill-mode: backwards;
 
       position: absolute;
 
       position: absolute;
−
       left: 33.32%;
+
       left: 28.56%;
 
       z-index: 9;
 
       z-index: 9;
 
     }
 
     }
  
 
     #human_practice {
 
     #human_practice {
−
       animation-name: slide-in-menu;
+
       animation-name: slide-in-up-oposite;
 
       animation-duration: 0.5s;
 
       animation-duration: 0.5s;
−
       animation-delay: 1.5s;
+
       animation-delay: 0.8s;
 
       animation-fill-mode: backwards;
 
       animation-fill-mode: backwards;
 
       position: absolute;
 
       position: absolute;
−
       left: 49.98%;
+
       left: 42.84%;
 
       z-index: 9;
 
       z-index: 9;
 
     }
 
     }
  
 
     #parts {
 
     #parts {
−
       animation-name: slide-in-menu;
+
       animation-name: slide-in-up-oposite;
 
       animation-duration: 0.5s;
 
       animation-duration: 0.5s;
−
       animation-delay: 2s;
+
       animation-delay: 0.9s;
 
       animation-fill-mode: backwards;
 
       animation-fill-mode: backwards;
 
       position: absolute;
 
       position: absolute;
−
       left: 66.64%;
+
       left: 57.12%;
 
       z-index: 9;
 
       z-index: 9;
 
     }
 
     }
  
 
     #safety {
 
     #safety {
−
       animation-name: slide-in-menu;
+
       animation-name: slide-in-up-oposite;
 
       animation-duration: 0.5s;
 
       animation-duration: 0.5s;
−
       animation-delay: 2.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;
 
       animation-fill-mode: backwards;
 
       position: absolute;
 
       position: absolute;
−
       left: 83.30%;
+
       left: 85.68%;
 
       z-index: 9;
 
       z-index: 9;
 
     }
 
     }
  
 
     .ecuador_href_text {
 
     .ecuador_href_text {
−
       width: 16.66% !important;
+
       width: 14.28% !important;
 
       height: 100% !important;
 
       height: 100% !important;
 
       position: relative !important;
 
       position: relative !important;
Line 233: Line 266:
 
       position: absolute;
 
       position: absolute;
 
       top: 50px;
 
       top: 50px;
−
      background-color: #FFF;
 
 
       display: none;
 
       display: none;
 
     }
 
     }
Line 346: Line 378:
 
       cursor: pointer;
 
       cursor: pointer;
 
     }
 
     }
 +
 +
    /*Background*/
  
 
     .ecuador_background_container {
 
     .ecuador_background_container {
Line 360: Line 394:
 
       width: 100%;
 
       width: 100%;
 
       height: 70px;
 
       height: 70px;
−
       position: relative;
+
       position: absolute;
−
      top: 30px;
+
 
       margin: auto;
 
       margin: auto;
 
       color: #141515;
 
       color: #141515;
−
       font-size: 32px;
+
       font-size: 60px;
 +
      font-weight: 500;
 
       display: flex;
 
       display: flex;
 
       justify-content: center;
 
       justify-content: center;
 
       align-items: center;
 
       align-items: center;
−
       animation-name: slide-in;
+
       animation-name: fade-in;
 
       animation-duration: 1.5s;
 
       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: auto;
 +
      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: auto;
 +
      font-size: 600%;
 +
      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;
 
     }
 
     }
  
Line 379: Line 515:
 
       padding-top: 2%;
 
       padding-top: 2%;
 
     }
 
     }
 +
 
     .ecuador_background_logo_container{
 
     .ecuador_background_logo_container{
 
       width: 450px;
 
       width: 450px;
Line 392: Line 529:
 
       transition: 0.5s;
 
       transition: 0.5s;
 
       margin-top: -20px;
 
       margin-top: -20px;
 +
      display: none;
 
     }
 
     }
  
Line 402: Line 540:
 
     .ecuador_background_phases{
 
     .ecuador_background_phases{
 
       width: 100%;
 
       width: 100%;
−
       height: 240px;
+
       height: 60%;
 
       display: flex;
 
       display: flex;
 
       position: absolute;
 
       position: absolute;
 
       align-self: center;
 
       align-self: center;
−
       top: 180px;
+
       top: 160px;
 
       display: none;
 
       display: none;
 
       margin: auto;
 
       margin: auto;
 
       overflow-x: hidden;
 
       overflow-x: hidden;
 
       overflow-y: hidden;
 
       overflow-y: hidden;
 +
      transition: 0.5s;
 
     }
 
     }
  
Line 432: Line 571:
 
       width: 100%;
 
       width: 100%;
 
       height: 25px;
 
       height: 25px;
−
       color: #F8F9F9;
+
       color: #1A1A1A;
 
       font-size: 20px;
 
       font-size: 20px;
 +
      font-weight: 600;
 
       justify-content: center;
 
       justify-content: center;
 
       margin: auto;
 
       margin: auto;
−
      text-indent: 20px;
+
 
 
       margin-top: 15px;
 
       margin-top: 15px;
 +
      text-align: center;
 
     }
 
     }
  
 
     #phase_1 {
 
     #phase_1 {
−
       background-color: #FBB03B;
+
       background-color: #EB984E;
 
       animation-name: slide-in;
 
       animation-name: slide-in;
−
       animation-duration: 1s;
+
       animation-duration: 0.75s;
 
     }
 
     }
  
Line 449: Line 590:
 
       background-color: #00A99D;
 
       background-color: #00A99D;
 
       animation-name: slide-in-up;
 
       animation-name: slide-in-up;
−
       animation-duration: 1.25s;
+
       animation-duration: 0.75s;
 
       left: 37.5%;
 
       left: 37.5%;
 
       animation-delay: 0.5s;
 
       animation-delay: 0.5s;
Line 458: Line 599:
 
       background-color: #3498DB;
 
       background-color: #3498DB;
 
       animation-name: slide-in-oposite;
 
       animation-name: slide-in-oposite;
−
       animation-duration: 2s;
+
       animation-duration: 0.75s;
 
       left: 67.5%;
 
       left: 67.5%;
−
       animation-delay: 0.75s;
+
       animation-delay: 1s;
 
       animation-fill-mode: backwards;
 
       animation-fill-mode: backwards;
 
     }
 
     }
Line 474: Line 615:
  
 
     #phase_1_logo{
 
     #phase_1_logo{
−
       background-image: url(https://static.igem.org/mediawiki/2018/c/c5/T--Ecuador--Background--Phase--1.png);
+
       background-image: url(https://static.igem.org/mediawiki/2018/0/0c/T--Ecuador--Phase--1--black.png);
−
       background-position: center;
+
       background-position: 5px -2px;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
−
       background-size: 95%;
+
       background-size: 100%;
 
     }
 
     }
  
 
     #phase_2_logo{
 
     #phase_2_logo{
−
       background-image: url(https://static.igem.org/mediawiki/2018/0/00/T--Ecuador--Background--Phase--2.png);
+
       background-image: url(https://static.igem.org/mediawiki/2018/9/9f/T--Ecuador--Phase--2--black.png);
 
       background-position: center;
 
       background-position: center;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
−
       background-size: 95%;
+
       background-size: 80%;
 
     }
 
     }
  
 
     #phase_3_logo{
 
     #phase_3_logo{
−
       background-image: url(https://static.igem.org/mediawiki/2018/f/fe/T--Ecuador--Background--Phase--3.png);
+
       background-image: url(https://static.igem.org/mediawiki/2018/5/59/T--Ecuador--Phase--3--black.png);
 
       background-position: center;
 
       background-position: center;
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
−
       background-size: 95%;
+
       background-size: 65%;
 
     }
 
     }
  
Line 497: Line 638:
 
       width: 100%;
 
       width: 100%;
 
       height: 140px;
 
       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;
 +
      }
 
     }
 
     }
  
Line 509: Line 775:
 
     <div class="menu_options_container">
 
     <div class="menu_options_container">
 
       <div id="project" class="menu_option">
 
       <div id="project" class="menu_option">
−
         <a class="ecuador_href_text" href="https://2018.igem.org/Team:Ecuador/Description">PROJECT</a>
+
         PROJECT
 
         <div class="menu_sub_options_container">
 
         <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">
 
           <div class="sub_menu_option">
 
             MODELING
 
             MODELING
Line 517: Line 793:
 
             DESIGN
 
             DESIGN
 
           </div>
 
           </div>
−
          <a class="ecuador_href_sub_text" href="https://2018.igem.org/Team:Ecuador/Background">
 
−
            <div class="sub_menu_option">
 
−
              BACKGROUND
 
−
            </div>
 
−
          </a>
 
 
         </div>
 
         </div>
 
       </div>
 
       </div>
Line 573: Line 844:
 
       <div id="safety" class="menu_option">
 
       <div id="safety" class="menu_option">
 
         SAFETY
 
         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>
 
   </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 class="ecuador_background_container">
−
     <div class="ecuador_background_title_cotainer">
+
     <div id="ecuador_background_title_cotainer" class="ecuador_background_title_cotainer">
 
       PROJECT BACKGROUND
 
       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>
 
     <div class="ecuador_background_logo">
 
     <div class="ecuador_background_logo">
Line 586: Line 893:
 
       </div>
 
       </div>
 
       <div class="ecuador_background_phases" id="ecuador_background_phases">
 
       <div class="ecuador_background_phases" id="ecuador_background_phases">
−
         <div class="ecuador_backgound_phase" id="phase_1">
+
         <div onclick="chosePhase(1)" class="ecuador_backgound_phase" id="phase_1">
 
           <div class="ecuador_background_phase_title">
 
           <div class="ecuador_background_phase_title">
−
             PHASE 1
+
             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>
 
           <div class="ecuador_background_phase_logo" id="phase_1_logo">
 
           <div class="ecuador_background_phase_logo" id="phase_1_logo">
  
 +
          </div>
 +
          <div class="ecuador_backgound_phase_more">
 +
            MORE
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         <div class="ecuador_backgound_phase" id="phase_2">
+
         <div onclick="chosePhase(2)" class="ecuador_backgound_phase" id="phase_2">
 
           <div class="ecuador_background_phase_title">
 
           <div class="ecuador_background_phase_title">
−
             PHASE 2
+
             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>
 
           <div class="ecuador_background_phase_logo" id="phase_2_logo">
 
           <div class="ecuador_background_phase_logo" id="phase_2_logo">
 +
 +
          </div>
 +
          <div class="ecuador_backgound_phase_more">
 +
            MORE
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         <div class="ecuador_backgound_phase" id="phase_3">
+
         <div onclick="chosePhase(3)" class="ecuador_backgound_phase" id="phase_3">
 
           <div class="ecuador_background_phase_title">
 
           <div class="ecuador_background_phase_title">
−
             PHASE 3
+
             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>
 
           <div class="ecuador_background_phase_logo" id="phase_3_logo">
 
           <div class="ecuador_background_phase_logo" id="phase_3_logo">
 +
 +
          </div>
 +
          <div class="ecuador_backgound_phase_more">
 +
            MORE
 
           </div>
 
           </div>
 
         </div>
 
         </div>
Line 612: Line 946:
 
     <div class="ecuador_background_separator_1">
 
     <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>
 
     <div class="ecuador_footer">
 
     <div class="ecuador_footer">
Line 647: Line 990:
  
 
<script>
 
<script>
−
   document.getElementById("ecuador_background_logo_container").onclick = function() {
+
   document.getElementById("take_a_look").onclick = function() {
−
     var backgroundPhasesDiv = document.getElementById("ecuador_background_phases")
+
    document.getElementById("take_a_look").style.display = "none";
 +
     var backgroundPhasesDiv = document.getElementById("ecuador_background_phases");
 
     backgroundPhasesDiv.style.display = "flex";
 
     backgroundPhasesDiv.style.display = "flex";
−
     var backgroundLogoDiv = document.getElementById("ecuador_background_logo_container");
+
     var igemEcuadorTitle = document.getElementById("ecuador_background_team_text_cotainer");
−
     backgroundLogoDiv.style.width = "1px";
+
     igemEcuadorTitle.style.marginLeft = "-37%";
−
     backgroundLogoDiv.style.visibility = "hidden";
+
    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>
 
</script>
  
 
</html>
 
</html>

Revision as of 21:48, 27 July 2018

iGEM ECUADOR
iGEM ECUADOR
PROJECT BACKGROUND
iGEM
TEAM
ECUADOR
TAKE A LOOK
Phase 1
Phase 2
Phase 3
SPONSORS
FOLLOW US
CONTACT US