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

From 2013.igem.org

(Difference between revisions)
 
(68 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
<!-- 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 47: Line 48:
</style>
</style>
-
/*************************************************************/
+
<style>
-
/**********************Menu inferior**************************/
+
table,th,td
-
/*************************************************************/
+
  {
 +
  Background:#C68E17;
 +
  }
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
<!-- Inferior Menu-->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Line 58: Line 67:
ul.flatflipbuttons{
ul.flatflipbuttons{
-
margin:0;
+
margin-left:500px;
 +
margin-top: 1200px;
padding:0;
padding:0;
list-style:none;
list-style:none;
Line 181: Line 191:
</style>
</style>
-
 
-
/*************************************************************/
 
-
/**********************Menu superior**************************/
 
-
/*************************************************************/
 
 +
<!-- Navigation Menu -->
<style>
<style>
 +
@font-face {
@font-face {
     font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */
     font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */
Line 213: Line 221:
font-size:13px; /* Establishes the global font size */
font-size:13px; /* Establishes the global font size */
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
 +
 +
position: absolute;
 +
    top: 1px;
 +
    right: 10px;
 +
}
}
#menu-wrap .orbit{
#menu-wrap .orbit{
height: 210px;
height: 210px;
-
    margin: 32px; /* Pushes the images in the display to the center */
+
      margin: 30px; /* Pushes the images in the display to the center */       position: absolute;  
-
    position: absolute;  
+
     
-
width: 210px;
+
      width: 210px;
}
}
#menu-wrap .orbit-frame{
#menu-wrap .orbit-frame{
border:2px solid #999; /* Creates a division between the image and wrap5 */
border:2px solid #999; /* Creates a division between the image and wrap5 */
 +
}
}
Line 280: Line 294:
ul.menuBuild ul.submenu li.second{
ul.menuBuild ul.submenu li.second{
-
-webkit-transform:rotate(-6deg); /* webkit browsers */
+
-webkit-transform:rotate(-8deg); /* webkit browsers */
-
-moz-transform:rotate(-6deg);  /* firefox */
+
-moz-transform:rotate(-8deg);  /* firefox */
-
-o-transform:rotate(-6deg);  /* opera */
+
-o-transform:rotate(-8deg);  /* opera */
-
-ms-transform: rotate(-6deg);  /* for IE9 and future versions */
+
-ms-transform: rotate(-8deg);  /* for IE9 and future versions */
-
transform: rotate(-6deg);  /* For older broswers */
+
transform: rotate(-8deg);  /* For older broswers */
margin-left:-3px;
margin-left:-3px;
opacity: 0.85;
opacity: 0.85;
Line 290: Line 304:
ul.menuBuild ul.submenu li.third{
ul.menuBuild ul.submenu li.third{
-
-webkit-transform:rotate(6deg);  /* webkit browsers */
+
-webkit-transform:rotate(-4deg);  /* webkit browsers */
-
-moz-transform:rotate(6deg);  /* firefox */
+
-moz-transform:rotate(-4deg);  /* firefox */
-
-o-transform:rotate(6deg);  /* opera */
+
-o-transform:rotate(-4deg);  /* opera */
-
-ms-transform: rotate(6deg);  /* for IE9 and future versions */
+
-ms-transform: rotate(-4deg);  /* for IE9 and future versions */
-
transform: rotate(6deg);  /* For older broswers */
+
transform: rotate(-4deg);  /* For older broswers */
-
margin-left:-3px;
+
margin-left:-1px;
opacity: 0.85;
opacity: 0.85;
}
}
ul.menuBuild ul.submenu li.fourth{
ul.menuBuild ul.submenu li.fourth{
-
-webkit-transform:rotate(12deg);  /* webkit browsers */
+
-webkit-transform:rotate(0deg);  /* webkit browsers */
-
-moz-transform:rotate(12deg);  /* firefox */
+
-moz-transform:rotate(0deg);  /* firefox */
-
-o-transform:rotate(12deg);  /* opera */
+
-o-transform:rotate(0deg);  /* opera */
-
-ms-transform: rotate(12deg);  /* for IE9 and future versions */
+
-ms-transform: rotate(0deg);  /* for IE9 and future versions */
-
transform: rotate(12deg);  /* For older broswers */
+
transform: rotate(0deg);  /* For older broswers */
margin-left:-3px;
margin-left:-3px;
opacity: 0.85;
opacity: 0.85;
Line 338: Line 352:
ul.menuBuild li:hover span{display:block;}**/
ul.menuBuild li:hover span{display:block;}**/
-
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{
+
  ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{
-webkit-border-radius: 4px 0 0 4px;  /* webkit */
-webkit-border-radius: 4px 0 0 4px;  /* webkit */
-moz-border-radius: 4px 0 0 4px;  /* firefox */
-moz-border-radius: 4px 0 0 4px;  /* firefox */
Line 351: Line 365:
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */
-
    height: 18px;
+
      height: 18px;
-
    padding: 8px;
+
      padding: 8px;
-
    position: absolute;  
+
      position: absolute;  
-
margin-top:100px;  
+
margin-top:145px;  
-
width:138px;  
+
width:138px;
 +
      margin-left:14px;
 +
 +
 
}
}
ul.menuBuild li#menu2{
ul.menuBuild li#menu2{
-
-webkit-transform:rotate(-10deg); /* webkit */
+
-webkit-transform:rotate(20deg); /* webkit */
-
-moz-transform:rotate(-10deg);  /* firefox */
+
-moz-transform:rotate(20deg);  /* firefox */
-
-o-transform:rotate(-10deg); /* opera */
+
-o-transform:rotate(20deg); /* opera */
-
-ms-transform: rotate(-10deg); /* ie9 and future versions */
+
-ms-transform: rotate(20deg); /* ie9 and future versions */
-
transform: rotate(-10deg); /* older browsers */
+
transform: rotate(20deg); /* older browsers */
-
     margin-top: 141px;  
+
     margin-top: 0px;  
-
margin-left:5px;
+
margin-left:35px;
}
}
ul.menuBuild li#menu3{  
ul.menuBuild li#menu3{  
-
-webkit-transform:rotate(-21deg);  /* webkit */
+
-webkit-transform:rotate(15deg);  /* webkit */
-
-moz-transform:rotate(-21deg); /* firefox */
+
-moz-transform:rotate(15deg); /* firefox */
-
-o-transform:rotate(-21deg); /* opera */
+
-o-transform:rotate(15deg); /* opera */
-
-ms-transform: rotate(-21deg); /* ie9 and future versions */
+
-ms-transform: rotate(15deg); /* ie9 and future versions */
-
transform: rotate(-21deg); /* older browsers */
+
transform: rotate(15deg); /* older browsers */
-
     margin-top: 181px;
+
     margin-top: 35px;
-
margin-left:18px;
+
margin-left:20px;
}
}
ul.menuBuild li#menu4{
ul.menuBuild li#menu4{
-
-moz-transform: rotate(-32deg); /* firefox */
+
-moz-transform: rotate(10deg); /* firefox */
-
-ms-transform: rotate(-32deg); /* ie9 and future versions */
+
-ms-transform: rotate(10deg); /* ie9 and future versions */
-
transform: rotate(-32deg); /* older browsers */
+
transform: rotate(10deg); /* older browsers */
-
-webkit-transform: rotate(-32deg); /* webkit */
+
-webkit-transform: rotate(10deg); /* webkit */
-
-o-transform: rotate(-32deg); /* opera */
+
-o-transform: rotate(10deg); /* opera */
-
     margin-top: 218px;  
+
     margin-top: 70px;  
-
margin-left:38px;
+
margin-left:16px;
}
}
ul.menuBuild li#menu5{
ul.menuBuild li#menu5{
-
-moz-transform: rotate(-42deg); /* firefox */
+
-moz-transform: rotate(5deg); /* firefox */
-
-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 */
-
-webkit-transform: rotate(-42deg); /* webkit */
+
-webkit-transform: rotate(5deg); /* webkit */
-
-o-transform: rotate(-42deg); /* opera */
+
-o-transform: rotate(5deg); /* opera */
-
     margin-top: 258px;  
+
     margin-top: 108px;  
-
margin-left:58px;
+
margin-left:12px;
}
}
 +
 +
ul.menuBuild li#menu6{
 +
-moz-transform: rotate(-6deg); /* firefox */
 +
-ms-transform: rotate(-6deg); /* ie9 and future versions */
 +
transform: rotate(-6deg); /* older browsers */
 +
-webkit-transform: rotate(-6deg); /* webkit */
 +
-o-transform: rotate(-6deg); /* opera */
 +
    margin-top: 183px;
 +
margin-left:21px;
 +
}
 +
 +
 +
/***********************************
/***********************************
Line 403: Line 433:
ul.menuBuild li#menu1 > ul{
ul.menuBuild li#menu1 > ul{
-
margin-top:-35px;  
+
margin-top:-55px;  
-
left:19px;
+
left:0px;
}
}
Line 411: Line 441:
-moz-transform:rotate(10deg); /* firefox */
-moz-transform:rotate(10deg); /* firefox */
-o-transform:rotate(10deg); /* opera */
-o-transform:rotate(10deg); /* opera */
-
-ms-transform: rotate(-10deg); /* ie9 and future versions */
+
-ms-transform: rotate(10deg); /* ie9 and future versions */
-
transform: rotate(-10deg); /* older browsers */
+
transform: rotate(10deg); /* older browsers */
-
left: 18px;
+
left: 17px;
     margin-top: -38px;
     margin-top: -38px;
}
}
Line 428: Line 458:
ul.menuBuild li#menu4 > ul{
ul.menuBuild li#menu4 > ul{
-
-webkit-transform:rotate(32deg); /* webkit */
+
-webkit-transform:rotate(0deg); /* webkit */
-
-moz-transform:rotate(32deg); /* firefox */
+
-moz-transform:rotate(0deg); /* firefox */
-
-o-transform:rotate(32deg); /* opera */
+
-o-transform:rotate(0deg); /* opera */
-
-ms-transform: rotate(32deg); /* ie9 and future versions */
+
-ms-transform: rotate(0deg); /* ie9 and future versions */
-
transform: rotate(32deg); /* older browsers */
+
transform: rotate(0deg); /* older browsers */
-
left: 15px;
+
left: 0px;
     margin-top: -40px;
     margin-top: -40px;
}     
}     
ul.menuBuild li#menu5> ul{
ul.menuBuild li#menu5> ul{
 +
-webkit-transform:rotate(0deg); /* webkit */
 +
-moz-transform:rotate(0deg); /* firefox */
 +
-o-transform:rotate(0deg); /* opera */
 +
-ms-transform: rotate(0deg); /* ie9 and future versions */
 +
transform: rotate(0deg); /* older browsers */
 +
left: 0px;
 +
    margin-top: -50px;
 +
}             
 +
 +
ul.menuBuild li#menu6> ul{
-webkit-transform:rotate(42deg); /* webkit */
-webkit-transform:rotate(42deg); /* webkit */
-moz-transform:rotate(42deg); /* firefox */
-moz-transform:rotate(42deg); /* firefox */
Line 443: Line 483:
-ms-transform: rotate(42deg); /* ie9 and future versions */
-ms-transform: rotate(42deg); /* ie9 and future versions */
transform: rotate(42deg); /* older browsers */
transform: rotate(42deg); /* older browsers */
-
left: 15px;
+
left: 0px;
-
     margin-top: -41px;
+
     margin-top: -50px;
}               
}               
 +
 +
 +
ul.menuBuild li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */
ul.menuBuild li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */
   display: block;  /* makes the child block visible - one of the most important declarations */
   display: block;  /* makes the child block visible - one of the most important declarations */
Line 603: Line 646:
 +
</style>
 +
<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">
 +
    $(document).ready(function() {
 +
        $('#slider').s3Slider({
 +
            timeOut: 5000
 +
        });
 +
    });
 +
</script>
-
 
+
<!-- beginning of your page -->
-
</style>
+
Line 624: Line 676:
<![endif]-->
<![endif]-->
 +
<style>
 +
img {
 +
    position: absolute;
 +
    left: 0px;
 +
    top: 0px;
 +
 +
 
 +
}
 +
 +
</style>
Line 630: Line 692:
<body>
<body>
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="450px" align="left" >
 +
<div id="menu-wrap">
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap1">
Line 642: Line 708:
<div class="nav-holder">
<div class="nav-holder">
-
<!-- start menu !-->
+
<!-- start navigation menu !-->
<ul class="menuBuild">
<ul class="menuBuild">
-
   <li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> 
+
   <li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a>  
-
  </li>
+
    
    
-
  <li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a>
+
     <ul class="submenu sub1">
-
     <ul class="submenu sub2">
+
       <li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li>
-
       <li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li>
+
       <li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li>
       <li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li>
       <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>
     </ul>
     </ul>
 +
   </li>
   </li>
    
    
-
   <li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a>
+
   <li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a>
   </li>
   </li>
    
    
-
   <li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a>
+
   <li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a>   
-
     <ul class="submenu sub4">
+
 
 +
  </li>
 +
 
 +
  <li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a>
 +
      
 +
<ul class="submenu sub4">
 +
 
 +
      <li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li>
 +
      <li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li>
 +
      <li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li>
 +
          </ul>
 +
  </li>
 +
 
 +
 
 +
  <li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a>
 +
 
 +
<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"></a>Attributions</li>
Line 669: Line 750:
       <li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li>
       <li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li>
     </ul>
     </ul>
 +
 +
 
   </li>
   </li>
-
 
+
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a>   
-
  <li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a>   
+
   </li>
   </li>
 +
 +
    
    
</ul>
</ul>
Line 688: Line 772:
-
<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>  
-
 
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<!-- beginning of your page -->
+
-
 
+
-
 
+
-
<table width="1500px" align="center">
+
-
<tr ><td coslpan="2" height="35px"></td></tr>
+
-
<tr>
+
-
 
+
-
<td width="35%" valign="top">
+
-
<h3>Welcome ! </h3>
+
-
<p>
+
-
This is a basic template you may use to customize your wiki,
+
-
 
+
-
you can take it apart and modify it as much as you want. The
+
-
 
+
-
links and tabs provided here are basic suggestions, feel free
+
-
 
+
-
to adapt it for your team and your project. </p>
+
-
<p>
+
-
If you are looking for general  wiki guidelines,
+
-
 
+
-
restrictions, design tips and more, visit the <br><a
+
-
 
+
-
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To
+
-
 
+
-
Page</a></p>
+
-
</p>
+
-
 
+
-
 
+
-
</td>
+
-
 
+
-
<td width="5%" > </td>
+
-
 
+
-
 
+
-
<!-- here you can place an image related to your project or
+
-
 
+
-
your logo! -->
+
-
<td width="60%" > <img
+
-
 
+
-
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima
+
-
 
+
-
ge.jpg" width="600px" height="300px"></td>
+
-
 
+
-
<tr ><td coslpan="2" height="35px"></td></tr>
 
-
</tr>
 
-
</table>
 

Latest revision as of 17:28, 22 August 2014

' Wheeltz - CSS3 Navigational Wheel Menu

  • Home
  • University
  • Facebook
  • Twitter


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