-
Notifications
You must be signed in to change notification settings - Fork 0
/
Blog.html
93 lines (82 loc) · 3.82 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
<!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="./Main.css">
<script src="https://kit.fontawesome.com/c8b934b995.js" crossorigin="anonymous"></script>
<title>Portfolo-Creative Developer</title>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container ">
<header class="">
<nav>
<a href="/"><h2> <span>Ifeanyi</span> Chukwu</h2></a>
<ul>
<li><a href="/">Home</a></li>
<li><a href="./Works.html">Works</a></li>
<li><a href="./Blog.html">Blogs</a></li>
</ul>
<i class="fa-solid fa-bars"></i>
</nav>
<ul class="mobile-menu ">
<li><a href="/">Home</a></li>
<li><a href="./Works.html">Works</a></li>
<li><a href="./Blog.html">Blogs</a></li>
</ul>
</header>
<section class="Features container-Pd">
<h1 class="BlogTitle">Blogs </h1>
<div class="feature-box">
<div class="feature-details">
<h2>UI Interactions of the week</h2>
<button class="Year">2020</button>
<button class="featureBtn">Dashbord</button>
<p>Amet minim mollit non deserunt ullamco est duis enim velit mollit. Exercitation veniam consequat
sunt nostrud amet. sit aliqua dolor do amet sint. Velit officia consequat
duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-details">
<h2>Vibrant Portraits of 2020</h2>
<button class="Year">2018</button>
<button class="featureBtn">Illustration</button>
<p>Amet minim mollit non deserunt ullamco est
duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. sit aliqua dolor do
amet sint. Velit officia consequat
duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
<div class="feature-box">
<div class="feature-details">
<h2>UI Interactions of the week</h2>
<button class="Year">2018</button>
<button class="featureBtn">Typography</button>
<p>Amet minim mollit non deserunt ullamco est
duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. sit aliqua dolor do
amet sint. Velit officia consequat
duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
</div>
</div>
</section>
<footer>
<section class="icons"><i class="fa-brands fa-square-facebook"></i><i class="fa-brands fa-instagram"></i><i
class="fa-brands fa-twitter"></i><i class="fa-brands fa-linkedin"></i>
</section>
<section class="copyright">
<p>Copyright ©2020 All rights reserved </p>
</section>
</footer>
</div>
<script>
var menu = document.querySelector('.fa-bars');
var List = document.querySelector('.mobile-menu').classList;
menu.addEventListener('click', () => {
List.toggle('active');
})
</script>
</body>
</html>