-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
230 lines (177 loc) · 8.56 KB
/
blog.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
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
<style>
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
.container {
display:grid;
grid-template-columns: repeat(5, 25%);
grid-template-rows: auto auto auto auto;
width: 100vmax;
font-family: Arial;
background-color: #EFD9CE;
padding-right: -15px;
}
* {
margin: 0;
max-width: 100%;
}
#navbar {
background-color: 957FEF;
height: 5vmin;
position: fixed;
width: 100vmax;
max-width: 100%;
min-height: 50px;
}
#navbar li {
list-style-type: none;
text-align: center;
float:right;
}
#navbar ul {
margin: 1vmin 1vmin 1vmin 1vmin;
color: White;
font-weight: bold;
padding: 10px 10px 10px 10px;
width: 5vmax;
min-width: 50px;
}
a {
text-decoration: none;
color: white;
}
#navbar a:hover {
color: black;
border-top: 5px solid #7161EF;
padding-top: 10px;
}
img {
display: block;
margin: 0 auto;
padding: 10px;
}
h2 {
text-align: center;
grid-column: 2 / 5;
grid-row: 1;
font-size: 50;
padding-top: 25px;
padding-bottom: 25px;
}
#links {
grid-column: 3 / 4;
grid-row: 4;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 15px;
text-align: center;
text-justify:auto;
}
h1 {
font-size: 5vh;
color: #B79CED;
}
body {
grid-column: 1 / 5;
}
li {
display: inline;
grid-column: 2/3;
flex-direction: row;
list-style-type: none;
text-align: center;
}
ul {
display: inline-block;
width: auto;
margin-right: 0;
padding-right: 25px;
margin: auto;
}
#content {
margin-top: 5vmin;
display: grid;
grid-template-rows: auto auto 15vh;
grid-template-columns: 30vw 40vw 30vw;
min-height: 100vh;
text-align: center;
}
#content h1 {
padding-top: 15px;
height: fit-content;
grid-column: 2/3;
grid-row: 1/2;
background-color: blanchedalmond;
grid-gap: 0;
}
#blogpost {
padding: 10px 20px 0 20px;
text-align: justify;
grid-row: 2/3;
grid-column: 2/3;
background-color: blanchedalmond;
grid-gap: 0;
}
#blogpost p {
padding-bottom: 15px;
margin-left: 5vh;
margin-right: 5vh;
color: black;
height: fit-content;
width: ;
}
#blogpost img {
width: 70%;
justify-self: center;
align-self: center;
}
figcaption {
font-style: italic;
padding: 2px;
text-align: center;
}
#figure {
width: 100%;
margin-top: 25px;
margin-bottom: 25px;
}
</style>
<!DOCTYPE html>
<html class="container">
<nav id="navbar">
<li>
<ul><a href="portfolio.html#welcome-section">About</a></ul>
<ul><a href="portfolio.html#projects">Work</a></ul>
<ul><a href="portfolio.html#Contacts">Contacts</a></ul>
<ul><a href="#blogpost">Blog</a></ul>
</li>
</nav>
<section id="content">
<h1>Is this the worst time to travel?</h1>
<div id="blogpost">
<div id="figure"><img src="https://i.imgur.com/cpX79aY.png" alt="picture of a plane"><figcaption>Invest in American Airlines</figcaption></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt id aliquet risus feugiat in ante metus dictum. Odio euismod lacinia at quis. Lectus nulla at volutpat diam ut venenatis tellus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus. Turpis egestas maecenas pharetra convallis posuere. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Tellus in metus vulputate eu scelerisque felis imperdiet proin. Amet facilisis magna etiam tempor orci eu lobortis. Risus nec feugiat in fermentum posuere. Sed blandit libero volutpat sed cras. Amet facilisis magna etiam tempor. Sed turpis tincidunt id aliquet risus feugiat. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Platea dictumst quisque sagittis purus.</p>
<div id="figure"><img src="https://i.imgur.com/DkEvuIM.jpg" alt="free money"><figcaption>Buy GME</figcaption></div>
<p> Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Sit amet tellus cras adipiscing enim eu turpis. Facilisi cras fermentum odio eu feugiat pretium nibh ipsum consequat. Sagittis eu volutpat odio facilisis. Id consectetur purus ut faucibus pulvinar elementum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Laoreet non curabitur gravida arcu ac tortor. Iaculis eu non diam phasellus vestibulum lorem. Gravida rutrum quisque non tellus orci ac. Blandit massa enim nec dui nunc. Adipiscing elit ut aliquam purus sit. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Urna cursus eget nunc scelerisque viverra mauris in aliquam sem. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Cras ornare arcu dui vivamus arcu. Egestas diam in arcu cursus euismod quis viverra. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Sed odio morbi quis commodo odio aenean. Vel risus commodo viverra maecenas accumsan lacus vel. </p>
<div id="figure"><img src="https://i.imgur.com/P2eiKuL.png" alt="african village"> <figcaption>You can go to Africa.</figcaption></div>
<p> Non sodales neque sodales ut etiam sit. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Platea dictumst quisque sagittis purus. Id leo in vitae turpis massa sed elementum tempus egestas. Sed augue lacus viverra vitae congue eu consequat. Id consectetur purus ut faucibus pulvinar elementum integer enim. Mattis vulputate enim nulla aliquet porttitor. A pellentesque sit amet porttitor eget dolor morbi non. Risus nullam eget felis eget nunc lobortis mattis aliquam. Placerat vestibulum lectus mauris ultrices eros in. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Pellentesque habitant morbi tristique senectus.</p>
<div id="figure"><img src="https://i.imgur.com/ERMdWAi.png" alt="corona on the beach"><figcaption>Enjoy a corona on the beach</figcaption></div>
<p> Lectus nulla at volutpat diam ut venenatis. At tellus at urna condimentum mattis. Amet cursus sit amet dictum sit amet justo donec enim. Neque volutpat ac tincidunt vitae semper quis lectus. Vivamus arcu felis bibendum ut tristique et egestas quis. Sit amet volutpat consequat mauris nunc congue. Parturient montes nascetur ridiculus mus mauris. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Tristique magna sit amet purus gravida quis. Quam quisque id diam vel quam elementum pulvinar etiam. Sodales neque sodales ut etiam sit amet nisl purus in. Turpis egestas sed tempus urna. Adipiscing bibendum est ultricies integer quis auctor elit sed.</p>
<div id="figure"><img src="https://i.imgur.com/tSJSHua.png" alt="Bitcoin"><figcaption>To the moon</figcaption></div>
<p> Arcu bibendum at varius vel. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Non consectetur a erat nam at lectus. Non nisi est sit amet facilisis magna etiam tempor. Amet mattis vulputate enim nulla aliquet. Amet massa vitae tortor condimentum lacinia quis vel. Nisl rhoncus mattis rhoncus urna neque viverra. Eget felis eget nunc lobortis mattis. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Purus gravida quis blandit turpis cursus in hac habitasse platea. Eget nunc scelerisque viverra mauris. Fusce id velit ut tortor pretium viverra suspendisse. Mollis nunc sed id semper risus. Odio pellentesque diam volutpat commodo sed egestas. Sed viverra ipsum nunc aliquet bibendum enim. Adipiscing diam donec adipiscing tristique risus nec. Augue neque gravida in fermentum et sollicitudin. Enim lobortis scelerisque fermentum dui faucibus in ornare. Purus sit amet volutpat consequat. Donec ultrices tincidunt arcu non sodales.</p>
</div>
</section>
</html>