Fixed small HTML points.

This commit is contained in:
Christian P. MOMON 2019-11-22 01:50:52 +01:00 committed by root
parent de177c2797
commit 3e536a0400
3 changed files with 152 additions and 1 deletions

View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>Cha ronronne !</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style> <style>
body { body {

View File

@ -0,0 +1,150 @@
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Cha ronronne !</title>
<meta charset="UTF-8" />
<style>
body {
margin: 0;
padding: 0;
}
.chapril-banniere-Nav {
background-color: #005184;
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: #ff9759;
}
.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: #ff9759;
cursor:pointer;
}
.chapril-banniere-Menu summary:hover span {
background-color: #ff9759;
}
.chapril-banniere-Menu div {
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
background-color: #153a6a;
border-top: 1px solid #005184;
}
.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="/Chapril-banner/v2/chapril-banner-logo.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>

View File

@ -11,7 +11,7 @@
<p>Le site banner.chapril.org est un site technique pour la gestion de la bannière Chapril.</p> <p>Le site banner.chapril.org est un site technique pour la gestion de la bannière Chapril.</p>
<div><a href="/Chapril-banner/v1/test.xhtml">Tester version 1</a></div> <div><a href="/Chapril-banner/v1/test.xhtml">Tester version 1</a></div>
<div><a href="/Chapril-banner/v2/index.xhtml">Tester version 2</a></div> <div><a href="/Chapril-banner/v2/index.html">Tester version 2</a></div>
<div id="chapril-filigrane"></div> <div id="chapril-filigrane"></div>