edit: version html css propre pour version dégradé sans js + responsive pour écrans larges

2026-07-26 19:55:23 +02:00
parent 4e82328ff9
commit 13b3b06d11
5 changed files with 262 additions and 20 deletions
@@ -0,0 +1,226 @@
+/*===========================Moyen format : Tablette et petite fenêtres PC ===*/
+@media(min-width: 650px){
+  header{
+    height: 60px;
+
+          h1{
+            margin-bottom: 5px;
+
+                  img{
+                    height: 40px;
+                  }
+          }
+          nav > ul{
+
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+            height: 44px;
+            margin-top: 16.1px;
+            margin-right: 13.12px;
+            min-width: 444px;
+            box-sizing: border-box;
+
+                  li{
+                    height: 100%;
+                  }
+
+                  .textBtnStyle{
+                    border-radius: 0;
+                    width: 93px;
+                    height: 100%;
+                  }
+          }
+  }
+
+  main{
+    #homeContent{
+      height: 77vh;
+      grid-template-columns: 2fr 2fr 1fr;
+      grid-template-rows: 0.7fr 2fr;
+
+          #titleSection{
+            height: 110%;
+                  h2{
+                    font-size: 27px;
+                          small{
+                            font-size: 20px;
+                          }
+                  }
+          }
+
+          #hourSection{
+            grid-column: 1;
+            width: 50%;
+            height: 100%;
+            justify-self: start;
+          }
+
+          address{
+            padding-top: 16.1px;
+          }
+
+          #planSection{
+            grid-column: 2 / 4;
+                  #planContainer{
+                    width: 110%;
+                    height: auto;
+                    margin-left: -88px;
+                    margin-top: -50px;
+
+                          @media(min-width: 800px){
+                            margin-top: -88px;
+                          }
+                  }
+          }
+
+          #extLinkSection{
+            justify-content: flex-start;
+            padding-top: 33px;
+          }
+
+    }
+  }
+
+  #statuSection{
+
+  }
+
+  #extraContent{
+
+
+          #aboutSection{
+
+          }
+
+          #eventSection{
+
+          }
+  }
+}
+
+/*===========================Grand format : écrans larges et grands ===*/
+@media(min-width: 1300px){
+  header{
+    nav > ul{
+
+      font-size: 27px;
+
+            li{
+              height: 100%;
+            }
+
+            .textBtnStyle{
+              padding-left: 16.1px;
+              width: 133px;
+            }
+    }
+  }
+
+  main{
+    #homeContent{
+
+
+          #titleSection{
+            width: 90%;
+          }
+
+          #hourSection{
+            height: 77%;
+            width: 44%;
+
+                  h3{
+                    font-size: 20px;
+                  }
+
+                  ol{
+                    font-size: 16.1px;
+                          strong{
+                            font-size: 22px;
+                          }
+                  }
+          }
+
+          address{
+            font-size: 22px;
+          }
+
+          #planSection{
+                  #planContainer{
+                    width: 100%;
+                    height: auto;
+                    margin-left: -88px;
+                    margin-top: -133px;
+                  }
+          }
+
+          #extLinkSection{
+            a img{
+              height: 77px;
+            }
+          }
+
+    }
+
+    #statuSection{
+            #statusDesc{
+              padding-left: 77px;
+              font-size: 20px;
+            }
+            h3{
+              font-size: 33px;
+              padding-top: 7.77px;
+              margin-left: -88px;
+            }
+    }
+
+    #extraContent{
+      height: 90vh;
+      flex-direction: row;
+      overflow: hidden;
+
+            #aboutSection{
+              font-size: 22px;
+            }
+
+            #eventSection{
+                    #eventContent{
+                            li{
+                                    .iconBtnStyle{
+                                      width: 44px;
+                                      height: 44px;
+                                      border-radius: 22px;
+                                      right: 13.12px;
+                                    }
+
+                                    .icon{
+                                      height: 22px;
+                                    }
+                            }
+
+                            details{
+                              summary{
+                                .title{
+                                  font-size: 22px;
+
+                                  h4{
+                                    font-size: 27px;
+                                  }
+                                }
+
+                                .resume{
+                                  font-size: 16.1px;
+                                }
+                              }
+                              .description{
+                                font-size: 16.1px;
+                              }
+                            }
+                    }
+            }
+    }
+  }
+
+
+}