Fix UI - added gradient and spacing
This commit is contained in:
parent
6f25642cc7
commit
b0959721bf
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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&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>
|
||||
|
||||
@ -20,7 +20,8 @@
|
||||
|
||||
<body>
|
||||
<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&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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user