aichan

5 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/">
+  <div id="main">
-    <img src="./static/site/logo.png" class="logo">
+    <div class="logo">
-  </a>
+      <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%;
+  height: 100%;
-    margin: 0;
+  margin: 0;
-    overflow: hidden; /* Prevents scrollbar from appearing */
+  overflow: hidden; 
-  }
+}
 #main{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }
 body {
-display: flex;
+  display: flex;
-justify-content: center;
+  justify-content: center;
-align-items: 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 {
+#main:hover #text {
-max-width: 100%;
+  opacity: 1;
 height: auto;
 transition: transform 0.3s, scale 0.3s;
 }
-.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 */
 }