-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
147 lines (140 loc) · 6.43 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
<!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="icon" href="Imgs/NW.svg" >
<link href="css/style.css" rel="stylesheet" type="" />
<title>Nonso Williams | Blog</title>
</head>
<body>
<section class="hero_container blog_hero">
<div class="hamburger-menu">
<span class="hamburger_layer"></span>
</div>
<header>
<div class="logo">
<img src="Imgs/NW.svg" alt="Logo image" class="logo_img"/>
</div>
<nav>
<ul>
<li><a href="index.html" class="nav-link">HOME</a></li>
<li><a href="index.html" class="nav-link">ABOUT</a></li>
<li><a href="index.html" class="nav-link">PORTFOLIO</a></li>
<li><a href="blog.html" class="nav-link"><span></span>BLOG</a></li>
<li><a href="index.html" class="nav-link">CONTACT</a></li>
</ul>
</nav>
</header>
<div id="hero">
<div class="right_herosection">
<div>
<h1 class="ml6">
<span class="text-wrapper">
<span class="letters">Nonso Williams</span>
</span>
</h1>
<div class="name_underline">
<hr class="underline_item"/>
<img src="/Imgs/_.svg" alt class="underline_img"/>
<hr class="underline_item"/>
</div>
<h3>Blog</h3>
<div class="social">
<a href="" ><img src="Imgs/instagram (1).svg" alt=""></a>
<a href="" ><img src="Imgs/twitter (2).svg" alt=""></a>
</div>
</div>
</div>
</div>
<div class="whitespace">
</div>
</section>
<section class="blogposts_section">
<div class="blogposts_container">
<div class="post_item">
<div class="blog_content">
<h3>Pecan Pie Recipe</h3>
<p>So I woke up this morning and had the most marvelous Idea for my already awesome pecan pie recipe. Yes we’re adding a new ingredient but it’s somehing thta you can easily lay your hand...</p>
<p>5 Mins | 20.3K likes | <span><a href="blog-post.html">Read</a></span></p>
</div>
</div>
<div class="post_item">
<div class="blog_content">
<h3>My Journey So Far</h3>
<p>A lot of folks see me and go oh wow you’re the Fondat King and want to get a picture thanks to the show on Food Network but they don’t know the full story of what it took to get here... </p>
<p>5 Mins | 20.3K likes | <span><a href="blog-post.html">Read</a></span></p>
</div>
</div>
<div class="post_item">
<div class="blog_content">
<h3>Italian Short Bread</h3>
<p>Itakian Short Bread is a more or less a default when it comes to meals in this the streets o Milan and the canals of Venice. Mainly eaten with soup or sauce of different kinds., here is a recipe</p>
<p>5 Mins | 20.3K likes | <span><a href="blog-post.html">Read</a></span></p>
</div>
</div>
<div class="post_item">
<div class="blog_content">
<h3>Lemon Crustard Custard</h3>
<p>So I woke up this morning and had the most marvelous Idea for my already awesome pecan pie recipe. Yes we’re adding a new ingredient but it’s somehing thta you can easily lay your hand...</p>
<p>5 Mins | 20.3K likes | <span><a href="blog-post.html">Read</a></span></p>
</div>
</div>
<div class="pagination_container">
<p class="page">1</p>
<p class="page">2</p>
<p class="page">3</p>
</div>
</div>
<div class="recentpost_flex">
<div class="recentpost_container">
<h3>Recent Posts <hr class="recent_underline"/></h3>
<ul>
<li><a href="#">July - 0</a></li>
<li><a href="#">June - 3</a></li>
<li><a href="#">May - 3</a></li>
<li><a href="#">April - 4</a></li>
<li><a href="#">March - 2</a></li>
<li><a href="#">February - 1</a></li>
<li><a href="#">January - 2</a></li>
<li><a href="#">2019</a></li>
<li><a href="#">2018</a></li>
</ul>
<h3>Tags <hr class="tag_underline" /></h3>
<div class="recentpost_tags">
<p>Recipe</p>
<p>Lifestyle</p>
<p>Travels</p>
<p>Gigs</p>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="copyright footer_heading">
<h5>© <span>Nonso Williams</span></h5>
</div>
<div class="socials">
<a href=""><img src="./Imgs/instagram (2).svg" alt="Instagram account" /></a>
<a href=""><img src="./Imgs/twitter (3).svg" alt="twitter account" /></a>
</div>
</footer>
<script>
document.querySelector('.hamburger-menu').addEventListener('click',()=>{
document.querySelector('.hamburger-menu').classList.toggle('open');
document.querySelector('nav').classList.toggle('open');
document.body.style.overflowY = document.body.style.overflowY === 'hidden' ? 'visible' : 'hidden';
})
document.querySelectorAll('.nav-link').forEach(link=>{
if(window.screen.width < 701){
link.addEventListener('click',()=>{
document.querySelector('.hamburger-menu').classList.remove('open');
document.querySelector('nav').classList.remove('open');
document.body.style.overflowY = document.body.style.overflowY === 'hidden' ? 'visible' : 'hidden';
})
}
});
</script>
</body>
</html>