mate-academy · YevgeniyaVoronina · Mar 23, 2021 · Mar 24, 2021 · aliceblunt8 · Mar 24, 2021
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,5 +19,11 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm ci
+    - run: npm install
     - run: npm start & sleep 5 && npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ node_modules
 # Generated files
 backstop_data
 dist
+.cache
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@mate-academy/bemlint": "^0.1.1",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "0.0.1",
-    "@mate-academy/scripts": "^0.2.0",
+    "@mate-academy/scripts": "^0.8.4",
     "@mate-academy/stylelint-config": "*",
     "backstopjs": "^5.0.1",
     "eslint": "^5.16.0",

diff --git a/readme.md b/readme.md
@@ -1,7 +1,7 @@
 # Enclosures
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_enclosures/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_enclosures/report/html_report/)
+- [DEMO LINK](https://yevgeniyavoronina.github.io/layout_enclosures/)
+- [TEST REPORT LINK](https://yevgeniyavoronina.github.io/layout_enclosures/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
@@ -1,14 +1,41 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport"
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Enclosures</title>
-  <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-  <h1>Enclosures</h1>
-</body>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Enclosures</title>
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <body>
+    <div class="box" id="qa-block">
+      <section class="section">
+        <div class="text">
+          In programming languages, a closure is a technique for implementing lexically scoped
+          name binding in a language with first-class functions. Operationally, a
+          closure is a record storing a function together with an environment.
+        </div>
+      </section>
+    </div>
+    <div class="box">
+      <section class="section">
+        <div class="text">
+          У програмуванні замиканням називають підпрограму, що виконується в середовищі, яке
+          містить одну або більше зв’язаних змінних. Підпрограма має доступ до цих змінних
+          під час виконання.
+        </div>
+      </section>
+    </div>
+    <div class="box">
+      <section class="section">
+        <div class="text">
+          Замыкание в программировании — функция первого класса, в теле которой присутствуют
+          ссылки на переменные, объявленные вне тела этой функции в окружающем коде и не
+          являющиеся её параметрами.
+        </div>
+      </section>
+    </div>
+  </body>
 </html>
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,30 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background: #000;
+  margin: 20px;
+}
+
+.box {
+  width: 350px;
+  background-color: #308dc0;
+  padding: 10px;
+  border: 1px solid #e95d49;
+  margin-bottom: 40px;
+}
+
+.section {
+  background-color: #ffa500;
+  padding: 10px;
+  border: 1px solid #e95d49;
+}
+
+.text {
+  background-color: #ddd;
+  padding: 10px;
+  border: 1px solid #e95d49;
+}