From 74817f97c0781840fe16411c6ea44c055fa1899d Mon Sep 17 00:00:00 2001
From: Christian Pierre MOMON <cmomon@april.org>
Date: Fri, 22 Nov 2019 01:50:52 +0100
Subject: [PATCH] Fixed small HTML points.

---
 Chapril-banner/v2/index.html  |   1 +
 Chapril-banner/v2/index.xhtml | 150 ++++++++++++++++++++++++++++++++++
 index.html                    |   2 +-
 3 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 Chapril-banner/v2/index.xhtml
diff --git a/Chapril-banner/v2/index.html b/Chapril-banner/v2/index.html
index f931a2e..8be7c6e 100644
--- a/Chapril-banner/v2/index.html
+++ b/Chapril-banner/v2/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
+    <title>Cha ronronne !</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style>
     body {
diff --git a/Chapril-banner/v2/index.xhtml b/Chapril-banner/v2/index.xhtml
new file mode 100644
index 0000000..2c71f07
--- /dev/null
+++ b/Chapril-banner/v2/index.xhtml
@@ -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>
diff --git a/index.html b/index.html
index 8559c01..511727b 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
       <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/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>
 
