Structure du sommaire

2 years ago · 61b4a4e8e9
parent e491de4b2d
commit 61b4a4e8e9
2 changed files with 173 additions and 26 deletions
--- 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;
-}
+    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;
+}
+*/
--- 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">