forked from plistingart/Node_ComIT
-
Notifications
You must be signed in to change notification settings - Fork 10
Expand file tree
/
Copy pathfixed.html
More file actions
348 lines (346 loc) · 19.9 KB
/
fixed.html
File metadata and controls
348 lines (346 loc) · 19.9 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
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html>
<head>
<title>Learning CSS</title>
<style>
body {
margin: 0;
padding: 0 50px 0 250px;
background: linear-gradient(180deg, #ddd, #111);
}
div {
text-align: justify;
margin-bottom: 20px;
border: 1px solid blue;
}
.fixed {
position: fixed;
top: 20px;
left: 20px;
border: 1px solid #444;
background-color: #ccc;
color: #444;
padding: 50px;
}
</style>
</head>
<body>
<div class="fixed">Fixed Content</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
malesuada sapien, eu aliquet ex dignissim et. In pharetra vel mi ac
suscipit. Sed ac urna nec nibh sollicitudin commodo id ac mi. Sed vehicula
sapien dolor, vel facilisis turpis pellentesque a. Morbi tempus risus id
odio dignissim, non ultricies magna pretium. Nulla facilisi. Nulla erat
eros, tristique a ipsum at, sollicitudin consectetur purus. Etiam cursus
nulla non orci molestie cursus. Aliquam iaculis ante eget sapien tempor
molestie. Phasellus ut porta metus. Sed bibendum augue vitae aliquet
placerat. Nam enim mauris, porttitor facilisis lacinia eu, tristique quis
ex.
</div>
<div>
Nulla rutrum posuere quam a imperdiet. Nulla facilisi. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque feugiat ipsum eu elit dapibus, sit amet tempor arcu
condimentum. Curabitur pharetra tellus nisl. Cras in fermentum diam. Cras
dignissim rhoncus dolor, a ornare ante iaculis non. Nunc tristique ipsum
vel suscipit vestibulum. Nam diam mauris, aliquam et pretium sed,
convallis quis diam. Cras porta venenatis mi nec dignissim. Suspendisse at
arcu fermentum, accumsan dolor in, congue nisl. Mauris faucibus, diam
molestie commodo tempus, orci dui ullamcorper magna, sed ullamcorper felis
ante accumsan sapien. Maecenas dapibus lorem non odio ultricies
consectetur.
</div>
<div>
Sed iaculis ligula vel fringilla pellentesque. Donec sed mattis purus.
Integer urna dui, euismod ut velit id, semper pretium nisl. Mauris ut diam
et diam viverra consectetur ut sit amet est. Phasellus pharetra nisi ut
lacinia convallis. Morbi blandit sapien ut metus ultrices, nec finibus
nisl hendrerit. Suspendisse rhoncus tincidunt arcu a sollicitudin. Sed
tincidunt nisi quam, at cursus nunc convallis sit amet. Duis commodo orci
magna, efficitur elementum augue faucibus ut. Fusce sit amet nibh
fringilla, elementum lectus sed, dignissim nulla. Proin auctor malesuada
libero, at luctus lorem condimentum vel. Proin varius orci urna, vel
finibus lacus viverra non. Morbi ultrices ultricies augue et malesuada.
Mauris consectetur magna ac cursus eleifend. Sed scelerisque est nec dolor
sagittis suscipit.
</div>
<div>
Nunc ut leo vel lectus feugiat gravida. Mauris id porttitor tellus, et
euismod sapien. Nam nec mi nec justo porta elementum. Vestibulum id magna
non neque pellentesque tincidunt. Etiam eget scelerisque odio. Nam nulla
mauris, hendrerit imperdiet gravida eu, euismod in magna. Sed finibus ex
eget arcu pharetra hendrerit. Vivamus bibendum sapien nec dictum
hendrerit. Praesent molestie cursus leo in condimentum.
</div>
<div>
Etiam elementum ligula a ante aliquam, quis ullamcorper risus vehicula.
Nam sit amet aliquet nunc. Nam commodo commodo molestie. Quisque sed purus
non metus venenatis placerat. Integer dapibus quis lacus sed molestie. Nam
auctor at augue et commodo. Quisque venenatis lacus at lorem rutrum
faucibus. Vestibulum ut augue vitae nisl egestas congue. Nunc vitae elit
nibh. Vivamus sem velit, posuere viverra tellus in, luctus pretium nunc.
</div>
<div>
Etiam semper finibus finibus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nunc sollicitudin sed
est vitae ornare. Suspendisse rhoncus non nisl et efficitur. Nulla
malesuada sapien sit amet erat efficitur, vel luctus massa lacinia.
Aliquam at nisl eget nisl facilisis blandit. Donec gravida elit in purus
sodales sollicitudin. Maecenas et ligula non odio pulvinar vestibulum in
sed ligula. Aliquam tincidunt ornare malesuada. Maecenas elit arcu, tempor
a facilisis in, malesuada sed quam. Etiam lectus est, egestas pulvinar
imperdiet id, dictum at orci. Nulla vestibulum ex vitae tortor volutpat
auctor. Pellentesque accumsan mauris vel lacus posuere suscipit. Quisque
vel ante congue justo placerat pulvinar. Morbi suscipit nulla ut tellus
sodales ornare.
</div>
<div>
Praesent pulvinar, libero eget gravida molestie, velit arcu finibus erat,
eu pellentesque odio justo ut turpis. Vivamus nec rutrum risus, at
eleifend urna. Suspendisse at enim posuere, vehicula justo vel, tincidunt
dui. Proin porttitor, dui et sodales vehicula, elit nisl euismod justo,
sed sollicitudin dolor nibh at risus. Sed porttitor vulputate feugiat.
Aenean vitae ex arcu. Phasellus nisi urna, sodales eu est et, ornare
sollicitudin elit. Donec viverra lectus a neque tristique, tincidunt
laoreet elit imperdiet. Nulla id odio nec urna tempor molestie. Vestibulum
sagittis, purus et euismod suscipit, dui nibh viverra sapien, ut eleifend
nulla erat sed arcu. Sed nibh lorem, placerat nec ligula non, maximus
gravida mi. Duis tellus lorem, bibendum at ex vitae, mattis cursus felis.
</div>
<div>
Proin hendrerit ac enim id rutrum. Vestibulum auctor arcu at mollis
vehicula. Aliquam vitae diam id ligula laoreet posuere. Aliquam vel est eu
lectus vulputate facilisis. Pellentesque id risus ut leo rutrum interdum
non at massa. Suspendisse molestie fermentum condimentum. Morbi vel mattis
velit. Quisque libero dui, viverra feugiat metus eu, efficitur convallis
diam. Curabitur consequat ex vel eleifend sagittis. Praesent efficitur
nulla quis turpis posuere faucibus. Phasellus ut nisl vel metus feugiat
condimentum. Etiam in urna in leo posuere mattis. Ut ut massa at lacus
suscipit interdum vitae vel mi.
</div>
<div>
In vel magna orci. Vestibulum tincidunt leo tempor consectetur consequat.
Integer nulla turpis, viverra vel justo euismod, elementum iaculis urna.
Mauris ac lobortis felis. Curabitur gravida turpis leo, non eleifend arcu
commodo nec. Vestibulum ornare diam eu nibh commodo, consequat ornare
libero egestas. Nam feugiat convallis purus, quis pulvinar dolor commodo
sit amet. Phasellus suscipit nisi sit amet bibendum congue.
</div>
<div>
Vestibulum in pulvinar diam. Integer consequat bibendum turpis, nec dictum
dolor ultricies semper. Vestibulum condimentum egestas ex, ac gravida odio
convallis mattis. Mauris imperdiet massa et urna rutrum pulvinar. Morbi
quis semper lorem, non lobortis nisl. Sed blandit lobortis mauris sed
consectetur. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Curabitur dictum leo lorem, non interdum
odio rutrum at. Proin nec cursus massa. Praesent placerat facilisis erat
quis euismod. Nulla sed dictum mi. Aliquam luctus aliquet dictum. Ut
interdum fringilla erat, eu feugiat dui ullamcorper vulputate. Maecenas
maximus eget quam sed cursus.
</div>
<div>
Maecenas efficitur vel augue ut porttitor. Quisque vitae eros at massa
luctus condimentum. Donec molestie ut risus in porttitor. Integer tempor
quam vel tempus ornare. Nulla congue velit et fringilla efficitur. Morbi a
purus ac ligula rhoncus pharetra. Sed posuere turpis et nunc rutrum, nec
porttitor nisi vestibulum. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Curabitur libero quam,
sollicitudin et dui nec, rhoncus bibendum ante.
</div>
<div>
Ut condimentum dolor quis consectetur euismod. Nulla eget lacus tincidunt,
mollis turpis sit amet, laoreet ipsum. Donec leo odio, tristique gravida
convallis at, vehicula eu magna. Nunc id finibus lectus. Pellentesque
accumsan odio eu sagittis finibus. Etiam dapibus, tortor et eleifend
scelerisque, turpis leo sodales eros, vel vulputate urna neque non magna.
Vivamus dignissim, ligula nec mollis dictum, turpis felis dapibus justo,
in ornare nisi sapien at purus. Morbi ut purus felis. Mauris quis felis in
ex suscipit ullamcorper eget et tortor.
</div>
<div>
Morbi condimentum sem in viverra ullamcorper. Suspendisse hendrerit velit
leo, eget scelerisque magna elementum in. Ut dignissim, arcu vel fermentum
tincidunt, risus lectus faucibus enim, id posuere libero leo sed tortor.
Donec rhoncus egestas sagittis. Proin in lorem egestas, malesuada enim
vitae, vulputate purus. Quisque scelerisque nisi mauris, vitae vestibulum
ex pretium ac. Maecenas eget enim dui. Etiam in ex mattis, sollicitudin
massa sit amet, tempus mauris. Duis vitae nulla ante. Mauris sagittis
risus at mi molestie ornare. Donec auctor laoreet mi, id sollicitudin
justo rhoncus ac.
</div>
<div>
Suspendisse sit amet metus sodales, volutpat sem at, posuere magna. Sed
vehicula turpis eu augue facilisis, id luctus lorem molestie. Praesent et
erat velit. Quisque ullamcorper viverra tortor, eget semper erat ornare
id. Suspendisse dignissim elit eu erat scelerisque, sed varius magna
tincidunt. Nulla eget mollis ex, rhoncus mollis erat. Proin ut luctus
augue, convallis blandit mi.
</div>
<div>
In vitae orci et risus congue interdum. Vestibulum eget elit varius,
finibus eros non, ullamcorper turpis. Cras ac venenatis eros, eget rhoncus
augue. Donec finibus ornare mauris ut condimentum. Proin vel dolor nec
tortor dictum commodo sed ultricies risus. Vivamus volutpat ligula et
feugiat pretium. Suspendisse blandit nunc orci, sit amet tincidunt mauris
tincidunt id. Duis ut scelerisque erat, tempor cursus orci. Fusce bibendum
ultrices nisl, a pellentesque elit ultricies sit amet. In eu tellus eget
metus bibendum dignissim. Nulla vel diam sit amet urna dictum pharetra.
Nulla arcu ligula, euismod non augue a, eleifend lacinia velit. Donec urna
magna, malesuada ut mollis non, tempus at libero. Morbi finibus, nibh eu
malesuada bibendum, nunc ipsum gravida tortor, dictum ornare sem lacus ut
mi. Curabitur sagittis venenatis risus, hendrerit imperdiet ligula.
</div>
<div>
Curabitur at arcu maximus, facilisis libero tempus, feugiat neque. Morbi
urna massa, viverra scelerisque leo suscipit, sagittis auctor quam.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Suspendisse pellentesque leo lorem, at vulputate lacus
suscipit vel. Vestibulum at facilisis nisi. Aenean fringilla risus sed
eros porttitor fermentum. Aenean semper enim id pharetra molestie. Sed
iaculis ex arcu. Duis nunc dolor, ultricies at odio blandit, pellentesque
aliquet ligula.
</div>
<div>
Sed est velit, luctus eget nunc at, ultricies euismod justo. Vestibulum
iaculis nec enim a ullamcorper. Donec cursus nec turpis a mollis. Maecenas
viverra nibh velit, non porta arcu facilisis et. Sed hendrerit imperdiet
nisl id dignissim. Ut accumsan nulla enim, id egestas risus molestie sit
amet. Integer quis vestibulum quam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Etiam vehicula
mauris dolor, consectetur iaculis sapien dignissim ut.
</div>
<div>
Nam tristique dapibus justo id aliquet. In hac habitasse platea dictumst.
Etiam tristique enim vitae pretium scelerisque. Aenean metus dolor, rutrum
ac dolor fringilla, sagittis hendrerit justo. Nulla eros elit, cursus vel
tempor a, consequat elementum diam. Etiam tincidunt ultrices dui, quis
fringilla sem tempus at. Donec neque mi, cursus id nisl ut, laoreet
efficitur orci. Vivamus sagittis suscipit ligula, at feugiat nisi
imperdiet et. In vestibulum sit amet eros rhoncus rutrum. Aenean gravida,
sapien at gravida imperdiet, lacus massa gravida mauris, id gravida leo
diam luctus elit. Curabitur id consequat diam. Aenean eleifend orci a quam
semper pharetra.
</div>
<div>
Curabitur dignissim, massa vitae lobortis ornare, velit tortor scelerisque
odio, id ornare dui risus ut tellus. Sed vulputate dolor nec blandit
vehicula. Phasellus efficitur purus eu vulputate pharetra. Praesent tellus
tellus, laoreet id volutpat vitae, ullamcorper at dui. Nullam ultrices
facilisis tempus. Nullam vitae orci lobortis mauris fringilla eleifend vel
sed lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
sed lacinia eros. Quisque molestie vitae risus eu aliquam. Sed non tellus
lectus. Suspendisse malesuada lectus sed vehicula efficitur. Cras pretium
urna ut nulla lobortis, et pharetra sem gravida. Nam a massa et diam
ornare volutpat id sed leo.
</div>
<div>
Integer vel accumsan metus. Pellentesque odio felis, efficitur sed velit
nec, fringilla maximus tortor. Donec augue tortor, finibus sed mattis nec,
malesuada in elit. Etiam id sem mi. Nam quis cursus nunc, non facilisis
erat. Praesent vitae ex molestie urna sagittis hendrerit. Aenean ex urna,
porttitor in vulputate at, rutrum ut ante. Vivamus quis pharetra ipsum, at
facilisis neque. Nulla facilisi. Quisque mattis et urna a molestie. Cras
fringilla varius ligula id pretium. Cras placerat purus nec lacus maximus
sodales. Donec aliquet felis nec enim gravida, sed tincidunt sem rhoncus.
Donec vel laoreet lectus. Ut in mi et est hendrerit dapibus in ac odio.
</div>
<div>
Ut condimentum dolor quis consectetur euismod. Nulla eget lacus tincidunt,
mollis turpis sit amet, laoreet ipsum. Donec leo odio, tristique gravida
convallis at, vehicula eu magna. Nunc id finibus lectus. Pellentesque
accumsan odio eu sagittis finibus. Etiam dapibus, tortor et eleifend
scelerisque, turpis leo sodales eros, vel vulputate urna neque non magna.
Vivamus dignissim, ligula nec mollis dictum, turpis felis dapibus justo,
in ornare nisi sapien at purus. Morbi ut purus felis. Mauris quis felis in
ex suscipit ullamcorper eget et tortor.
</div>
<div>
Morbi condimentum sem in viverra ullamcorper. Suspendisse hendrerit velit
leo, eget scelerisque magna elementum in. Ut dignissim, arcu vel fermentum
tincidunt, risus lectus faucibus enim, id posuere libero leo sed tortor.
Donec rhoncus egestas sagittis. Proin in lorem egestas, malesuada enim
vitae, vulputate purus. Quisque scelerisque nisi mauris, vitae vestibulum
ex pretium ac. Maecenas eget enim dui. Etiam in ex mattis, sollicitudin
massa sit amet, tempus mauris. Duis vitae nulla ante. Mauris sagittis
risus at mi molestie ornare. Donec auctor laoreet mi, id sollicitudin
justo rhoncus ac.
</div>
<div>
Suspendisse sit amet metus sodales, volutpat sem at, posuere magna. Sed
vehicula turpis eu augue facilisis, id luctus lorem molestie. Praesent et
erat velit. Quisque ullamcorper viverra tortor, eget semper erat ornare
id. Suspendisse dignissim elit eu erat scelerisque, sed varius magna
tincidunt. Nulla eget mollis ex, rhoncus mollis erat. Proin ut luctus
augue, convallis blandit mi.
</div>
<div>
In vitae orci et risus congue interdum. Vestibulum eget elit varius,
finibus eros non, ullamcorper turpis. Cras ac venenatis eros, eget rhoncus
augue. Donec finibus ornare mauris ut condimentum. Proin vel dolor nec
tortor dictum commodo sed ultricies risus. Vivamus volutpat ligula et
feugiat pretium. Suspendisse blandit nunc orci, sit amet tincidunt mauris
tincidunt id. Duis ut scelerisque erat, tempor cursus orci. Fusce bibendum
ultrices nisl, a pellentesque elit ultricies sit amet. In eu tellus eget
metus bibendum dignissim. Nulla vel diam sit amet urna dictum pharetra.
Nulla arcu ligula, euismod non augue a, eleifend lacinia velit. Donec urna
magna, malesuada ut mollis non, tempus at libero. Morbi finibus, nibh eu
malesuada bibendum, nunc ipsum gravida tortor, dictum ornare sem lacus ut
mi. Curabitur sagittis venenatis risus, hendrerit imperdiet ligula.
</div>
<div>
Curabitur at arcu maximus, facilisis libero tempus, feugiat neque. Morbi
urna massa, viverra scelerisque leo suscipit, sagittis auctor quam.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Suspendisse pellentesque leo lorem, at vulputate lacus
suscipit vel. Vestibulum at facilisis nisi. Aenean fringilla risus sed
eros porttitor fermentum. Aenean semper enim id pharetra molestie. Sed
iaculis ex arcu. Duis nunc dolor, ultricies at odio blandit, pellentesque
aliquet ligula.
</div>
<div>
Sed est velit, luctus eget nunc at, ultricies euismod justo. Vestibulum
iaculis nec enim a ullamcorper. Donec cursus nec turpis a mollis. Maecenas
viverra nibh velit, non porta arcu facilisis et. Sed hendrerit imperdiet
nisl id dignissim. Ut accumsan nulla enim, id egestas risus molestie sit
amet. Integer quis vestibulum quam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Etiam vehicula
mauris dolor, consectetur iaculis sapien dignissim ut.
</div>
<div>
Nam tristique dapibus justo id aliquet. In hac habitasse platea dictumst.
Etiam tristique enim vitae pretium scelerisque. Aenean metus dolor, rutrum
ac dolor fringilla, sagittis hendrerit justo. Nulla eros elit, cursus vel
tempor a, consequat elementum diam. Etiam tincidunt ultrices dui, quis
fringilla sem tempus at. Donec neque mi, cursus id nisl ut, laoreet
efficitur orci. Vivamus sagittis suscipit ligula, at feugiat nisi
imperdiet et. In vestibulum sit amet eros rhoncus rutrum. Aenean gravida,
sapien at gravida imperdiet, lacus massa gravida mauris, id gravida leo
diam luctus elit. Curabitur id consequat diam. Aenean eleifend orci a quam
semper pharetra.
</div>
<div>
Curabitur dignissim, massa vitae lobortis ornare, velit tortor scelerisque
odio, id ornare dui risus ut tellus. Sed vulputate dolor nec blandit
vehicula. Phasellus efficitur purus eu vulputate pharetra. Praesent tellus
tellus, laoreet id volutpat vitae, ullamcorper at dui. Nullam ultrices
facilisis tempus. Nullam vitae orci lobortis mauris fringilla eleifend vel
sed lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
sed lacinia eros. Quisque molestie vitae risus eu aliquam. Sed non tellus
lectus. Suspendisse malesuada lectus sed vehicula efficitur. Cras pretium
urna ut nulla lobortis, et pharetra sem gravida. Nam a massa et diam
ornare volutpat id sed leo.
</div>
<div>
Integer vel accumsan metus. Pellentesque odio felis, efficitur sed velit
nec, fringilla maximus tortor. Donec augue tortor, finibus sed mattis nec,
malesuada in elit. Etiam id sem mi. Nam quis cursus nunc, non facilisis
erat. Praesent vitae ex molestie urna sagittis hendrerit. Aenean ex urna,
porttitor in vulputate at, rutrum ut ante. Vivamus quis pharetra ipsum, at
facilisis neque. Nulla facilisi. Quisque mattis et urna a molestie. Cras
fringilla varius ligula id pretium. Cras placerat purus nec lacus maximus
sodales. Donec aliquet felis nec enim gravida, sed tincidunt sem rhoncus.
Donec vel laoreet lectus. Ut in mi et est hendrerit dapibus in ac odio.
</div>
</body>
</html>