All views finished

assets/styles/modules/_app.scss

@@ -1,8 +1,100 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  text-decoration: none;
-  text-rendering: optimizeLegibility;
+	box-sizing: border-box;
+	margin: 0;
+	outline: 0;
+	padding: 0;
+	text-decoration: none;
+	text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3 {
+	margin-bottom: 10%;
+	padding-top: 5%;
+}
+
+h1,
+h2 {
+	text-align: center;
+}
+
+h3 {
+	text-align: left;
+}
+
+#first-cell {
+	margin-top: 10vh;
+}
+
+#first-cell > p,
+#second-cell > p {
+	text-align: center;
+}
+
+#second-cell > a {
+	text-align: center;
+	background-color: white;
+	margin-bottom: 10%;
+}
+
+#second-cell {
+	margin-bottom: 10vh;
+}
+
+main {
+	padding-left: 5%;
+	padding-right: 5%;
+	text-align: left;
+	display: grid;
+	grid-template-columns: 100%;
+}
+
+.text-container {
+	width: 90%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+.text-container > p {
+	width: 100%;
+	font-size: 0.95rem;
+	margin-bottom: 10px;
+}
+.text-container > a,
+#second-cell {
+	background-color: rgb(172, 215, 255);
+	padding-bottom: 3%;
+}
+
+.text-container > a {
+	border-radius: 5%;
+	padding: 5%;
+}
+
+.img-container {
+	width: 90%;
+	text-align: center;
+}
+
+img {
+	margin-top: 5vh;
+	margin-bottom: 15vh;
+	width: 100%;
+	height: auto;
+	border-radius: 5%;
+	box-shadow: 0 13px 20px -5px rgba(21, 21, 39, 0.726);
+}
+
+footer {
+	height: 20vh;
+	width: 100%;
+	background-color: black;
+	color: white;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 5px;
 }

assets/styles/modules/_breakpoints.scss

@@ -2,7 +2,47 @@
 @import "variables";
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+	body {
+		display: flex;
+		justify-content: center;
+	}
+	.double-column-cell {
+		// margin-left: -5vw;
+		width: 100%;
+	}
+
+	main {
+		width: 700px;
+		height: auto;
+	}
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) {}
+@media (min-width: 992px) {
+	main {
+		padding-left: 5%;
+		padding-right: 5%;
+		text-align: left;
+		display: grid;
+		grid-template-columns: 50% 50%;
+		grid-area: "left rigth" "double" "left rigth" "left rigth" "left rigth"
+			"left rigth" "left rigth" "left rigth" "footer";
+		width: 990px;
+		height: auto;
+		margin-top: 20vh;
+	}
+
+	#second-cell,
+	footer {
+		grid-column: 1 / span 2;
+	}
+
+	#first-cell {
+		margin-top: 0;
+	}
+	#first-cell > p,
+	h1 {
+		text-align: start;
+	}
+}