{% for post in paginator.posts limit: 1 %}

<div class="padding-container">
    <div class="headline-category">
        <ul>
        <li>
            Headline
        </li>
        {% for category in site.categories limit : 8  %}
            <li>
            <a href="/tags/{{ tag | slugify }}/">{{ category | first | capitalize }} </a>
            </li>
        {% endfor %}
        <li> More </li>
      </ul>
    </div>
</div>


<div class="padding-container headline-bg">
    <div class="headline-container">
        <div style="flex: 1.1; padding: 15px 15px 15px 0px;  background: #fff;
">




            <div class="headline-post-info-item-title">
                {{ post.date | date: "%-d %B %Y %-I %p" }}
            </div>

            <div class="headline-title">
                {{ post.title }} 
            </div>

            <div class="headline-image">
                <img src="/assets/images/Arch 3.svg" height="200px" width="100%">
            </div>

            <div class="highlight-redirect">
                <ul>
                   <li>
                        <i class="fa fa-comments" aria-hidden="true"></i>
                   </li>
                   <li>
                    <i class="fa fa-clone" aria-hidden="true"></i>

                   </li>
                   <li>
                    <i class="fa fa-git" aria-hidden="true"></i>

                   </li>
                   <li>
                    Word Count
                   </li>
                   <li>Mins read</li>
                </ul>
            </div>




        </div>
            <div style="flex: 1.3; padding: 15px 0px 15px 0px; background: #fff;">
                <!-- start headline most left -->
                {% include top.latest.two.html %}
                <!-- end headline most left -->
            </div>
            <div style="flex: 1.2; background: #fafafa; padding: 15px 0px 15px 0px;">
                <div class="headline-post-info">
                    <!-- start headline info -->




                        <div class="headline-post-info-item-title">
                            <i class="fa fa-space-shuttle" aria-hidden="true"></i>
                            &nbsp; Background
                        </div>
    
                        <div class="headline-post-info-item"> 
                        Loren Lpsum lalala papper blod rawr ku ingin memiliki dunia ini panggung sandiwara wo o woow
                        </div>


                        <div class="headline-post-info-item-title">
                            <i class="fa fa-space-shuttle" aria-hidden="true"></i>
                            &nbsp; Objectives
                        </div>
    
                        <div class="headline-post-info-item"> 
                        Loren Lpsum lalala papper blod rawr ku ingin memiliki dunia ini panggung sandiwara wo o woow
                        </div>

                        <div class="headline-post-info-item-title">
                            Tagged Tags
                        </div>
                        <div class="headline-tags">
                            <ul>
                            {% for tags in post.tags %}
                                <li style="background: none;"><a href="/tags/{{ tags }}/">{{ tags }}</a></li>
                            {% endfor %}
                            </ul>
                        </div>

                    <div class="highlight-redirect">
                        <ul>
                            <li>
                                <button class="button-theme1-reversed">Read Article
                                </button>
                            </li>
                        </ul>
                    </div>

                    <!-- end headline info -->
                </div>
            </div>
            
    </div>
</div>
{% endfor %}

<div class="padding-container bg-gray2">

    <div class="theme-divider">
        <ul>
            <li>
                <i class="fa fa-filter" aria-hidden="true"></i> &nbsp; Filter
            </li>
            <li style="border-bottom: 2px #02304779 solid;"><b>Software Engineering</b></li>
            <li>Alter</li>
            <li>Site Updates</li>
            <li>Blog</li>
        </ul>
    </div>

</div>
<div class="padding-container">
    <div class="theme-divider-word">
        Browse our publication based on the content theme or types
    </div>
</div>