From 61b4a4e8e97d079a7aa976975e2f9b251cf677c7 Mon Sep 17 00:00:00 2001
From: DahmaneYanis <dahmane.yanis.2004@gmail.com>
Date: Sat, 7 Jan 2023 10:59:38 +0100
Subject: [PATCH] Structure du sommaire

---
 index.css  | 109 +++++++++++++++++++++++++++++++++++++++++++++++++----
 index.html |  90 +++++++++++++++++++++++++++++++++----------
 2 files changed, 173 insertions(+), 26 deletions(-)
diff --git a/index.css b/index.css
index e5cba44..6ee2a16 100644
--- a/index.css
+++ b/index.css
@@ -1,21 +1,41 @@
+/*
+=======================================
+                Général
+=======================================
+*/ 
 body{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-h1
+.conteneur
 {
-    font-size : 60px;
+    display: flex;
+}
+
+/*
+=========================================
+                Titre SAE   
+=========================================
+*/ 
+#SAE
+{
+    font-size : 70px;
     margin : 10px;
 }
 
-h2
+#DECOUVERTE
 {
-    font-size : 30px;
+    font-size : 38px;
     margin-top : 10px;
 }
 
+.titreSAE
+{
+    border : 1px solid red;
+}
+
 header
 {
     display : flex;
@@ -23,19 +43,94 @@ header
     align-items: center;
     justify-content: flex-start;
     border : 1px solid green;
-    width: 80%;
+    width: 82%;
     margin-bottom : 15px;
 }
 
-.titreSAE
+/*
+========================================
+                Sommaire   
+========================================
+*/ 
+
+#sommaire
 {
+    width : 82%;
+    display: flex;
+    flex-direction: column;
+
+    border : 1px solid black;
+}
+
+#titreSommaire
+{
+    font-size: 33px;
+    margin-left: 20px;
+}
+
+#liensQuestions
+{
+    justify-content: space-around;
+    flex-direction: row;
+    padding-top : 15px;
+    padding-bottom: 15px;
+    width : 95%;
+    align-self : center;
+    margin-bottom: 30px;
+
     border : 1px solid red;
 }
 
+.blocLienQuestion
+{
+
+
+    border : 1px solid orange;
+}
+
+.lienQuestion
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width : 100%;
+    height: 100%;
+    text-decoration: none;
+    color : black;
+    
+    border : 1px solid green;
+}
+
+.titreLien
+{
+    padding-left : 10px;
+    padding-right : 10px;
+    font-size: 22px;
+
+}
+/*
 table
 {
     border-collapse: collapse;
 }
+
 td{
     border : 1px solid black;
-}
\ No newline at end of file
+    font-size : 25px;
+    display: inline-block;
+}
+
+.questionP
+{
+    text-align: center;
+    border : 1px solid purple;
+}
+
+.question
+{
+    border: 3px solid orange;
+    display: block;
+    width : 100%;
+    margin : 0px;
+}
+*/
\ No newline at end of file
diff --git a/index.html b/index.html
index 8e35ca6..d3f4c52 100644
--- a/index.html
+++ b/index.html
@@ -8,43 +8,95 @@
 
     <body>
         <header>
-            <h1 class="titreSAE">SAE 01-06</h1>
-            <h2 class="titreSAE">DÉCOUVERTE DE L'ENVIRONNEMENT ÉCONOMIQUE ET ÉCOLOGIQUE - LMC</h1>
+            <h1 class="titreSAE" id="SAE">SAE 01-06</h1>
+            <h2 class="titreSAE" id="DECOUVERTE">DÉCOUVERTE DE L'ENVIRONNEMENT ÉCONOMIQUE ET ÉCOLOGIQUE - LMC</h1>
         </header>
 
         <section id="sommaire">
-            <table id="sommaireTableau">
-                <tr>
-                    <a class="question" href="">
-                        <td>
+            <h1 id="titreSommaire">Sommaire</h1>
+            
+            <div class="conteneur" id="liensQuestions">
+                <div class="blocLienQuestion">
+                    <a class="lienQuestion" href="#q1">
+                        <p class="titreLien">
                             Les caractéristiques des demandeurs et des autres offreurs et <br/>
                             les autres acteurs économiques concernés par notre activité
-                        </td>
+                        </p>
                     </a>
-                    <a class="question" href="">
-                        <td>
+                </div>
+
+                <div class="blocLienQuestion">
+                    <a class="lienQuestion" href="#q1">
+                        <p class="titreLien">
                             Le SWOT
-                        </td>
+                        </p>
                     </a>
-                </tr>
-                <tr>
-                    <a class="question" href="">
-                        <td>
+                </div>
+                
+                <div class="blocLienQuestion">
+                    <a class="lienQuestion" href="#q1">
+                        <p class="titreLien">
                             L'empreinte carbone de notre entreprise
-                        </td>
+                        </p>
                     </a>
-                    <a class="question" href="">
-                        <td>
+                </div>
+
+                <div class="blocLienQuestion">
+                    <a class="lienQuestion" href="#q1">
+                        <p class="titreLien">
                             La question complémentaire
-                        </td>
+                        </p>
                     </a>
+                </div>
+            </div>
+
+            <!--
+
+            <table id="sommaireTableau">
+                <tr>
+                    <td>
+                        <a class="question" href="#q1">
+                            <p class="questionP">
+                                Les caractéristiques des demandeurs et des autres offreurs et <br/>
+                                les autres acteurs économiques concernés par notre activité
+                            </p>
+                        </a>
+                    </td>
+
+                    <td>
+                        <a class="question" href="#q1">
+                            <p class="questionP">
+                                Le SWOT
+                            </p>
+                        </a>
+                    </td>
+                </tr>
+
+                <tr>
+
+                    <td>
+                        <a class="question" href="#q1">
+                            <p class="questionP">
+                                L'empreinte carbone de notre entreprise
+                            </p>
+                        </a>
+                    </td>
+
+                    <td>
+                        <a class="question" href="#q1">
+                            <p class="questionP">
+                                La question complémentaire
+                            </p>
+                        </a>
+                    </td>
                 </tr>
             </table>
+            -->
         </section>
 
         <section id="questions">
             <div id="q1">
-
+                <p>Hello WORLD</p>
             </div>
 
             <div id="q2">

+ Sommaire + + + + + Les caractéristiques des demandeurs et des autres offreurs et les autres acteurs économiques concernés par notre activité -	+ + + + + Le SWOT -
+ + + + + L'empreinte carbone de notre entreprise -	+ + + + + La question complémentaire -