News Box

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>

 

Was this page helpful?