aichan

8 months ago · 1c9f0caf19
parent 92b4072a76
commit 1c9f0caf19
3 changed files with 56 additions and 18 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,5 @@
 *.mp3
 *.jpg
 *.gif
+*.webm
+*.webp
--- a/index.html
+++ b/index.html
@ -8,8 +8,17 @@
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <a href="home/">
-    <img src="./static/site/logo.png" class="logo">
-  </a>
+  <div id="main">
+    <div class="logo">
+      <a href="home/">
+        <img src="./static/site/logo.png" id="melon">
+      </a>
+    </div>
+    <div id="text">
+        <img src="ai_laptop_crying.png.webp">
+        <h1>Um... e-excuse me... T-this website... uses music a lot, so... um... please remember to turn autoplay on!</h1>
+    </div>
+  </div>
+  
 </body>
 </html>
--- a/styles.css
+++ b/styles.css
@ -1,21 +1,48 @@
 body, html {
-    height: 100%;
-    margin: 0;
-    overflow: hidden; /* Prevents scrollbar from appearing */
-  }
+  height: 100%;
+  margin: 0;
+  overflow: hidden; 
+}
+#main{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}

 body {
-display: flex;
-justify-content: center;
-align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  }
+
+.logo img {
+  transition: transform 0.5s ease-in-out;
+}
+
+#text {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50vw;
+}
+
+#main:hover .logo img {
+  transform: scale(1.5) rotate(360deg); /* Adjust the scale factor as needed */
 }

-.logo {
-max-width: 100%;
-height: auto;
-transition: transform 0.3s, scale 0.3s;
+#main:hover #text {
+  opacity: 1;
 }

-.logo:hover {
-transform: scale(1.5) rotate(360deg); /* Rotates the logo 360 degrees */
+
+
+body, html{
+  font-family: CustomFont, sans-serif; /* Use the custom font as the fallback */
+}
+@font-face {
+  font-family: CustomFont;
+  src: url('static/fonts/c1-kenangan.regular.otf') format('truetype'); /* Change 'your-font.ttf' to the actual font file name */
 }