Difference between revisions of "Team:Bordeaux/Template:Global"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<style>
 
−
nav
 
−
{
 
  
 +
    <title>IGEM Bordeaux 2015</title>
 +
    <link rel="shortcut icon" href="/zeppelin/img/favicons/favicon.ico">
 +
    <link rel="apple-touch-icon" sizes="152x152" href="/zeppelin/img/favicons/apple-touch-icon-152x152.png">
 +
    <link rel="apple-touch-icon" sizes="144x144" href="/zeppelin/img/favicons/apple-touch-icon-144x144.png">
 +
    <link rel="apple-touch-icon" sizes="120x120" href="/zeppelin/img/favicons/apple-touch-icon-120x120.png">
 +
    <link rel="apple-touch-icon" sizes="114x114" href="/zeppelin/img/favicons/apple-touch-icon-114x114.png">
 +
    <link rel="apple-touch-icon" sizes="76x76" href="/zeppelin/img/favicons/apple-touch-icon-76x76.png">
 +
    <link rel="apple-touch-icon" sizes="72x72" href="/zeppelin/img/favicons/apple-touch-icon-72x72.png">
 +
    <link rel="apple-touch-icon" sizes="60x60" href="/zeppelin/img/favicons/apple-touch-icon-60x60.png">
 +
    <link rel="apple-touch-icon" sizes="57x57" href="/zeppelin/img/favicons/apple-touch-icon-57x57.png">
 +
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-196x196.png">
 +
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-160x160.png">
 +
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-96x96.png">
 +
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-32x32.png">
 +
    <link rel="icon" type="image/png" href="/zeppelin/img/favicons/favicon-16x16.png">
 +
    <meta name="msapplication-TileColor" content="#2b5797">
 +
    <meta name="msapplication-TileImage" content="/zeppelin/img/favicons/mstile-144x144.png">
 +
    <meta name="msapplication-config" content="/zeppelin/img/favicons/browserconfig.xml">
 +
<meta name="viewport" content="width=device-width,initial-scale=1.0">
  
−
height : 600px;
+
    <link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,500&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
−
width : 800px;
+
−
position : absolute;
+
−
padding-top : 10px;
+
−
padding-left : 50px;
+
−
background : url('http://image.noelshack.com/fichiers/2015/24/1433938526-raisin.png') no-repeat ;
+
  
−
background-size : 800px 50px;
+
    <!-- Bootstrap -->
−
}
+
    <link rel="stylesheet" href="http://www.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
−
#menu, #menu ul /* Liste */     
+
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
 +
     <link rel="stylesheet" href="https://2015.igem.org/Team:Bordeaux/CSS?action=raw&ctype=text/css" type="text/css" />
  
−
{
+
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
−
 
+
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
−
        padding : 0; /* pas de marge intérieure */
+
    <!--[if lt IE 9]>
−
 
+
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
−
        margin : 0; /* ni extérieure */
+
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
−
 
+
      <![endif]-->
−
        list-style : none; /* on supprime le style par défaut de la liste */
+
  </head>
−
 
+
−
        line-height : 21px; /* on définit une hauteur pour chaque élément */
+
−
 
+
−
        text-align : center; /* on centre le texte qui se trouve dans la liste */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
#menu /* Ensemble du menu */
+
−
 
+
−
{
+
−
 
+
−
        font-weight : bold; /* on met le texte en gras */
+
−
 
+
−
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
+
−
 
+
−
        font-size : 12px; /* hauteur du texte : 12 pixels */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
#menu a /* Contenu des listes */
+
−
 
+
−
{
+
−
 
+
−
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
+
−
 
+
−
        padding : 0; /* aucune marge intérieure */
+
−
 
+
−
       
+
−
 
+
−
        color : #000; /* couleur du texte */
+
−
 
+
−
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
+
−
 
+
−
        width : 144px; /* largeur */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
#menu li /* Elements des listes */     
+
−
 
+
−
{
+
−
 
+
−
        float : left;
+
−
 
+
−
        /* pour IE qui ne reconnaît pas "transparent" */
+
−
 
+
−
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
/* IE ne reconnaissant pas le sélecteur ">" */
+
−
 
+
−
html>body #menu li
+
−
 
+
−
{
+
−
 
+
−
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
#menu li ul /* Sous-listes */
+
−
 
+
−
{
+
−
 
+
−
        position: absolute; /* Position absolue */
+
−
 
+
−
        width: 144px; /* Largeur des sous-listes */
+
−
 
+
−
        left: -999em; /* Hop, on envoie loin du champ de vision */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
 
+
−
#menu li ul li /* Éléments de sous-listes */
+
−
 
+
−
{
+
−
 
+
−
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
+
−
 
+
−
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
/* IE ne reconnaissant pas le sélecteur ">" */
+
−
 
+
−
html>body #menu li ul li               
+
−
 
+
−
{
+
−
 
+
−
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
#menu li ul ul
+
−
 
+
−
{
+
−
 
+
−
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */  
+
−
 
+
−
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
+
−
 
+
−
        border-left    : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */     
+
−
 
+
−
}
+
−
 
+
−
 
+
−
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
+
−
 
+
−
html>body #menu li ul ul               
+
−
 
+
−
{
+
−
 
+
−
        border-left    : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
+
−
 
+
−
}
+
−
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
+
−
 
+
−
{
+
−
 
+
−
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
+
−
 
+
−
}
+
−
 
+
−
 
+
−
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
+
−
 
+
−
{
+
−
 
+
−
        left: auto; /* Repositionnement normal */
+
−
 
+
−
        min-height: 0; /* Corrige un bug sous IE */
+
−
 
+
−
}
+
−
</style>
+
−
<script type="text/javascript">
+
−
sfHover = function() {
+
−
 
+
−
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
+
−
 
+
−
        for (var i=0; i<sfEls.length; i++) {
+
−
 
+
−
                sfEls[i].onmouseover=function() {
+
−
 
+
−
                        this.className+=" sfhover";
+
−
 
+
−
                }
+
−
 
+
−
                sfEls[i].onmouseout=function() {
+
−
 
+
−
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
+
−
 
+
−
                }
+
  
 +
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
 +
    <!-- jQuery local fallback -->
 +
    <script>
 +
        window.jQuery || document.write('<script src="/zeppelin/js/jquery-2.1.1.min.js ><\/script>')
 +
    </script>
 +
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
    <!-- Bootstrap JS local fallback -->
 +
    <script>
 +
        if (typeof ($.fn.modal) === 'undefined') {
 +
            document.write('<script src="/zeppelin/js/bootstrap.min.js ><\/script>')
 
         }
 
         }
 +
    </script> 
 +
    <!--<script src="/zeppelin/js/jquery.countTo.min.js"></script>
 +
    <script src="/zeppelin/js/jquery.appear.min.js"></script>
 +
    <script src="/zeppelin/js/typed.min.js"></script>
 +
    <script src="/zeppelin/js/waves.min.js"></script>-->
 +
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 +
    <script src="https://2014.igem.org/Team:Evry/JS?action=raw&ctype=text/javascript"></script>
 +
   
  
−
}
+
    <script>
−
 
+
        $(document).ready(function () {
−
if (window.attachEvent) window.attachEvent("onload", sfHover);
+
            var bodyColor = $('body').css('color');
−
</script>
+
            if (bodyColor != 'rgb(51, 51, 51)') {
−
</head>
+
                 $("head").prepend('<link rel="stylesheet" href="http://www.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">');
−
 
+
            }
−
 
+
            $(function () {
−
<body>
+
                 $("#typeout-text").typed({
−
 
+
                    strings: ["","Cured Vine",""],
−
<nav>
+
                    typeSpeed: 150,
−
<ul id="menu">
+
                    backDelay: 800,
−
 
+
                    loop: true
−
        <li>
+
                 });
−
                 <a href="#">Home</a>
+
            });
−
        </li>
+
         });
−
       
+
    </script>
−
        <li>
+
−
                <a href="#">Overview</a>
+
−
                <ul>
+
−
                        <li><a href="#">The Problem</a></li>
+
−
                        <li><a href="#">Our Solution</a></li>
+
−
<li><a href="#">The Results</a></li>
+
−
                </ul>
+
−
        </li>
+
−
       
+
−
        <li>
+
−
                <a href="#">People</a>
+
−
                <ul>
+
−
                        <li>
+
−
                                <a href="#">Team Members</a>
+
−
                                <a href="#">Collaborations</a></li>
+
−
                                <a href="#">Media</a></li>
+
−
                               
+
−
 
+
−
                        </li>
+
−
                       
+
−
                 </ul>
+
−
        </li>
+
−
       
+
−
        <li>
+
−
                <a href="#">Policy & Practices</a>
+
−
                <ul>
+
−
                        <li><a href="#">Popularization</a></li>
+
−
                        <li><a href="#">Ethics</a></li>
+
−
<li><a href="#">Safety</a></li>
+
−
                        <li><a href="#">Philosophy & Economy</a></li>
+
−
                </ul>
+
−
        </li>
+
−
<li>
+
−
                 <a href="#">Achievements</a>
+
−
                <ul>
+
−
                        <li><a href="#">Medals</a></li>
+
−
                        <li><a href="#">Biobrick</a></li>
+
−
<li><a href="#">Protocols</a></li>
+
−
                        <li><a href="#">Notebook </a></li>
+
−
                </ul>
+
−
        </li>
+
−
       
+
−
       
+
−
          
+
−
</ul>
+
−
 
+
−
 
+
−
</nav>
+
−
 
+
−
 
+
−
 
+
−
</body>
+
 
</html>
 
</html>

Revision as of 12:34, 10 June 2015

IGEM Bordeaux 2015