Первый экран для главной страницы

_sass/_fullscreen.scss

@@ -0,0 +1,31 @@
+.fullscreen {
+  background-color: $red;
+  color: $white;
+  padding-block: 1rem;
+  min-height: 400px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.fullscreen__container {
+  position: relative;
+  height: 100%;
+}
+
+.fullscreen__title {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.fullscreen__menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.fullscreen__content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}

_sass/_hero.scss

@@ -0,0 +1,21 @@
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.hero__photo {
+  border-radius: 999px;
+  width: 7rem;
+  margin: 0 0 1.5rem 0;
+}
+
+.hero__heading {
+  font: 2.5rem/115% $heading-family;
+  margin: 0 0 .75rem 0;
+}
+
+.hero__tagline {
+  font: 1.25rem/135% $default-family;
+  margin: 0;
+}

index.html

@@ -3,3 +3,15 @@
 header: false
 ---
 
+<header class="fullscreen body__padding">
+  <div class="fullscreen__container">
+    <!-- TODO: Сделать, чтобы тайтл на всех страницах был на одном и том же месте -->
+    <div class="title fullscreen__title">{{ site.title }}</div>
+    <div class="menu fullscreen__menu">{% include menu.html %}</div>
+    <div class="hero fullscreen__content">
+      <img class="hero__photo" src="assets/img/main.jpg" alt="Пётр Вяткин">
+      <h1 class="hero__heading">Меня зовут<br>Пётр</h1>
+      <p class="hero__tagline">Я пишу пьесы, ставлю спектакли<br>и играю в театре</p>
+    </div>
+  </div>
+</header>

style.scss

@@ -23,13 +23,16 @@ $indent-xl: 2rem;
 
 @import "_header";
 @import "_menu";
+@import "_fullscreen";
+@import "_hero";
 @import "pieces/_piece-card";
 @import "pieces/_data";
 @import "pieces/_button";
 @import "pieces/_sort-ui";
 
 .html {
   font: 400 16px/130% $default-family;
+  height: 100%;
 
   @media (min-width: $xxl) {
     font-size: 24px;
@@ -38,6 +41,7 @@ $indent-xl: 2rem;
 
 .body {
   margin: 0;
+  height: 100%;
 }
 
 .body__margin {