:3

css/activities.css

@@ -0,0 +1,32 @@
+.activities {
+	display: flex;
+	flex-direction: column;
+}
+.activities div {
+	margin: 0.5em 0;
+	padding: 1em;
+
+	border-radius: var(--rad);
+}
+.activities div p,
+.activities div h3 {
+	text-align: left;
+
+	color: var(--fg-dark);
+}
+.activities div:first-child {
+	margin-top: 0;
+}
+.activities div:last-child {
+	margin-bottom: 0;
+}
+
+#showcase {
+	background-color: var(--dv8-orange);
+}
+#demo {
+	background-color: var(--dv8-cyan);
+}
+#more {
+	background-color: var(--dv8-yellow);
+}

css/footer.css

@@ -0,0 +1,67 @@
+/*
+	Footer
+*/
+footer div a,
+footer div p {
+	font-family: "Open Sans", sans-serif;
+	text-decoration: none;
+
+	margin: 1em 0;
+
+	display: block;
+
+	color: var(--fg-dark);
+}
+
+footer .top {
+	margin: 4em -0.5em 0.5em -0.5em;
+	padding: 0.5em;
+
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+
+	border-radius: 1em;
+	background-color: var(--footer);
+}
+footer .top div {
+	margin: 0.5em;
+	padding: 0.5em;
+
+	min-width: 20em;
+
+	text-align: center;
+
+	color: var(--fg-dark);
+}
+footer .madeBy {
+	margin: 0.5em auto;
+	padding: 0;
+
+	max-width: 35em;
+
+	display: flex;
+	justify-content: space-around;
+}
+footer .madeBy hr {
+  margin: 0;
+  padding: 0;
+}
+@media (max-width:470px) {
+	footer .madeBy {
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+  footer .madeBy hr {
+    display: none;
+  }
+}
+
+footer .madeBy p,
+footer .madeBy a {
+	font-family: 'Lexend Deca', sans-serif;
+
+	margin: 0;
+	padding: 0;
+}

css/navigation.css

@@ -0,0 +1,110 @@
+/*
+	This CSS is quite messy, this is because all of the
+	navigation bar is made with CSS and CSS only...
+*/
+
+nav {
+	margin: -0.5em;
+	padding: 0.5em 1em;
+
+	width: calc(100% - 3em);
+	height: 2.5em;
+
+	position: fixed;
+	z-index: 1;
+
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: center;
+
+	background-color: var(--nav);
+	border-radius: var(--rad);
+	user-select: none;
+}
+
+nav .logo {
+	margin: 0 0.5em;
+
+	max-height: 2.5em;
+
+	transition: max-height 0.2s ease;
+}
+nav .menu {
+	display: flex;
+}
+nav .menu a,
+nav .menu p {
+	font-family: 'Lexend Deca', sans-serif;
+	text-decoration: none;
+
+	padding: 0;
+	margin: 0 0.5em;
+
+	color: var(--fg-light);
+}
+
+/*
+	There must be a better way of doing this
+*/
+
+nav .menu .about:hover {
+	color: var(--dv8-orange);
+}
+nav .menu .team:hover {
+	color: var(--dv8-cyan);
+}
+nav .menu .visitors:hover {
+	color: var(--dv8-yellow);
+}
+nav .menu .times:hover {
+	color: var(--dv8-magenta);
+}
+nav .menu .activities:hover {
+	color: var(--dv8-lime);
+}
+
+/*
+	Toggler for the menu
+*/
+
+nav i {
+	color: var(--fg-light);
+}
+#toggler,
+nav label {
+	display: none;
+}
+
+@media (max-width:600px) {
+	nav {
+		height: auto;
+	}
+	nav .logo {
+		margin: 0;
+
+		max-height: 2em;
+	}
+	nav .menu {
+		width: 100%;
+		height: auto;
+		max-height: 0px;
+
+		overflow: hidden;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		transition: max-height 0.2s ease;
+	}
+	nav .menu a {
+		margin: 1em;
+	}
+	nav label {
+		display: inline-flex;
+	}
+	#toggler:checked ~ .menu {
+		max-height: 275px;
+	}
+}

css/team.css

@@ -0,0 +1,39 @@
+#team div img {
+	width: 100%;
+	max-width: 30em;
+	min-width: 0;
+
+	display: block;
+	object-fit: contain;
+
+	border-radius: var(--rad);
+}
+#team div {
+	margin: 0 0 0.5em 0;
+
+	display: flex;
+	flex-direction: column;
+
+	text-align: justify;
+	align-items: center;
+}
+#teams div p {
+	margin: 0 !important;
+}
+#team div span {
+	margin: 0 0.5em;
+}
+
+/*
+  When page is too thin, the picture and text stacks
+*/
+
+@media (min-width:800px) {
+  #team div {
+    display: flex;
+    flex-direction: row;
+  }
+	#team div img {
+		min-width: 20em;
+	}
+}

css/times.css

@@ -0,0 +1,56 @@
+.times {
+	display: flex;
+	justify-content: space-around;
+}
+.times img {
+	margin: 0;
+	width: 70%;
+	min-height: 20em;
+
+	object-fit: cover;
+	border-radius: var(--rad);
+}
+
+.times div {
+	margin: 0;
+	padding: 0;
+	width: 30%;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+
+	background-color: var(--bg-light);
+}
+.times div div {
+	padding: 0;
+
+	width: auto;
+
+	text-align: center;
+
+	display: flex;
+	flex-direction: row;
+}
+
+/*
+  When page is too thin, the map and text stacks
+*/
+
+@media (max-width:900px) {
+	.times {
+		display: flex;
+		flex-direction: column;
+	}
+	.times img {
+		width: auto;
+
+		border-radius: var(--rad);
+	}
+	.times div {
+		margin: 0;
+		padding: 2em;
+		width: auto;
+	}
+}

css/visitors.css

@@ -0,0 +1,12 @@
+#visitors div img {
+  max-width: 15em;
+  max-height: 15em;
+}
+
+#visitors div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+}