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

From 2014.igem.org

(Difference between revisions)
 
(116 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<!--WELCOME, TRAVELER
 +
to our humble wiki template for this year. It's nuts. I'm genouinely
 +
sorry if you have to read through it. We just copied and pasted a
 +
bunch of scripts from around the web, and did some tweaks here and there.
 +
 +
If you plan to use any of this stuff for your own purposes, check
 +
out the attributions below.
 +
 +
For any additional information regarding the code or free cookies, email
 +
pablocarderam@gmail.com
 +
and he'll do the best he can to help you.
 +
 +
Cheers,
 +
 +
Pablo CR and the 2014 Colombia iGEM team.
 +
-->
 +
 +
<!--So there are four main parts to this code:
 +
The CAROUSEL, shamelessly taken from
 +
http://getbootstrap.com/examples/carousel/
 +
Code licensed under MIT, documentation under CC BY 3.0. Says so right here at bottom
 +
http://getbootstrap.com/
 +
 +
The Wheeltz NAVIGATION MENU, stolen at gunpoint from the great
 +
Assad Syaifullah Harahap (design) and Justin Hubbard (src code), who's webpage source code includes a beautiful easter egg and i encourage everybody to check out.
 +
http://wheeltz.blogspot.com/2011/12/wheel-sunpeach.html
 +
Mr. Assad also distributes his stuff under CC-BY-3.0
 +
http://creativecommons.org/licenses/by/3.0/
 +
Says so here at the bottom, "some rights reserved"
 +
http://assadotcom.blogspot.com/2011/01/webdesigntuts.html
 +
 +
Some FLIPPY BUTTONS
 +
Truth be told, I have no idea where my co-team members found this stuff.
 +
However, it looks a whole damn lot like the buttons here:
 +
http://www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons/
 +
These were designed by the guys at Dynamic Drive.
 +
Mind you: their stuff is NOT LICENSED under CC-BY-3.0 as far as I can tell.
 +
However, they do allow anyone to use and alter the code, as long as you
 +
attribute it to them and you don't distribute the code itself:
 +
http://www.dynamicdrive.com/notice.htm
 +
 +
They also ask to put this thing wherever we use their stuff:
 +
 +
/***********************************************
 +
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
 +
* This notice MUST stay intact for legal use
 +
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
 +
***********************************************/
 +
 +
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.
 +
-->
 +
 +
<!--So now without further ado,
 +
THE CODE:
 +
-->
 +
 +
<!--PART I: CAROUSEL-->
 +
 +
<!--IMPORTS CAROUSEL SCRIPTS and jQuery too-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
Line 8: Line 80:
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
-
 
+
<script type="text/javascript">
-
 
+
-
 
+
-
<script type="text/javascript">
+
   
   
-
 
+
// CAROUSEL
       $(document).ready(function () {
       $(document).ready(function () {
             $('.carousel').carousel()
             $('.carousel').carousel()
-
                     interval: 1000
+
                     interval: 100
         });
         });
Line 46: 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 91: Line 160:
  table,th,td
  table,th,td
   {
   {
-
   Background: rba(200, 200, 200, 0.5);
+
   Background: rba(200, 200, 200, 0.3);
   }
   }
Line 266: Line 335:
-
<!-- Navigation Menu -->
+
 
 +
 
 +
 
 +
<!-- PART II: NAVIGATION MENU -->
<style>
<style>
Line 662: Line 734:
   border-top: 1px solid #e5e5e5;
   border-top: 1px solid #e5e5e5;
}
}
-
 
-
 
-
 
-
 
@font-face {
@font-face {
Line 797: 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 906: Line 974:
ul.menuBuild li#menu1 > ul{
ul.menuBuild li#menu1 > ul{
-
margin-top:-55px;  
+
margin-top:-75px;  
left:0px;
left:0px;
}
}
Line 931: 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 951: 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,162: Line 1,230:
</style>
</style>
-
 
-
<!-- beginning of your page -->
 
 +
<!--PART III: FLIPPY BUTTONS-->
<style>
<style>
 +
 +
#iGEMLink {
 +
position: relative;
 +
top: 50%;
 +
transform: translateY(10%);
 +
 +
}
#Buttons {
#Buttons {
Line 1,312: 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,341: Line 1,413:
</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>
-
<div id="toppicture">
 
 +
<!--PAGE CODE starts here-->
-
<!--img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="450px" align="left" >
+
<div id="toppicture">
-
<!--Carousel, work in progress-->
+
<!--CAROUSEL-->
<div id="myCarousel" class="carousel slide">
<div id="myCarousel" class="carousel slide">
   <ol class="carousel-indicators">
   <ol class="carousel-indicators">
Line 1,362: 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%" ></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"></html>[[File:Example.jpg]]<html></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/2013/b/b3/Cover.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,374: Line 1,515:
</div>
</div>
-
 
+
<!--NAVIGATION MENU-->
<div id="menu-wrap">
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap1">
Line 1,399: 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,414: 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/Members">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,434: 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,468: Line 1,622:
-
 
+
<!--NAVIGATION BUTTONS-->
<div id="Buttons">
<div id="Buttons">
<ul class="flatflipbuttons">
<ul class="flatflipbuttons">
<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"