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>
  <div id="main">
    <div class="logo">
      <a href="home/">
-    <img src="./static/site/logo.png" class="logo">
+        <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,7 +1,13 @@
 body, html {
  height: 100%;
  margin: 0;
-    overflow: hidden; /* Prevents scrollbar from appearing */
+  overflow: hidden; 
 }
 #main{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }
 body {
@ -10,12 +16,33 @@ justify-content: center;
  align-items: center;
  }
-.logo {
+.logo img {
-max-width: 100%;
+  transition: transform 0.5s ease-in-out;
-height: auto;
+}
-transition: transform 0.3s, scale 0.3s;
+
 #text {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vw;
 }
-.logo:hover {
+#main:hover .logo img {
-transform: scale(1.5) rotate(360deg); /* Rotates the logo 360 degrees */
+  transform: scale(1.5) rotate(360deg); /* Adjust the scale factor as needed */
 }
 #main:hover #text {
  opacity: 1;
 }
 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 */
 }