Theme: KAngel v1

nishimi-ya · Feb 26, 2023 · f410003 · f410003
1 parent 9620de4
commit f410003
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 100 deletions.
diff --git a/index.html b/index.html
@@ -1,107 +1,46 @@
 <!DOCTYPE html>
 <html>
-
 <head>
-  <title>My Page</title>
-  <style>
-    @font-face {
-      font-family: 'azukifontB';
-      font-style: normal;
-      font-weight: 400;
-      src: url('../startpage/fonts/azukifontB.ttf') format('truetype')
-    }
-
-    html {
-      align-items: center;
-      display: flex;
-      height: 100%;
-      justify-content: center;
-      margin: 0;
-    }
-
-    body {
-      display: flex;
-      font-family: "azukifontB";
-      font-size: 22px;
-      background-color: #FDFAFB;
-      margin: 1em;
-      padding: 1em;
-    }
-
-    h1 {
-      font-size: 2em;
-      grid-column: 1 / -1;
-      margin: 0;
-      text-align: center;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    a:focus,
-    a:hover {
-      color: #565656;
-    }
-
-    nav {
-      display: grid;
-      grid-row-gap: 1em;
-      grid-template-columns: 1fr 1fr;
-      margin: 0 1em;
-      min-width: 24em;
-      padding: 1em 0;
-    }
-
-    ul {
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-      white-space: nowrap;
-    }
-
-    li:first-child {
-      font-weight: bold;
-      line-height: 2em;
-    }
-
-    img {
-      height: auto;
-      object-fit: cover;
-      object-position: 50% 100%;
-      width: 8em;
-    }
-  </style>
+  <meta charset="utf-8">
+  <title>Needy Girl Overdose</title>
+  <!--<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">-->
+  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
-
 <body>
-  <nav>
-    <h1>こにちは、ニシちゃん！</h1>
-    <ul>
-      <li>リンク：</li>
-      <li>
-        <a href="https://boards.4channel.org/g/">../g/</a><a href="https://boards.4channel.org/w/">Wallpaper/</a>
-      </li>
-      <li>
-        <a href="https://wiki.gentoo.org/wiki/Main_Page">../Gentoo/</a><a
-          href="https://wiki.archlinux.org/">Archwiki/</a>
-      </li>
-      <li>
-        <a href="https://music.youtube.com">../Music/</a><a href="https://youtube.com">Youtube/</a>
-      </li>
-      <li>
-        <a href="https://studentportal.ipb.ac.id/">../Student Portal/</a><a
-          href="https://evieta.ipb.ac.id/my/">Evieta/</a>
-      </li>
-      <li>
-        <a href="https://libgen.is/">../Library Genesis/</a><a href="https://kemono.party/">kemono/</a><a
-          href="https://sci-hub.tf/">sci-hub/</a>
-
-      </li>
-    </ul>
-  </nav>
-  <img src="./pape.png">
+  <div class="loader">
+    <div class="inner">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div id="startpage">
+    <header>
+      <h1>こにちは、KAngel</h1>
+    </header>
+    <main>
+      <div id="left-column">
+        <img src="./portrait.jpeg" alt="Kangel">
+      </div>
+      <div id="right-column">
+        <nav>
+          <ul>
+            <li><a href="https://evieta.ipb.ac.id/my/">EVIETA</a></li>
+            <li><a href="https://lainchan.org/">LAINCHAN</a></li>
+            <li><a href="https://libgen.is/">LIBGEN.IS</a></li>
+            <li><a href="https://boards.4channel.org/c/">/CUTE/</a></li>
+            <li><a href="https://www.youtube.com/">YOUTUBE</a></li>
+          </ul>
+        </nav>
+      </div>
+    </main>
+  </div>
+  <script>
+    setTimeout(function(){
+      document.querySelector('.loader').style.display = "none";
+      document.querySelector('#startpage').style.display = "block";
+    }, 15000);
+  </script>
 </body>
-
 </html>
+
diff --git a/pape.png b/pape.png
diff --git a/portrait.jpeg b/portrait.jpeg
diff --git a/style.css b/style.css
@@ -0,0 +1,156 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  /*font-family: 'Roboto', sans-serif;*/
+  src: url('../startpage/fonts/azukifontB.ttf') format('truetype')
+  font-family: 'azukifontB', Roboto;
+  background-color: #f7d4e8;
+}
+
+#startpage {
+  display: none;
+}
+
+header {
+  text-align: center;
+  margin-top: 50px;
+}
+
+header h1 {
+  font-size: 48px;
+  color: #ff5e5e;
+}
+
+main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 50px;
+}
+
+#left-column {
+  margin-right: 100px;
+}
+
+#left-column img {
+  max-width: 100%;
+  object-fit: cover;
+  width: 28em;
+  height: auto;
+  border: 5px solid #ff5e5e;
+}
+
+#right-column nav ul li {
+  list-style-type: none;
+  margin-bottom: 20px;
+}
+
+#right-column nav ul li a {
+  font-size: 24px;
+  color: #ff5e5e;
+  text-decoration: none;
+}
+
+#right-column nav ul li a:hover {
+  color: #e5004d;
+}
+
+/* startpage.css */
+
+/* Loading animation */
+.loader {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 9999;
+  background: #f8eaf1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.loader .inner {
+  position: relative;
+}
+
+.loader .inner div {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: #e15b64;
+  animation: loader-anim 5s ease-in-out infinite;
+}
+
+.loader .inner div:nth-child(2) {
+  animation-delay: 0.8s;
+}
+
+.loader .inner div:nth-child(3) {
+  animation-delay: 1.6s;
+}
+
+@keyframes loader-anim {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+/* Main content */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.links {
+  position: fixed;
+  top: 50%;
+  right: 50px;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-family: 'Open Sans', sans-serif;
+  color: #333;
+}
+
+.links a {
+  display: block;
+  margin: 10px 0;
+  font-size: 1.5rem;
+  text-align: right;
+  text-decoration: none;
+  color: inherit;
+}
+
+.links a:hover {
+  color: #e15b64;
+}
+
+.image {
+  position: fixed;
+  top: 50%;
+  left: 50px;
+  transform: translateY(-50%);
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  width: auto;
+  margin-right: 100px;
+}
+