Difference between revisions of "Template:Toulouse France/menu"

Line 1: Line 1:
 
{{Toulouse_France}}
 
{{Toulouse_France}}
 +
<html>
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
 +
 +
<!-- This tells the browser that your page is responsive -->
 +
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
</head>
 +
 +
  
 
<html>
 
<html>
  
−
<!-- ################################################################################################ -->
+
<!-- Ca tu pourrais le mettre dans un template menu, il faut inclure le CSS du menu avec ton html de menu pour que la mise en page reste -->
 +
 
 +
<!-- ################################################################################################ -->
 
<!-- ################################################################################################ -->
 
<!-- ################################################################################################ -->
 
<!-- ########################  BARRE NOIRE ###################################################### -->
 
<!-- ########################  BARRE NOIRE ###################################################### -->
 
 
−
<body>
 
  
 
<div id="topbar" class="hoc clear">  
 
<div id="topbar" class="hoc clear">  
Line 23: Line 35:
 
 
 
<!-- Top Background Image Wrapper -->
 
<!-- Top Background Image Wrapper -->
 +
 +
<style>
 +
 +
/* Top Bar
 +
--------------------------------------------------------------------------------------------------------------- */
 +
#topbar{padding:2px 15px; font-size:.9rem; text-transform:uppercase;}
 +
#topbar *{margin:0;}
 +
#topbar ul li{display:initial; margin-right:10px; padding-right:10px; border-right:1px solid;}
 +
#topbar ul li:last-child{margin-right:10px; padding-right:10px; border-right:none;}
 +
#topbar i{margin:0px 5px 0px 0px; line-height:normal;}
 +
 +
/* Top Bar Colour */
 +
#topbar{color:#CBCBCB; background-color:#000000;}
 +
#topbar ul li{border-color:rgba(255,255,255,.2);}
 +
#topbar > div:last-of-type li:first-child a{color:#66CCCC;}
 +
 +
/* ------------------------------------------------------------------------------------------------------------ */
 +
/* ------------------------------------------------------------------------------------------------------------ */
 +
 +
 +
/* Navigation
 +
--------------------------------------------------------------------------------------------------------------- */
 +
nav ul, nav ol{margin:0; padding:0; list-style:none;}
 +
 +
#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
 +
 +
/* Top Navigation */
 +
#mainav{}
 +
#mainav ul.clear{margin-top:0px;}
 +
#mainav ul{text-transform:uppercase}
 +
#mainav ul ul{z-index:9999; position:absolute; width:230px; text-transform:none;}
 +
#mainav ul ul ul{left:180px; top:0;}
 +
#mainav li{display:inline-block; position:relative; margin:0 8px 0 0; padding:0;}
 +
#mainav li:last-child{margin-right:0;}
 +
#mainav li li{width:100%; margin:0;}
 +
#mainav li a{display:block; padding:10px 10px;}
 +
#mainav li li a{border:solid; border-width:0 0 1px 0;}
 +
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
 +
#mainav li li .drop::after{top:15px; left:5px;}
 +
#mainav ul ul{visibility:hidden; opacity:0;}
 +
#mainav ul li:hover > ul{visibility:visible; opacity:1;}
 +
 +
#mainav form{display:none; margin:0; padding:0;}
 +
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
 +
#mainav form select{width:100%; padding:5px; border:none;}
 +
#mainav form select option{margin:5px; padding:0; border:none;}
 +
 +
 +
/* Navigation Colour */
 +
#mainav{color:#FFFFFF; background-color:rgba(255,255,255,.2);}
 +
#mainav li a{color:inherit;}
 +
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#66CCCC; background-color:inherit;}
 +
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.7); border-color:rgba(0,0,0,.8);}
 +
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#66CCCC;}
 +
#mainav form select{color:#FFFFFF; background-color:#000000;}
 +
 +
 +
.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
 +
.container .sidebar nav a:hover{color:#66CCCC;}
 +
 +
/* Ici faut que tu mettes le code dessus dans ton template CSS */
 +
 +
 +
 +
 +
/* Page Intro
 +
--------------------------------------------------------------------------------------------------------------- */
 +
#pageintro{padding:180px 0;}
 +
 +
#pageintro article{max-width:100%;}
 +
#pageintro article *{text-transform:uppercase;}
 +
#pageintro article .heading{margin:0 0 50px 0; padding:0; line-height:1; font-size:32px;}
 +
#pageintro article p{margin:0;}
 +
#pageintro article h2{font-size:28px;}
 +
#pageintro article p:first-of-type{margin-bottom:35px; font-size:32px; letter-spacing:5px;}
 +
#pageintro article footer{margin-top:60px;}
 +
 +
/* Page Intro Colour
 +
---------------------------------------------------------------------------------------------------------------*/
 +
#pageintro{color:#FFFFFF;}
 +
#pageintro article h2{color:#FFFFFF;}
 +
 +
/* Sonsor */
 +
.sponsor{margin:20px 0px;}
 +
.sponsor, .sponsor a{color:#FFFFFF; background-color:#FFFFFF;}
 +
 +
 +
/* Header */
 +
#header #logo h1 a{color:inherit;}
 +
 +
 +
/* Content Area */
 +
.excerpt .excerpttxt{color:inherit; background-color:#FFFFFF;}
 +
 +
 +
/* Footer */
 +
#footer .title{color:#FFFFFF;}
 +
#footer .linklist li{border-color:rgba(255,255,255,.4);}  /* couleur des barres séparatrices */
 +
#footer .footertxt{background-color:rgba(255,255,255,.3);}
 +
 +
/* back to top */
 +
 +
.anchor {
 +
height: 30px;
 +
position: fixed;
 +
bottom: 20px;
 +
right: 30px;
 +
z-index: 1000;
 +
cursor: pointer;
 +
-webkit-transition: all ease 0.4s;
 +
-moz-transition: all ease 0.4s;
 +
-ms-transition: all ease 0.4s;
 +
-o-transition: all ease 0.4s;
 +
transition: all ease 0.4s;
 +
}
 +
 +
 +
 +
/* ------------------------------------------------------------------------------------------------------------ */
 +
/* ------------------------------------------------------------------------------------------------------------ */
 +
/* ------------------------------------------------------------------------------------------------------------ */
 +
/* ------------------------------------------------------------------------------------------------------------ */
 +
/* ------------------------------------------------------------------------------------------------------------ */
 +
 +
 +
/* Media Queries
 +
--------------------------------------------------------------------------------------------------------------- */
 +
@-ms-viewport{width:device-width;}
 +
 +
 +
/* Max Wrapper Width - Laptop, Desktop etc.
 +
--------------------------------------------------------------------------------------------------------------- */
 +
@media screen and (min-width:100%){
 +
.hoc{max-width:100%;}
 +
}
 +
 +
 +
/* Mobile Devices
 +
--------------------------------------------------------------------------------------------------------------- */
 +
@media screen and (max-width:100%){
 +
.hoc{max-width:100%;}
 +
 +
#topbar{}
 +
 +
#header{padding:30px 0;}
 +
#header #logo{margin:0;}
 +
 +
#mainav{}
 +
#mainav ul{display:none;}
 +
#mainav form{display:block; margin-top:8px;}
 +
 +
 +
.container{}
 +
#comments input[type="reset"]{margin-top:10px;}
 +
 +
 +
#footer{}
 +
 +
#copyright{}
 +
#copyright p:first-of-type{margin-bottom:8px;}
 +
}
 +
 +
 +
@media screen and (max-width:100%){
 +
.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
 +
.fl_left, .fl_right{display:block; float:none;}
 +
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}
 +
 +
#topbar{padding-top:5px; text-align:center;}
 +
#topbar ul{margin:0 0 2px 0; line-height:normal;}
 +
 +
#header{text-align:center;}
 +
#header #logo{margin:0 0 30px 0;}
 +
 +
#mainav form{margin-top:0;}
 +
 +
#pageintro article{max-width:none;}
 +
}
 +
 +
 +
@media screen and (max-width:100%){
 +
#topbar ul li{margin-bottom:2px; padding-right:0; border-right:none;}
 +
}
 +
 +
 +
/* Other
 +
--------------------------------------------------------------------------------------------------------------- */
 +
@media screen and (max-width:100%){
 +
.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
 +
.scrollable table{margin:0; padding:0; white-space:nowrap;}
 +
 +
.inline li{display:block; margin-bottom:10px;}
 +
.pushright li{margin-right:0;}
 +
 +
.font-x2{font-size:1.4rem;}
 +
.font-x3{font-size:1.6rem;}
 +
}
 +
 +
/* Social Icons
 +
---------------------------------------------------------------------------------------------------------------*/
 +
.faico{margin:0px; padding:0; list-style:none;}
 +
.faico li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:10px;}
 +
.faico li:last-child{margin-right:0;}
 +
.faico a{display:inline-block; width:auto; height:auto; line-height:20px; border-radius:5px; font-size:16px; text-align:center;}
 +
.faico img{width: 2%;}
 +
 +
.faico a{color:inherit; }
 +
.faico a:hover{color:#FFFFFF;}
 +
 +
.faico2{margin:0px; padding:0; list-style:none;}
 +
.faico2 li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:10px;}
 +
.faico2 li:last-child{margin-right:0;}
 +
.faico2 a{display:inline-block; width:auto; height:auto; line-height:20px; border-radius:5px; font-size:16px; text-align:center;}
 +
.faico2 img{width: 20%; margin:15px;}
 +
 +
.faico2 a{color:inherit; }
 +
.faico2 a:hover{color:#FFFFFF;}
 +
 +
 +
 +
</style>
  
 
<div class="page" style="background-image:url('https://static.igem.org/mediawiki/2016/4/43/Toulouse_France_PanneauEmpreinte.jpg');">
 
<div class="page" style="background-image:url('https://static.igem.org/mediawiki/2016/4/43/Toulouse_France_PanneauEmpreinte.jpg');">
Line 92: Line 325:
 
<!-- ################################################################################################ -->
 
<!-- ################################################################################################ -->
 
<!-- ################################################################################################ -->
 
<!-- ################################################################################################ -->
−
 
 
<div id="pageintro" class="hoc clear">  
 
<div id="pageintro" class="hoc clear">  
 
<article align="justify">
 
<article align="justify">
Line 102: Line 334:
 
</article>
 
</article>
 
</div>
 
</div>
−
</div>
+
 
−
<!-- ################################################################################################ -->
+
</div>
−
+
 
−
<!-- End Top Background Image Wrapper -->
+
−
+
  
 
</html>
 
</html>

Revision as of 08:25, 25 August 2016

Follow us @

iGEM Toulouse Team presents

Paleotilis, a shield for the Lascaux cave

Back to the origins