135 lines
2.0 KiB
CSS
135 lines
2.0 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"
|
|
"content 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;
|
|
}
|
|
|
|
.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;
|
|
position: fixed;
|
|
bottom: 0%;
|
|
width: 100vw;
|
|
}
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
color: white;
|
|
}
|
|
|
|
.course {
|
|
padding: 32pt;
|
|
}
|
|
|
|
.back-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.button {
|
|
width: 150pt;
|
|
height: 50pt;
|
|
background-color: #7b92c2;
|
|
transition: 0.8s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-radius: 6pt;
|
|
border: 4px solid #a0a0a0
|
|
}
|
|
|
|
.button a {
|
|
text-decoration: none;
|
|
width: 64pt;
|
|
height: 24pt;
|
|
background-color: transparent;
|
|
color: black;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: 8pt;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #a9c1f5;
|
|
} |