Team:ITESM-Guadalajara/Team

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
-
 
<html>
<html>
-
<!--main content -->
+
<head>
-
<table width="70%" align="center">
+
 +
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
  <meta name="description" content="Team ITESM - Guadalajara Wiki for the iGEM competition of 2014">
 +
  <meta name="keywords" content="iGEM, Chitosan, 2014, ITESM Guadalajara, Wiki">
 +
  <meta name="author" content="Irving Fernando Alvarez Vazquez, Oswaldo Avalos">
 +
  <meta name="title" content="Team ITESM - Guadalajara Wiki">
-
<!--welcome box -->
+
  <!-- External scripts -->
-
<tr>
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600'
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
rel='stylesheet' type='text/css'>
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
+
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-
<br>
+
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:ITESM-Guadalajara/Team&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
-
</td>
+
-
</tr>
+
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
  <!-- Functionallity and behaviour JS -->
-
<!-- end welcome box -->
+
  <script>
-
<tr>  
+
-
<!--navigation menu -->
+
    $(document).ready(function(){
-
<td align="center" colspan="3">
+
-
<table  width="100%">
+
      //Loading screen functionallity
-
<tr heigth="15px"></tr>
+
      $('.loading').animate(
-
<tr heigth="75px">
+
          {opacity:0},
 +
          500,
 +
          function(){
 +
            $('.loading').attr("style", "display:none");
 +
          }
 +
      );
 +
      //Height responsiveness
 +
      $(window).resize(function() {
 +
          wheight = $(window).height();
 +
          $('.container').attr("style","height:"+(wheight)+"px;background-size:cover;");
 +
          $('.team-member-container').attr("style","height:"+wheight/2.7+"px;");
 +
      });
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
      $(window).trigger('resize');
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara"style="color:#000000">Home </a> </td>
+
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
      //Menu moveto container on item click functionallity
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Team"style="color:#000000"> Team </a> </td>
+
      $('.menu-item').on('click', function(){
 +
          $('.menu-item').removeClass('subselected');
 +
          $(this).addClass('subselected');
 +
          if($(this).attr("data")=="#top"){
 +
              $('html, body').animate({
 +
                  scrollTop: 0
 +
              }, 1000);
 +
          }else{
 +
              $('html, body').animate({
 +
                  scrollTop: $($(this).attr("data")).offset().top-70
 +
              }, 1000);
 +
          }
 +
      });
-
<td style="border:1px solid black;" align="center" height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
      //Hover of team members
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=ITESM-Guadalajara"style="color:#000000"> Official Team Profile </a></td>
+
      $('.team-member-container').on('mouseenter', function(){
 +
        $(this).children('.team-member-photo').attr("style", "background-image:url('"+$(this).attr("hover")+"');");
 +
        $(this).on('mouseleave', function(){
 +
          $(this).children('.team-member-photo').attr('style', "background-image:url('"+$(this).attr("data")+"');");
 +
        });
 +
      });
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
    });
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Project"style="color:#000000"> Project</a></td>
+
   
 +
  </script>
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
  <style>
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Parts"style="color:#000000"> Parts</a></td>
+
    body,
 +
    html{
 +
      margin: 0;
 +
      padding:0;
 +
      font-family: font-family: 'Yanone Kaffeesatz', sans-serif;
 +
    }
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
    /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Modeling"style="color:#000000"> Modeling</a></td>
+
    .firstHeading{
 +
      display:none;
 +
    }
 +
    #top-section{
 +
      background:#48af5d;
 +
      margin-left:0 !important;
 +
      width:100%;
 +
      left:0;
 +
    }
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
 
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Notebook"style="color:#000000"> Notebook</a></td>
 
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
    /* LOADING SCREEN */
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Safety"style=" color:#000000"> Safety </a></td>
+
    .loading{
 +
      position:fixed;
 +
      width:100%;
 +
      height:100%;
 +
      top:0;
 +
      left:0;
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
      z-index:5;
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Attributions"style="color:#000000"> Attributions </a></td>
+
 +
      background-color:#555;
 +
      color:#fff;
 +
      text-align: center;
 +
    }
 +
    .loading p{
 +
      position: relative;
 +
      width:100%;
 +
      height:10%;
 +
      top:45%;
 +
      left:0;
 +
    }
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
    /* MENU STYLING */
-
</tr>
+
    .menu{
-
</table>
+
      position:fixed;
 +
      width:100%;
 +
      height:56px;
 +
      top:14px;
 +
      background-color: #47a3da;
-
<!--end navigation menu -->
+
      z-index:4;
-
</tr>
+
-
</tr>
+
-
</td>
+
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
      border-collapse: collapse;
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
      text-align:center;
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
    }
 +
    .menu tr td{
 +
      text-align: center;
 +
      vertical-align: middle;
-
<tr><td > <h3> Team Information</h3></td>
+
      font-weight: 700;
-
<td ></td >
+
      font-size:16px;
-
<td > <h3> Upload pictures of your team!</h3></td>
+
      color:#fff;
-
</tr>
+
      width:7%;
 +
    }
 +
    .menu tr td.menu-item:hover{
 +
      background-color:#258ecd;
 +
      cursor: pointer;
 +
    }
 +
    .subselected{
 +
      background-color: #258ecd;
 +
    }
-
<tr>
+
    /* CONTAINERS STYLING */
-
<td width="45%"  valign="top">
+
    .container{
-
<p>
+
      position:relative;
-
You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.</p>
+
      width:100%;
-
<p>
+
      top:50px;
-
You can look at what other teams did to get some inspiration! Here are a few examples:</p>
+
    }
-
<ul>
+
    .container .subcontainer{
-
<li><a href="https://2013.igem.org/Team:Evry/Team">2013 Evry</a></li>
+
      position:absolute;
-
<li><a href="https://2013.igem.org/Team:Cornell/team">2013 Cornell</a></li>
+
      width:95%;
-
<li><a href="https://2013.igem.org/Team:UANL_Mty-Mexico/Team">2013 UANL Mty-Mexico</a></li>
+
      height:90%;
-
<li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Team/Korea_University">2013 Korea U Seoul</a></li>
+
      top:5%;
 +
      left:2.5%;
 +
    }
 +
    #top{
 +
      background-size: cover;
 +
      background-image: url("http://i1191.photobucket.com/albums/z475/alex0892/Guadalajara%20Minerva/171120111899.jpg");
 +
      overflow:hidden;
 +
    }
-
</ul>
+
    /* TEAM MEMBERS CARDS STYLING */
 +
    .team-member-container{
 +
      position:relative;
 +
      width:14%;
 +
      margin-left:2.28%;
 +
      float:left;
 +
    }
 +
    .team-member-container:hover{
 +
      cursor:pointer;
 +
    }
 +
    .row2{
 +
      top:4%;
 +
    }
 +
    .team-member-container .team-member-photo{
 +
      position:relative;
 +
      width:100%;
 +
      height:85%;
 +
      top:0;
 +
      left:0;
 +
      background-size: cover;
 +
    }
 +
    .team-member-container .team-member-footer{
 +
      position:relative;
 +
      width:100%;
 +
      height:15%;
 +
      top:0;
 +
      left:0;
 +
      border:none;
 +
      border-collapse: collapse;
 +
      background-color: #47a3da;
 +
      color:#fff;
-
</td>
+
      text-align: center;
-
<td></td>
+
      vertical-align: middle;
-
<td width="45%"  valign="top">
+
    }
-
<p> We provide a server where you can upload images for your wiki!</p>
+
-
<p> Add pictures of your team members, advisors, instructors, lab, institution and everything you wish to show! </p>
+
-
<a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a> <a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a>
+
-
</a> <a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a>
+
-
<br>
+
-
<a href="https://2014.igem.org/Special:Upload">Click here to upload! </a>
+
-
</td>
+
 +
body {
 +
    padding-top: 110px;
 +
}
-
</tr>
+
.center-block {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
-
<tr><td > <h3> Tips for the Team Page </h3></td>
 
-
<td ></td >
 
-
<td > </td>
 
-
</tr>
 
 +
.navbar-fixed-top {
 +
background: #fff;
 +
filter: none !important;
 +
box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
-webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
        border-bottom: 1px solid rgba(0,0,0,0.2);
-
<tr>
+
}
-
<td width="45%"  valign="top">
+
-
<p>What should this page contain?</p>
+
-
<ul>
+
-
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
-
<li> You can add a small biography or a few words from each team member, tell us what you like, and what motivates to participate in iGEM. </li>
+
-
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
-
<li>Remember that image galleries can help you showcase many pictures while saving space </li>
+
-
</ul>
+
-
</td>
+
.faceBot{
 +
  background: black;
 +
}
-
<td></td>
+
@font-face {
-
<td width="45%" valign="top"> </td>
+
  font-family: 'Open Sans', Arial;;
 +
  }
-
</tr>
+
body
 +
{
 +
    font-family: 'Open Sans', Arial;
 +
}
 +
ul.nav a{
 +
  color: gray;
 +
  background-color: transparent;
 +
  height: 100%;
 +
  position: relative;
 +
}
 +
ul.nav a:hover {
 +
  background-color: transparent;
 +
}
 +
h2 {
 +
  color:green;
 +
}
 +
 
 +
h4 {
 +
    font-weight: bold;
 +
}
 +
 
 +
.menu-item{
 +
  height: 100px;
 +
}
 +
 
 +
.green-effect{
 +
  display: none;
 +
  background-color: #4AAF51;
 +
  opacity: 1;
 +
  color: #FFF;
 +
  transition-property: all;
 +
  transition-duration: 0.3s;
 +
  transition-timing-function: ease-out;
 +
  transition-delay: 0s;
 +
  border-color: #288D30;
 +
  position: absolute;
 +
  bottom: 0px;
 +
  width: 100%;
 +
  height: 2px;
 +
  right: 0px;
 +
}
 +
 
 +
a:hover .green-effect{
 +
  display: inherit;
 +
}
 +
 
 +
  </style>
 +
 
 +
 
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
 
 +
<div class="navbar navbar-fixed-top" style="margin-top:10px">
 +
  <nav class="navbar-inner">
 +
  <div class="row">
 +
  <div class="col-md-2"></div>
 +
  <div class="col-md-3"<a><img class="inicioLogo" src="https://static.igem.org/mediawiki/2014/5/55/BioPhrameIgem_logo.png" height="100"  width="auto" ></a></div>
 +
  <div class="col-md-1"></div>
 +
 
 +
  <div class="col-md-6" >
 +
      <ul class="nav navbar-nav" style="margin-top:30px">
 +
        <li class="menu-item">
 +
          <a href="https://2014.igem.org/Team:ITESM-Guadalajara">
 +
            <span>Home</span>
 +
            <span class="green-effect"></span>
 +
          </a>
 +
        </li>
 +
        <li class="menu-item">
 +
          <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Company">
 +
            <span>The Company</span>
 +
            <span class="green-effect"></span>
 +
          </a>
 +
        </li>
 +
        <li class="menu-item">
 +
          <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Team">
 +
            <span>Team</span>
 +
            <span class="green-effect"></span>
 +
          </a>
 +
        </li>
 +
        <li class="menu-item">
 +
          <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Contact">
 +
            <span>Contact</span>
 +
            <span class="green-effect"></span>
 +
          </a>
 +
        </li>
 +
        <li class="menu-item">
 +
          <a href="https://2014.igem.org/Main_Page">
 +
            <span>iGEM 2014</span>
 +
            <span class="green-effect"></span>
 +
          </a>
 +
        </li>
 +
      </ul>
 +
</div>
 +
  </nav>
 +
</div>
 +
 
 +
<div class="row">
 +
</div>
 +
<div>
 +
<
 +
</div>
 +
 
 +
 
 +
<div class="row center-block"><div class="col-md-3 col-md-offset-3"><img src="https://static.igem.org/mediawiki/2014/4/45/BioPhrame_logo.png"></div> <div class="col-md-3"><h3 class="text-success">CREATORS OF THE FIRST ECOLOGICALLY PRODUCED CHITOSAN</h3></div>
 +
</div>
 +
 
 +
<div class="col-md-6 col-md-offset-3 text-justify">
 +
<p>
 +
Biophrame Technologies focuses in innovating, developing and improving technologies based on synthetic biology to create optimized and sustainable industrial processes which can guarantee quality products for our customers.</p>
 +
 
 +
<p>
 +
We believe the biotechnology we develop can help us not only to optimize time and resources, but to take care of the environment and improve the lives in our community, both regional and global. That is why raw material used in our processes is waste from other industrial process of other companies.</p>
 +
 
 +
<p>
 +
Our main product is chitosan, a natural fiber product with multiple applications in pharmaceuticals, agrochemicals, water treatment, textile finishing, food, cosmetics, pulp and paper, photography and tissue engineering. The product we market is the result of a biological production process based on genetically modified organisms which is productive, cost effective and waste reductive. In our process, chitin extracted from shrimp shells waste undergoes a process of demineralization, deproteinization and deacetilatyion by the action of two bacteria. The behavior of these bacteria is controlled by induced temperature changes, guaranteeing no chemical use in the process.</p>
 +
 
 +
<p>
 +
We are strategically located in Guadalajara, the second most populated city in Mexico and responsible of 7% of national gross domestic product. Our goal in the long term is to fulfil the Mexican demand of medium and high purity chitosan and to become the first Mexican exporter of high purity chitosan. We want to create dream jobs for young Mexican engineers and export our biotechnology worldwide.</p>
 +
</div>
 +
<div class="col-md-12 faceBot">
 +
<div class="col-md-2 col-md-offset-5">
 +
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbiophrame&amp;width&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowTransparency="true"></iframe></div>
 +
</div>
 +
</body>
 +
<script>
 +
    $('.carousel').carousel({
 +
        interval: 2000
 +
    })
 +
</script>
-
</table>
 
</html>
</html>

Revision as of 22:28, 14 October 2014

<

CREATORS OF THE FIRST ECOLOGICALLY PRODUCED CHITOSAN

Biophrame Technologies focuses in innovating, developing and improving technologies based on synthetic biology to create optimized and sustainable industrial processes which can guarantee quality products for our customers.

We believe the biotechnology we develop can help us not only to optimize time and resources, but to take care of the environment and improve the lives in our community, both regional and global. That is why raw material used in our processes is waste from other industrial process of other companies.

Our main product is chitosan, a natural fiber product with multiple applications in pharmaceuticals, agrochemicals, water treatment, textile finishing, food, cosmetics, pulp and paper, photography and tissue engineering. The product we market is the result of a biological production process based on genetically modified organisms which is productive, cost effective and waste reductive. In our process, chitin extracted from shrimp shells waste undergoes a process of demineralization, deproteinization and deacetilatyion by the action of two bacteria. The behavior of these bacteria is controlled by induced temperature changes, guaranteeing no chemical use in the process.

We are strategically located in Guadalajara, the second most populated city in Mexico and responsible of 7% of national gross domestic product. Our goal in the long term is to fulfil the Mexican demand of medium and high purity chitosan and to become the first Mexican exporter of high purity chitosan. We want to create dream jobs for young Mexican engineers and export our biotechnology worldwide.