|
|
| Line 56: |
Line 56: |
| | </style> | | </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">
| |
| - |
| |
| - | <style>
| |
| - |
| |
| - | #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 */
| |
| - |
| |
| - | position: absolute;
| |
| - | botton: 0px;
| |
| - | left: 0px;
| |
| - |
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | ul.flatflipbuttons{
| |
| - | 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;
| |
| - | position: absolute;
| |
| - | botton: 3px;
| |
| - | }
| |
| - |
| |
| - | 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>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | </ul>
| |
| - |
| |
| - | <!-- end menu !-->
| |
| - |
| |
| - | </div><!-- nav holder !-->
| |
| - | </div><!-- wrap5 !-->
| |
| - | </div><!-- wrap4 !-->
| |
| - | </div><!-- wrap3 !-->
| |
| - | </div><!-- wrap2 !-->
| |
| - | </div><!-- wrap1 !-->
| |
| - | </div><!-- menu-wrap !-->
| |
| - |
| |
| - |
| |
| - | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
| |
| - |
| |
| - |
| |
| - | <body>
| |
| - |
| |
| - |
| |
| - | <div id="Buttons">
| |
| - |
| |
| - | <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="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</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>
| |
| - |
| |
| - | </ul>
| |
| - |
| |
| - | </div>
| |
| | | | |
| | | | |
"
