From 9883a432c2ade2703fda66d5f6f4815b8d17dca7 Mon Sep 17 00:00:00 2001 From: Vladyslav Banas Date: Mon, 24 Apr 2023 17:41:22 +0300 Subject: [PATCH] add task solution --- src/index.html | 30 ++++++++++++------- src/style.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index b20c6e96c..a1b9b746f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,22 @@ - - - - - Snake - - - -

Snake

- + + + + + Snake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ + diff --git a/src/style.css b/src/style.css index e69de29bb..64e4fa862 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,78 @@ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +.block--1 { + background-color: #f00; + order: 1; +} + +.block--2 { + background-color: #c00; + order: 2; +} + +.block--3 { + background-color: #900; + order: 3; +} + +.block--4 { + background-color: #600; + order: 4; +} + +.block--5 { + background-color: #300; + order: 5; +} + +.block--6 { + background-color: #000; + order: 6; +} + +.blocks { + display: flex; + flex-wrap: wrap; +} + +.block { + display: flex; + font-size: 100px; + color: white; + height: 300px; + flex-basis: 300px; + align-items: center; + justify-content: center; + flex-grow: 1; +} + +@media (min-width: 600px) { + .block--3 { + order: 4; + } + + .block--4 { + order: 3; + } +} + +@media (min-width: 900px) { + .block { + flex-basis: 33%; + } + + .block--4 { + order: 6; + } + + .block--5 { + order: 5; + } + + .block--6 { + order: 4; + } +}