diff --git a/readme.md b/readme.md index d68d05d4a..7ba1b3bb1 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://usernameluke.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://usernameluke.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..5bc74db2e 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,25 @@ - - - - - Antisnake - - - -

Antisnake

- + + + + + Antisnake! + + + +
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+ diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 000000000..122d0fcbe --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,6 @@ +$colourOne: red; +$colourTwo: rgb(204, 0, 0); +$colourThree: rgb(153, 0, 0); +$colourFour: rgb(96, 0, 0); +$colourFive:rgb(48, 0, 0); +$colourSix: black; diff --git a/src/styles/blocks.scss b/src/styles/blocks.scss new file mode 100644 index 000000000..5941a2cb4 --- /dev/null +++ b/src/styles/blocks.scss @@ -0,0 +1,51 @@ +.blocks { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; +} + +.block { + display: flex; + justify-content: center; + align-items: center; + min-width: 300px; + min-height: 300px; + + &--1 { + background-color: $colourOne; + } + + &--2 { + background-color: $colourTwo; + } + + &--3 { + background-color: $colourThree; + } + + &--4 { + background-color: $colourFour; + } + + &--5 { + background-color: $colourFive; + } + + &--6 { + background-color: $colourSix; + } +} + +@media (max-width: 599px) { + .blocks { + grid-template-columns: auto; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; + } +} + +@media (min-width: 600px) and (max-width: 899px) { + .blocks { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 000000000..e6e1388d5 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,64 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + color: white; +} + +.blocks { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; +} + +.block { + display: flex; + justify-content: center; + align-items: center; + min-width: 300px; + min-height: 300px; +} + +.block--1 { + background-color: red; +} + +.block--2 { + background-color: rgb(204, 0, 0); +} + +.block--3 { + background-color: rgb(153, 0, 0); +} + +.block--4 { + background-color: rgb(96, 0, 0); +} + +.block--5 { + background-color: rgb(48, 0, 0); +} + +.block--6 { + background-color: black; +} + +@media (max-width: 599px) { + .blocks { + grid-template-columns: auto; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; + } +} + +@media (min-width: 600px) and (max-width: 899px) { + .blocks { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 000000000..769779c06 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["reset.scss","blocks.scss","_variables.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;ACRF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,kBCdQ;;ADiBV;EACE,kBCjBQ;;ADoBV;EACE,kBCpBU;;ADuBZ;EACE,kBCvBS;;AD0BX;EACE,kBC1BQ;;AD6BV;EACE,kBC7BQ;;;ADiCZ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..7ca03cb88 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,3 @@ -body { - margin: 0; -} +@import "./variables"; +@import "./reset.scss"; +@import "./blocks.scss"; diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 000000000..f2066f95c --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,10 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + color: white; +}