diff --git a/googlebold.ttf b/googlebold.ttf new file mode 100644 index 0000000..5864e26 Binary files /dev/null and b/googlebold.ttf differ diff --git a/monument.ttf b/monument.ttf new file mode 100644 index 0000000..5e77dfd Binary files /dev/null and b/monument.ttf differ diff --git a/nothing.ttf b/nothing.ttf new file mode 100644 index 0000000..67c4659 Binary files /dev/null and b/nothing.ttf differ diff --git a/templates/index.html b/templates/index.html index 6be8cd1..6a349ee 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,11 +11,45 @@ font-family: Arial; box-sizing: border-box; } + @font-face { + font-family: monument; + src: url(Monument.ttf); + } + @font-face { + font-family: googlebold; + src: url(googlebold.ttf); + } + @font-face { + font-family: nothing; + src: url(nothing.ttf); + } + #left h1 { + font-family: nothing; + background-image: linear-gradient(red, rgb(255, 255, 255)); + -webkit-background-clip: text; + color: transparent; + /* color: white; */ + font-size: 4rem; + writing-mode: vertical-lr; + text-orientation: upright; + letter-spacing: 50px; + } html, body { width: 100%; height: 100%; } + button { + width: 200px; + aspect-ratio: 2; + /* background: rgb(29, 29, 49); */ + border: none; + border-top: 1px solid rgb(154, 149, 149); + font-size: 1.5rem; + background-image: linear-gradient(red, rgb(255, 255, 255)); + -webkit-background-clip: text; + color: transparent; + } #main { display: flex; width: 100vw; @@ -23,16 +57,19 @@ } #left { display: flex; + flex-direction: column; justify-content: center; align-items: center; width: 20vw; background-color: rgb(16, 16, 16); height: inherit; border-right: 1px solid rgb(153, 148, 148); + text-orientation: upright; } + #right { - font-family: Arial, Helvetica, sans-serif; - background: linear-gradient(rgb(193, 72, 72), rgb(190, 229, 190)); + font-family: nothing; + background: radial-gradient(rgb(87, 84, 84), rgb(19, 20, 19)); justify-content: center; align-items: center; width: 80vw; @@ -42,20 +79,23 @@ gap: 2vh; } #head { - background-color: rgb(122, 118, 118); + background-color: rgb(43, 40, 40); + box-shadow: 0 0 10px black; width: 50vw; height: 10vh; border-radius: 20px; } #question { /* background-color: rgb(50, 50, 53); */ - background-color: rgb(193, 72, 72); + background-color: rgb(43, 40, 40); + box-shadow: 0 0 10px black; height: 30vh; width: 50vw; border-radius: 20px; } #answer { - background-color: rgb(190, 229, 190); + background-color: rgb(43, 40, 40); + box-shadow: 0 0 10px black; height: 70vh; width: 70vw; border-radius: 20px; @@ -72,7 +112,17 @@
-
+
+

AOBT

+ + + +