Skip to content

Commit b18ba9d

Browse files
rachelandrewrachelandrew
committed
Create biog.html
End of tutorial example for lesson 4 of learn.
1 parent 6987dc2 commit b18ba9d

File tree

1 file changed

+110
-0
lines changed

1 file changed

+110
-0
lines changed

‎learn/getting-started/biog.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Formatting a biography</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
body {
14+
font-family: Arial, Helvetica, sans-serif;
15+
}
16+
17+
h1 {
18+
color: #375e97;
19+
font-size: 2em;
20+
font-family: Georgia, 'Times New Roman', Times, serif;
21+
border-bottom: 1px solid #375e97;
22+
}
23+
24+
h2 {
25+
font-size: 1.5em;
26+
}
27+
28+
.job-title {
29+
color: #999999;
30+
font-weight: bold;
31+
}
32+
33+
a:link, a:visited {
34+
color: #fb6542;
35+
}
36+
37+
a:hover {
38+
text-decoration: none;
39+
}
40+
</style>
41+
</head>
42+
43+
<body>
44+
<section class="preview">
45+
<h1>Jane Doe</h1>
46+
<div class="job-title">Web Developer</div>
47+
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
48+
49+
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p>
50+
51+
<h2>Contact information</h2>
52+
<ul>
53+
<li>Email: <a href="mailto:jane@example.com">jane@example.com</a></li>
54+
<li>Web: <a href="http://example.com">http://example.com</a></li>
55+
<li>Tel: 123 45678</li>
56+
</ul>
57+
</section>
58+
59+
<textarea class="playable playable-css" style="height: 500px;">
60+
body {
61+
font-family: Arial, Helvetica, sans-serif;
62+
}
63+
64+
h1 {
65+
color: #375e97;
66+
font-size: 2em;
67+
font-family: Georgia, 'Times New Roman', Times, serif;
68+
border-bottom: 1px solid #375e97;
69+
}
70+
71+
h2 {
72+
font-size: 1.5em;
73+
}
74+
75+
.job-title {
76+
color: #999999;
77+
font-weight: bold;
78+
}
79+
80+
a:link, a:visited {
81+
color: #fb6542;
82+
}
83+
84+
a:hover {
85+
text-decoration: none;
86+
}
87+
</textarea>
88+
89+
<textarea class="playable playable-html" style="height: 300px;">
90+
<h1>Jane Doe</h1>
91+
<div class="job-title">Web Developer</div>
92+
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
93+
94+
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p>
95+
96+
<h2>Contact information</h2>
97+
<ul>
98+
<li>Email: <a href="mailto:jane@example.com">jane@example.com</a></li>
99+
<li>Web: <a href="http://example.com">http://example.com</a></li>
100+
<li>Tel: 123 45678</li>
101+
</ul>
102+
</textarea>
103+
104+
<div class="playable-buttons">
105+
<input id="reset" type="button" value="Reset">
106+
</div>
107+
</body>
108+
<script src="../playable.js"></script>
109+
110+
</html>

0 commit comments

Comments
 (0)