Bootstrap 5 Content Components

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div>
            <span class="badge px-4 py-2 text-primary bg-primary-light mb-8">RICH TEXT MODULE</span>
            <h2 class="font-heading mb-20">
              <span>Saturn is a beautiful</span>
              <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">UI Library</span>
            </h2>
            <img class="img-fluid ms-lg-n20 ms-xl-n40 w-100" src="saturn-assets/images/content/image-big-article.png" alt="">
          </div>
        </div>
        <div class="col-lg-6">
          <div>
            <p class="fs-5 mb-8">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi. Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt. Sed tristique sit faucibus nisi rutrum lacus. Sollicitudin non pretium commodo ut fermentum.</p>
            <p class="fs-7 fw-semibold mb-8">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam.</p>
            <p class="fs-7 mb-8">Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
            <p class="fs-7 mb-8">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
            <p class="fs-7">Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh. Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus.</p>
          </div>
        </div>
      </div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="text-center mb-5">
        <a class="d-inline-flex align-items-center text-light-dark fw-bold" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ms-2">Back to Blog</span>
        </a>
      </div>
      <img class="img-fluid d-block mb-12 w-100 rounded-3" src="solstice-assets/images/blog/post-picture.png" alt="">
      <div class="mw-4xl mx-auto">
        <div class="text-center mb-12">
          <div class="mb-4">
            <span class="me-3 small text-light-dark">17 Jul 2023</span>
            <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#D1D1D1"></circle></svg>
            <span class="ms-3 small text-light-dark">4 min read</span>
          </div>
          <h2 class="font-heading">The Art and Science of Design Development: Crafting Digital Experiences</h2>
        </div>
        <h4 class="mb-6">The Essence of Design Development</h4>
        <p class="fs-5 fw-medium text-dark-light lh-lg">Design development is the dynamic process that breathes life into creative concepts, transforming them into tangible and functional digital experiences. It's the synergy of artistic vision and technical prowess that defines the essence of this discipline.</p>
        <p class="fs-5 fw-medium text-dark-light lh-lg">In the world of design development, aesthetics and functionality dance in harmony. It's not just about creating visually stunning interfaces; it's about crafting user-centric designs that resonate with the intended audience. By blending creativity with technological expertise, design development lays the foundation for digital products that not only captivate but also enrich the user experience.</p>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-lg mx-auto mb-12 text-center">
      <h3 class="fs-4 mb-4">Women in business: an interview with Sarah Townsend</h3>
      <p class="mw-md mx-auto text-secondary-light mb-8">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="d-flex align-items-center justify-content-center"><img class="img-fluid" src="nightsable-assets/images/blog-content/avatar.png" alt=""><span class="ms-4 fs-9 fw-medium">Wade Warren</span><span class="mx-4">·</span><span class="fs-9 fw-medium">9 min read</span></div>
    </div><img class="img-fluid d-block mb-8 w-100 rounded-4" src="nightsable-assets/images/blog-content/header.png" alt="">
    <div class="mw-sm mw-sm-lg mw-md-xl mw-lg-3xl mx-auto">
      <div class="pb-10 mb-10 border-bottom border-dark border-opacity-50">
        <p class="fs-5 text-light text-opacity-75 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      </div>
      <div class="mb-8">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <div class="ps-6 mb-8 border-start border-2 border-primary">
          <p class="fs-5 text-light text-opacity-75 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p><span class="fs-8 text-light text-opacity-75">— John Doe, CEO &amp; Founder</span>
        </div>
      </div>
      <p class="fs-7 text-light text-opacity-75 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="img-fluid d-block mb-4" src="nightsable-assets/images/blog-content/header2.png" alt=""><span class="fs-8 text-secondary-light">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</span>
      <div class="mt-8 mb-12">
        <h6 class="mb-4">Header 1</h6>
        <p class="fs-5 text-light text-opacity-75">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
        <p class="fs-5 text-light text-opacity-75 mb-6">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</p>
        <ul class="list-unstyled text-light text-opacity-75 fs-5 mb-6">

<section class="position-relative 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 mb-16">
    <div class="max-w-2xl mx-auto text-center">
      <div class="small"><a class="text-decoration-none text-muted" href="#">Home</a><span class="d-inline-block px-1">/</span><a class="text-decoration-none text-muted" href="#">Blog</a><span class="d-inline-block px-1">/</span><a class="text-decoration-none text-muted" href="#">Article</a></div>
      <h2 class="mt-8 mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <div class="row justify-content-center">
        <div class="col-auto"><img class="rounded-circle" style="width:64px; height: 64px; object-fit: cover; object-position: top;" src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
        <div class="col-auto text-start">
          <h4 class="mb-2">Esther Bailey</h4>
          <p class="text-muted">February 26, 2021</p>
        </div>
      </div>
    </div>
  </div>
  <div class="h-lg-50"><img class="img-fluid w-100 h-100" style="object-fit: cover; object-position: top;" src="https://images.unsplash.com/photo-1525129498994-580709352e20?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt=""/></div>
</section>

<section class="bg-secondary-dark position-relative pt-64 pb-44"><img class="position-absolute bottom-0 start-0 img-fluid mw-xs pe-40 pe-xxl-32" src="https://images.pexels.com/photos/7193529/pexels-photo-7193529.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/><img class="position-absolute top-0 end-0 mt-20 mt-lg-44 img-fluid col-10 col-sm-6 col-xxl-5" src="zospace-assets/images/women-window-photo.png" alt=""/>
  <div class="container">
    <div class="mw-lg ms-xxl-32 pt-32 pb-24 pb-xxl-0 pt-lg-0">
      <h2 class="text-center text-white mb-16" >We&apos;re Zospace - Founded in London</h2>
      <div class="mw-sm mx-auto">
        <div class="d-flex align-items-center pb-14 mb-8 border-bottom"><img class="img-fluid" src="zospace-assets/images/light-bulb-purple.svg" alt=""/>
          <div class="ms-8 ms-md-14">
            <p class="text-secondary-light mb-0"><span >A short message that will </span><span class="text-white" >bring your customers </span><span >into the world of your imagination.</span></p>
          </div>
        </div>
        <div class="d-flex w-100 justify-content-end"><a class="btn p-0 text-secondary-light d-flex align-items-center" href="#"><span class="me-5" >Learn our story</span><span>
              <svg width="19" height="20" viewbox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18.7387 1.47293L18.7387 10.93L17.5565 10.93L17.5565 2.89739L0.835337 19.6245L0.00193592 18.7911L16.7231 2.064L9.28164 2.064L9.28164 0.881867L18.1476 0.881866C18.4741 0.881866 18.7387 1.14648 18.7387 1.47293Z" fill="white"></path>
              </svg></span></a></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pt-xxl-64 bg-light overflow-hidden">
  <div class="position-relative ms-2 ms-md-10 bg-dark-light"><img class="d-none d-xl-block position-absolute top-0 start-0 img-fluid" style="z-index: 1;" src="wrexa-assets/images/work-office.png" alt=""/><img class="d-none d-xxl-block position-absolute top-50 end-0 img-fluid translate-middle-y" src="wrexa-assets/images/women-photo2.png" alt=""/><img class="d-none d-md-block d-xxl-none position-absolute bottom-0 end-0 img-fluid" src="wrexa-assets/images/women-photo2.png" alt=""/>
    <div class="position-relative container"><img class="d-none d-xxl-block position-absolute top-0 end-0 mt-xl-n24 mt-xxl-n64 img-fluid" src="wrexa-assets/images/women-photo1.png" alt=""/><img class="d-none d-md-block d-xxl-none position-absolute top-0 end-0 mt-n32 img-fluid" style="max-width: 200px;" src="wrexa-assets/images/women-photo1.png" alt=""/>
      <div class="row ms-1 ms-md-6">
        <div class="d-xl-none d-block col-12 col-xl-4 h-100 border-start"><img class="d-block mx-auto img-fluid" src="wrexa-assets/images/work-office.png" alt=""/></div>
        <div class="col-12 col-xl-7 col-xxl-9 ms-auto border-start">
          <div class="mw-lg pt-24 pt-xl-52 pb-24 mx-auto">
            <h1 class="display-3 text-white mb-10" >What you need, when you need it</h1>
            <p class="text-secondary mb-14 lh-lg" >The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
            <div class="ps-md-12 mb-24">
              <div class="d-flex mb-3 align-items-center">
                <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                  <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle>
                </svg><span class="ms-8 h6 text-white mb-0" >One platform for you</span>
              </div>
              <div class="d-flex mb-3 align-items-center">
                <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                  <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle>
                </svg><span class="ms-8 h6 text-white mb-0" >Integrations</span>
              </div>
              <div class="d-flex align-items-center">
                <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="position-relative py-20 bg-white overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);"></div>
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-12 text-center mw-md-2xl mx-auto">
      <span class="text-success fw-medium">John Doe &bull; 19 Jan 2022</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Lorem ipsum dolor sit amet</h2>
      <p class="mb-6 fs-9 fw-medium text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <span class="badge bg-success-dark text-success text-uppercase shadow">Technology</span>
    </div>
    <div class="mb-10 d-flex justify-content-center">
      <img class="img-fluid" src="flex-assets/images/blog-content/content.png" alt="">
    </div>
    <div class="mw-md-2xl mx-auto">
      <p class="pb-10 mb-8 fs-9 text-secondary fw-medium border-bottom border-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <h3 class="mb-4 font-heading fs-7 text-light-dark fw-semibold">Header 1</h3>
      <p class="mb-6 fs-10 text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <div class="mb-6 row g-6">
        <div class="col-auto">
          <div class="bg-success h-100 rounded-pill" style="width: 2px;"></div>
        </div>
        <div class="col">
          <div class="py-7">
            <p class="mb-4 fs-8 text-light-dark fw-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</p>
            <p class="mb-0 fs-10 text-secondary-light fw-medium">&mdash; John Doe, CEO &amp; Founder</p>

<section class="pb-20 bg-dark overflow-hidden"><img class="img-fluid w-100l" src="yofte-assets/elements/line-content.svg" alt=""/>
  <div class="container"><span class="text-white fw-bold" >Online shopping</span>
    <h1 class="mt-4 mb-16 text-white" >How to improve online store?</h1>
    <div class="position-relative mx-n6 mb-20" style="height: 384px;">
      <div class="position-absolute top-50 translate-middle-y start-0 end-0 w-100 bg-info" style="height: 80%;"></div><img class="position-relative w-100 img-fluid px-6" style="height: 384px; object-fit: cover;" src="yofte-assets/images/placeholder-banner.png" alt="" />
    </div>
    <div class="mw-3xl mx-auto">
      <h4 class="mb-12 fw-normal text-white"  >This morning, platea dictumst nec nunc. In hac habitasse, general, dignissim accumsan just. Suspendisse vitae ligula convallis, porta tortor et, finibus neque.</h4>
      <p class="mb-10 lead text-secondary"  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat nisl quis justo egestas, nec eleifend erat egestas. Curabitur purus neque, tincidunt ac malesuada nec, ornare non odio. Nulla nec lorem sed purus semper porta vel sit amet sem. Nunc placerat non turpis eu molestie. Nam consectetur lacus ut lacus elementum dapibus. Etiam vehicula ipsum ac dolor tristique placerat. In hac habitasse platea dictumst.</p>
      <p class="lead text-secondary"  >Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis est quis venenatis dignissim. Maecenas a sem eros. Quisque hendrerit vitae libero non porta. Maecenas quis sem et nulla pellentesque accumsan. Proin blandit bibendum orci, a aliquam augue sagittis sed. Quisque pharetra ut quam eget varius. Morbi nisi nunc, ultricies id ligula id, feugiat eleifend est. Etiam metus sem, ornare vitae porta vel, porta a mauris. Fusce dapibus egestas lorem eu tincidunt. Quisque lobortis placerat placerat. Donec eget lectus blandit ex pellentesque iaculis. Proin aliquam vulputate arcu et blandit. Duis sed lobortis mauris, vel porttitor lectus. Pellentesque vel ultrices odio.</p>
    </div>
  </div>
</section>

<section class="py-20 bg-white">
  <div class="container">
    <div class="mw-4xl mb-12"><span class="text-primary-dark" >Published 02 September 2021</span>
      <h2 class="mt-2 mb-6 lh-sm display-5 font-heading" >Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mb-0 lh-lg" >These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
    </div><img class="img-fluid w-100 mb-12" src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="" />
    <div class="mw-xl mx-auto">
      <p class="lh-lg mb-8 pb-8 border-bottom" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
      <h2 class="mb-6 font-heading" >Lorem ipsum</h2>
      <p class="lh-lg mb-6" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p><img class="img-fluid mb-4" src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=870&amp;q=80" alt="" />
      <p class="mb-8 small"><span >Brown wooden dock by Mark Harpur via</span> <a href="#" >Unsplash</a></p>
      <p class="lh-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor commodo arcu id ullamcorper. Aliquam vestibulum lobortis venenatis. Aenean in pharetra risus, id iaculis leo. Proin id risus sit amet mauris hendrerit tincidunt. Vestibulum pulvinar nec leo nec sagittis. Duis vestibulum sit amet odio sodales consequat. Nam eget elit tempus, cursus lorem vel, sollicitudin massa. Sed varius condimentum massa, et volutpat ante eleifend a. Praesent purus justo, finibus eu suscipit in, vulputate quis est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin euismod tellus quam, eget interdum diam consectetur eget. Phasellus felis quam, iaculis at malesuada nec, varius nec massa. Integer rhoncus sapien faucibus turpis bibendum, quis maximus magna vehicula. Quisque pharetra, tortor sit amet vestibulum tincidunt, tortor lectus pretium ipsum, a elementum risus libero id diam. Morbi ut sem elementum, blandit augue eu, vehicula nunc. Ut et pellentesque mauris.</p>
      
      <ol class="mb-12">
        <li class="lh-lg" >Pellentesque in elit nec velit suscipit tincidunt sit amet sed augue. Proin augue justo, imperdiet nec ultrices non, dapibus sit amet risus. Nunc pellentesque nisl at neque pulvinar ornare.</li>
        <li class="lh-lg" >Nullam euismod, turpis a fermentum malesuada, lectus ante consectetur sem, ac eleifend ipsum diam vitae nisi. Pellentesque feugiat, nibh ut hendrerit porta, erat lectus aliquet libero, vitae vulputate leo neque id sapien.</li>
        <li class="lh-lg" >Praesent a consequat velit, a tincidunt est. Proin eu facilisis lacus. Fusce orci elit, pharetra at orci at, sagittis sollicitudin ex. Duis vitae nunc mollis, ultrices risus vel, consequat erat. Nam vel diam risus. Ut sed sagittis nibh, sed bibendum eros.</li>
      </ol>
      
      <div class="d-flex mb-6 bg-primary-light">
        <div class="px-1 bg-primary-dark"></div>
        <div class="p-10">
          <h2 class="lh-sm"  >&ldquo;On the other hand, perfection can also haunt some of us to the point of inaction.&rdquo;</h2>
        </div>

<section class="py-20">
  <div class="container">
    <div class="mw-3xl mb-12 mb-md-20 mx-auto text-center">
      <div class="d-flex justify-content-center align-items-center mb-4"><a class="text-muted text-decoration-none fw-bold" style="font-size: 12px;" href="#">Home</a>
        <svg class="mx-2" width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.12038 7.17461C-0.0593306 7.38428 -0.0350499 7.69993 0.174613 7.87964C0.384276 8.05935 0.699926 8.03507 0.879637 7.8254L3.87964 4.3254C4.04013 4.13816 4.04013 3.86186 3.87964 3.67461L0.879637 0.174613C0.699926 -0.0350495 0.384276 -0.0593303 0.174613 0.120381C-0.0350496 0.300092 -0.0593303 0.615742 0.120381 0.825405L2.84147 4.00001L0.12038 7.17461Z" fill="#A8A29E"></path>
        </svg><a class="text-muted text-decoration-none fw-bold" style="font-size: 12px;" href="#">Blog</a>
        <svg class="mx-2" width="4" height="8" viewbox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.12038 7.17461C-0.0593306 7.38428 -0.0350499 7.69993 0.174613 7.87964C0.384276 8.05935 0.699926 8.03507 0.879637 7.8254L3.87964 4.3254C4.04013 4.13816 4.04013 3.86186 3.87964 3.67461L0.879637 0.174613C0.699926 -0.0350495 0.384276 -0.0593303 0.174613 0.120381C-0.0350496 0.300092 -0.0593303 0.615742 0.120381 0.825405L2.84147 4.00001L0.12038 7.17461Z" fill="#A8A29E"></path>
        </svg><a class="text-muted text-decoration-none fw-bold" style="font-size: 12px;" href="#">Article</a>
      </div>
      <h3 class="mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
      <div class="d-flex justify-content-center align-items-center">
        <div class="me-4"><img class="img-fluid rounded-circle" style="width: 64px; height: 64px;" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=547&amp;q=80" alt=""/></div>
        <div class="text-start">
          <h6 class="text-muted">Danny Bailey</h6>
          <h6 class="fw-normal text-muted mb-0">February 26, 2021</h6>
        </div>
      </div>
    </div>
  </div>
  <div class="position-relative mb-12"><img class="d-none d-md-block position-absolute top-0 end-0" src="cronos-assets/elements/warning-light-small.svg" alt=""/><img class="d-none d-md-block position-absolute bottom-0 start-0" src="cronos-assets/elements/white-green-dark.svg" alt=""/><img class="img-fluid w-100" style="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=1300&amp;q=80" alt=""/></div>
  <div class="container">
    <div class="mw-2xl mx-auto">

<section class="position-relative py-24 bg-danger-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div>
        <div class="row align-items-center">
          <div class="col-lg-6 mb-8 mb-lg-0">
            <div class="mw-md">
              <div class="d-flex mb-10 align-items-center"><span class="badge me-6 px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="fs-9 fw-medium">17 Jul 2024</span></div>
              <h3 class="font-heading">Mastering Cash Basis Accounting: A Step-by-Step Guide</h3>
            </div>
          </div>
          <div class="col-lg-6"><img class="img-fluid d-block w-100" src="vista-assets/images/blog-content/placeholder-pink.png" alt=""></div>
        </div>
      </div>
      <div class="my-12 border-bottom border-white border-opacity-10"></div>
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="mw-sm pt-8 px-8 pb-12 bg-danger-light bg-opacity-10 rounded"><a class="btn mb-3 btn-link p-0 tex t-start text-white text-opacity-50" href="#">Table of content</a><a class="btn mb-3 btn-link p-0 text-start text-white fw-semibold" href="#">What is cash basis accounting?</a><a class="btn mb-3 btn-link p-0 text-start text-white text-opacity-50" href="#">How does cash accounting work?</a><a class="btn mb-12 btn-link p-0 text-start text-white text-opacity-50" href="#">The bottom line on cash basis accounting</a><span class="d-block mb-4 text-white text-opacity-50">Written by</span>
            <div class="d-flex mb-12 align-items-center"><img class="img-fluid" src="vista-assets/images/blog-content/avatar.png" alt="">
              <div class="ms-4"><span class="d-block text-white fw-semibold">Madelyn</span><span class="d-block fs-9 text-white text-opacity-50">Content Marketing</span></div>
            </div><span class="d-block mb-4 text-white text-opacity-50">Written by</span>
            <div class="d-flex align-items-center gap-6"><a class="btn btn-link p-0 text-white fs-6" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.205 2.25H21.513L14.286 10.51L22.788 21.75H16.13L10.916 14.933L4.94997 21.75H1.63997L9.36997 12.915L1.21497 2.25H8.03997L12.753 8.481L18.205 2.25ZM17.044 19.77H18.877L7.04497 4.126H5.07797L17.044 19.77Z" fill="currentColor"></path>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><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="row">
      <div class="col-md-6 mb-10 mb-md-0">
        <div class="mw-lg">
          <h2 class="font-heading fw-medium text-white mb-6">Casper is an awesome UI Library</h2>
          <p class="h4 fw-normal text-light-light mb-6">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="h4 fw-normal text-light-light mb-0">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <p class="display-4 text-white fw-medium mb-9">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="fs-6 text-white">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
          <p class="fs-6 text-white mb-12">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p><img class="img-fluid d-block w-100" src="casper-assets/content/image-lg.png" alt=""/>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-7xl">
    <div class="pt-12 pb-24 px-5 px-sm-16 bg-white rounded-5">
      <div class="text-center mb-12">
        <a class="btn d-inline-flex align-items-center border-0 p-0 fs-7 fw-medium text-muted" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="#58575E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ms-2">Back to Blog</span>
        </a>
      </div>
      <img class="img-fluid d-block mb-12 w-100 rounded-4" style="height: 700px; object-fit: cover; object-position: top;" src="mirga-assets/images/features/woman.jpg" alt="">
      <div class="mw-2xl mx-auto">
        <span class="d-block mb-6 fs-6 fw-semibold">Thu 12 Oct, 4 AM</span>
        <h3 class="font-heading lh-sm display-5 fw-semibold mb-6">The Rise of Video Marketing: Engage Your Audience Like Never Before!</h3>
        <div class="d-flex mb-12 align-items-center">
          <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>

<section class="py-5">
  <div class="container mb-5">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8 text-center">
        <div class="d-flex justify-content-center align-items-center mb-3">
          <a href="#">Home</a>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 12px;height: 12px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
          <a href="#">Blog</a>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor" style="width: 12px;height: 12px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
          <a href="#">Article</a>
        </div>
        <h2 class="display-4 fw-bold mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <div class="d-flex justify-content-center align-items-center">
          <div class="me-4">
            <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-avatar.png" alt="" style="width: 56px;height: 56px">
          </div>
          <div class="text-start">
            <h4>Danny Bailey</h4>
            <p class="text-muted mb-0">February 26, 2021</p>
          </div>

<section class="py-6">
  <div class="container">
    <div class="px-8 pt-8 pb-8 border rounded-3">
      <div class="d-flex mb-8 justify-content-between align-items-center"><span class="badge bg-info-light text-primary">Announcements</span>
        <div>
          <button class="btn p-0 me-3 rounded-circle bg-secondary" style="height: 6px; width: 6px;"></button>
          <button class="btn p-0 me-3 rounded-circle bg-secondary" style="height: 6px; width: 6px;"></button>
          <button class="btn py-0 me-3 px-4 rounded-pill bg-info" style="height: 6px;"></button>
          <button class="btn p-0 rounded-circle bg-secondary" style="height: 6px; width: 6px;"></button>
        </div>
      </div>
      <h6 class="mb-4">Leave it all at that place! &#x1F60E;</h6>
      <p class="mb-8">My wealth and treasures? If you want it, you can have it! Search for it! I left it all at that place!</p>
      <div class="d-flex flex-wrap pt-8 justify-content-between align-items-center border-top">
        <p class="mb-0">Due date: 15 May, 2021</p><a class="btn btn-primary" href="#" type="button"><span class="me-3">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.50012 1.5H11.5001C11.6327 1.5 11.7599 1.55268 11.8537 1.64645C11.9474 1.74021 12.0001 1.86739 12.0001 2V4.83333C12.0001 4.94152 11.965 5.04679 11.9001 5.13333L10.6001 6.86667C10.5352 6.95321 10.5001 7.05848 10.5001 7.16667V14C10.5001 14.1326 10.4474 14.2598 10.3537 14.3536C10.2599 14.4473 10.1327 14.5 10.0001 14.5H6.00012C5.86751 14.5 5.74034 14.4473 5.64657 14.3536C5.5528 14.2598 5.50012 14.1326 5.50012 14V7.16667C5.50012 7.05848 5.46503 6.95321 5.40012 6.86667L4.10012 5.13333C4.03521 5.04679 4.00012 4.94152 4.00012 4.83333V2C4.00012 1.86739 4.0528 1.74021 4.14657 1.64645C4.24034 1.55268 4.36751 1.5 4.50012 1.5V1.5Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.00012 7.5V9.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M4.00012 4H12.0001" stroke="white" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span><span>View details</span></a>
      </div>
    </div>
  </div>
</section>