---
layout: default
title: "Blog Layout 02"
category_text: "Blog"
category_url: /blog-layout-02.html
---
<section class="py-3 bg-color-3">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb py-0">
                <li class="breadcrumb-item"><a href="{{ '/index.html' | document_url }}">Home</a></li>
                <li class="breadcrumb-item"><a href="#"> Blog </a></li>
                <li class="breadcrumb-item active" aria-current="page">Blog list</li>
            </ol>
        </nav>
    </div>
</section>
<section class="pt-11 pb-11 pb-lg-15">
    <div class="container">
        <h2 class="fs-sm-40 mb-11 text-center">Our Journal</h2>
        <div class="row">
            <div class="col-lg-3 mb-11 mb-lg-0 primary-sidebar sidebar-sticky" id="sidebar">
                <div class="primary-sidebar-inner">
                    <div class="card border-0 mb-9">
                        <div class="card-header bg-transparent border-0 p-0">
                            <h3 class="card-title fs-20 mb-0">
                                Categories
                            </h3>
                        </div>
                        <div class="card-body px-0 pt-4 pb-0">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Sweaters</a>
                                </li>
                                <li class="mb-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Beauty</a>
                                </li>
                                <li class="mb-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Fashion</a>
                                </li>
                                <li class="mb-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Shopping</a>
                                </li>
                                <li class="mb-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Trends</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card border-0 mb-9">
                        <div class="card-header bg-transparent border-0 p-0">
                            <h3 class="card-title fs-20 mb-0">
                                Recent Comments
                            </h3>
                        </div>
                        <div class="card-body px-0 pt-4 pb-0">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-6">
                                    <div class="media">
                                        <div class="mr-2 fs-15 lh-1 mt-2 text-primary"><i
                                                class="fal fa-comment-dots"></i></div>
                                        <div class="media-body">
                                            <p class="mb-0 text-primary lh-175">Jason Freidlich</p>
                                            <p class="font-weight-light text-primary lh-175 mb-0">on <a href="#"
                                                                                                        class="font-weight-bold">Wild
                                                Days In Oregon</a></p>
                                        </div>
                                    </div>
                                </li>
                                <li class="mb-6">
                                    <div class="media">
                                        <div class="mr-2 fs-15 lh-1 mt-2 text-primary"><i
                                                class="fal fa-comment-dots"></i></div>
                                        <div class="media-body">
                                            <p class="mb-0 text-primary lh-175">Jason Freidlich</p>
                                            <p class="font-weight-light text-primary lh-175 mb-0">on <a href="#"
                                                                                                        class="font-weight-bold">Wild
                                                Days In Oregon</a></p>
                                        </div>
                                    </div>
                                </li>
                                <li class="mb-0">
                                    <div class="media">
                                        <div class="mr-2 fs-15 lh-1 mt-2 text-primary"><i
                                                class="fal fa-comment-dots"></i></div>
                                        <div class="media-body">
                                            <p class="mb-0 text-primary lh-175">Jason Freidlich</p>
                                            <p class="font-weight-light text-primary lh-175 mb-0">on <a href="#"
                                                                                                        class="font-weight-bold">Wild
                                                Days In Oregon</a></p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card border-0 mb-9">
                        <div class="card-header bg-transparent border-0 p-0">
                            <h3 class="card-title fs-20 mb-0">
                                Recent Posts
                            </h3>
                        </div>
                        <div class="card-body px-0 pt-6 pb-0">
                            <ul class="list-unstyled mb-0">
                                <li class="mb-6">
                                    <div class="media">
                                        <a href="#" class="d-block w-70px mr-2"><img
                                                src="{{ '/images/recent-post-03.jpg' | document_url }}"
                                                alt="Sampson Totton"></a>
                                        <div class="media-body">
                                            <p class="text-muted fs-12 mb-0 text-uppercase letter-spacing-05 lh-1 mb-1">
                                                April 24,
                                                2019</p>
                                            <a href="#" class="font-weight-bold">How to care for your cotton. </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="mb-6">
                                    <div class="media">
                                        <a href="#" class="w-70px mr-2 d-block"><img
                                                src="{{ '/images/recent-post-02.jpg' | document_url }}"
                                                alt="Sampson Totton"></a>
                                        <div class="media-body">
                                            <p class="text-muted fs-12 mb-0 text-uppercase letter-spacing-05 lh-1 mb-1">
                                                April 24,
                                                2019</p>
                                            <a href="#" class="font-weight-bold">Time for new start ?
                                                We’re hiring </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="mb-0">
                                    <div class="media">
                                        <a href="#" class="w-70px mr-2 d-block"><img
                                                src="{{ '/images/recent-post-01.jpg' | document_url }}"
                                                alt="Sampson Totton"></a>
                                        <div class="media-body">
                                            <p class="text-muted fs-12 mb-0 text-uppercase letter-spacing-05 lh-1 mb-1">
                                                April 24,
                                                2019</p>
                                            <a href="#" class="font-weight-bold">Black live matter</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card border-0 mb-8">
                        <div class="card-header bg-transparent border-0 p-0">
                            <h3 class="card-title fs-20 mb-0">
                                Tags
                            </h3>
                        </div>
                        <div class="card-body px-0 pt-3 pb-0">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Vintage</a>
                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Awesome</a>

                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Summer</a>
                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Beachwear</a>
                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Sunglasses</a>
                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Winter</a>
                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Shorts</a>
                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Cool</a>
                                </li>
                                <li class="list-inline-item mr-2 py-1">
                                    <a href="#"
                                       class="text-secondary hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Nice</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="card border-0 widget-instagram">
                        <div class="card-header bg-transparent border-0 p-0">
                            <h3 class="card-title fs-20 mb-0">
                                Instagram
                            </h3>
                        </div>
                        <div class="card-body px-0 pt-6 pb-0">
                            <div class="row no-gutters">
                                <div class="col-4 item">
                                    <a href="#" class="d-block">
                                        <img src="{{ '/images/in_06.jpg' | document_url }}" alt="Instagram">
                                    </a>

                                </div>
                                <div class="col-4 item">
                                    <a href="#" class="d-block">
                                        <img src="{{ '/images/in_04.jpg' | document_url }}" alt="Instagram">
                                    </a>

                                </div>
                                <div class="col-4 item">
                                    <a href="#" class="d-block">
                                        <img src="{{ '/images/in_08.jpg' | document_url }}" alt="Instagram">
                                    </a>

                                </div>
                                <div class="col-4 item">
                                    <a href="#" class="d-block">
                                        <img src="{{ '/images/in_05.jpg' | document_url }}" alt="Instagram">
                                    </a>

                                </div>
                                <div class="col-4 item">
                                    <a href="#" class="d-block">
                                        <img src="{{ '/images/in_07.jpg' | document_url }}" alt="Instagram">
                                    </a>

                                </div>
                                <div class="col-4 item">
                                    <a href="#" class="d-block">
                                        <img src="{{ '/images/in_02.jpg' | document_url }}" alt="Instagram">
                                    </a>
                                </div>

                            </div>
                            <a href="#" class="d-block mt-1 fs-14"><span class="d-inline-block mr-1 fs-16"><i class="fab fa-instagram"></i></span>@furnitor.stu</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                {% for blog in site.data.blog-02.blogs %}
                <div class="card border-0 mb-7">
                    <div class="row no-gutters">
                        <div class="col-md-6 pr-md-8">
                            <a href="{{ '/blog-post-01.html' | document_url }}"
                               class="hover-shine d-block">
                                <img src="{{ blog.image | document_url }}"
                                     alt="{{blog.title}}">
                            </a>
                        </div>
                        <div class="col-md-6">
                            <div class="card-body py-6 px-0 pb-0">
                                <p class="card-text fs-12 mb-2 text-muted lh-12 text-uppercase letter-spacing-05 font-weight-500">
                                    {{blog.date}}
                                </p>
                                <h3 class="card-title mb-3 fs-20">
                                    <a href="{{ '/blog-post-01.html' | document_url }}">{{blog.title}}</a>
                                </h3>
                                <p class="card-text mb-4 font-weight-500">{{blog.description}} </p>
                                <a href="{{ '/blog-post-01.html' | document_url }}"
                                   class="fs-14 font-weight-bold border-bottom border-light-dark text-uppercase letter-spacing-05 d-inline-block border-hover-primary">
                                    Read more
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
                {% endfor %}
                <nav class="pt-4">
                    <ul class="pagination justify-content-center align-items-center mb-0">
                <li class="page-item fs-12 d-none d-sm-block">
                    <a class="page-link" href="#" tabindex="-1"><i class="far fa-angle-double-left"></i></a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">...</a></li>
                <li class="page-item"><a class="page-link" href="#">6</a></li>
                <li class="page-item fs-12 d-none d-sm-block">
                    <a class="page-link" href="#"><i class="far fa-angle-double-right"></i></a>
                </li>
            </ul>
                </nav>
            </div>
        </div>

    </div>
</section>