From b0959721bf96a2dbfb312dbb3df52cd2f01c4424 Mon Sep 17 00:00:00 2001
From: PragatiVerma18 <itispragativerma@gmail.com>
Date: Sun, 11 Oct 2020 00:24:13 +0530
Subject: [PATCH] Fix UI - added gradient and spacing

---
 static/css/quiz.css  |  9 ++++++---
 static/css/style.css |  6 +++++-
 templates/index.html |  6 +++---
 templates/quiz.html  | 21 +++++++++++----------
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/static/css/quiz.css b/static/css/quiz.css
index b544fc6..82ccb57 100644
--- a/static/css/quiz.css
+++ b/static/css/quiz.css
@@ -16,11 +16,14 @@ body {
 }
 
 body {
-  background-color: #000000;
   user-select: none;
   margin: 0;
   padding: 0;
   counter-reset: points;
+  background-color: #77aa77;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
 }
 
 a {
@@ -29,7 +32,7 @@ a {
 }
 
 section {
-  padding-top: 80px;
+  padding-top: 150px;
   overflow-y: hidden;
 }
 
@@ -43,7 +46,7 @@ main {
   padding: 50px 20px 50px;
   width: 95%;
   max-width: 500px;
-  margin: 0 auto 214px;
+  margin: auto;
 }
 
 .text-container {
diff --git a/static/css/style.css b/static/css/style.css
index 70bb15a..bc6eb58 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5,10 +5,14 @@ body {
   width: 100%;
   align-items: center;
   justify-content: center;
+  background-color: #77aa77;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
 }
 .card {
   border-radius: 10px;
-  margin-top: 40px !important;
+  margin-top: 100px !important;
   height: 500px !important;
   width: 400px;
 }
diff --git a/templates/index.html b/templates/index.html
index 8f20f5b..ef2794a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -21,7 +21,7 @@
       role="navigation"
       aria-label="main navigation"
     >
-      <div class="navbar-brand">
+      <div class="navbar-brand"><img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32" width="64" style="margin: 10px">
         <a class="navbar-item has-text-centered" href="#"
           ><strong class="is-size-3 has-text-centered">MLH Quizzet</strong></a
         >
@@ -35,7 +35,7 @@
     <main role="main">
       <div class="card has-text-centered">
         <img
-          src="https://cdn1.iconfinder.com/data/icons/leto-files/64/leto_files-72-512.png"
+          src="https://cdn4.iconfinder.com/data/icons/files-and-folders-thinline-icons-set/144/File_PDF-512.png"
           alt="upload"
         />
         <form
@@ -77,7 +77,7 @@
           <input
             type="submit"
             name="upload file"
-            class="button has-text-centered is-large is-fullwidth is-link"
+            class="button has-text-centered is-large is-fullwidth is-dark"
           />
         </form>
       </div>
diff --git a/templates/quiz.html b/templates/quiz.html
index d63b092..97d2f55 100644
--- a/templates/quiz.html
+++ b/templates/quiz.html
@@ -19,17 +19,18 @@
     </head>
 
     <body>
-        <nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
-            <div class="navbar-brand">
-                <a class="navbar-item has-text-centered" href="#"><strong class="is-size-3 has-text-centered">MLH
-                        Quizzet</strong></a>
-                <div class="navbar-burger" data-target="navMenu">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </div>
+    <nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand"><img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32"
+                width="64" style="margin: 10px">
+            <a class="navbar-item has-text-centered" href="#"><strong class="is-size-3 has-text-centered">MLH
+                    Quizzet</strong></a>
+            <div class="navbar-burger" data-target="navMenu">
+                <span></span>
+                <span></span>
+                <span></span>
             </div>
-        </nav>
+        </div>
+    </nav>
         {% if uploaded == true %}
         {% for i in range(size) %}
         <section class="section-1" id="section-1">