Skip to content

Commit 56c5c59

Browse files
rachelandrewrachelandrew
committed
Example flexbox tasks files
1 parent bb9373e commit 56c5c59

11 files changed

+653
-0
lines changed

‎learn/tasks/flexbox/flexbox1-download.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<title>Flexbox: Task 1</title>
8+
9+
10+
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 1em;
16+
margin: 0;
17+
}
18+
19+
nav ul {
20+
max-width: 700px;
21+
list-style:none;
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
nav a:link,
27+
nav a:visited {
28+
background-color: #4D7298;
29+
border: 2px solid #77A6B6;
30+
border-radius: .5em;
31+
color: #fff;
32+
padding: .5em;
33+
display: inline-block;
34+
text-decoration: none;
35+
}
36+
</style>
37+
38+
39+
40+
</head>
41+
42+
<body>
43+
44+
<nav>
45+
<ul>
46+
<li><a href="/">Home</a></li>
47+
<li><a href="/about">About Us</a></li>
48+
<li><a href="/products">Our Products</a></li>
49+
<li><a href="/contact">Contact Us</a></li>
50+
</ul>
51+
</nav>
52+
53+
</body>
54+
55+
</html>

‎learn/tasks/flexbox/flexbox1.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Flexbox: task 1</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
nav ul {
14+
max-width: 700px;
15+
list-style:none;
16+
padding: 0;
17+
margin: 0;
18+
}
19+
20+
nav a:link,
21+
nav a:visited {
22+
background-color: #4D7298;
23+
border: 2px solid #77A6B6;
24+
border-radius: .5em;
25+
color: #fff;
26+
padding: .5em;
27+
display: inline-block;
28+
text-decoration: none;
29+
}
30+
</style>
31+
32+
<style class="editable">
33+
nav ul {
34+
35+
}
36+
</style>
37+
38+
</head>
39+
40+
<body>
41+
<section class="preview">
42+
<nav>
43+
<ul>
44+
<li><a href="/">Home</a></li>
45+
<li><a href="/about">About Us</a></li>
46+
<li><a href="/products">Our Products</a></li>
47+
<li><a href="/contact">Contact Us</a></li>
48+
</ul>
49+
</nav>
50+
</section>
51+
52+
<textarea class="playable playable-css">
53+
nav ul {
54+
55+
}
56+
</textarea>
57+
58+
<textarea class="playable playable-html">
59+
<nav>
60+
<ul>
61+
<li><a href="/">Home</a></li>
62+
<li><a href="/about">About Us</a></li>
63+
<li><a href="/products">Our Products</a></li>
64+
<li><a href="/contact">Contact Us</a></li>
65+
</ul>
66+
</nav>
67+
</textarea>
68+
69+
<div class="playable-buttons">
70+
<input id="reset" type="button" value="Reset">
71+
</div>
72+
</body>
73+
<script src="../playable.js"></script>
74+
75+
</html>

‎learn/tasks/flexbox/flexbox2-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+
<title>Flexbox: Task 2</title>
8+
9+
10+
<style>
11+
body {
12+
background-color: #fff;
13+
color: #333;
14+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15+
padding: 1em;
16+
margin: 0;
17+
}
18+
19+
ul {
20+
max-width: 700px;
21+
list-style:none;
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
li {
27+
background-color: #4D7298;
28+
border: 2px solid #77A6B6;
29+
border-radius: .5em;
30+
color: #fff;
31+
padding: .5em;
32+
}
33+
</style>
34+
35+
36+
37+
</head>
38+
39+
<body>
40+
41+
<ul>
42+
<li>I am small</li>
43+
<li>I have more content than the very small item.</li>
44+
<li>I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!</li>
45+
</ul>
46+
47+
</body>
48+
49+
</html>

‎learn/tasks/flexbox/flexbox2.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
8+
<title>Flexbox: task 2</title>
9+
10+
<link rel="stylesheet" href="../styles.css">
11+
12+
<style>
13+
ul {
14+
max-width: 700px;
15+
list-style:none;
16+
padding: 0;
17+
margin: 0;
18+
}
19+
20+
li {
21+
background-color: #4D7298;
22+
border: 2px solid #77A6B6;
23+
border-radius: .5em;
24+
color: #fff;
25+
padding: .5em;
26+
}
27+
</style>
28+
29+
<style class="editable">
30+
ul {
31+
32+
}
33+
34+
li {
35+
36+
}
37+
</style>
38+
39+
</head>
40+
41+
<body>
42+
<section class="preview">
43+
<ul>
44+
<li>I am small</li>
45+
<li>I have more content than the very small item.</li>
46+
<li>I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!</li>
47+
</ul>
48+
</section>
49+
50+
<textarea class="playable playable-css" style="height: 150px;">
51+
ul {
52+
53+
}
54+
55+
li {
56+
57+
}
58+
</textarea>
59+
60+
<textarea class="playable playable-html">
61+
<ul>
62+
<li>I am small</li>
63+
<li>I have more content than the very small item.</li>
64+
<li>I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!</li>
65+
</ul>
66+
</textarea>
67+
68+
<div class="playable-buttons">
69+
<input id="reset" type="button" value="Reset">
70+
</div>
71+
</body>
72+
<script src="../playable.js"></script>
73+
74+
</html>

‎learn/tasks/flexbox/flexbox3-download.html

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

‎learn/tasks/flexbox/flexbox3.html

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

0 commit comments

Comments
 (0)