-
Notifications
You must be signed in to change notification settings - Fork 0
/
2021-pride-event.html
97 lines (92 loc) · 3.71 KB
/
2021-pride-event.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
<style>
body {
background-image: url("http://i.imgur.com/PjMuKzy.png");
background-repeat: no-repeat;
background-color: #030303;
}
tbody {
display: none;
}
.content {
width: 276px;
height: 383px;
overflow: hidden;
margin-left: 262px;
margin-top: 341px;
text-align: justify;
padding: 20px;
font-size: 16px;
font-family: arial;
color: #fff;
}
div#main, #message {
overflow: scroll;
height: 414px;
margin-bottom: 8px;
}
h1 {
background-color: #cc008b;
letter-spacing: 5px;
font-family: georgia;
padding-left: 10px;
border-left: 15px solid #5145d7;
}
.nav {
margin-top: 400px;
width: 150px;
margin-left: 100px;
}
.nav a {
width: 143px;
display: inline-block;
padding: 5px;
margin-bottom: 3px;
border-bottom: 1px dotted #cc008b;
color: white;
font: 14px georgia;
text-decoration: none;
}
.nav a:hover {
background: #505a5e;
}
h2 {
font-family: georgia;
color: #cc008b;
margin-bottom: 0;
}
b {
font-family: georgia;
color: #bab5ff;
font-style: italic;
}
i {
color: #ec9ee5;
border-bottom: 1px dotted #ec9ee5;
letter-spacing: 2px;
font-style: italic;
}
</style><div class="nav" style="position: absolute;">
<h2>nav.</h2>
<a href="#main">welcome</a>
<a href="#message">message</a>
</div>
<div class="content" style="position: absolute;">
<div id="main">
<h1>welcome</h1>
<p>
This is <b>bold</b> and <i>italics</i>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur venenatis vestibulum. Aliquam sed tincidunt sapien, sit amet elementum lacus. Suspendisse scelerisque sem non lorem malesuada, id varius lectus volutpat. Donec finibus consectetur diam, a dignissim elit faucibus ut. Praesent eget justo augue. Nulla quis ex sapien. Vestibulum dapibus pellentesque orci lobortis aliquam. In ultricies turpis lacus, at elementum libero efficitur eget. In posuere massa sit amet nisi varius, eu interdum sapien fermentum. Integer in odio at ante fermentum euismod. Proin lobortis in odio quis egestas. Fusce vehicula ut nulla sit amet egestas. Nullam lectus eros, pulvinar quis finibus ac, scelerisque hendrerit ante. Suspendisse congue, nunc et finibus tincidunt, arcu justo mollis dolor, in molestie diam dolor ut nulla.
</p>
<p>
Nulla quis lorem quis purus dictum egestas a id metus. Pellentesque velit lectus, mollis ut iaculis at, tincidunt in velit. Aenean placerat pharetra gravida. Pellentesque at viverra felis, vitae pulvinar massa. Mauris semper dolor felis, nec viverra turpis tincidunt a. Sed fringilla, orci nec aliquet suscipit, metus eros varius urna, et eleifend ipsum lacus non ligula. In imperdiet maximus diam. Suspendisse viverra pharetra erat nec dictum. Nam in molestie libero, non euismod ligula. Pellentesque eget augue non enim vulputate eleifend.
</p>
</div>
<div id="message">
<h1>message</h1>
<p>
Nulla facilisi. Praesent massa tortor, ullamcorper eu mattis a, dictum ac eros. Vestibulum ullamcorper tincidunt nisl, in dignissim leo mollis vel. Donec sagittis mi non nunc rhoncus tincidunt. Sed mattis, nulla ornare lobortis pharetra, lorem justo elementum nulla, nec varius nulla velit quis turpis. Etiam in urna, facilisis velit non, blandit tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia sem dui, eget volutpat nunc tincidunt nec. Nam volutpat ligula ut malesuada luctus. Vestibulum cursus arcu augue, vel suscipit sapien vestibulum pretium. Aliquam venenatis a sapien quis pharetra. Cras porta eleifend sapien, a eleifend neque commodo sed. Maecenas vulputate pretium orci, et viverra tortor dictum vehicula. Nullam turpis ex, pharetra vitae sapien ut, efficitur fermentum neque. Mauris lobortis mattis tempor. Sed pellentesque, risus et hendrerit rhoncus, mauris diam interdum nulla, at iaculis neque purus nec magna.
</p>
</div>
</div>