UI Components – Bootstrap 6 Library

<section class="bg-1" style="padding-bottom: 160px;">
  <div class="bg-black pt-12 mb-12">
    <div class="container position-relative pb-12">
      <div class="row justify-content-center">
        <div class="col-12 lg:col-8 xl:col-7 text-center mb-12">
          <h2 class="fs-4xl fw-bold text-balance fg-white mt-5 mb-7">Take quick action that increases your brand's regular profit.</h2>
          <p class="fs-lg fw-light fg-white text-pretty mb-9">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          <a class="btn-solid theme-primary btn-lg" href="#">Try demo</a>
        </div>
      </div>
      <div class="row" style="margin-bottom: -200px;">
        <div class="col-12 lg:col-4 mb-7 lg:mb-0">
          <div class="rounded-9 bg-2 p-7 h-100 text-center">
            <span class="d-inline-flex p-4 mb-5 rounded-7 bg-subtle-primary fg-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"></path></svg></span>
            <h3 class="h4 fw-bold mb-3">Spectacular team plan</h3>
            <p class="fg-secondary mb-0">Fairly assigning daily tasks to your employees</p>
          </div>
        </div>
        <div class="col-12 lg:col-4 mb-7 lg:mb-0">
          <div class="rounded-9 bg-2 p-7 h-100 text-center">
            <span class="d-inline-flex p-4 mb-5 rounded-7 bg-subtle-primary fg-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"></path></svg></span>
            <h3 class="h4 fw-bold mb-3">Sharable showcase</h3>
            <p class="fg-secondary mb-0">Team members will be up to date on the project</p>
          </div>

<section class="py-12 bg-primary">
  <div class="container">
    <div class="row align-items-center justify-content-center gy-7">
      <div class="col-12 md:col-10 lg:col-6">
        <div class="lg:pe-12"><span class="badge badge-subtle bg-2 fg-primary rounded-pill">Lorem ipsum</span>
          <h2 class="fs-4xl fw-bold text-balance fg-white mt-5 mb-7">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="fs-lg fw-light fg-white text-pretty mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="col-12 md:col-10 lg:col-5 lg:offset-1">
        <div class="rounded-9 bg-2 p-7 lg:p-12 text-center">
          <h3 class="h4 fw-bold mb-3">Sign up to our newsletter</h3>
          <p class="fg-secondary mb-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <form action="#">
            <label class="visually-hidden" for="newsletter03-email">E-mail</label>
            <input class="form-control mb-5" id="newsletter03-email" type="email" name="email" placeholder="Type your e-mail" autocomplete="email" required="">
            <button class="btn-solid theme-primary btn-lg w-100" type="submit">Subscribe</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12">
  <div class="container">
    <div class="row justify-content-center mb-12">
      <div class="col-12 lg:col-8 text-center"><span class="badge badge-subtle theme-primary rounded-pill">Lorem ipsum</span>
        <h2 class="fs-4xl fw-bold text-balance mt-5 mb-7">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="fs-lg fw-light fg-secondary text-pretty mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="rounded-9 bg-2 p-7 lg:p-12 mb-12">
      <div class="row gy-12">
        <div class="col-12 lg:col-6">
          <h2 class="fs-4xl fw-bold text-balance mb-5">Premium Membership</h2>
          <p class="fs-lg fw-light fg-secondary text-pretty mb-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <ul class="list-unstyled row gy-3 mb-0">
            <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>Complete documentation</span></li>
            <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>Working materials in Figma</span></li>
            <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>100GB cloud storage</span></li>
            <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>500 team members</span></li>
          </ul>
        </div>
        <div class="col-12 lg:col-5 xl:col-4 xl:offset-2">
          <div class="rounded-9 bg-1 p-12 text-center">
            <h3 class="h4 fw-bold mb-3">Sale -25%</h3>
            <p class="fg-secondary mb-7">Free access for 25 members</p>

<section class="py-12">
  <div class="container">
    <div class="row">
      <div class="col-12 lg:col-6 mx-auto">
        <div class="accordion accordion-flush" id="faq03">
            <details class="accordion-item" name="faq03" id="faq03-answer1" open="">
              <summary class="accordion-header">Fusce eget nunc et libero accumsan rutrum quis nec lectus?<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"></path></svg></summary>
              <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</div>
            </details>
            <details class="accordion-item" name="faq03" id="faq03-answer2">
              <summary class="accordion-header">Fusce eget nunc et libero accumsan rutrum quis nec lectus?<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"></path></svg></summary>
              <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</div>
            </details>
            <details class="accordion-item" name="faq03" id="faq03-answer3">
              <summary class="accordion-header">Fusce eget nunc et libero accumsan rutrum quis nec lectus?<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"></path></svg></summary>
              <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</div>
            </details>
            <details class="accordion-item" name="faq03" id="faq03-answer4">
              <summary class="accordion-header">Fusce eget nunc et libero accumsan rutrum quis nec lectus?<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"></path></svg></summary>
              <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</div>
            </details>
            <details class="accordion-item" name="faq03" id="faq03-answer5">
              <summary class="accordion-header">Fusce eget nunc et libero accumsan rutrum quis nec lectus?<svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"></path></svg></summary>
              <div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</div>

<div class="position-fixed bottom-0 start-0 mb-7" style="z-index: 50;">
  <div class="container">
    <div class="row">
      <div class="col-12 lg:col-7 xl:col-5">
        <div class="rounded-9 bg-2 p-7 lg:p-12">
          <div class="d-flex flex-wrap align-items-center gap-7">
            <div>
              <h3 class="h5 fw-semibold mb-3">Cookie Policy</h3>
              <p class="fg-secondary text-pretty mb-0">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
            </div>
            <div class="d-flex flex-wrap gap-3"><a class="btn-solid theme-primary" href="#">Allow</a><a class="btn-outline theme-secondary" href="#">Decline</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="py-12">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 md:col-7 lg:col-5 mx-auto lg:mx-0 mb-12 lg:mb-0">
        <h2 class="fs-4xl fw-bold text-balance mb-7">Get our free mobile app</h2>
        <p class="fs-lg fw-light fg-secondary text-pretty mb-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="d-flex flex-wrap gap-3"><a href="#"><img src="plain6/images/buttons/app-store.svg" alt="Download on the App Store"></a><a href="#"><img src="plain6/images/buttons/google-play.svg" alt="Get it on Google Play"></a></div>
      </div>
      <div class="col-12 lg:col-6 xl:offset-1"><img class="d-block mx-auto img-fluid" src="plain6/images/devices/2-devices.svg" alt="alt"></div>
    </div>
  </div>
</section>

<section class="py-12">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 lg:col-6 mb-12 lg:mb-0"><img class="img-fluid rounded-9" src="plain6/images/blue-400-square.png" alt="alt"></div>
      <div class="col-12 lg:col-5 ms-auto">
        <h2 class="fs-4xl fw-bold text-balance mb-7">Lorem ipsum</h2>
        <div class="d-flex align-items-start gap-5 mb-7"><span class="d-inline-flex p-4 rounded-7 bg-subtle-primary fg-primary "><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09zM4.157 8.5H7a.5.5 0 0 1 .478.647L6.11 13.59l5.732-6.09H9a.5.5 0 0 1-.478-.647L9.89 2.41z"></path></svg></span>
          <div>
            <h3 class="h5 fw-semibold mb-2">Quick problem-solving contact</h3>
            <p class="fg-secondary mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
        <div class="d-flex align-items-start gap-5 mb-7"><span class="d-inline-flex p-4 rounded-7 bg-subtle-primary fg-primary "><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"></path></svg></span>
          <div>
            <h3 class="h5 fw-semibold mb-2">Making changes simple and easy</h3>
            <p class="fg-secondary mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>
        <div class="d-flex align-items-start gap-5"><span class="d-inline-flex p-4 rounded-7 bg-subtle-primary fg-primary "><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5m14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5"></path></svg></span>
          <div>
            <h3 class="h5 fw-semibold mb-2">Exchangeable at any time</h3>
            <p class="fg-secondary mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
        </div>

<footer class="py-12">
  <div class="container">
    <div class="row align-items-center gy-7">
      <div class="col-12 md:col-3 xl:col-6">
        <a class="d-inline-block mb-7" href="#"><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="alt" width="96" height="28" viewBox="0 0 422 122" fill="none">
<path d="M138 97.8068H152.761V75.1705H165.17C181.227 75.1705 190.568 65.5909 190.568 51.6477C190.568 37.7727 181.398 27.9886 165.545 27.9886H138V97.8068ZM152.761 63.3409V40.0568H162.716C171.239 40.0568 175.364 44.6932 175.364 51.6477C175.364 58.5682 171.239 63.3409 162.784 63.3409H152.761Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M214.406 27.9886H199.884V97.8068H214.406V27.9886Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M240.972 98.7955C248.71 98.7955 253.722 95.4205 256.278 90.5455H256.688V97.8068H270.46V62.4886C270.46 50.0114 259.892 44.7614 248.233 44.7614C235.688 44.7614 227.438 50.7614 225.426 60.3068L238.858 61.3977C239.847 57.9205 242.949 55.3636 248.165 55.3636C253.108 55.3636 255.938 57.8523 255.938 62.1477V62.3523C255.938 65.7273 252.358 66.1705 243.256 67.0568C232.892 68.0114 223.585 71.4886 223.585 83.1818C223.585 93.5455 230.983 98.7955 240.972 98.7955ZM245.131 88.7727C240.665 88.7727 237.46 86.6932 237.46 82.7045C237.46 78.6136 240.835 76.6023 245.949 75.8864C249.119 75.4432 254.301 74.6932 256.04 73.5341V79.0909C256.04 84.5795 251.506 88.7727 245.131 88.7727Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M281.727 97.8068H296.25V45.4432H281.727V97.8068ZM289.023 38.6932C293.352 38.6932 296.898 35.3864 296.898 31.3295C296.898 27.3068 293.352 24 289.023 24C284.727 24 281.182 27.3068 281.182 31.3295C281.182 35.3864 284.727 38.6932 289.023 38.6932Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M322.406 67.5341C322.44 60.7841 326.463 56.8295 332.327 56.8295C338.156 56.8295 341.668 60.6477 341.634 67.0568V97.8068H356.156V64.4659C356.156 52.2614 348.997 44.7614 338.088 44.7614C330.315 44.7614 324.69 48.5795 322.338 54.6818H321.724V45.4432H307.884V97.8068H322.406V67.5341Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M367.875 97.8068H397.705C413.386 97.8068 421.739 89.625 421.739 78.5114C421.739 68.1818 414.341 61.9432 406.398 61.5682V60.8864C413.659 59.25 419.011 54.1023 419.011 45.8864C419.011 35.4205 411.239 27.9886 395.83 27.9886H367.875V97.8068ZM382.636 85.7386V67.1932H395.011C402.102 67.1932 406.5 71.2841 406.5 77.0455C406.5 82.2955 402.92 85.7386 394.67 85.7386H382.636ZM382.636 57.2045V39.9205H393.852C400.398 39.9205 404.114 43.2955 404.114 48.3409C404.114 53.8636 399.614 57.2045 393.58 57.2045H382.636Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M24 98V74H58C71.2548 74 82 63.2548 82 50V48C82 34.7452 71.2548 24 58 24H48C34.7452 24 24 34.7452 24 48V74H0V48C0 21.4903 21.4903 0 48 0H58C84.5097 0 106 21.4903 106 48V50C106 76.5097 84.5097 98 58 98H24Z" fill="#3583F8"></path>
<path d="M24 98V122C10.7452 122 0 111.255 0 98H24Z" fill="#3583F8"></path>
<path d="M37 61V52.5C37 43.9396 43.9396 37 52.5 37H56C62.6274 37 68 42.3726 68 49C68 55.6274 62.6274 61 56 61H37Z" fill="#3583F8"></path>
</svg></a>
        <p class="d-none">All rights reserved © Wireframes Corporation 2021</p>
      </div>
      <div class="col-12 md:col-9 xl:col-6">
        <div class="d-flex flex-wrap align-items-center gap-5 md:justify-content-end">
          <ul class="list-unstyled d-flex flex-wrap align-items-center gap-7 mb-0">
            <li><a class="fg-secondary" href="#">About</a></li>
            <li><a class="fg-secondary" href="#">Company</a></li>
            <li><a class="fg-secondary" href="#">Services</a></li>
            <li><a class="fg-secondary" href="#">Testimonials</a></li>

<section class="position-relative py-12">
  <div class="container">
    <div class="row mb-12">
      <div class="col-12 lg:col-10 xl:col-8 mx-auto text-center">
        <span class="badge badge-subtle theme-primary rounded-pill">Lorem ipsum</span>
        <h2 class="fs-5xl fw-bold text-balance mt-5 mb-7">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="fs-lg fw-light fg-secondary text-pretty mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="row gy-12">
      <div class="col-12 md:col-6 xl:col-4">
        <div class="position-relative rounded-9 bg-2 p-12 text-center h-100">
          <span class="d-flex justify-content-center align-items-center position-absolute top-0 start-50 translate-middle rounded-circle bg-primary fg-white fw-semibold" style="width: 48px;height: 48px">1</span>
          <h3 class="h4 fw-bold mb-3">Suspendisse interdum ullamcorper elit at</h3>
          <p class="fs-lg fw-light fg-secondary mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </div>
      </div>
      <div class="col-12 md:col-6 xl:col-4">
        <div class="position-relative rounded-9 bg-2 p-12 text-center h-100">
          <span class="d-flex justify-content-center align-items-center position-absolute top-0 start-50 translate-middle rounded-circle bg-primary fg-white fw-semibold" style="width: 48px;height: 48px">2</span>
          <h3 class="h4 fw-bold mb-3">Suspendisse interdum ullamcorper elit at</h3>
          <p class="fs-lg fw-light fg-secondary mb-0">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
        </div>
      </div>

<section class="py-12">
  <div class="container">
    <div class="mb-12"><img class="img-fluid rounded-9" src="plain6/images/blue-400-horizontal.png" alt="alt"></div>
    <div class="row justify-content-center mb-12">
      <div class="col-12 lg:col-8 text-center">
        <nav aria-label="Breadcrumb">
          <ol class="breadcrumb justify-content-center mb-5">
            <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Home</a></li>
            <li class="breadcrumb-divider"></li>
            <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Blog</a></li>
            <li class="breadcrumb-divider"></li>
            <li class="breadcrumb-item"><a class="breadcrumb-link active" href="#" aria-current="page">Article</a></li>
          </ol>
        </nav>
        <h2 class="fs-5xl fw-bold text-balance mb-7">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <div class="d-flex justify-content-center align-items-center gap-5">
          <img class="img-fluid rounded-circle" src="plain6/images/blue-400-avatar.png" alt="alt" style="width: 56px;height: 56px">
          <div class="text-start">
            <h3 class="h5 fw-semibold mb-1">Danny Bailey</h3>
            <p class="fg-secondary mb-0">February 26, 2021</p>
          </div>
        </div>
      </div>
    </div>

<section class="position-relative py-12">
  <div class="container">
    <div class="row">
      <div class="col-12 md:col-9 lg:col-5 mx-auto lg:mx-0 mb-12">
        <div class="rounded-9 bg-2 p-7 lg:p-12 text-center">
        <span class="badge badge-subtle theme-primary rounded-pill">Sign In</span>
        <h3 class="h3 fw-bold mt-5 mb-7">Join our community</h3>
        <form action="#">
          
          <label class="visually-hidden" for="s04-email">E-mail address</label>
          <input class="form-control mb-3" id="s04-email" type="email" name="email" placeholder="E-mail address" autocomplete="email">
          <label class="visually-hidden" for="s04-password">Password</label>
          <input class="form-control mb-3" id="s04-password" type="password" name="password" placeholder="Password">
          
          
          <button class="btn-solid theme-primary btn-lg w-100 mb-5" type="submit">Get Started</button>
          <a class="fg-secondary d-inline-block" href="#"><small></small></a>
          <a class="btn-subtle btn-lg w-100 gap-3 mb-3" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"></path></svg><span>Sign in with Facebook</span></a><a class="btn-subtle btn-lg w-100 gap-3" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path></svg><span>Sign in with Twitter</span></a>
        </form>
        
      </div>
      </div>
    </div>
  </div>

<section class="py-12">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 lg:col-5 mb-12 lg:mb-0">
        <h2 class="fs-4xl fw-bold text-balance mb-12">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <h3 class="h5 fw-semibold mb-2">Address</h3>
        <p class="fg-secondary mb-7">1686 Geraldine Lane New York, NY 10013</p>
        <h3 class="h5 fw-semibold mb-2">Contact us</h3>
        <p class="fg-secondary mb-1">hello@wireframes.org</p>
        <p class="fg-secondary mb-0">+7 843 672 431</p>
      </div>
      <div class="col-12 lg:col-6 lg:offset-1">
        <form action="#">
          <label class="visually-hidden" for="contact04-name">Name</label>
          <input class="form-control mb-5" id="contact04-name" type="text" name="name" placeholder="Name">
          <label class="visually-hidden" for="contact04-email">E-mail</label>
          <input class="form-control mb-5" id="contact04-email" type="email" name="email" placeholder="E-mail">
          <label class="visually-hidden" for="contact04-message">Your message</label>
          <textarea class="form-control mb-5" id="contact04-message" name="message" rows="6" placeholder="Your message..."></textarea>
          <button class="btn-solid theme-primary btn-lg w-100" type="submit">Send message</button>
        </form>
      </div>
    </div>
  </div>

<section class="py-12">
  <div class="container">
    <div class="row align-items-end gy-7 mb-12">
      <div class="col-12 lg:col-6"><span class="badge badge-subtle theme-primary rounded-pill">Lorem ipsum</span>
        <h2 class="fs-4xl fw-bold text-balance mt-5 mb-0">Lorem ipsum dolor sit amet consectutar</h2>
      </div>
      <div class="col-12 lg:col-5 ms-auto">
        <p class="fs-lg fw-light fg-secondary text-pretty mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="rounded-9 bg-2 p-7 lg:p-12 mb-12">
      <div class="row align-items-center gy-7">
        <div class="col-12 lg:col-2"><h3 class="h4 fw-semibold  mb-0">Starter</h3></div>
        <div class="col-12 lg:col-5"><ul class="list-unstyled row gy-3 mb-0">
          <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>Complete documentation</span></li>
          <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>Working materials in Figma</span></li>
          <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>100GB cloud storage</span></li>
          <li class="col-12 md:col-6 d-flex align-items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path></svg><span>500 team members</span></li>
        </ul></div>
        <div class="col-12 lg:col-3 text-center"><span class="h2 fw-bold d-inline-block ">$35,55</span>
          <p class="mb-0 fg-secondary">per month</p>
        </div>
        <div class="col-12 lg:col-auto"><a class="btn-solid theme-primary btn-lg w-100" href="#">Get Started</a></div>
      </div>

<section class="py-12">
  <div class="container">
    <div class="row mb-12">
      <div class="col-12 lg:col-8 mx-auto"><img class="img-fluid rounded-9" src="plain6/images/blue-400-horizontal.png" alt=""></div>
    </div>
    <div class="text-center"><span class="badge badge-subtle theme-primary rounded-pill">Error 404</span>
      <h2 class="fs-4xl fw-bold text-balance mt-5 mb-7">Page not found</h2>
      <p class="fs-lg fw-light fg-secondary text-pretty mb-12">Sorry! We are unable to find the page you are looking for</p>
      <div class="d-flex flex-wrap justify-content-center gap-3"><a class="btn-solid theme-primary btn-lg" href="#">Go back to homepage</a><a class="btn-outline theme-secondary btn-lg" href="#">Try again</a></div>
    </div>
  </div>
</section>

<section class="py-12">
  <div class="container text-center">
    <div class="row justify-content-center">
      <div class="col-12 lg:col-10 xl:col-8">
        <span class="d-inline-flex justify-content-center align-items-center mb-5 rounded-circle bg-primary fg-white" style="width: 56px;height: 56px"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.817l5.75 3.45L8 8.917l1.25.75L15 6.217V5.4a1 1 0 0 0-.53-.882zM15 7.383l-4.778 2.867L15 13.117zm-.035 6.88L8 10.082l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738ZM1 13.116l4.778-2.867L1 7.383v5.734ZM7.059.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765z"></path></svg></span>
        <div><span class="badge badge-subtle theme-primary rounded-pill">Lorem ipsum</span></div>
        <h2 class="fs-5xl fw-bold text-balance mt-5 mb-7">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="fs-lg fw-light fg-secondary text-pretty mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <form action="#">
          <div class="row justify-content-center gy-5">
            <div class="col-12 md:col-8 lg:col-5">
              <label class="visually-hidden" for="newsletter04-email">E-mail</label>
              <input class="form-control" id="newsletter04-email" type="email" name="email" placeholder="Type your e-mail" autocomplete="email" required="">
            </div>
            <div class="col-12 md:col-8 lg:col-5">
              <label class="visually-hidden" for="newsletter04-name">Your name</label>
              <input class="form-control" id="newsletter04-name" type="text" name="name" placeholder="Your name" autocomplete="name">
            </div>
            <div class="col-12 md:col-8 lg:col-2">
              <button class="btn-solid theme-primary w-100" type="submit">Subscribe</button>
            </div>
          </div>
        </form>
      </div>

<section class="py-12">
  <div class="container">
    <div class="row">
      <div class="col-12 md:col-4 lg:col-2 mb-12 lg:mb-0">
        <div><svg xmlns="http://www.w3.org/2000/svg" class="d-block mx-auto img-fluid" width="140" height="32" viewBox="0 0 140 32" fill="currentColor" role="img" aria-label="Northbay"><circle cx="12" cy="16" r="9" fill="none" stroke="currentColor" stroke-width="3"></circle><circle cx="12" cy="16" r="3"></circle><text x="30" y="22" font-size="18" font-weight="600">Northbay</text></svg></div>
      </div>
      <div class="col-12 md:col-4 lg:col-2 mb-12 lg:mb-0">
        <div><svg xmlns="http://www.w3.org/2000/svg" class="d-block mx-auto img-fluid" width="140" height="32" viewBox="0 0 140 32" fill="currentColor" role="img" aria-label="Lumen"><rect x="3" y="7" width="18" height="18" rx="5"></rect><text x="30" y="22" font-size="18" font-weight="600">Lumen</text></svg></div>
      </div>
      <div class="col-12 md:col-4 lg:col-2 mb-12 lg:mb-0">
        <div><svg xmlns="http://www.w3.org/2000/svg" class="d-block mx-auto img-fluid" width="140" height="32" viewBox="0 0 140 32" fill="currentColor" role="img" aria-label="Quanta"><path d="M12 5 22 25H2Z"></path><text x="30" y="22" font-size="18" font-weight="600">Quanta</text></svg></div>
      </div>
      <div class="col-12 md:col-4 lg:col-2 mb-12 md:mb-0">
        <div><svg xmlns="http://www.w3.org/2000/svg" class="d-block mx-auto img-fluid" width="140" height="32" viewBox="0 0 140 32" fill="currentColor" role="img" aria-label="Helix"><path d="M16 3 27 16 16 29 5 16Z"></path><text x="34" y="22" font-size="18" font-weight="600">Helix</text></svg></div>
      </div>
      <div class="col-12 md:col-4 lg:col-2 mb-12 md:mb-0">
        <div><svg xmlns="http://www.w3.org/2000/svg" class="d-block mx-auto img-fluid" width="140" height="32" viewBox="0 0 140 32" fill="currentColor" role="img" aria-label="Orbit"><circle cx="9" cy="16" r="7" opacity=".6"></circle><circle cx="15" cy="16" r="7"></circle><text x="30" y="22" font-size="18" font-weight="600">Orbit</text></svg></div>
      </div>
      <div class="col-12 md:col-4 lg:col-2">
        <div><svg xmlns="http://www.w3.org/2000/svg" class="d-block mx-auto img-fluid" width="140" height="32" viewBox="0 0 140 32" fill="currentColor" role="img" aria-label="Vertex"><path d="M12 5 21.5 10.5V21.5L12 27 2.5 21.5V10.5Z"></path><text x="30" y="22" font-size="18" font-weight="600">Vertex</text></svg></div>
      </div>
    </div>
  </div>
</section>

<nav class="navbar lg:navbar-expand py-7">
  <div class="container"><a class="navbar-brand" href="#"><svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="alt" width="96" height="28" viewBox="0 0 422 122" fill="none">
<path d="M138 97.8068H152.761V75.1705H165.17C181.227 75.1705 190.568 65.5909 190.568 51.6477C190.568 37.7727 181.398 27.9886 165.545 27.9886H138V97.8068ZM152.761 63.3409V40.0568H162.716C171.239 40.0568 175.364 44.6932 175.364 51.6477C175.364 58.5682 171.239 63.3409 162.784 63.3409H152.761Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M214.406 27.9886H199.884V97.8068H214.406V27.9886Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M240.972 98.7955C248.71 98.7955 253.722 95.4205 256.278 90.5455H256.688V97.8068H270.46V62.4886C270.46 50.0114 259.892 44.7614 248.233 44.7614C235.688 44.7614 227.438 50.7614 225.426 60.3068L238.858 61.3977C239.847 57.9205 242.949 55.3636 248.165 55.3636C253.108 55.3636 255.938 57.8523 255.938 62.1477V62.3523C255.938 65.7273 252.358 66.1705 243.256 67.0568C232.892 68.0114 223.585 71.4886 223.585 83.1818C223.585 93.5455 230.983 98.7955 240.972 98.7955ZM245.131 88.7727C240.665 88.7727 237.46 86.6932 237.46 82.7045C237.46 78.6136 240.835 76.6023 245.949 75.8864C249.119 75.4432 254.301 74.6932 256.04 73.5341V79.0909C256.04 84.5795 251.506 88.7727 245.131 88.7727Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M281.727 97.8068H296.25V45.4432H281.727V97.8068ZM289.023 38.6932C293.352 38.6932 296.898 35.3864 296.898 31.3295C296.898 27.3068 293.352 24 289.023 24C284.727 24 281.182 27.3068 281.182 31.3295C281.182 35.3864 284.727 38.6932 289.023 38.6932Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M322.406 67.5341C322.44 60.7841 326.463 56.8295 332.327 56.8295C338.156 56.8295 341.668 60.6477 341.634 67.0568V97.8068H356.156V64.4659C356.156 52.2614 348.997 44.7614 338.088 44.7614C330.315 44.7614 324.69 48.5795 322.338 54.6818H321.724V45.4432H307.884V97.8068H322.406V67.5341Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M367.875 97.8068H397.705C413.386 97.8068 421.739 89.625 421.739 78.5114C421.739 68.1818 414.341 61.9432 406.398 61.5682V60.8864C413.659 59.25 419.011 54.1023 419.011 45.8864C419.011 35.4205 411.239 27.9886 395.83 27.9886H367.875V97.8068ZM382.636 85.7386V67.1932H395.011C402.102 67.1932 406.5 71.2841 406.5 77.0455C406.5 82.2955 402.92 85.7386 394.67 85.7386H382.636ZM382.636 57.2045V39.9205H393.852C400.398 39.9205 404.114 43.2955 404.114 48.3409C404.114 53.8636 399.614 57.2045 393.58 57.2045H382.636Z" style="fill:light-dark(#1E2124,#fff)"></path>
<path d="M24 98V74H58C71.2548 74 82 63.2548 82 50V48C82 34.7452 71.2548 24 58 24H48C34.7452 24 24 34.7452 24 48V74H0V48C0 21.4903 21.4903 0 48 0H58C84.5097 0 106 21.4903 106 48V50C106 76.5097 84.5097 98 58 98H24Z" fill="#3583F8"></path>
<path d="M24 98V122C10.7452 122 0 111.255 0 98H24Z" fill="#3583F8"></path>
<path d="M37 61V52.5C37 43.9396 43.9396 37 52.5 37H56C62.6274 37 68 42.3726 68 49C68 55.6274 62.6274 61 56 61H37Z" fill="#3583F8"></path>
</svg></a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#nav04" aria-controls="nav04" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon" aria-hidden="true"></span></button>
    <dialog class="drawer drawer-end" tabindex="-1" id="nav04" aria-labelledby="nav04Label">
      <div class="drawer-header">
        <h5 class="drawer-title" id="nav04Label">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
      </div>
      <div class="drawer-body">
        <ul class="nav navbar-nav mt-5 lg:mt-0 mb-5 lg:mb-0 lg:mx-auto">
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Testimonials</a></li>

<section class="py-12">
  <div class="container">
    <div class="row">
      <div class="col-12 md:col-6 lg:col-4 mb-12"><time class="small fg-secondary mb-3" datetime="2021-06-10T19:40">10 jun 2021 19:40</time><h3 class="h4 fw-bold mb-3">Lorem ipsum dolor sit</h3><p class="fs-lg fw-light fg-secondary mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p><a class="icon-link" href="#"><span>Read more</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path></svg></a></div>
      <div class="col-12 md:col-6 lg:col-4 mb-12"><time class="small fg-secondary mb-3" datetime="2021-06-10T19:40">10 jun 2021 19:40</time><h3 class="h4 fw-bold mb-3">Lorem ipsum dolor sit</h3><p class="fs-lg fw-light fg-secondary mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p><a class="icon-link" href="#"><span>Read more</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path></svg></a></div>
      <div class="col-12 md:col-6 lg:col-4 mb-12"><time class="small fg-secondary mb-3" datetime="2021-06-10T19:40">10 jun 2021 19:40</time><h3 class="h4 fw-bold mb-3">Lorem ipsum dolor sit</h3><p class="fs-lg fw-light fg-secondary mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p><a class="icon-link" href="#"><span>Read more</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path></svg></a></div>
      <div class="col-12 md:col-6 lg:col-4 mb-12"><time class="small fg-secondary mb-3" datetime="2021-06-10T19:40">10 jun 2021 19:40</time><h3 class="h4 fw-bold mb-3">Lorem ipsum dolor sit</h3><p class="fs-lg fw-light fg-secondary mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p><a class="icon-link" href="#"><span>Read more</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path></svg></a></div>
      <div class="col-12 md:col-6 lg:col-4 mb-12"><time class="small fg-secondary mb-3" datetime="2021-06-10T19:40">10 jun 2021 19:40</time><h3 class="h4 fw-bold mb-3">Lorem ipsum dolor sit</h3><p class="fs-lg fw-light fg-secondary mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p><a class="icon-link" href="#"><span>Read more</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path></svg></a></div>
      <div class="col-12 md:col-6 lg:col-4 mb-12"><time class="small fg-secondary mb-3" datetime="2021-06-10T19:40">10 jun 2021 19:40</time><h3 class="h4 fw-bold mb-3">Lorem ipsum dolor sit</h3><p class="fs-lg fw-light fg-secondary mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p><a class="icon-link" href="#"><span>Read more</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path></svg></a></div>
    </div>
  </div>
</section>

<section class="py-12 bg-primary">
  <div class="container">
    <div class="row justify-content-center mb-12">
      <div class="col-12 text-center">
        <span class="fg-contrast-primary">Lorem ipsum</span>
        <h2 class="fs-5xl fw-bold text-balance fg-contrast-primary mt-3 mb-0">Lorem ipsum dolor</h2>
      </div>
    </div>
    <div class="row gy-12">
      <div class="col-12 md:col-6 lg:col-4">
        <div class="position-relative rounded-9 bg-2 p-7 pt-12 h-100">
          <span class="position-absolute top-0 start-0 ms-7 translate-middle-y d-flex justify-content-center align-items-center rounded-circle bg-primary fg-white" style="width: 56px; height: 56px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215 0 1.344-.665 2.288-1.79 2.973-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712 1.03-.632 1.397-1.135 1.397-2.028 0-.979-.758-1.698-1.926-1.698-1.009 0-1.71.529-1.938 1.402-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09 0-.618-.473-1.092-1.095-1.092-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14"></path></svg></span>
          <h3 class="h5 fw-semibold mb-3">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h3>
          <p class="fg-secondary mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </div>
      </div>
      <div class="col-12 md:col-6 lg:col-4">
        <div class="position-relative rounded-9 bg-2 p-7 pt-12 h-100">
          <span class="position-absolute top-0 start-0 ms-7 translate-middle-y d-flex justify-content-center align-items-center rounded-circle bg-primary fg-white" style="width: 56px; height: 56px;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215 0 1.344-.665 2.288-1.79 2.973-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712 1.03-.632 1.397-1.135 1.397-2.028 0-.979-.758-1.698-1.926-1.698-1.009 0-1.71.529-1.938 1.402-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09 0-.618-.473-1.092-1.095-1.092-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14"></path></svg></span>
          <h3 class="h5 fw-semibold mb-3">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h3>
          <p class="fg-secondary mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
        </div>
      </div>
      <div class="col-12 md:col-6 lg:col-4">

<section class="py-12">
  <div class="container">
    <div class="d-flex flex-wrap align-items-end justify-content-between gap-5 mb-12">
      <div><span class="badge badge-subtle theme-primary rounded-pill">Lorem ipsum</span>
        <h2 class="fs-4xl fw-bold text-balance mt-5 mb-0">Lorem ipsum dolor sit</h2>
      </div>
      <a class="btn-solid theme-primary" href="#">View all</a>
    </div>
    <div class="row g-9">
      <div class="col-12 lg:col-6"><img class="img-fluid rounded-9" src="plain6/images/blue-400-horizontal.png" alt=""></div>
      <div class="col-12 lg:col-6"><img class="img-fluid rounded-9" src="plain6/images/blue-400-horizontal.png" alt=""></div>
      <div class="col-12 md:col-4"><img class="img-fluid rounded-9" src="plain6/images/blue-400-square.png" alt=""></div>
      <div class="col-12 md:col-4"><img class="img-fluid rounded-9" src="plain6/images/blue-400-square.png" alt=""></div>
      <div class="col-12 md:col-4"><img class="img-fluid rounded-9" src="plain6/images/blue-400-square.png" alt=""></div>
      <div class="col-12 lg:col-6"><img class="img-fluid rounded-9" src="plain6/images/blue-400-horizontal.png" alt=""></div>
      <div class="col-12 lg:col-6"><img class="img-fluid rounded-9" src="plain6/images/blue-400-horizontal.png" alt=""></div>
    </div>
  </div>
</section>