From 4eba6d2db9119919f3170e925ed33dd289ed6c76 Mon Sep 17 00:00:00 2001 From: Haluk Joshua Gurel Date: Wed, 2 Aug 2023 09:47:51 +0200 Subject: [PATCH] snake --- readme.md | 4 +-- src/index.html | 34 +++++++++++++------- src/style.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index 4b7905be2..425788dd7 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # Boilerplate for layout tasks Replace `` with your Github username and copy the links to Pull Request description: -- [DEMO LINK](https://.github.io/layout_snake/) -- [TEST REPORT LINK](https://.github.io/layout_snake/report/html_report/) +- [DEMO LINK](https://usernameluke.github.io/layout_snake/) +- [TEST REPORT LINK](https://usernameluke.github.io/layout_snake/report/html_report/) > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline) diff --git a/src/index.html b/src/index.html index b20c6e96c..d656f79c8 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,26 @@ - - - - - Snake - - - -

Snake

- + + + + + Snake + + + +
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+ diff --git a/src/style.css b/src/style.css index e69de29bb..07fc70ca3 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,84 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + color: white; +} + +.blocks { + display: flex; + flex-wrap: wrap; + justify-content: center; + border: none; +} + +.block { + height: 300px; + width: 33.33%; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} + +.block--1 { + background-color: red; +} + +.block--2 { + background-color: rgb(204, 0, 0) ; +} + +.block--3 { + background-color: rgb(153, 0, 0); +} + +.block--6 { + order: 0; + background-color: black; +} + +.block--5 { + order: 1; + background-color: rgb(48, 0, 0); +} + +.block--4 { + order: 2; + background-color: rgb(96, 0, 0); +} + +@media (max-width: 599px) { + .block { + height: 300px; + width: 100%; + order: 0; + } +} + +@media (min-width: 600px) and (max-width: 751px) { + .block { + height: 300px; + width: 50%; + } + + .block--6 { + order: 3; + } + + .block--5 { + order: 2; + } + + .block--4 { + order: 1; + } + + .block--3 { + order: 2; + } +}