Added initial styling

parent f363de1e
...@@ -10,61 +10,66 @@ ...@@ -10,61 +10,66 @@
padding: 0; padding: 0;
} }
body { html, body {
background-color: azure; background-color: #124E78;
font-family: monospace; font-family: monospace;
overflow-x: none; overflow-x: hidden;
} }
.container { .container, header {
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 50%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.container {
margin: 0 auto;
width: 50%;
}
a { a {
text-decoration: none; text-decoration: none;
} }
header {
width: 100vw;
background-color: azure;
}
.logo { .logo {
width: 25em; width: 20em;
padding: 2em; padding: 2em;
margin: 0 auto; margin: 0 auto;
} }
.buttons { .content {
width: 50%; padding: 35px 25px;
width: 100vw;
display: flex; display: flex;
align-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.placeholder { .button a {
padding: 10px; background-color: #ccc;
width: 10em;
height: 10em;
}
#admin, #loading {
margin: 10px;
padding: 10px; padding: 10px;
color: azure; margin: 0 50px;
font-size: 1.5em; border-radius: 10%;
text-align: center; text-align: center;
font-size: 1.25rem;
color: #000;
font-weight: bold;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#admin { .button > a img {
background-color: coral; width: 10em;
} height: 10em;
padding: 0 10px;
#loading {
background-color: cadetblue;
} }
/* SCHEDULING */ /* SCHEDULING */
......
...@@ -6,17 +6,25 @@ ...@@ -6,17 +6,25 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header>
<img class="logo" src="img/logo.png"> <img class="logo" src="img/logo.png">
</header>
<div class="buttons"> <div class="content">
<a class="placeholder" id="admin" href="schedule.html"> <div class="button">
Scheduling <a href="schedule.html" id="admin">
<img src="img/scheduling.png">
<br><span>SCHEDULING</span>
</a> </a>
</div>
<a class="placeholder" id="loading" href="loading.html"> <div class="button">
Loading <a href="loading.html" id="loading">
<img src="img/loading.png">
<br><span>LOADING</span>
</a> </a>
</div> </div>
</div>
</div> </div>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment