---
layout: inner
title: Blog page
---

{{>breadcrumb}}
<div class="container">
  <div class="featured-post mb-5 bg-soft-green rounded hover-box-shadow">
    <div class="row align-items-md-center">
      <div class="col-lg-6 col-md-12">
        <div class="featured-post--img position-relative ">
          <img
            alt="bg image"
            class="bg-image rounded-left"
            src="assets/img/group-31_1575999333631.png"
          />
        </div>
      </div>

      <div class="col-lg-6 col-md-12">
        <div class="p-4">
          <div
            class="blog-date d-flex justify-content-start align-items-center mb-2"
          >
            <a href="#!" class="label font-weight-bold">Business</a>
          </div>
          <h2 class="h3 mb-2">
            <a href="#" class="blog-title text-dark"
              >Marketing Attribution—New Tech, New Trends, New Thinking</a
            >
          </h2>

          <p class="lead">
            Webinar host and Customer Success advocate Jason Doe takes you
            through the landing page creation process.
          </p>
          <div
            class="card-footer border-0 d-flex justify-content-between align-items-center mt-5 px-0 py-3"
          >
            <div
              class="author-box d-sm-flex flex-row flex-wrap text-center align-items-center"
            >
              <img
                src="assets/img/avatar.jpg"
                class="img-sm rounded-circle"
                alt="profile image"
              />
              <div class=" ml-sm-3 ml-md-0 ml-xl-3 text-left">
                <h6 class="mt-1 mb-0">Laura Joe Doe</h6>
                <p class="mb-1">creative formulator</p>
              </div>
            </div>
            <a
              href="#!"
              class="bg-soft-danger py-1 px-2 rounded-pill text-danger small"
            >
              <i class="las la-heart mr-1"></i>145
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row d-flex flex-wrap align-items-stretch">
    <div class="col-md-4 mb-4">
      <div class="card colored-card color-dark hover-box-shadow border-0">
        <div class="card-body p-5">
          <div
            class="blog-date d-flex justify-content-between align-items-center mb-4"
          >
            <a href="#!" class="label font-weight-bold">Business</a>
            <span class="small">16th Mart</span>
          </div>
          <h2 class="h3 mb-2">
            <a href="#" class="blog-title"
              >New ES2019 Features Every JavaScript Developer Should Know</a
            >
          </h2>
          <p class="mb-6 mt-3">
            Save 20% on Your Favorite Product: Our #000000 Friday Sale is
            Here!..
          </p>

          <div
            class="card-footer border-0 d-flex justify-content-between align-items-center mt-5 px-0 py-3"
          >
            <div
              class="author-box d-sm-flex flex-row flex-wrap text-center align-items-center"
            >
              <img
                src="assets/img/avatar.jpg"
                class="img-sm rounded-circle"
                alt="profile image"
              />
              <div class=" ml-sm-3 ml-md-0 ml-xl-3 text-left">
                <h6 class="mt-1 mb-0">Laura Joe Doe</h6>
                <p class="mb-1">creative formulator</p>
              </div>
            </div>
            <a
              href="#!"
              class="bg-soft-danger py-1 px-2 rounded-pill text-danger small"
            >
              <i class="las la-heart mr-1"></i>145
            </a>
          </div>
        </div>
      </div>
      <!-- end of card -->
    </div>
    <!-- end of col -->
    <div class="col-md-4 mb-4">
      <div class="card colored-card color-light hover-box-shadow border-0">
        <div class="card-body p-5 bg-success-alt">
          <div
            class="blog-date d-flex justify-content-between align-items-center mb-4"
          >
            <a href="#!" class="label font-weight-bold">Business</a>
            <span class="small">16th Mart</span>
          </div>
          <h2 class="h3 mb-2">
            <a href="#" class="blog-title"
              >New ES2019 Features Every JavaScript Developer Should Know</a
            >
          </h2>
          <p class="mb-6 mt-3">
            Save 20% on Your Favorite Product: Our #000000 Friday Sale is
            Here!..
          </p>

          <div
            class="card-footer border-0 d-flex justify-content-between align-items-center mt-5 px-0 py-3"
          >
            <div
              class="author-box d-sm-flex flex-row flex-wrap text-center align-items-center"
            >
              <img
                src="assets/img/avatar.jpg"
                class="img-sm rounded-circle"
                alt="profile image"
              />
              <div class=" ml-sm-3 ml-md-0 ml-xl-3 text-left">
                <h6 class="mt-1 mb-0">Laura Joe Doe</h6>
                <p class="mb-1">creative formulator</p>
              </div>
            </div>
            <a
              href="#!"
              class="bg-soft-danger py-1 px-2 rounded-pill text-danger small"
            >
              <i class="las la-heart mr-1"></i>145
            </a>
          </div>
        </div>
      </div>
      <!-- end of card -->
    </div>
    <div class="col-md-4 mb-4">
      <div class="card colored-card color-light hover-box-shadow border-0">
        <div class="card-body p-5 bg-blue-2-alt">
          <div
            class="blog-date d-flex justify-content-between align-items-center mb-4"
          >
            <a href="#!" class="label font-weight-bold">Business</a>
            <span class="small">16th Mart</span>
          </div>
          <h2 class="h3 mb-2">
            <a href="#" class="blog-title"
              >New ES2019 Features Every JavaScript Developer Should Know</a
            >
          </h2>
          <p class="mb-6 mt-3">
            Save 20% on Your Favorite Product: Our #000000 Friday Sale is
            Here!..
          </p>

          <div
            class="card-footer border-0 d-flex justify-content-between align-items-center mt-5 px-0 py-3"
          >
            <div
              class="author-box d-sm-flex flex-row flex-wrap text-center align-items-center"
            >
              <img
                src="assets/img/avatar.jpg"
                class="img-sm rounded-circle"
                alt="profile image"
              />
              <div class=" ml-sm-3 ml-md-0 ml-xl-3 text-left">
                <h6 class="mt-1 mb-0">Laura Joe Doe</h6>
                <p class="mb-1">creative formulator</p>
              </div>
            </div>
            <a
              href="#!"
              class="bg-soft-danger py-1 px-2 rounded-pill text-danger small"
            >
              <i class="las la-heart mr-1"></i>145
            </a>
          </div>
        </div>
      </div>
      <!-- end of card -->
    </div>
    <div class="col-md-4 mb-4">
      <div class="card colored-card color-light hover-box-shadow border-0">
        <div class="card-body p-5 bg-warning-alt">
          <div
            class="blog-date d-flex justify-content-between align-items-center mb-4"
          >
            <a href="#!" class="label font-weight-bold">Business</a>
            <span class="small">16th Mart</span>
          </div>
          <h2 class="h3 mb-2">
            <a href="#" class="blog-title"
              >New ES2019 Features Every JavaScript Developer Should Know</a
            >
          </h2>
          <p class="mb-6 mt-3">
            Save 20% on Your Favorite Product: Our #000000 Friday Sale is
            Here!..
          </p>

          <div
            class="card-footer border-0 d-flex justify-content-between align-items-center mt-5 px-0 py-3"
          >
            <div
              class="author-box d-sm-flex flex-row flex-wrap text-center align-items-center"
            >
              <img
                src="assets/img/avatar.jpg"
                class="img-sm rounded-circle"
                alt="profile image"
              />
              <div class=" ml-sm-3 ml-md-0 ml-xl-3 text-left">
                <h6 class="mt-1 mb-0">Laura Joe Doe</h6>
                <p class="mb-1">creative formulator</p>
              </div>
            </div>
            <a
              href="#!"
              class="bg-soft-danger py-1 px-2 rounded-pill text-danger small"
            >
              <i class="las la-heart mr-1"></i>145
            </a>
          </div>
        </div>
      </div>
      <!-- end of card -->
    </div>
    <div class="col-md-4 mb-4">
      <div class="card colored-card color-light hover-box-shadow border-0">
        <div class="card-body p-5 bg-danger-alt">
          <div
            class="blog-date d-flex justify-content-between align-items-center mb-4"
          >
            <a href="#!" class="label font-weight-bold">Business</a>
            <span class="small">16th Mart</span>
          </div>
          <h2 class="h3 mb-2">
            <a href="#" class="blog-title"
              >New ES2019 Features Every JavaScript Developer Should Know</a
            >
          </h2>
          <p class="mb-6 mt-3">
            Save 20% on Your Favorite Product: Our #000000 Friday Sale is
            Here!..
          </p>

          <div
            class="card-footer border-0 d-flex justify-content-between align-items-center mt-5 px-0 py-3"
          >
            <div
              class="author-box d-sm-flex flex-row flex-wrap text-center align-items-center"
            >
              <img
                src="assets/img/avatar.jpg"
                class="img-sm rounded-circle"
                alt="profile image"
              />
              <div class=" ml-sm-3 ml-md-0 ml-xl-3 text-left">
                <h6 class="mt-1 mb-0">Laura Joe Doe</h6>
                <p class="mb-1">creative formulator</p>
              </div>
            </div>
            <a
              href="#!"
              class="bg-soft-danger py-1 px-2 rounded-pill text-danger small"
            >
              <i class="las la-heart mr-1"></i>145
            </a>
          </div>
        </div>
      </div>
      <!-- end of card -->
    </div>
    <div class="col-md-4 mb-4">
      <div class="card colored-card color-light hover-box-shadow border-0">
        <div class="card-body p-5 bg-primary-alt">
          <div
            class="blog-date d-flex justify-content-between align-items-center mb-4"
          >
            <a href="#!" class="label font-weight-bold">Business</a>
            <span class="small">16th Mart</span>
          </div>
          <h2 class="h3 mb-2">
            <a href="#" class="blog-title"
              >New ES2019 Features Every JavaScript Developer Should Know</a
            >
          </h2>
          <p class="mb-6 mt-3">
            Save 20% on Your Favorite Product: Our #000000 Friday Sale is
            Here!..
          </p>

          <div
            class="card-footer border-0 d-flex justify-content-between align-items-center mt-5 px-0 py-3"
          >
            <div
              class="author-box d-sm-flex flex-row flex-wrap text-center align-items-center"
            >
              <img
                src="assets/img/avatar.jpg"
                class="img-sm rounded-circle"
                alt="profile image"
              />
              <div class=" ml-sm-3 ml-md-0 ml-xl-3 text-left">
                <h6 class="mt-1 mb-0">Laura Joe Doe</h6>
                <p class="mb-1">creative formulator</p>
              </div>
            </div>
            <a
              href="#!"
              class="bg-soft-danger py-1 px-2 rounded-pill text-danger small"
            >
              <i class="las la-heart mr-1"></i>145
            </a>
          </div>
        </div>
      </div>
      <!-- end of card -->
    </div>
  </div>

  <div class="row d-flex justify-content-center text-center">
    <div class="mt-3">
      <nav aria-label="pagin">
        <ul class="pagination pagination">
          <li class="page-item"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item active"><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="#">Next</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>