Blocks - Blog

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <h2 class="display-4 mb-3 text-center">Our Journal</h2>
    <p class="lead fs-lg mb-10 text-center px-md-16 px-lg-21 px-xl-0">{{ page.blog1.description }}</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">
          {% for post in site.posts limit:3 %}
          <div class="swiper-slide">
            <article>
              <figure class="overlay overlay-1 hover-scale rounded mb-5">
                <a href="{{ post.url }}"> 
                  <img src="{{ post.image }}" alt="{{ post.title }}" />
                </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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
                </div>
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
              </div>
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
                  <li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
                </ul>
              </div>
            </article>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

                  

# Blog Section 1
blog1:
  enable: true
  title: "Our Journal"
  description: "Here are the latest company news from our blog that got the most attention."
                  

    
    <!-- Your converted HTML code here -->
    
                  

    # Blog Section 2
    blog2:
      enable: true
      title: "Our Journal"
      description: "Here are the latest news from our blog that got the most attention."
      button_text: "View All News"
      button_url: "/blog"
                  

<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="display-4 mb-3 text-center">Latest News</h2>
        <p class="lead fs-lg mb-10 text-center">{{ page.blog3.description }}</p>
      </div>
    </div>
    <div class="swiper-container blog grid-view mb-10" 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">
          {% for post in site.posts limit:6 %}
          <div class="swiper-slide">
            <article>
              <figure class="overlay overlay-1 hover-scale rounded mb-6">
                <a href="{{ post.url }}">
                  <img src="{{ post.featured_image }}" alt="{{ post.title }}" />
                </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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
                </div>
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
              </div>
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
                  <li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
                </ul>
              </div>
            </article>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

                  

# Blog Section 3
blog3:
  enable: true
  title: "Latest News"
  description: "Here are the latest company news from our blog that got the most attention."
                  

<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">{{ page.blog4.title }}</h2>
      </div>
      <div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
        <a href="{{ page.blog4.button_url }}" class="btn btn-soft-primary rounded-pill mb-0">{{ page.blog4.button_text }}</a>
      </div>
    </div>
    <div class="row gx-lg-8 gx-xl-11 gy-10 blog grid-view">
      <div class="col-lg-8">
        {% assign featured_post = site.posts.first %}
        <article class="post">
          {% if featured_post.images %}
          <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">
                  {% for image in featured_post.images %}
                  <div class="swiper-slide"><img src="{{ image }}" alt="" /></div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
          {% endif %}
          <div class="post-header mb-5">
            <div class="post-category text-line">
              <a href="/category/{{ featured_post.category | slugify }}" class="hover" rel="category">{{ featured_post.category }}</a>
            </div>
            <h2 class="post-title mt-1 mb-4"><a class="link-dark" href="{{ featured_post.url }}">{{ featured_post.title }}</a></h2>
            <ul class="post-meta mb-0">
              <li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ featured_post.date | date: "%d %b %Y" }}</span></li>
              <li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By {{ featured_post.author | default: site.author }}</span></a></li>
              <li class="post-comments"><a href="{{ featured_post.url }}#comments"><i class="uil uil-comment"></i>{{ featured_post.comments | default: 0 }}<span> Comments</span></a></li>
            </ul>
          </div>
          <div class="post-content">
            <p>{{ featured_post.excerpt }}</p>
          </div>
        </article>
      </div>
      <div class="col-lg-4">
        <div class="row gy-10">
          {% for post in site.posts offset:1 limit:2 %}
          <div class="col-md-6 col-lg-12">
            <article class="post">
              <figure class="overlay overlay-1 hover-scale rounded mb-5">
                <a href="{{ post.url }}"> 
                  <img src="{{ post.featured_image }}" alt="{{ post.title }}" />
                </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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
                </div>
                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
              </div>
              <div class="post-footer">
                <ul class="post-meta">
                  <li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
                  <li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
                </ul>
              </div>
            </article>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

                  

# Blog Section 4
blog4:
  enable: true
  title: "Company News"
  description: "Company news from our blog that got the most attention."
  button_text: "View All News"
  button_url: "#"
                  

    
    <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-primary fs-30 opacity-25"></i>
              <h2 class="display-5 text-center mt-2 mb-10">{{ page.blog5.description }}</h2>
            </div>
          </div>
          <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">
                {% for post in site.posts limit:6 %}
                <div class="swiper-slide">
                  <article>
                    <div class="card shadow-lg">
                      <figure class="card-img-top overlay overlay-1">
                        <a href="{{ post.url }}"> 
                          <img src="{{ post.featured_image }}" alt="{{ post.title }}" />
                        </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="/category/{{ post.category | slugify }}" class="hover" rel="category">{{ post.category }}</a>
                          </div>
                          <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="{{ post.url }}">{{ post.title }}</a></h2>
                        </div>
                        <div class="post-footer">
                          <ul class="post-meta d-flex mb-0">
                            <li class="post-date"><i class="uil uil-calendar-alt"></i><span>{{ post.date | date: "%d %b %Y" }}</span></li>
                            <li class="post-comments"><a href="{{ post.url }}#comments"><i class="uil uil-comment"></i>{{ post.comments | default: 0 }}</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </article>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
                  

    # Blog Section 5
    blog5:
      enable: true
      title: "Latest Blog Posts"
      description: "Here are the latest posts from my blog that grabbed the most attention."