Bootstrap 5 Blog Components

<section class="py-12 py-lg-24 position-relative overflow-hiddepx-8 px-sm-12 px-md-20 py-20 px-8 px-sm-12 px-md-20 py-20 n">
  <img class="position-absolute top-0 end-0 mt-20" src="saturn-assets/images/blog/star-circle-right.svg" alt="">
  <div class="container position-relative">
    <div class="text-center mb-16">
      <span class="badge px-4 py-2 text-primary bg-primary-light mb-5">OUR BLOG</span>
      <h2 class="font-heading mb-0">
        <span>News &amp;</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Articles</span>
      </h2>
    </div>
    <div class="mw-md-xl mw-lg-5xl mx-auto">
      <div class="pt-12 mb-12 border-top">
        <div class="row">
          <div class="col-lg-2 mb-6 mb-lg-0">
            <img class="img-fluid d-block" src="saturn-assets/images/blog/article-small-1.png" alt="">
          </div>
          <div class="col-lg-10">
            <span class="d-block text-secondary mb-1">Jul 20, 2022</span>
            <div class="d-md-flex align-items-start justify-content-between">
              <h5 class="mw-2xl fs-5 lh-sm fw-semibold mb-6 mb-md-0">Consectures Dummy Content Velit officia consequat duis enim velit mollit adipsing</h5>
              <div class="ms-md-4 flex-shrink-0">
                <a class="btn btn-link fw-semibold p-0 text-decoration-none" href="#">
                  <span>Read</span>
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-12 py-sm-24 pb-md-32">
  <div class="container">
    <div class="mw-lg mx-auto mb-24 text-center">
      <h3 class="mb-4" >Latest from Blog</h3>
      <p class="text-secondary mb-0" >Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
    </div>
    <div class="mw-lg mw-md-7xl mx-auto">
      <div class="row mb-n12">
        <div class="col-12 col-md-6 mb-12"><a class="d-block text-decoration-none text-start" href="#">
            <div class="row align-items-center">
              <div class="col-4"><img class="d-block w-100 img-fluid" src="flaro-assets/images/blog/blog.png" alt=""/></div>
              <div class="col-8">
                <div class="mw-xs"><span class="fs-10 text-secondary fw-medium text-uppercase" >PRODUCT</span>
                  <h5 class="fs-6 mt-2 mb-12" >An IT services company that can grow your business</h5>
                  <div class="d-flex align-items-center"><img src="flaro-assets/images/blog/blog-avatar.png" alt=""/><span class="ms-2 fs-9 fw-semibold" >Wade Warren</span></div>
                </div>
              </div>
            </div></a></div>
        <div class="col-12 col-md-6 mb-12"><a class="d-block text-decoration-none text-start" href="#">
            <div class="row align-items-center">
              <div class="col-4"><img class="d-block w-100 img-fluid" src="flaro-assets/images/blog/blog2.png" alt=""/></div>
              <div class="col-8">
                <div class="mw-xs"><span class="fs-10 text-secondary fw-medium text-uppercase" >PRODUCT</span>
                  <h5 class="fs-6 mt-2 mb-12" >How to handle your good employee for the business</h5>

<section class="pt-20 pb-36 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center mw-lg mx-auto mb-20">
      <h2 class="fs-10 fw-semibold text-white mb-4" >Latest news</h2>
      <p class="fs-17 text-secondary-light" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="row g-6">
      <div class="col-12 col-md-6 col-lg-3"><a href="#">
          <div class="position-relative mw-100"><img class="w-100 rounded-3" src="gradia-assets/images/blog/blog1.png" alt=""/>
            <div class="position-absolute bottom-0 start-0 w-100 rounded-3">
              <div class="p-2">
                <div class="bg-black bg-opacity-75 p-4 w-100 rounded-3"><span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;" >Technology  .  4 min read</span>
                  <h3 class="fs-17 fw-semibold lh-sm text-white mb-0" >You will never believe these bizarre truth of travel.</h3>
                </div>
              </div>
            </div>
          </div></a></div>
      <div class="col-12 col-md-6 col-lg-3"><a href="#">
          <div class="position-relative mw-100"><img class="w-100 rounded-3" src="gradia-assets/images/blog/blog2.png" alt=""/>
            <div class="position-absolute bottom-0 start-0 w-100 rounded-3">
              <div class="p-2">
                <div class="bg-black bg-opacity-75 p-4 w-100 rounded-3"><span class="d-inline-block fs-20 fw-medium text-secondary-light text-uppercase mb-2" style="letter-spacing: 1px;" >Technology  .  4 min read</span>
                  <h3 class="fs-17 fw-semibold lh-sm text-white mb-0" >You will never believe these bizarre truth of travel.</h3>
                </div>

<section class="pb-12 pb-lg-24 overflow-hidden">
  <div class="position-relative bg-primary">
    <div class="position-absolute start-0 w-100 top-0 d-flex justify-content-center">
      <div class="mt-n6 me-6 rounded-3" style="width: 324px; height: 340px; background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="mt-n32 me-6 rounded-3" style="width: 324px; height: 340px; background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="mt-n32 me-6 rounded-3" style="width: 324px; height: 340px; background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="mt-n6 rounded-3" style="width: 324px; height: 340px; background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
    </div>
    <div class="container position-relative">
      <div class="mw-3xl mx-auto pt-20 pb-72 text-center">
        <span class="d-block mb-6 small fw-bold text-primary-light">BLOG</span>
        <h2 class="font-heading text-white">
          <span class="d-block">Discover the latest</span>
          <span>news, stories &amp; insights</span>
        </h2>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-6xl mx-auto mt-n52">
      <a class="d-block bg-white mb-20 border rounded-3 overflow-hidden" href="#">
        <div class="row">
          <div class="col-12 col-lg-6">
            <div class="mw-md mx-auto py-12 py-md-24 py-lg-32 px-8">

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <h2 class="mb-12">New Articles</h2>
      <div class="row mx-xl-n8">
        <div class="col-12 col-lg-6 px-xl-8 mb-16 mb-lg-0">
          <a class="btn d-inline-block text-start fw-normal p-0 border-0 lh-base" href="#">
            <img class="img-fluid d-block mb-6 w-100 rounded-3" src="basko-assets/images/blog/article.jpg" alt="">
            <div class="mb-6">
              <span class="me-2 fw-semibold text-primary">Insights</span>
              <span class="text-secondary-dark">June 22, 2021</span>
            </div>
            <div class="mw-lg">
              <p class="fs-4 fw-semibold mb-2">WFH One year on. Here&rsquo;s what we&rsquo;ve learned.</p>
              <p class="lead mb-0">Use and re-use tons of responsive sections to create the perfect layout. Sections are firmly of organised into the perfect start.</p>
            </div>
          </a>
        </div>
        <div class="col-12 col-lg-6 px-xl-8">
          <a class="btn d-inline-block text-start fw-normal p-0 border-0 lh-base" href="#">
            <img class="img-fluid d-block mb-6 w-100 rounded-3" src="basko-assets/images/blog/article2.jpg" alt="">
            <div class="mb-6">
              <span class="me-2 fw-semibold text-primary">Insights</span>
              <span class="text-secondary-dark">June 22, 2021</span>

<section class="py-12 py-lg-24 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-6" style="letter-spacing: -0.2rem;">Blog</h1>
    </div>
    <div class="d-flex justify-content-center"><a class="btn mx-5 p-0 flex-shrink-0 w-100 mw-xs mw-md-md mw-lg-xl text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/hand.png" alt="">
        <div class="mw-md">
          <h6 class="mb-4">Women in business: an interview with Sarah Townsend</h6>
          <p class="mw-sm text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/blog/avatar.png" alt=""><span class="ms-4 lh-lg fs-9 fw-medium">Wade Warren</span><span class="mx-4">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
              </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
        </div></a><a class="btn mx-5 p-0 flex-shrink-0 w-100 mw-xs mw-md-md mw-lg-xl text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/skyscraper.png" alt="">
        <div class="mw-md">
          <h6 class="mb-4">Women in business: an interview with Sarah Townsend</h6>
          <p class="mw-sm text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <div class="d-flex align-items-center"><img class="img-fluid" src="nightsable-assets/images/blog/avatar.png" alt=""><span class="ms-4 lh-lg fs-9 fw-medium">Wade Warren</span><span class="mx-4">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="white"></path>
              </svg></span><span class="fs-9 lh-lg fw-medium">9 min read</span></div>
        </div></a><a class="btn mx-5 p-0 flex-shrink-0 w-100 mw-xs mw-md-md mw-lg-xl text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/cash.png" alt="">
        <div class="mw-md">
          <h6 class="mb-4">Women in business: an interview with Sarah Townsend</h6>

<section class="position-relative overflow-hidden py-20"><img class="d-none d-lg-block position-absolute top-0 start-0 mt-20" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt=""/><img class="d-none d-lg-block position-absolute top-0 end-0 mt-52" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt=""/>
  <div class="container">
    <div class="max-w-2xl mx-auto mb-20 text-center"><span class="small text-info fw-bold">What&apos;s new at Shuffle</span>
      <h2 class="mt-8 mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="row">
      <div class="col-12 col-lg-8 mb-16">
        <div class="mb-10"><img class="img-fluid w-100 rounded" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt=""/></div><span class="d-inline-block mb-4 small text-muted">10 jun 2020 19:40</span>
        <h2 class="h3 mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="mb-4 lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p><a class="h6" href="#">Read more</a>
      </div>
      <div class="col-12 col-lg-4 mb-16">
        <div class="mb-10"><img class="img-fluid w-100 rounded" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt=""/></div><span class="d-inline-block mb-4 small text-muted">10 jun 2020 19:40</span>
        <h2 class="h3 mb-4">Lorem ipsum dolor</h2>
        <p class="mb-4 lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="h6" href="#">Read more</a>
      </div>
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mb-10"><img class="img-fluid w-100 rounded" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt=""/></div><span class="d-inline-block mb-4 small text-muted">10 jun 2020 19:40</span>
        <h2 class="h3 mb-4">Lorem ipsum dolor</h2>
        <p class="mb-4 lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="h6" href="#">Read more</a>
      </div>
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mb-10"><img class="img-fluid w-100 rounded" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1557804506-d8017c1e4856?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1001&amp;q=80" alt=""/></div><span class="d-inline-block mb-4 small text-muted">10 jun 2020 19:40</span>

<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
  <div class="container">
    <div class="text-center mb-16"><span class="h6 text-primary" >What&apos;s new at Shuffle</span>
      <h2 class="text-white mt-10" >Latest blog</h2>
    </div>
    <div class="row mb-24">
      <div class="col-12 col-md-4 px-lg-6 mb-14 mb-md-0">
        <div class="mw-md mx-auto position-relative" style="z-index: 2;"><img class="position-absolute top-0 end-100 mt-36 img-fluid" src="zospace-assets/lines/left-line.svg" alt=""/><a class="d-block text-decoration-none" href="#">
            <div class="position-relative"><img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover; object-position: top;" src="https://images.pexels.com/photos/6822288/pexels-photo-6822288.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/>
              <div class="position-absolute start-0 bottom-0 m-5">
                <div class="pt-2 bg-primary rounded-top"></div>
                <div class="px-4 pt-2 pb-3 bg-white text-center rounded-bottom"><span class="d-block h5 fw-bold mb-0" >30</span><span class="small fw-bold text-secondary" >FEB</span></div>
              </div>
            </div>
            <div class="pt-12 pb-10 px-6 px-xl-14 mt-n4 rounded-bottom bg-secondary">
              <div class="pt-5 border-top">
                <h5 class="text-white" >Is remote work working? A one year check-in</h5>
              </div>
            </div></a></div>
      </div>
      <div class="col-12 col-md-4 px-lg-6 mt-md-24 mb-14 mb-md-0">
        <div class="mw-md mx-auto position-relative" style="z-index: 1;"><img class="position-absolute top-0 end-100 img-fluid" src="zospace-assets/lines/right-line.svg" alt=""/><a class="d-block text-decoration-none" href="#">
            <div class="position-relative" style="z-index: 1;"><img class="d-block w-100 img-fluid rounded" style="max-height: 206px; object-fit: cover; object-position: top;" src="https://images.pexels.com/photos/5325768/pexels-photo-5325768.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/>
              <div class="position-absolute start-0 bottom-0 m-5">

<section class="py-24 py-md-40 bg-light">
  <div class="container">
    <div class="d-flex align-items-center mb-10"><span class="display-6 h5 mb-0" >07</span>
      <div class="mx-4 bg-light-dark rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0" >Our Blog</span>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mt-16 order-last order-lg-first"><img class="img-fluid d-block mx-auto ms-lg-0" src="wrexa-assets/images/graphic-purple.png" alt=""/></div>
      <div class="col-12 col-lg-7">
        <div class="mw-lg mw-xxl-none mx-auto">
          <div class="d-flex align-items-center mb-12"><span class="badge py-2 px-6 me-6 bg-white shadow" style="border-radius: 999px;" >News</span><span class="small text-secondary-dark" >January 13, 2022</span></div>
          <h2 class="display-3 mb-10"><span class="d-block" >Your home: </span><span >Designed by experts, inspired by real life</span></h2>
          <p class="mw-sm text-muted lh-lg mb-8" >The house by the pond cras ornare, some chords for a three moments, like a sense of truth.</p>
          <div class="mb-16"><a class="btn p-0 me-5 text-primary" href="#" >#interiodesign</a><a class="btn p-0 me-5 text-primary" href="#" >#design</a><a class="btn p-0 me-5 text-primary" href="#" >#application</a></div><a class="btn btn-primary" href="#" >Learn More</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-20 pb-24 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-16 text-center mw-md-5xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Blog</span>
      <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Our mission is to make knowledge and news accessible for everyone.</h2>
      <p class="mb-10 fs-9 fw-medium text-secondary-light">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      <div class="form-group position-relative mw-md-xs mx-auto">
        <svg class="position-absolute start-0 top-50 translate-middle-y ms-4" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.07 16.83L19 14.71C18.5547 14.2868 17.9931 14.0063 17.3872 13.9047C16.7814 13.8032 16.159 13.8851 15.6 14.14L14.7 13.24C15.7606 11.8229 16.2449 10.0567 16.0555 8.29684C15.8662 6.537 15.0172 4.91423 13.6794 3.7552C12.3417 2.59618 10.6145 1.98696 8.84567 2.05019C7.0768 2.11341 5.39755 2.84439 4.14597 4.09597C2.8944 5.34755 2.16342 7.0268 2.10019 8.79567C2.03696 10.5645 2.64618 12.2917 3.80521 13.6294C4.96423 14.9672 6.587 15.8162 8.34684 16.0055C10.1067 16.1949 11.8729 15.7106 13.29 14.65L14.18 15.54C13.8951 16.0996 13.793 16.7346 13.8881 17.3553C13.9832 17.9761 14.2706 18.5513 14.71 19L16.83 21.12C17.3925 21.6818 18.155 21.9974 18.95 21.9974C19.745 21.9974 20.5075 21.6818 21.07 21.12C21.3557 20.8406 21.5828 20.5069 21.7378 20.1386C21.8928 19.7702 21.9726 19.3746 21.9726 18.975C21.9726 18.5754 21.8928 18.1798 21.7378 17.8114C21.5828 17.4431 21.3557 17.1094 21.07 16.83ZM12.59 12.59C11.8902 13.288 10.9993 13.7629 10.0297 13.9549C9.06019 14.1468 8.0555 14.047 7.14261 13.6682C6.22971 13.2894 5.44957 12.6485 4.90072 11.8265C4.35187 11.0046 4.05894 10.0384 4.05894 9.05C4.05894 8.06163 4.35187 7.09544 4.90072 6.27347C5.44957 5.45149 6.22971 4.81062 7.14261 4.43182C8.0555 4.05301 9.06019 3.95325 10.0297 4.14515C10.9993 4.33706 11.8902 4.812 12.59 5.51C13.0556 5.97446 13.4251 6.52621 13.6771 7.13367C13.9292 7.74112 14.0589 8.39233 14.0589 9.05C14.0589 9.70768 13.9292 10.3589 13.6771 10.9663C13.4251 11.5738 13.0556 12.1255 12.59 12.59ZM19.66 19.66C19.567 19.7537 19.4564 19.8281 19.3346 19.8789C19.2127 19.9297 19.082 19.9558 18.95 19.9558C18.818 19.9558 18.6873 19.9297 18.5654 19.8789C18.4436 19.8281 18.333 19.7537 18.24 19.66L16.12 17.54C16.0263 17.447 15.9519 17.3364 15.9011 17.2146C15.8503 17.0927 15.8242 16.962 15.8242 16.83C15.8242 16.698 15.8503 16.5673 15.9011 16.4454C15.9519 16.3236 16.0263 16.213 16.12 16.12C16.213 16.0263 16.3236 15.9519 16.4454 15.9011C16.5673 15.8503 16.698 15.8242 16.83 15.8242C16.962 15.8242 17.0927 15.8503 17.2146 15.9011C17.3364 15.9519 17.447 16.0263 17.54 16.12L19.66 18.24C19.7537 18.333 19.8281 18.4436 19.8789 18.5654C19.9297 18.6873 19.9558 18.818 19.9558 18.95C19.9558 19.082 19.9297 19.2127 19.8789 19.3346C19.8281 19.4564 19.7537 19.567 19.66 19.66Z" fill="#556987"></path>
        </svg>
        <input class="form-control ps-12 pe-4 text-secondary shadow" id="blogInput5-1" type="text" aria-describedby="blogHelp" placeholder="Search">
      </div>
    </div>
    <ul class="mb-8 nav nav-pills">
      <li class="nav-item active"><a class="nav-link py-2 px-4 fs-12 fw-bold text-success link-success bg-success bg-opacity-25 shadow" href="#">All Categories</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Technology</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Development</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Marketing</a></li>
      <li class="nav-item"><a class="nav-link py-2 px-4 fs-12 fw-bold text-secondary link-secondary-light" href="#">Start-up</a></li>
    </ul>
    <div class="mb-20 row g-8">
      <div class="col-12 col-md-6">
        <img class="img-fluid mb-6 w-100" src="flex-assets/images/blog/news.png" alt="">

<section class="py-20 bg-light overflow-hidden">
  <div class="container">
    <h2 class="mb-16 mb-md-24" >Latest Blog</h2>
    <div class="d-flex mb-20">
      <div class="flex-shrink-0 w-100">
        <div class="row">
          <div class="col-12 col-lg-6 mb-20">
            <div class="position-relative"><a class="btn position-absolute top-0 mt-80 end-0 m-5 px-8 py-2 bg-white rounded-2 text-muted" href="#" style="z-index: 10;" >Summer</a><a class="position-relative d-block link-dark text-decoration-none" href="#">
                <div class="position-relative" style="height: 384px;"><img class="img-fluid w-100 h-100" style="object-fit: cover;" src="yofte-assets/images/placeholder-surfboard-stands.png" alt=""/></div>
                <div class="position-relative mt-12">
                  <div class="position-absolute top-0 bg-info ps-1" style="height:176px;"></div>
                  <div class="px-12">
                    <h3 class="mb-8" >After curabitur eu laoreet libero eget en vel odio ultricies!</h3><span class="h6 text-info text-uppercase" >15 MAY 2021</span>
                  </div>
                </div></a></div>
          </div>
          <div class="col-12 col-lg-6 mb-20">
            <div class="position-relative"><a class="btn position-absolute top-0 mt-80 end-0 m-5 px-8 py-2 bg-white rounded-2 text-muted" href="#" style="z-index: 10;" >Summer</a><a class="position-relative d-block link-dark text-decoration-none" href="#">
                <div class="position-relative" style="height: 384px;"><img class="img-fluid w-100 h-100" style="object-fit: cover;" src="yofte-assets/images/placeholder-girl.png" alt=""/></div>
                <div class="position-relative mt-12">
                  <div class="position-absolute top-0 bg-info ps-1" style="height:176px;"></div>
                  <div class="px-12">
                    <h3 class="mb-8" >Next year: one ultricies condimentum phare</h3><span class="h6 text-info text-uppercase" >14 MAY 2021</span>
                  </div>

<section class="py-28 bg-white">
  <div class="container">
    <div class="row align-items-center mb-16 mb-md-20">
      <div class="col-12 col-md-6">
        <h2 class="display-4 font-heading" >Recent articles</h2>
      </div>
      <div class="col-12 col-md-6">
        <p class="lh-lg" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p>
      </div>
    </div>
    <div class="row mb-20">
      <div class="col-12 col-md-4 mb-12 mb-md-0"><a class="text-decoration-none" href="#"><span class="badge bg-primary text-uppercase" >Category</span></a><a class="d-inline-block text-decoration-none mb-6" href="#">
          <h2 class="mb-4 lh-sm mt-6 font-heading" >Lorem ipsum random blog article</h2>
          <div class="d-flex align-items-center mb-4"><span class="text-primary" >6 min read</span><span class="mx-2 text-primary">&bull;</span><span class="text-primary" >10 July 2021</span></div>
          <p class="mb-0 lh-lg text-dark" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p></a><a class="d-flex align-items-center text-decoration-none" href="#">
          <div class="me-4"><img class="img-fluid" src="pstls-assets/images/blog/men-avatar.png" alt="" /></div>
          <div>
            <p class="mb-1 text-light-dark">Published by</p>
            <p class="mb-0 text-dark"  >John Doe</p>
          </div></a></div>
      <div class="col-12 col-md-4 mb-12 mb-md-0"><a class="text-decoration-none" href="#"><span class="badge bg-secondary text-uppercase" >Category</span></a><a class="d-inline-block text-decoration-none mb-6" href="#">
          <h2 class="mb-4 lh-sm mt-6" >Lorem ipsum random blog article</h2>
          <div class="d-flex align-items-center mb-4"><span class="text-primary" >6 min read</span><span class="mx-2 text-primary">&bull;</span><span class="text-primary" >10 July 2021</span></div>
          <p class="mb-0 lh-lg text-dark" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business.</p></a><a class="d-flex align-items-center text-decoration-none" href="#">

<section class="py-5">
  <div class="container">
    <h2 class="mb-4 fw-bold">Our Blog</h2>
    <div class="row mb-5">
      <div class="col-12 col-lg-4 mb-3">
        <a class="text-decoration-none" href="#">
          <img class="w-100 mb-3 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div>
          <a class="text-decoration-none" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
        </div>
        <h4 class="my-2 fw-bold"><a class="text-decoration-none" href="#">Lorem ipsum dolor sit amet.</a></h4>
        <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
      <div class="col-12 col-lg-8 mb-3">
        <a class="text-decoration-none" href="#">
          <img class="w-100 mb-3 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        </a>
        <div>
          <a class="text-decoration-none" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
        </div>
        <h4 class="my-2 fw-bold"><a class="text-decoration-none" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>

<section class="py-20">
  <div class="container">
    <div class="mw-5xl mx-auto mb-12 text-center"><span class="badge bg-secondary-light">Lorem Ipsum</span>
      <h2 class="mt-6 mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mw-xl mx-auto lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="row">
      <div class="col-12 col-lg-8 mb-16">
        <div class="mb-10"><img class="img-fluid w-100" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=840&amp;q=80" alt=""/></div><span class="small text-muted" style="font-size: 12px;">10 jun 2021 19:40</span>
        <h3 class="mt-4 mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
        <h6 class="mb-6 fw-normal lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</h6><a class="link-primary text-decoration-none fw-bold" href="#">Read more</a>
      </div>
      <div class="col-12 col-lg-4 mb-16">
        <div class="mb-10"><img class="img-fluid w-100" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1492724724894-7464c27d0ceb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt=""/></div><span class="small text-muted" style="font-size: 12px;">10 jun 2021 19:40</span>
        <h3 class="mt-4 mb-4">Lorem ipsum dolor</h3>
        <h6 class="mb-6 fw-normal lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6><a class="link-primary text-decoration-none fw-bold" href="#">Read more</a>
      </div>
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mb-10"><img class="img-fluid w-100" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=753&amp;q=80" alt=""/></div><span class="small text-muted" style="font-size: 12px;">10 jun 2021 19:40</span>
        <h3 class="mt-4 mb-4">Lorem ipsum dolor</h3>
        <h6 class="mb-6 fw-normal lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6><a class="link-primary text-decoration-none fw-bold" href="#">Read more</a>
      </div>
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mb-10"><img class="img-fluid w-100" style="height:400px; object-fit: cover;" src="https://images.unsplash.com/photo-1552083375-1447ce886485?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/></div><span class="small text-muted" style="font-size: 12px;">10 jun 2021 19:40</span>

<section class="py-12 py-lg-24">
  <div class="container">
    <h1 class="font-heading mb-16" style="letter-spacing: -1.2px;">Read from blog</h1>
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row mx-lg-n6 mx-xl-n12">
        <div class="col-12 col-lg-4 px-lg-6 px-xl-12 pt-lg-12 mb-12 mb-lg-0"><a class="btn p-0 text-start fw-normal border-0" href="#"><img class="img-fluid d-block mb-6 w-100 mt-lg-14" style="height: 295px;" src="consulty-assets/blog/picture1.png" alt="">
            <p class="text-primary fs-9 fw-medium mb-3">Awards</p>
            <h5 class="font-heading fw-semibold">There are the variations of all passages of the majority</h5></a></div>
        <div class="col-12 col-lg-4 px-lg-6 px-xl-12 mb-12 mb-lg-0"><a class="btn p-0 text-start fw-normal border-0" href="#"><img class="img-fluid d-block mb-6 w-100 mt-lg-14" style="height: 490px;" src="consulty-assets/blog/picture2.png" alt="">
            <p class="text-primary fs-9 fw-medium mb-3">Interior</p>
            <h5 class="font-heading fw-semibold">Contrary to popular the of all passages of the majority</h5></a></div>
        <div class="col-12 col-lg-4 px-lg-6 px-xl-12 align-self-center"><a class="btn p-0 text-start fw-normal border-0" href="#"><img class="img-fluid d-block mb-6 w-100 mt-lg-14" style="height: 295px;" src="consulty-assets/blog/picture3.png" alt="">
            <p class="text-primary fs-9 fw-medium mb-3">Architecture</p>
            <h5 class="font-heading fw-semibold">Making this the variations of all passages of the majority</h5></a></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-24 bg-danger-dark">
  <div class="container">
    <div class="border-bottom border-white border-opacity-10 mb-20">
      <div class="row">
        <div class="col-lg-8 mb-8 mb-lg-0">
          <div class="d-flex flex-wrap gap-6 gap-lg-10"><a class="position-relative btn text-danger px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span>
              <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-danger"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div>
        </div>
        <div class="col-lg-4">
          <div class="position-relative d-flex ms-auto align-items-center" style="max-width: 100px;">
            <button class="position-absolute top-50 start-0 ms-1 translate-middle-y btn p-0 border-0">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M18.3334 18.3334L16.6667 16.6667" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <input class="form-control ps-10 py-2 pe-0 bg-transparent border-0" type="search" placeholder="Search">
          </div>
        </div>
      </div>
    </div>
    <div class="mw-lg mx-auto mw-lg-none"><a class="btn mb-20 d-block p-0 text-start fw-normal bg-danger bg-opacity-10 rounded-2 overflow-hidden" href="#">
        <div class="row">
          <div class="col-lg-6 p-0"><img class="img-fluid d-block mb-12 w-100 h-100" src="vista-assets/images/blog-content/placeholder-pink.png" alt=""></div>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mw-md-5xl mx-auto">
      <div class="text-center mb-14"><span class="d-block mb-6 text-light-light">Type Caption Here</span>
        <h2 class="h3 font-heading fw-medium text-white mb-0">Blog &amp; Articles</h2>
      </div>
      <div class="row">
        <div class="col-12 col-md-6 mb-12 mb-md-0">
          <div><img class="img-fluid d-block w-100" src="casper-assets/blog/image-blog1.png" alt=""/>
            <div class="mt-6 pe-10">
              <h5 class="text-white fw-medium mb-4">Type you blog title here</h5>
              <p class="small text-light mb-4">Gain valuable insights into your users&apos; preferences, behavior, and frequently asked questions. Simply dummy text of the printing and typesetting industry.</p>
              <div class="d-flex align-items-center"><a class="btn btn-outline-primary align-items-center justify-content-center p-0" href="#" style="width: 56px; height: 56px;">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z" fill="white"></path>
                  </svg></a><span class="ms-5 small text-white">Read more</span></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div><img class="img-fluid d-block w-100" src="casper-assets/blog/image-blog2.png" alt=""/>
            <div class="mt-6 pe-10">
              <h5 class="text-white fw-medium mb-4">Type you blog title here</h5>
              <p class="small text-light mb-4">Gain valuable insights into your users&apos; preferences, behavior, and frequently asked questions. Simply dummy text of the printing and typesetting industry.</p>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-xl mw-lg-7xl">
    <h2 class="font-heading mb-12">Blog</h2>
    <div class="row mb-n6">
      <div class="col-12 col-lg-6 mb-6">
        <div class="p-8 p-md-12 h-100 bg-white rounded-4">
          <div class="d-flex flex-column align-items-start h-100">
            <span class="d-block fs-6 fw-semibold mb-6">Big news</span>
            <h4 class="fs-2 mb-3">The Rise of Video Marketing: Engage Your Audience Like Never Before!</h4>
            <p class="lead mb-10">Video marketing is taking the digital world by storm. Discover how to captivate your audience and boost engagement with compelling video content.</p>
            <div class="d-flex align-items-center mb-14">
              <div class="d-flex me-6 align-items-center">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" fill="#B5FDC0"></rect></svg>
                <span class="fw-medium ms-2">design</span>
              </div>
              <div class="d-flex align-items-center">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" fill="#FFB39A"></rect></svg>
                <span class="fw-medium ms-2">vid marketing</span>
              </div>
            </div>
            <div class="d-flex flex-column flex-md-row w-100 gap-4 align-items-start align-items-md-center justify-content-between">
              <span class="fs-6 fw-semibold">Thu 12 Oct, 4 AM</span>
              <a class="btn btn-outline-primary" href="#">Read more</a>
            </div>

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
        <span class="text-muted">Lorem ipsum</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-8 mb-5">
        <div class="d-flex mb-4">
          <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
        </div>
        <span><small class="text-muted">10 jun 2021 19:40</small></span>
        <h2 class="fw-bold">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <a class="d-flex align-items-center" href="#">
          <span>Read More</span>
          <span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
          </span>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row mb-20 align-items-end">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <h1 >Blog</h1>
      </div>
      <div class="col-12 col-lg-6 text-end"><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >See our blog</span>
          <svg class="rotate-45" width="11" height="11" viewbox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.5 1.5L1.5 9.5" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 8.83571V1.5H2.16429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0"><a class="d-block position-relative" href="#"><img class="d-block w-100 img-fluid rounded-5" style="max-height: 670px;" src="asitrastudio-assets/blog/blog-shadow.png" alt=""/>
          <div class="position-absolute bottom-0 start-0 mw-md mw-lg-xl p-9">
            <div class="mb-3"><span class="badge me-3 text-white border border-2 border-white" >Interior</span><span class="d-inline-block fs-9 text-white" >9 min read</span></div>
            <h3 class="fs-2 text-white" >How to decorating ourdoor sofa</h3>
          </div></a></div>
      <div class="col-12 col-lg-6">
        <div class="row h-100">
          <div class="col-12 col-md-7 mb-8 mb-md-0"><a class="d-block" href="#"><img class="d-block w-100 img-fluid mb-8 rounded-5" src="asitrastudio-assets/blog/blog2.png" alt=""/>
              <div class="mw-xs pe-5">
                <div class="mb-3"><span class="badge me-3 border border-dark" >Interior</span><span class="d-inline-block fs-9 text-secondary-light" >9 min read</span></div>
                <h4 class="fw-medium" >How to decorating ourdoor sofa</h4>