-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (229 loc) · 10.7 KB
/
index.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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/styles.css">
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
<title>Fombinations</title>
</head>
<body>
<section class="intro">
<div class="intro_content">
<div class="intro_title font-sacramento w400">Fombinations</div>
<div class="intro_desc font-fauna-one w400">Font combinations from the <a class="googlefonts" href="https://fonts.google.com/">Google Web Fonts</a> storage.</div>
<div class="desc-flex font-fauna-one w400">
<div class="description">Poems used are found via <a class="pinterest" href="https://www.pinterest.com">Pinterest</a> and the beautiful photographs here are from <a class="unsplash" href="https://www.unsplash.com">Unsplash.</a></div>
<div>Feel free to fork this repo on <a class="github" href="https://github.com/rosatiara/fombinations">Github</a></div>
</div>
</div>
</section>
<main>
<div class="container container_hearts">
<div class="wrapper_hearts">
<div class="content_hearts">
<div class="title_hearts font-dancing-script w600i">Hearts Like Wildflowers</div>
<div class="poem_hearts">
<p class="font-buenard w300">
I hope you are blessed <br> with a heart like a wildflower. <br> <br> Strong enough to rise again <br> after being trampled upon, <br> tough enough to weather <br> the worst of the summer storms, <br> and able to grow and flourish <br> even in the most broken places.
</p>
</div>
<div class="author_hearts font-muli w400">Nikita Gill</div>
</div>
</div>
</div>
<div class="container container_dust">
<div class="wrapper_dust">
<div class="content_dust">
<div class="title_dust font-share w700i">Dust of Snow</div>
<div class="poem_dust">
<p>
The way a crow <br> Shook down on me <br> The dust of snow <br> From a hemlock tree <br> <br> Has given my heart <br> A change of mood <br> And saved sone part <br> Of a day I had rued
</p>
</div>
<div class="author_dust"></div>
</div>
</div>
</div>
<div class="container container_john-poor">
<div class="wrapper_john-poor">
<div class="content_john-poor">
<div class="poem_john-poor">
<p class="font-reenie-beanie w300i">
but i, being poor, <br> have only my dreams. <br> i lay them at your feet... <br> tread softly; for you <br> tread on my dreams
</p>
</div>
<div class="author_john-poor font-rasa w500"> john keats</div>
</div>
</div>
</div>
<div class="container container_winter">
<div class="wrapper_winter">
<div class="content_winter">
<div class="title_winter font-old-standard-tt w500i">Winter Cheer</div>
<hr class="hr-mary">
<div class="poem_winter">
<p class="font-scada w300">
I love all the seasons, <br> But winter is the best! <br> Let's put on our mittens. <br> Now we are all dressed. <br> In the snow, we love to play <br> And this is what we hear: <br> Brr, brr, brr, brr! <br> That's this season's cheer!
</p>
</div>
<div class="author_winter font-quattrocento-sans w500">Mary Sullivan</div>
</div>
</div>
</div>
<div class="container container_atticus">
<div class="wrapper_atticus">
<div class="content_atticus">
<div class="title_atticus"></div>
<div class="poem_atticus">
<p class="font-alegreya-sans w400">
You <br> my fairytale <br> my book <br> to never finish <br> let me linger <br> in your pages <br> a little <br> ever <br> longer.
</p>
</div>
<div class="author_atticus font-josefin-slab w600">Atticus</div>
</div>
</div>
</div>
<div class="container container_earth">
<div class="wrapper_earth">
<div class="content_earth">
<div class="font-bilbo w400">-----the-----</div>
<div class="earth font-roboto w700">EARTH</div>
<div class="has-music font-amiri w400">HAS MUSIC</div>
<div class="for-those-who font-work-sans w400"> > FOR THOSE WHO < </div>
<div class="listen font-mr-dafoe">listen</div>
</div>
</div>
</div>
</div>
<div class="container container_liberty">
<div class="wrapper_liberty">
<div class="content_liberty">
<div class="title_liberty font-amiri w600i">I'm the Statue of Liberty</div>
<div class="poem_liberty">
<p class="font-overpass w400">
I hold a flame <br> To light the way <br> A book of law <br> To keep evil at bay <br> While broken chains <br> At my feet doth lay <br> I remind you to pursue freedom <br> Day by day
</p>
</div>
<div class="author_liberty font-andika">Justin Lemaster</div>
</div>
</div>
</div>
<div class="container container_dark-night">
<div class="wrapper_dark-night">
<div class="content_dark-night">
<div class="title_dark-night font-averia-serif-libre w600" title="Averia Serif">dark night poem</div>
<div class="poem_dark-night">
<p class="font-fira-sans-extra-condensed w300i">
they say that <br> nothing is wasted: <br> either that <br> or <br> it all is
</p>
</div>
</div>
</div>
</div>
<div class="container container_bugs">
<div class="wrapper_bugs">
<div class="content_bugs">
<div class="title_bugs font-arvo w600i" title="Averia Serif">The Poor Progammer</div>
<div class="poem_bugs">
<p class="font-lekton w400">
99 little bugs in the code, <br> 100 bugs in the code, <br> 1 bug fixed... compile again, <br> 100 little bugs in the code
</p>
</div>
</div>
</div>
</div>
<div class="container container_kindness">
<div class="wrapper_kindness">
<div class="content_kindness">
<div class="poem_kindness">
<p class="font-la-belle-aurore w400i">
kindness always comes back
</p>
</div>
<div class="author_kindness font-martel-sans w400">k.tolnoe</div>
</div>
</div>
</div>
<div class="container container_lazy-jane">
<div class="wrapper_lazy-jane">
<div class="content_lazy-jane">
<div class="title_lazy-jane font-jolly-lodger w500">LAZY JANE</div>
<div class="poem_lazy-jane">
<p class="font-noticia-text w400">
Lazy <br> lazy <br> lazy <br> lazy <br> lazy <br> lazy <br> Jane. <br> she <br> wants <br> a <br> drink <br> of <br> water <br> no <br> she <br> waits <br> and <br> waits <br> and <br> waits <br> and <br> waits <br> and <br> waits <br> for <br> it <br> to <br> rain.
</p>
</div>
<div class="author_lazy-jane font-martel-sans w400"></div>
</div>
</div>
</div>
<div class="container container_invitation">
<div class="wrapper_invitation">
<div class="content_invitation">
<div class="title_invitation font-cinzel w600">INVITATION</div>
<div class="poem_invitation">
<p class="font-fauna-one w400">
If you are a dreamer, come in, <br> If you are a dreamer, a wisher, a liar, <br> A hope-er, a pray-er, a magic bean buyer... <br> If you're a preteneder, come sit by my fire <br> For we have some flax-golden tales to spin. <br> Come in! <br> Come in!
</p>
</div>
<div class="author_invitation font-martel-sans w400"></div>
</div>
</div>
</div>
<div class="container container_voyage">
<div class="wrapper_voyage">
<div class="content_voyage">
<div class="title_voyage font-philosopher w500i">A Voyage</div>
<div class="poem_voyage font-crimson-text w400">
<p>
To be guided <br>
<p class="float-right">nor misguided <br>
in love, <br>
nor broken hearted.</p> <br>
But to sail in waters— <br> <p class="float-right"> uncharted.</p>
</p>
</div>
<div class="author_voyage font-trykker w500"> LANG LEAV</div>
</div>
</div>
</div>
<div class="container container_wendy">
<div class="wrapper_wendy">
<div class="about_wendy">
<div class="author_wendy font-preahvihear w500"> WENDY COPE </div>
<hr class="hr-wendy">
<div class="title1_wendy font-open-sans w500i">Differences of Opinion</div>
<di class="part-one">I</div>
<div class="title_wendy font-lora w500">HE TELLS HER</div>
<div class="poem_wendy font-lora w300">
<p>
He tells her that the earth is flat— <br> He knows the facts, and that is that. <br> In altercations fierce and long <br> She tries her best to prove him wrong. <br> But he has learned to argue well. <br> He calls her arguments unsound <br> And often asks her not to yell. <br> She cannot win. He stands his ground. <br> <br> The planet goes on being round.
</p>
</div>
</div>
</div>
<div class="container container_phoenix">
<div class="wrapper_phoenix">
<div class="content_phoenix">
<div class="title_phoenix font-cormorant-upright w500">LIKE A PHOENIX, FROM THE ASHES</div>
<div class="poem_phoenix">
<p class="font-harmattan w400">
They may <br> defeat you, <br> burn you, <br> insult you, <br> injure you, <br> and abandon you, <br> But they <br> will not, <br> shall not, <br> and cannot <br> destroy you, <br> for you, <br> like Rome, <br> were built on ashes, <br> and <em>you,</em> <br> like a phoenix <br> know how to <em>resurrect.</em>
</p>
</div>
<div class="author_phoenix font-im-fell-english w400">Nikita Gill</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer-wrapper">
<div class="footer-content font-nanum-gothic-coding">
Ⓒ Rosa Tiara
</div>
</div>
</footer>
</body>
</html>