This repository was archived by the owner on Dec 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 67
/
Copy pathtypography.html
150 lines (117 loc) · 7.87 KB
/
typography.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Chassis - Typography</title>
<meta name="description" content="Typography skeleton for styling">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/css/chassis.css">
<link rel="stylesheet" href="demos.css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
</head>
<body>
<h1>CSS Chassis</h1>
<hr>
<h1>Heading 1 <h1></h1>
<h2>Heading 2 <h2></h2>
<h3>Heading 3 <h3></h3>
<h4>Heading 4 <h4></h4>
<h5>Heading 5 <h5></h5>
<h6>Heading 6 <h6></h6>
<hr>
<h1>Heading 1 <h1></h1>
<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>
<h2>Heading 2 <h2></h2>
<p>It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.</p>
<h3>Heading 3 <h3></h3>
<p>The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.</p>
<h4>Heading 4 <h4></h4>
<p>To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more?</p>
<h5>Heading 5 <h5></h5>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<h6>Heading 6 <h6></h6>
<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>
<hr>
<h2>Block-level elements</h2>
<p>Here's a paragraph <p> filled with some <a href="http://spaceipsum.com/">Space Ipsum</a>. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman"s earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<div>Here's a div <div>. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That"s how I felt seeing the Earth for the first time. I could not help but love and cherish her
</div>
<article>
<h3>This is an article <article> with a paragraph</h3>
<p>We want to explore. We’re curious people. Look back over history, people have put their lives at stake to go out and explore … We believe in what we’re doing. Now it’s time to go.</p>
<p>End of the article.</p>
</article>
<blockquote>Let's light this fire one more time, Mike, and witness this great nation at its best. <blockquote> via <a href="http://spaceipsum.com/">Space Ipsum</a></blockquote>
<p>We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.</p>
<pre>
* {
font-family: "Comic Sans MS", "Comic Sans", "Marker Felt" !important;
}
<pre>
</pre>
<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p>
<address>
<strong>Sherlock Holmes</strong><br>
221B Baker Street<br>
London, United Kingdom <address>
</address>
<hr>
<h2>Lists <li></h2>
<p>The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.</p>
<ul>
<li>Unordered list <ul></li>
<li>List element</li>
<li>Across the sea of space, the stars are other suns.</li>
<li>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</li>
</ul>
<p>It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.</p>
<ol>
<li>Ordered list <ol></li>
<li>List element</li>
<li>The dreams of yesterday are the hopes of today and the reality of tomorrow.</li>
<li>Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.</li>
</ol>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<dl>
<dt>Definition term <dt></dt>
<dd>Definition <dd></dd>
<dt>Earth</dt>
<dd>A kick-ass planet.</dd>
<dt>Pluto</dt>
<dd>A kick-ass former planet.</dd>
<dt>Space Ipsum</dt>
<dd>NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.</dd>
</dl>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr>
<h2>Text-level elements</h2>
<ul>
<li><a href="#">anchor link</a> <a></li>
<li>abbreviation: <abbr title="Syntactically Awesome Stylesheets">SASS</abbr> <abbr></li>
<li>citation: <cite>A Study in Scarlet</cite> <cite></li>
<li>Here's the <code><code></code> element</li>
<li>deleted text: <del>Episodes I, II, III</del> <del></li>
<li>definition: The <dfn>definition element</dfn> is the element being defined inline. <dfn></li>
<li><em>emphasis</em> <em></li>
<li><ins>inserted text</ins> <ins></li>
<li>keyboard input: <kbd>control + space</kbd> <kbd></li>
<li><mark>mark element</mark> <mark></li>
<li>meter: <meter min="200" max="500" value="423">awesomeness</meter> <meter></li>
<li>progress: <progress value="90" max="100">70 %</progress> <progress></li>
<li>quotation (short): <q>You just gotta believe!</q> <q></li>
<li>quotation within a quotation (short): <q>Yo dawg, I heard you like quotes so I put <q>this quote</q> within this quote.</q> <q></li>
<li>strikethough: <s>Lance Armstrong remains steroid-free.</s> <s></li>
<li>sample text: <samp>Error</samp> <samp></li>
<li>small: <small>Hydrogen</small> <small></li>
<li>small within small: <small>Hydrogen <small>Hydrogen</small></small> <small></li>
<li>strong: <strong>The Hammer</strong> <strong></li>
<li>subscript: <sub>Lower</sub> 0<sub>1<sub>2<sub>3</sub></sub></sub> <sub></li>
<li>superscript: I need a good <sup>superman</sup> joke to go here. 0<sup>1<sup>2<sup>3</sup></sup></sup> <sup></li>
<li>time: <time datetime="1985-12-09 19:00">Dec 9</time> <time></li>
<li>underline: Never underline <u>anything</u>. <u></li>
<li>variable: <var>cat</var> + <var>dog</var> = <var>catdog</var> <var></li>
</ul>
<hr>
</body>
</html>