reference

public/css/course.css

@@ -0,0 +1,135 @@
+@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;
+}