Blocks - Blog

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

Filter Blocks:

Our Journal

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

<section class="wrapper !bg-[#ffffff] ">
                  <div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
                    <h2 class="text-[calc(1.305rem_+_0.66vw)] font-bold xl:text-[1.8rem] leading-[1.3] mb-3 !text-center">Our Journal</h2>
                    <p class="lead text-[1rem] mb-10 !text-center md:!px-24 lg:!px-[12.5rem] xl:!px-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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b4.jpg" alt="image"></a>
                            <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                              <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                            </figcaption>
                          </figure>
                              <div class="post-header">
                                <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                  <a href="#" class="hover" rel="category">Coding</a>
                                </div>
                                <!-- /.post-category -->
                                <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Ligula tristique quis risus</a></h2>
                              </div>
                              <!-- /.post-header -->
                              <div class="post-footer">
                                <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                  <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
                                  <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b5.jpg" alt="image"></a>
                                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                </figcaption>
                              </figure>
                              <div class="post-header">
                                <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                  <a href="#" class="hover" rel="category">Workspace</a>
                                </div>
                                <!-- /.post-category -->
                                <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Nullam id dolor elit id nibh</a></h2>
                              </div>
                              <!-- /.post-header -->
                              <div class="post-footer">
                                <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                  <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
                                  <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b6.jpg" alt="image"></a>
                                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                </figcaption>
                              </figure>
                              <div class="post-header">
                                <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                  <a href="#" class="hover" rel="category">Meeting</a>
                                </div>
                                <!-- /.post-category -->
                                <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Ultricies fusce porta elit</a></h2>
                              </div>
                              <!-- /.post-header -->
                              <div class="post-footer">
                                <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                  <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
                                  <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b7.jpg" alt="image"></a>
                                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                </figcaption>
                              </figure>
                              <div class="post-header">
                                <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                  <a href="#" class="hover" rel="category">Business Tips</a>
                                </div>
                                <!-- /.post-category -->
                                <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Morbi leo risus porta eget</a></h2>
                              </div>
                              <div class="post-footer">
                                <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                  <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
                                  <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
                                </ul>
                                <!-- /.post-meta -->
                              </div>
                              <!-- /.post-footer -->
                            </article>
                            <!-- /article -->
                          </div>
                          <!--/.swiper-slide -->
                        </div>
                        <!--/.swiper-wrapper -->
                      </div>
                      <!-- /.swiper -->
                    </div>
                    <!-- /.swiper-container -->
                  </div>
</section>
<!-- /section -->

Our Journal

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

View All News 
<section class="wrapper !bg-[#ffffff] ">
                  <div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
                    <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] mt-[-50px] xl:mt-0 lg:mt-0">
                      <div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:px-[35px] lg:px-[20px] px-[15px] max-w-full xl:!mt-2 lg:!mt-2 mt-[50px]">
                        <h2 class="text-[calc(1.305rem_+_0.66vw)] font-bold xl:text-[1.8rem] leading-[1.3] !mb-3">Our Journal</h2>
                        <p class="lead !text-[1.05rem] leading-[1.6] !mb-6 xxl:pr-5">Here are the latest news from our blog that got the most attention.</p>
                        <a href="#" class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]">View All News</a>
                      </div>
                      <!-- /column -->
                      <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:px-[35px] lg:px-[20px] px-[15px] max-w-full md:mt-[50px] sm:mt-[50px] xsm:mt-[50px]">
                        <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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b4.jpg" alt="image"></a>
                                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                </figcaption>
                              </figure>
                                  <div class="post-header">
                                    <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                      <a href="#" class="hover" rel="category">Coding</a>
                                    </div>
                                    <!-- /.post-category -->
                                    <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Ligula tristique quis risus</a></h2>
                                  </div>
                                  <!-- /.post-header -->
                                  <div class="post-footer">
                                    <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
                                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b5.jpg" alt="image"></a>
                                    <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                      <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                    </figcaption>
                                  </figure>
                                  <div class="post-header">
                                    <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                      <a href="#" class="hover" rel="category">Workspace</a>
                                    </div>
                                    <!-- /.post-category -->
                                    <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Nullam id dolor elit id nibh</a></h2>
                                  </div>
                                  <!-- /.post-header -->
                                  <div class="post-footer">
                                    <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
                                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b6.jpg" alt="image"></a>
                                    <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                      <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                    </figcaption>
                                  </figure>
                                  <div class="post-header">
                                    <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                      <a href="#" class="hover" rel="category">Meeting</a>
                                    </div>
                                    <!-- /.post-category -->
                                    <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Ultricies fusce porta elit</a></h2>
                                  </div>
                                  <!-- /.post-header -->
                                  <div class="post-footer">
                                    <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
                                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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 group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b7.jpg" alt="image"></a>
                                    <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                      <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                    </figcaption>
                                  </figure>
                                  <div class="post-header">
                                    <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                      <a href="#" class="hover" rel="category">Business Tips</a>
                                    </div>
                                    <!-- /.post-category -->
                                    <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Morbi leo risus porta eget</a></h2>
                                  </div>
                                  <div class="post-footer">
                                    <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                      <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
                                      <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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>
</section>
<!-- /section -->

Our News

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

image
Read More
Coding

Ligula tristique quis risus

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.

  • 14 Apr 2022
  • 4
  • 5
image
Read More
Workspace

Nullam id dolor elit id nibh

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.

  • 29 Mar 2022
  • 3
  • 3
image
Read More
Meeting

Ultricies fusce porta elit

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.

  • 26 Feb 2022
  • 6
  • 3
image
Read More
Business Tips

Morbi leo risus porta eget

Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.

  • 7 Jan 2022
  • 2
  • 5
<section class="wrapper !bg-[#ffffff] ">
                  <div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
                    <div class="flex flex-wrap mx-[-15px]">
                      <div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] px-[15px] max-w-full !mx-auto">
                        <h2 class="!text-[.75rem] !leading-[1.35] uppercase text-[#3f78e0]  !text-center">Our News</h2>
                        <h3 class="text-[calc(1.305rem_+_0.66vw)] font-bold xl:text-[1.8rem] !leading-[1.3] !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="!relative">
                      <div class="shape bg-dot primary rellax !w-[7rem] !h-[10rem] !absolute z-[1] opacity-50 !bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]" 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 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b4.jpg" alt="image"></a>
                                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                      </figcaption>
                                    </figure>
                                    <div class="card-body flex-[1_1_auto] p-[40px] xl:p-[1.75rem_1.75rem_1rem_1.75rem] lg:p-[1.75rem_1.75rem_1rem_1.75rem] md:p-[1.75rem_1.75rem_1rem_1.75rem] sm:pb-4 xsm:pb-4  ">
                                      <div class="post-header">
                                        <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                          <a href="#" class="hover" rel="category">Coding</a>
                                        </div>
                                        <!-- /.post-category -->
                                        <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Ligula tristique quis risus</a></h2>
                                      </div>
                                      <!-- /.post-header -->
                                      <div class="!relative">
                                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
                                      </div>
                                      <!-- /.post-content -->
                                    </div>
                                    <!--/.card-body -->
                                    <div class="card-footer xl:p-[1.25rem_1.75rem_1.25rem] lg:p-[1.25rem_1.75rem_1.25rem] md:p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
                                      <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
                                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
                                        <li class="post-likes !ml-auto inline-block"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></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 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b5.jpg" alt="image"></a>
                                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                      </figcaption>
                                    </figure>
                                    <div class="card-body flex-[1_1_auto] p-[40px] xl:p-[1.75rem_1.75rem_1rem_1.75rem] lg:p-[1.75rem_1.75rem_1rem_1.75rem] md:p-[1.75rem_1.75rem_1rem_1.75rem] sm:pb-4 xsm:pb-4  ">
                                      <div class="post-header">
                                        <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                          <a href="#" class="hover" rel="category">Workspace</a>
                                        </div>
                                        <!-- /.post-category -->
                                        <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Nullam id dolor elit id nibh</a></h2>
                                      </div>
                                      <!-- /.post-header -->
                                      <div class="!relative">
                                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
                                      </div>
                                      <!-- /.post-content -->
                                    </div>
                                    <!--/.card-body -->
                                    <div class="card-footer xl:p-[1.25rem_1.75rem_1.25rem] lg:p-[1.25rem_1.75rem_1.25rem] md:p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
                                      <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
                                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
                                        <li class="post-likes !ml-auto inline-block"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></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 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b6.jpg" alt="image"></a>
                                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                      </figcaption>
                                    </figure>
                                    <div class="card-body flex-[1_1_auto] p-[40px] xl:p-[1.75rem_1.75rem_1rem_1.75rem] lg:p-[1.75rem_1.75rem_1rem_1.75rem] md:p-[1.75rem_1.75rem_1rem_1.75rem] sm:pb-4 xsm:pb-4  ">
                                      <div class="post-header">
                                        <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                          <a href="#" class="hover" rel="category">Meeting</a>
                                        </div>
                                        <!-- /.post-category -->
                                        <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Ultricies fusce porta elit</a></h2>
                                      </div>
                                      <!-- /.post-header -->
                                      <div class="!relative">
                                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
                                      </div>
                                      <!-- /.post-content -->
                                    </div>
                                    <!--/.card-body -->
                                    <div class="card-footer xl:p-[1.25rem_1.75rem_1.25rem] lg:p-[1.25rem_1.75rem_1.25rem] md:p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
                                      <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
                                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>6</a></li>
                                        <li class="post-likes !ml-auto inline-block"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></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 group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b7.jpg" alt="image"></a>
                                      <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                        <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                                      </figcaption>
                                    </figure>
                                    <div class="card-body flex-[1_1_auto] p-[40px] xl:p-[1.75rem_1.75rem_1rem_1.75rem] lg:p-[1.75rem_1.75rem_1rem_1.75rem] md:p-[1.75rem_1.75rem_1rem_1.75rem] sm:pb-4 xsm:pb-4  ">
                                      <div class="post-header">
                                        <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                          <a href="#" class="hover" rel="category">Business Tips</a>
                                        </div>
                                        <!-- /.post-category -->
                                        <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Morbi leo risus porta eget</a></h2>
                                      </div>
                                      <div class="!relative">
                                        <p>Mauris convallis non ligula non interdum. Gravida vulputate convallis tempus vestibulum cras imperdiet nun eu dolor. Aenean lacinia bibendum nulla sed.</p>
                                      </div>
                                      <!-- /.post-content -->
                                    </div>
                                    <!--/.card-body -->
                                    <div class="card-footer xl:p-[1.25rem_1.75rem_1.25rem] lg:p-[1.25rem_1.75rem_1.25rem] md:p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
                                      <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                                        <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
                                        <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>2</a></li>
                                        <li class="post-likes !ml-auto inline-block"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\eb60']"></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>
                    <!-- /.relative -->
                  </div>
</section>
<!-- /section -->

Company news from our blog that got the most attention.

View All News
image
image
Ideas

Fringilla Ligula Pharetra Amet

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.

<section class="wrapper !bg-[#ffffff] ">
                  <div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
                    <div class="flex flex-wrap mx-[-15px] items-center mb-10">
                      <div class="md:w-8/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:pr-40">
                        <h2 class="text-[calc(1.305rem_+_0.66vw)] font-bold xl:text-[1.8rem] leading-[1.3]  !mb-0">Company news from our blog that got the most attention.</h2>
                      </div>
                      <!--/column -->
                      <div class="md:w-4/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] px-[15px] max-w-full xl:!ml-auto lg:!ml-auto md:!ml-auto xl:!text-right lg:!text-right md:!text-right mt-5 xl:!mt-0 lg:!mt-0 md:!mt-0">
                        <a href="#" class="btn btn-soft-primary !rounded-[50rem]  !mb-0">View All News</a>
                      </div>
                      <!--/column -->
                    </div>
                    <!--/.row -->
                    <div class="flex flex-wrap xl:mx-[-30px] lg:mx-[-20px] mx-[-15px] mt-[-50px] blog grid-view">
                      <div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:px-[30px] lg:px-[20px] px-[15px] max-w-full mt-[50px]">
                        <article class="post mb-8">
                          <div class="post-slider rounded !mb-6">
                            <div class="swiper-container dots-over relative !z-10" 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="image"></div>
                                  <div class="swiper-slide"><img src="../../assets/img/photos/b3.jpg" alt="image"></div>
                                </div>
                                <!--/.swiper-wrapper -->
                              </div>
                              <!-- /.swiper -->
                            </div>
                            <!-- /.swiper-container -->
                          </div>
                          <!-- /.post-slider -->
                          <div class="post-header mb-5">
                            <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                              <a href="#" class="hover" rel="category">Ideas</a>
                            </div>
                            <!-- /.post-category -->
                            <h2 class="post-title mt-1 mb-4"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../../blog-post.html">Fringilla Ligula Pharetra Amet</a></h2>
                            <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                              <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>5 Jul 2022</span></li>
                              <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i><span>By Sandbox</span></a></li>
                              <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3<span> Comments</span></a></li>
                            </ul>
                            <!-- /.post-meta -->
                          </div>
                          <!-- /.post-header -->
                          <div class="!relative">
                            <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="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:px-[30px] lg:px-[20px] px-[15px] max-w-full mt-[50px]">
                        <div class="flex flex-wrap mx-[-15px] mt-[-50px]">
                          <div class="md:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full mt-[50px]">
                            <article class="post">
                          <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b1.jpg" alt="image"></a>
                            <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                              <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                            </figcaption>
                          </figure>
                              <div class="post-header">
                                <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                  <a href="#" class="hover" rel="category">Coding</a>
                                </div>
                                <!-- /.post-category -->
                                <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Ligula tristique quis risus</a></h2>
                              </div>
                              <!-- /.post-header -->
                              <div class="post-footer">
                                <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                  <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
                                  <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>4</a></li>
                                </ul>
                                <!-- /.post-meta -->
                              </div>
                              <!-- /.post-footer -->
                            </article>
                            <!-- /.post -->
                          </div>
                          <!-- /column -->
                          <div class="md:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full mt-[50px]">
                            <article class="post">
                          <figure class="overlay overlay-1 hover-scale group rounded !mb-5"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b4.jpg" alt="image"></a>
                            <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                              <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                            </figcaption>
                          </figure>
                              <div class="post-header">
                                <div class="inline-flex mb-[.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc] relative align-top pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
                                  <a href="#" class="hover" rel="category">Workspace</a>
                                </div>
                                <!-- /.post-category -->
                                <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../blog-post.html">Nullam id dolor elit id nibh</a></h2>
                              </div>
                              <!-- /.post-header -->
                              <div class="post-footer">
                                <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none  !mb-0">
                                  <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
                                  <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>3</a></li>
                                </ul>
                                <!-- /.post-meta -->
                              </div>
                              <!-- /.post-footer -->
                            </article>
                            <!-- /.post -->
                          </div>
                          <!-- /column -->
                        </div>
                        <!-- /.row -->
                      </div>
                      <!-- /column -->
                    </div>
                    <!-- /.row -->
                  </div>
</section>
<!-- /section -->

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

<section class="wrapper !bg-[#ffffff] ">
  <div class="overflow-hidden">
  
  <div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
  <div class="flex flex-wrap mx-[-15px]">
    <div class="xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full !mx-auto !text-center">
      <i class="icn-flower text-[#3f78e0]  xl:text-[1.5rem] text-[calc(1.275rem_+_0.3vw)] opacity-25"></i>
      <h2 class="text-[calc(1.285rem_+_0.42vw)] font-bold xl:text-[1.6rem] leading-[1.3] !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-4 relative z-10" 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-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
              <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="../../assets/img/photos/b12.jpg" alt="image"></a>
                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                </figcaption>
              </figure>
              <div class="card-body p-6">
                <div class="post-header">
                  <div class="post-category mb-[0.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc]">
                    <a href="#" class="hover" rel="category">Wedding</a>
                  </div>
                  <!-- /.post-category -->
                  <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../../blog-post.html">Ligula tristique quis risus</a></h2>
                </div>
                <!-- /.post-header -->
                <div class="post-footer">
                  <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                    <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14 Apr 2022</span></li>
                    <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
              <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img src="../../assets/img/photos/b13.jpg" alt="image"></a>
                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                </figcaption>
              </figure>
              <div class="card-body p-6">
                <div class="post-header">
                  <div class="post-category mb-[0.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc]">
                    <a href="#" class="hover" rel="category">Engagement</a>
                  </div>
                  <!-- /.post-category -->
                  <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../../blog-post.html">Nullam id dolor elit id nibh</a></h2>
                </div>
                <!-- /.post-header -->
                <div class="post-footer">
                  <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                    <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29 Mar 2022</span></li>
                    <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
              <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img src="../../assets/img/photos/b14.jpg" alt="image"></a>
                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                </figcaption>
              </figure>
              <div class="card-body p-6">
                <div class="post-header">
                  <div class="post-category mb-[0.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc]">
                    <a href="#" class="hover" rel="category">Couples</a>
                  </div>
                  <!-- /.post-category -->
                  <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../../blog-post.html">Ultricies fusce porta elit</a></h2>
                </div>
                <!-- /.post-header -->
                <div class="post-footer">
                  <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                    <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26 Feb 2022</span></li>
                    <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
              <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img src="../../assets/img/photos/b15.jpg" alt="image"></a>
                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                </figcaption>
              </figure>
              <div class="card-body p-6">
                <div class="post-header">
                  <div class="post-category mb-[0.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc]">
                    <a href="#" class="hover" rel="category">Engagement</a>
                  </div>
                  <!-- /.post-category -->
                  <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../../blog-post.html">Morbi leo risus porta eget</a></h2>
                </div>
                <!-- /.post-header -->
                <div class="post-footer">
                  <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                    <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>17 Jan 2022</span></li>
                    <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
              <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img src="../../assets/img/photos/b16.jpg" alt="image"></a>
                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                </figcaption>
              </figure>
              <div class="card-body p-6">
                <div class="post-header">
                  <div class="post-category mb-[0.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc]">
                    <a href="#" class="hover" rel="category">Couples</a>
                  </div>
                  <!-- /.post-category -->
                  <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../../blog-post.html">Nulla vitae elit libero</a></h2>
                </div>
                <!-- /.post-header -->
                <div class="post-footer">
                  <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                    <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7 Jan 2022</span></li>
                    <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
              <figure class="card-img-top overlay overlay-1 hover-scale group"><a href="#"> <img src="../../assets/img/photos/b17.jpg" alt="image"></a>
                <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                  <h5 class="from-top  !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
                </figcaption>
              </figure>
              <div class="card-body p-6">
                <div class="post-header">
                  <div class="post-category mb-[0.4rem] uppercase tracking-[0.02rem] text-[0.7rem] font-bold text-[#aab0bc]">
                    <a href="#" class="hover" rel="category">Wedding</a>
                  </div>
                  <!-- /.post-category -->
                  <h2 class="post-title h3 !mt-1 !mb-3"><a class="text-[#343f52] hover:text-[#3f78e0]" href="../../blog-post.html">Pharetra augue elit sem</a></h2>
                </div>
                <!-- /.post-header -->
                <div class="post-footer">
                  <ul class="text-[0.7rem] text-[#aab0bc] m-0 p-0 list-none flex  !mb-0">
                    <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>2 Jan 2022</span></li>
                    <li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]"><a class="text-[#aab0bc] hover:text-[#3f78e0] hover:border-[#3f78e0]" href="#"><i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></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>
  <!-- /.overflow-hidden -->
</section>
<!-- /section -->

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image