Chapril/banner.chapril.org
Chapril
/
banner.chapril.org
24
0
Fork 0
Code Issues Pull Requests Releases Activity

Proposition d'une deuxième version suivant les couleurs de www.chapril.org

This commit is contained in:
Vincent Calame 2019-10-24 23:19:33 +02:00 committed by root
parent c335cfa6b7
commit a30cfb0d87
1 changed files with 148 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
v2/index.html Normal file
View File

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
margin: 0;
padding: 0;
}
.chapril-banniere-Nav {
background-color: #2e5281;
font-family: 'dejavu_sanscondensed', sans-serif;
text-transform: uppercase;
font-size: small;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
}
.chapril-banniere-Logo img {
width: auto;
height: 32px;
}
.chapril-banniere-Nav a, .chapril-banniere-Nav a:visited {
color: #fff;
text-decoration: none;
}
.chapril-banniere-Nav a:hover {
color: #ff5e00;
}
.chapril-banniere-Menu {
display: none;
}
@media screen and (max-width: 800px) {
.chapril-banniere-Logo {
padding-left: 10px;
}
.chapril-banniere-Nav {
display: block;
}
.chapril-banniere-Menu {
display: block;
}
.chapril-banniere-Menu summary {
height: 26px;
width: 30px;
display: block;
position: absolute;
top: 5px;
right: 10px;
border-radius: 2px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
border-color: #fff;
padding-left: 4px;
padding-top: 1px;
}
.chapril-banniere-Menu summary {
list-style: none;
}
.chapril-banniere-Menu summary::-webkit-details-marker {
display: none;
}
.chapril-banniere-Menu summary span {
display: block;
margin-top: 4px;
width: 20px;
height: 2px;
border-radius: 2px;
background-color: #fff;
}
.chapril-banniere-Menu summary:hover {
border-color: #ff5e00;
cursor:pointer;
}
.chapril-banniere-Menu summary:hover span {
background-color: #ff5e00;
}
.chapril-banniere-Menu div {
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
background-color: #153a6a;
border-top: 1px solid #2e5281;
}
.chapril-banniere-Entree {
display: none;
}
}
</style>
</head>
<body>
<nav class="chapril-banniere-Nav">
<div class="chapril-banniere-Logo" aria-hidden="true">
<a href="https://www.chapril.org"><img alt="" src="https://www.chapril.org/IMG/siteon0.png"/></a>
</div>
<div class="chapril-banniere-Menu" aria-hidden="true">
<details>
<summary>
<span></span>
<span></span>
<span></span>
</summary>
<div><a href="https://www.chapril.org/">Accueil Chapril</a></div>
<div><a href="https://www.chapril.org/services.html">Services libres</a></div>
<div><a href="https://pouet.april.org/@aprilorg">Nous suivre</a></div>
<div><a href="https://www.chapril.org/cgu.html">CGU</a></div>
<div><a href="https://www.chapril.org/a-propos.html">Mentions légales</a></div>
<div><a href="https://www.chapril.org/contact.html">Nous contacter</a></div>
</details>
</div>
<div class="chapril-banniere-Entree"><a href="https://www.chapril.org/">Accueil Chapril</a></div>
<div class="chapril-banniere-Entree"><a href="https://www.chapril.org/services.html">Services libres</a></div>
<div class="chapril-banniere-Entree"><a href="https://pouet.april.org/@aprilorg">Nous suivre</a></div>
<div class="chapril-banniere-Entree"><a href="https://www.chapril.org/cgu.html">CGU</a></div>
<div class="chapril-banniere-Entree"><a href="https://www.chapril.org/a-propos.html">Mentions légales</a></div>
<div class="chapril-banniere-Entree"><a href="https://www.chapril.org/contact.html">Nous contacter</a></div>
</nav>
<p>Contenu... </p>
<p>Suite du contenu... </p>
</body>
</html>