From 14f70462aef4ec445b9ee0a15126bd20f7cd293f Mon Sep 17 00:00:00 2001
From: "hugo.pradier2" <hugo.pradier2@etu.uca.fr>
Date: Sun, 2 Jun 2024 20:33:45 +0200
Subject: [PATCH] ajout responsive

---
 index.html | 171 +++++++++++++++++++++++++++--------------------------
 1 file changed, 86 insertions(+), 85 deletions(-)

diff --git a/index.html b/index.html
index f89c1a1..078b0d1 100644
--- a/index.html
+++ b/index.html
@@ -163,12 +163,12 @@
       <section id="apropos" class="py-5 bg-light">
         <div class="container">
           <div class="row">
-            <div class="col">
+            <div class="col-12 col-md-4">
               <h2>À propos de moi</h2>
             </div>
-            <div class="col">
+            <div class="col-12 col-md-8">
               <p></p>
-              <h3 class="py-3">Bonjour, je m'appelle Hugo Pradier</h3>
+              <h3 class="py-3">Bonjour, je m'appelle Hugo PRADIER</h3>
               <p>
                 Étudiant en troisième année de BUT Production Informatique à
                 l'IUT de Clermont-Ferrand. Passionné par l’informatique, je suis
@@ -207,7 +207,7 @@
           <h2 class="mb-4">Expériences</h2>
 
           <div class="row">
-            <div class="col-md-6">
+            <div class="col-12 col-lg-6">
               <div class="card">
                 <img
                   src="./assets/images/logoSylink.jpg"
@@ -230,32 +230,34 @@
                     <strong>Dates de l'expérience :</strong> du 1er septembre
                     2023 au 31 août 2024 (1 an)
                   </p>
-                  <a
-                    href="#"
-                    class="btn btn-secondary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#modalSylinkDev"
-                    >Développement</a
-                  >
-                  <a
-                    href="#"
-                    class="btn btn-secondary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#modalSylinkDoc"
-                    >Documentation</a
-                  >
-                  <a
-                    href="#"
-                    class="btn btn-secondary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#modalSylinkCollab"
-                    >Collaboration</a
-                  >
+                  <div class="row">
+                    <a
+                      href="#"
+                      class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
+                      data-bs-toggle="modal"
+                      data-bs-target="#modalSylinkDev"
+                      >Développement</a
+                    >
+                    <a
+                      href="#"
+                      class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
+                      data-bs-toggle="modal"
+                      data-bs-target="#modalSylinkDoc"
+                      >Documentation</a
+                    >
+                    <a
+                      href="#"
+                      class="btn btn-secondary col-12 col-md-3 me-2 mb-2"
+                      data-bs-toggle="modal"
+                      data-bs-target="#modalSylinkCollab"
+                      >Collaboration</a
+                    >
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div class="col-md-6">
+            <div class="col-12 col-lg-6">
               <div class="card">
                 <img
                   src="./assets/images/cegiLogo.png"
@@ -280,27 +282,29 @@
                     <strong>Dates de l'expérience :</strong> du 11 avril au 17
                     juin 2023 (10 semaines)
                   </p>
-                  <a
-                    href="#"
-                    class="btn btn-secondary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#modalCegiDev"
-                    >Développement</a
-                  >
-                  <a
-                    href="#"
-                    class="btn btn-secondary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#modalCegiDoc"
-                    >Documentation</a
-                  >
-                  <a
-                    href="#"
-                    class="btn btn-secondary"
-                    data-bs-toggle="modal"
-                    data-bs-target="#modalCegiConduite"
-                    >Conduire un projet</a
-                  >
+                  <div class="row">
+                    <a
+                      href="#"
+                      class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
+                      data-bs-toggle="modal"
+                      data-bs-target="#modalCegiDev"
+                      >Développement</a
+                    >
+                    <a
+                      href="#"
+                      class="btn btn-secondary col-12 col-md-3 me-2 mb-2"
+                      data-bs-toggle="modal"
+                      data-bs-target="#modalCegiDoc"
+                      >Documentation</a
+                    >
+                    <a
+                      href="#"
+                      class="btn btn-secondary col-12 col-md-4 me-2 mb-2"
+                      data-bs-toggle="modal"
+                      data-bs-target="#modalCegiConduite"
+                      >Conduire un projet</a
+                    >
+                  </div>
                 </div>
               </div>
             </div>
@@ -610,7 +614,7 @@
           <h2 class="text-center">Formation</h2>
           <div class="container mt-5">
             <div class="row justify-content-center align-items-center">
-              <div class="col-md-4 text-center">
+              <div class="col-12 col-md-4 text-center">
                 <div
                   class="rounded-circle bg-secondary d-flex justify-content-center align-items-center"
                   style="width: 200px; height: 200px"
@@ -625,7 +629,7 @@
                   >
                 </div>
               </div>
-              <div class="col-md-3">
+              <div class="col-12 col-md-3">
                 <h3 class="text-md-end">BUT Production Informatique</h3>
                 <p class="text-md-end">
                   IUT de Clermont-Ferrand, 63<br />
@@ -634,7 +638,6 @@
               </div>
             </div>
             <hr />
-            <!-- Barre horizontale -->
             <div class="row justify-content-center align-items-center mt-4">
               <div class="col-md-4 text-center">
                 <div
@@ -661,9 +664,7 @@
                 </p>
               </div>
             </div>
-
             <hr />
-            <!-- Barre horizontale -->
             <div class="row justify-content-center align-items-center mt-4">
               <div class="col-md-4 text-center">
                 <div
@@ -702,7 +703,7 @@
           <!-- Developpement -->
           <h3 class="mt-4">Développement</h3>
           <div class="row mt-4">
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">HTML</h5>
@@ -714,7 +715,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">CSS</h5>
@@ -726,7 +727,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Javascript</h5>
@@ -738,7 +739,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">PHP</h5>
@@ -750,7 +751,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Typescript</h5>
@@ -762,7 +763,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Ruby</h5>
@@ -774,7 +775,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Python</h5>
@@ -786,7 +787,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Java</h5>
@@ -798,7 +799,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">C</h5>
@@ -810,7 +811,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">C++</h5>
@@ -822,7 +823,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">C#</h5>
@@ -834,7 +835,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">SQL</h5>
@@ -850,8 +851,8 @@
 
           <!-- Langues -->
           <h3>Langues</h3>
-          <div class="d-flex justify-content-center">
-            <div class="col-2">
+          <div class="d-flex justify-content-center mt-4">
+            <div class="col-4 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Français</h5>
@@ -866,7 +867,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-4 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Anglais</h5>
@@ -881,7 +882,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-4 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Espagnol</h5>
@@ -902,7 +903,7 @@
 
           <h3>Outils</h3>
           <div class="row mt-4">
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Visual Studio</h5>
@@ -914,7 +915,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Jetbrains</h5>
@@ -926,7 +927,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Docker</h5>
@@ -938,7 +939,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Kubernetes</h5>
@@ -950,7 +951,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Proxmox</h5>
@@ -962,7 +963,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Git</h5>
@@ -974,7 +975,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">xUnit</h5>
@@ -986,7 +987,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Postman</h5>
@@ -998,7 +999,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Swagger</h5>
@@ -1010,7 +1011,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Figma</h5>
@@ -1022,7 +1023,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Canva</h5>
@@ -1034,7 +1035,7 @@
                 </div>
               </div>
             </div>
-            <div class="col-2">
+            <div class="col-6 col-md-2">
               <div class="card border-secondary mb-3" style="max-width: 10rem">
                 <div class="card-body text-secondary">
                   <h5 class="card-title text-center">Office</h5>
@@ -1056,7 +1057,7 @@
           <h2>Contact</h2>
 
           <div class="row gy-4 mt-5">
-            <div class="col-4">
+            <div class="col-12 col-md-4">
               <h3>Informations</h3>
               <ul class="list-unstyled mt-5">
                 <li style="font-size: 20px">
@@ -1074,7 +1075,7 @@
               </ul>
             </div>
 
-            <div class="col-8">
+            <div class="col-12 col-md-8">
               <!-- Formulaire -->
               <h3>Formulaire</h3>
               <form id="contact-form" class="row mt-5">
@@ -1154,7 +1155,7 @@
     <footer class="border-top">
       <div class="container py-5">
         <div class="row gy-4 align-items-center">
-          <div class="col-12 col-md-4">
+          <div class="col-12 col-md-4 text-center text-md-start">
             <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
@@ -1162,7 +1163,7 @@
               PRADIER
             </a>
           </div>
-          <div class="col-12 col-md-4 text-md-center">
+          <div class="col-12 col-md-4 text-center">
             <ul class="list-unstyled mb-0">
               <li>
                 <a
@@ -1175,7 +1176,7 @@
               </li>
             </ul>
           </div>
-          <div class="col-12 col-md-4 text-md-end">
+          <div class="col-12 col-md-4 text-md-end text-center">
             <ul class="list-inline mb-0">
               <li class="list-inline-item">
                 <a