Blocks - Blog

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <h2 class="display-4 mb-3 text-center">Our Journal</h2>
    <p class="lead fs-lg mb-10 text-center px-md-16 px-lg-21 px-xl-0">Here are the latest company news from our blog that got the most attention.</p>
    <div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <article>
              <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b4.jpg" alt="" /></a>
                <figcaption>
                  <h5 class="from-top mb-0">Read More</h5>
                </figcaption>
              </figure>
              <div class="post-header">
                <div class="post-category text-line">
                  <a href="#" class="hover" rel="category">Coding</a>
                </div>
                <!-- /.post-category -->
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
              </div>
              <!-- /.post-header -->
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
                  <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
                </ul>
                <!-- /.post-meta -->
              </div>
              <!-- /.post-footer -->
            </article>
            <!-- /article -->
          </div>
          <!--/.swiper-slide -->
          <div class="swiper-slide">
            <article>
              <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b5.jpg" alt="" /></a>
                <figcaption>
                  <h5 class="from-top mb-0">Read More</h5>
                </figcaption>
              </figure>
              <div class="post-header">
                <div class="post-category text-line">
                  <a href="#" class="hover" rel="category">Workspace</a>
                </div>
                <!-- /.post-category -->
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
              </div>
              <!-- /.post-header -->
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
                  <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
                </ul>
                <!-- /.post-meta -->
              </div>
              <!-- /.post-footer -->
            </article>
            <!-- /article -->
          </div>
          <!--/.swiper-slide -->
          <div class="swiper-slide">
            <article>
              <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b6.jpg" alt="" /></a>
                <figcaption>
                  <h5 class="from-top mb-0">Read More</h5>
                </figcaption>
              </figure>
              <div class="post-header">
                <div class="post-category text-line">
                  <a href="#" class="hover" rel="category">Meeting</a>
                </div>
                <!-- /.post-category -->
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ultricies fusce porta elit</a></h2>
              </div>
              <!-- /.post-header -->
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
                  <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
                </ul>
                <!-- /.post-meta -->
              </div>
              <!-- /.post-footer -->
            </article>
            <!-- /article -->
          </div>
          <!--/.swiper-slide -->
          <div class="swiper-slide">
            <article>
              <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b7.jpg" alt="" /></a>
                <figcaption>
                  <h5 class="from-top mb-0">Read More</h5>
                </figcaption>
              </figure>
              <div class="post-header">
                <div class="post-category text-line">
                  <a href="#" class="hover" rel="category">Business Tips</a>
                </div>
                <!-- /.post-category -->
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
              </div>
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
                  <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
                </ul>
                <!-- /.post-meta -->
              </div>
              <!-- /.post-footer -->
            </article>
            <!-- /article -->
          </div>
          <!--/.swiper-slide -->
        </div>
        <!--/.swiper-wrapper -->
      </div>
      <!-- /.swiper -->
    </div>
    <!-- /.swiper-container -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
      <div class="col-lg-4 mt-lg-2">
        <h2 class="display-4 mb-3">Our Journal</h2>
        <p class="lead fs-lg mb-6 pe-xxl-5">Here are the latest news from our blog that got the most attention.</p>
        <a href="#" class="btn btn-soft-primary rounded-pill">View All News</a>
      </div>
      <!-- /column -->
      <div class="col-lg-8">
        <div class="swiper-container blog grid-view mb-6" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <article>
                  <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b4.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="post-header">
                    <div class="post-category text-line">
                      <a href="#" class="hover" rel="category">Coding</a>
                    </div>
                    <!-- /.post-category -->
                    <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
                  </div>
                  <!-- /.post-header -->
                  <div class="post-footer">
                    <ul class="post-meta mb-0">
                      <li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
                      <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
                    </ul>
                    <!-- /.post-meta -->
                  </div>
                  <!-- /.post-footer -->
                </article>
                <!-- /article -->
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <article>
                  <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b5.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="post-header">
                    <div class="post-category text-line">
                      <a href="#" class="hover" rel="category">Workspace</a>
                    </div>
                    <!-- /.post-category -->
                    <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
                  </div>
                  <!-- /.post-header -->
                  <div class="post-footer">
                    <ul class="post-meta mb-0">
                      <li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
                      <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
                    </ul>
                    <!-- /.post-meta -->
                  </div>
                  <!-- /.post-footer -->
                </article>
                <!-- /article -->
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <article>
                  <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b6.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="post-header">
                    <div class="post-category text-line">
                      <a href="#" class="hover" rel="category">Meeting</a>
                    </div>
                    <!-- /.post-category -->
                    <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ultricies fusce porta elit</a></h2>
                  </div>
                  <!-- /.post-header -->
                  <div class="post-footer">
                    <ul class="post-meta mb-0">
                      <li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
                      <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
                    </ul>
                    <!-- /.post-meta -->
                  </div>
                  <!-- /.post-footer -->
                </article>
                <!-- /article -->
              </div>
              <!--/.swiper-slide -->
              <div class="swiper-slide">
                <article>
                  <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b7.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="post-header">
                    <div class="post-category text-line">
                      <a href="#" class="hover" rel="category">Business Tips</a>
                    </div>
                    <!-- /.post-category -->
                    <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
                  </div>
                  <div class="post-footer">
                    <ul class="post-meta mb-0">
                      <li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
                      <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
                    </ul>
                    <!-- /.post-meta -->
                  </div>
                  <!-- /.post-footer -->
                </article>
                <!-- /article -->
              </div>
              <!--/.swiper-slide -->
            </div>
            <!--/.swiper-wrapper -->
          </div>
          <!-- /.swiper -->
        </div>
        <!-- /.swiper-container -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row">
      <div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
        <h2 class="fs-15 text-uppercase text-primary text-center">Our News</h2>
        <h3 class="display-4 mb-6 text-center">Here are the latest company news from our blog that got the most attention.</h3>
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
    <div class="position-relative">
      <div class="shape bg-dot primary rellax w-17 h-20" data-rellax-speed="1" style="top: 0; left: -1.7rem;"></div>
      <div class="swiper-container dots-closer blog grid-view mb-6" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="item-inner">
                <article>
                  <div class="card">
                    <figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./img/photos/b4.jpg" alt="" /></a>
                      <figcaption>
                        <h5 class="from-top mb-0">Read More</h5>
                      </figcaption>
                    </figure>
                    <div class="card-body">
                      <div class="post-header">
                        <div class="post-category text-line">
                          <a href="#" class="hover" rel="category">Coding</a>
                        </div>
                        <!-- /.post-category -->
                        <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
                      </div>
                      <!-- /.post-header -->
                      <div class="post-content">
                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
                      </div>
                      <!-- /.post-content -->
                    </div>
                    <!--/.card-body -->
                    <div class="card-footer">
                      <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
                        <li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>5</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.card-footer -->
                  </div>
                  <!-- /.card -->
                </article>
                <!-- /article -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <article>
                  <div class="card">
                    <figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./img/photos/b5.jpg" alt="" /></a>
                      <figcaption>
                        <h5 class="from-top mb-0">Read More</h5>
                      </figcaption>
                    </figure>
                    <div class="card-body">
                      <div class="post-header">
                        <div class="post-category text-line">
                          <a href="#" class="hover" rel="category">Workspace</a>
                        </div>
                        <!-- /.post-category -->
                        <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
                      </div>
                      <!-- /.post-header -->
                      <div class="post-content">
                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
                      </div>
                      <!-- /.post-content -->
                    </div>
                    <!--/.card-body -->
                    <div class="card-footer">
                      <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
                        <li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>3</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.card-footer -->
                  </div>
                  <!-- /.card -->
                </article>
                <!-- /article -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <article>
                  <div class="card">
                    <figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./img/photos/b6.jpg" alt="" /></a>
                      <figcaption>
                        <h5 class="from-top mb-0">Read More</h5>
                      </figcaption>
                    </figure>
                    <div class="card-body">
                      <div class="post-header">
                        <div class="post-category text-line">
                          <a href="#" class="hover" rel="category">Meeting</a>
                        </div>
                        <!-- /.post-category -->
                        <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ultricies fusce porta elit</a></h2>
                      </div>
                      <!-- /.post-header -->
                      <div class="post-content">
                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
                      </div>
                      <!-- /.post-content -->
                    </div>
                    <!--/.card-body -->
                    <div class="card-footer">
                      <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2021</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
                        <li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>3</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.card-footer -->
                  </div>
                  <!-- /.card -->
                </article>
                <!-- /article -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <div class="item-inner">
                <article>
                  <div class="card">
                    <figure class="card-img-top overlay overlay-1 hover-scale"><a href="#"> <img src="./img/photos/b7.jpg" alt="" /></a>
                      <figcaption>
                        <h5 class="from-top mb-0">Read More</h5>
                      </figcaption>
                    </figure>
                    <div class="card-body">
                      <div class="post-header">
                        <div class="post-category text-line">
                          <a href="#" class="hover" rel="category">Business Tips</a>
                        </div>
                        <!-- /.post-category -->
                        <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
                      </div>
                      <!-- /.post-header -->
                      <div class="post-content">
                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.</p>
                      </div>
                      <!-- /.post-content -->
                    </div>
                    <!--/.card-body -->
                    <div class="card-footer">
                      <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2021</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
                        <li class="post-likes ms-auto"><a href="#"><i class="uil uil-heart-alt"></i>5</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.card-footer -->
                  </div>
                  <!-- /.card -->
                </article>
                <!-- /article -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
          </div>
          <!--/.swiper-wrapper -->
        </div>
        <!-- /.swiper -->
      </div>
      <!-- /.swiper-container -->
    </div>
    <!-- /.position-relative -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row align-items-center mb-10">
      <div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
        <h2 class="display-4 mb-0">Company news from our blog that got the most attention.</h2>
      </div>
      <!--/column -->
      <div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
        <a href="#" class="btn btn-soft-primary rounded-pill mb-0">View All News</a>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="row gx-lg-8 gx-xl-11 gy-10 blog grid-view">
      <div class="col-lg-8">
        <article class="post">
          <div class="post-slider rounded mb-6">
            <div class="swiper-container dots-over" data-margin="5" data-dots="true">
              <div class="swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><img src="./img/photos/b2.jpg" alt="" /></div>
                  <div class="swiper-slide"><img src="./img/photos/b3.jpg" alt="" /></div>
                </div>
                <!--/.swiper-wrapper -->
              </div>
              <!-- /.swiper -->
            </div>
            <!-- /.swiper-container -->
          </div>
          <!-- /.post-slider -->
          <div class="post-header mb-5">
            <div class="post-category text-line">
              <a href="#" class="hover" rel="category">Ideas</a>
            </div>
            <!-- /.post-category -->
            <h2 class="post-title mt-1 mb-4"><a class="link-dark" href="./blog-post.html">Fringilla Ligula Pharetra Amet</a></h2>
            <ul class="post-meta mb-0">
              <li class="post-date"><i class="uil uil-calendar-alt"></i><span>5 Jul 2021</span></li>
              <li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Sandbox</span></a></li>
              <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3<span> Comments</span></a></li>
            </ul>
            <!-- /.post-meta -->
          </div>
          <!-- /.post-header -->
          <div class="post-content">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
          </div>
          <!-- /.post-content -->
        </article>
        <!-- /.post -->
      </div>
      <!-- /column -->
      <div class="col-lg-4">
        <div class="row gy-10">
          <div class="col-md-6 col-lg-12">
            <article class="post">
              <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b1.jpg" alt="" /></a>
                <figcaption>
                  <h5 class="from-top mb-0">Read More</h5>
                </figcaption>
              </figure>
              <div class="post-header">
                <div class="post-category text-line">
                  <a href="#" class="hover" rel="category">Coding</a>
                </div>
                <!-- /.post-category -->
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
              </div>
              <!-- /.post-header -->
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2021</span></li>
                  <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
                </ul>
                <!-- /.post-meta -->
              </div>
              <!-- /.post-footer -->
            </article>
            <!-- /.post -->
          </div>
          <!-- /column -->
          <div class="col-md-6 col-lg-12">
            <article class="post">
              <figure class="overlay overlay-1 hover-scale rounded mb-5"><a href="#"> <img src="./img/photos/b4.jpg" alt="" /></a>
                <figcaption>
                  <h5 class="from-top mb-0">Read More</h5>
                </figcaption>
              </figure>
              <div class="post-header">
                <div class="post-category text-line">
                  <a href="#" class="hover" rel="category">Workspace</a>
                </div>
                <!-- /.post-category -->
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
              </div>
              <!-- /.post-header -->
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2021</span></li>
                  <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
                </ul>
                <!-- /.post-meta -->
              </div>
              <!-- /.post-footer -->
            </article>
            <!-- /.post -->
          </div>
          <!-- /column -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->