diff --git a/homepage/templates/homepage/index.html b/homepage/templates/homepage/index.html index e16d3f4..338017f 100644 --- a/homepage/templates/homepage/index.html +++ b/homepage/templates/homepage/index.html @@ -106,11 +106,7 @@ <label for="test" class="mx-auto">Lorem ipsum docet docet?</label> <input class="w-75 mx-auto rounded" type="text" name="test" value=""> </div> - <div class="row short-answer"> - <label for="test" class="mx-auto">Lorem ipsum docet docet?</label> - <input class="w-75 mx-auto rounded" type="text" name="test" value=""> - </div> - <div class="row"> + <div class="row pb-4"> <div class="col emote"> <img src="{% static 'css/res/happy.svg' %}" alt=""> </div> @@ -121,6 +117,19 @@ <img src="{% static 'css/res/sad.svg' %}" alt=""> </div> </div> + <div class="row short-answer pb-4"> + <label for="test" class="mx-auto">Lorem ipsum docet docet?</label> + <input class="w-75 mx-auto rounded" type="text" name="test" value=""> + </div> + <div class="row short-answer"> + <label for="test" class="mx-auto">Lorem ipsum docet docet?</label> + <input class="w-75 mx-auto rounded" type="text" name="test" value=""> + </div> + <div class="row"> + <button type="submit" class="mx-auto btn text-uppercase"> + <img src="{% static 'css/res/submit.png' %}"> + </button> + </div> </div> </div> </section> diff --git a/static/css/res/poll-gradient.png b/static/css/res/poll-gradient.png new file mode 100644 index 0000000..1336a83 Binary files /dev/null and b/static/css/res/poll-gradient.png differ diff --git a/static/css/res/submit.png b/static/css/res/submit.png new file mode 100644 index 0000000..90ceb6d Binary files /dev/null and b/static/css/res/submit.png differ diff --git a/static/css/styles.css b/static/css/styles.css index f4be06a..2972f19 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -3,7 +3,8 @@ src: url("./fonts/Hanson-Bold.ttf"); font-family: "Hanson-Bold"; } html { - background-color: #333; } + background-color: #333; + font-family: "Hanson-Bold", "Arial", sans-serif; } body { overflow-y: scroll; @@ -71,8 +72,8 @@ body::-webkit-scrollbar { background-color: #fff; } .info-header { - font-family: 'Hanson-Bold','Arial',sans-serif; color: white; + font-family: "Hanson-Bold", "Arial", sans-serif; text-stroke: 3px #305899; -webkit-text-stroke: 3px #305899; } @media (max-width: 768px) { @@ -82,9 +83,9 @@ body::-webkit-scrollbar { -webkit-text-stroke: 2px #305899; } } .info { - font-family: 'Hanson-Bold','Arial',sans-serif; font-size: .8em; - color: #2b5291; } + color: #2b5291; + font-family: "Hanson-Bold", "Arial", sans-serif; } @media (max-width: 768px) { .info { font-size: .75em; } } @@ -94,14 +95,17 @@ body::-webkit-scrollbar { .poll { color: white; - background-image: url("res/gradient.png"); + background-image: url("res/poll-gradient.png"); background-position: center; background-repeat: no-repeat; background-size: cover; - background-attachment: fixed; } + background-attachment: fixed; + font-family: "Hanson-Bold", "Arial", sans-serif; + font-weight: lighter; + font-size: .75em; } @media (max-width: 768px) { .poll { - background-image: url("res/gradient-mobile.png"); } } + background-image: url("res/poll-gradient.png"); } } .short-answer { padding-bottom: 10vh; } @@ -113,4 +117,8 @@ label { width: 25vw; height: auto; } +.btn { + color: #2b5291; + border-image-repeat: none; } + /*# sourceMappingURL=styles.css.map */ diff --git a/static/css/styles.scss b/static/css/styles.scss index 2f95a62..289a673 100644 --- a/static/css/styles.scss +++ b/static/css/styles.scss @@ -20,6 +20,8 @@ $mobile-width: 768px; } // fonts +$font-stack: 'Hanson-Bold','Arial',sans-serif; + @font-face { src: url("./fonts/Hanson-Bold.ttf"); font-family: "Hanson-Bold"; @@ -34,6 +36,7 @@ $header-stroke: #305899; html { background-color: $dark-grey; + font-family: $font-stack; } body { @@ -122,21 +125,22 @@ body::-webkit-scrollbar { } .info-header { - font-family: 'Hanson-Bold','Arial',sans-serif; - color: white; - text-stroke: 3px $header-stroke; - -webkit-text-stroke: 3px $header-stroke; - @include mobile { - font-size: 1.25em; - text-stroke: 2px $header-stroke; - -webkit-text-stroke: 2px $header-stroke; - } + color: white; + font-family: $font-stack; + text-stroke: 3px $header-stroke; + -webkit-text-stroke: 3px $header-stroke; + + @include mobile { + font-size: 1.25em; + text-stroke: 2px $header-stroke; + -webkit-text-stroke: 2px $header-stroke; + } } .info { - font-family: 'Hanson-Bold','Arial',sans-serif; font-size: .8em; color: $text; + font-family: $font-stack; @include mobile { font-size: .75em; @@ -149,13 +153,16 @@ body::-webkit-scrollbar { .poll { color: white; - background-image: url("res/gradient.png"); + background-image: url("res/poll-gradient.png"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; + font-family: $font-stack; + font-weight: lighter; + font-size: .75em; @include mobile { - background-image: url("res/gradient-mobile.png"); + background-image: url("res/poll-gradient.png"); }; } @@ -171,3 +178,8 @@ label { width: 25vw; height: auto; } + +.btn { + color: $text; + border-image-repeat: none; +} \ No newline at end of file