Simplified home page element positioning

parent 9ad338f2
......@@ -15,61 +15,58 @@ html, body {
font-family: monospace;
overflow-x: hidden;
}
.container, header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.container {
margin: 0 auto;
margin: 4.5% auto;
width: 50%;
background-color: #A7BCAF;
border-radius: 5%;
}
a {
text-decoration: none;
}
header {
width: 100vw;
background-color: azure;
width: 100%;
padding: 2.5em 0;
text-align: center;
}
.logo {
width: 20em;
padding: 2em;
display: block;
margin: 0 auto;
width: 20em;
}
.content {
padding: 35px 25px;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
height: 15em;
}
.button a {
background-color: #ccc;
padding: 10px;
margin: 0 50px;
border-radius: 10%;
text-align: center;
font-size: 1.25rem;
color: #000;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: block;
width: 12em;
height: 12em;
text-align: center;
}
.button > a img {
width: 10em;
height: 10em;
padding: 0 10px;
width: 100%;
background-color: #ccc;
padding: 3%;
border-radius: 10%;
}
#admin {
float: left;
margin-left: 20%;
}
#loading {
float: right;
margin-right: 25%;
}
/* SCHEDULING */
......
......@@ -2,30 +2,32 @@
<html>
<head>
<title>uBus | Admin System</title>
<meta name="description" content="uBus Ticket Reservation System administrator tools.">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<img class="logo" src="img/logo.png">
<h1>Bus Ticket Reservation System</h1>
</header>
<div class="content">
<div class="button">
<a href="schedule.html" id="admin">
<img src="img/scheduling.png">
<br><span>SCHEDULING</span>
<br><h3>SCHEDULING</h3>
</a>
</div>
<div class="button">
<a href="loading.html" id="loading">
<img src="img/loading.png">
<br><span>LOADING</span>
<br><h3>LOADING</h3>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
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