-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog-post.html
156 lines (148 loc) · 7.28 KB
/
blog-post.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
<!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 blogpost_hero-container">
<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" id="blogpost-page">
<div class="blogposts_container">
<div class="post_item blogpost_item">
<div class="blog_content">
<h3>Pecan Pie Recipe</h3>
<p>5 Mins | 20.3K likes | <span><a href="#">Read</a></span></p>
</div>
<hr />
</div>
<div class="blogpost_content">
<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 that you can easily lay your hand. For those of you that don’t know Pecan Pie is Southern baking at its finest. It’s made from pecans, with a filling that includes butter, sugar, eggs, and corn syrup. In this case we will be adding a small ingredrient that changes everything and that’s lemon zest. Here are the ingredrients</p>
<ul>
<li>1 Cup of Corn Syrup</li>
<li>3 Eggs</li>
<li>1 Cup Granulated Sugar</li>
<li>2 Tablespoon of melted butter</li>
<li>1 Teaspoon of pure vanilla extract</li>
<li>1 10-inch lemon-zested pie crust</li>
</ul>
<p>So the process for Pecan Pie is actually an easy one to follow without any hassles just follow the steps below and you’re good</p>
<ul>
<li>Preheat the oven to about 350F</li>
<li>Mix corn syrup, eggs, vanilla, butter using a spoon. Add your pecans, stir
and pour the mixture into the pie crust</li>
<li>Bake in the oven for about an 1 hour or 1 hour and 30 minutes</li>
</ul>
<p>That was a simple recipe no? Your pecan pie is ready to be served. I hope you were able to follow through without any hassles. Enjoy!</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 class="blogpost_item" id="new_blogpost">
<div class="blogpost_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="#">Read</a></span></p>
</div>
</div>
<div class="blogpost_item" id="new_blogpost2">
<div class="blogpost_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="#">Read</a></span></p>
</div>
</div>
</div>
</section>
<div class="whitespace blogpost_whitespace"></div>
<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>