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

From 2014.igem.org

(Difference between revisions)
 
(267 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 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-carousel.js"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
 +
 +
<script type="text/javascript">
 +
 +
// CAROUSEL
 +
      $(document).ready(function () {
 +
            $('.carousel').carousel()
 +
                    interval: 100
 +
 +
        });
 +
 +
      $(document).ready(function () {
 +
            $('.dropdown-toggle').dropdown();
 +
        });
 +
 +
$('#myTab a').click(function (e) {
 +
  e.preventDefault();
 +
  $(this).tab('show');
 +
});
 +
</script>
<!-- this section changes the default wiki template to a white full width background -->
<!-- this section changes the default wiki template to a white full width background -->
Line 18: 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 29: Line 126:
height: 100%;
height: 100%;
border: 0px;
border: 0px;
-
background-color: #C68E17;
+
/*background-color: #C68E17;*/
 +
        background: url(https://static.igem.org/mediawiki/2014/2/24/Paper-background.jpg) no-repeat center center fixed;
 +
        -webkit-background-size: cover;
 +
        -moz-background-size: cover;
 +
        -o-background-size: cover;
 +
        background-size: cover;
margin: 0px;
margin: 0px;
padding: 0px;
padding: 0px;
Line 42: Line 144:
width: 100%;  
width: 100%;  
height: 100%;  
height: 100%;  
-
background-color: #C68E17;
+
        margin: 0px;
 +
        padding: 0px;
 +
/*background-color: #C68E17;*/
 +
        background: url(https://static.igem.org/mediawiki/2014/2/24/Paper-background.jpg)  no-repeat center center fixed;
 +
        -webkit-background-size: cover;
 +
        -moz-background-size: cover;
 +
        -o-background-size: cover;
 +
        background-size: cover;
}
}
Line 51: Line 160:
  table,th,td
  table,th,td
   {
   {
-
   Background:#C68E17;
+
   Background: rba(200, 200, 200, 0.3);
   }
   }
</style>
</style>
 +
<style>
 +
/*Carousel, work in progress*/
 +
.carousel {
 +
  position: relative;
 +
  margin-bottom: 20px;
 +
  line-height: 1;
 +
}
-
<!-- Navigation Menu -->
+
.carousel-inner {
 +
  position: relative;
 +
  width: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.carousel-inner > .item {
 +
  position: relative;
 +
  display: none;
 +
  -webkit-transition: 0.6s ease-in-out left;
 +
    -moz-transition: 0.6s ease-in-out left;
 +
      -o-transition: 0.6s ease-in-out left;
 +
          transition: 0.6s ease-in-out left;
 +
}
 +
 
 +
.carousel-inner > .item > img,
 +
.carousel-inner > .item > a > img {
 +
  display: block;
 +
  line-height: 1;
 +
}
 +
 
 +
.carousel-inner > .active,
 +
.carousel-inner > .next,
 +
.carousel-inner > .prev {
 +
  display: block;
 +
}
 +
 
 +
.carousel-inner > .active {
 +
  left: 0;
 +
}
 +
 
 +
.carousel-inner > .next,
 +
.carousel-inner > .prev {
 +
  position: absolute;
 +
  top: 0;
 +
  width: 100%;
 +
}
 +
 
 +
.carousel-inner > .next {
 +
  left: 100%;
 +
}
 +
 
 +
.carousel-inner > .prev {
 +
  left: -100%;
 +
}
 +
 
 +
.carousel-inner > .next.left,
 +
.carousel-inner > .prev.right {
 +
  left: 0;
 +
}
 +
 
 +
.carousel-inner > .active.left {
 +
  left: -100%;
 +
}
 +
 
 +
.carousel-inner > .active.right {
 +
  left: 100%;
 +
}
 +
 
 +
.carousel-control {
 +
  position: absolute;
 +
  top: 40%;
 +
  left: 15px;
 +
  width: 40px;
 +
  height: 40px;
 +
  margin-top: -20px;
 +
  font-size: 60px;
 +
  font-weight: 100;
 +
  line-height: 30px;
 +
  color: #ffffff;
 +
  text-align: center;
 +
  background: #222222;
 +
  border: 3px solid #ffffff;
 +
  -webkit-border-radius: 23px;
 +
    -moz-border-radius: 23px;
 +
          border-radius: 23px;
 +
  opacity: 0.5;
 +
  filter: alpha(opacity=50);
 +
}
 +
 
 +
.carousel-control.right {
 +
  right: 15px;
 +
  left: auto;
 +
}
 +
 
 +
.carousel-control:hover,
 +
.carousel-control:focus {
 +
  color: #ffffff;
 +
  text-decoration: none;
 +
  opacity: 0.9;
 +
  filter: alpha(opacity=90);
 +
}
 +
 
 +
.carousel-indicators {
 +
  position: absolute;
 +
  top: 15px;
 +
  right: 15px;
 +
  z-index: 5;
 +
  margin: 0;
 +
  list-style: none;
 +
}
 +
 
 +
.carousel-indicators li {
 +
  display: block;
 +
  float: left;
 +
  width: 10px;
 +
  height: 10px;
 +
  margin-left: 5px;
 +
  text-indent: -999px;
 +
  background-color: #ccc;
 +
  background-color: rgba(255, 255, 255, 0.25);
 +
  border-radius: 5px;
 +
}
 +
 
 +
.carousel-indicators .active {
 +
  background-color: #fff;
 +
}
 +
 
 +
.carousel-caption {
 +
  position: absolute;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  padding: 15px;
 +
  background: #333333;
 +
  background: rgba(0, 0, 0, 0.75);
 +
}
 +
 
 +
.carousel-caption h4,
 +
.carousel-caption p {
 +
  line-height: 20px;
 +
  color: #ffffff;
 +
}
 +
 
 +
.carousel-caption h4 {
 +
  margin: 0 0 5px;
 +
}
 +
 
 +
.carousel-caption p {
 +
  margin-bottom: 0;
 +
}
 +
 
 +
 
 +
.curs1
 +
  {
 +
  font-size: 60px;
 +
  font-family: cursive;
 +
  border: none;
 +
  padding-bottom: 0px;
 +
  margin-bottom: 0px;
 +
  }
 +
 
 +
.curs2
 +
  {
 +
  font-size: 30px;
 +
  font-family: cursive;
 +
  border: none;
 +
  }
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!-- PART II: NAVIGATION MENU -->
<style>
<style>
 +
 +
.logoLink {
 +
  position:absolute;
 +
  width:100%;
 +
  height:100%;
 +
  top:0;
 +
  left: 0;
 +
}
 +
.container,
 +
.navbar-static-top .container,
 +
.navbar-fixed-top .container,
 +
.navbar-fixed-bottom .container {
 +
  width: 940px;
 +
}
 +
 +
.span12 {
 +
  width: 940px;
 +
}
 +
 +
.span11 {
 +
  width: 60%;
 +
  margin: auto;
 +
}
 +
 +
.span10 {
 +
  width: 780px;
 +
}
 +
 +
.span9 {
 +
  width: 700px;
 +
}
 +
 +
.span8 {
 +
  width: 620px;
 +
}
 +
 +
.span7 {
 +
  width: 540px;
 +
}
 +
 +
.span6 {
 +
  width: 460px;
 +
}
 +
 +
.span5 {
 +
  width: 380px;
 +
}
 +
 +
.span4 {
 +
  width: 300px;
 +
}
 +
 +
.span3 {
 +
  width: 220px;
 +
}
 +
 +
.span2 {
 +
  width: 140px;
 +
}
 +
 +
.span1 {
 +
  width: 60px;
 +
}
 +
 +
.offset12 {
 +
  margin-left: 980px;
 +
}
 +
 +
.offset11 {
 +
  margin-left: 900px;
 +
}
 +
 +
.offset10 {
 +
  margin-left: 820px;
 +
}
 +
 +
.offset9 {
 +
  margin-left: 740px;
 +
}
 +
 +
.offset8 {
 +
  margin-left: 660px;
 +
}
 +
 +
.offset7 {
 +
  margin-left: 580px;
 +
}
 +
 +
.offset6 {
 +
  margin-left: 500px;
 +
}
 +
 +
.offset5 {
 +
  margin-left: 420px;
 +
}
 +
 +
.offset4 {
 +
  margin-left: 340px;
 +
}
 +
 +
.offset3 {
 +
  margin-left: 260px;
 +
}
 +
 +
.offset2 {
 +
  margin-left: 180px;
 +
}
 +
 +
.offset1 {
 +
  margin-left: 100px;
 +
}
 +
 +
 +
 +
.row-fluid {
 +
  width: 100%;
 +
  *zoom: 1;
 +
}
 +
 +
.row-fluid:before,
 +
.row-fluid:after {
 +
  display: table;
 +
  line-height: 0;
 +
  content: "";
 +
}
 +
 +
.row-fluid:after {
 +
  clear: both;
 +
}
 +
 +
.row-fluid [class*="span"] {
 +
  display: block;
 +
  float: left;
 +
  width: 100%;
 +
  min-height: 30px;
 +
  margin-left: 2.127659574468085%;
 +
  *margin-left: 2.074468085106383%;
 +
  -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
          box-sizing: border-box;
 +
}
 +
 +
.row-fluid [class*="span"]:first-child {
 +
  margin-left: 0;
 +
}
 +
 +
.row-fluid .controls-row [class*="span"] + [class*="span"] {
 +
  margin-left: 2.127659574468085%;
 +
}
 +
 +
.row-fluid .span12 {
 +
  width: 100%;
 +
  *width: 99.94680851063829%;
 +
}
 +
 +
.row-fluid .span11 {
 +
  width: 91.48936170212765%;
 +
  *width: 91.43617021276594%;
 +
}
 +
 +
.row-fluid .span10 {
 +
  width: 82.97872340425532%;
 +
  *width: 82.92553191489361%;
 +
}
 +
 +
.row-fluid .span9 {
 +
  width: 74.46808510638297%;
 +
  *width: 74.41489361702126%;
 +
}
 +
 +
.row-fluid .span8 {
 +
  width: 65.95744680851064%;
 +
  *width: 65.90425531914893%;
 +
}
 +
 +
.row-fluid .span7 {
 +
  width: 57.44680851063829%;
 +
  *width: 57.39361702127659%;
 +
}
 +
 +
.row-fluid .span6 {
 +
  width: 48.93617021276595%;
 +
  *width: 48.88297872340425%;
 +
}
 +
 +
.row-fluid .span5 {
 +
  width: 40.42553191489362%;
 +
  *width: 40.37234042553192%;
 +
}
 +
 +
.row-fluid .span4 {
 +
  width: 31.914893617021278%;
 +
  *width: 31.861702127659576%;
 +
}
 +
 +
.row-fluid .span3 {
 +
  width: 23.404255319148934%;
 +
  *width: 23.351063829787233%;
 +
}
 +
 +
.row-fluid .span2 {
 +
  width: 14.893617021276595%;
 +
  *width: 14.840425531914894%;
 +
}
 +
 +
.row-fluid .span1 {
 +
  width: 6.382978723404255%;
 +
  *width: 6.329787234042553%;
 +
}
 +
 +
.row-fluid .offset12 {
 +
  margin-left: 104.25531914893617%;
 +
  *margin-left: 104.14893617021275%;
 +
}
 +
 +
.row-fluid .offset12:first-child {
 +
  margin-left: 102.12765957446808%;
 +
  *margin-left: 102.02127659574467%;
 +
}
 +
 +
.row-fluid .offset11 {
 +
  margin-left: 95.74468085106382%;
 +
  *margin-left: 95.6382978723404%;
 +
}
 +
 +
.row-fluid .offset11:first-child {
 +
  margin-left: 93.61702127659574%;
 +
  *margin-left: 93.51063829787232%;
 +
}
 +
 +
.row-fluid .offset10 {
 +
  margin-left: 87.23404255319149%;
 +
  *margin-left: 87.12765957446807%;
 +
}
 +
 +
.row-fluid .offset10:first-child {
 +
  margin-left: 85.1063829787234%;
 +
  *margin-left: 84.99999999999999%;
 +
}
 +
 +
.row-fluid .offset9 {
 +
  margin-left: 78.72340425531914%;
 +
  *margin-left: 78.61702127659572%;
 +
}
 +
 +
.row-fluid .offset9:first-child {
 +
  margin-left: 76.59574468085106%;
 +
  *margin-left: 76.48936170212764%;
 +
}
 +
 +
.row-fluid .offset8 {
 +
  margin-left: 70.2127659574468%;
 +
  *margin-left: 70.10638297872339%;
 +
}
 +
 +
.row-fluid .offset8:first-child {
 +
  margin-left: 68.08510638297872%;
 +
  *margin-left: 67.9787234042553%;
 +
}
 +
 +
.row-fluid .offset7 {
 +
  margin-left: 61.70212765957446%;
 +
  *margin-left: 61.59574468085106%;
 +
}
 +
 +
.row-fluid .offset7:first-child {
 +
  margin-left: 59.574468085106375%;
 +
  *margin-left: 59.46808510638297%;
 +
}
 +
 +
.row-fluid .offset6 {
 +
  margin-left: 53.191489361702125%;
 +
  *margin-left: 53.085106382978715%;
 +
}
 +
 +
.row-fluid .offset6:first-child {
 +
  margin-left: 51.063829787234035%;
 +
  *margin-left: 50.95744680851063%;
 +
}
 +
 +
.row-fluid .offset5 {
 +
  margin-left: 44.68085106382979%;
 +
  *margin-left: 44.57446808510638%;
 +
}
 +
 +
.row-fluid .offset5:first-child {
 +
  margin-left: 42.5531914893617%;
 +
  *margin-left: 42.4468085106383%;
 +
}
 +
 +
.row-fluid .offset4 {
 +
  margin-left: 36.170212765957444%;
 +
  *margin-left: 36.06382978723405%;
 +
}
 +
 +
.row-fluid .offset4:first-child {
 +
  margin-left: 34.04255319148936%;
 +
  *margin-left: 33.93617021276596%;
 +
}
 +
 +
.row-fluid .offset3 {
 +
  margin-left: 27.659574468085104%;
 +
  *margin-left: 27.5531914893617%;
 +
}
 +
 +
.row-fluid .offset3:first-child {
 +
  margin-left: 25.53191489361702%;
 +
  *margin-left: 25.425531914893618%;
 +
}
 +
 +
.row-fluid .offset2 {
 +
  margin-left: 19.148936170212764%;
 +
  *margin-left: 19.04255319148936%;
 +
}
 +
 +
.row-fluid .offset2:first-child {
 +
  margin-left: 17.02127659574468%;
 +
  *margin-left: 16.914893617021278%;
 +
}
 +
 +
.row-fluid .offset1 {
 +
  margin-left: 10.638297872340425%;
 +
  *margin-left: 10.53191489361702%;
 +
}
 +
 +
.row-fluid .offset1:first-child {
 +
  margin-left: 8.51063829787234%;
 +
  *margin-left: 8.404255319148938%;
 +
}
 +
 +
[class*="span"].hide,
 +
.row-fluid [class*="span"].hide {
 +
  display: none;
 +
}
 +
 +
[class*="span"].pull-right,
 +
.row-fluid [class*="span"].pull-right {
 +
  float: right;
 +
}
 +
 +
 +
.container-fluid {
 +
  padding-right: 20px;
 +
  padding-left: 20px;
 +
  *zoom: 1;
 +
}
 +
 +
.container-fluid:before,
 +
.container-fluid:after {
 +
  display: table;
 +
  line-height: 0;
 +
  content: "";
 +
}
 +
 +
.container-fluid:after {
 +
  clear: both;
 +
}
 +
 +
p {
 +
  margin: 0 0 10px;
 +
}
 +
 +
 +
 +
.accordion {
 +
  margin-bottom: 20px;
 +
}
 +
 +
.accordion-group {
 +
  margin-bottom: 2px;
 +
  border: 1px solid #e5e5e5;
 +
  -webkit-border-radius: 4px;
 +
    -moz-border-radius: 4px;
 +
          border-radius: 4px;
 +
}
 +
 +
.accordion-heading {
 +
  border-bottom: 0;
 +
}
 +
 +
.accordion-heading .accordion-toggle {
 +
  display: block;
 +
  padding: 8px 15px;
 +
}
 +
 +
.accordion-toggle {
 +
  cursor: pointer;
 +
}
 +
 +
.accordion-inner {
 +
  padding: 9px 15px;
 +
  border-top: 1px solid #e5e5e5;
 +
}
@font-face {
@font-face {
Line 70: Line 744:
     font-style: normal; /* The style of your font (e.g. italic) */
     font-style: normal; /* The style of your font (e.g. italic) */
}
}
-
 
-
body{
 
-
} /* Editing this may conflict with the body tag in your main sites css file.  Delete it if you like. */
 
a{  
a{  
Line 81: Line 752:
#menu-wrap{  /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */
#menu-wrap{  /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */
background:none; /* This isn't needed */
background:none; /* This isn't needed */
-
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */
+
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */  
 +
        /*Added this stuff to make dynamic resize, PCR*/
 +
       
 +
 
 +
       
 +
 
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */  
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */  
font-size:13px; /* Establishes the global font size */
font-size:13px; /* Establishes the global font size */
Line 88: Line 764:
position: absolute;
position: absolute;
     top: 1px;
     top: 1px;
-
     right: 60px;
+
     right: 80px;
}
}
#menu-wrap .orbit{
#menu-wrap .orbit{
-
height: 210px;
+
      height: 210px;
-
       margin: 30px; /* Pushes the images in the display to the center */      position: absolute;  
+
       margin: 30px; /* Pushes the images in the display to the center */      
-
     
+
       position: absolute;
       width: 210px;
       width: 210px;
-
}
+
}
#menu-wrap .orbit-frame{
#menu-wrap .orbit-frame{
Line 106: Line 782:
/** menu links **/
/** menu links **/
 +
/** tester **/
/** tester **/
ul.menuBuild, ul.menuBuild ul {
ul.menuBuild, ul.menuBuild ul {
Line 188: 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 297: Line 974:
ul.menuBuild li#menu1 > ul{
ul.menuBuild li#menu1 > ul{
-
margin-top:-55px;  
+
margin-top:-75px;  
left:0px;
left:0px;
}
}
Line 322: 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 342: 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 514: Line 1,191:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script>
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script>
-
<script type="text/javascript">
+
<script type="text/javascript">   $(document).ready(function() {
-
    $(document).ready(function() {
+
         $('#slider').s3Slider({
         $('#slider').s3Slider({
             timeOut: 5000
             timeOut: 5000
Line 523: Line 1,199:
 +
<style>
-
<!-- beginning of your page -->
+
#top {
 +
 
 +
background:none; /* This isn't needed */
 +
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */
 +
font-family:Franklin Gothic Medium,Helvetica, Myriad Web Pro, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */
 +
font-size:13px; /* Establishes the global font size */
 +
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
 +
 
 +
position: absolute;
 +
top: 0px;
 +
 
 +
}
 +
 
 +
 
 +
#text {
 +
 
 +
  width: 100%;
 +
  padding: 0px;
 +
  /*background-color:  #C68E17;*/
 +
  position: relative;
 +
  height: 100%;
 +
 
 +
  position: absolute;
 +
  top: 500px;
 +
  left:0px;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
<!--PART III: FLIPPY BUTTONS-->
 +
<style>
 +
 
 +
#iGEMLink {
 +
position: relative;
 +
top: 50%;
 +
transform: translateY(10%);
 +
 
 +
}
 +
 
 +
#Buttons {
 +
 
 +
background:none; /* This isn't needed */
 +
height:100px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */
 +
width:100%;
 +
text-align:center;
 +
position: absolute;
 +
top: 440px;
 +
left: 0px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
ul.flatflipbuttons{
 +
text-align:center;
 +
margin-left:0px;
 +
padding:0;
 +
list-style:none;
 +
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
 +
-moz-perspective: 10000px;
 +
perspective: 10000px;
 +
 
 +
}
 +
 
 +
ul.flatflipbuttons li{
 +
margin:200;
 +
display: inline-block;
 +
width: 50px; /* dimensions of buttons. */
 +
height: 50px;
 +
margin-right: 15px; /* spacing between buttons */
 +
background: white;
 +
text-transform: uppercase;
 +
text-align: center;
 +
}
 +
 
 +
ul.flatflipbuttons li a{
 +
display:table;
 +
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
 +
width: 100%;
 +
height: 100%;
 +
margin-bottom: 4px;
 +
color: black;
 +
background: #3B9DD5;
 +
text-decoration: none;
 +
outline: none;
 +
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
 +
-moz-transition:all 300ms ease-out;
 +
transition:all 300ms ease-out;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(1) a{
 +
color: white;
 +
background: #3B9DD5;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(2) a{
 +
background: #A1CD3A;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(3) a{
 +
background: #80C5EC;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(4) a{
 +
color: white;
 +
background: #635746;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(5) a{
 +
background: #F2C96D;
 +
}
 +
 
 +
ul.flatflipbuttons li a span{
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: table-cell;
 +
vertical-align: middle;
 +
align: middle;
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
 +
-moz-transition: all 300ms ease-out;
 +
transition: all 300ms ease-out;
 +
}
 +
 
 +
ul.flatflipbuttons li b{ /* CSS for text beneath button */
 +
display: block;
 +
position: relative;
 +
width: 100%;
 +
opacity: 0;
 +
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
 +
-moz-transition: all 300ms ease-out 0.2s;
 +
transition: all 300ms ease-out 0.2s;
 +
}
 +
 
 +
 
 +
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
 +
border-width: 0;
 +
vertical-align: middle;
 +
}
 +
 
 +
 
 +
ul.flatflipbuttons li:hover a{
 +
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
-moz-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
background: #c1e4ec; /* bgcolor of button onMouseover*/
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 
 +
ul.flatflipbuttons li:hover a span{
 +
color: black; /* color of icon font onMouseover */
 +
-webkit-transform: rotateY(180deg);
 +
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
transform: rotateY(180deg);
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 
 +
 
 +
ul.flatflipbuttons li:hover b{
 +
opacity: 1;
 +
}
 +
 
 +
/* CSS for 2nd menu below specifically */
 +
 
 +
ul.second li a{
 +
background: #eee !important;
 +
}
 +
 
 +
ul.second li a:hover{
 +
background: #ddd !important;
 +
}
 +
 
 +
</style>
-
<!--  Menu-->'
 
 +
<!--  Menu-->
-
<div id="top">
 
-
<!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 543: Line 1,399:
<style>
<style>
-
img {
+
#toppicture  {
     position: absolute;
     position: absolute;
     left: 0px;
     left: 0px;
     top: 0px;
     top: 0px;
-
 
+
    margin: none;
-
 
+
    border: none; 
}
}
Line 557: Line 1,413:
</head>
</head>
-
<body>
+
<!--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>
-
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="450px" align="left" >
+
<!--JS-->
 +
<script src='http://assets.codepen.io/assets/libs/fullpage/jquery-ab8e840c3dad7ccf2deadb8c40d53bdb.js'></script>
 +
 
 +
 
 +
<!--PAGE CODE starts here-->
 +
 
 +
<div id="toppicture">
 +
 
 +
<!--CAROUSEL-->
 +
<div id="myCarousel" class="carousel slide">
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
    <li data-target="#myCarousel" data-slide-to="1"></li>
 +
    <li data-target="#myCarousel" data-slide-to="2"></li>
 +
    <li data-target="#myCarousel" data-slide-to="3"></li>
 +
 
 +
 
 +
  </ol>
 +
 
 +
  <!-- Carousel items -->
 +
  <div class="carousel-inner">
 +
    <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/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/e/ec/Colombia_Header3.png" width="100%" ></a></div>
 +
 
 +
 
 +
  </div>
 +
  <!-- Carousel nav -->
 +
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 +
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
 +
</div>
 +
<!--NAVIGATION MENU-->
<div id="menu-wrap">
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap1">
Line 567: Line 1,521:
<div class="wrap3">
<div class="wrap3">
<div class="wrap4">  
<div class="wrap4">  
-
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span>
+
<a href="https://2014.igem.org/Team:Colombia">
 +
<span class="logoLink"></span><span><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span></a>
<div class="completer"></div>
<div class="completer"></div>
Line 585: 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 600: 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>
Line 611: Line 1,568:
<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 620: 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 636: Line 1,604:
</div><!-- wrap1 !-->
</div><!-- wrap1 !-->
</div><!-- menu-wrap !-->
</div><!-- menu-wrap !-->
-
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
Line 643: Line 1,610:
</div>
</div>
-
<table width="975px" align="center">
 
-
<tr>
 
-
<!-- first column -->
 
-
<td width="30%">
 
-
<!-- you can have an image related to your paragraph -->
 
-
<img
 
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
+
<!-- Inferior Menu-->
-
ge.jpg" width="300px" height="200px">
+
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-
<h4> Results</h4>
+
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii
+
-
accumsan euripidis in, eum liber
+
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-
hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit
+
-
ridens inciderint id. </p>
 
-
</td>
 
-
<td width="5%"></td>
 
 +
<!--NAVIGATION BUTTONS-->
 +
<div id="Buttons">
 +
<ul class="flatflipbuttons">
-
<!-- second column -->
+
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li>
-
<td width="30%">
+
<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>
-
<img  
+
<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>
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
+
</ul>
-
ge.jpg" width="300px" height="200px">
+
</div>
-
<h4>Human Practice</h4>
+
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii
+
-
accumsan euripidis in,
 
-
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo
 
-
dicit ridens inciderint id. </p>
 
-
</td>
 
-
<td width="5%"></td>
 
-
<!-- third column -->
 
-
<td width="30%">
 
-
<img
 
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
 
-
ge.jpg" width="300px" height="200px">
+
<div id="text">
-
<h4>Follow us on Twitter/Facebook!</h4>
+
 
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii
+
 
-
accumsan euripidis in,
 
-
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur,
 
-
quo dicit ridens inciderint id. </p>
 
-
</td>
 
-
</tr>
 
-
</table>
 
-
<!-- end of 3 column content -->
 
-
</div>
 
-
</body>
 
-
</html>
 
<!-- end of page -->
<!-- end of page -->

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"