anniversary

3 months ago · f0d33facfd
parent 11290e8e75
commit f0d33facfd
4 changed files with 98 additions and 1 deletions
--- a/home/normal/anniversary-2024/index.html
+++ b/home/normal/anniversary-2024/index.html
@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../default_style.css">
+    <title>Centered Image Viewer</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #3a3a3a;
+        }
+        .title-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 15vh;
+            width: 100%;
+            background-color: #000000;
+            border-bottom: 2px solid #000000;
+            color: white;
+        }
+        .image-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 70vh;
+            width: 100%;
+        }
+        .thumbnail {
+            max-height: 70vh;
+            max-width: 100%;
+            cursor: pointer;
+            border: 2px solid #ccc;
+            border-radius: 10px;
+        }
+        .bottom{
+            display: flex;
+            color: white;
+            height: 15vh;
+            justify-content: center;
+            align-items: center;
+
+
+        }
+    </style>
+</head>
+<body>
+    <div class="title-container">
+    <div><h1>Waifuism.life third anniversary.</h1></div>
+    </div>
+    <div class="image-container">
+        <a href="waifuism.png" target="_blank">
+            <img src="waifuism.png" alt="Waifuism" class="thumbnail">
+        </a>
+    </div>
+    <div class="bottom"><h1 style="justify-content: center; text-align: center;">Is your image missing? Do you want to be drawn? Did I forgot to credit you? Do you want to remove yourself from it?<br>Please <a href="https://mai.waifuism.life/notes/9srugmdaqj7301u2" style="color: rgb(228, 255, 255);">send a reply in the official thread</a></h1></div>
+</body>
+</html>
--- a/home/normal/anniversary-2024/waifuism.png
+++ b/home/normal/anniversary-2024/waifuism.png
--- a/home/normal/index.html
+++ b/home/normal/index.html
@ -45,6 +45,7 @@
                </div>

                <p>Waifuism.life started as a <a style="color: rgb(14, 70, 12);" href="https://pleroma.social/">Pleroma</a> instance on May 11th of 2021, now it's running <a style="color: rgb(14, 70, 12);" href="https://misskey-hub.net/en/">Misskey</a> over at mai.waifuism.life.</p>
+                <a href="./anniversary-2024"><button class="fun-button"><h1>It was Waifuism.life anniversary recently!<br>Check it out!</h1></button></a>
                <p>The official mascot is waifuism-tan, but she likes to be called Mora.</p>
                <p>This website is designed around desktops, not phones, go check it on your computer.</p>
                <p>If you have autoplay on, you're listening to my favorite song, "Cuantas veces mas" from Javier Cardellino, an Uruguayan Musician.</p>
--- a/home/normal/styles.css
+++ b/home/normal/styles.css
@ -136,4 +136,32 @@ src: url('stuff/Brushzing-Regular.ttf.otf') format('truetype'); /* Change 'your-
 .melon {
 animation: wiggleRotate 4s ease-in-out infinite;
 }
-  
+
+.fun-button {
+    background-color: #1fd80e;
+    border: 2px solid #0d990d;
+    color: black;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 18px;
+    font-weight: bold;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 50px;
+    box-shadow: 0 8px #999;
+    transition: all 0.3s ease;
+}
+
+.fun-button:hover {
+    background-color: #2ecf0e;
+    box-shadow: 0 12px #666;
+    transform: translateY(-2px);
+}
+
+.fun-button:active {
+    background-color: #0bdd0b;
+    box-shadow: 0 4px #666;
+    transform: translateY(4px);
+}