From 40956df56cb7cf6387931f993f2d9c78a22040c7 Mon Sep 17 00:00:00 2001
From: "hugo.pradier2" <hugo.pradier2@etu.uca.fr>
Date: Tue, 14 May 2024 22:25:35 +0200
Subject: [PATCH] vue formulaire + footer

---
 index.html | 157 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 138 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 8d1e3ad..f895e6d 100644
--- a/index.html
+++ b/index.html
@@ -210,10 +210,8 @@
 
           <h3>Outils</h3>
           <div class="col-12">
-            <div class="bg-secondary h-100 w-100 py-5">
+            <div class="bg-secondary h-100 w-100 py-5"></div>
           </div>
-
-
         </div>
       </section>
 
@@ -245,10 +243,66 @@
 
           <div class="row gy-4 mt-5">
             <div class="col-6">
-              <div class="bg-secondary h-100 w-100 py-5"></div>
+              <h3>Informations</h3>
+              <ul class="list-unstyled mt-5">
+                <li><i class="bi bi-geo-alt-fill"></i> 63110 - Beaumont</li>
+                <li><i class="bi bi-telephone-fill"></i> +33 7 68 36 13 59</li>
+                <!-- <li><i class="bi bi-email"></i> pradier.hugo36@gmail.com</li> -->
+                <li>
+                  <i class="bi bi-envelope-fill"></i>
+                  <a href="mailto:pradier.hugo36@gmail.com">
+                    pradier.hugo36@gmail.com</a
+                  >
+                </li>
+              </ul>
             </div>
+
             <div class="col-6">
-              <div class="bg-secondary h-100 w-100 py-5"></div>
+              <!-- Formulaire -->
+              <h3>Formulaire</h3>
+              <form class="row mt-5">
+                <div class="col-6 my-2">
+                  <label for="firstname" class="form-label">Prénom</label>
+                  <input
+                    name="firstname"
+                    type="text"
+                    class="form-control"
+                    id="firstname"
+                  />
+                </div>
+                <div class="col-6 my-2">
+                  <label for="name" class="form-label">Nom</label>
+                  <input
+                    name="name"
+                    type="text"
+                    class="form-control"
+                    id="name"
+                  />
+                </div>
+                <div class="col-12 my-2">
+                  <label for="email" class="form-label">Email</label>
+                  <input
+                    name="email"
+                    type="email"
+                    class="form-control"
+                    id="email"
+                  />
+                </div>
+                <div class="col-12 my-2">
+                  <label for="message" class="form-label">Message</label>
+                  <textarea
+                    name="message"
+                    class="form-control"
+                    id="message"
+                    rows="3"
+                  ></textarea>
+                </div>
+                <div class="col-12 my-2">
+                  <button type="submit" class="btn btn-secondary w-100">
+                    Envoyer
+                  </button>
+                </div>
+              </form>
             </div>
           </div>
         </div>
@@ -258,23 +312,88 @@
     <!-- Bas de page -->
     <footer class="border-top">
       <div class="container py-5">
-        <div class="row gy-4">
+        <div class="row gy-4 align-items-center">
           <div class="col-12 col-md-4">
-            <div class="bg-secondary py-5"></div>
+            <a class="navbar-brand text-dark text-uppercase fw-bold" href="#">
+              <span class="bg-secondary bg-gradient p-1 rounded-3 text-light"
+                >Hugo</span
+              >
+              PRADIER
+            </a>
           </div>
-          <div class="col-12 col-md-4">
-            <div class="bg-secondary py-5"></div>
+          <div class="col-12 col-md-4 text-md-center">
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a
+                  href="#"
+                  class="text-decoration-none text-dark"
+                  data-bs-toggle="modal"
+                  data-bs-target="#mentionsLegales"
+                  >Mentions légales</a
+                >
+              </li>
+            </ul>
           </div>
-          <div class="col-12 col-md-4">
-            <div>
-              <ul class="list-inline text-center">
-                <li class="list-inline-item">
-                  <i class="bi bi-linkedin fa-5x"></i>
-                </li>
-                <li class="list-inline-item">
-                  <i class="bi bi-github fa-5x"></i>
-                </li>
-              </ul>
+          <div class="col-12 col-md-4 text-md-end">
+            <ul class="list-inline mb-0">
+              <li class="list-inline-item">
+                <a
+                  href="https://www.linkedin.com/in/hugo-pradier-25b562251/"
+                  class="text-decoration-none text-dark"
+                  data-bs-toggle="tooltip"
+                  title="LinkedIn"
+                >
+                  <i class="fab fa-linkedin fa-2x"></i>
+                </a>
+              </li>
+              <li class="list-inline-item">
+                <a
+                  href="https://github.com/Hugo-P3663"
+                  class="text-decoration-none text-dark"
+                  data-bs-toggle="tooltip"
+                  title="Github"
+                >
+                  <i class="fab fa-github fa-2x"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- Modal -->
+      <div
+        class="modal fade"
+        id="mentionsLegales"
+        tabindex="-1"
+        aria-labelledby="exampleModalLabel"
+        aria-hidden="true"
+      >
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Mentions légales</h5>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="modal-body">
+              <p>
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui
+                itaque voluptate magnam debitis reiciendis repudiandae sed enim
+                quasi ad illum? Dolor, ea eos minima iure praesentium officia
+                illum accusamus ipsum.
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
+                fugiat suscipit recusandae similique nostrum laborum provident
+                pariatur officia quisquam soluta asperiores reprehenderit,
+                optio, magni quibusdam, deleniti perspiciatis ab error
+                explicabo?
+              </p>
             </div>
           </div>
         </div>