4 files changed, 236 insertions, 0 deletions
diff --git a/musictaste/index.html b/musictaste/index.html
new file mode 100644
index 0000000..b41c212
--- /dev/null
+++ b/musictaste/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Vinyls — SillyLaird</title>
+  <meta name="description" content="Vinyl collection images." />
+  <meta property="og:title" content="Vinyls — SillyLaird" />
+  <meta property="og:description" content="Vinyl collection images." />
+  <meta property="og:image" content="https://www.sillylaird.ca/lain.png" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.sillylaird.ca/musictaste/" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:locale:alternate" content="ja_JP" />
+  <meta property="og:locale:alternate" content="zh_CN" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Vinyls — SillyLaird" />
+  <meta name="twitter:description" content="Vinyl collection images." />
+  <meta name="twitter:image" content="https://www.sillylaird.ca/lain.png" />
+  <link rel="canonical" href="https://www.sillylaird.ca/musictaste/" />
+  <link rel="alternate" hreflang="x-default" href="https://www.sillylaird.ca/musictaste/" />
+  <link rel="alternate" hreflang="en" href="https://www.sillylaird.ca/musictaste/" />
+  <link rel="alternate" hreflang="zh" href="https://www.sillylaird.ca/musictaste/index_zh.html" />
+  <link rel="alternate" hreflang="ja" href="https://www.sillylaird.ca/musictaste/index_jp.html" />
+  <link rel="icon" href="/favicon.ico" />
+
+  <link rel="stylesheet" href="/assets/css/site.css" />
+  <link rel="stylesheet" href="/assets/css/pages/vinyls.css" />
+  
+  
+  <script defer src="/assets/js/includes.js"></script>
+</head>
+
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+
+  <div data-include="header"></div>
+
+  <main id="main" class="wrap">
+    <section aria-labelledby="vinyl-title">
+      <h1 id="vinyl-title">Vinyls</h1>
+      <p class="muted">A wall of covers.</p>
+
+      <div class="vinyl-grid">
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/409x409/https%3A%2F%2Fimages.genius.com%2Ff6cdcd8b1832d69eee495551a836defe.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F8631a7d618b5f03a98d66acd4e47d30a.700x700x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/373x373/https%3A%2F%2Fimages.genius.com%2F7fb6c38ccaa9a4774d089d01b3a71f4c.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="promare.png" alt="Promare" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/409x409/https%3A%2F%2Fimages.genius.com%2F7d0d55bc0879faa98cdadbef8a19d211.1000x1000x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fefea6158dc39ad60f83e52b20e1245ae.999x999x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F77e9525f23fce9612fe72d2cb43f2b34.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F3f06209ed8ad509a003cab94a2a81f24.1000x1000x1.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fa816cd337cd278cc9ed82188de4f58a1.1000x1000x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://f4.bcbits.com/img/a4238869426_10.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/61wF-IIzQGL._AC_SL1500_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/71b3AcnBbrL._AC_SL1200_.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://images.genius.com/ffa06c3ce8ea946089ebc6b8b64c881c.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/71lix6+VfWL._AC_SL1425_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F152fec319304099325b4f00afccb5169.700x700x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fc9cbf5dc148430ba7247a60a6ff4fedb.1000x1000x1.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/288x288/https%3A%2F%2Fimages.genius.com%2Fba17e1498ec763a4931564127164640c.999x999x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/A1DaPtkeBxL._AC_SL1500_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/81vr2WI+qeL._AC_SL1425_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://i.scdn.co/image/ab67616d0000b27318e5871b4499ba01baa14fe9" alt="Vinyl cover" />
+      </div>
+    </section>
+  </main>
+
+  <div data-include="footer"></div>
+</body>
+</html>
diff --git a/musictaste/index_jp.html b/musictaste/index_jp.html
new file mode 100644
index 0000000..9e5df0b
--- /dev/null
+++ b/musictaste/index_jp.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="ja">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Vinyls — SillyLaird</title>
+  <meta name="description" content="Vinyl collection images." />
+  <meta property="og:title" content="Vinyls — SillyLaird" />
+  <meta property="og:description" content="Vinyl collection images." />
+  <meta property="og:image" content="https://www.sillylaird.ca/lain.png" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.sillylaird.ca/musictaste/index_jp.html" />
+  <meta property="og:locale" content="ja_JP" />
+  <meta property="og:locale:alternate" content="en_US" />
+  <meta property="og:locale:alternate" content="zh_CN" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Vinyls — SillyLaird" />
+  <meta name="twitter:description" content="Vinyl collection images." />
+  <meta name="twitter:image" content="https://www.sillylaird.ca/lain.png" />
+  <link rel="canonical" href="https://www.sillylaird.ca/musictaste/index_jp.html" />
+  <link rel="alternate" hreflang="x-default" href="https://www.sillylaird.ca/musictaste/" />
+  <link rel="alternate" hreflang="en" href="https://www.sillylaird.ca/musictaste/" />
+  <link rel="alternate" hreflang="zh" href="https://www.sillylaird.ca/musictaste/index_zh.html" />
+  <link rel="alternate" hreflang="ja" href="https://www.sillylaird.ca/musictaste/index_jp.html" />
+  <link rel="icon" href="/favicon.ico" />
+
+  <link rel="stylesheet" href="/assets/css/site.css" />
+  <link rel="stylesheet" href="/assets/css/pages/vinyls.css" />
+  
+  
+  <script defer src="/assets/js/includes.js"></script>
+</head>
+
+<body>
+  <a class="skip-link" href="#main">本文へ移動</a>
+
+  <div data-include="header"></div>
+
+  <main id="main" class="wrap">
+    <section aria-labelledby="vinyl-title">
+      <h1 id="vinyl-title">Vinyls</h1>
+      <p class="muted">A wall of covers.</p>
+
+      <div class="vinyl-grid">
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/409x409/https%3A%2F%2Fimages.genius.com%2Ff6cdcd8b1832d69eee495551a836defe.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F8631a7d618b5f03a98d66acd4e47d30a.700x700x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/373x373/https%3A%2F%2Fimages.genius.com%2F7fb6c38ccaa9a4774d089d01b3a71f4c.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="promare.png" alt="Promare" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/409x409/https%3A%2F%2Fimages.genius.com%2F7d0d55bc0879faa98cdadbef8a19d211.1000x1000x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fefea6158dc39ad60f83e52b20e1245ae.999x999x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F77e9525f23fce9612fe72d2cb43f2b34.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F3f06209ed8ad509a003cab94a2a81f24.1000x1000x1.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fa816cd337cd278cc9ed82188de4f58a1.1000x1000x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://f4.bcbits.com/img/a4238869426_10.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/61wF-IIzQGL._AC_SL1500_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/71b3AcnBbrL._AC_SL1200_.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://images.genius.com/ffa06c3ce8ea946089ebc6b8b64c881c.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/71lix6+VfWL._AC_SL1425_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F152fec319304099325b4f00afccb5169.700x700x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fc9cbf5dc148430ba7247a60a6ff4fedb.1000x1000x1.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/288x288/https%3A%2F%2Fimages.genius.com%2Fba17e1498ec763a4931564127164640c.999x999x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/A1DaPtkeBxL._AC_SL1500_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/81vr2WI+qeL._AC_SL1425_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://i.scdn.co/image/ab67616d0000b27318e5871b4499ba01baa14fe9" alt="Vinyl cover" />
+      </div>
+    </section>
+  </main>
+
+  <div data-include="footer"></div>
+</body>
+</html>
diff --git a/musictaste/index_zh.html b/musictaste/index_zh.html
new file mode 100644
index 0000000..4f81c7c
--- /dev/null
+++ b/musictaste/index_zh.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Vinyls — SillyLaird</title>
+  <meta name="description" content="Vinyl collection images." />
+  <meta property="og:title" content="Vinyls — SillyLaird" />
+  <meta property="og:description" content="Vinyl collection images." />
+  <meta property="og:image" content="https://www.sillylaird.ca/lain.png" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://www.sillylaird.ca/musictaste/index_zh.html" />
+  <meta property="og:locale" content="zh_CN" />
+  <meta property="og:locale:alternate" content="en_US" />
+  <meta property="og:locale:alternate" content="ja_JP" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Vinyls — SillyLaird" />
+  <meta name="twitter:description" content="Vinyl collection images." />
+  <meta name="twitter:image" content="https://www.sillylaird.ca/lain.png" />
+  <link rel="canonical" href="https://www.sillylaird.ca/musictaste/index_zh.html" />
+  <link rel="alternate" hreflang="x-default" href="https://www.sillylaird.ca/musictaste/" />
+  <link rel="alternate" hreflang="en" href="https://www.sillylaird.ca/musictaste/" />
+  <link rel="alternate" hreflang="zh" href="https://www.sillylaird.ca/musictaste/index_zh.html" />
+  <link rel="alternate" hreflang="ja" href="https://www.sillylaird.ca/musictaste/index_jp.html" />
+  <link rel="icon" href="/favicon.ico" />
+
+  <link rel="stylesheet" href="/assets/css/site.css" />
+  <link rel="stylesheet" href="/assets/css/pages/vinyls.css" />
+  
+  
+  <script defer src="/assets/js/includes.js"></script>
+</head>
+
+<body>
+  <a class="skip-link" href="#main">跳至内容</a>
+
+  <div data-include="header"></div>
+
+  <main id="main" class="wrap">
+    <section aria-labelledby="vinyl-title">
+      <h1 id="vinyl-title">Vinyls</h1>
+      <p class="muted">A wall of covers.</p>
+
+      <div class="vinyl-grid">
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/409x409/https%3A%2F%2Fimages.genius.com%2Ff6cdcd8b1832d69eee495551a836defe.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F8631a7d618b5f03a98d66acd4e47d30a.700x700x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/373x373/https%3A%2F%2Fimages.genius.com%2F7fb6c38ccaa9a4774d089d01b3a71f4c.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="promare.png" alt="Promare" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/409x409/https%3A%2F%2Fimages.genius.com%2F7d0d55bc0879faa98cdadbef8a19d211.1000x1000x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fefea6158dc39ad60f83e52b20e1245ae.999x999x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F77e9525f23fce9612fe72d2cb43f2b34.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F3f06209ed8ad509a003cab94a2a81f24.1000x1000x1.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fa816cd337cd278cc9ed82188de4f58a1.1000x1000x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://f4.bcbits.com/img/a4238869426_10.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/61wF-IIzQGL._AC_SL1500_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/71b3AcnBbrL._AC_SL1200_.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://images.genius.com/ffa06c3ce8ea946089ebc6b8b64c881c.1000x1000x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/71lix6+VfWL._AC_SL1425_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2F152fec319304099325b4f00afccb5169.700x700x1.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/375x0/https%3A%2F%2Fimages.genius.com%2Fc9cbf5dc148430ba7247a60a6ff4fedb.1000x1000x1.jpg" alt="Vinyl cover" />
+
+        <img loading="lazy" decoding="async" src="https://t2.genius.com/unsafe/288x288/https%3A%2F%2Fimages.genius.com%2Fba17e1498ec763a4931564127164640c.999x999x1.png" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/A1DaPtkeBxL._AC_SL1500_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://m.media-amazon.com/images/I/81vr2WI+qeL._AC_SL1425_.jpg" alt="Vinyl cover" />
+        <img loading="lazy" decoding="async" src="https://i.scdn.co/image/ab67616d0000b27318e5871b4499ba01baa14fe9" alt="Vinyl cover" />
+      </div>
+    </section>
+  </main>
+
+  <div data-include="footer"></div>
+</body>
+</html>
diff --git a/musictaste/style.css b/musictaste/style.css
new file mode 100644
index 0000000..5304ab3
--- /dev/null
+++ b/musictaste/style.css
@@ -0,0 +1,11 @@
+/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
+   HTML content. To learn how to do something, just try searching Google for questions like
+   "how to change link color." */
+
+body {
+  background-color: #89b8e2;
+  text-align: center;
+  color: black;
+  font-family: Arial;
+}
+margin: auto;