v2 login.css

www/css/main.css

@@ -4,7 +4,7 @@ header {
     align-items: center;
     padding: 0 20px 0 20px;
     background-color: #FF8444;
-    height: 80px;
+    height: 160px;
 }
 body{
     margin: 0;
@@ -18,35 +18,35 @@ body{
 }
 
 .header-left img {
-    width: 50px;
-    height: 50px;
+    width: 120px;
+    height: 120px;
 }
 
 .header-center h2 {
+    font-size: 30px;
     margin: 0;
 }
 
 .submit-button {
     background-color: #34495e;
     color: white;
-    padding: 12px 20px;
+    padding: 18px 30px;
     border: none;
-    border-radius: 4px;
+    border-radius: 6px;
     cursor: pointer;
     float: right;
-    font-size: 16px;
-
-    box-shadow: 3px 3px #1B1B1B;
+    font-size: 24px;
+    box-shadow: 4px 4px #1B1B1B;
 }
 
 #teams-section {
     display: flex;
     flex-direction: column;
-    padding: 20px;
+    padding: 60px;
     background-color: #f2f2f2;
-    border-radius: 0 0 10px 10px;
-
+    border-radius: 10px 10px 10px 10px;
     box-shadow: 5px 5px #1B1B1B;
+    margin: 10px;
 
 }
 
@@ -57,35 +57,76 @@ body{
     margin-bottom: 5px;
 }
 
-#schemas-section {
-    padding: 20px;
-    background-color: #f2f2f2;
-    border-radius: 10px;
-    margin-top: 20px;
+#teams-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    overflow: hidden;
+    justify-content: center;
+}
+.team-item {
+    padding: 15px 15px 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    min-width: 150px;
+    margin: 10px;
+    background-color: #ccc;
+    border-radius: 15px;
 
-    box-shadow: 5px 5px #1B1B1B;
+    overflow: hidden;
+    box-shadow: 3px 3px #585858;
 }
 
-#schemas-section h2 {
-    text-align: center;
-    font-size: 24px;
-    margin-bottom: 20px;
+.team-item .team-name {
+    margin-bottom: 3px;
 }
 
-.teams-container {
+.team-name {
+    font-size: 18px;
+    margin-top: 10px;
+}
+
+.team-item img {
+    border-radius: 15px;
+    width: 100%;
+    height: auto;
+    max-width: 150px;
+    max-height: 150px;
+
+    box-shadow: 2px 2px #A7A7A7;
+}
+
+
+
+#schema-section {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    flex-direction: column;
+    padding: 60px;
+    background-color: #f2f2f2;
+    border-radius: 10px 10px 10px 10px;
+    margin: 10px;
+    box-shadow: 5px 5px #1B1B1B;
+
 }
 
+#schema-section h2 {
+    text-align: center;
+    font-size: 24px;
+    margin-top: 0;
+    margin-bottom: 5px;
+}
 
-#teams-list {
+
+#schema-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     overflow: hidden;
+    justify-content: center;
 }
-.team-item {
+.schema-item {
     padding: 15px 15px 5px;
     display: flex;
     flex-direction: column;
@@ -100,27 +141,16 @@ body{
     box-shadow: 3px 3px #585858;
 }
 
-.team-item .team-name {
+.schema-item .schema-name {
     margin-bottom: 3px;
 }
-/*
-.team-item {
-    display: block;
-    width: calc(100% * (1/4) - 10px - 1px);
-    margin: 10px;
-    text-align: center;
-    width: 200px;
-    height: 200px;
-    float: left;
-    margin: 10px;
-}
-*/
-.team-name {
+
+.schema-name {
     font-size: 18px;
     margin-top: 10px;
 }
 
-.team-item img {
+.schema-item img {
     border-radius: 15px;
     width: 100%;
     height: auto;
@@ -128,4 +158,7 @@ body{
     max-height: 150px;
 
     box-shadow: 2px 2px #A7A7A7;
-}
+}
+
+
+

www/index.html

@@ -11,7 +11,7 @@
         <img src="img/logo2.png" alt="logo">
     </div>
     <div class="header-center">
-        <h2>Bienvenue, Prénom Nom</h2>
+        <h2>Hello Prénom Nom !</h2>
     </div>
     <div class="header-right">
         <!-- <button>
@@ -54,39 +54,40 @@
             </div>
         </div>
     </div>
-
-    <div id="schemas-section">
-        <div id="schemas-list-h">
-            <h2>Mes schémas</h2>
+    <div id="schema-section">
+        <div id="schema-list-h">
+            <h2>Mes Schémas</h2>
         </div>
-        <div id="schemas-list">
-            <div class="shema-item">
-                <img src="img/shema.png">
-                <p class="shema-name">Shéma 1</p>
+        <div id="schema-list">
+            <!-- afficher la liste des équipes -->
+            <div class="schema-item">
+                <img src="img/schema.png">
+                <p class="schema-name">Schémas 1</p>
             </div>
-            <div class="shema-item">
-                <img src="img/shema.png">
-                <p class="shema-name">Shéma 2</p>
+            <div class="schema-item">
+                <img src="img/schema.png">
+                <p class="schema-name">Schémas 2</p>
             </div>
-            <div class="shema-item">
-                <img src="img/shema.png">
-                <p class="shema-name">Shéma 3</p>
+            <div class="schema-item">
+                <img src="img/schema.png">
+                <p class="schema-name">Schémas 3</p>
             </div>
-            <div class="shema-item">
-                <img src="img/shema.png">
-                <p class="shema-name">Shéma 3</p>
+            <div class="schema-item">
+                <img src="img/schema.png">
+                <p class="schema-name">Schémas 3</p>
             </div>
-            <div class="shema-item">
-                <img src="img/shema.png">
-                <p class="shema-name">Shéma 3</p>
+            <div class="schema-item">
+                <img src="img/schema.png">
+                <p class="schema-name">Schémas 3</p>
             </div>
-            <div class="shema-item">
-                <img src="img/shema.png">
-                <p class="shema-name">Shéma 3</p>
+            <div class="schema-item">
+                <img src="img/schema.png">
+                <p class="schema-name">Schémas 3</p>
             </div>
         </div>
-        </div>
     </div>
+
+
 </main>
 </body>
 </html>