DESKTOP-GBA0BK8\Admin
311 lines
16 KiB
JavaScript
311 lines
16 KiB
JavaScript
import React, {Component} from 'react';
|
|
|
|
class Blog_listing extends React.Component {
|
|
render() {
|
|
return(
|
|
<div>
|
|
|
|
|
|
{/* PRELOADER SPINNER
|
|
============================================= */}
|
|
<div id="loader-wrapper">
|
|
<div id="loading">
|
|
<span className="cssload-loader"><span className="cssload-loader-inner" /></span>
|
|
</div>
|
|
</div>
|
|
{/* PAGE CONTENT
|
|
============================================= */}
|
|
<div id="page" className="page">
|
|
{/* HEADER
|
|
============================================= */}
|
|
|
|
{/* BLOG POSTS LISTING
|
|
============================================= */}
|
|
<section id="blog-page" className="bg_whitesmoke hero-offset-nav pb-60 blog-page-section division">
|
|
<div className="container">
|
|
{/* SECTION TITLE */}
|
|
<div className="row">
|
|
<div className="col-md-10 offset-md-1">
|
|
<div className="section-title text-center pc-50 mb-70">
|
|
{/* Title */}
|
|
<h3 className="h3-lg">Relevant news, tech stuff, and more for you. Welcome to our blog</h3>
|
|
{/* Text */}
|
|
<p className="p-xl">Aliquam a augue suscipit, luctus neque purus ipsum neque at dolor primis libero
|
|
tempus, blandit and cursus varius
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* FEATURED POST */}
|
|
<div className="rel blog-post featured-post wide-post">
|
|
<div className="row d-flex align-items-center">
|
|
<div className="featured-badge text-center ico-30 bg_whitesmoke yellow-color">
|
|
<span className="flaticon-star" />
|
|
</div>
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="col-lg-7 blog-post-img">
|
|
<img className="img-fluid" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="col-lg-5 blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">NordEx News</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-xl">
|
|
<a href="single-post.html">Tempor sapien donec gravida a suscipit and porta justo vitae</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida a porta
|
|
undo velna dolor in cubilia laoreet
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>12 min read</p>
|
|
</div>
|
|
</div> {/* END BLOG POST TEXT */}
|
|
</div> {/* End row */}
|
|
</div> {/* END FEATURED POST */}
|
|
{/* POSTS WRAPPER */}
|
|
<div className="posts-wrapper">
|
|
{/* BLOG POSTS CATEGORY */}
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<h5 className="h5-lg posts-category">Latest Articles</h5>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
{/* BLOG POST #1 */}
|
|
<div className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img">
|
|
<img className="img-fluid" src="assets/images/blog/post-2-img.jpg" alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">NordEx News</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-xs">
|
|
<a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<p className="p-md">Aliqum mullam blandit vitae and tempor sapien and donec lipsum gravida
|
|
porta undo velna dolor
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>12 min read</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> {/* END BLOG POST #1 */}
|
|
{/* BLOG POST #2 */}
|
|
<div className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img">
|
|
<img className="img-fluid" src="assets/images/blog/post-3-img.jpg" alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">Inspiration</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-xs">
|
|
<a href="single-post.html">Aliquam augue impedit luctus neque purus an ipsum neque and dolor libero risus</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
|
dolor vitae auctor
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>8 min read</p>
|
|
</div>
|
|
</div> {/* END BLOG POST TEXT */}
|
|
</div>
|
|
</div> {/* END BLOG POST #2 */}
|
|
{/* BLOG POST #3 */}
|
|
<div className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img">
|
|
<img className="img-fluid" src="assets/images/blog/post-4-img.jpg" alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">Tutorials</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-xs">
|
|
<a href="single-post.html">Tempor sapien donec gravida ipsum and porta justo</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
|
dolor vitae auctor
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>22 min read</p>
|
|
</div>
|
|
</div> {/* END BLOG POST TEXT */}
|
|
</div>
|
|
</div> {/* END BLOG POST #3 */}
|
|
{/* BLOG POST #4 */}
|
|
<div className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img">
|
|
<img className="img-fluid" src="assets/images/blog/post-5-img.jpg" alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">Extensions</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-xs">
|
|
<a href="single-post.html">Neque purus an ipsum neque and dolor libero risus mullam blandit at tempor sapien</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
|
dolor vitae auctor
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>1 day read</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> {/* END BLOG POST #4 */}
|
|
{/* BLOG POST #5 */}
|
|
<div className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.6s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img">
|
|
<img className="img-fluid" src="assets/images/blog/post-6-img.jpg" alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">Community</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-xs">
|
|
<a href="single-post.html">Tempor sapien donec gravida ipsum a porta justo vitae</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
|
dolor vitae auctor
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>54 min read</p>
|
|
</div>
|
|
</div> {/* END BLOG POST TEXT */}
|
|
</div>
|
|
</div> {/* END BLOG POST #5 */}
|
|
{/* BLOG POST #6 */}
|
|
<div className="col-md-6 col-lg-4">
|
|
<div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.8s">
|
|
{/* BLOG POST IMAGE */}
|
|
<div className="blog-post-img">
|
|
<img className="img-fluid" src="assets/images/blog/post-7-img.jpg" alt="blog-post-image" />
|
|
</div>
|
|
{/* BLOG POST TEXT */}
|
|
<div className="blog-post-txt">
|
|
{/* Post Tag */}
|
|
<p className="p-md post-tag">Extensions</p>
|
|
{/* Post Link */}
|
|
<h5 className="h5-xs">
|
|
<a href="single-post.html">Lipsum gravida porta velna NordEx, donec gravida ipsum a
|
|
porta justo tempor
|
|
</a>
|
|
</h5>
|
|
{/* Text */}
|
|
<p className="p-md">The aliqum mullam vitae tempor sapien and donec lipsum gravida porta velna
|
|
dolor vitae auctor
|
|
</p>
|
|
{/* Post Meta */}
|
|
<div className="post-meta">
|
|
<div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
|
|
<p>4 hours read</p>
|
|
</div>
|
|
</div> {/* END BLOG POST TEXT */}
|
|
</div>
|
|
</div> {/* END BLOG POST #6 */}
|
|
</div> {/* End row */}
|
|
</div> {/* END POSTS WRAPPER */}
|
|
</div> {/* End container */}
|
|
{/* GEOMETRIC OVERLAY */}
|
|
<div className="bg_fixed geometric_overlay" />
|
|
</section> {/* END BLOG POSTS LISTING */}
|
|
{/* PAGE PAGINATION
|
|
============================================= */}
|
|
<div className="bg_whitesmoke pb-100 page-pagination division">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<nav aria-label="Page navigation">
|
|
<ul className="pagination ico-20 justify-content-center">
|
|
<li className="page-item disabled"><a className="page-link" href="#" tabIndex={-1}>
|
|
<span className="flaticon-chevron-pointing-to-the-left" />
|
|
</a></li>
|
|
<li className="page-item active"><a className="page-link" href="#">1 <span className="sr-only">(current)</span></a></li>
|
|
<li className="page-item"><a className="page-link" href="#">2</a></li>
|
|
<li className="page-item"><a className="page-link" href="#">3</a></li>
|
|
<li className="page-item"><a className="page-link" href="#">4</a></li>
|
|
<li className="page-item"><a className="page-link" href="#"><span className="flaticon-right-chevron" /></a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div> {/* End row */}
|
|
</div> {/* End container */}
|
|
</div> {/* END PAGE PAGINATION */}
|
|
{/* NEWSLETTER-1
|
|
============================================= */}
|
|
<section id="newsletter-1" className="bg_whitesmoke pb-20 newsletter-section division">
|
|
<div className="container">
|
|
<div className="newsletter-wrapper bg-white">
|
|
<div className="row d-flex align-items-center">
|
|
{/* SECTION TITLE */}
|
|
<div className="col-lg-6">
|
|
<div className="newsletter-txt">
|
|
{/* Section ID */}
|
|
<span className="section-id">Subscribe to Our Newsletter</span>
|
|
{/* Title */}
|
|
<h4 className="h4-xl">Stay up to date with our news, ideas and updates</h4>
|
|
</div>
|
|
</div>
|
|
{/* NEWSLETTER FORM */}
|
|
<div className="col-lg-6">
|
|
<form className="newsletter-form">
|
|
<div className="input-group">
|
|
<input type="email" autoComplete="off" className="form-control" placeholder="Your email address" required id="s-email" />
|
|
<span className="input-group-btn">
|
|
<button type="submit" className="btn btn-md btn-skyblue tra-skyblue-hover">Subscribe Now</button>
|
|
</span>
|
|
</div>
|
|
{/* Newsletter Form Notification */}
|
|
<label htmlFor="s-email" className="form-notification" />
|
|
</form>
|
|
</div> {/* END NEWSLETTER FORM */}
|
|
</div> {/* End row */}
|
|
</div> {/* End newsletter-holder */}
|
|
</div> {/* End container */}
|
|
</section> {/* END NEWSLETTER-1 */}
|
|
|
|
</div> {/* END PAGE CONTENT */}
|
|
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
export default Blog_listing
|