diff --git a/card/index.html b/card/index.html
new file mode 100644
index 0000000..4e25fce
--- /dev/null
+++ b/card/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
Sebin Nyshkim
+ Character Reference Page
+
+
+
+
+
diff --git a/card/style.css b/card/style.css
new file mode 100644
index 0000000..1a8bad7
--- /dev/null
+++ b/card/style.css
@@ -0,0 +1,112 @@
+@import "../src/assets/fonts/exo/exo.css";
+
+:root {
+ font-size: 20px;
+ color: #fff;
+
+ --theme-c-muted-blue: #22759d;
+ --theme-c-amaranth: #e93f3f;
+ --theme-c-deep-purple: #33124a;
+ --theme-c-charcoal: #303030;
+
+ --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+ --welcome-header-mainline-font-size: 8vw;
+ --welcome-header-subline-font-size: 3.5vw;
+
+ --page-background: radial-gradient(
+ circle at bottom right,
+ var(--theme-c-amaranth) 5%,
+ transparent 50%
+ ),
+ radial-gradient(
+ circle at top left,
+ var(--theme-c-muted-blue) 5%,
+ var(--theme-c-deep-purple) 100%
+ );
+}
+
+*,
+*::before,
+*::after {
+ margin: 0;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: center;
+ align-items: center;
+
+ min-height: 100vh;
+}
+
+main::before,
+main::after {
+ content: "";
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+main::before {
+ background: url(../src/assets/subtle-prism.svg);
+ mix-blend-mode: multiply;
+ z-index: -1;
+ transform: scale(1.5);
+}
+
+main::after {
+ background: var(--page-background);
+ z-index: -2;
+}
+
+.flex {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-evenly;
+ align-items: center;
+
+ flex: 0 0 100%;
+}
+
+.flex > * {
+ flex: 0 0 auto;
+}
+
+.image {
+ flex: 0 0 60vh;
+ max-height: 100vh;
+}
+
+.image img {
+ display: block;
+ width: 100%;
+ border-radius: 100%;
+ border: 1vw solid #fff;
+ box-shadow: var(--container-box-shadow);
+}
+
+.headings {
+ flex: 0 0 60vw;
+ margin: 0;
+}
+
+.headings :where(h1, h2) {
+ font-family: "Exo", sans-serif;
+ text-align: center;
+ font-style: italic;
+ margin: 0;
+}
+
+.headings h1 {
+ font-size: var(--welcome-header-mainline-font-size);
+ font-weight: 900;
+}
+
+.headings h2 {
+ font-size: var(--welcome-header-subline-font-size);
+ font-weight: 300;
+}