irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/blog-details.js
313 lines26 KBJavaScript
RawDownloadHistory
1import Layout from "@/components/layout/Layout"
2import Link from "next/link"
3export default function BlogDetails() {
4
5 return (
6 <>
7 <Layout breadcrumbTitle="Blog Details">
8 <section className="blog-details-area pt-120 pb-120">
9 <div className="container">
10 <div className="row justify-content-center">
11 <div className="col-xl-8">
12 <div className="blog-details-wrap">
13 <div className="blog-details-thumb">
14 <img src="/assets/img/blog/blog_details01.jpg" alt="" />
15 </div>
16 <div className="blog-details-content">
17 <div className="blog-meta">
18 <ul className="list-wrap">
19 <li><i className="far fa-user" /> By <Link href="/blog-details">Admin</Link></li>
20 <li><i className="fas fa-calendar-alt" />23 Dec {new Date().getFullYear()}</li>
21 <li><i className="far fa-comments" />05</li>
22 <li><i className="far fa-eye" />1,526 VIEWS</li>
23 </ul>
24 </div>
25 <h2 className="title">Building worker help each other with at construction site</h2>
26 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at it as layout. The point of using Lorem Ipsum is that it has a more normal distribution.Collaboratively pontificat bleed aedge resources with inexpensive methodologies globally initiate multidisciplinary compatible architectures as our aspiteously repurpose leading edge growth strategies</p>
27 <blockquote>
28 <p>Which Podcasts Should Web Designer And Developers Be Listening To Ultimate Digital Clean our
29 Checklist Prepare eadable when content of a page when looking at its layout.</p>
30 <cite>David H. Molina</cite>
31 </blockquote>
32 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at it as layout. The point of using Lorem Ipsum is that it has a more normal distribution.</p>
33 <div className="bd-inner-img-wrap">
34 <div className="row">
35 <div className="col-md-6">
36 <img src="/assets/img/blog/blog_details02.jpg" alt="" />
37 </div>
38 <div className="col-md-6">
39 <div className="bd-inner-content">
40 <p>The point of using Lorm Ipsum is that it has a our more normal our distribution Collaboratively pontificat bleed edge as resources with inexpensive thje methodologie
41 sglobally initiate multidisciplinary.</p>
42 <ul className="list-wrap">
43 <li><i className="fas fa-check-circle" />Information Tecaccumulation of technologies</li>
44 <li><i className="fas fa-check-circle" />Autonomous house with its garden and office</li>
45 <li><i className="fas fa-check-circle" />Self-expression through decor and art</li>
46 <li><i className="fas fa-check-circle" />Regular update monitoring</li>
47 <li><i className="fas fa-check-circle" />Functional minimalism</li>
48 <li><i className="fas fa-check-circle" />Regular update monitoring</li>
49 </ul>
50 </div>
51 </div>
52 </div>
53 </div>
54 <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in a our some form, by injected humour, or randomised words which don't look even slightly believable. If you are going our as to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle the of text. All the Lorem Ipsum generators on the Internet tend.</p>
55 <div className="blog-details-bottom">
56 <div className="row align-items-center">
57 <div className="col-lg-8">
58 <div className="post-tags">
59 <h5 className="title">Tag:</h5>
60 <ul className="list-wrap">
61 <li><Link href="#">#Construction</Link></li>
62 <li><Link href="#">#Roofing Service</Link></li>
63 <li><Link href="#">#Roofing</Link></li>
64 </ul>
65 </div>
66 </div>
67 <div className="col-lg-4">
68 <div className="blog-post-share">
69 <h5 className="title">Share:</h5>
70 <ul className="list-wrap">
71 <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
72 <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
73 <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
74 <li><Link href="#"><i className="fab fa-instagram" /></Link></li>
75 </ul>
76 </div>
77 </div>
78 </div>
79 </div>
80 </div>
81 <div className="pev-next-post-wrap">
82 <div className="row">
83 <div className="col-md-6">
84 <div className="post-item">
85 <div className="post-inner">
86 <div className="thumb">
87 <Link href="/blog-details"><img src="/assets/img/blog/pb_post_img01.jpg" alt="" /></Link>
88 </div>
89 <div className="content">
90 <h2 className="title"><Link href="/blog-details">Portrait smiling professional engineer laptop</Link></h2>
91 <span><i className="far fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
92 </div>
93 </div>
94 <div className="post-btn">
95 <Link href="/blog-details"><i className="fas fa-arrow-left" />Prev</Link>
96 </div>
97 </div>
98 </div>
99 <div className="col-md-6">
100 <div className="post-item next-post-item">
101 <div className="post-inner">
102 <div className="thumb">
103 <Link href="/blog-details"><img src="/assets/img/blog/pb_post_img02.jpg" alt="" /></Link>
104 </div>
105 <div className="content">
106 <h2 className="title"><Link href="/blog-details">Full shot man with helmet sitting on roof</Link></h2>
107 <span><i className="far fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
108 </div>
109 </div>
110 <div className="post-btn next-btn">
111 <Link href="/blog-details"><i className="fas fa-arrow-right" />next</Link>
112 </div>
113 </div>
114 </div>
115 </div>
116 </div>
117 <div className="comments-wrap">
118 <h4 className="comments-wrap-title">Comments (04)</h4>
119 <div className="latest-comments">
120 <ul className="list-wrap">
121 <li>
122 <div className="comments-box">
123 <div className="comments-avatar">
124 <img src="/assets/img/blog/comment_avatar01.png" alt="" />
125 </div>
126 <div className="comments-text">
127 <div className="avatar-name">
128 <h6 className="name">
129 Abubokkor Siddik
130 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
131 </h6>
132 <span className="date">September 6, {new Date().getFullYear()}</span>
133 </div>
134 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus ultrices.</p>
135 </div>
136 </div>
137 <ul className="list-wrap children">
138 <li>
139 <div className="comments-box">
140 <div className="comments-avatar">
141 <img src="/assets/img/blog/comment_avatar02.png" alt="" />
142 </div>
143 <div className="comments-text">
144 <div className="avatar-name">
145 <h6 className="name">
146 Admin
147 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
148 </h6>
149 <span className="date">September 6, {new Date().getFullYear()}</span>
150 </div>
151 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus ultrices.</p>
152 </div>
153 </div>
154 </li>
155 </ul>
156 </li>
157 <li>
158 <div className="comments-box">
159 <div className="comments-avatar">
160 <img src="/assets/img/blog/comment_avatar03.png" alt="" />
161 </div>
162 <div className="comments-text">
163 <div className="avatar-name">
164 <h6 className="name">
165 Elliot Alderson
166 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
167 </h6>
168 <span className="date">September 6, {new Date().getFullYear()}</span>
169 </div>
170 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus.</p>
171 </div>
172 </div>
173 </li>
174 <li>
175 <div className="comments-box">
176 <div className="comments-avatar">
177 <img src="/assets/img/blog/comment_avatar04.png" alt="" />
178 </div>
179 <div className="comments-text">
180 <div className="avatar-name">
181 <h6 className="name">
182 Enanath Jhon
183 <Link href="#" className="comment-reply-link"><i className="fas fa-reply" />Reply</Link>
184 </h6>
185 <span className="date">September 6, {new Date().getFullYear()}</span>
186 </div>
187 <p>Lorem ipsum dolor sit amet consectetur. Ut tellus suspendisse nulla aliquam. Risus rutrum tellus eget ultrices pretium.</p>
188 </div>
189 </div>
190 </li>
191 </ul>
192 </div>
193 </div>
194 <div className="comment-respond">
195 <h3 className="comment-reply-title">Write Your Comment</h3>
196 <form className="comment-form" action="#">
197 <div className="row">
198 <div className="col-md-4">
199 <div className="form-grp">
200 <input type="text" placeholder="Name *" />
201 </div>
202 </div>
203 <div className="col-md-4">
204 <div className="form-grp">
205 <input type="email" placeholder="Email *" />
206 </div>
207 </div>
208 <div className="col-md-4">
209 <div className="form-grp">
210 <input type="url" placeholder="Website*" />
211 </div>
212 </div>
213 </div>
214 <div className="form-grp">
215 <textarea name="message" placeholder="Comment *" />
216 </div>
217 <button type="submit" className="btn btn-two">Post Comment</button>
218 </form>
219 </div>
220 </div>
221 </div>
222 <div className="col-xl-4 col-lg-6 col-md-10">
223 <aside className="blog-sidebar">
224 <div className="blog-widget">
225 <div className="sidebar-search">
226 <h4 className="widget-title">Search</h4>
227 <form action="#">
228 <input id="search" type="text" placeholder="Search" />
229 <button type="submit"><i className="fas fa-search" /></button>
230 </form>
231 </div>
232 </div>
233 <div className="blog-widget">
234 <h4 className="widget-title">Categories</h4>
235 <div className="categories-list">
236 <ul className="list-wrap">
237 <li><Link href="#">Business Consulting <span>(05)</span></Link></li>
238 <li><Link href="#">Financial Investment <span>(07)</span></Link></li>
239 <li><Link href="#">IT Consultations <span>(03)</span></Link></li>
240 <li><Link href="#">Digital Analytics <span>(04)</span></Link></li>
241 <li><Link href="#">Payment Processing <span>(02)</span></Link></li>
242 <li><Link href="#">Software Solutions <span>(09)</span></Link></li>
243 </ul>
244 </div>
245 </div>
246 <div className="blog-widget">
247 <h4 className="widget-title">Recent News</h4>
248 <div className="rc-post-wrap">
249 <div className="rc-post-item">
250 <div className="rc-post-thumb">
251 <Link href="/blog-details"><img src="/assets/img/blog/rc_post01.jpg" alt="" /></Link>
252 </div>
253 <div className="rc-post-content">
254 <h5 className="title"><Link href="/blog-details">Aerial view of a private house with on roof</Link>
255 </h5>
256 <span><i className="fas fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
257 </div>
258 </div>
259 <div className="rc-post-item">
260 <div className="rc-post-thumb">
261 <Link href="/blog-details"><img src="/assets/img/blog/rc_post02.jpg" alt="" /></Link>
262 </div>
263 <div className="rc-post-content">
264 <h5 className="title"><Link href="/blog-details">Medium shot men working on roof presentation</Link>
265 </h5>
266 <span><i className="fas fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
267 </div>
268 </div>
269 <div className="rc-post-item">
270 <div className="rc-post-thumb">
271 <Link href="/blog-details"><img src="/assets/img/blog/rc_post03.jpg" alt="" /></Link>
272 </div>
273 <div className="rc-post-content">
274 <h5 className="title"><Link href="/blog-details">Free photo cute family a roof above their head</Link>
275 </h5>
276 <span><i className="fas fa-calendar-alt" />22 Jan {new Date().getFullYear()}</span>
277 </div>
278 </div>
279 </div>
280 </div>
281 <div className="blog-widget">
282 <h4 className="widget-title">Popular Tags</h4>
283 <div className="tag-list-wrap">
284 <ul className="list-wrap">
285 <li><Link href="#">Construction</Link></li>
286 <li><Link href="#">Roofing</Link></li>
287 <li><Link href="#">Repairer</Link></li>
288 <li><Link href="#">Maintenance</Link></li>
289 <li><Link href="#">Remodeling</Link></li>
290 <li><Link href="#">Roof</Link></li>
291 <li><Link href="#">Roofing Service</Link></li>
292 <li><Link href="#">Consulting</Link></li>
293 </ul>
294 </div>
295 </div>
296 <div className="blog-widget widget-bg" data-background="/assets/img/blog/widget_bg.jpg">
297 <h4 className="widget-title">Need Help</h4>
298 <div className="sidebar-content">
299 <h4 className="title">Beautiful red brick house with decorative lights</h4>
300 <p>Sit amet consectetur adipiscing elseds do eius mod tempor incididunt</p>
301 <Link href="/contact" className="btn btn-two">Contact Us</Link>
302 </div>
303 </div>
304 </aside>
305 </div>
306 </div>
307 </div>
308 </section>
309
310 </Layout>
311 </>
312 )
313}