forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
191 lines (158 loc) · 8.85 KB
/
index.html
File metadata and controls
191 lines (158 loc) · 8.85 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Tips on Typography & using Drop Caps">
<meta name="keywords" content="art, typography, letters, fonts ">
<meta name="author" content="Jonathan Willson">
<title>Typography Tips</title>
<link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap" rel="stylesheet">
</head>
<body>
<!-- Add your HTML markup here -->
<header>
<h1>Typography Tips</h1>
<nav>
<a href="#article1" class="navlink">Article One</a>
<a href="#article2" class="navlink">Article Two</a>
<a href="#article3" class="navlink">Article Three</a>
</nav>
</header>
<main>
<h2 class="quote">"be <b>Bold</b> or <i>Italic</i>, never regular"</h2>
<article>
<h2>Drop Caps & Illuminated Letters</h2>
<p>The practice of using a large letter to mark the start of a text has been around for almost
two thousand years. Illustrated caps increased usability by marking important passages and
guiding readers through the text. Unlike their historic counterparts,
drop caps on the Web don’t add value in terms of usability or readability—and they are
hard for Web developers to control, often rendering differently across browsers.</p>
</article>
<!-- beginning of section with 3 article tags first-child of section -->
<section>
<article id="article1">
<h2>Article One</h2>
<img src="images\V.jpg " alt="Drop cap Letter V " class=" letterV">
<p>ivamus nec mi tempus, molestie quam a, tincidunt lectus. Quisque non bibendum nisi, a elementum eros.
In convallis massa nec lorem ultricies pulvinar. Donec gravida sollicitudin diam. Integer nec dictum risus,
sit amet gravida velit. Nulla vel orci pretium, aliquam velit sit amet, imperdiet dui. Mauris et dictum
mauris,
sit amet efficitur metus.Etiam non tempor metus, sagittis aliquam justo. Maecenas sodales ornare justo.
Vivamus ullamcorper dolor id nisi eleifend ultricies. Mauris vestibulum lacus et lorem lacinia aliquet.
Phasellus diam nibh, scelerisque ut imperdiet ac, dapibus id nunc. Sed fermentum est et mi suscipit
euismod. Duis convallis fringilla tellus, in pharetra orci pretium id. Nam lobortis,
turpis a sollicitudin lobortis, nisi velit tincidunt sem, vel ornare erat lectus et ante.
Vestibulum vestibulum euismod mauris vitae sagittis. Phasellus ut lorem fringilla, porta eros ut,
efficitur nisi. Praesent rutrum dictum libero, vulputate luctus sapien consequat id.
Vivamus convallis condimentum quam ut lobortis.
</p>
<h3>Summary</h3>
<p> Even as late as the 15th century, monks and scribes used initial caps to aid in visually “chunking” texts.
(bible from 1407). </p>
<a href="https://wingsofwhimsy.wordpress.com/tag/drop-cap/" target="_blank" class="navlink ">Image
source</a>
</article>
<!-- first child of section ends -->
<article id="article2">
<h2>Article Two</h2>
<img src="images\P.jpg " alt="Drop cap Letter V " class=" letterP">
<p>Proin feugiat lorem dolor, eu aliquam elit molestie ut. Curabitur blandit, lorem sit amet convallis
rutrum,
augue erat auctor sem, eget mollis metus orci sit amet lectus. Duis ut ante ut felis eleifend tincidunt.
Integer ut magna accumsan, scelerisque nulla ac, iaculis purus.
Nulla at est consectetur turpis mollis interdum. Vivamus sagittis at neque id ornare.
Aenean dapibus suscipit ipsum, ac luctus massa sodales nec. Morbi urna nisl, sagittis interdum lacus non,
egestas efficitur nisi. Nam mattis dui lobortis sollicitudin ultrices. Ut vel congue ligula,
at egestas sem. Maecenas urna libero, facilisis non imperdiet at, elementum nec diam. Donec quis metus a
risus
porta laoreet. Nulla non dolor eleifend, semper erat sit amet, blandit eros.
Phasellus mattis libero nisl, suscipit pulvinar leo consequat in. Mauris ullamcorper,
libero quis volutpat pellentesque, neque elit lobortis mi, a gravida ante nisl nec elit.
Praesent id mollis dolor. Aenean leo ex, lacinia sit amet dolor nec, consequat pretium nibh.
Sed enim ipsum, vulputate ut mauris et, dictum dapibus orci.
</p>
<h3>Summary</h3>
<p> The practice of using a large letter to mark the start of a text has been around for almost
two thousand years.
Illustrated caps increased usability by marking important passages and guiding readers through the text.
</p>
<a href=" http://pinterest.com/pin/280700989244341903 " target="_blank" class="navlink ">Image
source</a>
</article>
<article id="article3">
<h2>Article Three</h2>
<img src="images\I2.jpg " alt="Drop cap Letter V " class=" letterI">
<p>In tempus ligula risus, ut mattis urna vehicula a. Nulla nec venenatis ligula. In condimentum fringilla
libero,
sit amet gravida dui auctor non. Morbi ultricies luctus est, quis maximus metus ornare sed.
Vestibulum semper feugiat turpis id tincidunt. Donec placerat dui lacus. Sed ut ultricies leo,
sit amet faucibus purus. Aliquam lorem leo, malesuada at blandit a,
ultricies nec leo. Nam sed porttitor diam, sit amet blandit massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut at semper nulla, at dictum quam. Maecenas enim dolor, volutpat sed ornare sit amet,
eleifend sit amet lectus. Fusce fermentum porttitor lacus in elementum.
Vestibulum condimentum urna nec tortor mollis,
a commodo ex faucibus. Mauris non lectus nec risus congue consectetur ut lobortis lorem.
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
</p>
<h3>Summary</h3>
<p>Early printed books were often designed to replicate manuscripts. Printers left space in and around the
text—so owners could hire an artisan to illustrate initial caps and borders. </p>
<a href=" https://etc.usf.edu/presentations/extras/letters/drop_caps/09/034/index.html " target="_blank"
class="navlink ">Image
source</a>
</article>
</section>
<!-- Section ends 3 articles -->>
<article>
<h2>Resouces & Links</h2>
<p><b>Laura Franz:</b> a wide range of Type Classes & Web Typography </p>
<a href="https://www.smashingmagazine.com/2012/04/drop-caps-historical-use-and-current-best-practices/ "
target="_blank" class="navlink "> Web Typography</a>
<hr>
<p>
<b>The Book of Kells:</b> Medieval Europe’s greatest treasure?
</p>
<a href="https://www.bbc.com/culture/article/20160425-the-book-of-kells-medieval-europes-greatest-treasure"
target="_blank" class="navlink">Book
of Kells</a>
<hr>
<p>
<b>Wings of Whimsy:</b> Larousse Illustré – Complément – French Dictionary Pages
</p>
<a href="https://wingsofwhimsy.wordpress.com/tag/drop-cap/" target="_blank" class="navlink">wings of whimsy</a>
<hr>
<p>
<b>Design Basics:</b>Drop Caps and Initial Impressions
</p>
<a href=" http://theworldsgreatestbook.com/book-design-part-6/" target="_blank" class="navlink">Design
Basics</a>
</article>
</main>
<footer class="container">
<address>
2 Dury Lane,<br> London,<br> England,<br>
<email>Email: <a href="mailto:[email protected]"> typographytips.com</email>
</address>
<br>
<div class="social">
<a href="https://www.facebook.com" target="_blank" class="fblink" class="external-link"><img
src="images/facebook.svg" alt="facebook" id="fblogo"> </a>
<a href="https://www.instagram.com" target="_blank" class="insta"><img src="images/insta.svg" alt="instagram link"
id="insta" class="external-link"></a>
<a href="https://www.twittter.com" target="_blank" class="twitter"><img src="images/twitter.svg"
alt="twitter link" id="insta" class="external-link"></a>
<a href="https://gb.linkedin.com/" target="_blank" class="linkedin"><img src="images/linkedin.svg"
alt="linked-in link" id="insta" class="external-link"></a>
</div>
<div class="bottombar">
<a href="copyright.html" target="_blank" class="copyright">Copyright jaydog 2020 <span class="copyright"> ©
</span></a>
<a href="privacy.html" target="_blank" class="privacy">Privacy Policy</a>
<a href="terms.html" target="_blank" class="terms"> Terms of use</a>
</div>
</footer>
</body>
</html>