Skip to content

Commit 2801363

Browse files
rachelandrewrachelandrew
committed
two more howto examples
1 parent 3864835 commit 2801363

File tree

2 files changed

+112
-0
lines changed

2 files changed

+112
-0
lines changed

‎howto/center.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Solutions: How to center an element</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
.box {
10+
background-color: rgb(69,164,181);
11+
border-radius: 5px;
12+
padding: 10px;
13+
width: 100px;
14+
color: #fff;
15+
}
16+
</style>
17+
18+
<style class="editable">
19+
.wrapper {
20+
height: 300px;
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<div class="wrapper">
31+
<div class="box">center me!</div>
32+
</div>
33+
</section>
34+
35+
<textarea class="playable playable-css" style="height: 120px;">
36+
.wrapper {
37+
height: 300px;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
}
42+
</textarea>
43+
44+
<textarea class="playable playable-html" style="height: 100px;">
45+
<div class="wrapper">
46+
<div class="box">center me!</div>
47+
</div>
48+
</textarea>
49+
50+
<!-- leave everything below here alone -->
51+
<div class="playable-buttons">
52+
<input id="reset" type="button" value="Reset">
53+
</div>
54+
</body>
55+
<script src="playable.js"></script>
56+
57+
</html>

‎howto/highlight_h1_plus_para.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Solutions: How to highlight a paragraph right after an h1</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.wrapper h1+p {
14+
font-weight: bold;
15+
font-size: 130%;
16+
color: rebeccapurple;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="wrapper">
24+
<h1>A heading</h1>
25+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
26+
27+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
28+
</div>
29+
</section>
30+
31+
<textarea class="playable playable-css" style="height: 120px;">
32+
.wrapper h1+p {
33+
font-weight: bold;
34+
font-size: 130%;
35+
color: rebeccapurple;
36+
}
37+
</textarea>
38+
39+
<textarea class="playable playable-html" style="height: 200px;">
40+
<div class="wrapper">
41+
<h1>A heading</h1>
42+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
43+
44+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
45+
</div>
46+
</textarea>
47+
48+
<!-- leave everything below here alone -->
49+
<div class="playable-buttons">
50+
<input id="reset" type="button" value="Reset">
51+
</div>
52+
</body>
53+
<script src="playable.js"></script>
54+
55+
</html>

0 commit comments

Comments
 (0)