Skip to content

solution #2966

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Patryk-Buczkowski wants to merge 12 commits into
base: master
Choose a base branch
from
Open

solution #2966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
92561ff
solution
Patryk-Buczkowski May 24, 2023
0ae4595
test report
Patryk-Buczkowski May 24, 2023
85b10a3
.block min-width:300px
Patryk-Buczkowski May 26, 2023
02b986d
solution 2
Patryk-Buczkowski May 26, 2023
02685fd
make build
Patryk-Buczkowski May 26, 2023
32e9fd1
corrrections
Patryk-Buczkowski May 26, 2023
916b18d
correcion
Patryk-Buczkowski May 26, 2023
8585816
radek sgestions
Patryk-Buczkowski May 26, 2023
134a279
corrections
Patryk-Buczkowski May 26, 2023
e9c3921
Merge branch 'master' into develop
Patryk-Buczkowski May 29, 2023
66b63d3
dist
Patryk-Buczkowski May 29, 2023
8fd1317
Merge branch 'develop' of https://github.com/Patryk-Buczkowski/layout…
Patryk-Buczkowski May 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 47 additions & 1 deletion .linthtmlrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,49 @@
{
"extends": "@mate-academy/linthtml-config"
"attr-bans": [
"align",
"background",
"bgcolor",
"border",
"frameborder",
"style"
],
"attr-name-ignore-regex": "viewBox",
"attr-no-dup": true,
"attr-quote-style": "double",
"attr-req-value": true,
"class-no-dup": true,
"doctype-first": true,
"doctype-html5": true,
"fig-req-figcaption": true,
"head-req-title": true,
"html-req-lang": true,
"id-class-style": false,
"id-no-dup": true,
"img-req-src": true,
"img-req-alt": "allownull",
"indent-width": 2,
"indent-style": "spaces",
"indent-width-cont": true,
"input-radio-req-name": true,
"spec-char-escape": true,
"tag-bans": [
"b",
"i",
"u",
"center",
"style",
"marquee",
"font",
"s"
],
"tag-name-lowercase": true,
"tag-name-match": true,
"tag-self-close": "never",
"tag-close": true,
"text-ignore-regex": "&",
"title-no-dup": true,
"line-end-style": "lf",
"attr-new-line": 2,
"attr-name-style": "dash",
"attr-no-unsafe-char": true
}
22 changes: 22 additions & 0 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snakee</title>

<link rel="stylesheet" href="/style.e308ff8e.css">
<script src="/style.e308ff8e.js"></script></head>

<body>
<div class="container">
<div class="block block--1">1</div>
<div class="block block--2">2</div>
<div class="block block--3">3</div>
<div class="block block--4">4</div>
<div class="block block--5">5</div>
<div class="block block--6">6</div>
</div>
</body>
</html>
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Boilerplate for layout tasks
Replace `<your_account>` with your Github username and copy the links to Pull Request description:
- [DEMO LINK](https://<your_account>.github.io/layout_snake/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_snake/report/html_report/)
- [DEMO LINK](https://Patryk-Buczkowski.github.io/layout_snake/)
- [TEST REPORT LINK](https://Patryk-Buczkowski.github.io/layout_snake/report/html_report/)

> Follow [this instructions](https://mate-academy.github.io/layout_task-guideline)

Expand Down
29 changes: 19 additions & 10 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snake</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Snake</h1>
</body>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snakee</title>

<link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="container">
Copy link
Copy Markdown

@Radoslaw-Czerniawski Radoslaw-Czerniawski May 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally you should have an empty line only between siblings of a parent not parent and child,

<div>
  <span>first child</span>

  <span>first child</span>
</div>

also like here when you have exact same elements next to each other then don't do any empty lines between them, like in this example:

<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

<div class="block block--1">1</div>
<div class="block block--2">2</div>
<div class="block block--3">3</div>
<div class="block block--4">4</div>
<div class="block block--5">5</div>
<div class="block block--6">6</div>
</div>
</body>
</html>
100 changes: 100 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
* {
box-sizing: border-box;
}

body {
margin: 0;
}

.container {
Copy link
Copy Markdown

@Radoslaw-Czerniawski Radoslaw-Czerniawski May 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally you are doing a mobile first approach here, where you first style for screen smaller than 600px, that's good however when doing so logically these style for screen smaller than 600px should be declared before @media (min-width:600px), move these lines beginning at line 53 after * { box-sizing: border-box; }

display: flex;
flex-wrap: wrap;
flex-direction: row;
}

.block {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
width: 100%;
font-size: 100px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}

.block--1 {
background-color: rgb(255, 0, 0);
}

.block--2 {
background-color: rgb(204, 0, 0);

}

.block--3 {
background-color: rgb(153, 0, 0);

}

.block--4 {
background-color: rgb(102, 0, 0);

}

.block--5 {
background-color: rgb(51, 0, 0);

}

.block--6 {
background-color: black;
}

@media (min-width:600px) {
.container {
flex-direction: row;
}

.block {
flex-basis: 50%;
}

.block--4 {
order: 1;
}

.block--3 {
order: 2;
}

.block--5 {
order: 3;
}

.block--6 {
order: 4;
}
}

@media (min-width:900px) {
.container {
flex-direction: row;
}

.block {
flex-basis: 33.33%;
}

.block--4 {
order: 6;
}

.block--5 {
order: 5;
}

.block--6 {
order: 4;
}
}