Fix UI - added gradient and spacing

This commit is contained in:
PragatiVerma18 2020-10-11 00:24:13 +05:30
parent 6f25642cc7
commit b0959721bf
4 changed files with 25 additions and 17 deletions

View File

@ -16,11 +16,14 @@ body {
} }
body { body {
background-color: #000000;
user-select: none; user-select: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
counter-reset: points; 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 { a {
@ -29,7 +32,7 @@ a {
} }
section { section {
padding-top: 80px; padding-top: 150px;
overflow-y: hidden; overflow-y: hidden;
} }
@ -43,7 +46,7 @@ main {
padding: 50px 20px 50px; padding: 50px 20px 50px;
width: 95%; width: 95%;
max-width: 500px; max-width: 500px;
margin: 0 auto 214px; margin: auto;
} }
.text-container { .text-container {

View File

@ -5,10 +5,14 @@ body {
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: 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 { .card {
border-radius: 10px; border-radius: 10px;
margin-top: 40px !important; margin-top: 100px !important;
height: 500px !important; height: 500px !important;
width: 400px; width: 400px;
} }

View File

@ -21,7 +21,7 @@
role="navigation" role="navigation"
aria-label="main 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="#" <a class="navbar-item has-text-centered" href="#"
><strong class="is-size-3 has-text-centered">MLH Quizzet</strong></a ><strong class="is-size-3 has-text-centered">MLH Quizzet</strong></a
> >
@ -35,7 +35,7 @@
<main role="main"> <main role="main">
<div class="card has-text-centered"> <div class="card has-text-centered">
<img <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" alt="upload"
/> />
<form <form
@ -77,7 +77,7 @@
<input <input
type="submit" type="submit"
name="upload file" 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> </form>
</div> </div>

View File

@ -20,7 +20,8 @@
<body> <body>
<nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation"> <nav class="navbar is-dark is-fixed-top has-text-centered" 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 <a class="navbar-item has-text-centered" href="#"><strong class="is-size-3 has-text-centered">MLH
Quizzet</strong></a> Quizzet</strong></a>
<div class="navbar-burger" data-target="navMenu"> <div class="navbar-burger" data-target="navMenu">