Add the front-end of the page

static/css/style.css

@@ -1,55 +1,15 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
+#logo-container {
+    height: 64px;
 }
 
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-    display: block;
+#logo-container img {
+    width: 40px;
 }
 
-body {
-    line-height: 1;
-}
-
-ol, ul {
-    list-style: none;
-}
-
-blockquote, q {
-    quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: '';
-    content: none;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-* {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
+.exercise-info-container {
+    width: 560px;
+    min-height: 100px;
+    margin: 20px auto 0;
+    border-radius: 5px;
+    padding: 10px 15px;
+}

static/img/logo.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <path d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0"
+          fill="#00f3ff"/>
+    <path d="m511.488281 271.984375-73.429687-73.433594-4.605469 6.117188-34.941406-34.941407-94.503907 104.117188-113.820312-113.816406-113.1875 156.417968 195.039062 195.039063c128.625-7.953125 231.523438-110.871094 239.449219-239.5zm0 0"
+          fill="#00c2ef"/>
+    <path d="m99.152344 218.707031h311.503906v74.585938h-311.503906zm0 0" fill="#613394"/>
+    <path d="m255.761719 218.707031h154.894531v74.585938h-154.894531zm0 0" fill="#4b1b7a"/>
+    <path d="m145.632812 322.320312h-52.28125c-14.183593 0-25.683593-11.5-25.683593-25.683593v-81.273438c0-14.183593 11.5-25.683593 25.683593-25.683593h52.28125zm0 0"
+          fill="#ff551c"/>
+    <path d="m190.1875 351.972656h-54.726562c-16.421876 0-29.730469-13.308594-29.730469-29.726562v-132.492188c0-16.417968 13.308593-29.726562 29.730469-29.726562h54.726562zm0 0"
+          fill="#2864f0"/>
+    <path d="m366.367188 189.679688h52.28125c14.183593 0 25.683593 11.5 25.683593 25.683593v81.273438c0 14.183593-11.5 25.683593-25.683593 25.683593h-52.28125zm0 0"
+          fill="#f24500"/>
+    <path d="m321.8125 160.027344h54.726562c16.421876 0 29.730469 13.308594 29.730469 29.726562v132.492188c0 16.417968-13.308593 29.726562-29.730469 29.726562h-54.726562zm0 0"
+          fill="#0053bf"/>
+</svg>

static/js/javascript.js

@@ -0,0 +1,5 @@
+$(document).ready(() => {
+
+    $(".dropdown-trigger").dropdown();
+
+});