Skip to content

Commit 3ae694f

Browse files
rachelandrewrachelandrew
committed
Grid tasks for learn section
1 parent 05e6b88 commit 3ae694f

File tree

6 files changed

+371
-0
lines changed

6 files changed

+371
-0
lines changed

‎learn/tasks/grid/grid1-download.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid: task 1</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
body {
14+
background-color: #fff;
15+
color: #333;
16+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
17+
padding: 1em;
18+
margin: 0;
19+
}
20+
21+
.grid > * {
22+
background-color: #4D7298;
23+
border: 2px solid #77A6B6;
24+
border-radius: 0.5em;
25+
color: #fff;
26+
padding: 0.5em;
27+
}
28+
29+
.grid {
30+
31+
}
32+
</style>
33+
34+
</head>
35+
36+
<body>
37+
38+
<div class="grid">
39+
<div>One</div>
40+
<div>Two</div>
41+
<div>Three</div>
42+
<div>Four</div>
43+
</div>
44+
45+
</body>
46+
47+
</html>

‎learn/tasks/grid/grid1.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid: task 1</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
14+
15+
.grid > * {
16+
background-color: #4D7298;
17+
border: 2px solid #77A6B6;
18+
border-radius: .5em;
19+
color: #fff;
20+
padding: .5em;
21+
}
22+
</style>
23+
24+
<style class="editable">
25+
.grid {
26+
27+
}
28+
</style>
29+
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
<div class="grid">
35+
<div>One</div>
36+
<div>Two</div>
37+
<div>Three</div>
38+
<div>Four</div>
39+
</div>
40+
</section>
41+
42+
<textarea class="playable playable-css" style="min-height:120px;">
43+
.grid {
44+
45+
}
46+
</textarea>
47+
48+
<textarea class="playable playable-html">
49+
<div class="grid">
50+
<div>One</div>
51+
<div>Two</div>
52+
<div>Three</div>
53+
<div>Four</div>
54+
</div>
55+
</textarea>
56+
57+
<div class="playable-buttons">
58+
<input id="reset" type="button" value="Reset">
59+
</div>
60+
</body>
61+
<script src="../playable.js"></script>
62+
63+
</html>

‎learn/tasks/grid/grid2-download.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid: task 2</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
body {
14+
background-color: #fff;
15+
color: #333;
16+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
17+
padding: 1em;
18+
margin: 0;
19+
}
20+
21+
.grid > * {
22+
border-radius: .5em;
23+
color: #fff;
24+
padding: .5em;
25+
}
26+
27+
.grid {
28+
display: grid;
29+
grid-template-columns: 1fr 1fr 1fr 1fr;
30+
grid-template-rows: 100px 100px 100px;
31+
gap: 10px;
32+
}
33+
34+
.item1 {
35+
background-color: rgba(74,102,112,.7);
36+
border: 5px solid rgba(74,102,112,1);
37+
}
38+
39+
.item2 {
40+
background-color: rgba(214,162,173,.7);
41+
border: 5px solid rgba(214,162,173,1);
42+
}
43+
</style>
44+
45+
</head>
46+
47+
<body>
48+
49+
<div class="grid">
50+
<div class="item1">One</div>
51+
<div class="item2">Two</div>
52+
</div>
53+
54+
</body>
55+
56+
</html>

‎learn/tasks/grid/grid2.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid: task 2</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
14+
15+
.grid > * {
16+
border-radius: .5em;
17+
color: #fff;
18+
padding: .5em;
19+
}
20+
21+
.item1 {
22+
background-color: rgba(74,102,112,.7);
23+
border: 5px solid rgba(74,102,112,1);
24+
}
25+
26+
.item2 {
27+
background-color: rgba(214,162,173,.7);
28+
border: 5px solid rgba(214,162,173,1);
29+
}
30+
</style>
31+
32+
<style class="editable">
33+
.grid {
34+
display: grid;
35+
grid-template-columns: 1fr 1fr 1fr 1fr;
36+
grid-template-rows: 100px 100px 100px;
37+
gap: 10px;
38+
}
39+
40+
.item1 {
41+
42+
}
43+
44+
.item2 {
45+
46+
}
47+
</style>
48+
49+
</head>
50+
51+
<body>
52+
<section class="preview">
53+
<div class="grid">
54+
<div class="item1">One</div>
55+
<div class="item2">Two</div>
56+
</div>
57+
</section>
58+
59+
<textarea class="playable playable-css" style="min-height:220px;">
60+
.grid {
61+
display: grid;
62+
grid-template-columns: 1fr 1fr 1fr 1fr;
63+
grid-template-rows: 100px 100px 100px;
64+
gap: 10px;
65+
}
66+
67+
.item1 {
68+
69+
}
70+
71+
.item2 {
72+
73+
}
74+
</textarea>
75+
76+
<textarea class="playable playable-html">
77+
<div class="grid">
78+
<div class="item1">One</div>
79+
<div class="item2">Two</div>
80+
</div>
81+
</textarea>
82+
83+
<div class="playable-buttons">
84+
<input id="reset" type="button" value="Reset">
85+
</div>
86+
</body>
87+
<script src="../playable.js"></script>
88+
89+
</html>

‎learn/tasks/grid/grid3-download.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid: task 3</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
body {
14+
background-color: #fff;
15+
color: #333;
16+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
17+
padding: 1em;
18+
margin: 0;
19+
}
20+
21+
.grid > * {
22+
background-color: #4D7298;
23+
border: 2px solid #77A6B6;
24+
border-radius: .5em;
25+
color: #fff;
26+
padding: .5em;
27+
}
28+
29+
.grid {
30+
display: grid;
31+
grid-template-columns: 1fr 2fr;
32+
gap: 10px;
33+
}
34+
</style>
35+
36+
</head>
37+
38+
<body>
39+
40+
<div class="grid">
41+
<div class="one">One</div>
42+
<div class="two">Two</div>
43+
<div class="three">Three</div>
44+
<div class="four">Four</div>
45+
</div>
46+
47+
</body>
48+
49+
</html>

‎learn/tasks/grid/grid3.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Grid: task 3</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
.grid > * {
14+
background-color: #4D7298;
15+
border: 2px solid #77A6B6;
16+
border-radius: .5em;
17+
color: #fff;
18+
padding: .5em;
19+
}
20+
21+
22+
</style>
23+
24+
<style class="editable">
25+
.grid {
26+
display: grid;
27+
grid-template-columns: 1fr 2fr;
28+
gap: 10px;
29+
}
30+
</style>
31+
32+
</head>
33+
34+
<body>
35+
<section class="preview">
36+
<div class="grid">
37+
<div class="one">One</div>
38+
<div class="two">Two</div>
39+
<div class="three">Three</div>
40+
<div class="four">Four</div>
41+
</div>
42+
</section>
43+
44+
<textarea class="playable playable-css" style="min-height:220px;">
45+
.grid {
46+
display: grid;
47+
grid-template-columns: 1fr 2fr;
48+
gap: 10px;
49+
}
50+
</textarea>
51+
52+
<textarea class="playable playable-html">
53+
<div class="grid">
54+
<div class="one">One</div>
55+
<div class="two">Two</div>
56+
<div class="three">Three</div>
57+
<div class="four">Four</div>
58+
</div>
59+
</textarea>
60+
61+
<div class="playable-buttons">
62+
<input id="reset" type="button" value="Reset">
63+
</div>
64+
</body>
65+
<script src="../playable.js"></script>
66+
67+
</html>

0 commit comments

Comments
 (0)