diff --git a/readme.md b/readme.md
index d68d05d4a..90c004c56 100644
--- a/readme.md
+++ b/readme.md
@@ -1,7 +1,7 @@
 # Antisnake
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_antisnake/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_antisnake/report/html_report/)
+- [DEMO LINK](https://Vladyslav-amp.github.io/layout_antisnake/)
+- [TEST REPORT LINK](https://Vladyslav-amp.github.io/layout_antisnake/report/html_report/)
 
 > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 ___
diff --git a/src/index.html b/src/index.html
index e8ae736a0..a4a6f95b5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,23 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Antisnake</title>
-  <link rel="stylesheet" href="./styles/main.scss">
-</head>
-<body>
-  <h1>Antisnake</h1>
-</body>
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Antisnake</title>
+    <link rel="stylesheet" href="./styles/main.scss">
+  </head>
+
+  <body>
+    <div class="block">
+      <div class="block__cell block__cell--1">1</div>
+      <div class="block__cell block__cell--2">2</div>
+      <div class="block__cell block__cell--3">3</div>
+      <div class="block__cell block__cell--4">4</div>
+      <div class="block__cell block__cell--5">5</div>
+      <div class="block__cell block__cell--6">6</div>
+    </div>
+  </body>
+
 </html>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 293d3b1f1..207959afa 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,71 @@
 body {
   margin: 0;
 }
+
+.block {
+  display: grid;
+  grid-template-rows: repeat(1, 300px);
+
+  @media (min-width:450px) {
+    grid-template-rows: repeat(1, 300px);
+    justify-content: stretch;
+  }
+
+  @media (min-width:500px) {
+    grid-template-rows: repeat(2, 300px);
+    grid-template-columns: repeat(2, 300px);
+    justify-content: stretch;
+  }
+
+  @media (min-width:700px) {
+    grid-template-rows: repeat(3, 300px);
+    grid-template-columns: 1fr 1fr;
+    justify-content: stretch;
+  }
+
+  @media (min-width:900px) {
+    grid-template-rows: repeat(2, 300px);
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  @media (min-width:4096px) {
+    grid-template-rows: repeat(2, 300px);
+    grid-template-columns: 1fr 1fr 1fr;
+    justify-content: stretch;
+  }
+
+  &__cell {
+    height: 300px;
+    line-height: 300px;
+    min-width: 300px;
+
+    font-size: 100px;
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+
+    &--1 {
+      background-color: rgb(100%, 0%, 0%);
+    }
+
+    &--2 {
+      background-color: rgb(80%, 0%, 0%);
+    }
+
+    &--3 {
+      background-color: rgb(60%, 0%, 0%);
+    }
+
+    &--4 {
+      background-color: rgb(40%, 0%, 0%);
+    }
+
+    &--5 {
+      background-color: rgb(20%, 0%, 0%);
+    }
+
+    &--6 {
+      background-color: rgb(0%, 0%, 0%);
+    }
+  }
+}
