├── .github
    └── FUNDING.yml
├── README.md
├── css
    └── styles.css
├── favicon.ico
├── index.html
└── js
    └── meet-the-ipsums.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [tholman]
2 | custom: ['https://github.com/sponsors/tholman', 'https://www.buymeacoffee.com/tholman', 'https://ko-fi.com/tholman']
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Meet The Ipsums
  2 | 
  3 | =============
  4 | 
  5 | A website to link out to all of the awesome filler text in the world - [meettheipsums.com](http://meettheipsums.com)
  6 | 
  7 | ## To Add an ipsum
  8 | 
  9 | 1. Pull repository
 10 | 2. Add respective code:
 11 | 
 12 | ```html
 13 | <!-- ipsum name here -->
 14 | <li>
 15 |   <div class="title">Ipsum name ipsum</div>
 16 |   <div class="sample" style="color: #unique-hex-color;">
 17 |     A bunch of ipsum text, all in one line, with no line breaks. Probably enouch
 18 |     to fill a good sized screen.
 19 |   </div>
 20 |   <div class="link">
 21 |     <span>full text available at</span>
 22 |     <a href="http://ipsum-link.com/" target="_blank">Ipsum name Ipsum</a>
 23 |   </div>
 24 | </li>
 25 | ```
 26 | 
 27 | 3. Test, make sure everything is working nicely.
 28 | 4. Add link to this README.
 29 | 5. Commit.
 30 | 
 31 | ## Guidelines
 32 | 
 33 | - Ipsum site must have original domain (not a subdomain etc)
 34 | - Would be best if the Ipsum site has as little advertising as possible (Ideally none at all). This just makes the experience nicer.
 35 | - Avoid duplicate Ipsums (we don't need 100 startup ipsums)
 36 | - Avoid really poorly designed sites (lets just keep a little quality to these)
 37 | 
 38 | ## Current Ipsums
 39 | 
 40 | Here is a list of the current ipsums, if you see something broken, please remove it from the index.html and mark it as deleted in this README. The ipsums marked deleted were done so because they went down, or were down over a period of days.
 41 | 
 42 | 0. [Lorem ipsum](https://loremipsum.io/)
 43 | 1. [Developer ipsum](https://developer-ipsum.netlify.app/)
 44 | 2. [Coffee ipsum](http://coffeeipsum.com/)
 45 | 3. [Cat ipsum](http://www.catipsum.com/)
 46 | 4. [Bluth ipsum](http://bluthipsum.com/)
 47 | 5. [Cupcake ipsum](http://www.cupcakeipsum.com/)
 48 | 6. [Corporate ipsum](http://www.cipsum.com/)
 49 | 7. Deleted - [TV ipsum](http://tvipsum.com/?paragraphs=5)
 50 | 8. [Zombie ipsum](http://www.zombieipsum.com/)
 51 | 9. Deleted - [Hipster ipsum](http://hipsteripsum.me/?paras=4&type=hipster-centric)
 52 | 10. [Pommie ipsum](http://www.pommyipsum.com/)
 53 | 11. [Cheese ipsum](http://www.cheeseipsum.co.uk/)
 54 | 12. [Startup ipsum](http://startupsum.com)
 55 | 13. [Gangsta ipsum](http://lorizzle.nl/?feed=1)
 56 | 14. [Samuel L ipsum](http://slipsum.com/)
 57 | 15. [Sagan ipsum](http://saganipsum.com/)
 58 | 16. [Bacon ipsum](http://baconipsum.com/?paras=5&type=all-meat)
 59 | 17. [Skate ipsum](http://skateipsum.com/)
 60 | 18. Deleted - [Lebowskii ipsum](http://www.lebowskiipsum.com/)
 61 | 19. [Pirate ipsum](http://pirateipsum.me/)
 62 | 20. [Vegas ipsum](http://vegasipsum.com/)
 63 | 21. Deleted - [Beer ipsum](http://beeripsum.com/)
 64 | 22. Deleted - [Gag ipsum](http://gagipsum.com/)
 65 | 23. [Tuna ipsum](http://tunaipsum.com/)
 66 | 24. Deleted - [IT Crowd ipsum](http://itcrowdipsum.com/)
 67 | 25. Deleted - [Bogan ipsum](http://www.boganipsum.com/)
 68 | 26. [Monocle ipsum](http://www.monocleipsum.com/)
 69 | 27. [Sheen ipsum](http://vaticanassass.in/)
 70 | 28. Deleted - [Riker ipsum](http://www.rikeripsum.com/)
 71 | 29. Deleted - [Baby ipsum](http://www.babyipsum.com/)
 72 | 30. [Pahu ipsum](http://www.pahu.maori.nz/)
 73 | 31. Deleted - [Halloumi ipsum](http://halloumipsum.com/)
 74 | 32. [Melbourne ipsum](http://www.melbourneipsum.com.au/)
 75 | 33. [Picksum ipsum](http://www.picksumipsum.co.uk/)
 76 | 34. Deleted - [Alien ipsum](http://ancientalienipsum.com/)
 77 | 35. Deleted - [Ed balls ipsum](http://edballsipsum.com/)
 78 | 36. [Metaphor ipsum](http://metaphorpsum.com/)
 79 | 37. [Obama ipsum](http://obamaipsum.com/)
 80 | 38. Deleted - [Jony ipsum](http://jonyipsum.com/)
 81 | 39. Deleted - [Cajun ipsum](http://cajunipsum.com/)
 82 | 40. [Space ipsum](http://spaceipsum.com/)
 83 | 41. Deleted - [Batman ipsum](http://batman-ipsum.com/)
 84 | 42. Deleted - [Designer ipsum](http://www.designeripsum.com/)
 85 | 43. Deleted - [Minion ipsum](http://www.minionsipsum.com/)
 86 | 44. Deleted - [Jamaican ipsum](http://jamaicanipsum.com/)
 87 | 45. [Chiquito ipsum](http://www.chiquitoipsum.com/)
 88 | 46. Deleted - [Savage ipsum](http://www.savageipsum.com/)
 89 | 47. [Ryan Gosling ipsum](http://www.rygo-ipsum.com/)
 90 | 48. Deleted - [Horse Ebooks ipsum](http://horseebooksipsum.com/)
 91 | 49. [Heisenberg ipsum](http://heisenbergipsum.com/)
 92 | 50. Deleted - [Social Good ipsum](http://socialgoodipsum.com/)
 93 | 51. [Doctor Who ipsum](http://doctoripsum.com)
 94 | 52. Deleted - [Tina Belcher ipsum](http://tinaipsum.rocks/)
 95 | 53. [Nietzsche Ipsum](http://nietzsche-ipsum.com/)
 96 | 54. [Forcem Ipsum](http://forcemipsum.com/)
 97 | 55. [Office Ipsum](http://officeipsum.com/)
 98 | 56. [Lorem F'ing Ipsum](http://loremfuckingipsum.com/)
 99 | 57. [Khaled ipsum](http://khaledipsum.com/)
100 | 58. [Dating ipsum](http://laurenhallden.com/datingipsum/)
101 | 59. [Cheeseburger ipsum](http://cheeseburgeripsum.com/)
102 | 60. [Stranger ipsum](http://stranger-ipsum.robertcooper.me/)
103 | 61. [Agency Ipsum](http://ipsum.agency/)
104 | 62. [Godfather Ipsum](https://godfatheripsum.github.io/)
105 | 63. [Wine Ipsum](https://www.wineipsum.com/)
106 | 64. [Wrestling Ipsum](http://www.wrestlingipsum.com/)
107 | 65. [日本語 ipsum](https://nihongoipsum.com/)
108 | 66. [Spiritual Ipsum](http://spiritualipsum.com/)
109 | 67. [Jesus Ipsum](http://jesusipsum.com/)
110 | 68. [Ruhrpott Ipsum](https://ruhrpott-ipsum.de/)
111 | 69. [Various Alphabets Ipsum](https://ipsumtxt.com/)
112 | 
113 | ## License
114 | 
115 | The MIT License (MIT)
116 | Copyright (C) 2014 ~ [Tim Holman](http://tholman.com) & [Claudio Guglieri](http://whydontwetry.com)
117 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * meet-the-ipsums
  3 |  *
  4 |  * MIT licensed
  5 |  * Copyright (C) 2013 Tim Holman, http://tholman.com
  6 |  */
  7 | 
  8 | /*********************************************
  9 |  *
 10 |  *********************************************/
 11 | 
 12 | html, body {
 13 | 	font-weight: normal;
 14 | 	padding: 0px;
 15 | 	margin: 0px;
 16 | }
 17 | 
 18 | * {
 19 | 	-webkit-font-smoothing: antialiased;
 20 | 	-moz-box-sizing: border-box;
 21 | 	box-sizing: border-box;
 22 | }
 23 | 
 24 | header {
 25 | 	font-family: 'Grand Hotel', cursive;
 26 | 	position: relative;
 27 | 	overflow: hidden;
 28 | 	background: #111;
 29 | 	margin-top: 60px;
 30 | 	font-size: 32px;
 31 | 	height: 700px;
 32 | 	width: 100%;
 33 | 	z-index: 2;
 34 | }
 35 | 
 36 | .fixed-title {
 37 | 	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.1);
 38 | 	font-family: 'Grand Hotel', cursive;
 39 | 	
 40 | 	-webkit-backface-visibility: hidden;
 41 | 	-webkit-transform: translateZ(0);
 42 | 	-moz-transform: translateZ(0);
 43 | 	-ms-transform: translateZ(0);
 44 | 	-i-transform: translateZ(0);
 45 | 	transform: translateZ(0);
 46 | 
 47 | 	padding-right: 80px;
 48 | 	padding-left: 80px;
 49 | 	text-align: center;
 50 | 	background: #fff;
 51 | 	line-height: 60px;
 52 | 	font-size: 28px;
 53 | 	position: fixed;
 54 | 	color: #66696a;
 55 | 	height: 60px;
 56 | 	width: 100%;
 57 | 	top: 0px;
 58 | 	left: 0px;
 59 | 	z-index: 3;
 60 | }
 61 | 
 62 | .kerning {
 63 | 	display: inline-block;
 64 | 	margin-left: -1px;
 65 | }
 66 | 
 67 | .heading {
 68 | 	display: inline-block;
 69 | 	text-align: center;
 70 | 	float: left;
 71 | 	width: 100%;
 72 | }
 73 | 
 74 | .heading.translatable {
 75 | 	-webkit-transition: width 500ms;
 76 | 	-moz-transition: width 500ms;
 77 | 	-ms-transition: width 500ms;
 78 | 	-o-transition: width 500ms;
 79 | 	transition: width 500ms;
 80 | }
 81 | 
 82 | .fixed-title.active .heading {
 83 | 	width: 145px !important;
 84 | }
 85 | 
 86 | .share-links {
 87 | 	-webkit-transition: right 500ms;
 88 | 	-moz-transition: right 500ms;
 89 | 	-ms-transition: right 500ms;
 90 | 	-o-transition: right 500ms;
 91 | 	transition: right 500ms;
 92 | 
 93 | 	text-align: right;
 94 | 	width: 600px;
 95 | 
 96 | 	font-family: 'Roboto Slab', serif;
 97 | 	font-size: 16px;
 98 | 	width: 300px;
 99 | 	height: 100%;
100 | 	position: absolute;
101 | 	top: 0px;
102 | 	right: -400px;
103 | }
104 | 
105 | .share-links .twitter-share-button {
106 | 	vertical-align: top;
107 | 	margin-right: 10px;
108 | 	margin-top: 20px;
109 | }
110 | 
111 | .share-links .fb-like iframe {
112 | 	margin-top: 4px;
113 | }
114 | 
115 | .fixed-title.active .share-links {
116 | 	right: 80px;
117 | }
118 | 
119 | article {
120 | 	font-family: 'Roboto Slab', serif;
121 | 	position: absolute;
122 | 	padding: 80px;
123 | 	height: 100%;
124 | 	width: 100%;
125 | 	z-index: 1;
126 | 
127 | 	-webkit-transform: translateX(100%);
128 | 	-moz-transform:    translateX(100%);
129 | 	-ms-transform:     translateX(100%);
130 | 	-o-transform:      translateX(100%);
131 | 	transform:         translateX(100%);
132 | 
133 | 	-webkit-transition: -webkit-transform 700ms, opacity 700ms;
134 | 	-moz-transition: -moz-transform 700ms, opacity 700ms;
135 | 	-ms-transition: -ms-transform 700ms, opacity 700ms;
136 | 	-o-transition: -o-transform 700ms, opacity 700ms;
137 | 	transition: transform 700ms, opacity 700ms;
138 | }
139 | 
140 | article .background svg {
141 | 	display: none;
142 | 	margin-left: -250px;
143 | 	margin-top: -250px;
144 | 	position: absolute;
145 | 	height: 500px;
146 | 	width: 500px;
147 | 	z-index: 1;
148 | 	left: 50%;
149 | 	top: 50%;
150 | }
151 | 
152 | .background path, .background polygon {
153 | 	fill: rgba(255,255,255,0.2);
154 | }
155 | 
156 | article .feature {
157 | 	z-index: 2;
158 | 	margin-bottom: 20px;
159 | 	position: relative;
160 | 	text-align: left;
161 | 	font-weight: 400;
162 | 	font-size: 18px;
163 | 	color: #fff;
164 | }
165 | 
166 | article .text {
167 | 	position: relative;
168 | 	z-index: 2;
169 | 	width: 100%;
170 | 	height: 430px;
171 | 	font-size: 80px;
172 | 	text-align: left;
173 | 	overflow: hidden;
174 | 	font-weight: 200;
175 | 	margin-bottom: 10px;
176 | }
177 | 
178 | article.fade {
179 | 	opacity: 0.3;
180 | 
181 | 	-webkit-transform: translateX(0%);
182 | 	-moz-transform:    translateX(0%);
183 | 	-ms-transform:     translateX(0%);
184 | 	-o-transform:      translateX(0%);
185 | 	transform:         translateX(0%);
186 | }
187 | 
188 | article.active {
189 | 	z-index: 10;
190 | 	opacity: 1;
191 | 	left: 0px;
192 | 
193 | 	-webkit-transform: translateX(0%);
194 | 	-moz-transform:    translateX(0%);
195 | 	-ms-transform:     translateX(0%);
196 | 	-o-transform:      translateX(0%);
197 | 	transform:         translateX(0%);
198 | }
199 | 
200 | .intro {
201 | 	font-weight: 400;
202 | 	font-size: 18px;
203 | 	color: #fff;
204 | }
205 | 
206 | ul {
207 | 	margin-bottom: 700px;
208 | 	margin-top: 0px;
209 | 	padding-top: 10px;
210 | 	background: #fff;
211 | 	z-index: 2;
212 | 	position: relative;
213 | 	font-family: 'Roboto Slab', serif;
214 | 	padding-right: 80px;
215 | 	padding-left: 80px;
216 | 	list-style: none;
217 | }
218 | 
219 | li {
220 | 	border-bottom: 1px solid #e3e3e3;
221 | 	padding-bottom: 35px;
222 | 	padding-top: 35px;
223 | }
224 | 
225 | li:last-child {
226 | 	padding-bottom: 50px;
227 | 	border-bottom: 0px;
228 | }
229 | 
230 | li .title {
231 | 	font-weight: 400;
232 | 	font-size: 18px;
233 | 	color: #333;
234 | }
235 | 
236 | .sample {
237 | 	margin-bottom: 7px;
238 | 	margin-top: 2px;
239 | 	font-size: 44px;
240 | 	color: inherit;
241 | 
242 | 	text-overflow: ellipsis;
243 | 	white-space: nowrap;
244 | 	font-weight: 300;
245 | 	overflow: hidden;
246 | 	height: 65px;
247 | }
248 | 
249 | .link {
250 | 	font-size: 13px;
251 | 	color: #999;
252 | }
253 | 
254 | .options a, .link a {
255 | 
256 | 	-webkit-transition: all 300ms;
257 | 	-moz-transition: all 300ms;
258 | 	-ms-transition: all 300ms;
259 | 	-o-transition: all 300ms;
260 | 	transition: all 300ms;
261 | 
262 | 	border: 1px solid #E0E0E0;
263 | 	text-decoration: none;
264 | 	border-radius: 3px;
265 | 	padding: 4px;
266 | 	padding-right: 8px;
267 | 	padding-left: 8px;
268 | 	margin-left: 5px;
269 | 	font-size: 13px;
270 | 	opacity: 1;
271 | 	color: #333;
272 | }
273 | 
274 | .options a {
275 | 	border-color: inherit;
276 | 	font-size: 14px;
277 | 	color: inherit;
278 | }
279 | 
280 | .link a:hover {
281 | 	border-color: #555;
282 | }
283 | 
284 | .options a:hover {
285 | 	background-color: rgba(255, 255, 255, 0.2);
286 | }
287 | 
288 | 
289 | footer {
290 | 	position: fixed;
291 | 	bottom: 0px;
292 | 	left: 0px;
293 | 	width: 100%;
294 | 	z-index: 1;
295 | 	background: #222425;
296 | 	padding-right: 80px;
297 | 	padding-left: 80px;
298 | 	overflow: auto;
299 | 	height: 720px;
300 | 
301 | 	-webkit-transform: translateZ(0px);
302 | 	-moz-transform: translateZ(0px);
303 | 	-ms-transform: translateZ(0px);
304 | 	-o-transform: translateZ(0px);
305 | 	transform: translateZ(0px);
306 | }
307 | 
308 | .logo {
309 | 	margin-bottom: 20px;
310 | 	text-align: center;
311 | 	color: #fff;
312 | }
313 | 
314 | .tagline {
315 | 	font-family: 'Roboto Slab', serif;
316 | 	font-size: 54px;
317 | 	font-weight: 200;
318 | }
319 | 
320 | .tagline span {
321 | 	color: #E2B45C;
322 | }
323 | 
324 | .logo p {
325 | 	margin-top: 0px;
326 | 	margin-bottom: 20px;
327 | }
328 | 
329 | .contact {
330 | 	font-family: 'Roboto Slab', serif;
331 | 	font-size: 18px;
332 | 	color: #666;
333 | }
334 | 
335 | .contact a {
336 | 	color: #fff;
337 | }
338 | 
339 | .share {
340 | 	font-family: 'Roboto Slab', serif;
341 | 	border-top: 1px solid #666;
342 | 	text-transform: uppercase;
343 | 	text-align: center;
344 | 	font-size: 12px;
345 | 	padding: 40px;
346 | 	height: 100px;
347 | 	color: #666;
348 | 
349 | 	position: fixed;
350 | 	bottom: 0px;
351 | 	padding-left: 80px;
352 | 	padding-right: 80px;
353 | 
354 | 	width: 1000px;
355 | 	left: 50%;
356 | 	margin-left: -500px;
357 | }
358 | 
359 | .share a {
360 | 	color: #fff;
361 | }
362 | 
363 | .devide {
364 | 	margin-right: 10px;
365 | 	margin-left: 10px;
366 | }
367 | 
368 | .twitter-follow-button {
369 | 	margin-bottom: -5px;
370 | }
371 | 
372 | .fb-like span {
373 | 	vertical-align: inherit !important;
374 | }
375 | 
376 | 
377 | 
378 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tholman/meettheipsums/d9075f1f8e3dc5dc05a0abad14124a3b570bffd8/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |     <head>
  4 |         <title> Meet the Ipsums </title>
  5 |         <meta name="description" content="Where all Ipsums come together"/>
  6 |         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7 | 
  8 |         <!-- CSS -->
  9 |         <link href='./css/styles.css' rel='stylesheet'>
 10 |         <link href='https://fonts.googleapis.com/css?family=Grand+Hotel|Roboto+Slab:400,300,700,100' rel='stylesheet' type='text/css'>
 11 | 
 12 |         <!-- META -->
 13 |         <meta property="og:title" content="Meet The Ipsums"/>
 14 |         <meta property="og:url" content="http://meettheipsums.com"/>
 15 |         <meta property="og:description" content="Where all Ipsums come together"/>
 16 |     </head>
 17 |     <body>
 18 | 
 19 |         <div class="fixed-title">
 20 |             <div class="heading">
 21 |                 Meet <span class="kerning"></span> the Ipsums
 22 |             </div>
 23 |             <div class="share-links">
 24 |                 <a href="https://twitter.com/share" class="twitter-share-button" data-text="Meet the Ipsums by @twholman &amp; @claudioguglieri ~" data-align="right">Tweet</a>
 25 |                 <div class="fb-like" data-href="http://meettheipsums.com" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div>
 26 |             </div>
 27 |         </div>
 28 | 
 29 |     	<header>
 30 |             <article class="active" style="background: #FFCC4D; color: #FFF;">
 31 |                 <div class="feature">
 32 |                     Featuring Developer Ipsum
 33 |                 </div>
 34 |                 <div class="text">
 35 |                     Software undergoes beta testing shortly before it’s released. Beta is Latin for “still doesn’t work”.
 36 |                     (Anonymous) Most software today is very much like an Egyptian pyramid with millions of bricks piled on
 37 |                     top of each other, with no structural integrity, but just done by brute force and thousands of slaves.
 38 |                     (Alan Kay) There’s an old story about the person who wished his computer were as easy to use as his
 39 |                     telephone. That wish has come true, since I no longer know how to use my telephone. (Bjarne Stroustrup)
 40 |                     Writing code has a place in the human hierarchy worth somewhere above grave robbing and beneath
 41 |                     managing. (Gerald Weinberg)
 42 |                 </div>
 43 |                 <div class="options">
 44 |                     <span class="intro">Ipsum available at </span><a href="https://developer-ipsum.netlify.app/"
 45 |                         target="_blank">Developer Ipsum</a>
 46 |                 </div>
 47 |             </article>
 48 | 
 49 |             <article class="" style="background: rgb(114, 194, 238); color: rgb(210, 240, 255);">
 50 |                 <div class="feature">
 51 |                     Featuring Cat ipsum
 52 |                 </div>
 53 |                 <div class="text">
 54 |                     Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
 55 |                 </div>
 56 |                 <div class="options">
 57 |                     <span class="intro">Ipsum available at </span><a href="http://www.catipsum.com/"> Cat ipsum </a>
 58 |                 </div>
 59 |             </article>
 60 | 
 61 |             <article class="" style="background: rgb(86, 231, 173); color: rgb(247, 255, 252);">
 62 |                 <div class="feature">
 63 |                     Featuring Tuna ipsum
 64 |                 </div>
 65 |                 <div class="text">
 66 |                     European minnow priapumfish mosshead warbonnet shrimpfish bigscale. Cutlassfish porbeagle shark ricefish walking catfish glassfish Black swallower.
 67 |                 </div>
 68 |                 <div class="options">
 69 |                     <span class="intro">Ipsum available at </span><a href="http://tunaipsum.com/"> Tuna ipsum </a>
 70 |                 </div>
 71 |             </article>
 72 | 
 73 |             <article class="" style="background: #F2B63D; color: #FFF;">
 74 |                 <div class="feature">
 75 |                     Featuring LOTRem Ipsum
 76 |                 </div>
 77 |                 <div class="text">
 78 |                     Boromir's destroy perils Bilbo Baggins regain seems! Wider Treebeard quietly faced hesitate fire-breathing value? Fisherman thinks Gollum's stove call shake taken?
 79 |                 </div>
 80 |                 <div class="options">
 81 |                     <span class="intro">Ipsum available at </span><a href="https://lotremipsum.com/" target="_blank"> LOTRem Ipsum </a>
 82 |                 </div>
 83 |             </article>
 84 | 
 85 |             <article class="" style="background: rgb(207, 70, 70); color: rgb(245, 189, 189);">
 86 |                 <div class="feature">
 87 |                     Featuring Corporate ipsum
 88 |                 </div>
 89 |                 <div class="text">
 90 |                     Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
 91 |                 </div>
 92 |                 <div class="options">
 93 |                     <span class="intro">Ipsum available at </span><a href="http://www.cipsum.com/"> Corporate ipsum </a>
 94 |                 </div>
 95 |             </article>
 96 |     	</header>
 97 | 
 98 |         <section class="links">
 99 | 
100 |             <ul>
101 | 
102 |                 <!-- Lorem -->
103 |                 <li>
104 |                     <div class="title">Lorem ipsum</div>
105 |                     <div class="sample" style="color: #2B2A29;">
106 |                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
107 |                     </div>
108 |                     <div class="link">
109 |                         <span>full text available at</span>
110 |                         <a href="https://loremipsum.io/" target="_blank">Lorem ipsum</a>
111 |                     </div>
112 |                 </li>
113 |                 <!-- Developer Ipsum -->
114 |                 <li>
115 |                     <div class="title">Developer Ipsum</div>
116 |                     <div class="sample" style="color: #FFCC4D;">
117 |                         If debugging is the process of removing software bugs, then programming must be the process of
118 |                         putting them in. (Edsger Dijkstra) Everything that can be invented has been invented. (Charles H.
119 |                         Duell, Commissioner, U.S. Office of Patents, 1899) It’s a curious thing about our industry: not only
120 |                         do we not learn from our mistakes, but we also don’t learn from our successes. (Keith Braithwaite)
121 |                         Before software can be reusable it first has to be usable. (Ralph Johnson)
122 |                     </div>
123 |                     <div class="link">
124 |                         <span>full text available at</span>
125 |                         <a href="https://developer-ipsum.netlify.app/" target="_blank">Developer Ipsum</a>
126 |                     </div>
127 |                 </li>
128 |                 <!-- Godfather ipsum -->
129 |                 <li>
130 |                     <div class="title">Godfather Ipsum</div>
131 |                     <div class="sample" style="color: #cc3200;">
132 |                         Godfather ipsum dolor sit amet. This one time, this one time I'll let you ask me about my affairs. Friends and money - oil and water. Don Corleone, I am honored and grateful that you have invited me to your home on the wedding day of your daughter.
133 |                     </div>
134 |                     <div class="link">
135 |                         <span>full text available at</span>
136 |                         <a href="https://godfatheripsum.github.io/" target="_blank">Godfather ipsum</a>
137 |                     </div>
138 |                 </li>
139 | 
140 |                 <!-- Agency ipsum -->
141 |                 <li>
142 |                     <div class="title">Agency Ipsum</div>
143 |                     <div class="sample" style="color: #ca4f1d;">
144 |                         Execute core competencies so that as an end result, we make users into advocates. Building benchmarking with a goal to create actionable insights. Build awareness yet get buy in. Target relevant and engaging content but target the low hanging fruit.
145 |                     </div>
146 |                     <div class="link">
147 |                         <span>full text available at</span>
148 |                         <a href="http://ipsum.agency/" target="_blank">Agency Ipsum</a>
149 |                     </div>
150 |                 </li>
151 | 
152 |                 <!-- Khaled -->
153 |                 <li>
154 |                     <div class="title">Khaled ipsum</div>
155 |                     <div class="sample" style="color: #E49B46;">
156 |                         Special cloth alert. Always remember in the jungle there's a lot of they in there, after you overcome they, you will make it to paradise. Surround yourself with angels, positive energy, beautiful people, beautiful souls, clean heart, angel. How's business? Boomin.
157 |                     </div>
158 |                     <div class="link">
159 |                         <span>full text available at</span>
160 |                         <a href="http://khaledipsum.com/" target="_blank">Khaled ipsum</a>
161 |                     </div>
162 |                 </li>
163 | 
164 |                 <!-- Coffee -->
165 |                 <li>
166 |                     <div class="title">Coffee ipsum</div>
167 |                     <div class="sample" style="color: #B46318;">
168 |                         Irish skinny, grinder affogato, dark, sweet carajillo, flavour seasonal aroma single origin cream. Percolator, foam, arabica, decaffeinated bar brewed aromatic.
169 |                     </div>
170 |                     <div class="link">
171 |                         <span>full text available at</span>
172 |                         <a href="http://coffeeipsum.com/" target="_blank">Coffee ipsum</a>
173 |                     </div>
174 |                 </li>
175 | 
176 |                 <!-- Cat -->
177 |                 <li>
178 |                     <div class="title">Cat ipsum</div>
179 |                     <div class="sample" style="color: rgb(172, 220, 243);">
180 |                         Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
181 |                     </div>
182 |                     <div class="link">
183 |                         <span>full text available at</span>
184 |                         <a href="http://www.catipsum.com/" target="_blank">Cat ipsum</a>
185 |                     </div>
186 |                 </li>
187 | 
188 |                 <!-- Cheeseburger -->
189 |                 <li>
190 |                     <div class="title">Cheeseburger Ipsum</div>
191 |                     <div class="sample" style="color: #734d2f;">
192 |                         Let us wax poetic about the beauty of the cheeseburger. The flavour gracefully dances across your palate
193 |                     </div>
194 |                     <div class="link">
195 |                         <span>full text available at</span>
196 |                         <a href="http://cheeseburgeripsum.com/" target="_blank">Cheeseburger Ipsum</a>
197 |                     </div>
198 |                 </li>
199 | 
200 |                 <!-- Bluth Ipsum -->
201 |                 <li>
202 |                     <div class="title">Bluth ipsum</div>
203 |                     <div class="sample" style="color: #AE3880;">
204 |                         I'm gonna build me an airport, put my name on it. Why, Michael? So you can fly away from your feelings? I don't care if it takes from now till the end of Shrimpfest.
205 |                     </div>
206 |                     <div class="link">
207 |                         <span>full text available at</span>
208 |                         <a href="http://bluthipsum.com/" target="_blank">Bluth ipsum</a>
209 |                     </div>
210 |                 </li>
211 | 
212 |                 <!-- Cupcake -->
213 |                 <li>
214 |                     <div class="title">Cupcake ipsum</div>
215 |                     <div class="sample" style="color: #E57FE9;">
216 |                         Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
217 |                     </div>
218 |                     <div class="link">
219 |                         <span>full text available at</span>
220 |                         <a href="http://www.cupcakeipsum.com/" target="_blank">Cupcake Ipsum</a>
221 |                     </div>
222 |                 </li>
223 | 
224 |                 <!-- Corporate -->
225 |                 <li>
226 |                     <div class="title">Corporate ipsum</div>
227 |                     <div class="sample" style="color: #815F47;">
228 |                         Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
229 |                     </div>
230 |                     <div class="link">
231 |                         <span>full text available at</span>
232 |                         <a href="http://www.cipsum.com/" target="_blank">Corporate ipsum</a>
233 |                     </div>
234 |                 </li>
235 | 
236 |                 <!-- Zombie -->
237 |                 <li>
238 |                     <div class="title">Zombie ipsum</div>
239 |                     <div class="sample" style="color: #B93A3E;">
240 |                         De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
241 |                     </div>
242 |                     <div class="link">
243 |                         <span>full text available at</span>
244 |                         <a href="http://www.zombieipsum.com/" target="_blank">Zombie ipsum</a>
245 |                     </div>
246 |                 </li>
247 | 
248 |                 <!-- Pommie -->
249 |                 <li>
250 |                     <div class="title">Pommie ipsum</div>
251 |                     <div class="sample" style="color: #AE3880;">
252 |                         Bugger bag egg's old boy willy jolly scrote munta skive pillock, bloody shambles nose rag blummin' scrote narky ever so, lass fork out flabbergasted sod's law penny-dreadful ever so lovely.
253 |                     </div>
254 |                     <div class="link">
255 |                         <span>full text available at</span>
256 |                         <a href="http://www.pommyipsum.com/" target="_blank">Pommy ipsum</a>
257 |                     </div>
258 |                 </li>
259 | 
260 |                 <!-- Cheese -->
261 |                 <li>
262 |                     <div class="title">Cheese ipsum</div>
263 |                     <div class="sample" style="color: #E0CC36;">
264 |                         Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
265 |                     </div>
266 |                     <div class="link">
267 |                         <span>full text available at</span>
268 |                         <a href="http://www.cheeseipsum.co.uk/" target="_blank">Cheese ipsum</a>
269 |                     </div>
270 |                 </li>
271 | 
272 |                 <!-- Startups -->
273 |                 <li>
274 |                     <div class="title">Startupsum</div>
275 |                     <div class="sample" style="color: #4744ba;">
276 |                         Value proposition alpha crowdsource success product management MVP launch party hackathon leverage iPhone analytics prototype innovator pitch.
277 |                     </div>
278 |                     <div class="link">
279 |                         <span>full text available at</span>
280 |                         <a href="http://startupsum.com" target="_blank">Startupsum</a>
281 |                     </div>
282 |                 </li>
283 | 
284 |                 <!-- Gangsta -->
285 |                 <li>
286 |                     <div class="title">Gangsta ipsum</div>
287 |                     <div class="sample" style="color: #9C76B9;">
288 |                         Lorizzle ipsizzle dolizzle pizzle go to hizzle, fo shizzle my nizzle boofron. Fo shizzle my nizzle sapien velizzle, away volutpat, suscipit quizzle, gravida vizzle eget for sure.
289 |                     </div>
290 |                     <div class="link">
291 |                         <span>full text available at</span>
292 |                         <a href="http://lorizzle.nl/?feed=1" target="_blank">Gangsta ipsum</a>
293 |                     </div>
294 |                 </li>
295 | 
296 |                 <!-- Samuel L -->
297 |                 <li>
298 |                     <div class="title">Samuel L ipsum</div>
299 |                     <div class="sample" style="color: #E20000;">
300 |                         Do you see any Teletubbies in here? The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Your bones don't break, mine do.
301 |                     </div>
302 |                     <div class="link">
303 |                         <span>full text available at</span>
304 |                         <a href="http://slipsum.com/" target="_blank">Samuel L ipsum</a>
305 |                     </div>
306 |                 </li>
307 | 
308 |                 <!-- Sagan -->
309 |                 <li>
310 |                     <div class="title">Sagan ipsum</div>
311 |                     <div class="sample" style="color: #799DB1;">
312 |                         Trillion a very small stage in a vast cosmic arena. Cosmic ocean, courage of our questions intelligent beings Flatland consciousness citizens of distant epochs? Decipherment.
313 |                     </div>
314 |                     <div class="link">
315 |                         <span>full text available at</span>
316 |                         <a href="http://saganipsum.com/" target="_blank">Sagan ipsum</a>
317 |                     </div>
318 |                 </li>
319 | 
320 |                 <!-- Bacon -->
321 |                 <li>
322 |                     <div class="title">Bacon ipsum</div>
323 |                     <div class="sample" style="color: #EC696D;">
324 |                         Bacon swine leberkas, ham hock flank beef venison pork belly. Tongue capicola pork chop strip steak ribeye. Sausage short ribs ribeye kielbasa fatback jerky swine corned beef venison.
325 |                     </div>
326 |                     <div class="link">
327 |                         <span>full text available at</span>
328 |                         <a href="http://baconipsum.com/?paras=5&type=all-meat" target="_blank">Bacon ipsum</a>
329 |                     </div>
330 |                 </li>
331 | 
332 |                 <!-- Skate -->
333 |                 <li>
334 |                     <div class="title">Skate ipsum</div>
335 |                     <div class="sample" style="color: #385EAE;">
336 |                         Drop in axle roll-in rail slide noseblunt slide Steve Severin impossible. Darkslide street mute-air bail Independent goofy footed opposite footed. Steps sick lien air hanger.
337 |                     </div>
338 |                     <div class="link">
339 |                         <span>full text available at</span>
340 |                         <a href="http://skateipsum.com/" target="_blank">Skate ipsum</a>
341 |                     </div>
342 |                 </li>
343 | 
344 |                 <!-- Pirate -->
345 |                 <li>
346 |                     <div class="title">Pirate ipsum</div>
347 |                     <div class="sample" style="color: #525353;">
348 |                         Nipperkin run a rig ballast chase Shiver me timbers Spanish Main driver lass six pounders clipper. Nipperkin yawl Spanish Main crimp Cat o'nine tails jib keelhaul topmast.
349 |                     </div>
350 |                     <div class="link">
351 |                         <span>full text available at</span>
352 |                         <a href="http://pirateipsum.me/" target="_blank">Pirate ipsum</a>
353 |                     </div>
354 |                 </li>
355 | 
356 |                 <!-- Vegas -->
357 |                 <li>
358 |                     <div class="title">Vegas ipsum</div>
359 |                     <div class="sample" style="color: #E081DD;">
360 |                         The palms margaritaville shuffle flush score all in bellagio; fifth street treasure island pot insurance caesar's palace chips. Margaritaville loose hit bust pot payoff treasure island?
361 |                     </div>
362 |                     <div class="link">
363 |                         <span>full text available at</span>
364 |                         <a href="http://vegasipsum.com/" target="_blank">Vegas ipsum</a>
365 |                     </div>
366 |                 </li>
367 | 
368 |                 <!-- Tuna -->
369 |                 <li>
370 |                     <div class="title">Tuna ipsum</div>
371 |                     <div class="sample" style="color: rgb(105, 170, 144);">
372 |                         European minnow priapumfish mosshead warbonnet shrimpfish bigscale. Cutlassfish porbeagle shark ricefish walking catfish glassfish Black swallower.
373 |                     </div>
374 |                     <div class="link">
375 |                         <span>full text available at</span>
376 |                         <a href="http://tunaipsum.com/" target="_blank">Tuna ipsum</a>
377 |                     </div>
378 |                 </li>
379 | 
380 |                 <!-- Monocle -->
381 |                 <li>
382 |                     <div class="title">Monocle ipsum</div>
383 |                     <div class="sample" style="color: #BB666D;">
384 |                         Hand-crafted exclusive finest tote bag Ettinger, emerging joy Gaggenau. Melbourne liveable conversation, sophisticated Helsinki smart extraordinary delightful soft power.
385 |                     </div>
386 |                     <div class="link">
387 |                         <span>full text available at</span>
388 |                         <a href="http://www.monocleipsum.com/" target="_blank">Monocle ipsum</a>
389 |                     </div>
390 |                 </li>
391 | 
392 |                 <!-- Charlie Sheen -->
393 |                 <li>
394 |                     <div class="title">Sheen ipsum</div>
395 |                     <div class="sample" style="color: #5AB2D4;">
396 |                         Clearly, someone who believes he is above the law. Well, you've been warned, dude. Bring it.  I am every character in between, save for that little weirdo with his guts strapped in.
397 |                     </div>
398 |                     <div class="link">
399 |                         <span>full text available at</span>
400 |                         <a href="http://vaticanassass.in/" target="_blank">Sheen ipsum</a>
401 |                     </div>
402 |                 </li>
403 | 
404 |                 <!-- Pahu Ipsum -->
405 |                 <li>
406 |                     <div class="title">Pahu ipsum</div>
407 |                     <div class="sample" style="color: #E08857;">
408 |                         Ko te moemoea a Maui kia haere ngatahi ai ratou ko ona tuakana ki te hii ika. I te hokinga mai o ona tuakana ki tatahi, ka kii atu a Maui. Engari, ko te whakautu o ona tuakana ki a ia ano.
409 |                     </div>
410 |                     <div class="link">
411 |                         <span>full text available at</span>
412 |                         <a href="http://www.pahu.maori.nz/" target="_blank">Pahu ipsum</a>
413 |                     </div>
414 |                 </li>
415 | 
416 |                 <!-- Melbourne Ipsum -->
417 |                 <li>
418 |                     <div class="title">Melbourne ipsum</div>
419 |                     <div class="sample" style="color: #4BA4E9;">
420 |                         North melbourne shinboners the city loop, avalon is so not melb trams formula one grand prix footy south of the river, flemington racecourse world's most liveable city.
421 |                     </div>
422 |                     <div class="link">
423 |                         <span>full text available at</span>
424 |                         <a href="http://www.melbourneipsum.com.au/" target="_blank">Melbourne ipsum</a>
425 |                     </div>
426 |                 </li>
427 | 
428 |                 <!-- Picksum Sheen -->
429 |                 <li>
430 |                     <div class="title">Picksum ipsum</div>
431 |                     <div class="sample" style="color: #9B281E;">
432 |                         When a naked man's chasing a woman through an alley with a butcher knife and a hard-on, i figure he's not out collecting for the red cross.
433 |                     </div>
434 |                     <div class="link">
435 |                         <span>full text available at</span>
436 |                         <a href="http://www.picksumipsum.co.uk/" target="_blank">Picksum ipsum</a>
437 |                     </div>
438 |                 </li>
439 | 
440 |                 <!-- Metaphor -->
441 |                 <li>
442 |                     <div class="title">Metaphor ipsum</div>
443 |                     <div class="sample" style="color: #7C817B;">
444 |                         A writer is an eerie plastic. Some assert that they were lost without the unpriced dentist that composed their french. A sailboat is a twelvefold visitor.
445 |                     </div>
446 |                     <div class="link">
447 |                         <span>full text available at</span>
448 |                         <a href="http://metaphorpsum.com" target="_blank">Metaphor ipsum</a>
449 |                     </div>
450 |                 </li>
451 | 
452 |                 <!-- Obama -->
453 |                 <li>
454 |                     <div class="title">Obama ipsum</div>
455 |                     <div class="sample" style="color: rgb(151, 63, 5);">
456 |                         It's a journey that takes us back to our nation's founding, when none other than a UCC church inspired the Boston Tea Party and helped bring an Empire to its knees.
457 |                     </div>
458 |                     <div class="link">
459 |                         <span>full text available at</span>
460 |                         <a href="http://obamaipsum.com/" target="_blank">Obama ipsum</a>
461 |                     </div>
462 |                 </li>
463 | 
464 |                 <li>
465 |                     <div class="title">Stranger Ipsum</div>
466 |                     <div class="sample" style="color: #f61b1b;">
467 |                         If we’re both going crazy, then we’ll go crazy together, right? So, Jonathan, how was the pull-out? Friends don't lie. Mouth-breather.
468 |                     </div>
469 |                     <div class="link">
470 |                         <span>full text available at</span>
471 |                         <a href="http://stranger-ipsum.robertcooper.me/" target="_blank">Stranger Ipsum</a>
472 |                     </div>
473 |                 </li>
474 | 
475 |                 <!-- Space -->
476 |                 <li>
477 |                     <div class="title">Space ipsum</div>
478 |                     <div class="sample" style="color: #3AA3B1;">
479 |                         The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.
480 |                     </div>
481 |                     <div class="link">
482 |                         <span>full text available at</span>
483 |                         <a href="http://spaceipsum.com/" target="_blank">Space ipsum</a>
484 |                     </div>
485 |                 </li>
486 | 
487 |                 <!-- Chiquito -->
488 |                 <li>
489 |                     <div class="title">Chiquito ipsum</div>
490 |                     <div class="sample" style="color: #AED4DB;">
491 |                         Ese pedazo de no puedor a peich no te digo trigo por no llamarte Rodrigor papaar papaar llevame al sircoo papaar papaar pecador.
492 |                     </div>
493 |                     <div class="link">
494 |                         <span>full text available at</span>
495 |                         <a href="http://www.chiquitoipsum.com/" target="_blank">Chiquito Ipsum</a>
496 |                     </div>
497 |                 </li>
498 | 
499 |                 <!-- Gosling -->
500 |                 <li>
501 |                     <div class="title">Ryan Gosling ipsum</div>
502 |                     <div class="sample" style="color: #F3D1B8;">
503 |                         I try not to make to many movies. I was very excited. I think like a girl, I think. I could be fun, if you want. Because for me, they're all me.
504 |                     </div>
505 |                     <div class="link">
506 |                         <span>full text available at</span>
507 |                         <a href="http://www.rygo-ipsum.com/" target="_blank">Ryan Gosling Ipsum</a>
508 |                     </div>
509 |                 </li>
510 | 
511 |                 <!-- heisenberg -->
512 |                 <li>
513 |                     <div class="title">Heisenberg ipsum</div>
514 |                     <div class="sample" style="color: #4796B8;">
515 |                         No! You don't even believe that! Gus has cameras everywhere, please. Listen to yourself! No, he has known everything, all along. Where were you today?
516 |                     </div>
517 |                     <div class="link">
518 |                         <span>full text available at</span>
519 |                         <a href="http://heisenbergipsum.com/" target="_blank">Heisenberg Ipsum</a>
520 |                     </div>
521 |                 </li>
522 | 
523 |                 <!-- Doctor Who -->
524 |                 <li>
525 | 	    			<div class="title">Doctor Who ipsum</div>
526 | 	    			<div class="sample" style="color: #102372;">
527 | 	        			Come along, Pond. Allons-y! Have a jelly baby. Shut up, K-9! Mmmm, what's that m'boy? That's the trouble with regeneration. You quite never know what you're going to get.
528 | 	    			</div>
529 | 	    			<div class="link">
530 | 			 			<span>full text available at</span>
531 | 	        			<a href="http://doctoripsum.com/" target="_blank">Doctor Ipsum</a>
532 | 	    			</div>
533 | 				</li>
534 | 
535 | 				<!-- Nietzsche -->
536 | 				<li>
537 | 				    <div class="title">Nietzsche Ipsum</div>
538 | 				    <div class="sample" style="color: #FF4136;">
539 |                         Noble ultimate pinnacle war disgust enlightenment. Suicide of right right enlightenment sea victorious christianity holiest god ultimate prejudice faith.
540 | 				    </div>
541 | 				    <div class="link">
542 | 				        <span>full text available at</span>
543 | 				        <a href="http://nietzsche-ipsum.com/" target="_blank">Nietzsche Ipsum</a>
544 | 				    </div>
545 | 				</li>
546 | 
547 |                 <!-- Forcem -->
548 |                 <li>
549 |                     <div class="title">Forcem Ipsum</div>
550 |                     <div class="sample" style="color: #444;">
551 |                         I'm not going anywhere. They're going to execute her. Look, a few minutes ago you said you didn't want to just wait here to be captured. Now all you want to do is stay.
552 |                     </div>
553 |                     <div class="link">
554 |                         <span>full text available at</span>
555 |                         <a href="http://forcemipsum.com/" target="_blank">Forcem Ipsum</a>
556 |                     </div>
557 |                 </li>
558 | 
559 |                 <!-- Office Ipsum -->
560 |                 <li>
561 |                     <div class="title">Office Ipsum</div>
562 |                     <div class="sample" style="color: rgb(237, 27, 36);">
563 |                         Make it pop at the end of the day put a stake in the ground. Game-plan we don't want to boil the ocean nor curate, but closer to the metal out of scope, for re-inventing the wheel, but horsehead offer.
564 |                     </div>
565 |                     <div class="link">
566 |                         <span>full text available at</span>
567 |                         <a href="http://officeipsum.com/" target="_blank">Office Ipsum</a>
568 |                     </div>
569 |                 </li>
570 | 
571 |                 <!-- Fucking Ipsum -->
572 |                 <li>
573 |                     <div class="title">Lorem Fucking Ipsum</div>
574 |                     <div class="sample" style="color: rgb(206, 43, 145);">
575 |                         Never let your guard down by thinking you're fucking good enough. You won't get good at anything by doing it a lot fucking aimlessly. Someday is not a fucking day of the week.
576 |                     </div>
577 |                     <div class="link">
578 |                         <span>full text available at</span>
579 |                         <a href="http://loremfuckingipsum.com/" target="_blank">Lorem Fucking Ipsum</a>
580 |                     </div>
581 |                 </li>
582 | 
583 |                 <!-- Online Dating Ipsum -->
584 |                 <li>
585 |                     <div class="title">Online Dating Ipsum</div>
586 |                     <div class="sample" style="color:#2855A2;">
587 |                         My lizard tongue there's no such thing as a typical Friday night I despise performance art.  I'm a nice guy Libertarian please post your real pictures snapchat I despise.
588 |                     </div>
589 |                     <div class="link">
590 |                         <span>full text available at</span>
591 |                         <a href="http://laurenhallden.com/datingipsum/" target="_blank">Online Dating Ipsum</a>
592 |                     </div>
593 |                 </li>
594 | 
595 | 		<!-- Wine Ipsum -->
596 |                 <li>
597 |                     <div class="title">Wine Ipsum</div>
598 |                     <div class="sample" style="color: #cf4646;">
599 |                         Hint: Sangiovese is a four syllable word; maybe more if you're drunk. Lorem vino, dollar store blend. An inimitable flavor is found in barrels. Tomato and cherry flavors nestle comfortably together with notes of leather and clay in Sangiovese. Boxes, while repugnant, hold viable vinos. Pinot noir is French for "black pinecone," a description of the grape's appearance.
600 |                     </div>
601 |                     <div class="link">
602 |                         <span>full text available at</span>
603 |                         <a href="https://www.wineipsum.com" target="_blank">
604 |                             Wine Ipsum
605 |                         </a>
606 |                     </div>
607 |                 </li>
608 | 
609 |                 <!-- Wrestling Ipsum -->
610 |                 <li>
611 |                     <div class="title">Wrestling Ipsum</div>
612 |                     <div class="sample" style="color: #ee4949;">
613 |                         Everybody's got a price for the Million Dollar Man! Whatcha gonna do when Hulkamania runs wild on you! If you smell, what The Rock is cooking!
614 |                     </div>
615 |                     <div class="link">
616 |                         <span>full text available at</span>
617 |                         <a href="http://www.wrestlingipsum.com/" target="_blank">Wrestling Ipsum</a>
618 |                     </div>
619 |                 </li>
620 | 
621 |                 <!-- 日本語ipsum  -->
622 |                 <li>
623 |                     <div class="title">日本語 ipsum</div>
624 |                     <div class="sample" style="color: #D97373;">
625 |                         イルカは人間に次いで最も知能が高く、やがては彼らとの対話も夢ではないと考えている科学者もいる。 いろいろな意味で、正直が最善の策であることは言うまでもない。 イメージはマスコミの情報に形成される。 学校まで１０分で歩いて行ける。 いままで誰もその山頂に到達できていない。 １９８４年の８月、私は仕事でたまたま沖縄に行く事になった。 誰にでも長所と短所がある。 彼の話はあまりにも馬鹿げていたので誰も信じなかった。 ああいう洗練された人々の中で、自分はまったく場違いな気がした。 あなたは大変上手にフランス語が話せる。私もあなたと同じくらい上手に話すことができればよいのに。
626 |                     </div>
627 |                     <div class="link">
628 |                         <span>full text available at</span>
629 |                         <a href="https://nihongoipsum.com/" target="_blank">日本語 ipsum</a>
630 |                     </div>
631 |                 </li>
632 | 
633 |                 <!-- LOTRem Ipsum -->
634 |                 <li>
635 |                     <div class="title">LOTRem Ipsum</div>
636 |                     <div class="sample" style="color: #F2B63D;">
637 |                         Boromir's destroy perils Bilbo Baggins regain seems! Wider Treebeard quietly faced hesitate fire-breathing value?
638 |                     </div>
639 |                     <div class="link">
640 |                         <span>full text available at</span>
641 |                         <a href="https://lotremipsum.com/" target="_blank">LOTRem Ipsum</a>
642 |                     </div>
643 |                 </li>
644 | 
645 |                 <!-- Spiritual Ipsum -->
646 |                 <li>
647 |                     <div class="title">Spiritual Ipsum</div>
648 |                     <div class="sample" style="color: #4796B9;">
649 |                         Spiritual ipsum dolor amet bells compassion divination practitioner. Chakra clearing angels fibonacci Light Worker joy.
650 |                     </div>
651 |                     <div class="link">
652 |                         <span>full text available at</span>
653 |                         <a href="https://spiritualipsum.com/" target="_blank">Spiritual Ipsum</a>
654 |                     </div>
655 |                 </li>
656 | 
657 |                 <!-- Jesus Ipsum -->
658 |                 <li>
659 |                     <div class="title">Jesus Ipsum</div>
660 |                     <div class="sample" style="color: #4796B9;">
661 |                         I am the way and the truth and the life. genesis repentance gospel Sermon on the Mount Lord rejoice.
662 |                     </div>
663 |                     <div class="link">
664 |                         <span>full text available at</span>
665 |                         <a href="https://jesusipsum.com/" target="_blank">Jesus Ipsum</a>
666 |                     </div>
667 |                 </li>
668 | 
669 |                 <!-- Ruhrpott Ipsum -->
670 |                 <li>
671 |                     <div class="title">Ruhrpott Ipsum</div>
672 |                     <div class="sample" style="color:  #efab00;">
673 |                         Weisse wat? Komm annen Tisch, gleich gibbet Essen. Und mach mir keine Fissematenten! Ich hab Dir ne Kniffte mitgebracht. Von mir aus kannste auch bis Pussemuckel fahren.
674 |                     </div>
675 |                     <div class="link">
676 |                         <span>full text available at</span>
677 |                         <a href="https://ruhrpott-ipsum.de/" target="_blank">Ruhrpott Ipsum</a>
678 |                     </div>
679 |                 </li>
680 | 
681 |                 <!-- Ipsumtxt -->
682 |                 <li>
683 |                     <div class="title">Various Alphabets Ipsum</div>
684 |                     <div class="sample" style="color: #FF4136;">
685 |                         Κύκλωπα, τ' όνομά μου θες ; وها أنت قد خلَّصتني. अफसोस, उस वक्त मैं यहाँ न था। Com la princessa véu que Tirant se n'anava, cridà a Diafebus. И все было исправно, кроме обуви.
686 |                     </div>
687 |                     <div class="link">
688 |                         <span>full text available at</span>
689 |                         <a href="https://ipsumtxt.com" target="_blank">Ipsumtxt</a>
690 |                     </div>
691 |                 </li>
692 |                 
693 |             </ul>
694 | 
695 |         </section>
696 | 
697 |         <footer>
698 |             <div class="logo">
699 |                 <p class="tagline">
700 |                     Where all ipsums <span>come together</span>
701 |                 </p>
702 |                 <p class="contact">
703 |                     Have we missed your favorite ipsums? Send it through to
704 |                     <a href="mailto:timothy.w.holman@gmail.com?subject=Another%20ipsum" target="_blank"> timothy.w.holman@gmail.com </a>
705 |                 </p>
706 |             </div>
707 |             <div class="share">
708 |                 Made for fun by <a href="http://tholman.com" target="_blank"> Tim Holman</a> and <a href="http://www.whydontwetry.com" target="_blank"> Claudio Guglieri</a>
709 |                 <span class="devide">-</span>
710 |                 <a href="https://twitter.com/twholman" class="twitter-follow-button" data-show-count="false">Follow @twholman</a>
711 |                 <a href="https://twitter.com/claudioguglieri" class="twitter-follow-button" data-show-count="false">Follow @claudioguglieri</a>
712 |             </div>
713 |         </footer>
714 | 
715 |         <!-- JS -->
716 |         <script src='js/meet-the-ipsums.js'></script>
717 | 
718 |         <!-- Twitter -->
719 |         <script>
720 |             !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
721 |         </script>
722 | 
723 |         <!-- Facebook -->
724 |         <div id="fb-root"></div>
725 |         <script>(function(d, s, id) {
726 |             var js, fjs = d.getElementsByTagName(s)[0];
727 |             if (d.getElementById(id)) return;
728 |             js = d.createElement(s); js.id = id;
729 |             js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
730 |             fjs.parentNode.insertBefore(js, fjs);
731 |             }(document, 'script', 'facebook-jssdk'));
732 |         </script>
733 | 
734 |         <!-- Analytics -->
735 |         <script>
736 |             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
737 |             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
738 |             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
739 |             })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
740 | 
741 |             ga('create', 'UA-42405935-1', 'meettheipsums.com');
742 |             ga('send', 'pageview');
743 |         </script>
744 |     </body>
745 | </html>
746 | 


--------------------------------------------------------------------------------
/js/meet-the-ipsums.js:
--------------------------------------------------------------------------------
  1 | /* 
  2 |  *  Meet The Ipsums
  3 |  */
  4 | 
  5 | /* 
  6 |  *  Cache Elements;
  7 |  */
  8 | 
  9 | var doc = document.documentElement, body = document.body;
 10 | 
 11 | 
 12 | var header = document.querySelector( '.fixed-title' );
 13 | var headerContainer = document.querySelector( '.heading' );
 14 | 
 15 | var footer = document.querySelector( 'footer' );
 16 | var list = document.querySelector( 'ul' );
 17 | 
 18 | var carouselElements = document.querySelectorAll( 'article' );
 19 | var currentSlide = 0;
 20 | var animationTime = 750;
 21 | 
 22 | headerContainer.className = "heading translatable";
 23 | 
 24 | 
 25 | /* 
 26 |  *  Scroll Logic
 27 |  */
 28 | 
 29 | var active = false;
 30 | var lastElement, nextElement;
 31 | window.addEventListener( 'scroll', onScroll, false );
 32 | 
 33 | function onScroll( event ) {
 34 | 
 35 | 	top = ( doc && doc.scrollTop  || body && body.scrollTop  || 0 );
 36 | 
 37 | 	if ( active === false && (top.scrollY > 0 || top > 0) ) {
 38 | 
 39 | 		header.className = 'fixed-title active';
 40 | 		active = true;
 41 | 
 42 | 	} else if ( top.scrollY === 0 || top ===0 ) {
 43 | 		active = false;
 44 | 		header.className = 'fixed-title';
 45 | 	}
 46 | }
 47 | 
 48 | /* 
 49 |  *  Sizes
 50 |  */
 51 | 
 52 | window.addEventListener( 'resize', onResize, false );
 53 | 
 54 | function onResize( event ) {
 55 | 	var height = window.innerHeight;
 56 | 
 57 | 	headerContainer.style.width = window.innerWidth - 160 + "px";
 58 | 
 59 | 	footer.style.paddingTop = ((height / 2) - 90) + "px";
 60 | 	footer.style.height = height + "px";
 61 | 
 62 | 	list.style.marginBottom = height + "px";
 63 | 
 64 | 	console.log( "hello?" );
 65 | }
 66 | 
 67 | onResize();
 68 | 
 69 | /* 
 70 |  *  Carousel
 71 |  */
 72 | 
 73 | function updateCarousel() {
 74 | 
 75 | 	lastElement = currentSlide;
 76 | 
 77 | 	carouselElements[currentSlide].className = "fade";
 78 | 	
 79 | 	var execute = function() {
 80 | 
 81 | 		var localCurrentSlide = currentSlide;
 82 | 		
 83 | 		return function() {
 84 | 			carouselElements[localCurrentSlide].className = "";	
 85 | 		}
 86 | 	}();
 87 | 	
 88 | 	currentSlide++;
 89 | 	if (currentSlide == (carouselElements.length)) {
 90 | 		currentSlide = 0;
 91 | 	}
 92 | 
 93 | 	carouselElements[currentSlide].className = "active";
 94 | 
 95 | 	setTimeout( function() {
 96 | 		execute();
 97 | 	}, animationTime);
 98 | }
 99 | 
100 | setInterval( updateCarousel, 6000 );


--------------------------------------------------------------------------------