-
Notifications
You must be signed in to change notification settings - Fork 5
/
fixed.html
62 lines (59 loc) · 18.3 KB
/
fixed.html
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
<!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>