Template:Http://2014.igem.org/Team:Colombia

From 2014.igem.org

(Difference between revisions)
(Added documentation. Zen of programming.)
 
(97 intermediate revisions not shown)
Line 18: Line 18:
-->
-->
-
<!--So there are three main sections to this code:  
+
<!--So there are four main parts to this code:  
The CAROUSEL, shamelessly taken from  
The CAROUSEL, shamelessly taken from  
http://getbootstrap.com/examples/carousel/  
http://getbootstrap.com/examples/carousel/  
Line 52: Line 52:
So there.
So there.
 +
Some TEXT BUTTONS made by Taylor Palmer, available at
 +
http://codepen.io/tpalmer75/pen/iImsJ/
 +
Again, not CC-BY-3.0, so
 +
"
 +
Copyright (c) 2014 by Taylor Palmer (http://codepen.io/tpalmer75/pen/iImsJ)
 +
 +
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 +
 +
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 +
"
 +
Everything else we made ourselves and is available under CC-BY-3.0 and all that jazz.
Everything else we made ourselves and is available under CC-BY-3.0 and all that jazz.
-->  
-->  
Line 74: Line 85:
       $(document).ready(function () {
       $(document).ready(function () {
             $('.carousel').carousel()
             $('.carousel').carousel()
-
                     interval: 1000
+
                     interval: 100
         });
         });
Line 104: Line 115:
#top-section {
#top-section {
height: 0px;
height: 0px;
-
border-top: 0.5;
+
border-top: 0;
border-left: none;
border-left: none;
border-right: none;
border-right: none;
Line 854: Line 865:
ul.menuBuild ul.submenu li.last{
ul.menuBuild ul.submenu li.last{
-
-webkit-transform:rotate(12deg);  /* webkit browsers */
+
-webkit-transform:rotate(3deg);  /* webkit browsers */
-
-moz-transform:rotate(12deg);  /* firefox */
+
-moz-transform:rotate(3deg);  /* firefox */
-
-o-transform:rotate(12deg);  /* opera */
+
-o-transform:rotate(3deg);  /* opera */
-
-ms-transform: rotate(12deg);  /* for IE9 and future versions */
+
-ms-transform: rotate(3deg);  /* for IE9 and future versions */
-
transform: rotate(12deg);  /* For older broswers */
+
transform: rotate(3deg);  /* For older broswers */
-
margin-left:-12px;
+
margin-left:-6px;
opacity: 0.70;
opacity: 0.70;
}
}
Line 963: Line 974:
ul.menuBuild li#menu1 > ul{
ul.menuBuild li#menu1 > ul{
-
margin-top:-55px;  
+
margin-top:-75px;  
left:0px;
left:0px;
}
}
Line 988: Line 999:
ul.menuBuild li#menu4 > ul{
ul.menuBuild li#menu4 > ul{
-
-webkit-transform:rotate(0deg); /* webkit */
+
-webkit-transform:rotate(-10deg); /* webkit */
-
-moz-transform:rotate(0deg); /* firefox */
+
-moz-transform:rotate(-10deg); /* firefox */
-
-o-transform:rotate(0deg); /* opera */
+
-o-transform:rotate(-10deg); /* opera */
-
-ms-transform: rotate(0deg); /* ie9 and future versions */
+
-ms-transform: rotate(-10deg); /* ie9 and future versions */
-
transform: rotate(0deg); /* older browsers */
+
transform: rotate(-10deg); /* older browsers */
left: 0px;
left: 0px;
     margin-top: -40px;
     margin-top: -40px;
Line 1,008: Line 1,019:
ul.menuBuild li#menu6> ul{
ul.menuBuild li#menu6> ul{
-
-webkit-transform:rotate(42deg); /* webkit */
+
-webkit-transform:rotate(5deg); /* webkit */
-
-moz-transform:rotate(42deg); /* firefox */
+
-moz-transform:rotate(5deg); /* firefox */
-
-o-transform:rotate(42deg); /* opera */
+
-o-transform:rotate(5deg); /* opera */
-
-ms-transform: rotate(42deg); /* ie9 and future versions */
+
-ms-transform: rotate(5deg); /* ie9 and future versions */
-
transform: rotate(42deg); /* older browsers */
+
transform: rotate(5deg); /* older browsers */
left: 0px;
left: 0px;
-
     margin-top: -50px;
+
     margin-top: -85px;
}               
}               
Line 1,220: Line 1,231:
</style>
</style>
-
<!-- beginning of your page -->
 
<!--PART III: FLIPPY BUTTONS-->
<!--PART III: FLIPPY BUTTONS-->
<style>
<style>
 +
 +
#iGEMLink {
 +
position: relative;
 +
top: 50%;
 +
transform: translateY(10%);
 +
 +
}
#Buttons {
#Buttons {
Line 1,369: Line 1,386:
-
<!--  Menu-->'
+
<!--  Menu-->
-
 
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
Line 1,397: Line 1,412:
</head>
</head>
 +
 +
<!--PART IV: Text Buttons-->
 +
<!--CSS-->
 +
<style>
 +
 +
.button-fill {
 +
  text-align: center;
 +
  background: #ccc;
 +
  display: inline-block;
 +
  position: relative;
 +
  text-transform: uppercase;
 +
  margin: 25px;
 +
}
 +
.button-fill.grey {
 +
  background: #445561;
 +
  color: white;
 +
}
 +
.button-fill.orange {
 +
  background: #f26b43;
 +
  color: #fff;
 +
}
 +
.button-fill.orange .button-inside {
 +
  color: #f26b43;
 +
}
 +
.button-fill.orange .button-inside.full {
 +
  border: 1px solid #f26b43;
 +
}
 +
.button-text {
 +
  padding: 0 25px;
 +
  line-height: 56px;
 +
  letter-spacing: .1em;
 +
}
 +
.button-inside {
 +
  width: 0px;
 +
  height: 54px;
 +
  margin: 0;
 +
  float: left;
 +
  position: absolute;
 +
  top: 1px;
 +
  left: 50%;
 +
  line-height: 54px;
 +
  color: #445561;
 +
  background: #fff;
 +
  text-align: center;
 +
  overflow: hidden;
 +
  -webkit-transition: width 0.5s, left 0.5s, margin 0.5s;
 +
  -moz-transition: width 0.5s, left 0.5s, margin 0.5s;
 +
  -o-transition: width 0.5s, left 0.5s, margin 0.5s;
 +
  transition: width 0.5s, left 0.5s, margin 0.5s;
 +
}
 +
.button-inside.full {
 +
  width: 100%;
 +
  left: 0%;
 +
  top: 0;
 +
  margin-right: -50px;
 +
  border: 1px solid #445561;
 +
}
 +
.inside-text {
 +
  text-align: center;
 +
  position: absolute;
 +
  right: 50%;
 +
  letter-spacing: .1em;
 +
  text-transform: uppercase;
 +
  -webkit-transform: translateX(50%);
 +
  -moz-transform: translateX(50%);
 +
  -ms-transform: translateX(50%);
 +
  transform: translateX(50%);
 +
}
 +
</style>
 +
 +
<!--JS-->
 +
<script src='http://assets.codepen.io/assets/libs/fullpage/jquery-ab8e840c3dad7ccf2deadb8c40d53bdb.js'></script>
Line 1,416: Line 1,503:
   <!-- Carousel items -->
   <!-- Carousel items -->
   <div class="carousel-inner">
   <div class="carousel-inner">
-
     <div class="active item"><a href=""><img src="https://static.igem.org/mediawiki/2014/8/8b/Colombia_Top.png" width="100%" ></a></div>
+
     <div class="active item"><a href="https://igem.org"><img src="https://static.igem.org/mediawiki/2014/8/8b/Colombia_Top.png" width="100%" ></a></div>
-
     <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2013/f/f7/Cover11.png" width="100%" height="400px" ></a></div>
+
     <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/c/c0/Petri.jpg" width="100%" ></a></div>
     <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/6/6c/ColombiaTeam_Head2.png"  width="100%"></a></div>
     <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/6/6c/ColombiaTeam_Head2.png"  width="100%"></a></div>
     <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/e/ec/Colombia_Header3.png" width="100%" ></a></div>
     <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/e/ec/Colombia_Header3.png" width="100%" ></a></div>
Line 1,453: Line 1,540:
       <li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li>
       <li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li>
       <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li>
       <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li>
 +
        <li class="last"><a href="https://2014.igem.org/Team:Colombia/DoItYourself">DO IT YOURSELF</a></li>
     </ul>
     </ul>
   
   
   </li>
   </li>
    
    
-
   <li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a>
+
   <li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Project">Project</a>
   </li>
   </li>
    
    
Line 1,468: Line 1,556:
<ul class="submenu sub4">
<ul class="submenu sub4">
-
       <li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li>
+
       <li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook">Notebook</a></li>
-
       <li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li>
+
       <li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlab">Interlab</a></li>
-
       <li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li>
+
       <li class="third"><a href="https://2014.igem.org/Team:Colombia/Protocols">Protocols</a></li>
 +
      <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li>
           </ul>
           </ul>
   </li>
   </li>
-
   <li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <!--Cambie el link de "https://2014.igem.org/Team:Colombia/Team" a "https://2014.igem.org/Team:Colombia/Members". PCR sep 20 2014-->
+
   <li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a>  
<ul class="submenu sub5">
<ul class="submenu sub5">
-
       <li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li>
+
       <li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions">Attributions</a></li>
       <li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li>
       <li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li>
-
       <li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li>
+
       <li class=third"><a href="https://igem.org/Team.cgi?id=1455">Official site</a></li>
-
      <li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li>
+
     </ul>
     </ul>
Line 1,488: Line 1,576:
   </li>
   </li>
-
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a>  
+
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HP">Human Practices</a>
 +
 
 +
<ul class="submenu sub5">
 +
 
 +
      <li class="first"><a href="https://2014.igem.org/Team:Colombia/LowBudgetLab">Low Budget iGEM</a></li>
 +
      <li class="second"><a href="https://2014.igem.org/Team:Colombia/InterviewsColiGEM">Interviews</a></li>
 +
      <li class="third"><a href="https://2014.igem.org/Team:Colombia/WAIEEI">Industry & Ethics</a></li>
 +
      <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Outreach">Outreach</a></li>
 +
      <li class="last"><a href="https://2014.igem.org/Team:Colombia/Patent">Patents</a></li>
 +
    </ul>
 +
 
 +
 
 +
   </li>
   </li>
Line 1,527: Line 1,627:
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li>
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li>
-
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li>
+
<li><a href="https://2014.igem.org/Main_Page" ><img id="iGEMLink" src="https://static.igem.org/mediawiki/2014/thumb/b/b1/Iitdpage_IGEM_official_logo.png/200px-Iitdpage_IGEM_official_logo.png" width="50px" link ></img></a> <b>iGEM</b></li>
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li>
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li>
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li>
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li>

Latest revision as of 23:03, 17 October 2014

Wheeltz - CSS3 Navigational Wheel Menu

  • Home
  • iGEM
  • Facebook
  • Twitter

Retrieved from "http://2014.igem.org/Template:Http://2014.igem.org/Team:Colombia"