-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemoPage.html
148 lines (117 loc) · 18.8 KB
/
demoPage.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
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
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body
{
height: 150vh;
}
div
{
background-color: black;
color: white;
}
/*div + span
{
color: yellow;
}*/
div > span
{
color: red;
}
span{
color: white !important;
}
div#particularDiv
{
background-color: red;
padding: 40px;
width: 100%;
}
.someClass
{
margin: 40px;
position: relative;
}
div.someClass
{
padding: 10px;
color: red;
background: #000000 url("./bg.jpeg") repeat-x;
background-size: contain;
box-shadow: 4px 0 20px 4px rgba(0, 0, 0, 0.25);
text-shadow: 1px 5px rgba(0,0,0,0.3);
}
h1
{
position: fixed !important;
top: 10px;
color: red;
}
#stickyThing
{
position: sticky;
top: 0;
height: 30px;
background-color: white;
}
</style>
</head>
<body>
<span class="someClass">Hey 2</span>
<div id="particularDiv">Hey 3</div>
<div class="someClass">
<span style="display: block">Hey 4</span>
<h1 style="display: inline" class="someClass">Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem ante, euismod a diam dignissim, varius imperdiet arcu. Phasellus porta feugiat enim, faucibus vestibulum mauris mollis eu. Suspendisse feugiat augue vitae dui pharetra, a vehicula lectus finibus. Mauris volutpat convallis orci sed rhoncus. Nulla eu lectus vel dui euismod sollicitudin et mollis diam. Duis magna sem, malesuada ut feugiat ac, aliquam non dui. Sed scelerisque libero id egestas dignissim. Vestibulum feugiat tincidunt lorem nec tincidunt. Morbi vitae tempus augue, porta mollis magna. Phasellus iaculis enim in est consectetur accumsan.
Praesent at augue non augue convallis ultricies. Sed eu nibh lacus. Nulla et diam at justo auctor elementum. Cras et erat sollicitudin, interdum enim quis, tincidunt nisi. Nam ornare vulputate bibendum. Suspendisse potenti. Aliquam eu elementum dui, sit amet rutrum dui. Vestibulum tempus nec libero a viverra. Vestibulum pellentesque mauris at felis facilisis tincidunt. Praesent nec viverra nisl. Sed auctor erat sed velit rutrum vulputate. Nullam a mollis urna, vehicula facilisis nibh. Vivamus in eleifend massa.
Nulla vitae erat fermentum, feugiat purus et, ornare arcu. Nulla ligula neque, suscipit vel lorem sit amet, rutrum imperdiet lectus. Donec a nisl eget felis mollis dapibus at sed odio. Nam et semper tellus. Sed mollis nisi vitae elit blandit vulputate. Donec ac porta elit. Curabitur porta dui lobortis mi maximus, a vulputate ligula aliquet. Nullam odio diam, consequat in lectus in, sagittis mollis nunc. Nunc et libero vitae mi consectetur vestibulum. Integer bibendum felis quis purus ultrices viverra. Etiam tincidunt tincidunt magna, in tincidunt augue pharetra quis. Phasellus efficitur nec purus et malesuada. In id condimentum quam. Nunc ut sollicitudin tortor.
Etiam tristique elit sed dolor aliquet pretium. Vivamus pulvinar tincidunt finibus. Phasellus a sapien fringilla, venenatis lorem sit amet, finibus lectus. Donec cursus, magna sit amet faucibus hendrerit, tortor ex congue ante, ac porta sem sapien non magna. Ut vitae mauris nec urna pretium tristique. Donec odio sem, euismod et ligula tincidunt, consequat pharetra est. Etiam mollis porta leo, ac faucibus massa sagittis nec. Proin dui ipsum, pellentesque vitae accumsan vitae, tempus nec lectus.
Quisque quis tempor tortor. Vestibulum feugiat ut metus ut interdum. Integer sed efficitur mi, eget mattis velit. In vitae tristique turpis. Donec nec justo felis. Vestibulum at metus suscipit, mattis massa auctor, tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultricies ut lectus a sagittis. Quisque bibendum at orci in iaculis. Sed cursus sem eget condimentum lobortis. Suspendisse augue nunc, auctor vel turpis vitae, finibus imperdiet velit. Aenean porttitor efficitur eros, eget imperdiet sapien accumsan quis. Maecenas dignissim, felis id accumsan tincidunt, turpis magna laoreet dui, placerat imperdiet lorem dolor at felis.
</p>
<div id="stickyThing"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem ante, euismod a diam dignissim, varius imperdiet arcu. Phasellus porta feugiat enim, faucibus vestibulum mauris mollis eu. Suspendisse feugiat augue vitae dui pharetra, a vehicula lectus finibus. Mauris volutpat convallis orci sed rhoncus. Nulla eu lectus vel dui euismod sollicitudin et mollis diam. Duis magna sem, malesuada ut feugiat ac, aliquam non dui. Sed scelerisque libero id egestas dignissim. Vestibulum feugiat tincidunt lorem nec tincidunt. Morbi vitae tempus augue, porta mollis magna. Phasellus iaculis enim in est consectetur accumsan.
Praesent at augue non augue convallis ultricies. Sed eu nibh lacus. Nulla et diam at justo auctor elementum. Cras et erat sollicitudin, interdum enim quis, tincidunt nisi. Nam ornare vulputate bibendum. Suspendisse potenti. Aliquam eu elementum dui, sit amet rutrum dui. Vestibulum tempus nec libero a viverra. Vestibulum pellentesque mauris at felis facilisis tincidunt. Praesent nec viverra nisl. Sed auctor erat sed velit rutrum vulputate. Nullam a mollis urna, vehicula facilisis nibh. Vivamus in eleifend massa.
Nulla vitae erat fermentum, feugiat purus et, ornare arcu. Nulla ligula neque, suscipit vel lorem sit amet, rutrum imperdiet lectus. Donec a nisl eget felis mollis dapibus at sed odio. Nam et semper tellus. Sed mollis nisi vitae elit blandit vulputate. Donec ac porta elit. Curabitur porta dui lobortis mi maximus, a vulputate ligula aliquet. Nullam odio diam, consequat in lectus in, sagittis mollis nunc. Nunc et libero vitae mi consectetur vestibulum. Integer bibendum felis quis purus ultrices viverra. Etiam tincidunt tincidunt magna, in tincidunt augue pharetra quis. Phasellus efficitur nec purus et malesuada. In id condimentum quam. Nunc ut sollicitudin tortor.
Etiam tristique elit sed dolor aliquet pretium. Vivamus pulvinar tincidunt finibus. Phasellus a sapien fringilla, venenatis lorem sit amet, finibus lectus. Donec cursus, magna sit amet faucibus hendrerit, tortor ex congue ante, ac porta sem sapien non magna. Ut vitae mauris nec urna pretium tristique. Donec odio sem, euismod et ligula tincidunt, consequat pharetra est. Etiam mollis porta leo, ac faucibus massa sagittis nec. Proin dui ipsum, pellentesque vitae accumsan vitae, tempus nec lectus.
Quisque quis tempor tortor. Vestibulum feugiat ut metus ut interdum. Integer sed efficitur mi, eget mattis velit. In vitae tristique turpis. Donec nec justo felis. Vestibulum at metus suscipit, mattis massa auctor, tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultricies ut lectus a sagittis. Quisque bibendum at orci in iaculis. Sed cursus sem eget condimentum lobortis. Suspendisse augue nunc, auctor vel turpis vitae, finibus imperdiet velit. Aenean porttitor efficitur eros, eget imperdiet sapien accumsan quis. Maecenas dignissim, felis id accumsan tincidunt, turpis magna laoreet dui, placerat imperdiet lorem dolor at felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem ante, euismod a diam dignissim, varius imperdiet arcu. Phasellus porta feugiat enim, faucibus vestibulum mauris mollis eu. Suspendisse feugiat augue vitae dui pharetra, a vehicula lectus finibus. Mauris volutpat convallis orci sed rhoncus. Nulla eu lectus vel dui euismod sollicitudin et mollis diam. Duis magna sem, malesuada ut feugiat ac, aliquam non dui. Sed scelerisque libero id egestas dignissim. Vestibulum feugiat tincidunt lorem nec tincidunt. Morbi vitae tempus augue, porta mollis magna. Phasellus iaculis enim in est consectetur accumsan.
Praesent at augue non augue convallis ultricies. Sed eu nibh lacus. Nulla et diam at justo auctor elementum. Cras et erat sollicitudin, interdum enim quis, tincidunt nisi. Nam ornare vulputate bibendum. Suspendisse potenti. Aliquam eu elementum dui, sit amet rutrum dui. Vestibulum tempus nec libero a viverra. Vestibulum pellentesque mauris at felis facilisis tincidunt. Praesent nec viverra nisl. Sed auctor erat sed velit rutrum vulputate. Nullam a mollis urna, vehicula facilisis nibh. Vivamus in eleifend massa.
Nulla vitae erat fermentum, feugiat purus et, ornare arcu. Nulla ligula neque, suscipit vel lorem sit amet, rutrum imperdiet lectus. Donec a nisl eget felis mollis dapibus at sed odio. Nam et semper tellus. Sed mollis nisi vitae elit blandit vulputate. Donec ac porta elit. Curabitur porta dui lobortis mi maximus, a vulputate ligula aliquet. Nullam odio diam, consequat in lectus in, sagittis mollis nunc. Nunc et libero vitae mi consectetur vestibulum. Integer bibendum felis quis purus ultrices viverra. Etiam tincidunt tincidunt magna, in tincidunt augue pharetra quis. Phasellus efficitur nec purus et malesuada. In id condimentum quam. Nunc ut sollicitudin tortor.
Etiam tristique elit sed dolor aliquet pretium. Vivamus pulvinar tincidunt finibus. Phasellus a sapien fringilla, venenatis lorem sit amet, finibus lectus. Donec cursus, magna sit amet faucibus hendrerit, tortor ex congue ante, ac porta sem sapien non magna. Ut vitae mauris nec urna pretium tristique. Donec odio sem, euismod et ligula tincidunt, consequat pharetra est. Etiam mollis porta leo, ac faucibus massa sagittis nec. Proin dui ipsum, pellentesque vitae accumsan vitae, tempus nec lectus.
Quisque quis tempor tortor. Vestibulum feugiat ut metus ut interdum. Integer sed efficitur mi, eget mattis velit. In vitae tristique turpis. Donec nec justo felis. Vestibulum at metus suscipit, mattis massa auctor, tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultricies ut lectus a sagittis. Quisque bibendum at orci in iaculis. Sed cursus sem eget condimentum lobortis. Suspendisse augue nunc, auctor vel turpis vitae, finibus imperdiet velit. Aenean porttitor efficitur eros, eget imperdiet sapien accumsan quis. Maecenas dignissim, felis id accumsan tincidunt, turpis magna laoreet dui, placerat imperdiet lorem dolor at felis.
</p>
</div>
<div class="someClass">
<span style="display: block">Hey 4</span>
<h1 style="display: inline" class="someClass">Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem ante, euismod a diam dignissim, varius imperdiet arcu. Phasellus porta feugiat enim, faucibus vestibulum mauris mollis eu. Suspendisse feugiat augue vitae dui pharetra, a vehicula lectus finibus. Mauris volutpat convallis orci sed rhoncus. Nulla eu lectus vel dui euismod sollicitudin et mollis diam. Duis magna sem, malesuada ut feugiat ac, aliquam non dui. Sed scelerisque libero id egestas dignissim. Vestibulum feugiat tincidunt lorem nec tincidunt. Morbi vitae tempus augue, porta mollis magna. Phasellus iaculis enim in est consectetur accumsan.
Praesent at augue non augue convallis ultricies. Sed eu nibh lacus. Nulla et diam at justo auctor elementum. Cras et erat sollicitudin, interdum enim quis, tincidunt nisi. Nam ornare vulputate bibendum. Suspendisse potenti. Aliquam eu elementum dui, sit amet rutrum dui. Vestibulum tempus nec libero a viverra. Vestibulum pellentesque mauris at felis facilisis tincidunt. Praesent nec viverra nisl. Sed auctor erat sed velit rutrum vulputate. Nullam a mollis urna, vehicula facilisis nibh. Vivamus in eleifend massa.
Nulla vitae erat fermentum, feugiat purus et, ornare arcu. Nulla ligula neque, suscipit vel lorem sit amet, rutrum imperdiet lectus. Donec a nisl eget felis mollis dapibus at sed odio. Nam et semper tellus. Sed mollis nisi vitae elit blandit vulputate. Donec ac porta elit. Curabitur porta dui lobortis mi maximus, a vulputate ligula aliquet. Nullam odio diam, consequat in lectus in, sagittis mollis nunc. Nunc et libero vitae mi consectetur vestibulum. Integer bibendum felis quis purus ultrices viverra. Etiam tincidunt tincidunt magna, in tincidunt augue pharetra quis. Phasellus efficitur nec purus et malesuada. In id condimentum quam. Nunc ut sollicitudin tortor.
Etiam tristique elit sed dolor aliquet pretium. Vivamus pulvinar tincidunt finibus. Phasellus a sapien fringilla, venenatis lorem sit amet, finibus lectus. Donec cursus, magna sit amet faucibus hendrerit, tortor ex congue ante, ac porta sem sapien non magna. Ut vitae mauris nec urna pretium tristique. Donec odio sem, euismod et ligula tincidunt, consequat pharetra est. Etiam mollis porta leo, ac faucibus massa sagittis nec. Proin dui ipsum, pellentesque vitae accumsan vitae, tempus nec lectus.
Quisque quis tempor tortor. Vestibulum feugiat ut metus ut interdum. Integer sed efficitur mi, eget mattis velit. In vitae tristique turpis. Donec nec justo felis. Vestibulum at metus suscipit, mattis massa auctor, tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultricies ut lectus a sagittis. Quisque bibendum at orci in iaculis. Sed cursus sem eget condimentum lobortis. Suspendisse augue nunc, auctor vel turpis vitae, finibus imperdiet velit. Aenean porttitor efficitur eros, eget imperdiet sapien accumsan quis. Maecenas dignissim, felis id accumsan tincidunt, turpis magna laoreet dui, placerat imperdiet lorem dolor at felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem ante, euismod a diam dignissim, varius imperdiet arcu. Phasellus porta feugiat enim, faucibus vestibulum mauris mollis eu. Suspendisse feugiat augue vitae dui pharetra, a vehicula lectus finibus. Mauris volutpat convallis orci sed rhoncus. Nulla eu lectus vel dui euismod sollicitudin et mollis diam. Duis magna sem, malesuada ut feugiat ac, aliquam non dui. Sed scelerisque libero id egestas dignissim. Vestibulum feugiat tincidunt lorem nec tincidunt. Morbi vitae tempus augue, porta mollis magna. Phasellus iaculis enim in est consectetur accumsan.
Praesent at augue non augue convallis ultricies. Sed eu nibh lacus. Nulla et diam at justo auctor elementum. Cras et erat sollicitudin, interdum enim quis, tincidunt nisi. Nam ornare vulputate bibendum. Suspendisse potenti. Aliquam eu elementum dui, sit amet rutrum dui. Vestibulum tempus nec libero a viverra. Vestibulum pellentesque mauris at felis facilisis tincidunt. Praesent nec viverra nisl. Sed auctor erat sed velit rutrum vulputate. Nullam a mollis urna, vehicula facilisis nibh. Vivamus in eleifend massa.
Nulla vitae erat fermentum, feugiat purus et, ornare arcu. Nulla ligula neque, suscipit vel lorem sit amet, rutrum imperdiet lectus. Donec a nisl eget felis mollis dapibus at sed odio. Nam et semper tellus. Sed mollis nisi vitae elit blandit vulputate. Donec ac porta elit. Curabitur porta dui lobortis mi maximus, a vulputate ligula aliquet. Nullam odio diam, consequat in lectus in, sagittis mollis nunc. Nunc et libero vitae mi consectetur vestibulum. Integer bibendum felis quis purus ultrices viverra. Etiam tincidunt tincidunt magna, in tincidunt augue pharetra quis. Phasellus efficitur nec purus et malesuada. In id condimentum quam. Nunc ut sollicitudin tortor.
Etiam tristique elit sed dolor aliquet pretium. Vivamus pulvinar tincidunt finibus. Phasellus a sapien fringilla, venenatis lorem sit amet, finibus lectus. Donec cursus, magna sit amet faucibus hendrerit, tortor ex congue ante, ac porta sem sapien non magna. Ut vitae mauris nec urna pretium tristique. Donec odio sem, euismod et ligula tincidunt, consequat pharetra est. Etiam mollis porta leo, ac faucibus massa sagittis nec. Proin dui ipsum, pellentesque vitae accumsan vitae, tempus nec lectus.
Quisque quis tempor tortor. Vestibulum feugiat ut metus ut interdum. Integer sed efficitur mi, eget mattis velit. In vitae tristique turpis. Donec nec justo felis. Vestibulum at metus suscipit, mattis massa auctor, tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultricies ut lectus a sagittis. Quisque bibendum at orci in iaculis. Sed cursus sem eget condimentum lobortis. Suspendisse augue nunc, auctor vel turpis vitae, finibus imperdiet velit. Aenean porttitor efficitur eros, eget imperdiet sapien accumsan quis. Maecenas dignissim, felis id accumsan tincidunt, turpis magna laoreet dui, placerat imperdiet lorem dolor at felis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem ante, euismod a diam dignissim, varius imperdiet arcu. Phasellus porta feugiat enim, faucibus vestibulum mauris mollis eu. Suspendisse feugiat augue vitae dui pharetra, a vehicula lectus finibus. Mauris volutpat convallis orci sed rhoncus. Nulla eu lectus vel dui euismod sollicitudin et mollis diam. Duis magna sem, malesuada ut feugiat ac, aliquam non dui. Sed scelerisque libero id egestas dignissim. Vestibulum feugiat tincidunt lorem nec tincidunt. Morbi vitae tempus augue, porta mollis magna. Phasellus iaculis enim in est consectetur accumsan.
Praesent at augue non augue convallis ultricies. Sed eu nibh lacus. Nulla et diam at justo auctor elementum. Cras et erat sollicitudin, interdum enim quis, tincidunt nisi. Nam ornare vulputate bibendum. Suspendisse potenti. Aliquam eu elementum dui, sit amet rutrum dui. Vestibulum tempus nec libero a viverra. Vestibulum pellentesque mauris at felis facilisis tincidunt. Praesent nec viverra nisl. Sed auctor erat sed velit rutrum vulputate. Nullam a mollis urna, vehicula facilisis nibh. Vivamus in eleifend massa.
Nulla vitae erat fermentum, feugiat purus et, ornare arcu. Nulla ligula neque, suscipit vel lorem sit amet, rutrum imperdiet lectus. Donec a nisl eget felis mollis dapibus at sed odio. Nam et semper tellus. Sed mollis nisi vitae elit blandit vulputate. Donec ac porta elit. Curabitur porta dui lobortis mi maximus, a vulputate ligula aliquet. Nullam odio diam, consequat in lectus in, sagittis mollis nunc. Nunc et libero vitae mi consectetur vestibulum. Integer bibendum felis quis purus ultrices viverra. Etiam tincidunt tincidunt magna, in tincidunt augue pharetra quis. Phasellus efficitur nec purus et malesuada. In id condimentum quam. Nunc ut sollicitudin tortor.
Etiam tristique elit sed dolor aliquet pretium. Vivamus pulvinar tincidunt finibus. Phasellus a sapien fringilla, venenatis lorem sit amet, finibus lectus. Donec cursus, magna sit amet faucibus hendrerit, tortor ex congue ante, ac porta sem sapien non magna. Ut vitae mauris nec urna pretium tristique. Donec odio sem, euismod et ligula tincidunt, consequat pharetra est. Etiam mollis porta leo, ac faucibus massa sagittis nec. Proin dui ipsum, pellentesque vitae accumsan vitae, tempus nec lectus.
Quisque quis tempor tortor. Vestibulum feugiat ut metus ut interdum. Integer sed efficitur mi, eget mattis velit. In vitae tristique turpis. Donec nec justo felis. Vestibulum at metus suscipit, mattis massa auctor, tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ultricies ut lectus a sagittis. Quisque bibendum at orci in iaculis. Sed cursus sem eget condimentum lobortis. Suspendisse augue nunc, auctor vel turpis vitae, finibus imperdiet velit. Aenean porttitor efficitur eros, eget imperdiet sapien accumsan quis. Maecenas dignissim, felis id accumsan tincidunt, turpis magna laoreet dui, placerat imperdiet lorem dolor at felis.
</p>
</div>
<span>Hey 1</span>
</body>
</html>