Template:Team:York UK/MainHeader

From 2013.igem.org

(Difference between revisions)
 
(53 intermediate revisions not shown)
Line 5: Line 5:
     <meta charset="utf-8">
     <meta charset="utf-8">
      
      
-
      
+
     <link rel="shortcut icon" type="image/gif" href="https://static.igem.org/mediawiki/2013/2/21/York-Favicon.gif"> 
     <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
     <!--<link rel='stylesheet' type='text/css' href="https://2013.igem.org/Team:YORK_UK/static/global.css?action=raw&ctype=text/css"/>-->
     <!--<link rel='stylesheet' type='text/css' href="https://2013.igem.org/Team:YORK_UK/static/global.css?action=raw&ctype=text/css"/>-->
Line 285: Line 285:
display: none;
display: none;
position: relative;
position: relative;
-
width: 520px;
+
width: 700px;
-
left: 50px;
+
left: -290px;
}
}
Line 563: Line 563:
       list-style-image: url('https://static.igem.org/mediawiki/2013/8/8f/York-Check.GIF');
       list-style-image: url('https://static.igem.org/mediawiki/2013/8/8f/York-Check.GIF');
}
}
 +
 +
.gallery-section { padding: 10px 20px; }
 +
 +
.gallery-section a { margin: 10px; }
 +
 +
.gallery-section img { margin: 10px !important; }
        
        
       #world-bg {
       #world-bg {
Line 587: Line 593:
         z-index: 900;
         z-index: 900;
         margin-right: 10px;
         margin-right: 10px;
-
 
-
        transition: width 0.8s, display 5s;
 
-
-webkit-transition: width 2s, height 2s;
 
-webkit-animation:float-a 1.5s ease-in-out infinite;
-webkit-animation:float-a 1.5s ease-in-out infinite;
Line 613: Line 616:
            
            
       .bubble:hover .hide {
       .bubble:hover .hide {
 +
                height: auto;
                 display: inline;
                 display: inline;
 +
                animation-name: appear;
 +
                animation-duration: 0.4s;
 +
                animation-delay:0.2s;
 +
                animation-fill-mode: forwards;
 +
                -webkit-animation-name: appear;
 +
                -webkit-animation-duration: 0.4s;
 +
                -webkit-animation-delay:0.2s;
 +
                -webkit-animation-fill-mode: forwards;
 +
                /*opacity: 1;*/
       }
       }
 +
 +
@keyframes appear
 +
{
 +
from {opacity:0;}
 +
to {opacity:1;}
 +
}
 +
@-webkit-keyframes appear
 +
{
 +
from {opacity:0;}
 +
to {opacity:1;}
 +
}
            
            
       .bubble .hide {
       .bubble .hide {
       display: none;
       display: none;
 +
                opacity: 0;
       }
       }
        
        
Line 639: Line 664:
        
        
       .bubble#recycle-bubble {
       .bubble#recycle-bubble {
-
         top: 100px;
+
         top: 140px;
-
         left: 150px;
+
         left: 1100px;
         background: rgb(57, 171, 154);
         background: rgb(57, 171, 154);
       }
       }
-
 
-
      .bubble#recycle-bubble:hover{width: 280px; height: 48px;}
 
        
        
       .bubble#recycle-bubble:after {
       .bubble#recycle-bubble:after {
Line 652: Line 675:
          
          
       .bubble#battery-bubble {
       .bubble#battery-bubble {
-
         top: 268px;
+
         top: 300px;
-
         left: 70px;
+
         left: 997px;
         background: rgb(39, 145, 158);
         background: rgb(39, 145, 158);
       }
       }
Line 660: Line 683:
            
            
       .bubble#energy-bubble {
       .bubble#energy-bubble {
-
         top: 300px;
+
         top: 268px;
-
         left: 1035px;
+
         left: 70px;
         background: rgb(28, 171, 207);
         background: rgb(28, 171, 207);
       }
       }
Line 668: Line 691:
              
              
       .bubble#fuel-bubble {
       .bubble#fuel-bubble {
-
         top: 60px;
+
 
-
         left: 830px;
+
         top: 100px;
 +
         left: 150px;
 +
 
         background: rgb(229, 38, 110);
         background: rgb(229, 38, 110);
       }
       }
        
        
 +
      .bubble#gold-bubble:hover {left:775px}
 +
       .bubble#fuel-bubble:after { left: 89px; border-color: rgb(229, 38, 110) transparent; }
       .bubble#fuel-bubble:after { left: 89px; border-color: rgb(229, 38, 110) transparent; }
                
                
       .bubble#gold-bubble {
       .bubble#gold-bubble {
-
         top: 131px;
+
         top: 60px;
-
         left: 1087px;
+
         left: 840px;
         background: rgb(241, 180, 14);
         background: rgb(241, 180, 14);
       }
       }
Line 683: Line 710:
       .bubble#gold-bubble:after { border-color: rgb(241, 180, 14) transparent; }
       .bubble#gold-bubble:after { border-color: rgb(241, 180, 14) transparent; }
-
       .bubble#gold-bubble:hover {
+
       .bubble#recycle-bubble:hover {
         left: 1017px;
         left: 1017px;
       }
       }
Line 844: Line 871:
</head>
</head>
<body>
<body>
 +
<div id="header">
<div id="header">
     <div id="navigation">
     <div id="navigation">
Line 877: Line 905:
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=modelling">Modelling</a>
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=modelling">Modelling</a>
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=protocols">Protocols</a>
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=protocols">Protocols</a>
-
                <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=niklabbook">Nikola's Lab Book</a>
 
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=labbook">Kobchai's Lab Book</a>
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=labbook">Kobchai's Lab Book</a>
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=wetlab">Jonas' Lab Book</a>
                 <a href="https://2013.igem.org/Team:York_UK/Notebook.html?page=wetlab">Jonas' Lab Book</a>
Line 883: Line 910:
         </div>
         </div>
         <div id="outreach">
         <div id="outreach">
-
                 <a href="https://2013.igem.org/Team:York_UK/Outreach.html?page=helen">St. Helen's Church</a>
+
                 <a href="https://2013.igem.org/Team:York_UK/Outreach.html?page=london">YSB 1.0</a>
-
                <a href="https://2013.igem.org/Team:York_UK/Outreach.html?page=lawrence">St. Lawrence's School</a>
+
                 <a href="https://2013.igem.org/Team:York_UK/Outreach.html?page=alumni">Alumni Event</a>
                 <a href="https://2013.igem.org/Team:York_UK/Outreach.html?page=alumni">Alumni Event</a>
 +
                <a href="https://2013.igem.org/Team:York_UK/Outreach.html?page=lawrence">St. Lawrence's School</a>
 +
                <a href="https://2013.igem.org/Team:York_UK/Outreach.html?page=helen">St. Helen's Church</a>
 +
 +
         </div>
         </div>
         <div id="acknowledgments">
         <div id="acknowledgments">

Latest revision as of 19:00, 16 October 2013

iGEM York

Future in Your Eyes, future in York UNI team