CSSSSS

css/index.css

@@ -86,4 +86,12 @@
     position: absolute; 
     left:0%; 
     top: 0%;
+}
+
+.ad-vieux{
+    display: none;
+}
+
+.ad-moderne{
+    display: none;
 }

css/t2.css

@@ -50,10 +50,9 @@ td, th {
     border: 8px solid #fc04fc;
 }
 
-div.ad{
+
-    visibility: visible;
+.ad-vieux{
     display: block !important;
-    
     width: 150px;
     padding: 12px;
     margin-top: 10px;
@@ -61,9 +60,9 @@ div.ad{
     border: 1px solid #87bc44;
     background: #e0ff92;
     line-height: 1.2;
-    }
+}
-div.ad.adt3{
+.ad-vieux .adt3{
-    visibility: hidden;
+    display: none !important;
 }
 table.table-magasin{
     width: 150px;

css/t3.css

@@ -56,8 +56,7 @@ td {
     border: 1px solid #ddd;
 }
 
-div.ad{
+.ad-vieux{
-    visibility: visible;
     display: block !important;
     float: right;
     width: 162px;
@@ -67,9 +66,10 @@ div.ad{
     border: 1px solid #87bc44;
     background: #e0ff92;
     line-height: 1.2;
-    }
+}
-div.ad.adt3{
+
-    visibility: visible;
+.ad-vieux .adt3{
+    display: block;
 }
 
 table.table-magasin{

css/t7.css

@@ -27,11 +27,6 @@ main {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-
-p {
-    margin-bottom: 20px;
-}
-
 button {
     padding: 10px 25px;
     font-size: 16px;
@@ -104,27 +99,20 @@ table tr:nth-child(even) {
 
 footer {
     text-align: center;
-    padding: 10px ;    border-radius: 5px;
-
-    background-color: #2c3e50;
     color: white;
-    margin-top: 40px;
+    bottom: 0px !important;
+    position: fixed !important;
+    width: 100%;
+    left: 0px !important;
+}
+
+footer p{
+    margin-bottom: 0px;
     font-size: 14px;
+    padding: 10px;    
+    background-color: #2c3e50;
 }
 
-div.card {
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    margin: 20px 0;
-    transition: transform 0.2s ease, box-shadow 0.3s ease;
-}
-
-div.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-}
 
 
 div.score-button{

css/t8.css

@@ -3,9 +3,10 @@ body {
     font-family: 'Roboto', sans-serif;
     background-color: #f4f4f9;
     color: #333;
-    margin: 0;
+    margin: 0px;
-    padding: 0;
+    padding: 0px;
     line-height: 1.6;
+
 }
 
 main {
@@ -15,6 +16,7 @@ main {
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    min-height: 85vh;
 }
 
 output{
@@ -72,12 +74,7 @@ th {
 table tr:hover {
     background-color: #f1f1f1;
 }
-/* table.table_magasin{
+
-    width: 150px;
-    padding: 12px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-} */
 
 a{
     color: #fda500;
@@ -89,24 +86,71 @@ a:visited{
 
 footer {
     text-align: center;
-    padding: 10px ;    border-radius: 5px;
+    align-items: center;
-
-    background-color: #e74c3c;
     color: white;
-    margin-top: 40px;
+    bottom: 0px !important;
+    position: fixed !important;
+    width: 100%;
+}
+
+footer p{
     font-size: 14px;
+    background-color: #e74c3c;
+    width: 76%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 1vh;
+    padding: 10px;    
+    border-radius: 5px;
 }
 
-div.card {
+
-    background-color: white;
+
-    border-radius: 8px;
+.ad-moderne-left {
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    position: fixed;
-    padding: 20px;
+    left: 0;
-    margin: 20px 0;
+    top: 0;
-    transition: transform 0.2s ease, box-shadow 0.3s ease;
+    bottom: 0;
+    width: 10vw;
+    height: fit-content;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+
 }
 
-div.card:hover {
+.ad-moderne-right {
-    transform: translateY(-5px);
+    position: fixed;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 10vw;
+    height: fit-content;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 10;
 }
+
+.ad-container {
+    margin: 10px 0;
+    text-align: center;
+}
+
+.ad-moderne img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    z-index: 11;
+}
+
+.ad-moderne{
+    display: block !important;
+}

css/t9.css

@@ -19,6 +19,7 @@ main {
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    min-height: 50vw;
 }
 
 button {
@@ -83,8 +84,6 @@ th {
     text-transform: uppercase;
 }
 
-
-
 a{
     color: #fda500;
 }
@@ -116,24 +115,76 @@ div.score-button:hover {
 
 footer {
     text-align: center;
-    padding: 10px ;    border-radius: 5px;
-
-    background-color: #fda500;
     color: white;
-    margin-top: 40px;
+    width: 100%;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    bottom: 0px !important;
+    position: fixed !important;
+}
+
+footer p{
     font-size: 14px;
+    background-color: #fda500;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 10px;    
+    border-radius: 5px;
+    margin-bottom: 1vh;
 }
 
-div.card {
+
-    background-color: white;
+
-    border-radius: 8px;
+/* Left Ads */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.ad-moderne-left {
-    padding: 20px;
+    position: fixed;
-    margin: 20px 0;
+    left: 0;
-    transition: transform 0.2s ease, box-shadow 0.3s ease;
+    top: 0;
+    bottom: 0;
+    width: 10vw;
+    height: fit-content;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+
 }
 
-div.card:hover {
+/* Right Ads */
-    transform: translateY(-5px);
+.ad-moderne-right {
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    margin-top: 20vw;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 10vw;
+    height: fit-content;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px 0;
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 10;
 }
+
+/* Ad Content */
+.ad-container {
+    margin: 10px 0;
+    text-align: center;
+}
+
+.ad-moderne img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    z-index: 11;
+}
+
+.ad-moderne{
+    display: block !important;
+}

index.html

@@ -83,10 +83,39 @@
         </section>
 
         <!-- Section Publicités -->
-        <section id="ad-section" class="ad" style="display: none;">
+        <section id="ad-section">
-            <img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
+
-            <div></div>
+            <!--Pubs années 2000-->
-            <img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
+
+            <section id="ad-vieux" class="ad-vieux">
+                <img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
+                <img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
+            </section>
+
+            <!-- Pubs modernes Gauche -->
+            <div class="ad-moderne-left">
+                <section id="ad-section-left" class="ad-moderne">
+                    <div class="ad-container">
+                        <img src="./img/shrek3.webp" alt="Pub Shrek 3">
+                    </div>
+                    <div class="ad-container">
+                        <img src="./img/shrek4.jpg" alt="Pub Shrek 4">
+                    </div>
+                </section>
+            </div>
+
+
+             <!-- Pubs modernes Droite -->
+            <div class="ad-moderne-right">
+                <section id="ad-section-right" class="ad-moderne">
+                    <div class="ad-container">
+                        <img src="./img/shrek.webp" alt="Pub Shrek 1">
+                    </div>
+                    <div class="ad-container">
+                        <img src="./img/shrek2.jpg" alt="Pub Shrek 2">
+                    </div>
+                </section>
+            </div>
         </section>
 
         <!-- Section Cadeau -->
@@ -94,6 +123,7 @@
             <div id="div_cadeau">
                 <img id="img_cadeau" src="img/cadeau.png" alt="Image de cadeau">
             </div>
+            
         </section>
     </main>