-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
533 lines (510 loc) · 24.6 KB
/
index.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
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./styles/styles.css" />
<link rel="stylesheet" href="./styles/projects.css" />
<link rel="stylesheet" href="./styles/blog.css"/>
<link rel="stylesheet" href="./styles/contact.css"/>
<title>Landing Page</title>
</head>
<body>
<section class="landing" id="home-link">
<svg
version="1.1"
id="home-anim"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 1820 1080"
style="enable-background: new 0 0 1820 1080"
xml:space="preserve"
>
<g id="home">
<defs>
<rect id="masque" y="0.4" width="1980" height="1080" />
</defs>
<g id="red">
<line x1="794.4" y1="883.4" x2="639.8" y2="1037.9" />
<line x1="694.6" y1="834.8" x2="849.2" y2="680.3" />
<line x1="1230.4" y1="447.3" x2="1075.9" y2="601.8" />
<line x1="1130.7" y1="398.7" x2="1285.2" y2="244.2" />
<line x1="1666.5" y1="11.2" x2="1512" y2="165.7" />
<line x1="732" y1="1177.5" x2="886.6" y2="1023" />
<line x1="1267.9" y1="790" x2="1113.3" y2="944.5" />
<line x1="1168.1" y1="741.4" x2="1322.7" y2="586.9" />
<line x1="1703.9" y1="353.9" x2="1549.4" y2="508.4" />
<line x1="1604.2" y1="305.3" x2="1758.7" y2="150.8" />
<line x1="1205.5" y1="1084.1" x2="1360.1" y2="929.6" />
<line x1="1741.4" y1="696.5" x2="1586.8" y2="851.1" />
<line x1="1641.6" y1="648" x2="1796.2" y2="493.5" />
<line x1="1787.5" y1="1030.5" x2="1633" y2="1185" />
<line x1="1687.8" y1="981.9" x2="1842.3" y2="827.4" />
<line x1="200.1" y1="-44.4" x2="45.6" y2="110.1" />
<line x1="237.5" y1="298.3" x2="83" y2="452.8" />
<line x1="137.8" y1="249.7" x2="292.3" y2="95.2" />
<line x1="673.6" y1="-137.8" x2="519.1" y2="16.7" />
<line x1="283.7" y1="632.2" x2="129.2" y2="786.8" />
<line x1="184" y1="583.7" x2="338.5" y2="429.2" />
<line x1="719.8" y1="196.2" x2="565.2" y2="350.7" />
<line x1="620" y1="147.6" x2="774.6" y2="-6.9" />
<line x1="321.1" y1="974.9" x2="166.6" y2="1129.4" />
<line x1="221.4" y1="926.4" x2="375.9" y2="771.8" />
<line x1="757.2" y1="538.8" x2="602.7" y2="693.4" />
<line x1="657.5" y1="490.3" x2="812" y2="335.8" />
<line x1="1193.3" y1="102.7" x2="1038.7" y2="257.3" />
<line x1="1093.5" y1="54.2" x2="1248.1" y2="-100.3" />
</g>
<g id="blue">
<line x1="225.8" y1="1151" x2="534.9" y2="841.9" />
<line x1="327.1" y1="1003.3" x2="548.3" y2="1312.3" />
<line x1="661.9" y1="714.9" x2="971" y2="405.9" />
<line x1="1263.1" y1="567.2" x2="954.1" y2="876.3" />
<line x1="1098" y1="278.8" x2="1407.1" y2="-30.2" />
<line x1="1699.2" y1="131.1" x2="1390.2" y2="440.2" />
<line x1="699.3" y1="1057.6" x2="1008.4" y2="748.5" />
<line x1="1300.6" y1="909.9" x2="991.5" y2="1218.9" />
<line x1="1135.4" y1="621.5" x2="1444.5" y2="312.4" />
<line x1="1736.6" y1="473.8" x2="1427.6" y2="782.8" />
<line x1="1571.5" y1="185.4" x2="1880.6" y2="-123.6" />
<line x1="1172.8" y1="964.2" x2="1481.9" y2="655.1" />
<line x1="1774.1" y1="816.5" x2="1465" y2="1125.5" />
<line x1="1608.9" y1="528.1" x2="1918" y2="219" />
<line x1="1219" y1="1298.1" x2="1528" y2="989.1" />
<line x1="1655.1" y1="862" x2="1964.1" y2="553" />
<line x1="232.8" y1="75.5" x2="-76.2" y2="384.6" />
<line x1="270.2" y1="418.2" x2="-38.8" y2="727.3" />
<line x1="105.1" y1="129.8" x2="414.2" y2="-179.2" />
<line x1="706.3" y1="-17.9" x2="397.3" y2="291.2" />
<line x1="-284.8" y1="899.9" x2="24.2" y2="590.8" />
<line x1="316.4" y1="752.2" x2="7.3" y2="1061.2" />
<line x1="151.3" y1="463.8" x2="460.3" y2="154.7" />
<line x1="752.5" y1="316.1" x2="443.4" y2="625.1" />
<line x1="587.3" y1="27.7" x2="896.4" y2="-281.4" />
<line x1="1188.6" y1="-120" x2="879.5" y2="189" />
<line x1="-247.4" y1="1242.5" x2="61.6" y2="933.5" />
<line x1="188.7" y1="806.4" x2="497.7" y2="497.4" />
<line x1="789.9" y1="658.8" x2="480.8" y2="967.8" />
<line x1="624.8" y1="370.4" x2="933.8" y2="61.3" />
<line x1="1226" y1="222.7" x2="916.9" y2="531.7" />
<line x1="1662.1" y1="-213.4" x2="1353" y2="95.6" />
</g>
</g>
</svg>
<div id="title">
<span> Hello I'm <span id="names">Richard Munyemana.</span> </span>
<br />
<span> I'm a passionate fullstack developer </span>
</div>
<div class="view-work">
<p>Vew my Work</p>
<i class="fa fa-arrow-right"></i>
<i class="fa fa-arrow-down"></i>
</div>
</section>
<div class="fixed-navbar">
<div class="nav-container">
<div class="nav">
<ul>
<li class="home-link active">HOME</li>
<li class="about-link">ABOUT ME</li>
<li class="portfolio-link">PORTFOLIO</li>
<li class="blog-link">BLOG</li>
<li class="contact-link">CONTACT</li>
</ul>
<a href="./login.html">
<div class="login">
</div>
</a>
</div>
<i class="fa fa-bars"></i>
<div class="bottom-line"></div>
</div>
<div class="nav-container nav-links-bars nav-hidden">
<ul>
<a href="#"><li class="home-link active">HOME</li></a>
<a href="#"><li class="about-link">ABOUT ME</li></a>
<a href="#"><li class="portfolio-link">PORTFOLIO</li></a>
<a href="#"><li class="blog-link">BLOG</li></a>
<a href="#"><li class="contact-link">CONTACT</li></a>
</ul>
</div>
</div>
<!-- About Page -->
<section class="about-container" id="about-link">
<div class="title-container animated slide-in-left">
<h2 class="about-title">ABOUT</h2>
<div
class="about-line animated slide-in-left"
style="animation-delay: 0.5s"
></div>
</div>
<div class="about-values">
<div class="first-values">
<div class="fast">
<div
class="fast-icon animated flip-in-x"
data-animation="flip-in-x"
>
<svg
width="50"
height="50"
viewBox="0 0 81 75"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M40.5 49.8933C37.8306 49.8933 35.2705 48.914 33.3829 47.1709C31.4954 45.4277 30.435 43.0635 30.435 40.5983C30.435 37.1282 32.4815 34.0918 35.4675 32.5117L68.0445 15.099L49.4914 44.7811C47.8139 47.8174 44.4253 49.8933 40.5 49.8933ZM40.5 9.61499C46.5725 9.61499 52.2425 11.1642 57.1743 13.7048L50.1288 17.4538C47.21 16.4003 43.855 15.8117 40.5 15.8117C33.3816 15.8117 26.5547 18.4231 21.5212 23.0715C16.4877 27.7199 13.66 34.0245 13.66 40.5983C13.66 47.4456 16.6459 53.6423 21.5107 58.1039H21.5442C22.8527 59.3123 22.8527 61.2642 21.5442 62.4726C20.2358 63.6809 18.0886 63.6809 16.7801 62.5035C13.6599 59.6303 11.1852 56.216 9.49821 52.4568C7.81123 48.6976 6.94523 44.6676 6.94997 40.5983C6.94997 32.381 10.4847 24.5003 16.7765 18.6898C23.0684 12.8793 31.602 9.61499 40.5 9.61499ZM74.05 40.5983C74.05 49.1497 70.2924 56.8956 64.2198 62.5035C62.9114 63.6809 60.7977 63.6809 59.4893 62.4726C59.1782 62.1859 58.9315 61.8454 58.7631 61.4706C58.5948 61.0958 58.5081 60.694 58.5081 60.2882C58.5081 59.8824 58.5948 59.4806 58.7631 59.1058C58.9315 58.731 59.1782 58.3905 59.4893 58.1039C61.9844 55.8091 63.9628 53.0807 65.3102 50.0761C66.6576 47.0716 67.3475 43.8504 67.34 40.5983C67.34 37.5 66.7025 34.4017 65.5283 31.6132L69.5878 25.1067C72.3725 29.7542 74.05 34.9594 74.05 40.5983Z"
fill="white"
/>
</svg>
</div>
<h3 class="value-title animated fade-in" data-animation="fade-in">
Fast
</h3>
<p
class="fast-description animated fade-in"
data-animation="fade-in"
>
Fast load time and SEO my first priority
</p>
</div>
<div class="fast">
<div
class="fast-icon animated flip-in-x"
data-animation="fade-in-x"
>
<svg
width="50"
height="50"
viewBox="0 0 81 76"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.79 68.8073H47.21M17.015 28.529C17.015 22.7769 19.4893 17.2604 23.8936 13.193C28.2979 9.12565 34.2714 6.84064 40.5 6.84064C46.7286 6.84064 52.7021 9.12565 57.1064 13.193C61.5107 17.2604 63.985 22.7769 63.985 28.529C63.9872 32.021 63.0727 35.4615 61.3197 38.5557C59.5668 41.6498 57.0277 44.3054 53.92 46.2948L52.1016 54.2451C51.8608 55.7106 51.0593 57.0477 49.8424 58.0141C48.6254 58.9805 47.0737 59.512 45.4687 59.5123H35.5312C33.9263 59.512 32.3746 58.9805 31.1576 58.0141C29.9407 57.0477 29.1391 55.7106 28.8984 54.2451L27.08 46.3289C23.9713 44.3324 21.4321 41.6706 19.6794 38.5709C17.9266 35.4713 17.0125 32.0258 17.015 28.529Z"
stroke="white"
stroke-width="6"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M27.08 47.119H53.92"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<h3 class="value-title animated fade-in" data-animation="fade-in">
Intuitive
</h3>
<p
class="fast-description animated fade-in"
data-animation="fade-in"
>
Easy and intuitive UI/UX designs are my strongest preferences
</p>
</div>
</div>
<div class="second-values">
<div class="fast">
<div
class="fast-icon animated flip-in-x"
data-animation="flip-in-x"
>
<svg
width="50"
height="50"
viewBox="0 0 81 76"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M75.3564 6.20061C75.3276 6.07216 75.2599 5.95394 75.161 5.85979C75.0621 5.76564 74.9362 5.69948 74.7981 5.66905C65.587 3.5893 44.3043 11.0006 32.7735 21.6448C30.7169 23.5287 28.8421 25.5746 27.1702 27.7592C23.6144 27.4687 20.0586 27.7113 17.0281 28.9312C8.47757 32.4067 5.98806 41.4751 5.29452 45.3761C5.25518 45.5896 5.27002 45.8087 5.33787 46.016C5.40572 46.2233 5.52472 46.4133 5.68553 46.5709C5.84634 46.7286 6.04456 46.8497 6.26461 46.9246C6.48466 46.9995 6.72053 47.0263 6.95367 47.0028L20.6845 45.6041C20.6943 46.5602 20.7568 47.5151 20.8717 48.4653C20.9408 49.1251 21.2579 49.7417 21.7681 50.2081L27.0852 55.1068C27.5907 55.5773 28.2582 55.8701 28.9724 55.9347C29.9955 56.0404 31.0238 56.098 32.0533 56.1075L30.5467 68.7719C30.5215 68.9872 30.5507 69.2049 30.632 69.4079C30.7132 69.611 30.8443 69.7939 31.0149 69.9424C31.1856 70.0908 31.3911 70.2007 31.6155 70.2635C31.8398 70.3263 32.0769 70.3402 32.308 70.3042C36.5243 69.6796 46.3613 67.3806 50.1026 59.4842C51.4237 56.6855 51.6942 53.4178 51.3891 50.15C53.7604 48.6059 55.9815 46.874 58.0273 44.9738C69.5941 34.3456 77.5738 15.1296 75.3564 6.20061ZM46.4871 32.2949C45.4309 31.3201 44.7115 30.078 44.4198 28.7255C44.1281 27.3731 44.2773 25.9712 44.8485 24.6971C45.4197 23.423 46.3873 22.334 47.6287 21.5678C48.8702 20.8016 50.3299 20.3926 51.8231 20.3926C53.3163 20.3926 54.776 20.8016 56.0175 21.5678C57.259 22.334 58.2265 23.423 58.7977 24.6971C59.3689 25.9712 59.5181 27.3731 59.2265 28.7255C58.9348 30.078 58.2154 31.3201 57.1591 32.2949C56.4588 32.9426 55.627 33.4564 54.7114 33.807C53.7958 34.1576 52.8143 34.3381 51.8231 34.3381C50.8319 34.3381 49.8505 34.1576 48.9349 33.807C48.0193 33.4564 47.1875 32.9426 46.4871 32.2949Z"
fill="white"
/>
<path
d="M26.7235 58.6549C25.8617 59.4522 24.4794 59.763 22.8155 60.0288C19.0773 60.617 15.7763 57.6339 16.4478 54.1439C16.7041 52.8208 17.4622 50.9662 17.934 50.5305C18.0371 50.4371 18.1057 50.3161 18.1301 50.1846C18.1545 50.0531 18.1335 49.9179 18.0699 49.7981C18.0064 49.6783 17.9036 49.5801 17.7761 49.5173C17.6487 49.4546 17.5031 49.4305 17.3599 49.4485C15.2695 49.6847 13.3247 50.56 11.8352 51.9349C8.13788 55.3523 7.78875 68.0327 7.78875 68.0327C7.78875 68.0327 21.5275 67.7103 25.2248 64.2929C26.7183 62.9185 27.6672 61.1197 27.9188 59.1865C27.9769 58.5794 27.1765 58.2178 26.7235 58.6549Z"
fill="white"
/>
</svg>
</div>
<h3 class="value-title animated fade-in" data-animation="fade-in">
Dynamic
</h3>
<p
class="fast-description animated fade-in"
data-animation="fade-in"
>
Websites have to be dynamic and simple to use
</p>
</div>
<div class="fast">
<div
class="fast-icon animated flip-in-x"
data-animation="flip-in-x"
>
<svg
width="50"
height="50"
viewBox="0 0 81 75"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_14_18)">
<path
d="M13.66 18.91V49.8933H30.435V37.5C30.435 35.8565 31.1419 34.2804 32.4003 33.1183C33.6587 31.9562 35.3654 31.3033 37.145 31.3033H53.92C55.6996 31.3033 57.4063 31.9562 58.6647 33.1183C59.923 34.2804 60.63 35.8565 60.63 37.5V49.8933H67.34V18.91H13.66ZM0.23999 62.2867V56.09H13.66C11.8804 56.09 10.1737 55.4371 8.9153 54.275C7.65693 53.1129 6.94999 51.5368 6.94999 49.8933V18.91C6.94999 17.2665 7.65693 15.6904 8.9153 14.5283C10.1737 13.3662 11.8804 12.7133 13.66 12.7133H67.34C69.1196 12.7133 70.8263 13.3662 72.0847 14.5283C73.343 15.6904 74.05 17.2665 74.05 18.91V49.8933C74.05 51.5368 73.343 53.1129 72.0847 54.275C70.8263 55.4371 69.1196 56.09 67.34 56.09H80.76V62.2867H60.63C60.63 63.9301 59.923 65.5063 58.6647 66.6684C57.4063 67.8305 55.6996 68.4833 53.92 68.4833H37.145C35.3654 68.4833 33.6587 67.8305 32.4003 66.6684C31.1419 65.5063 30.435 63.9301 30.435 62.2867H0.23999ZM38.8225 62.2867C38.3776 62.2867 37.9509 62.4499 37.6363 62.7404C37.3217 63.0309 37.145 63.425 37.145 63.8358C37.145 64.2467 37.3217 64.6407 37.6363 64.9312C37.9509 65.2218 38.3776 65.385 38.8225 65.385C39.2674 65.385 39.6941 65.2218 40.0087 64.9312C40.3233 64.6407 40.5 64.2467 40.5 63.8358C40.5 63.425 40.3233 63.0309 40.0087 62.7404C39.6941 62.4499 39.2674 62.2867 38.8225 62.2867ZM52.2425 62.2867C51.7976 62.2867 51.3709 62.4499 51.0563 62.7404C50.7417 63.0309 50.565 63.425 50.565 63.8358C50.565 64.2467 50.7417 64.6407 51.0563 64.9312C51.3709 65.2218 51.7976 65.385 52.2425 65.385C52.6874 65.385 53.1141 65.2218 53.4287 64.9312C53.7433 64.6407 53.92 64.2467 53.92 63.8358C53.92 63.425 53.7433 63.0309 53.4287 62.7404C53.1141 62.4499 52.6874 62.2867 52.2425 62.2867ZM43.855 62.2867V65.385H47.21V62.2867H43.855ZM37.145 37.5V59.1883H53.92V37.5H37.145Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_14_18">
<rect
width="80.52"
height="74.36"
fill="white"
transform="translate(0.23999 0.320007)"
/>
</clipPath>
</defs>
</svg>
</div>
<h3 class="value-title animated fade-in" data-animation="fade-in">
Responsive
</h3>
<p
class="fast-description animated fade-in"
data-animation="fade-in"
>
create websites that works on all devices
</p>
</div>
</div>
</div>
<div class="second-content">
<div
class="profile-description animated slide-in-left"
data-animation="slide-in-left"
>
<div class="profile-picture"></div>
<h3 class="profile-header">Who's Richard</h3>
<p class="description">
I'm a passionate web developer whose currently having trainings at
<a href="#">Andela Rwanda</a> with a passion of creating optimized
and dynamic user experience
</p>
</div>
<div
class="skills-container animated slide-in-right"
data-animation="slide-in-right"
>
<div class="skills-size">
<div class="skill-value">
<div class="skill-name-holder">
<p class="skill-name">Javascript</p>
</div>
</div>
<p class="skill-number">80%</p>
</div>
<div class="skills-size">
<div class="skill-value1">
<div class="skill-name-holder">
<p class="skill-name">React</p>
</div>
</div>
<p class="skill-number">40%</p>
</div>
<div class="skills-size">
<div class="skill-value2">
<div class="skill-name-holder">
<p class="skill-name">HTML</p>
</div>
</div>
<p class="skill-number">70%</p>
</div>
<div class="skills-size">
<div class="skill-value3">
<div class="skill-name-holder">
<p class="skill-name">CSS</p>
</div>
</div>
<p class="skill-number">90%</p>
</div>
<div class="skills-size">
<div class="skill-value4">
<div class="skill-name-holder">
<p class="skill-name">Node.js</p>
</div>
</div>
<p class="skill-number">60%</p>
</div>
<div class="skills-size">
<div class="skill-value5">
<div class="skill-name-holder">
<p class="skill-name">Java</p>
</div>
</div>
<p class="skill-number">30%</p>
</div>
</div>
</div>
</div>
</section>
<!-- project page -->
<section class="container" id="portfolio-link">
<div class="project-container">
<h2 class="project-title">PROJECTS</h2>
<div class="project-title-underline"></div>
<div class="content-container">
<nav class="nav-project-container">
<ul>
<div class="link-container">
<a class="active-link"href="#"><a href="#"><li class="all ">ALL</li></a>
</div>
<a href="#"><li class="all">HTML/CSS</li></a>
<a href="#"><li class="all">REACT Js</li></a>
<a href="#"><li class="all">JAVASCRIPT</li></a>
</ul>
</nav>
<div class="project-list">
<div class="card-project">
<div class="project-hover">
<div class="project-title">
<h3 class="title-project">E-Commerce</h3>
<p class="languages">HTML/CSS</p>
</div>
<div class="project-btn">
LEARN MORE
</div>
</div>
</div>
<div class="card-project">
<div class="project-hover">
<div class="project-title">
<h3 class="title-project">Todo App</h3>
<p class="languages">React Js/Node-Js</p>
</div>
<div class="project-btn">
LEARN MORE
</div>
</div>
</div>
<div class="card-project">
<div class="project-hover">
<div class="project-title">
<h3 class="title-project">Weather App</h3>
<p class="languages">React.js</p>
</div>
<div class="project-btn">
LEARN MORE
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Page -->
<section class="blog-container"id="blog-link">
<div class="blog-content">
<div class="blog-title">
<h3 class="title">BLOG</h3>
<div class="blog-underline"></div>
</div>
<div class="blog-second-content">
<div class="blog-list">
</div>
</div>
</div>
</section>
<!-- contact page -->
<section class="contact-container" id="contact-link">
<div class="contact-content">
<div class="contact-title">
<h3 class="title-contact">Contact</h3>
<div class="contact-line"></div>
</div>
<div class="contact-text">
<p class="contact-description">Have a question or want to work together?</p>
</div>
<form class="contact-inputs">
<div class="input-group">
<input type="text" name="name" id="name" class="guest-name" placeholder="Name" required>
<span class="name error-message"></span>
</div>
<div class="input-group">
<input type="email" name="email"id="email" class="guest-email" placeholder="Enter your email" required>
<span class="email error-message"></span>
</div>
<div class="input-group">
<textarea name="message" id="message" cols="30" placeholder="Your Message" rows="10"></textarea>
<span class="text-area error-message"></span>
</div>
<div class="contact-btns" type="Submit">
<h4 class="submit-data">Submit</h4>
</div>
</form>
</div>
</section>
<footer class="footer-container">
<div class="back-to-top" id="scroll-top">
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</div>
<div class="social-media">
<a href="https://www.linkedin.com/in/richard-munyemana-492366201/">
<div class="linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</a>
<a href="https://web.facebook.com/richard.munye/">
<div class="facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</a>
<a href="https://www.instagram.com/rich.munye/">
<div class="instagram">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</a>
<a href="https://github.com/Code-250">
<div class="github">
<i class="fa fa-github" aria-hidden="true"></i>
</div>
</a>
</div>
<div class="footer-content">
<p class="footer-note">Richard Munyemana</p>
<i class="fa fa-copyright" aria-hidden="true"></i>
<p class="footer-year">2021s</p>
</div>
</footer>
<script src="./js/scrollable.js"></script>
<script src="./js/validations/contactMessage.js"></script>
<script src="./js/blogs.js"></script>
<script>
const newCredentials = localStorage.getItem("loginCredentials");
const logInValue = document.querySelector(".login");
if (!newCredentials) {
logInValue.innerHTML = `<p class="login-text">LogIn</p>`;
} else {
logInValue.innerHTML = `<p class="login-text">Logout</p>`;
const logoutBtn = document.querySelector(".login");
logoutBtn.addEventListener("click", (e) => {
e.preventDefault();
localStorage.removeItem("loginCredentials")
window.location.replace("../login.html");
});
}
</script>
<!-- <script async defer src="http://maps.google.com/maps/api/js?key=AIzaSyCvDhommj0VRvjGyvaSKwv4RrBNxFfLEnw"></script> -->
</body>
</html>