Commit a87f8a82 authored by Hugo Chaume's avatar Hugo Chaume

First commit

parents
/*************** Polices *****************/
@font-face {
font-family: 'OpenSans';
src: url('../fonts/OpenSans.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSans';
src: url('../fonts/OpenSans.woff') format('woff'), url('../fonts/OpenSans.ttf') format('truetype'), url('../fonts/OpenSans.svg#OpenSans') format('svg');
font-weight: normal;
font-style: normal;
}
/*************** Entetes *****************/
.navbar-facil {
background: #eeeeee;
font-size: 14px;
font-family: 'OpenSans', sans-serif;
color: #333;
margin: 0;
padding: 0;
word-wrap: break-word !important;
}
.navbar-facil .container-navbar-facil {
margin:0 auto;
max-width:1170px;
}
.navbar-facil .right-nav {
float:right;
}
.navbar-facil p { text-align: center; }
.toggle, [id^=drop] {
display: none;
}
nav.navbar-facil {
margin: 0;
padding: 0;
}
.navbar-facil #logo {
display: block;
padding: 10px 20px 5px 10px;
float: left;
}
@media all and (min-width : 1195px) {
.navbar-facil #logo {
padding: 10px 20px 5px 0;
}
}
.navbar-facil #logo a, .navbar-facil #logo a:hover {
padding: 0;
line-height: 0;
background:none;
}
.navbar-facil #logo img {
width:auto;
height:40px;
}
nav.navbar-facil:after {
content: "";
display: table;
clear: both;
}
nav.navbar-facil ul {
width:100%;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav.navbar-facil ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #eeeeee;
}
nav.navbar-facil ul li.don {
background-color: #49c4ed;
}
nav.navbar-facil ul li.mon-compte {
background-color: #666;
}
nav.navbar-facil ul li.don a { color:#fff;font-weight:bold; }
nav.navbar-facil ul li.mon-compte a { color:#fff;font-weight:bold; }
nav.navbar-facil ul li.don a:hover { background-color: #38b7e0; }
nav.navbar-facil ul li.mon-compte a:hover { background-color: #555; }
nav.navbar-facil a {
display: block;
padding: 0 20px;
color: #333;
line-height: 60px;
text-decoration: none;
}
nav.navbar-facil ul li ul li:hover { background: #f9f9f9; }
nav.navbar-facil a:hover { background-color: #f9f9f9; }
nav.navbar-facil ul li ul li a { background-color: #f9f9f9; }
nav.navbar-facil ul li ul li a:hover { background-color: #e22537;color:#fff; }
nav.navbar-facil ul ul {
display: none;
position: absolute;
top: 60px;
}
nav.navbar-facil ul li:hover > ul { display: inherit; }
nav.navbar-facil ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
nav.navbar-facil ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
/* Media Queries
--------------------------------------------- */
@media all and (min-width : 769px) and (max-width : 992px) {
.navbar-facil {
font-size: 12px;
}
nav.navbar-facil a {
padding: 0 10px;
}
}
@media all and (max-width : 768px) {
nav.navbar-facil li > a:after { content: ' +'; }
nav.navbar-facil li > a:only-child:after { content: ''; }
.navbar-facil #logo {
display: block;
padding: 5px 0 0;
text-align: center;
float: none;
}
.navbar-facil .right-nav {
float:none;
}
nav.navbar-facil { margin: 0; }
.navbar-facil .toggle + a,
.navbar-facil .menu { display: none; }
.navbar-facil .toggle {
display: block;
background-color: #eeeeee;
padding: 0 20px;
color: #333;
line-height: 60px;
text-decoration: none;
border: none;
}
.navbar-facil label.burger-menu {
text-align: center;
font-weight: bold;
height:30px;
padding-top:5px;
}
.navbar-facil label.burger-menu div {
width: 35px;
height: 3px;
background-color: #333;
margin: 4px auto;
}
.navbar-facil .toggle:hover { background-color: none; }
.navbar-facil [id^=drop]:checked + ul { display: block; }
nav.navbar-facil ul li {
display: block;
width: 100%;
}
nav.navbar-facil ul ul .toggle,
nav.navbar-facil ul ul a { padding: 0 40px; }
nav.navbar-facil ul ul ul a { padding: 0 80px; }
nav.navbar-facil a:hover,
nav.navbar-facil ul ul ul a { background-color: none; }
nav.navbar-facil ul li ul li .toggle,
nav.navbar-facil ul ul a { background-color: none; }
nav.navbar-facil a:hover {
background-color:#eee;
}
nav.navbar-facil ul li ul li a:hover {
background-color:#f9f9f9;
color:#333;
}
nav.navbar-facil ul li.don a:hover {
background-color: #49c4ed;
}
nav.navbar-facil ul li.mon-compte a:hover {
background-color:#666;
}
nav.navbar-facil ul ul {
float: none;
position: static;
color: #ffffff;
}
nav.navbar-facil ul ul li:hover > ul,
nav.navbar-facil ul li:hover > ul { display: none; }
nav.navbar-facil ul ul li {
display: block;
width: 100%;
}
nav.navbar-facil ul ul ul li { position: static;
}
}
@media all and (max-width : 330px) {
nav.navbar-facil ul li {
display: block;
width: 94%;
}
}
/*************** Pied de page *****************/
.footer-facil {
background: #eeeeee;
}
.footer-facil .footer-content {
font-size: 14px;
font-family: 'OpenSans', sans-serif;
color: #333;
padding-top:20px;
margin: 0;
padding-bottom:20px;
word-wrap: break-word !important;
margin:0 auto;
max-width:1170px;
}
.footer-facil .footer-content .col {
width:95%;
padding-left:2%;
padding-right:2%;
margin-bottom:20px;
float:none;
text-align: center;
}
@media all and (min-width : 768px) {
.footer-facil .footer-content .col {
width:22%;
padding-left:0;
padding-right:2%;
float:left;
text-align: left;
}
.footer-facil .footer-content .col-1 {
padding-left:10px;
}
}
@media all and (min-width : 1195px) {
.footer-facil .footer-content .col {
width:23%;
padding-left:0;
padding-right:2%;
float:left;
}
.footer-facil .footer-content .col-1 {
padding-left:0;
}
}
.footer-facil .footer-content .clear {
float:none;
clear:both;
}
.footer-facil .footer-content h3 {
color:#49c5ed;
}
.footer-facil .footer-content ul {
list-style-type: none;
padding-left:0;
}
.footer-facil .footer-content ul li a {
text-decoration: none;
color:inherit;
}
.footer-facil .footer-content ul li a:hover {
text-decoration: underline;
}
.footer-facil .footer-content input[type="text"] {
border:none;
padding:8px;
}
.footer-facil .footer-content input[type="submit"] {
color:#fff;
font-weight: bold;
background:#e32538;
border:#e32538;
height: 33px;
}
.footer-facil .footer-content input[type="submit"]:hover {
cursor:pointer;
}
.footer-facil .copyright {
background: #dddddd;
word-wrap: break-word !important;
font-family: 'OpenSans', sans-serif;
font-size: 12px;
color: #333;
text-align: center;
padding-top:20px;
margin: 0;
padding-bottom:20px;
}
.footer-facil .copyright a {
color: #666;
}
\ No newline at end of file
This diff is collapsed.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar Facil</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<body>
<nav class="navbar-facil">
<div class="container-navbar-facil">
<div id="logo"><a href="#"><img src="images/logo-facil.png" alt="Logo FACIL"/></a></div>
<label for="drop" class="toggle burger-menu"><div></div><div></div><div></div></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li>
<!-- A propos -->
<label for="drop-1" class="toggle">A propos +</label>
<a href="#">A propos</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Mandat</a></li>
<li><a href="#">Réglement</a></li>
<li><a href="#">CA</a></li>
<li><a href="#">Le libre ?</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Partenaires</a></li>
</ul>
</li>
<li>
<!-- Actus du libre -->
<label for="drop-2" class="toggle">Actus du libre +</label>
<a href="#">Actus du libre</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="#">Agenda du libre</a></li>
<li><a href="#">Planète FACIL</a></li>
<li><a href="#">SQIL</a></li>
<li><a href="#">Actus FACIL</a></li>
</ul>
</li>
<li>
<!-- Participez -->
<label for="drop-3" class="toggle">Participez +</label>
<a href="#">Participez</a>
<input type="checkbox" id="drop-3"/>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">IRC</a></li>
<li><a href="#">Wiki</a></li>
<li><a href="#">Bénévolat</a></li>
</ul>
</li>
<li><a href="#">La clé FACIL</a></li>
<li>
<!-- Services FACIL -->
<label for="drop-4" class="toggle">Services FACIL +</label>
<a href="#">Services FACIL</a>
<input type="checkbox" id="drop-4"/>
<ul>
<li><a href="#">C'est quoi</a></li>
<li><a href="#">Pad</a></li>
<li><a href="#">Dates</a></li>
<li><a href="#">Kanboard</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
<div class="right-nav">
<li class="don"><a href="#">Don</a></li>
<li class="mon-compte"><a href="#">Mon compte</a></li>
</div>
</ul>
</div>
</nav>
<div>
<h1> Mobile-compatible Responsive Dropdown Menu Demo </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum augue in nibh finibus porta. Ut tellus justo, pharetra dignissim aliquam tincidunt, viverra quis lectus. Phasellus vel nibh dictum, ultricies dolor sed, pretium dolor. Pellentesque vel arcu vitae nisl ornare suscipit. Duis sed volutpat sem, ac placerat sapien. Aliquam dolor nulla, dapibus in consequat eu, porttitor nec eros. Etiam tincidunt neque quis augue malesuada, in pharetra ligula eleifend.</p><p>
Vestibulum vitae laoreet erat. Aenean a ullamcorper risus. Sed lacus odio, lobortis vitae rhoncus et, fringilla at ligula. Nulla ac rhoncus nibh. Aenean augue mi, placerat nec elit eget, aliquam ultrices mi. Curabitur tempor finibus gravida. Etiam sapien neque, porttitor ac nisl vitae, euismod tristique sem. Phasellus eu euismod enim, sit amet volutpat nunc. Nulla in lorem volutpat, fringilla ex id, eleifend sem. Phasellus maximus felis neque, sit amet vehicula est mollis sit amet.</p><p>
Suspendisse vulputate ipsum sit amet dictum luctus. Pellentesque quis lorem mi. Aenean ac sollicitudin arcu. Ut consectetur urna feugiat interdum varius. Mauris volutpat dui mi, et vehicula ex feugiat at. Suspendisse vitae mi at magna pulvinar fringilla. Fusce eleifend justo turpis, nec consectetur mauris maximus a. Nam sollicitudin lectus purus, pellentesque mollis justo viverra vel. </p>
</div>
<div>
<h1> Mobile-compatible Responsive Dropdown Menu Demo </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum augue in nibh finibus porta. Ut tellus justo, pharetra dignissim aliquam tincidunt, viverra quis lectus. Phasellus vel nibh dictum, ultricies dolor sed, pretium dolor. Pellentesque vel arcu vitae nisl ornare suscipit. Duis sed volutpat sem, ac placerat sapien. Aliquam dolor nulla, dapibus in consequat eu, porttitor nec eros. Etiam tincidunt neque quis augue malesuada, in pharetra ligula eleifend.</p><p>
Vestibulum vitae laoreet erat. Aenean a ullamcorper risus. Sed lacus odio, lobortis vitae rhoncus et, fringilla at ligula. Nulla ac rhoncus nibh. Aenean augue mi, placerat nec elit eget, aliquam ultrices mi. Curabitur tempor finibus gravida. Etiam sapien neque, porttitor ac nisl vitae, euismod tristique sem. Phasellus eu euismod enim, sit amet volutpat nunc. Nulla in lorem volutpat, fringilla ex id, eleifend sem. Phasellus maximus felis neque, sit amet vehicula est mollis sit amet.</p><p>
Suspendisse vulputate ipsum sit amet dictum luctus. Pellentesque quis lorem mi. Aenean ac sollicitudin arcu. Ut consectetur urna feugiat interdum varius. Mauris volutpat dui mi, et vehicula ex feugiat at. Suspendisse vitae mi at magna pulvinar fringilla. Fusce eleifend justo turpis, nec consectetur mauris maximus a. Nam sollicitudin lectus purus, pellentesque mollis justo viverra vel. </p>
</div>
<div class="footer-facil">
<div class="footer-content">
<div class="col col-1">
<h3>Facil</h3>
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Mandat</a></li>
<li><a href="#">Réglement</a></li>
</ul>
</div>
<div class="col">
<h3>Services FACIL</h3>
<ul>
<li><a href="#">C'est quoi ?</a></li>
<li><a href="#">Pad</a></li>
<li><a href="#">Date</a></li>
<li><a href="#">Kanboard</a></li>
<li><a href="#">Wallabag</a></li>
</ul>
</div>
<div class="col">
<h3>Ce site</h3>
<ul>
<li><a href="#">Colophon</a></li>
<li><a href="#">Plan du site</a></li>
<li><a href="#">Conditions d'utilisation</a></li>
</ul>
</div>
<div class="col">
<h3>Contact</h3>
<ul>
<li><a href="#">Nous joindre</a></li>
</ul>
<h3>Newsletter</h3>
<form>
<input type="text" placeholder="Votre email" />
<input type="submit" value="OK" />
</form>
</div>
<div class="clear"></div>
</div>
<div class="copyright">
Les sites de FACIL sont hébergés par <a href="#">Koumbit</a>, <a href="#">SymbioTIC</a> et autres (<a href="#">détails)</a>.
</div>
</div>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment