diff --git a/card/index.html b/card/index.html
new file mode 100644
index 0000000..8e4db3a
--- /dev/null
+++ b/card/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
Viktor Kraastav
+ Character Reference Page
+
+
+
+
+
diff --git a/card/style.css b/card/style.css
new file mode 100644
index 0000000..f15b28f
--- /dev/null
+++ b/card/style.css
@@ -0,0 +1,105 @@
+@import "../src/assets/fonts/secular-one/secular-one.css";
+
+:root {
+ font-size: 20px;
+ color: #f8ebdd;
+
+ --theme-c-walnut-brown: #422322;
+ --theme-c-desert-sand-translucent: #e7c7b1bf;
+
+ --container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
+ --welcome-header-mainline-font-size: 7vw;
+ --welcome-header-subline-font-size: 3.625vw;
+
+ --color-background: #2d4c5a;
+ --page-background: url(../src/assets/layered-waves-dark.svg);
+ --page-background-image-height: 100vw;
+ --page-background-image-max-height: 80vh;
+}
+
+*,
+*::before,
+*::after {
+ margin: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background: var(--color-background);
+}
+
+body::after {
+ background: var(--page-background);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center bottom;
+
+ display: block;
+
+ content: "";
+ position: sticky;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ height: var(--page-background-image-height);
+ max-height: var(--page-background-image-max-height);
+
+ z-index: -1;
+}
+
+.flex {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-evenly;
+ align-items: center;
+
+ height: 100vh;
+}
+
+.flex > * {
+ flex: 0 0 auto;
+}
+
+.image {
+ flex: 0 0 60vh;
+ max-height: 100vh;
+
+ background-color: var(--theme-c-desert-sand-translucent);
+
+ border: 1vw solid var(--theme-c-walnut-brown);
+ border-radius: 4.5vw;
+
+ transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
+ transform-origin: 0 100%;
+
+ overflow: hidden;
+}
+
+.image img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transform: scale(1.2) rotateZ(calc(11 * 1deg));
+}
+
+.headings {
+ flex: 0 0 55vw;
+ margin: 0;
+}
+
+.headings :where(h1, h2) {
+ font-family: "Secular One", sans-serif;
+ 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;
+}