From 3be02f786f5683b5333ea84dc1aa10a1cd89e6b3 Mon Sep 17 00:00:00 2001 From: kviatkovskyi mykhailo Date: Fri, 16 Jun 2023 23:04:29 +0300 Subject: [PATCH 1/2] solution task --- readme.md | 4 +-- src/index.html | 27 ++++++++++++-------- src/styles/main.scss | 59 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 12 deletions(-) diff --git a/readme.md b/readme.md index d68d05d4a..40ea854cc 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # Antisnake Replace `` with your Github username and copy the links to Pull Request description: -- [DEMO LINK](https://.github.io/layout_antisnake/) -- [TEST REPORT LINK](https://.github.io/layout_antisnake/report/html_report/) +- [DEMO LINK](https://mykhailo-kviatkovskyi.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://mykhailo-kviatkovskyi.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..0f1b34e91 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,20 @@ - - - - - Antisnake - - - -

Antisnake

- + + + + + Antisnake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..858f97d14 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,62 @@ body { margin: 0; } + +.container { + display: grid; + grid-template-rows: repeat(2, 300px); + grid-template-columns: 1fr, 1fr, 1fr; + + grid-template-areas: "box--1 box--2 box--3" "box--4 box--5 box--6"; +} + +@media (max-width: 900px) { + .container { + grid-template-rows: repeat(3, 300px); + grid-template-columns: 1fr, 1fr; + + grid-template-areas: "box--1 box--2" "box--3 box--4" "box--5 box--6"; + } +} +@media (max-width: 600px) { + .container { + grid-template-rows: repeat(6, 300px); + grid-template-columns: 1fr; + + grid-template-areas: "box--1" "box--2" "box--3" "box--4" "box--5" "box--6"; + } +} + +.box { + height: 300px; + min-width: 300px; + color: #fff; + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + text-align: center; + line-height: 300px; +} + +.box--1 { + background-color: #f00; +} + +.box--2 { + background-color: #c00; +} + +.box--3 { + background-color: #900; +} + +.box--4 { + background-color: #600; +} + +.box--5 { + background-color: #300; +} + +.box--6 { + background-color: #000; +} From 8542a3af24df35f1078c27bb47e907d6e40d5e6b Mon Sep 17 00:00:00 2001 From: kviatkovskyi mykhailo Date: Sat, 17 Jun 2023 13:29:36 +0300 Subject: [PATCH 2/2] solution task --- src/styles/main.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 858f97d14..91c4c6b0f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -10,7 +10,7 @@ body { grid-template-areas: "box--1 box--2 box--3" "box--4 box--5 box--6"; } -@media (max-width: 900px) { +@media (max-width: 899px) { .container { grid-template-rows: repeat(3, 300px); grid-template-columns: 1fr, 1fr; @@ -18,7 +18,7 @@ body { grid-template-areas: "box--1 box--2" "box--3 box--4" "box--5 box--6"; } } -@media (max-width: 600px) { +@media (max-width: 599px) { .container { grid-template-rows: repeat(6, 300px); grid-template-columns: 1fr; @@ -29,12 +29,12 @@ body { .box { height: 300px; - min-width: 300px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 100px; - text-align: center; - line-height: 300px; + display: flex; + align-items: center; + justify-content: center; } .box--1 {