HTML example:
<div class="nk-news-box">
<div class="nk-news-box-list">
<div class="nano">
<div class="nano-content">
<div class="nk-news-box-item nk-news-box-item-active">
<div class="nk-news-box-item-img">
<img src="assets/images/post-1-sm.jpg" alt="Smell magic in the air. Or maybe barbecue">
</div>
<img src="assets/images/post-1.jpg" alt="Smell magic in the air. Or maybe barbecue" class="nk-news-box-item-full-img">
<h3 class="nk-news-box-item-title">Smell magic in the air. Or maybe barbecue</h3>
<span class="nk-news-box-item-categories">
<span class="bg-main-4">MMO</span>
</span>
<div class="nk-news-box-item-text">
<p>With what mingled joy and sorrow do I take up the pen to write to my dearest friend! Oh, what a change between to-day and yesterday! Now I am friendless and alone...</p>
</div>
<a href="blog-article.html" class="nk-news-box-item-url">Read More</a>
<div class="nk-news-box-item-date"><span class="fa fa-calendar"></span> Sep 18, 2016</div>
</div>
<div class="nk-news-box-item">
<div class="nk-news-box-item-img">
<img src="assets/images/post-2-sm.jpg" alt="Grab your sword and fight the Horde">
</div>
<img src="assets/images/post-2.jpg" alt="Grab your sword and fight the Horde" class="nk-news-box-item-full-img">
<h3 class="nk-news-box-item-title">Grab your sword and fight the Horde</h3>
<span class="nk-news-box-item-categories">
<span class="bg-main-1">Action</span>
</span>
<div class="nk-news-box-item-text">
<p>For good, too; though, in consequence of my previous emotions, I was still occasionally seized with a stormy sob . After we had jogged on for some little time, I asked the carrier...</p>
</div>
<a href="blog-article.html" class="nk-news-box-item-url">Read More</a>
<div class="nk-news-box-item-date"><span class="fa fa-calendar"></span> Sep 5, 2016</div>
</div>
<div class="nk-news-box-item">
<div class="nk-news-box-item-img">
<img src="assets/images/post-3-sm.jpg" alt="We found a witch! May we burn her?">
</div>
<img src="assets/images/post-3.jpg" alt="We found a witch! May we burn her?" class="nk-news-box-item-full-img">
<h3 class="nk-news-box-item-title">We found a witch! May we burn her?</h3>
<span class="nk-news-box-item-categories">
<span class="bg-main-2">Adventure</span>
</span>
<div class="nk-news-box-item-text">
<p>And she went on planning to herself how she would manage it. `They must go by the carrier,' she thought; `and how funny it'll seem, sending presents to one's own feet!...</p>
</div>
<a href="blog-article.html" class="nk-news-box-item-url">Read More</a>
<div class="nk-news-box-item-date"><span class="fa fa-calendar"></span> Aug 27, 2016</div>
</div>
<div class="nk-news-box-item">
<div class="nk-news-box-item-img">
<img src="assets/images/post-4-sm.jpg" alt="For good, too though, in consequence">
</div>
<img src="assets/images/post-4.jpg" alt="For good, too though, in consequence" class="nk-news-box-item-full-img">
<h3 class="nk-news-box-item-title">For good, too though, in consequence</h3>
<span class="nk-news-box-item-categories">
<span class="bg-main-3">Strategy</span>
</span>
<div class="nk-news-box-item-text">
<p>This little wandering journey, without settled place of abode, had been so unpleasant to me, that my own house, as I called it to myself, was a perfect settlement to me compared to that...</p>
</div>
<a href="blog-article.html" class="nk-news-box-item-url">Read More</a>
<div class="nk-news-box-item-date"><span class="fa fa-calendar"></span> Aug 14, 2016</div>
</div>
<div class="nk-news-box-item">
<div class="nk-news-box-item-img">
<img src="assets/images/post-5-sm.jpg" alt="He made his passenger captain of one">
</div>
<img src="assets/images/post-5.jpg" alt="He made his passenger captain of one" class="nk-news-box-item-full-img">
<h3 class="nk-news-box-item-title">He made his passenger captain of one</h3>
<span class="nk-news-box-item-categories">
<span class="bg-main-5">Indie</span>
</span>
<div class="nk-news-box-item-text">
<p>Just then her head struck against the roof of the hall: in fact she was now more than nine feet high, and she at once took up the little golden key and hurried off to the garden door...</p>
</div>
<a href="blog-article.html" class="nk-news-box-item-url">Read More</a>
<div class="nk-news-box-item-date"><span class="fa fa-calendar"></span> Jul 23, 2016</div>
</div>
<div class="nk-news-box-item">
<div class="nk-news-box-item-img">
<img src="assets/images/post-6-sm.jpg" alt="At first, for some time, I was not able to answer">
</div>
<img src="assets/images/post-6.jpg" alt="At first, for some time, I was not able to answer" class="nk-news-box-item-full-img">
<h3 class="nk-news-box-item-title">At first, for some time, I was not able to answer</h3>
<span class="nk-news-box-item-categories">
<span class="bg-main-5">Racing</span>
</span>
<div class="nk-news-box-item-text">
<p>This little wandering journey, without settled place of abode, had been so unpleasant to me, that my own house, as I called it to myself, was a perfect settlement to me compared to that...</p>
</div>
<a href="blog-article.html" class="nk-news-box-item-url">Read More</a>
<div class="nk-news-box-item-date"><span class="fa fa-calendar"></span> Jul 3, 2016</div>
</div>
</div>
</div>
</div>
<div class="nk-news-box-each-info">
<div class="nano">
<div class="nano-content">
<!-- There will be inserted info about selected news-->
<div class="nk-news-box-item-image" style="background-image: url('assets/images/post-1.jpg');">
<span class="nk-news-box-item-categories">
<span class="bg-main-4">MMO</span>
</span>
</div>
<h3 class="nk-news-box-item-title">Smell magic in the air. Or maybe barbecue</h3>
<div class="nk-news-box-item-text">
<p>With what mingled joy and sorrow do I take up the pen to write to my dearest friend! Oh, what a change between to-day and yesterday! Now I am friendless and alone...</p>
</div>
<a href="blog-article.html" class="nk-news-box-item-more">Read More</a>
<div class="nk-news-box-item-date">
<span class="fa fa-calendar"></span> Sep 18, 2016
</div>
</div>
</div>
</div>
</div>