Refactoring of homepage

assets/_sass/pages/_home.scss

+%home-image {
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	color: white;
+	text-shadow: 0 0 4px black;
+
+	min-height: 70vh;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+
+	@include mobile-only {
+		background-attachment: initial;
+		min-height: 40vh;
+	}
+}
+
+.home {
+	&-course {
+		&-image {
+			@extend %home-image;
+
+			background-image: url("https://static.poul.org/site/assets/img/photos/arduino-2019-blur.jpg");
+		}
+
+		&-text {
+			&-topics {
+				display: flex;
+				justify-content: space-between;
+				padding: 7vw 0;
+
+				a {
+					display: flex;
+					justify-content: center;
+					flex-direction: column;
+					width: 28%;
+				}
+			}
+		}
+
+		&-next {
+			img {
+				max-height: 150px;
+			}
+		}
+	}
+
+	&-codinggym {
+		&-image {
+			@extend %home-image;
+
+			background-image: url("https://static.poul.org/site/assets/img/photos/coding-gym-2019-blur.jpg");
+		}
+
+		&-text {
+			img {
+				max-width: 250px;
+			}
+		}
+	}
+}
\ No newline at end of file

index.html

@@ -27,17 +27,51 @@ title: POuL » Politecnico Open unix Labs
 	</div>
 </div>
 
-{% include headquarters_map.html %}
+<div class="home-course-image">
+	<h2>The main purpose of<br/>POuL is teaching</h2>
+</div>
 
-<div>
-	<div class="container flex-grid">
-		<div class="latest-events-cell col">
-			<h3 class="text-align-center">Latest events</h3>
-			{% include latest_posts.html limit=7 %}
-		</div>
-		<div class="events-categories-cell col">
-			<h3 class="text-align-center">Past events</h3>
-			{% include events_list.html %}
+<div class="home-course-text bg-black">
+	<div class="container text-align-center">
+		<h4>Periodically we offer courses about of computer science on several topics</h4>
+
+		<div class="home-course-text-topics">
+			<a href="/courses/arduino/"><img src="{{ '/site/assets/img/courses_logos/arduino.svg' | static_url }}"
+											 alt="arduino logo"/></a>
+			<a href="/courses/python/"><img src="{{ '/site/assets/img/courses_logos/python.svg' | static_url }}"
+											alt="python logo"/></a>
+			<a href="/courses/linux/"><img src="{{ '/site/assets/img/courses_logos/linux.svg' | static_url }}"
+										   alt="linux logo"/></a>
 		</div>
+
+		<h2><a href="{{ '/courses/' | relative_url }}">Learn more</a></h2>
+	</div>
+</div>
+
+{% if site.data.next_course %}
+<div class="home-course-next bg-blueish-gray">
+	<div class="container text-align-center">
+		<h3>Next course</h3>
+		<a href="{{ site.data.next_course.course.url | relative_url }}"><img
+				src="{{ site.data.next_course.course.logo }}" alt="course logo"></a>
+		<h3><a href="{{ site.data.next_course.course.url | relative_url }}">{{ site.data.next_course.name | markdonify
+			}}</a></h3>
+	</div>
+</div>
+{% endif %}
+
+<div class="home-codinggym-image">
+	<h2>Pair<br/>programming<br/>laboratories</h2>
+</div>
+
+
+<div class="home-codinggym-text">
+	<div class="container text-align-center">
+		<img src="{{ '/site/assets/img/coding_gym_logo.svg' | static_url }}" alt="coding gym logo"/>
+
+		<h4>With the support of <a href="https://coding-gym.org/">coding gym association</a> we organize monthly pair
+			programming laboratories</h4>
+
+		<h3><a href="{{ '/coding_gym/' | relative_url }}">Learn more</a></h3>
 	</div>
 </div>
\ No newline at end of file