@@include('_head.html')

@@include('_navbar.html', { "classList": "center-nav transparent navbar-light", "otherClassList": "w-100 d-flex ms-auto", "otherLanguageSelect": true, "otherBtn": true, "otherBtnClassList": "btn-sm btn-primary rounded-pill", "otherBtnText": "Contact", "otherBtnLink": "@@webRoot/contact.html" })

Blocks - Blog

Copy any custom block snippet below and paste it on your page to build your website easily.

@@include('docs/_blocks-menu.html', {"page": "blocks-blog"})

Our Journal

Here are the latest company news from our blog that got the most attention.

Coding

Ligula tristique quis risus

Workspace

Nullam id dolor elit id nibh

Meeting

Ultricies fusce porta elit

Business Tips

Morbi leo risus porta eget

View example's code

<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="./assets/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 2022</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="./assets/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 2022</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="./assets/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 2022</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="./assets/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 2022</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 -->

Our Journal

Here are the latest news from our blog that got the most attention.

View All News

Coding

Ligula tristique quis risus

Workspace

Nullam id dolor elit id nibh

Meeting

Ultricies fusce porta elit

Business Tips

Morbi leo risus porta eget

View example's code

<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="./assets/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 2022</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="./assets/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 2022</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="./assets/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 2022</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="./assets/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 2022</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 -->

Our News

Here are the latest company news from our blog that got the most attention.

Coding

Ligula tristique quis risus

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.

14 Apr 2022
4
5

Workspace

Nullam id dolor elit id nibh

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.

29 Mar 2022
3
3

Meeting

Ultricies fusce porta elit

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.

26 Feb 2022
6
3

Business Tips

Morbi leo risus porta eget

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor.

7 Jan 2022
2
5

View example's code

<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="./assets/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 2022</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="./assets/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 2022</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="./assets/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 2022</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="./assets/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 2022</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 -->

Company news from our blog that got the most attention.

View All News

Ideas

Fringilla Ligula Pharetra Amet

5 Jul 2022
By Sandbox
3 Comments

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.

Coding

Ligula tristique quis risus

Workspace

Nullam id dolor elit id nibh

View example's code

<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="./assets/img/photos/b2.jpg" alt="" /></div>
                  <div class="swiper-slide"><img src="./assets/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 2022</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="./assets/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 2022</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="./assets/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 2022</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 -->

Here are the latest posts from my blog that grabbed the most attention.

View example's code

<section class="wrapper bg-light">
  <div class="overflow-hidden">
    <div class="container py-14 py-md-16">
      <div class="row">
        <div class="col-xl-7 col-xxl-6 mx-auto text-center">
          <i class="icn-flower text-leaf fs-30 opacity-25"></i>
          <h2 class="display-5 text-center mt-2 mb-10">Here are the latest posts from my blog that grabbed the most attention.</h2>
        </div>
        <!--/column -->
      </div>
      <!--/.row -->
      <div class="swiper-container nav-bottom nav-color mb-14" data-margin="30" data-dots="false" data-nav="true" data-items-lg="3" data-items-md="2" data-items-xs="1">
        <div class="swiper overflow-visible pb-2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <article>
                <div class="card shadow-lg">
                  <figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b12.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="card-body p-6">
                    <div class="post-header">
                      <div class="post-category">
                        <a href="#" class="hover" rel="category">Wedding</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 d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2022</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>4</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.post-footer -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </article>
              <!-- /article -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <article>
                <div class="card shadow-lg">
                  <figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b13.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="card-body p-6">
                    <div class="post-header">
                      <div class="post-category">
                        <a href="#" class="hover" rel="category">Engagement</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 d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2022</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.post-footer -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </article>
              <!-- /article -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <article>
                <div class="card shadow-lg">
                  <figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b14.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="card-body p-6">
                    <div class="post-header">
                      <div class="post-category">
                        <a href="#" class="hover" rel="category">Couples</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 d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2022</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>6</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.post-footer -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </article>
              <!-- /article -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <article>
                <div class="card shadow-lg">
                  <figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b15.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="card-body p-6">
                    <div class="post-header">
                      <div class="post-category">
                        <a href="#" class="hover" rel="category">Engagement</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-footer">
                      <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>17 Jan 2022</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.post-footer -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </article>
              <!-- /article -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <article>
                <div class="card shadow-lg">
                  <figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b16.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="card-body p-6">
                    <div class="post-header">
                      <div class="post-category">
                        <a href="#" class="hover" rel="category">Couples</a>
                      </div>
                      <!-- /.post-category -->
                      <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nulla vitae elit libero</a></h2>
                    </div>
                    <!-- /.post-header -->
                    <div class="post-footer">
                      <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2022</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>1</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.post-footer -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </article>
              <!-- /article -->
            </div>
            <!--/.swiper-slide -->
            <div class="swiper-slide">
              <article>
                <div class="card shadow-lg">
                  <figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b17.jpg" alt="" /></a>
                    <figcaption>
                      <h5 class="from-top mb-0">Read More</h5>
                    </figcaption>
                  </figure>
                  <div class="card-body p-6">
                    <div class="post-header">
                      <div class="post-category">
                        <a href="#" class="hover" rel="category">Wedding</a>
                      </div>
                      <!-- /.post-category -->
                      <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Pharetra augue elit sem</a></h2>
                    </div>
                    <!-- /.post-header -->
                    <div class="post-footer">
                      <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>2 Jan 2022</span></li>
                        <li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
                      </ul>
                      <!-- /.post-meta -->
                    </div>
                    <!-- /.post-footer -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </article>
              <!-- /article -->
            </div>
            <!--/.swiper-slide -->
          </div>
          <!--/.swiper-wrapper -->
        </div>
        <!-- /.swiper -->
      </div>
      <!-- /.swiper-container -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.overflow-hidden -->
</section>
<!-- /section -->

@@include('docs/_footer.html') @@include('_page-progress.html') @@include('_scripts.html')