dbnt.co.kr2019/ajax/index-blog-4-ajax-load-more...

168 lines
8.7 KiB
HTML

<div class="masonry-item no-default-style col-md-6">
<article class="post post-medium border-0 pb-0 mb-5">
<div class="post-image">
<a href="blog-post.html">
<img src="img/blog/medium/blog-64.jpg" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0 w-100" alt="Explained: How does VR actually work?" />
<div class="date p-absolute z-index-2 top-10 right-10 mr-0 mr-3 pl-1 pt-1">
<span class="day bg-color-light font-weight-extra-bold py-2 text-color-dark">15</span>
<span class="month text-1 bg-color-light line-height-9 text-default w-100 top-2 d-block py-0"><span class="text-1">JAN</span></span>
</div>
</a>
</div>
<div class="post-content bg-color-light p-4">
<h2 class="font-weight-bold text-5 line-height-6 mt-0 mb-2"><a href="blog-post.html">Explained: How does VR actually work?</a></h2>
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="post-meta m-0 p-0">
<span><i class="far fa-user"></i> By <a href="#">John Doe</a> </span>
<span><i class="far fa-folder"></i> <a href="#">Technology</a>, <a href="#">Lifestyle</a> </span>
<span><i class="far fa-comments"></i> <a href="#">12 Comments</a></span>
<span class="d-block mt-2"><a href="blog-post.html" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</article>
</div>
<div class="masonry-item no-default-style col-md-6">
<article class="post post-medium border-0 pb-0 mb-5">
<div class="post-image">
<a href="blog-post.html">
<img src="img/blog/medium/blog-65.jpg" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0 w-100" alt="Main Reasons To Stop Texting And Driving" />
<div class="date p-absolute z-index-2 top-10 right-10 mr-0 mr-3 pl-1 pt-1">
<span class="day bg-color-light font-weight-extra-bold py-2 text-color-dark">15</span>
<span class="month text-1 bg-color-light line-height-9 text-default w-100 top-2 d-block py-0"><span class="text-1">JAN</span></span>
</div>
</a>
</div>
<div class="post-content bg-color-light p-4">
<h2 class="font-weight-bold text-5 line-height-6 mt-0 mb-2"><a href="blog-post.html">Main Reasons To Stop Texting And Driving</a></h2>
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="post-meta m-0 p-0">
<span><i class="far fa-user"></i> By <a href="#">John Doe</a> </span>
<span><i class="far fa-folder"></i> <a href="#">Technology</a>, <a href="#">Lifestyle</a> </span>
<span><i class="far fa-comments"></i> <a href="#">12 Comments</a></span>
<span class="d-block mt-2"><a href="blog-post.html" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</article>
</div>
<div class="masonry-item no-default-style col-md-6">
<article class="post post-medium border-0 pb-0 mb-5">
<div class="post-image">
<a href="blog-post.html">
<img src="img/blog/medium/blog-66.jpg" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0 w-100" alt="Tips to Help You Quickly Prepare your Lunch" />
<div class="date p-absolute z-index-2 top-10 right-10 mr-0 mr-3 pl-1 pt-1">
<span class="day bg-color-light font-weight-extra-bold py-2 text-color-dark">15</span>
<span class="month text-1 bg-color-light line-height-9 text-default w-100 top-2 d-block py-0"><span class="text-1">JAN</span></span>
</div>
</a>
</div>
<div class="post-content bg-color-light p-4">
<h2 class="font-weight-bold text-5 line-height-6 mt-0 mb-2"><a href="blog-post.html">Tips to Help You Quickly Prepare your Lunch</a></h2>
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="post-meta m-0 p-0">
<span><i class="far fa-user"></i> By <a href="#">John Doe</a> </span>
<span><i class="far fa-folder"></i> <a href="#">Recipes</a>, <a href="#">Lifestyle</a> </span>
<span><i class="far fa-comments"></i> <a href="#">12 Comments</a></span>
<span class="d-block mt-2"><a href="blog-post.html" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</article>
</div>
<div class="masonry-item no-default-style col-md-6">
<article class="post post-medium border-0 pb-0 mb-5">
<div class="post-image">
<a href="blog-post.html">
<img src="img/blog/medium/blog-67.jpg" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0 w-100" alt="Why should I buy a smartwatch?" />
<div class="date p-absolute z-index-2 top-10 right-10 mr-0 mr-3 pl-1 pt-1">
<span class="day bg-color-light font-weight-extra-bold py-2 text-color-dark">15</span>
<span class="month text-1 bg-color-light line-height-9 text-default w-100 top-2 d-block py-0"><span class="text-1">JAN</span></span>
</div>
</a>
</div>
<div class="post-content bg-color-light p-4">
<h2 class="font-weight-bold text-5 line-height-6 mt-0 mb-2"><a href="blog-post.html">Why should I buy a smartwatch?</a></h2>
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="post-meta m-0 p-0">
<span><i class="far fa-user"></i> By <a href="#">John Doe</a> </span>
<span><i class="far fa-folder"></i> <a href="#">Gadgets</a>, <a href="#">Technology</a> </span>
<span><i class="far fa-comments"></i> <a href="#">12 Comments</a></span>
<span class="d-block mt-2"><a href="blog-post.html" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</article>
</div>
<div class="masonry-item no-default-style col-md-6">
<article class="post post-medium border-0 pb-0 mb-5">
<div class="post-image">
<a href="blog-post.html">
<img src="img/blog/medium/blog-68.jpg" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0 w-100" alt="The best augmented reality smartglasses" />
<div class="date p-absolute z-index-2 top-10 right-10 mr-0 mr-3 pl-1 pt-1">
<span class="day bg-color-light font-weight-extra-bold py-2 text-color-dark">15</span>
<span class="month text-1 bg-color-light line-height-9 text-default w-100 top-2 d-block py-0"><span class="text-1">JAN</span></span>
</div>
</a>
</div>
<div class="post-content bg-color-light p-4">
<h2 class="font-weight-bold text-5 line-height-6 mt-0 mb-2"><a href="blog-post.html">The best augmented reality smartglasses</a></h2>
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="post-meta m-0 p-0">
<span><i class="far fa-user"></i> By <a href="#">John Doe</a> </span>
<span><i class="far fa-folder"></i> <a href="#">Gadgets</a>, <a href="#">Technology</a> </span>
<span><i class="far fa-comments"></i> <a href="#">12 Comments</a></span>
<span class="d-block mt-2"><a href="blog-post.html" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</article>
</div>
<div class="masonry-item no-default-style col-md-6">
<article class="post post-medium border-0 pb-0 mb-5">
<div class="post-image">
<a href="blog-post.html">
<img src="img/blog/medium/blog-69.jpg" class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-0 w-100" alt="12 Healthiest Foods to Eat for Breakfast" />
<div class="date p-absolute z-index-2 top-10 right-10 mr-0 mr-3 pl-1 pt-1">
<span class="day bg-color-light font-weight-extra-bold py-2 text-color-dark">15</span>
<span class="month text-1 bg-color-light line-height-9 text-default w-100 top-2 d-block py-0"><span class="text-1">JAN</span></span>
</div>
</a>
</div>
<div class="post-content bg-color-light p-4">
<h2 class="font-weight-bold text-5 line-height-6 mt-0 mb-2"><a href="blog-post.html">12 Healthiest Foods to Eat for Breakfast</a></h2>
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="post-meta m-0 p-0">
<span><i class="far fa-user"></i> By <a href="#">John Doe</a> </span>
<span><i class="far fa-folder"></i> <a href="#">Recipes</a>, <a href="#">Lifestyle</a> </span>
<span><i class="far fa-comments"></i> <a href="#">12 Comments</a></span>
<span class="d-block mt-2"><a href="blog-post.html" class="btn btn-xs btn-light text-1 text-uppercase">Read More</a></span>
</div>
</div>
</article>
</div>