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 17:08, 22 August 2018

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