Major changes, still WIP

PlayfulPiano · Jan 14, 2024 · 8c494fa · 8c494fa
1 parent d9b775c
commit 8c494fa
Show file tree

Hide file tree

Showing 16 changed files with 129 additions and 7 deletions.
diff --git a/games/hollowknight.html b/games/hollowknight.html
@@ -2,10 +2,41 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="../styles.css">
+    <title>Hollow Knight</title>
+    <link rel="stylesheet" href="../styles.css"> <!-- Tip: Consider having a separate CSS file for these types of pages to keep your CSS clean -->
 </head>
 <body>
     <a href="../index.html">Back to Home</a>
+
+    <h1>Hollow Knight</h1>
+
+    <!-- For ways to stylize a table, check out https://www.w3schools.com/css/css_table.asp -->
+    <table class="sheetsTable"> <!-- class="sheetsTable" applies "sheetsTable" as a class to be used in CSS. You can apply multiple classes by separating them with spaces class="sheetsTable mainTable etc"-->
+        <thead>
+            <tr>
+                <!-- If you want column headers for your columns, you can build that here-->
+                <th>Title</th>
+                <th>Printable Sheet Music</th>
+                <th><img class="logo" src="../images/youtubetext.png" alt="Youtube Presentation"></th>
+                <th>Original Track</th>
+            </tr>
+        </thead>
+        <tbody> <!-- This indicates the body of the table -->
+            <tr> <!-- This indicates a new row in the table -->
+                <th>White Palace</th> <!--You can use <th> instead of <td> to indicate this is a row header -->
+                <td><a href="">[PDF]</a></td> <!-- <td> represents a single data cell in the table -->
+                <td><a href="">[Link]</a></td>
+                <td><a href="">[Link]</a></td>
+            </tr>
+            <tr>
+                <th>City of Tears</th>
+                <td><a href="">[PDF]</a></td>
+                <td><a href="">[Link]</a></td>
+                <td><a href="">[Link]</a></td>
+            </tr>
+            <!-- Continue ad nauseum (yes, it's repetive -- this is why frameworks like Jekyll, React, and Angular exist) -->
+            <!-- I would consider putting them in some logical ordering for now (like alphabetical ordering) -->
+        </tbody>
+    </table>
 </body>
 </html>
diff --git a/games/minecraft.html b/games/minecraft.html
diff --git a/games/omori.html b/games/omori.html
diff --git a/games/other.html b/games/other.html
diff --git a/images/bluesky.png b/images/bluesky.png
diff --git a/images/celeste.png b/images/celeste.png
diff --git a/images/hollowknight.png b/images/hollowknight.png
diff --git a/images/minecraft.png b/images/minecraft.png
diff --git a/images/omori.png b/images/omori.png
diff --git a/images/pmd.png b/images/pmd.png
diff --git a/images/twitch.png b/images/twitch.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/images/youtube.png b/images/youtube.png
diff --git a/images/youtubetext.png b/images/youtubetext.png
diff --git a/index.html b/index.html
@@ -6,10 +6,51 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>Hello World!</h1>
-    <p>This is testing out a new website for sheet music hosting. WIP.</p>
-    <a href="games/hollowknight.html">Hollow Knight</a>
-    <br />
-    <a href="games/celeste.html">Celeste</a>
+    <h1>PlayfulPiano's Corner of the Internet (Still Very WIP)</h1>
+    <body>Hello, and welcome! My name is Jacob and I am an amateaur piano arranger for video game music. This is a website where you can download all of my arrangements for free! Enjoy. </body>
+    <div class="sheet-music">
+        <a href="games/hollowknight.html">
+            <img src="images/hollowknight.png" alt="Hollow Knight">
+        </a>
+        <a href="games/celeste.html">
+            <img src="images/celeste.png" alt="Celeste">
+        </a>
+        <br />
+        <a href="games/omori.html">
+            <img src="images/omori.png" alt="Omori">
+        </a>
+        <a href="games/minecraft.html">
+            <img src="images/minecraft.png" alt="Minecraft">
+        </a>
+        <br />
+        <a href="games/other.html">
+            <h1>Other Games</h1>
+        </a>
+
+    </div>
+    <h2>Social Media</h2>
+    <div class="social-media">
+        <a href="https://twitter.com/PlayfulPianoVGM">
+            <img src="images/twitter.png" alt="Twitter">
+        </a>
+        <a href="https://www.youtube.com/@PlayfulPiano">
+            <img src="images/youtube.png" alt="Youtube">
+        </a>
+        <a href="https://playfulpiano.bsky.social">
+            <img src="images/bluesky.png" alt="BlueSky">
+        </a>
+        <a href="https://www.twitch.tv/playfulpiano/">
+            <img src="images/twitch.png" alt="Twitch">
+        </a>
+    </div>
+    <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
+<script>
+  kofiWidgetOverlay.draw('playfulpiano', {
+    'type': 'floating-chat',
+    'floating-chat.donateButton.text': 'Support me',
+    'floating-chat.donateButton.background-color': '#00b9fe',
+    'floating-chat.donateButton.text-color': '#fff'
+  });
+</script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,5 +1,55 @@
 body {
     margin: 0;
+    padding: 0;
     background: beige;
     text-align: center;
+}
+
+/* 
+ * The . in front indicates this is a "class". 
+ * Any html tags with "sheetsTable" as a class will apply these rules. 
+ */
+.sheetsTable {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-align: center;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.sheetsTable td, .sheetsTable th {
+    text-align: center;
+    border: 2px solid black;
+}
+
+.sheetsTable th, .sheetsTable td {
+    padding: 15px;
+}
+
+.logo {
+    width: 50px; /* or whatever size you want */
+    height: auto; /* maintain aspect ratio */
+}
+.header {
+    margin-top: 2.5cm;
+}
+.social-media {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+.social-media img {
+    width: 100px;
+    height: auto;
+}
+.sheet-music {
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+.sheet-music img {
+    width: 400px;
+    height: auto;
+    vertical-align: middle;
 }