<script setup lang="ts">

</script>

<template>
  <div class="blog-section" id="blog">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-12">
          <div class="section-heading wow fadeInUp" data-wow-delay="0.2s">
            <h2 class="title">
              My <span class="color">Blogs</span>
              <span class="bg-text">Blogs</span>
            </h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <div class="blog-slider wow fadeInUp" data-wow-delay="0.3s">
            <div class="slider-item">
              <div class="single-blog">
                <div class="img">
                  <img src="/assets/images/blog/img1.png" alt="">
                </div>
                <div class="content">
                  <ul class="top-meta">
                    <li>
                      <p class="date">
                        21 Aug, 2019
                      </p>
                    </li>
                    <li>
                      <p class="post-by">
                        By, Admin
                      </p>
                    </li>
                  </ul>
                  <a href="blog-details.html">
                    <h4 class="title">
                      5 reasons why your website
                      needs more whitespace
                    </h4>
                  </a>
                </div>
              </div>
            </div>
            <div class="slider-item">
              <div class="single-blog">
                <div class="img">
                  <img src="/assets/images/blog/img2.png" alt="">
                </div>
                <div class="content">
                  <ul class="top-meta">
                    <li>
                      <p class="date">
                        21 Aug, 2019
                      </p>
                    </li>
                    <li>
                      <p class="post-by">
                        By, Admin
                      </p>
                    </li>
                  </ul>
                  <a href="blog-details.html">
                    <h4 class="title">
                      7 steps to optimize your
                      website for Millennials
                    </h4>
                  </a>
                </div>
              </div>
            </div>
            <div class="slider-item">
              <div class="single-blog">
                <div class="img">
                  <img src="/assets/images/blog/img3.png" alt="">
                </div>
                <div class="content">
                  <ul class="top-meta">
                    <li>
                      <p class="date">
                        21 Aug, 2019
                      </p>
                    </li>
                    <li>
                      <p class="post-by">
                        By, Admin
                      </p>
                    </li>
                  </ul>
                  <a href="blog-details.html">
                    <h4 class="title">
                      8 Things To Know When Designing
                      Augmented
                    </h4>
                  </a>
                </div>
              </div>
            </div>
            <div class="slider-item">
              <div class="single-blog">
                <div class="img">
                  <img src="/assets/images/blog/img4.png" alt="">
                </div>
                <div class="content">
                  <ul class="top-meta">
                    <li>
                      <p class="date">
                        24 Aug, 2019
                      </p>
                    </li>
                    <li>
                      <p class="post-by">
                        By, Admin
                      </p>
                    </li>
                  </ul>
                  <a href="blog-details.html">
                    <h4 class="title">
                      3 reasons why your website
                      needs more whitespace
                    </h4>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 text-center">
          <a href="blogs.html" class="mybtn3 mybtn-bg wow fadeInUp"><span>View All</span></a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>