Initial commit

html/static/css/fonts.css

@@ -0,0 +1,117 @@
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-Thin.ttf);
+    font-weight: 100;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-ThinItalic.ttf);
+    font-weight: 100;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-Light.ttf);
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-LightItalic.ttf);
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-Regular.ttf);
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-Italic.ttf);
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-Medium.ttf);
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-MediumItalic.ttf);
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-Bold.ttf);
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-BoldItalic.ttf);
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-Black.ttf);
+    font-weight: 900;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Roboto;
+    src: url(../fonts/Roboto-BlackItalic.ttf);
+    font-weight: 900;
+    font-style: italic;
+}
+
+.font-italic {
+    font-style: italic;
+}
+
+.font-thin {
+    font-family: Roboto;
+    font-weight: 100;
+}
+
+.font-light {
+    font-family: Roboto;
+    font-weight: 300;
+}
+
+.font-regular {
+    font-family: Roboto;
+    font-weight: 400;
+}
+
+.font-medium {
+    font-family: Roboto;
+    font-weight: 500;
+}
+
+.font-bold {
+    font-family: Roboto;
+    font-weight: 700;
+}
+
+.font-black {
+    font-family: Roboto;
+    font-weight: 900;
+}

html/static/css/main.css

@@ -0,0 +1,47 @@
+/* VARIABLES */
+:root {
+    --color-primary: #c9cacf;
+    --color-secondary: #f2f2f3;
+    --color-tertiary: #5260ff;
+    --color-success: #2dd36f;
+    --color-warning: #ffc409;
+    --color-danger: #eb445a;
+    --color-dark: #3d3e43;
+    --color-medium: #92949c;
+    --color-light: #f4f5f8;
+    --base-rem-size: 12px;
+}
+
+/* BASE ELEMENTS */
+html {
+    font-size: var(--base-rem-size);
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    background-color: var(--color-dark);
+    color: var(--color-primary);
+}
+
+a {
+    transition: color 0.3s;
+}
+
+.container {
+    width: 80%;
+    margin: 5rem auto;
+    padding: 3rem;
+    border-radius: 1rem;
+    box-shadow:  16px 16px 36px #626369,
+    -16px -16px 36px #c2c5cf;
+}
+
+.container a {
+    color: var(--color-tertiary);
+}
+
+.container a:hover {
+    color: var(--color-secondary);
+}