1 files changed, 104 insertions, 0 deletions
diff --git a/static/styles/index.css b/static/styles/index.css
new file mode 100644
index 0000000..22e6dd0
--- /dev/null
+++ b/static/styles/index.css
@@ -0,0 +1,104 @@
+/*
+ * This file contains styles specific to the "index" view. The corresponding
+ * HTML/template file is `views/index.html`.
+ */
+
+.hero {
+	/* We want the hero at the top to take up a big portion of the screen,
+	 * while still showing that there's more content to be found below. */
+	min-height: 50vh;
+
+	/* Put children smack-dab in the center */
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	/* Place a cool background image with a radial gradient over it, to give vibezzz and readability. */
+	background-image:
+		radial-gradient(circle at center, rgba(0, 0, 0, 20%) 0, rgba(0, 0, 0, 80%) 100%),
+		url(/images/hero.jpeg);
+	background-size: cover;
+
+	/* TODO: Put some cool image here */
+	background-color: purple;
+	color: white;
+}
+
+.hero__title {
+	font-size: 5rem;
+	margin: 1rem;
+
+	/* TODO: Use (subset) font for this very important text. */
+}
+
+.hero__subtitle {
+	font-size: large;
+	font-style: italic;
+}
+
+.achievements {
+	padding: 2rem 1rem;
+
+	/* Use a dark and twisted color to make this band stand out as a separate element. */
+	background-color: #6e1818;
+
+	/* Disperse achievements evenly horisontally */
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.achievements__item {
+	/* Stack the two children vertically */
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.achievements__number {
+	/* Numbers should be big and attention grabbing */
+	font-size: 2rem;
+	font-style: bold;
+}
+
+.achievements__text {
+}
+
+.boxes {
+	/* The columns should be aligned in the center.
+	 * N.B. margin matches padding of achievements. */
+	max-width: 600px;
+	margin: 2rem auto;
+}
+
+.boxes__column {
+	--gap: 1rem;
+	width: calc(50% - var(--gap) / 2);
+}
+
+.boxes__column--right {
+	float: right;
+}
+
+.boxes__column--left {
+	float: left;
+	margin-right: var(--gap);
+}
+
+.boxes__item {
+
+}
+
+.boxes__header {
+
+}
+
+.boxes__body-text {
+	line-height: 1.5;
+}
+
+.boxes__image {
+	max-width: 100%;
+	height: auto;
+}
+\ No newline at end of file