forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresponsive.html
More file actions
186 lines (156 loc) · 9.7 KB
/
responsive.html
File metadata and controls
186 lines (156 loc) · 9.7 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
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<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>
<section>
<article id="article1" class="padding">
<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> 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="https://wingsofwhimsy.wordpress.com/tag/drop-cap/" target="_blank" class="navlink ">Image
source</a>
</article>
<article id="article2" class="padding">
<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" class="padding">
<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> 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=" https://etc.usf.edu/presentations/extras/letters/drop_caps/09/034/index.html "
target="_blank" class="navlink ">Image
source</a>
</article>
</section>
<article>
<h2>Resouces & Links</h2>
<p>Laura Franz is a Professor at UMass Dartmouth, where she teaches a wide range of type classes —
including a
Web Typography </p>
<a href="https://www.smashingmagazine.com/2012/04/drop-caps-historical-use-and-current-best-practices/ "
target="_blank" class="navlink "> Drop Cap's article</a>
<a href="https://www.bbc.com/culture/article/20160425-the-book-of-kells-medieval-europes-greatest-treasure">Book
of Kells</a>
<a href="">link 3</a>
<a href="">link 4</a>
</article>
</main>
<footer class="container">
<address class="address">
2 Dury Lane,<br> London,<br> England,<br>
<email class="adress">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>