Update BadHumour.html

VietYorgo · Oct 30, 2024 · 8c18dff · 8c18dff
1 parent e461101
commit 8c18dff
Showing 1 changed file with 31 additions and 15 deletions.
diff --git a/BadHumour.html b/BadHumour.html
@@ -12,26 +12,35 @@
     }
     body {
       font-family: 'Arial', sans-serif;
-      background-color: #f4f4f9;
+      background: url('https://i.imgur.com/IhwQMEa.png') no-repeat center center fixed;
+      background-size: cover;
       color: #333;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
       min-height: 100vh;
+      position: relative;
     }
+
     .menu {
       width: 100%;
       max-width: 400px;
       text-align: center;
+      background-color: rgba(255, 255, 255, 0.8);
+      padding: 20px;
+      border-radius: 12px;
+      position: absolute;
+      right: 30px; /* Aligns the menu to the right */
+      top: 50%;
+      transform: translateY(-50%); /* Vertically centers the menu */
     }
+
     .menu ul {
       list-style-type: none;
       padding: 0;
     }
+
     .menu li {
       margin-bottom: 15px;
     }
+
     .menu a {
       display: block;
       text-decoration: none;
@@ -42,20 +51,28 @@
       font-size: 1.2rem;
       transition: background-color 0.3s ease;
     }
+
     .menu a:hover {
       background-color: #005bb5;
     }
+
     .back-link {
-      margin-top: 20px;
+      position: absolute;
+      top: 20px; /* Positions it at the top */
+      left: 20px; /* Aligns it to the left */
     }
+
     .back-link a {
       text-decoration: none;
-      color: #0073e6;
+      color: #ff6600; /* Different color for the back link */
       font-size: 1.1rem;
+      font-weight: bold;
     }
+
     .back-link a:hover {
-      color: #005bb5;
+      color: #cc5200;
     }
+
     @media (max-width: 600px) {
       .menu a {
         padding: 12px;
@@ -65,22 +82,21 @@
   </style>
 </head>
 <body>
+  <div class="back-link">
+    <p><a href="index.html">Back to the main page</a></p>
+  </div>
   <nav class="menu">
     <ul>
       <li><a href="DadJokes.html">Dad Jokes</a></li>
       <li><a href="Derrida.html">Derrida Memes</a></li> 
-       <li><a href="Foucault.html">Foucault Memes</a></li> 
+      <li><a href="Foucault.html">Foucault Memes</a></li> 
       <li><a href="Hegel_Memes.html">Hegel Memes</a></li>
-      <li><a href="Posadas.html"> J. Posadas Memes</a></li>
+      <li><a href="Posadas.html">J. Posadas Memes</a></li>
       <li><a href="zizek_memes.html">Zizek Memes</a></li>
-      <li><a href="Schopenhauer.html"> Schopenhauer Memes</a></li>
+      <li><a href="Schopenhauer.html">Schopenhauer Memes</a></li>
       <li><a href="Generic_Philosophy_Memes.html">Generic Philosophy Memes</a></li>
       <li><a href="Memes about the human condition.html">The Human Condition in Memes</a></li>
-
     </ul>
   </nav>
-  <div class="back-link">
-    <p><a href="index.html">Back to the main page</a></p>
-  </div>
 </body>
 </html>