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>
    </div>
  </div>
</section>

<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>
        <ul class="list-unstyled fs-5 fw-medium text-dark-light lh-lg mb-8">
          <li>1. Defining the Vision</li>
          <li>2. Team Collaboration</li>
          <li>3. Data Acquisition and Management</li>
        </ul>
        <h4 class="mb-6">The Collaborative Symphony</h4>
        <p class="fs-5 fw-medium text-dark-light lh-lg mb-6">The development process was marked by countless hours of research, prototyping, and iteration. We explored various machine learning algorithms and deep neural network architectures to ensure optimal performance and accuracy in content classification. Through rigorous testing and fine-tuning, we trained our AI model to recognize patterns, categorize assets, and recommend relevant collections with impressive precision.</p>
        <ul class="ps-0 fs-5 fw-medium text-dark-light lh-lg mb-8">
          <li class="d-flex mb-6">
            <div class="me-2">
              <span>1.</span>
            </div>
            <div>
              <p class="fs-5 fw-medium text-dark-light lh-lg mb-0">
                <span class="d-inline fs-5 fw-bold text-dark lh-lg">Defining the Vision:</span>
                <span>We begin by discussing the initial vision behind AI-Collections and the objectives we aimed to achieve. We highlight the need for a sophisticated content curation system that leverages AI capabilities to enhance user experiences and streamline information discovery.</span>
              </p>
            </div>
          </li>
          <li class="d-flex mb-6">
            <div class="me-2">
              <span>2.</span>
            </div>
            <div>
              <p class="fs-5 fw-medium text-dark-light lh-lg mb-0">
                <span class="d-inline fs-5 fw-bold text-dark lh-lg">Team Collaboration:</span>
                <span>Successful projects require effective teamwork. We emphasize the importance of collaboration and detail how our team of experts, including developers, data scientists, and designers, worked together to bring AI-Collections to life. We share insights on how we fostered a creative and innovative environment throughout the development process.</span>
              </p>
            </div>
          </li>
          <li class="d-flex">
            <div class="me-2">
              <span>3.</span>
            </div>
            <div>
              <p class="fs-5 fw-medium text-dark-light lh-lg mb-0">
                <span class="d-inline fs-5 fw-bold text-dark lh-lg">Data Acquisition and Management:</span>
                <span>content demands a reliable and extensive dataset. We provide an overview of the strategies we employed to gather and manage the data required for AI-Collections. This includes sourcing relevant content, data cleaning, and ensuring data quality and diversity.</span>
              </p>
            </div>
          </li>
        </ul>
        <h4 class="mb-6">From Pixels to Interactions</h4>
        <p class="fs-5 fw-medium text-dark-light lh-lg">Design played a crucial role in the development of AI-Collections. We wanted to create an intuitive user interface that empowers users to effortlessly manage their digital assets. Our design team conducted extensive user research and feedback sessions to understand the pain points and needs of content creators. The result is a sleek, user-friendly interface that allows for seamless navigation, quick bookmarking, and efficient organization of assets.</p>
        <p class="fs-5 fw-medium text-dark-light lh-lg">Throughout the process, we prioritized data privacy and security. We implemented robust encryption protocols and strict access controls to ensure that sensitive user information remains protected at all times. Building trust with our users has been of utmost importance, and we are committed to maintaining a secure environment for their valuable assets.</p>
        <h4 class="mb-6">Conclusion</h4>
        <p class="fs-5 fw-medium text-dark-light lh-lg mb-0">Design development is the alchemical blend of creativity and technology, where pixels transform into interactive experiences. It's a collaborative endeavor, a symphony of design and code, crafting digital landscapes that captivate and engage. From the initial concept to the continuous evolution, design development is the heartbeat of the digital realm, shaping the way we interact with and experience technology.</p>
        <div class="my-12 border-bottom"></div>
        <div class="py-5 px-6 bg-light-light border rounded-2">
          <div class="d-flex mb-n4 flex-wrap align-items-end">
            <span class="me-2 mb-4 fs-5 text-dark-light">Interested in more tips like this?</span>
            <a class="btn mb-4 p-0 btn-link d-inline-flex flex-wrap align-items-center fw-bold" href="#">
              <span class="me-2">Subscribe to our newsletter</span>
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.99984 10.6667H15.4165M15.4165 10.6667L10.4165 5.66675M15.4165 10.6667L10.4165 15.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="my-5 border-bottom"></div>
        <div class="d-flex mb-n6 flex-wrap align-items-center justify-content-between">
          <div class="d-flex mb-6 align-items-center">
            <img src="solstice-assets/images/blog/avatar1.png" alt="">
            <div class="ms-4">
              <span class="d-block fw-semibold">John Doe</span>
              <span class="text-light-dark fw-medium">Content Writer, Solstice</span>
            </div>
          </div>
          <div class="mb-6"><a class="btn py-3 px-4 btn-outline-light text-dark shadow" href="#">Share this post</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<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">
          <li>1. Lectus id duis vitae porttitor enim gravida morbi.</li>
          <li>2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
          <li>3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
        </ul>
        <p class="fs-5 text-light text-opacity-75">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. Vivamus id pharetra massa. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</p>
      </div>
      <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center"><a class="btn btn-outline-light fw-medium" href="#">Copy Link</a>
        <div class="d-flex gap-4"><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.5995 4.43344H14.1661V1.78344C13.4076 1.70456 12.6454 1.66562 11.8828 1.66677C9.61615 1.66677 8.06615 3.05011 8.06615 5.58344V7.76677H5.50781V10.7334H8.06615V18.3334H11.1328V10.7334H13.6828L14.0661 7.76677H11.1328V5.87511C11.1328 5.00011 11.3661 4.43344 12.5995 4.43344Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.3346 4.83326C17.7083 5.10501 17.0458 5.28465 16.368 5.3666C17.0831 4.93936 17.619 4.26725 17.8763 3.47493C17.2043 3.87498 16.4686 4.15684 15.7013 4.30826C15.1884 3.75207 14.5054 3.38184 13.7595 3.25564C13.0135 3.12944 12.2468 3.2544 11.5795 3.61092C10.9122 3.96745 10.3821 4.53537 10.0723 5.22563C9.76259 5.91588 9.69071 6.68942 9.86797 7.42493C8.50916 7.3562 7.18 7.00239 5.96685 6.38648C4.75369 5.77057 3.68367 4.90634 2.8263 3.84993C2.52558 4.37507 2.36757 4.96978 2.36797 5.57493C2.3669 6.13692 2.50482 6.69044 2.76943 7.18623C3.03405 7.68202 3.41715 8.10469 3.88464 8.4166C3.34128 8.40181 2.80954 8.25601 2.33464 7.9916V8.03326C2.33871 8.82067 2.61463 9.58251 3.11573 10.1899C3.61683 10.7973 4.31235 11.213 5.08464 11.3666C4.78735 11.4571 4.4787 11.5048 4.16797 11.5083C3.95288 11.5058 3.73832 11.4862 3.5263 11.4499C3.74623 12.1273 4.17182 12.7192 4.74386 13.1434C5.31591 13.5676 6.00595 13.8029 6.71797 13.8166C5.51564 14.7627 4.03121 15.279 2.5013 15.2833C2.22275 15.2842 1.94442 15.2675 1.66797 15.2333C3.22999 16.2418 5.05031 16.7772 6.90964 16.7749C8.19271 16.7883 9.46558 16.5458 10.6539 16.0617C11.8422 15.5775 12.9222 14.8615 13.8306 13.9553C14.7391 13.0492 15.4579 11.9711 15.9451 10.784C16.4323 9.59695 16.678 8.3247 16.668 7.0416C16.668 6.89993 16.668 6.74993 16.668 6.59993C17.3219 6.11227 17.8859 5.51445 18.3346 4.83326Z" fill="currentColor"></path>
            </svg></a><a class="btn p-0 d-flex align-items-center justify-content-center btn-outline-light" href="#" style="width: 60px; height: 60px;">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.4513 4.55008C14.2535 4.55008 14.0602 4.60873 13.8957 4.71861C13.7313 4.82849 13.6031 4.98467 13.5274 5.1674C13.4517 5.35012 13.4319 5.55119 13.4705 5.74517C13.5091 5.93915 13.6043 6.11734 13.7442 6.25719C13.884 6.39704 14.0622 6.49228 14.2562 6.53087C14.4502 6.56945 14.6513 6.54965 14.834 6.47396C15.0167 6.39827 15.1729 6.2701 15.2828 6.10565C15.3927 5.9412 15.4513 5.74786 15.4513 5.55008C15.4513 5.28486 15.3459 5.03051 15.1584 4.84297C14.9709 4.65544 14.7165 4.55008 14.4513 4.55008ZM18.2846 6.56675C18.2684 5.87533 18.1389 5.19125 17.9013 4.54175C17.6894 3.98603 17.3596 3.48281 16.9346 3.06675C16.522 2.6396 16.0176 2.3119 15.4596 2.10841C14.8118 1.86355 14.127 1.73109 13.4346 1.71675C12.5513 1.66675 12.268 1.66675 10.0013 1.66675C7.73464 1.66675 7.4513 1.66675 6.56797 1.71675C5.8756 1.73109 5.19075 1.86355 4.54297 2.10841C3.98603 2.31396 3.48208 2.64138 3.06797 3.06675C2.64082 3.4794 2.31312 3.98378 2.10964 4.54175C1.86477 5.18953 1.73231 5.87438 1.71797 6.56675C1.66797 7.45008 1.66797 7.73342 1.66797 10.0001C1.66797 12.2667 1.66797 12.5501 1.71797 13.4334C1.73231 14.1258 1.86477 14.8106 2.10964 15.4584C2.31312 16.0164 2.64082 16.5208 3.06797 16.9334C3.48208 17.3588 3.98603 17.6862 4.54297 17.8917C5.19075 18.1366 5.8756 18.2691 6.56797 18.2834C7.4513 18.3334 7.73464 18.3334 10.0013 18.3334C12.268 18.3334 12.5513 18.3334 13.4346 18.2834C14.127 18.2691 14.8118 18.1366 15.4596 17.8917C16.0176 17.6883 16.522 17.3606 16.9346 16.9334C17.3615 16.5189 17.6916 16.0152 17.9013 15.4584C18.1389 14.8089 18.2684 14.1248 18.2846 13.4334C18.2846 12.5501 18.3346 12.2667 18.3346 10.0001C18.3346 7.73342 18.3346 7.45008 18.2846 6.56675ZM16.7846 13.3334C16.7786 13.8624 16.6828 14.3865 16.5013 14.8834C16.3682 15.2461 16.1545 15.5738 15.8763 15.8417C15.606 16.1172 15.279 16.3304 14.918 16.4667C14.4211 16.6482 13.8969 16.744 13.368 16.7501C12.5346 16.7917 12.2263 16.8001 10.0346 16.8001C7.84297 16.8001 7.53464 16.8001 6.7013 16.7501C6.15204 16.7604 5.60513 16.6758 5.08464 16.5001C4.73945 16.3568 4.42743 16.1441 4.16797 15.8751C3.89138 15.6074 3.68034 15.2794 3.5513 14.9167C3.34785 14.4127 3.23501 13.8767 3.21797 13.3334C3.21797 12.5001 3.16797 12.1917 3.16797 10.0001C3.16797 7.80842 3.16797 7.50008 3.21797 6.66675C3.2217 6.12596 3.32043 5.59004 3.50964 5.08341C3.65634 4.73167 3.88152 4.41813 4.16797 4.16675C4.42115 3.88022 4.73404 3.65266 5.08464 3.50008C5.59259 3.31678 6.12797 3.22098 6.66797 3.21675C7.5013 3.21675 7.80964 3.16675 10.0013 3.16675C12.193 3.16675 12.5013 3.16675 13.3346 3.21675C13.8636 3.22282 14.3877 3.31862 14.8846 3.50008C15.2633 3.64062 15.6032 3.86912 15.8763 4.16675C16.1494 4.42273 16.3628 4.73569 16.5013 5.08341C16.6865 5.59086 16.7824 6.12656 16.7846 6.66675C16.8263 7.50008 16.8346 7.80842 16.8346 10.0001C16.8346 12.1917 16.8263 12.5001 16.7846 13.3334ZM10.0013 5.72508C9.15614 5.72673 8.33044 5.97885 7.62851 6.4496C6.92659 6.92034 6.37995 7.58858 6.05766 8.36988C5.73538 9.15117 5.65191 10.0105 5.8178 10.8392C5.98369 11.6679 6.3915 12.4289 6.9897 13.0259C7.5879 13.6229 8.34964 14.0293 9.17869 14.1935C10.0077 14.3578 10.8669 14.2727 11.6475 13.9489C12.4282 13.6251 13.0954 13.0771 13.5647 12.3743C14.0341 11.6714 14.2846 10.8452 14.2846 10.0001C14.2857 9.43767 14.1756 8.88059 13.9607 8.36088C13.7457 7.84117 13.4301 7.36909 13.032 6.97179C12.634 6.57449 12.1613 6.25981 11.6411 6.04586C11.121 5.8319 10.5637 5.72288 10.0013 5.72508ZM10.0013 12.7751C9.45246 12.7751 8.91594 12.6123 8.45959 12.3074C8.00325 12.0025 7.64757 11.5691 7.43754 11.062C7.2275 10.555 7.17255 9.997 7.27962 9.45871C7.3867 8.92041 7.65099 8.42595 8.03908 8.03786C8.42717 7.64977 8.92163 7.38548 9.45993 7.2784C9.99822 7.17133 10.5562 7.22628 11.0632 7.43632C11.5703 7.64635 12.0037 8.00203 12.3086 8.45837C12.6136 8.91472 12.7763 9.45124 12.7763 10.0001C12.7763 10.3645 12.7045 10.7253 12.5651 11.062C12.4256 11.3987 12.2212 11.7046 11.9635 11.9623C11.7058 12.22 11.3999 12.4244 11.0632 12.5638C10.7266 12.7033 10.3657 12.7751 10.0013 12.7751Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mt-20 pt-16 border-top border-dark border-opacity-50">
      <div class="mw-sm mw-sm-lg mw-md-xl mw-lg-none mx-auto"><span class="badge mb-4 text-primary">Nightsable Card</span>
        <h2 class="font-heading h2 text-white mb-16" style="letter-spacing: -0.2rem;">From the blog</h2>
        <div class="row">
          <div class="col-12 col-lg-4 mb-12 mb-lg-0"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/cash4.png" alt="">
              <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</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 class="mw-sm">
                <h6 class="mb-4">Women in business</h6>
                <p class="mw-xs text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
              </div></a></div>
          <div class="col-12 col-lg-4 mb-12 mb-lg-0"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/hand4.png" alt="">
              <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</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 class="mw-sm">
                <h6 class="mb-4">Women in business</h6>
                <p class="mw-xs text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
              </div></a></div>
          <div class="col-12 col-lg-4"><a class="btn p-0 w-100 text-start border-0" href="#"><img class="img-fluid d-block w-100 mb-8" src="nightsable-assets/images/blog/skyscraper4.png" alt="">
              <div class="d-flex mb-4 align-items-center"><span class="fs-9 lh-lg fw-medium">Blog Post</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 class="mw-sm">
                <h6 class="mb-4">Women in business</h6>
                <p class="mw-xs text-white text-opacity-75 mb-6">Nightsable is a strategic branding agency focused on brand creation</p><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Corporate Gifting</span><span class="d-inline-block px-6 py-3 mb-3 me-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Sales</span><span class="d-inline-block px-6 py-3 mb-3 fs-9 fw-medium bg-dark bg-opacity-50 rounded-pill">Marketing</span>
              </div></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<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">
                  <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" >Workflow builder</span>
              </div>
            </div><a class="btn btn-primary" href="#" >Discover Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<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>
          </div>
        </div>
      </div>
      <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>
      <img class="mb-4 img-fluid w-100" src="flex-assets/images/blog-content/content-middle.png" alt="">
      <p class="mb-8 fs-10 text-secondary-light fw-medium">
        <span>Non massa enim vitae duis mattis. Vel in</span>
        <u><a class="link-secondary-light" href="#">ultricies</a></u>
        <span>vel fringilla.</span>
      </p>
      <h3 class="mb-4 font-heading fs-7 text-light-dark fw-semibold">Header 1</h3>
      <p class="mb-16 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>
      <p class="mb-6 fs-10 text-secondary">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>
      <ol class="list-unstyled px-4 mb-16">
        <li class="fs-10 text-secondary">1. Lectus id duis vitae porttitor enim gravida morbi.</li>
        <li class="fs-10 text-secondary">2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
        <li class="fs-10 text-secondary">3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
      </ol>
      <p class="mb-10 pb-10 fs-10 text-secondary border-bottom border-light">
        <span>Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim.</span>
        <u><a class="link-success" href="#">Vivamus id pharetra massa.</a></u>
        <span>Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</span>
      </p>
      <div class="row justify-content-center g-2">
        <div class="col-auto me-2">
          <a class="btn btn-lg btn-outline-light fs-12 px-4 py-2 text-secondary shadow" href="#">
            <svg class="me-1" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 15.8333H5C4.33696 15.8333 3.70108 15.5699 3.23224 15.1011C2.76339 14.6323 2.5 13.9964 2.5 13.3333V6.66667C2.5 6.44565 2.41221 6.23369 2.25592 6.07741C2.09964 5.92113 1.88768 5.83333 1.66667 5.83333C1.44566 5.83333 1.23369 5.92113 1.07741 6.07741C0.921133 6.23369 0.833336 6.44565 0.833336 6.66667V13.3333C0.833336 14.4384 1.27232 15.4982 2.05372 16.2796C2.44063 16.6665 2.89996 16.9734 3.40549 17.1828C3.91101 17.3922 4.45283 17.5 5 17.5H15C15.221 17.5 15.433 17.4122 15.5893 17.2559C15.7455 17.0996 15.8333 16.8877 15.8333 16.6667C15.8333 16.4457 15.7455 16.2337 15.5893 16.0774C15.433 15.9211 15.221 15.8333 15 15.8333ZM19.1667 8.28333C19.158 8.20678 19.1412 8.13136 19.1167 8.05833V7.98333C19.0766 7.89765 19.0232 7.81889 18.9583 7.75V7.75L13.9583 2.75C13.8894 2.68518 13.8107 2.63173 13.725 2.59167H13.65L13.3833 2.5H6.66667C6.00363 2.5 5.36774 2.76339 4.8989 3.23223C4.43006 3.70107 4.16667 4.33696 4.16667 5V11.6667C4.16667 12.3297 4.43006 12.9656 4.8989 13.4344C5.36774 13.9033 6.00363 14.1667 6.66667 14.1667H16.6667C17.3297 14.1667 17.9656 13.9033 18.4344 13.4344C18.9033 12.9656 19.1667 12.3297 19.1667 11.6667V8.33333C19.1667 8.33333 19.1667 8.33333 19.1667 8.28333ZM14.1667 5.34167L16.325 7.5H15C14.779 7.5 14.567 7.4122 14.4107 7.25592C14.2545 7.09964 14.1667 6.88768 14.1667 6.66667V5.34167ZM17.5 11.6667C17.5 11.8877 17.4122 12.0996 17.2559 12.2559C17.0996 12.4122 16.8877 12.5 16.6667 12.5H6.66667C6.44565 12.5 6.23369 12.4122 6.07741 12.2559C5.92113 12.0996 5.83334 11.8877 5.83334 11.6667V5C5.83334 4.77899 5.92113 4.56702 6.07741 4.41074C6.23369 4.25446 6.44565 4.16667 6.66667 4.16667H12.5V6.66667C12.5 7.32971 12.7634 7.96559 13.2322 8.43443C13.7011 8.90327 14.337 9.16667 15 9.16667H17.5V11.6667Z" fill="#BBC3CF"></path>
            </svg>
            <span>Copy Link</span>
          </a>
        </div>
        <div class="col-auto">
          <a class="btn btn-lg btn-outline-light fs-12 p-2 shadow" href="#">
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.6 4.43332H14.1667V1.78332C13.4081 1.70444 12.646 1.6655 11.8833 1.66665C9.61667 1.66665 8.06667 3.04998 8.06667 5.58332V7.76665H5.50833V10.7333H8.06667V18.3333H11.1333V10.7333H13.6833L14.0667 7.76665H11.1333V5.87498C11.1333 4.99998 11.3667 4.43332 12.6 4.43332Z" fill="#556987"></path>
            </svg>
          </a>
        </div>
        <div class="col-auto">
          <a class="btn btn-lg btn-outline-light fs-12 p-2 shadow" href="#">
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.3333 4.83339C17.7069 5.10513 17.0445 5.28477 16.3667 5.36672C17.0818 4.93949 17.6177 4.26737 17.875 3.47505C17.203 3.87511 16.4673 4.15697 15.7 4.30839C15.1871 3.7522 14.5041 3.38197 13.7582 3.25576C13.0122 3.12956 12.2455 3.25452 11.5782 3.61104C10.9109 3.96757 10.3808 4.5355 10.071 5.22575C9.76129 5.916 9.68941 6.68954 9.86667 7.42505C8.50786 7.35632 7.1787 7.00251 5.96555 6.3866C4.75239 5.77069 3.68237 4.90646 2.825 3.85005C2.52428 4.37519 2.36627 4.9699 2.36667 5.57505C2.3656 6.13704 2.50352 6.69057 2.76813 7.18636C3.03275 7.68215 3.41585 8.10481 3.88333 8.41672C3.33998 8.40194 2.80824 8.25613 2.33333 7.99172V8.03339C2.33741 8.82079 2.61333 9.58263 3.11443 10.19C3.61553 10.7974 4.31105 11.2131 5.08333 11.3667C4.78605 11.4572 4.4774 11.5049 4.16667 11.5084C3.95158 11.5059 3.73702 11.4864 3.525 11.4501C3.74493 12.1274 4.17052 12.7193 4.74256 13.1435C5.31461 13.5677 6.00465 13.803 6.71667 13.8167C5.51434 14.7628 4.0299 15.2791 2.5 15.2834C2.22145 15.2843 1.94311 15.2676 1.66667 15.2334C3.22869 16.2419 5.04901 16.7773 6.90833 16.7751C8.19141 16.7884 9.46428 16.5459 10.6526 16.0618C11.8409 15.5777 12.9209 14.8616 13.8293 13.9555C14.7378 13.0493 15.4566 11.9712 15.9438 10.7841C16.431 9.59707 16.6767 8.32483 16.6667 7.04172C16.6667 6.90005 16.6667 6.75005 16.6667 6.60005C17.3206 6.11239 17.8846 5.51457 18.3333 4.83339V4.83339Z" fill="#556987"></path>
            </svg>
          </a>
        </div>
        <div class="col-auto">
          <a class="btn btn-lg btn-outline-light fs-12 p-2 shadow" href="#">
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.45 4.54996C14.2522 4.54996 14.0589 4.60861 13.8944 4.71849C13.73 4.82837 13.6018 4.98455 13.5261 5.16728C13.4504 5.35 13.4306 5.55107 13.4692 5.74505C13.5078 5.93903 13.603 6.11721 13.7429 6.25707C13.8827 6.39692 14.0609 6.49216 14.2549 6.53074C14.4489 6.56933 14.65 6.54953 14.8327 6.47384C15.0154 6.39815 15.1716 6.26998 15.2815 6.10553C15.3913 5.94108 15.45 5.74774 15.45 5.54996C15.45 5.28474 15.3446 5.03039 15.1571 4.84285C14.9696 4.65532 14.7152 4.54996 14.45 4.54996V4.54996ZM18.2833 6.56663C18.2671 5.87521 18.1376 5.19113 17.9 4.54163C17.6881 3.9859 17.3583 3.48269 16.9333 3.06663C16.5207 2.63948 16.0163 2.31177 15.4583 2.10829C14.8105 1.86343 14.1257 1.73097 13.4333 1.71663C12.55 1.66663 12.2667 1.66663 10 1.66663C7.73333 1.66663 7.45 1.66663 6.56666 1.71663C5.87429 1.73097 5.18945 1.86343 4.54166 2.10829C3.98473 2.31383 3.48078 2.64126 3.06666 3.06663C2.63952 3.47927 2.31181 3.98366 2.10833 4.54163C1.86346 5.18941 1.73101 5.87425 1.71666 6.56663C1.66666 7.44996 1.66666 7.73329 1.66666 9.99996C1.66666 12.2666 1.66666 12.55 1.71666 13.4333C1.73101 14.1257 1.86346 14.8105 2.10833 15.4583C2.31181 16.0163 2.63952 16.5206 3.06666 16.9333C3.48078 17.3587 3.98473 17.6861 4.54166 17.8916C5.18945 18.1365 5.87429 18.269 6.56666 18.2833C7.45 18.3333 7.73333 18.3333 10 18.3333C12.2667 18.3333 12.55 18.3333 13.4333 18.2833C14.1257 18.269 14.8105 18.1365 15.4583 17.8916C16.0163 17.6881 16.5207 17.3604 16.9333 16.9333C17.3602 16.5188 17.6903 16.0151 17.9 15.4583C18.1376 14.8088 18.2671 14.1247 18.2833 13.4333C18.2833 12.55 18.3333 12.2666 18.3333 9.99996C18.3333 7.73329 18.3333 7.44996 18.2833 6.56663V6.56663ZM16.7833 13.3333C16.7773 13.8623 16.6815 14.3864 16.5 14.8833C16.3669 15.246 16.1532 15.5736 15.875 15.8416C15.6047 16.117 15.2777 16.3303 14.9167 16.4666C14.4197 16.6481 13.8956 16.7439 13.3667 16.75C12.5333 16.7916 12.225 16.8 10.0333 16.8C7.84166 16.8 7.53333 16.8 6.7 16.75C6.15074 16.7602 5.60383 16.6757 5.08333 16.5C4.73815 16.3567 4.42613 16.1439 4.16666 15.875C3.89007 15.6072 3.67903 15.2793 3.55 14.9166C3.34654 14.4126 3.2337 13.8766 3.21666 13.3333C3.21666 12.5 3.16666 12.1916 3.16666 9.99996C3.16666 7.80829 3.16666 7.49996 3.21666 6.66663C3.2204 6.12584 3.31912 5.58991 3.50833 5.08329C3.65504 4.73155 3.88022 4.41801 4.16666 4.16663C4.41984 3.8801 4.73274 3.65254 5.08333 3.49996C5.59129 3.31666 6.12666 3.22086 6.66666 3.21663C7.5 3.21663 7.80833 3.16663 10 3.16663C12.1917 3.16663 12.5 3.16663 13.3333 3.21663C13.8623 3.22269 14.3864 3.3185 14.8833 3.49996C15.262 3.6405 15.6019 3.869 15.875 4.16663C16.1481 4.42261 16.3615 4.73557 16.5 5.08329C16.6852 5.59074 16.7811 6.12644 16.7833 6.66663C16.825 7.49996 16.8333 7.80829 16.8333 9.99996C16.8333 12.1916 16.825 12.5 16.7833 13.3333ZM10 5.72496C9.15484 5.72661 8.32913 5.97873 7.62721 6.44947C6.92529 6.92022 6.37865 7.58846 6.05636 8.36975C5.73407 9.15105 5.6506 10.0103 5.81649 10.8391C5.98238 11.6678 6.39019 12.4287 6.98839 13.0258C7.58659 13.6228 8.34834 14.0291 9.17738 14.1934C10.0064 14.3577 10.8656 14.2725 11.6462 13.9487C12.4269 13.6249 13.0941 13.077 13.5634 12.3742C14.0328 11.6713 14.2833 10.8451 14.2833 9.99996C14.2844 9.43755 14.1743 8.88047 13.9594 8.36076C13.7444 7.84105 13.4288 7.36897 13.0307 6.97167C12.6326 6.57437 12.16 6.25969 11.6398 6.04573C11.1197 5.83178 10.5624 5.72276 10 5.72496V5.72496ZM10 12.775C9.45115 12.775 8.91464 12.6122 8.45829 12.3073C8.00194 12.0024 7.64627 11.569 7.43623 11.0619C7.2262 10.5548 7.17124 9.99688 7.27832 9.45858C7.38539 8.92029 7.64969 8.42583 8.03778 8.03774C8.42587 7.64965 8.92033 7.38535 9.45862 7.27828C9.99692 7.17121 10.5549 7.22616 11.0619 7.43619C11.569 7.64623 12.0024 8.00191 12.3073 8.45825C12.6122 8.9146 12.775 9.45112 12.775 9.99996C12.775 10.3644 12.7032 10.7252 12.5638 11.0619C12.4243 11.3986 12.2199 11.7045 11.9622 11.9622C11.7045 12.2199 11.3986 12.4243 11.0619 12.5637C10.7253 12.7032 10.3644 12.775 10 12.775V12.775Z" fill="#556987"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<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>
      </div>
      <p class="mb-8 small"><span >Danny Bailey, CEO &amp; Founder at </span> <a href="#" >Pstls</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>
    </div>
  </div>
</section>

<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">
      <p class="mb-6 lead lh-lg text-muted">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>
      <p class="mb-6 lead lh-lg text-muted">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it&rsquo;s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
      <p class="lead lh-lg text-muted">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>
  </div>
</section>

<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>
                </svg></a><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="M19.7778 2C20.3671 2 20.9324 2.23413 21.3491 2.65087C21.7659 3.06762 22 3.63285 22 4.22222V19.7778C22 20.3671 21.7659 20.9324 21.3491 21.3491C20.9324 21.7659 20.3671 22 19.7778 22H4.22222C3.63285 22 3.06762 21.7659 2.65087 21.3491C2.23413 20.9324 2 20.3671 2 19.7778V4.22222C2 3.63285 2.23413 3.06762 2.65087 2.65087C3.06762 2.23413 3.63285 2 4.22222 2H19.7778ZM19.2222 19.2222V13.3333C19.2222 12.3727 18.8406 11.4513 18.1613 10.772C17.482 10.0927 16.5607 9.71111 15.6 9.71111C14.6556 9.71111 13.5556 10.2889 13.0222 11.1556V9.92222H9.92222V19.2222H13.0222V13.7444C13.0222 12.8889 13.7111 12.1889 14.5667 12.1889C14.9792 12.1889 15.3749 12.3528 15.6666 12.6445C15.9583 12.9362 16.1222 13.3319 16.1222 13.7444V19.2222H19.2222ZM6.31111 8.17778C6.80618 8.17778 7.28098 7.98111 7.63104 7.63104C7.98111 7.28098 8.17778 6.80618 8.17778 6.31111C8.17778 5.27778 7.34444 4.43333 6.31111 4.43333C5.81309 4.43333 5.33547 4.63117 4.98332 4.98332C4.63117 5.33547 4.43333 5.81309 4.43333 6.31111C4.43333 7.34444 5.27778 8.17778 6.31111 8.17778ZM7.85556 19.2222V9.92222H4.77778V19.2222H7.85556Z" fill="currentColor"></path>
                </svg></a><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="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="currentColor"></path>
                </svg></a><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="M22 12.0251C22 6.49123 17.52 2 12 2C6.48 2 2 6.49123 2 12.0251C2 16.8772 5.44 20.9173 10 21.8496V15.0326H8V12.0251H10V9.5188C10 7.58396 11.57 6.01003 13.5 6.01003H16V9.01754H14C13.45 9.01754 13 9.46867 13 10.0201V12.0251H16V15.0326H13V22C18.05 21.4987 22 17.2281 22 12.0251Z" fill="currentColor"></path>
                </svg></a></div>
          </div>
        </div>
        <div class="col-lg-8">
          <div class="mw-4xl ps-lg-14">
            <p class="fs-6 text-white text-opacity-50 mb-12">Cash basis accounting simplifies tracking by only recording transactions when cash enters or exits your business, regardless of when they're earned or billed. It's commonly used by individuals and small businesses with straightforward cash flows. While it offers simplicity and clarity regarding available cash, it may not provide a complete picture of business health or growth opportunities.</p>
            <h4 class="font-heading mb-6">What is cash basis accounting?</h4>
            <p class="fs-6 text-white text-opacity-50 mb-12">Cash basis accounting is when you only record transactions when the money enters or leaves your business, even if they were earned or billed earlier.</p>
            <h4 class="font-heading mb-6">How does cash accounting work?</h4>
            <p class="fs-6 text-white text-opacity-50 mb-6">Cash basis accounting is a simple way to track the cash that’s flowing in and out of your business.</p>
            <p class="fs-6 text-white text-opacity-50 mb-6">Here are a few examples of what it can look like:</p>
            <ul class="mb-12">
              <li class="mb-6 text-white text-opacity-50">With cash basis accounting, you record payments for products as they're received, not beforehand, even with flexible payment options like installment plans for your online shop.</li>
              <li class="mb-6 text-white text-opacity-50">If customers pay with credit cards, revenue isn't recorded immediately but when the payment is received from the credit card company.</li>
              <li class="mb-6 text-white text-opacity-50">You’re a graphic designer who spends a week in April creating a brochure for a local gallery. You submit an invoice of net 30, which means that the gallery is paying you in May. With cash basis accounting, you’d recognize that income in May when you receive the payment rather than in April, when you did the work.</li>
              <li class="mb-6 text-white text-opacity-50">In cash basis accounting for your online clothing shop, sales are only recorded when payment is received via debit or cash, not credit.</li>
            </ul>
            <h4 class="font-heading mb-6">What is cash basis accounting?</h4>
            <div class="mw-2xl ps-6 border-start border-2 border-danger">
              <p class="fs-6 text-danger-light mb-0">Cash basis accounting is a simple way to track the cash that’s flowing in and out of your business.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="my-12 my-md-24 border-bottom border-white border-opacity-10"></div>
      <div>
        <div class="d-flex flex-wrap gap-6 mb-10 align-items-center justify-content-between">
          <h4 class="font-heading mb-0">Continue Reading</h4><a class="btn p-0 d-flex lh-sm btn-link text-white fs-9 fw-medium" href="#"><span class="me-2">See all</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 3.00024L10.5 8.00024L5.5 13.0002" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
        <div class="row">
          <div class="col-lg-4 mb-8 mb-lg-0"><a class="d-block btn p-1 btn-outline-danger text-start border-0 bg-transparent" href="#"><img class="img-fluid d-block w-100 mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
              <h6 class="mw-xs fs-6 fw-bold mb-0 lh-sm">7 Black Friday tips for small businesses</h6></a></div>
          <div class="col-lg-4 mb-8 mb-lg-0"><a class="d-block btn p-1 btn-outline-danger text-start border-0 bg-transparent" href="#"><img class="img-fluid d-block w-100 mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
              <h6 class="mw-xs fs-6 fw-bold mb-0 lh-sm">5 ways to get paid faster with automated invoicing</h6></a></div>
          <div class="col-lg-4"><a class="d-block btn p-1 btn-outline-danger text-start border-0 bg-transparent" href="#"><img class="img-fluid d-block w-100 mb-6" src="vista-assets/images/blog-content/placeholder-pink-small.png" alt="">
              <h6 class="mw-xs fs-6 fw-bold mb-0 lh-sm">How to prepare for a business tax audit</h6></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<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>
        </div>
        <p class="fs-5 fw-bold mb-6">In the ever-evolving landscape of digital marketing, one strategy has been making waves and capturing the attention of audiences worldwide – video marketing. With the rise of social media platforms, shortened attention spans, and the increasing popularity of visual content, businesses are finding new and creative ways to connect with their audience through compelling videos.</p>
        <h4 class="font-heading fs-3 mb-6">The Power of Visual Storytelling</h4>
        <p class="fs-7 fw-medium mb-6">In the ever-evolving landscape of digital marketing, one strategy has been making waves and capturing the attention of audiences worldwide – video marketing. With the rise of social media platforms, shortened attention spans, and the increasing popularity of visual content, businesses are finding new and creative ways to connect with their audience through compelling videos.</p>
        <h4 class="font-heading fs-3 mb-6">Social Media Dominance</h4>
        <p class="fs-7 fw-medium mb-6">Social media platforms have become the epicenter of digital communication, and videos are taking center stage. With features like Instagram Stories, Facebook Live, and TikTok, businesses can create dynamic and shareable content that not only entertains but also drives brand awareness. The shareability of videos on these platforms makes it easier for businesses to reach a broader audience and increase their online presence.</p>
        <h4 class="font-heading fs-3 mb-6">Social Media Dominance</h4>
        <ul class="mb-6 fw-medium fs-7">
          <li class="mb-4">Video content is crucial for mobile users, who prefer consuming content on the go.</li>
          <li class="mb-4">Mobile-optimized videos improve accessibility and cater to the vast majority of users using smartphones.</li>
          <li class="mb-4">Encouraging user-generated content adds authenticity and diversity to video marketing efforts.</li>
          <li>User participation enhances brand loyalty and community engagement.</li>
        </ul>
        <h4 class="font-heading fs-3 mb-6">Embrace the Future of Marketing</h4>
        <p class="fs-7 fw-medium mb-12">In conclusion, the rise of video marketing is a testament to the ever-changing dynamics of the digital landscape. To stay relevant and capture the attention of today's audience, businesses must embrace the power of visual storytelling through videos. From social media dominance to SEO benefits and increased conversion rates, the advantages are clear. So, if you haven't already, it's time to incorporate video marketing into your strategy and engage your audience like never before!</p>
        <a class="btn d-flex flex-column flex-lg-row gap-2 align-items-center justify-content-center btn-outline-primary px-4 fs-6 w-100 mb-12" href="#">
          <span>Interested in more tips like this?</span>
          <span class="me-lg-2 text-danger-dark">Subscribe to our newsletter</span>
          <svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="1" y="0.5" width="25" height="25" rx="12.5" fill="white"></rect><rect x="1" y="0.5" width="25" height="25" rx="12.5" stroke="#D8D8DA"></rect>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 8L12.7825 8.6965L16.586 12.5H8.5V13.5H16.586L12.793 17.293L13.5 18L18.5 13L13.5 8Z" fill="#FF5418"></path>
          </svg>
        </a>
        <div class="d-flex flex-column flex-sm-row gap-6 align-items-center justify-content-between">
          <div class="d-flex align-items-center">
            <img class="img-fluid rounded-pill" style="width: 64px;" src="mirga-assets/images/team/avatar1.png" alt="">
            <div class="ms-4">
              <span class="d-block fs-7 lh-sm fw-medium text-dark">John Doe</span>
              <span class="d-block lh-sm">Content Writer, Mirga</span>
            </div>
          </div>
          <a class="btn btn-outline-primary" href="#">Share this post</a>
        </div>
      </div>
    </div>
  </div>
</section>

<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>
        </div>
      </div>
    </div>
  </div>
  <div class="mb-5">
    <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-horizontal.png" alt="">
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mx-auto">
        <p class="lead text-muted mb-4">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>
        <p class="lead text-muted mb-4">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>
        <p class="lead text-muted mb-4">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
      </div>
    </div>
  </div>
</section>

<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>