added colored blocks

.github/workflows/test.yml

@@ -21,3 +21,9 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - 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

package.json

@@ -22,7 +22,7 @@
     "@mate-academy/backstop-config": "*",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "0.0.1",
-    "@mate-academy/scripts": "^0.3.16",
+    "@mate-academy/scripts": "^0.6.7",
     "@mate-academy/stylelint-config": "*",
     "backstopjs": "^5.0.1",
     "eslint": "^5.16.0",

readme.md

@@ -1,7 +1,7 @@
 # Style it up
 1. Replace `<your_account>` with your Github username in the links
-    - [DEMO LINK](https://<your_account>.github.io/layout_style-it-up/) <br>
-    - [TEST REPORT LINK](https://<your_account>.github.io/layout_style-it-up/report/html_report/)
+    - [DEMO LINK](https://DarMatt.github.io/layout_style-it-up/) <br>
+    - [TEST REPORT LINK](https://DarMatt.github.io/layout_style-it-up/report/html_report/)
 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
 ___
 

src/style.css

@@ -1 +1,35 @@
 /* write your styles here */
+
+body {
+  margin: 0;
+}
+
+body > * {
+  width: 300px;
+  height: 100px;
+  margin: auto;
+}
+
+body > *:hover {
+  height: 200px;
+}
+
+#header {
+  background-color: blue;
+}
+
+.important {
+  background-color: red;
+}
+
+.interesting {
+  background-color: green;
+}
+
+.surprising {
+  background-color: orange;
+}
+
+#footer {
+  background-color: black;
+}