145 lines
2.1 KiB
CSS
145 lines
2.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
|
|
|
|
body {
|
|
font-family: "Ubuntu", serif;
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
padding: 0pt;
|
|
margin: 0pt;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header header"
|
|
"menu content"
|
|
"footer footer";
|
|
grid-template-columns: 1fr 3fr;
|
|
gap: 0pt;
|
|
}
|
|
|
|
.header {
|
|
grid-area: header;
|
|
background-color: #48494b;
|
|
height: 8vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
margin-bottom: 6pt;
|
|
}
|
|
|
|
.header a {
|
|
color: white;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.menu {
|
|
grid-area: menu;
|
|
background-color: #9b9b9b;
|
|
height: 80vh;
|
|
padding: 16pt;
|
|
}
|
|
|
|
.content {
|
|
grid-area: content;
|
|
height: 80vh;
|
|
padding: 0pt;
|
|
}
|
|
|
|
.banner {
|
|
margin: 0pt;
|
|
width: 100%;
|
|
height: 30%;
|
|
position: relative;
|
|
}
|
|
|
|
.banner img {
|
|
width: 100%;
|
|
height: 20rlh;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.banner figcaption {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
background-color: rgba(200, 200, 200, 0.8);
|
|
padding: 12pt;
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.container {
|
|
padding: 24pt;
|
|
}
|
|
|
|
.container table {
|
|
width: 100%;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer;
|
|
height: 8vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-color: #48494b;
|
|
}
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
color: white;
|
|
}
|
|
|
|
table {
|
|
font-family: arial, sans-serif;
|
|
border-collapse: collapse;
|
|
width: 70%;
|
|
}
|
|
|
|
td, th {
|
|
border: 1px solid #bbbbbb;
|
|
text-align: left;
|
|
padding: 8px;
|
|
}
|
|
|
|
td a {
|
|
color: black;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #acacac;
|
|
}
|
|
|
|
@media (max-width: 1280px) {
|
|
|
|
body {
|
|
overflow-x: visible;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header header"
|
|
"content content"
|
|
"menu menu"
|
|
"footer footer";
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0pt;
|
|
}
|
|
|
|
.menu {
|
|
height: auto;
|
|
}
|
|
}
|