From 99337bdcd067d9499526b1b06ae810db34013af0 Mon Sep 17 00:00:00 2001
From: itrooz <42669835+iTrooz@users.noreply.github.com>
Date: Sat, 20 Nov 2021 19:19:48 +0100
Subject: [PATCH] index.php w3c

---
 footer.php             |  4 +--
 header.php             | 41 +++++++++++++----------------
 index.php              | 38 +++++++++++++++-----------
 styles/today/index.css |  4 +++
 test.html              | 60 ------------------------------------------
 5 files changed, 47 insertions(+), 100 deletions(-)
 delete mode 100644 test.html

diff --git a/footer.php b/footer.php
index a1ac97b..1acaa10 100644
--- a/footer.php
+++ b/footer.php
@@ -7,10 +7,10 @@
             <input id="send" type="submit" value="Envoyer">
         </form>
     </section>
-    <section id="rightfoot">
+    <div id="rightfoot">
         <ul>
             <li><a href="mentions.php">Mentions légales</a></li>
             <li><a href="contact.php">Qui sommes nous</a></li>
         </ul>
-    </section>
+    </div>
 </footer>
\ No newline at end of file
diff --git a/header.php b/header.php
index 5c6cf5a..2b8db70 100644
--- a/header.php
+++ b/header.php
@@ -5,28 +5,25 @@
 ?>
 
 <header>
-    <section id="buttonSec">
+    <div id="buttonSec">
         <button type="button" onclick="switchTheme()">Click Me!</button> 
-    </section>
-    <section id="title">
+    </div>
+    <div id="title">
         <img src="img/logo.png" alt="Logo don't meet me" id="logo">
-    </section>
-    <section>
-        <nav>
-            <a href="#" class="burger_button" onclick="menu()">
-                <span class="bar"></span>
-                <span class="bar"></span>
-                <span class="bar"></span>
-            </a>
-            <div class="navbar_links hide">
-                <ul>
-                    <li><a href="index.php">Accueil</a></li>
-                    <li><a href="for.php?gender=man">Trouve un homme !</a></li>
-                    <li><a href="for.php?gender=woman">Trouve une femme ! </a></li>
-                    <li><a href="contact.php">Qui sommes nous</a></li>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-    </section>
+    </div>
+    <nav>
+        <a href="#" class="burger_button" onclick="menu()">
+            <span class="bar"></span>
+            <span class="bar"></span>
+            <span class="bar"></span>
+        </a>
+        <div class="navbar_links hide">
+            <ul>
+                <li><a href="index.php">Accueil</a></li>
+                <li><a href="for.php?gender=man">Trouve un homme !</a></li>
+                <li><a href="for.php?gender=woman">Trouve une femme ! </a></li>
+                <li><a href="contact.php">Qui sommes nous</a></li>
+            </ul>
+        </div>
+    </nav>
 </header>
\ No newline at end of file
diff --git a/index.php b/index.php
index 85f7bc7..8baa2b0 100644
--- a/index.php
+++ b/index.php
@@ -19,9 +19,11 @@
     <div id="fade"></div>
     <?php include("header.php") ?>
     <main>
-        <h1>Rencontrez une personne qui vous correspond !</h1>
-        <p id="intropage">Nous avons eu l'idée de proposer un service où hommes et femmes peuvent communiquer afin de se rencontrer. Grâce à notre système de sélection simple et rapide, trouvez votre Roméo ou votre Juliette. Cliquez en dessous pour commencer l'aventure don't meet me !</p>
-        <section id="makeachoicehf">
+
+        <section>
+            <h1>Rencontrez une personne qui vous correspond !</h1>
+            <p id="intropage">Nous avons eu l'idée de proposer un service où hommes et femmes peuvent communiquer afin de se rencontrer. Grâce à notre système de sélection simple et rapide, trouvez votre Roméo ou votre Juliette. Cliquez en dessous pour commencer l'aventure don't meet me !</p>
+            <div id="makeachoicehf">
                 <a href="for.php?gender=woman" class="tuile">
                     <img src="img/woman.jpeg" alt="image femme" class="imgbouton">
                     <p>Trouver une femme</p>
@@ -30,6 +32,7 @@
                     <img src="img/man.jpg" alt="image homme" class="imgbouton">
                     <p>Trouver un homme</p>
                 </a>
+            </div>
         </section>
         <section id="whydmm">
             <h2 id="whydmmtitle">Pourquoi Don't meet me ?</h2>
@@ -41,19 +44,22 @@
                     De plus ceci permet d'éviter l'harcèlement présent sur de nombreux sites, la personne entre en contact avec vous uniquement si vous l'acceptez sur la plateforme. <br/><strong>Mais évidemment, notre sélection ne se trompe jamais. ;)</strong>
             </p>
         </section>
-        <section id="comments">
-            <figure>
-                <img class="avis" src="img/avis1.jpeg" alt="image femme avis 1">
-                <figcaption class="caption">DMM m'a permis de rencontrer l'homme de ma vie. Le principe de sélection m'a semblé très pertinant et vous évite de devoir chercher pendant de longues heures !<br/>Juliette Artois</figcaption> 
-            </figure>
-            <figure>
-                <img class="avis" src="img/avis2.jpg" alt="image femme avis 2"> 
-                <figcaption class="caption">Je trouve le principe très simple et rapide. En suivant la section qui vous correspond vous trouvez UNE personne qui vous correspond, contrairement à d'autres sites... Je ne peux que dire oui !</br>Elise David</figcaption>
-            </figure>
-            <figure>
-                <img class="avis" src="img/avis3.jpeg" alt="image homme avis 3"> 
-                <figcaption class="caption">Bien que le questionnaire à remplir soit original, la rencontre avec mon "Don't meet" s'est déroulée avec succès. La satisfaction est totale.<br/>Julien Martin</figcaption>
-            </figure>
+        <section>
+            <h2 id="comments_head"> Commentaires </h2>
+            <div id="comments">
+                <figure>
+                    <img class="avis" src="img/avis1.jpeg" alt="image femme avis 1">
+                    <figcaption class="caption">DMM m'a permis de rencontrer l'homme de ma vie. Le principe de sélection m'a semblé très pertinant et vous évite de devoir chercher pendant de longues heures !<br/>Juliette Artois</figcaption> 
+                </figure>
+                <figure>
+                    <img class="avis" src="img/avis2.jpg" alt="image femme avis 2"> 
+                    <figcaption class="caption">Je trouve le principe très simple et rapide. En suivant la section qui vous correspond vous trouvez UNE personne qui vous correspond, contrairement à d'autres sites... Je ne peux que dire oui !<br/>Elise David</figcaption>
+                </figure>
+                <figure>
+                    <img class="avis" src="img/avis3.jpeg" alt="image homme avis 3"> 
+                    <figcaption class="caption">Bien que le questionnaire à remplir soit original, la rencontre avec mon "Don't meet" s'est déroulée avec succès. La satisfaction est totale.<br/>Julien Martin</figcaption>
+                </figure>
+            </div>
         </section>
     </main>
     <?php include("footer.php") ?>
diff --git a/styles/today/index.css b/styles/today/index.css
index 3cd6003..2999e20 100644
--- a/styles/today/index.css
+++ b/styles/today/index.css
@@ -54,6 +54,10 @@ p{
     color: black;
 }
 
+#comments_head{
+    text-align: center;
+}
+
 #whydmmtitle{
     padding-right: 2rem;
     padding-left: 2rem;
diff --git a/test.html b/test.html
deleted file mode 100644
index 3f65124..0000000
--- a/test.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<title></title>
-<meta charset="utf-8" />
-</head>
-
-<body>
-    <div>
-        <span id="fade_in">Fade In</span> | 
-        <span id="fade_out">Fade Out</span></div>
-        <div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div>
-    </div>
-</div>
-
-<script type="text/javascript">
-// global varibles
-var done = true,
-    fading_div = document.getElementById('fading_div'),
-    fade_in_button = document.getElementById('fade_in'),
-    fade_out_button = document.getElementById('fade_out');
-
-function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out
-    fading_div.style.opacity = opacity_value / 100;
-    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
-    if (fade_in_or_fade_out == 'in' && opacity_value == 1) {
-        fading_div.style.display = 'block';
-    }
-    if (fade_in_or_fade_out == 'in' && opacity_value == 100) {
-        done = true;
-    }
-    if (fade_in_or_fade_out == 'out' && opacity_value == 1) {
-        fading_div.style.display = 'none';
-        done = true;
-    }
-}
-
-// fade in button
-fade_in_button.onclick = function () {
-    if (done && fading_div.style.opacity !== '1') {
-        done = false;
-        for (var i = 1; i <= 100; i++) {
-            setTimeout("function_opacity(" + i + ",'in')", i * 5);
-        }
-    }
-};
-
-// fade out button
-fade_out_button.onclick = function () {
-    if (done && fading_div.style.opacity !== '0') {
-        done = false;
-        for (var i = 100; i >= 1; i--) {
-            setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
-        }
-    }
-};
-alert (test);
-</script>
-</body>
-</html>