-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
316 lines (298 loc) · 23.4 KB
/
index.html
File metadata and controls
316 lines (298 loc) · 23.4 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
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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
<!-- WebStart 1.6.1 | https://github.com/gmasson/webstart | License MIT -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="Resource-type" content="document">
<link rel="canonical" href="https://gmasson.github.io/lorempage/">
<meta name="Robots" content="all">
<meta name="Rating" content="general">
<meta name="author" content="Gabriel Masson">
<meta name="keywords" content="lorem, lorem ipsum, text, image, placeholder, latim, projects, web, developers, designers, design, layout">
<meta name="description" content="LoremPage is the perfect tool to fill your projects with placeholder text quickly and efficiently. Whether it's for testing layouts, creating prototypes, or filling temporary spaces.">
<title>LoremPage - Fictitious texts and images for layouts and prototypes.</title>
<link href="assets/img/favicon.png" rel="shortcut icon" type="image/x-icon">
<meta name="theme-color" content="#333333">
<meta name="application-name" content="LoremPage">
<meta name="msapplication-TileColor" content="#333333">
<meta name="msapplication-TileImage" content="assets/img/icon.png">
<meta name="msapplication-tooltip" content="LoremPage is the perfect tool to fill your projects with placeholder text quickly and efficiently. Whether it's for testing layouts, creating prototypes, or filling temporary spaces.">
<meta name="msapplication-starturl" content="https://gmasson.github.io/lorempage/">
<meta name="msapplication-navbutton-color" content="#333333">
<link href="assets/img/icon.png" rel="icon" type="image/png">
<link rel="apple-touch-icon" href="assets/img/icon.png">
<meta property="og:title" content="LoremPage">
<meta property="og:description" content="LoremPage is the perfect tool to fill your projects with placeholder text quickly and efficiently. Whether it's for testing layouts, creating prototypes, or filling temporary spaces.">
<meta property="og:url" content="https://gmasson.github.io/lorempage/">
<meta property="og:locale" content="pt_BR">
<meta property="og:type" content="website">
<meta property="og:image" content="assets/img/social.png">
<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "LoremPage - Fictitious texts and images for layouts and prototypes.",
"url": "https://gmasson.github.io/lorempage/",
"description": "LoremPage is the perfect tool to fill your projects with placeholder text quickly and efficiently. Whether it's for testing layouts, creating prototypes, or filling temporary spaces.",
"author": {
"@type": "Person",
"name": "Gabriel Masson",
"url": "https://gmasson.github.io/"
},
"inLanguage": "en",
"keywords": "lorem, lorem ipsum, text, image, placeholder, latim, projects, web, developers, designers, design, layout",
"image": "assets/img/social.png"
}
</script>
</head>
<body>
<header>
<img src="assets/img/logo.png" alt="Logo" loading="lazy">
<p>LoremPage is the perfect tool to fill your projects with placeholder text quickly and efficiently. Whether it's for testing layouts, creating prototypes, or filling temporary spaces.</p>
</header>
<section>
<article>
<p class="text" id="paragraph-1" onclick="copy(this.id)" title="Click to copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis mattis aliquam faucibus purus. Aliquam purus sit amet luctus venenatis lectus magna. Quis vel eros donec ac. Curabitur vitae nunc sed velit dignissim. Aenean et tortor at risus viverra adipiscing. Id velit ut tortor pretium viverra suspendisse potenti nullam. A condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Sit amet luctus venenatis lectus. Aliquam sem et tortor consequat id porta. Feugiat nibh sed pulvinar proin gravida.
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
</svg>
</p>
<p class="text" id="paragraph-2" onclick="copy(this.id)" title="Click to copy">
Vitae purus faucibus ornare suspendisse sed nisi lacus sed. Congue quisque egestas diam in. Tellus id interdum velit laoreet. Condimentum vitae sapien pellentesque habitant morbi tristique senectus. Semper eget duis at tellus at urna. Dolor morbi non arcu risus quis varius quam quisque. Tempus quam pellentesque nec nam aliquam sem et tortor. Felis imperdiet proin fermentum leo. Arcu dui vivamus arcu felis. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Consectetur a erat nam at lectus urna duis. Consectetur purus ut faucibus pulvinar elementum integer enim neque. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Augue neque gravida in fermentum et sollicitudin. Amet tellus cras adipiscing enim. Turpis massa sed elementum tempus egestas sed sed risus. Facilisi cras fermentum odio eu feugiat pretium nibh. Praesent elementum facilisis leo vel fringilla est ullamcorper. Erat velit scelerisque in dictum non consectetur a erat nam. Sodales ut etiam sit amet nisl purus in mollis.
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
</svg>
</p>
<p class="text" id="paragraph-3" onclick="copy(this.id)" title="Click to copy">
Purus non enim praesent elementum facilisis. Vulputate sapien nec sagittis aliquam malesuada. Ac tortor vitae purus faucibus. Arcu vitae elementum curabitur vitae nunc sed. Venenatis cras sed felis eget velit aliquet. Adipiscing bibendum est ultricies integer. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Rutrum quisque non tellus orci ac auctor augue. Cum sociis natoque penatibus et magnis dis parturient. Magna fringilla urna porttitor rhoncus dolor purus non enim. Felis eget nunc lobortis mattis aliquam faucibus purus in massa. Molestie nunc non blandit massa enim nec dui.
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
</svg>
</p>
</article>
</section>
<section>
<h1>Placeholder Images</h1>
<div>
<p>Use these placeholder images in your projects. Click to copy the URL or download the image directly.</p>
<div class="image-gallery">
<div class="image-item" data-size="600x400">
<img src="images/600x400.png" alt="600x400 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">600 × 400</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/600x400.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/600x400.png', '600x400.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="image-item" data-size="800x600">
<img src="images/800x600.png" alt="800x600 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">800 × 600</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/800x600.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/800x600.png', '800x600.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="image-item" data-size="1080x1080">
<img src="images/1080x1080.png" alt="1080x1080 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">1080 × 1080</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/1080x1080.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/1080x1080.png', '1080x1080.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="image-item" data-size="1200x630">
<img src="images/1200x630.png" alt="1200x630 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">1200 × 630</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/1200x630.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/1200x630.png', '1200x630.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="image-item" data-size="1200x675">
<img src="images/1200x675.png" alt="1200x675 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">1200 × 675</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/1200x675.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/1200x675.png', '1200x675.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="image-item" data-size="1280x720">
<img src="images/1280x720.png" alt="1280x720 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">1280 × 720</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/1280x720.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/1280x720.png', '1280x720.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="image-item" data-size="1600x900">
<img src="images/1600x900.png" alt="1600x900 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">1600 × 900</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/1600x900.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/1600x900.png', '1600x900.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="image-item" data-size="1920x1080">
<img src="images/1920x1080.png" alt="1920x1080 placeholder image" loading="lazy">
<div class="image-overlay">
<div class="image-info">
<span class="image-size">1920 × 1080</span>
<div class="image-actions">
<button onclick="copyImageUrl('images/1920x1080.png')" title="Copy URL">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
</svg>
</button>
<button onclick="downloadImage('images/1920x1080.png', '1920x1080.png')" title="Download">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<h1>What is Lorem Ipsum?</h1>
<article>
<p>Lorem Ipsum is a type of placeholder text often used in the printing and publishing industry to fill temporary spaces in a layout or design. It is used as a placeholder for the actual text that will be inserted later. The main characteristic of Lorem Ipsum is that it resembles readable text, but in reality, it is a sequence of words and letters without apparent meaning.</p>
<p>The term "Lorem Ipsum" has origins in classical Latin literature, specifically in the work "De finibus bonorum et malorum" by the author Cicero, dating back to the 1st century BC. The modern version of Lorem Ipsum was popularized in the graphic industry in the 16th century when an unknown printer scrambled the words from a passage of "De finibus" to create a type of sample text.</p>
<p>Due to its semantically null nature, Lorem Ipsum is useful for designers, developers, and editors who need to visualize the layout of a page without being distracted by real content. Additionally, it allows evaluating the text flow and overall appearance of a page without the need for meaningful text.</p>
</article>
</section>
<section>
<h1>Why Use LoremPage?</h1>
<article>
<p>LoremPage provides a comprehensive solution for developers and designers who need quick access to placeholder content. Unlike other Lorem Ipsum generators, our platform offers both text and image placeholders in a single, easy-to-use interface.</p>
<p>Our placeholder images come in the most commonly used dimensions for web development, including social media formats (1200×630), video formats (1920×1080), and square formats (1080×1080) perfect for Instagram posts. Each image can be easily copied via URL or downloaded directly to your computer.</p>
<p>The tool is designed with simplicity in mind - no complex configurations, no sign-ups required, and no watermarks on images. Simply click to copy text or image URLs, making it perfect for rapid prototyping and development workflows.</p>
</article>
</section>
<section>
<h1>Common Use Cases</h1>
<article>
<p>Web developers frequently use LoremPage during the initial stages of website creation when the final content is not yet available. The placeholder text helps visualize how different font sizes, line heights, and paragraph spacing will look in the final design.</p>
<p>Graphic designers use our placeholder images to create mockups and presentations for clients. The variety of aspect ratios ensures compatibility with different design requirements, from website headers to social media posts.</p>
<p>Content management system developers integrate our placeholder content to demonstrate themes and templates. The consistent formatting and neutral appearance of Lorem Ipsum text ensures that the focus remains on the design rather than the content.</p>
<p>Marketing teams use our resources to create wireframes and prototypes for campaigns, allowing stakeholders to review layouts and user flows before final content is produced.</p>
</article>
</section>
<footer>
<p><strong>LoremPage</strong> © 2025</p>
<div class="links">
<a href="https://github.com/gmasson/lorempage/" target="_blank" rel="nofollow" title="Click to access">Collaborate on Github</a>
|
<a href="https://gmasson.github.io/" target="_blank" rel="nofollow" title="Click to access">Developed by Gabriel Masson</a>
</div>
</div>
</footer>
<script src="assets/js/scripts.js"></script>
</body>
</html>