Update index.html

iogamesmaker · Feb 18, 2024 · 151984f · 151984f
1 parent eeef7a7
commit 151984f
Showing 1 changed file with 62 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -1,67 +1,90 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-<title>Smooth Mandelbrot Set</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>stupid thing</title>
+<link rel="stylesheet" href="styles.css">
 <style>
-  body {
-    background-color: black;
-    color: white;
-    font-family: 'Ubuntu', sans-serif;
+body {
+    font-family: Arial, sans-serif;
     margin: 0;
-  }
+    padding: 0;
+}
 
-  .top-bar {
+.top-bar {
+    background-color: #111;
+    color: #fff;
+    padding: 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-  }
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
 
-  .top-bar a {
+.title {
+    margin: 0;
+}
+
+.top-bar a {
+    color: #fff;
     text-decoration: none;
-    color: white;
-    margin: 5px;
-  }
+    margin-right: 15px;
+}
+
+.top-bar a:hover {
+    text-decoration: underline;
+}
 
-  .dropdown {
+.dropdown {
     position: relative;
     display: inline-block;
-  }
+}
 
-  .dropdown-content {
+.dropdown-content {
     display: none;
     position: absolute;
-    min-width: 160px;
+    background-color: #f9f9f9;
+    min-width: 200px;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
     z-index: 1;
-    right: 0;
-  }
+}
 
-  .dropdown:hover .dropdown-content {
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {
+    background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
     display: block;
-  }
-code {
-  font-family: Consolas,"courier new";
-  color: white;
-  background-color: #1f1f1f;
-  padding: 2px;
-  font-size: 105%;
 }
 </style>
 </head>
 <body>
 <div class="top-bar">
-  <h3>My stupid site</h3>
-  <div>
-    <a href="https://iogamesmaker.github.io">Home</a>
-    <div class="dropdown">
-      <a>Projects</a>
-      <div class="dropdown-content">
-        <a href="https://iogamesmaker.github.io/smoothmandelbrot">The Mandelbrot Set</a>
-        <a href="https://iogamesmaker.github.io/blackholerenderer">Black Hole Renderer</a>
-      </div>
+    <h3 class="title">My Stupid Site</h3>
+    <div>
+        <a href="#">Home</a>
+        <div class="dropdown">
+            <a>Projects</a>
+            <div class="dropdown-content">
+              <a href="https://iogamesplayer.com/smoothmandelbrot">The Mandelbrot Set</a>
+              <a href="https://iogamesplayer.com/blackholerenderer">Black Hole Renderer</a>
+            </div>
+        </div>
+        <a href="#">Info</a>
     </div>
-    <a href="https://iogamesmaker.github.io/info">Info</a>
-  </div>
 </div>
+<main class="layout">
 <h1>The (smooth) Mandelbrot Set</h1>
 <p1>After experimenting with ChatGPT to create fractal generators, I decided to make one myself. I did so with the help of a wikipedia article called "Plotting the Mandelbrot Set". If you're new to coding and looking for a fun, low effort/high reward project to work on I'd definitively give the Mandelbrot set a try, I've attempted to make a tutorial on the bottom of the page. This is my most polished, and longest running project I've been working on, and also the only fun one :).</p1>
 <h2>Controls</h2>
@@ -174,5 +197,6 @@ <h2>Some images</h2>
 <img src="https://user-images.githubusercontent.com/130794776/273916397-88f2a6fb-e9fc-4650-8279-64b084ea33fe.png"width="640" height="360"> 
 <img src="https://user-images.githubusercontent.com/130794776/273916402-08a411b9-04c9-49a3-b297-813710030927.png"width="640" height="360"> 
 <img src="https://user-images.githubusercontent.com/130794776/273917467-4de4b40d-8f75-4262-8971-6aa82b44d333.png"width="640" height="360"> 
+</main>
 </body>
 </html>