-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
283 lines (271 loc) · 12.7 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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<meta name="theme-color" content="#000000">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/font.css">
</link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressively/dist/progressively.min.css">
</link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
</link>
<link rel="stylesheet" type="text/css" href="CSS/global.css">
</link>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</link>
<link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
</link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="JS/compLoader.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressively/1.2.5/progressively.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.10.7/typeit.min.js"></script>
<script async src="JS/blog.js"></script>
</head>
<body>
<div id="master"></div>
<!-- NavBar insertation Code-->
<div id="navBar"></div>
<!-- Title Hero-->
<section class="hero is-primary has-background-black">
<div class="hero-body">
<div class="container">
<h1 class="title">
<span class="Blog-Title">Blog</span> <i class="em em-lower_left_ballpoint_pen"></i>
</h1>
<h2 class="subtitle">
<span class="Blog-Subtitle">Read up on things I'm working on <i class="em em-bookmark_tabs"></i></span>
</h2>
</div>
</div>
</section>
<!-- Blog section -->
<section class="hero is-medium">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-half">
<article class="message is-link">
<div class="message-header">
<p>Technology</p>
</div>
<div class="message-body">
<div class="columns">
<div class="column is-one-third">
<figure class="image is-3by2">
<img src="https://picsum.photos/400/400/?random" alt="Placeholder image">
</figure>
</div>
<div class="column is-two-thirds">
<p class="title is-4">The Future of Web Development</p>
<p class="subtitle is-6">Posted on March 22, 2023</p>
<p class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.
Nullam finibus quam a dui aliquet, vel rutrum felis tempor. Sed sed felis odio. Suspendisse
potenti. Donec a tincidunt est. Maecenas sodales purus id tincidunt suscipit. Aliquam sit amet
justo a nisi sodales dignissim. Donec lacinia nisi eget lorem vulputate scelerisque.
</p>
<a class="button is-primary" href="#">Read more</a>
</div>
</div>
</div>
</article>
<article class="message is-link">
<div class="message-header">
<p>Programming</p>
</div>
<div class="message-body">
<div class="columns">
<div class="column is-one-third">
<figure class="image is-3by2">
<img src="https://picsum.photos/400/400/?random" alt="Placeholder image">
</figure>
</div>
<div class="column is-two-thirds">
<p class="title is-4">10 Tips for Writing Better Code</p>
<p class="subtitle is-6">Posted on March 20, 2023</p>
<p class="content">
Nunc ultrices diam sit amet purus efficitur, eget tempus nulla varius. Nulla gravida neque quam,
vel sollicitudin sem vestibulum eu. Suspendisse eget mi eu arcu efficitur bibendum. Sed
consectetur ultricies neque, sed suscipit mauris congue id. Maecenas auctor arcu quam, ut
fermentum risus dictum vitae.
</p>
<a class="button is-primary" href="#">Read more</a>
</div>
</div>
</div>
</article>
<article class="message is-link">
<div class="message-header">
<p>Design</p>
</div>
<div class="message-body">
<div class="columns">
<div class="column is-one-third">
<figure class="image is-3by2">
<img src="https://picsum.photos/400/400/?random" alt="Placeholder image">
</figure>
</div>
<div class="column is-two-thirds">
<p class="title is-4">10 Design Principles for Non-Designers</p>
<p class="subtitle is-6">Posted on March 18, 2023</p>
<p class="content">
Integer et velit velit. Morbi quis quam odio. Sed posuere magna ut orci faucibus congue. Quisque
tristique quam non ultrices tempus. Nulla ut orci et eros blandit tincidunt. Sed feugiat elit ut
arcu venenatis dapibus. Pellentesque eu justo ut enim faucibus dictum. Nam tincidunt eros quis
sapien pulvinar laoreet.
</p>
<a class="button is-primary" href="#">Read more</a>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-fullheight is-warning has-text-centered">
<div class="hero-body">
<div class="container">
<h1 class="title">
Upcoming Events <i class="em em-star-struck"></i>
</h1>
<div class="columns is-multiline">
<div class="column is-one-third">
<article class="notification is-link">
<p class="title">Tech Conference</p>
<p class="subtitle">March 30, 2023</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.</p>
<a class="button is-primary" href="#">Register Now</a>
</article>
</div>
<div class="column is-one-third">
<article class="notification is-link">
<p class="title">Startup Meetup</p>
<p class="subtitle">April 7, 2023</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.</p>
<a class="button is-primary" href="#">Register Now</a>
</article>
</div>
<div class="column is-one-third">
<article class="notification is-link">
<p class="title">Coding Bootcamp</p>
<p class="subtitle">April 14, 2023</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.</p>
<a class="button is-primary" href="#">Register Now</a>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="hero is-medium has-text-centered">
<div class="hero-body">
<div class="container">
<h1 class="title">
Testimonials <i class="em em-clap"></i>
</h1>
<div class="columns is-multiline">
<div class="column is-half is-offset-one-quarter">
<article class="message is-link">
<div class="message-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.
Nullam finibus quam a dui aliquet, vel rutrum felis tempor. Sed sed felis odio. Suspendisse
potenti.</p>
<p><strong>John Smith</strong>, CEO of ABC Inc.</p>
</div>
</article>
</div>
<div class="column is-half is-offset-one-quarter">
<article class="message is-link">
<div class="message-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.
Nullam finibus quam a dui aliquet, vel rutrum felis tempor. Sed sed felis odio. Suspendisse
potenti.</p>
<p><strong>Jane Doe</strong>, CTO of XYZ Corp.</p>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- Blog -->
<section class="hero is-medium has-background-black">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-white">
From the Blog <i class="em em-newspaper"></i>
</h1>
<div class="columns is-multiline">
<div class="column is-half">
<article class="box">
<div class="media-content">
<p class="title is-4 has-text-white">The Importance of Accessibility in Web Design</p>
<p class="subtitle is-6 has-text-white">March 15, 2023</p>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.
Nullam finibus quam a dui aliquet, vel rutrum felis tempor. Sed sed felis odio. Suspendisse potenti.
</p>
<a href="#" class="button is-primary">Read More</a>
</div>
</article>
</div>
<div class="column is-half">
<article class="box">
<div class="media-content">
<p class="title is-4 has-text-white">How to Improve Website Performance with Lazy Loading</p>
<p class="subtitle is-6 has-text-white">March 10, 2023</p>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.
Nullam finibus quam a dui aliquet, vel rutrum felis tempor. Sed sed felis odio. Suspendisse potenti.
</p>
<a href="#" class="button is-primary">Read More</a>
</div>
</article>
</div>
<div class="column is-half">
<article class="box">
<div class="media-content">
<p class="title is-4 has-text-white">The OG CPU</p>
<p class="subtitle is-6 has-text-white">March 5, 2023</p>
</div>
<div class="content">
<figure class="image is-4by3">
<img class="progressive__img progressive--not-loaded" data-progressive="Assets/CPU.jpg" src="Assets/CPU-lowly.jpg" alt="Picture of me holding a Pentium 4 CPU">
</figure>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula neque sed tincidunt cursus.
Nullam finibus quam a dui aliquet, vel rutrum felis tempor. Sed sed felis odio. Suspendisse potenti.
</p>
</div>
</article>
</div>
<div class="column is-half">
<article class="box">
<div class="media-content">
<p class="title is-4 has-text-white">Twitter Feed</p>
<p class="subtitle is-6 has-text-white">March 1, 2023</p>
</div>
<div class="content">
<a class="twitter-timeline" data-width="500" data-height="500"
href="https://twitter.com/Acelogic_?ref_src=twsrc%5Etfw">Tweets
by Acelogic_</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- Footer insertion code -->
<div id="footer"></div>
</body>
</html>