fontpairswithparallax/index.html at master · fgsumer/fontpairswithparallax · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Parallax</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Open+Sans+Condensed:wght@300;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Abril+Fatface|Amatic+SC|Archivo+Narrow|Bebas+Neue|Cinzel|Fjalla+One|Josefin+Sans|Julius+Sans+One|Merriweather+Sans|Montserrat|Noto+Sans|Open+Sans|Playfair+Display|Raleway|Source+Sans+Pro|Vidaloka|Yeseva+One&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bebas+Neue&family=Fredericka+the+Great&family=Gentium+Book+Basic&family=Montserrat&family=Montserrat+Alternates:wght@100;800&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" type="text/css" href="parallax.css" />
  </head>
  <body>
    <div class="container-1">
      <h1>Together</h1>
      <p>
        is a showcase of my favourite typeface pairings from Google web fonts.
      </p>

      <p>
        All fonts used are available for free
        <a href="https://fonts.google.com/" target="_blank">on Google Fonts</a> or elsewhere on the
        interwebs. Texts are the first paragraph of chapters in "<a
          href="http://www.gutenberg.org/ebooks/11"
          target="_blank"
          >Alice's Adventures in Wonderland</a
        >
        by Lewis Carroll. This project is inspired by
        <a href="http://bchiang7.github.io/fontipsums/" target="_blank">this, </a>
        <a
          href="https://www.webdesignerdepot.com/2019/02/19-contemporary-font-pairings-for-2019/"
          target="_blank"
          >this
        </a>
        and <a href="http://hellohappy.org/beautiful-web-type/" target="_blank">this</a>.
      </p>
    </div>
    <div class="container-2">
      <h3>
        <a href="https://fonts.google.com/specimen/Amatic+SC" target="_blank"
          >Down the RabbitHole</a
        >
      </h3>
      <p>
        <a href="https://fonts.google.com/specimen/Josefin+Sans?query=Josefin+Sans" target="_blank"
          >Alice was beginning to get very tired of sitting by her sister on the bank, and of having
          nothing to do: once or twice she had peeped into the book her sister was reading, but it
          had no pictures or conversations in it, 'and what is the use of a book,' thought Alice
          'without pictures or conversation?'</a
        >
      </p>
    </div>
    <div class="container-3">
      <h3>
        <a
          href="https://fonts.google.com/specimen/Julius+Sans+One?query=Julius+Sans+One"
          target="_blank"
          >The Pool of Tears</a
        >
      </h3>
      <p>
        <a
          href="https://fonts.google.com/specimen/Archivo+Narrow?query=Archivo+Narrow"
          target="_blank"
        >
          'Curiouser and curiouser!' cried Alice (she was so much surprised, that for the moment she
          quite forgot how to speak good English); 'now I'm opening out like the largest telescope
          that ever was! Good-bye, feet!' (for when she looked down at her feet, they seemed to be
          almost out of sight, they were getting so far off). 'Oh, my poor little feet, I wonder who
          will put on your shoes and stockings for you now, dears? I'm sure I shan't be able! I
          shall be a great deal too far off to trouble myself about you: you must manage the best
          way you can;—but I must be kind to them,' thought Alice, 'or perhaps they won't walk the
          way I want to go! Let me see: I'll give them a new pair of boots every Christmas.'</a
        >
      </p>
    </div>
    <div class="container-4">
      <h3>
        <a href="https://fonts.google.com/specimen/Lora?query=lora" target="_blank">
          A Caucus-Race and <br />
          a Long Tale
        </a>
      </h3>
      <hr />
      <p>
        <a href="https://fonts.google.com/specimen/Lora?query=lora" target="_blank"
          >They were indeed a queer-looking party that assembled on the bank—the birds with draggled
          feathers, the animals with their fur clinging close to them, and all dripping wet, cross,
          and uncomfortable.
        </a>
      </p>
    </div>
    <div class="container-5">
      <h3>
        <a href="https://fonts.google.com/specimen/Alfa+Slab+One?query=alfa" target="_blank"
          >Rabbit Sends in a Little Bill</a
        >
      </h3>
      <p>
        <a
          href="https://fonts.google.com/specimen/Gentium+Book+Basic?sidebar.open&query=genti"
          target="_blank"
          >It was the White Rabbit, trotting slowly back again, and looking anxiously about as it
          went, as if it had lost something; and she heard it muttering to itself 'The Duchess! The
          Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, as sure as
          ferrets are ferrets! Where CAN I have dropped them, I wonder?' Alice guessed in a moment
          that it was looking for the fan and the pair of white kid gloves, and she very
          good-naturedly began hunting about for them, but they were nowhere to be seen—everything
          seemed to have changed since her swim in the pool, and the great hall, with the glass
          table and the little door, had vanished completely.
        </a>
      </p>
    </div>
    <div class="container-6">
      <h3>
        <a
          href="https://fonts.google.com/specimen/Montserrat+Alternates?query=Montserrat+Alternates"
          target="_blank"
        >
          <span style="color:#fe4a49 ">Pig</span> <br />
          <span style="color:#2ab7ca">and</span> <br />
          <span style="color:#fed766">Pepper</span>
        </a>
      </h3>
      <p>
        <a href="https://fonts.google.com/specimen/Raleway" target="_blank"
          >For a minute or two she stood looking at the house, and wondering what to do next, when
          suddenly a footman in livery came running out of the wood—(she considered him to be a
          footman because he was in livery: otherwise, judging by his face only, she would have
          called him a fish)—and rapped loudly at the door with his knuckles. It was opened by
          another footman in livery, with a round face, and large eyes like a frog; and both
          footmen, Alice noticed, had powdered hair that curled all over their heads. She felt very
          curious to know what it was all about, and crept a little way out of the wood to listen.
        </a>
      </p>
    </div>
    <div class="container-7">
      <h3>
        <a href="https://fonts.google.com/specimen/Fjalla+One?query=Fjalla+One" target="_blank">
          Advice from a Caterpillar
        </a>
      </h3>
      <p>
        <a href="https://fonts.google.com/specimen/Noto+Sans?query=Noto+Sans" target="_blank">
          The Caterpillar and Alice looked at each other for some time in silence: at last the
          Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy
          voice. 'Who are YOU?' said the Caterpillar.
        </a>
      </p>
    </div>

    <div class="container-8">
      <img src="images/icons8-tea-cup-100.png" alt="tea cup icon" />
      <hr />
      <h3>
        <a href="https://fonts.google.com/specimen/Playfair+Display" target="_blank"
          >A Mad Tea-Party</a
        >
      </h3>
      <p>
        <a
          href="https://fonts.google.com/specimen/Source+Sans+Pro?query=Source+Sans+Pro"
          target="_blank"
        >
          There was a table set out under a tree in front of the house, and the March Hare and the
          Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the
          other two were using it as a cushion, resting their elbows on it, and talking over its
          head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I
          suppose it doesn't mind.'
        </a>
      </p>
      <hr />
    </div>
    <div class="container-9">
      <h3>
        <a
          href="https://fonts.google.com/specimen/Montserrat+Alternates?query=Montserrat+Alternates"
          target="_blank"
        >
          The Queen's Croquet-Ground
        </a>
      </h3>
      <p>
        <a href="https://fonts.google.com/specimen/Bebas+Neue?query=Bebas+Neue" target="_blank">
          A large rose-tree stood near the entrance of the garden: the roses growing on it were
          white, but there were three gardeners at it, busily painting them red. Alice thought this
          a very curious thing, and she went nearer to watch them, and just as she came up to them
          she heard one of them say, 'Look out now, Five! Don't go splashing paint over me like
          that!' 'I couldn't help it,' said Five, in a sulky tone; 'Seven jogged my elbow.'</a
        >
      </p>
    </div>
    <div class="container-10">
      <h3>
        <a
          href="https://fonts.google.com/specimen/Abril+Fatface?query=abril&selection.family=Abril+Fatface"
          target="_blank"
          >The Mock Turtle's Story</a
        >
      </h3>
    </div>
  </body>
</html>