Team:ITESM-Guadalajara/Notebook

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
{{CSS/Main}}
 +
<html>
-
{{CSS/Main}}
+
<head>
 +
  <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">
 +
  <meta name="title" content="Team ITESM - Guadalajara Wiki">
-
<html>
+
  <!-- External scripts -->
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600'
 +
rel='stylesheet' type='text/css'>
 +
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 +
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
 
 +
  <!-- Functionallity and behaviour JS -->
 +
  <script>
 +
 
 +
    $(document).ready(function(){
 +
 
 +
      //Loading screen functionallity
 +
      $('.loading').animate(
 +
          {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;");
 +
      });
 +
 
 +
      $(window).trigger('resize');
 +
 
 +
      //Menu moveto container on item click functionallity
 +
      $('.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);
 +
          }
 +
      });
 +
 
 +
      //Hover of team members
 +
      $('.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")+"');");
 +
        });
 +
      });
 +
 
 +
    });
 +
   
 +
  </script>
 +
 
 +
  <style>
 +
    body,
 +
    html{
 +
      margin: 0;
 +
      padding:0;
 +
      font-family: font-family: 'Yanone Kaffeesatz', sans-serif;
 +
    }
 +
 
 +
    /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
 +
    .firstHeading{
 +
      display:none;
 +
    }
 +
    #top-section{
 +
      background:#48af5d;
 +
      margin-left:0 !important;
 +
      width:100%;
 +
      left:0;
 +
    }
 +
 
 +
 
 +
    /* LOADING SCREEN */
 +
    .loading{
 +
      position:fixed;
 +
      width:100%;
 +
      height:100%;
 +
      top:0;
 +
      left:0;
 +
 
 +
      z-index:5;
-
<!--main content -->
+
      background-color:#555;
-
<table width="70%" align="center">
+
      color:#fff;
 +
      text-align: center;
 +
    }
 +
    .loading p{
 +
      position: relative;
 +
      width:100%;
 +
      height:10%;
 +
      top:45%;
 +
      left:0;
 +
    }
 +
    /* MENU STYLING */
 +
    .menu{
 +
      position:fixed;
 +
      width:100%;
 +
      height:56px;
 +
      top:14px;
 +
      background-color: #47a3da;
-
<!--welcome box -->
+
      z-index:4;
-
<tr>
+
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
-
<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>
+
-
<br>
+
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:ITESM-Guadalajara/Notebook&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
-
</td>
+
-
</tr>
+
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
      border-collapse: collapse;
-
<!-- end welcome box -->
+
      text-align:center;
-
<tr>
+
    }
 +
    .menu tr td{
 +
      text-align: center;
 +
      vertical-align: middle;
-
<!--navigation menu -->
+
      font-weight: 700;
-
<td align="center" colspan="3">
+
      font-size:16px;
 +
      color:#fff;
 +
      width:7%;
 +
    }
 +
    .menu tr td.menu-item:hover{
 +
      background-color:#258ecd;
 +
      cursor: pointer;
 +
    }
 +
    .subselected{
 +
      background-color: #258ecd;
 +
    }
-
<table  width="100%">
+
    /* CONTAINERS STYLING */
-
<tr heigth="15px"></tr>
+
    .container{
-
<tr heigth="75px">
+
      position:relative;
 +
      width:100%;
 +
      top:50px;
 +
    }
 +
    .container .subcontainer{
 +
      position:absolute;
 +
      width:95%;
 +
      height:90%;
 +
      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;
 +
    }
 +
    /* TEAM MEMBERS CARDS STYLING */
 +
    .team-member-container{
 +
      position:relative;
 +
      width:14%;
 +
      margin-left:2.28%;
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
      float:left;
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara"style="color:#000000">Home </a> </td>
+
    }
 +
    .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;
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
      border:none;
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Team"style="color:#000000"> Team </a> </td>
+
      border-collapse: collapse;
 +
      background-color: #47a3da;
 +
      color:#fff;
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
      text-align: center;
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=ITESM-Guadalajara"style="color:#000000"> Official Team Profile </a></td>
+
      vertical-align: middle;
 +
    }
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
body {
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Project"style="color:#000000"> Project</a></td>
+
    padding-top: 110px;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
.center-block {
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Parts"style="color:#000000"> Parts</a></td>
+
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
-
<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/Modeling"style="color:#000000"> Modeling</a></td>
 
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
.navbar-fixed-top {
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Notebook"style="color:#000000"> Notebook</a></td>
+
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);
-
<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/Safety"style=" color:#000000"> Safety </a></td>
+
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
.faceBot{
-
<a href="https://2014.igem.org/Team:ITESM-Guadalajara/Attributions"style="color:#000000"> Attributions </a></td>
+
  background: black;
 +
}
 +
@font-face {
 +
  font-family: 'Open Sans', Arial;;
 +
}
-
<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>
+
body
-
</tr>
+
{
-
</table>
+
    font-family: 'Open Sans', Arial;
 +
}
 +
ul.nav a{
 +
  color: gray;
 +
  background-color: transparent;
 +
  height: 100%;
 +
  position: relative;
 +
}
 +
ul.nav a:hover {
 +
background-color: transparent;}
 +
li.menu-item{
 +
  background: transparent !important;
 +
}
-
</tr>
 
 +
h2 {
 +
  color:green;
 +
}
-
</tr>
+
h4 {
-
+
    font-weight: bold;
 +
}
 +
.menu-item{
 +
  height: 75px;
 +
}
 +
.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;
 +
}
 +
.invertir:hover {
 +
  -webkit-filter: invert(100%);
 +
}
-
</td>
+
  </style>
-
<tr> <td colspan="3"  height="15px"> </td></tr>
 
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
 
-
<tr> <td colspan="3"  height="5px"> </td></tr>
 
-
<!--requirements section -->
+
</head>
-
<tr><td colspan="3"> <h3>Notebook</h3></td></tr>
+
-
</tr>
+
 +
<body>
-
<tr>
 
-
<td width="45%"  valign="top">
 
-
<p>You should make use of the calendar feature on the wiki and start a lab notebook. This may be looked at by the judges to see how your work progressed throughout the summer. It is a very useful organizational tool as well. </p>
 
-
</td>
 
-
<td></td>
+
<div class="navbar navbar-fixed-top" style="margin-top:10px">
-
<td></td>
+
  <nav class="navbar-inner">
-
</tr>
+
  <div class="row">
 +
  <div class="col-md-2"></div>
 +
  <div class="col-md-3"><a href="https://2014.igem.org/Team:ITESM-Guadalajara"><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><li class="menu-item">
 +
          <a href="https://2014.igem.org/Team:ITESM-Guadalajara/Notebook">
 +
            <span>Notebook</span>
 +
            <span class="green-effect"></span>
 +
          </a>
 +
        </li><li>
 +
      <a href="http://www.facebook.com/biophrame">
 +
        <img src="https://static.igem.org/mediawiki/2014/3/30/BIOPHRAMEGDLFacebookF.png" height="20"  width="auto" class="invertir img-rounded">
 +
      </a></li>
 +
      </ul>
 +
</div>
 +
  </nav>
 +
</div>
 +
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:400px;width:1900px;"><div id="gmap_canvas" style="height:400px;width:1900px;"></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://www.trivoo.net/gutscheine/goertz/" id="get-map-data">trivoo</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(20.733958420609017,-103.45548872584232),mapTypeId: google.maps.MapTypeId.TERRAIN};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(20.733958420609017, -103.45548872584232)});infowindow = new google.maps.InfoWindow({content:"<b>BIOPHRAME TECHNOLOGIES</b><br/>General Ramon Corona 2514<br/> zapopan" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});}google.maps.event.addDomListener(window, 'load', init_map);</script>
 +
<div class="col-md-8 col-md-offset-2">
 +
<h2>CONTACT</h2>
 +
<p>Feel free to contact us to get any information of our project at iGEM 2014 or our company. We are always in the quest for new ideas and opinions that can help us grow and create new solutions so your comments are welcome as well.</p>
-
</table>
+
<form role="form">
 +
  <div class="form-group">
 +
    <label> Your name </label>
 +
    <input type="text" class="form-control" placeholder="Required">
 +
  </div>
 +
  <div class="form-group">
 +
    <label>Your email</label>
 +
    <input type="email" class="form-control" placeholder="Required">
 +
  </div>
 +
  <div class="form-group">
 +
    <label> Subject </label>
 +
    <input type="text" class="form-control" >
 +
  </div>
 +
  <div class="form-group">
 +
    <label>Your message</label>
 +
    <textarea class="form-control" rows="3"></textarea>
 +
  </div>
 +
  <button type="button" class="btn btn-success" style="width:100%">Send</button>
 +
</form>
 +
</br></br></br>
 +
</div>
 +
<div class="col-md-12 faceBot"></br>
 +
<div class="col-md-2 col-md-offset-3"><img src="https://static.igem.org/mediawiki/2014/e/ef/Biophrame_logo_footer_500x150.png" class="img-responsive"><small style="color:white">Biophrame Technologies is a biotech company and manufacturer specialized in the production of Chitosan.</small></div>
 +
<div class="col-md-2">
 +
<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>
</html>
</html>

Revision as of 23:08, 17 October 2014

trivoo

CONTACT

Feel free to contact us to get any information of our project at iGEM 2014 or our company. We are always in the quest for new ideas and opinions that can help us grow and create new solutions so your comments are welcome as well.





Biophrame Technologies is a biotech company and manufacturer specialized in the production of Chitosan.

Retrieved from "http://2014.igem.org/Team:ITESM-Guadalajara/Notebook"