UI Components – Cronos Library

<div class="position-fixed bottom-0 start-0 end-0 pb-6" style="z-index: 50;">
  <div class="container mb-8">
    <div class="p-8 p-md-12 bg-primary">
      <h6 class="mb-4 text-secondary">Cookie Policy</h6>
      <p class="mb-6 lead lh-lg text-light" style="opacity: 75%;">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p><a class="btn btn-secondary me-4" href="#">Allow</a><a class="btn btn-dark" href="#">Decline</a>
    </div>
  </div>
</div>

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 col-lg-3 mb-6 mb-lg-0">
        <div class="text-center">
          <svg class="mx-auto mb-6" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M39 32H34V5C34 2.23858 31.7614 0 29 0H4C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8H6V36C6 38.2091 7.79086 40 10 40H35C37.7614 40 40 37.7614 40 35V33C40 32.4477 39.5523 32 39 32ZM32 5V32H13C12.4477 32 12 32.4477 12 33V36C12 37.1046 11.1046 38 9.99999 38C8.89542 38 7.99999 37.1046 7.99999 36V4C7.99999 3.27143 7.8052 2.58835 7.46486 2H29C30.6568 2 32 3.34315 32 5ZM14 34V36C14 36.7286 13.8052 37.4117 13.4649 38H35C36.6568 38 38 36.6569 38 35V34H14ZM6 4V6H4C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4ZM13 10C12.4477 10 12 9.55229 12 9C12 8.44771 12.4477 8 13 8H27C27.5523 8 28 8.44771 28 9C28 9.55229 27.5523 10 27 10H13ZM12 15C12 15.5523 12.4477 16 13 16H27C27.5523 16 28 15.5523 28 15C28 14.4477 27.5523 14 27 14H13C12.4477 14 12 14.4477 12 15ZM13 22C12.4477 22 12 21.5523 12 21C12 20.4477 12.4477 20 13 20H27C27.5523 20 28 20.4477 28 21C28 21.5523 27.5523 22 27 22H13ZM12 27C12 27.5523 12.4477 28 13 28H23C23.5523 28 24 27.5523 24 27C24 26.4477 23.5523 26 23 26H13C12.4477 26 12 26.4477 12 27Z" fill="#006251"></path>
          </svg>
          <h3 class="mb-2">5095</h3>
          <p class="text-muted">Projects</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-6 mb-lg-0">
        <div class="text-center">
          <svg class="mx-auto mb-6" width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M-0.000488281 19.9994C-0.000488281 8.95339 8.95351 -0.000610352 19.9995 -0.000610352C31.0455 -0.000610352 39.9995 8.95339 39.9995 19.9994C39.9995 31.0454 31.0455 39.9994 19.9995 39.9994C8.95351 39.9994 -0.000488281 31.0454 -0.000488281 19.9994ZM26.1555 25.8814L33.0695 29.0234C33.7275 29.3234 34.3055 29.7574 34.7695 30.2914C36.8055 27.3734 37.9995 23.8254 37.9995 19.9994C37.9995 10.0594 29.9415 1.99939 19.9995 1.99939C10.0595 1.99939 1.99951 10.0594 1.99951 19.9994C1.99951 23.8254 3.19351 27.3734 5.23151 30.2914C5.69551 29.7574 6.27351 29.3234 6.93151 29.0234L13.8455 25.8814C11.5035 24.0514 9.99951 21.2014 9.99951 17.9994C9.99951 12.4774 14.4775 7.99939 19.9995 7.99939C25.5235 7.99939 29.9995 12.4774 29.9995 17.9994C29.9995 21.2014 28.4955 24.0514 26.1555 25.8814ZM19.9995 9.99939C15.5815 9.99939 11.9995 13.5814 11.9995 17.9994C11.9995 22.4174 15.5815 25.9994 19.9995 25.9994C24.4175 25.9994 27.9995 22.4174 27.9995 17.9994C27.9995 13.5814 24.4175 9.99939 19.9995 9.99939ZM19.9995 37.9994C14.6255 37.9994 9.80346 35.6454 6.50347 31.9114C6.81147 31.4494 7.24347 31.0774 7.75947 30.8454L15.9235 27.1334C17.1675 27.6894 18.5475 27.9994 19.9995 27.9994C21.4515 27.9994 22.8315 27.6894 24.0775 27.1334L32.2415 30.8454C32.7555 31.0774 33.1875 31.4494 33.4955 31.9114C30.1975 35.6454 25.3735 37.9994 19.9995 37.9994Z" fill="#006251"></path>
          </svg>
          <h3 class="mb-2">1350</h3>
          <p class="text-muted">Clients</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-6 mb-md-0">
        <div class="text-center">
          <svg class="mx-auto mb-6" width="32" height="40" viewbox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="position-relative py-20 py-lg-0">
  <div class="d-none d-lg-flex justify-content-center align-items-center position-absolute top-0 start-0 h-100 col-lg-6 bg-light-light"><img class="img-fluid" style="object-fit: contain; max-height: 380px;" src="cronos-assets/images/example-scene2.png" alt=""/></div>
  <div class="py-6 d-lg-none"><img class="img-fluid d-block mx-auto d-lg-none" style="object-fit: contain; max-height: 360px;" src="cronos-assets/images/example-scene2.png" alt=""/></div>
  <div class="container">
    <div class="row">
      <div class="position-relative col-12 col-lg-6 ms-auto text-center pt-32 pb-40 py-lg-64"><img class="position-absolute bottom-0 start-0" style="height: 80px;" src="cronos-assets/elements/light-green-left.svg" alt=""/><img class="position-absolute top-0 start-0" style="height: 80px;" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="position-absolute top-0 end-0" style="height: 80px;" src="cronos-assets/elements/light-green-small.svg" alt=""/><img class="position-absolute bottom-0 end-0" style="height: 80px;" src="cronos-assets/elements/light-green-right.svg" alt=""/><span class="badge bg-warning-light">Error 404</span>
        <h2 class="mt-4 mb-3">Page not found</h2>
        <p class="lead lh-lg text-muted mb-6">Sorry! We are unable to find the page you are looking for</p>
        <div><a class="btn btn-primary d-block d-sm-inline-block me-sm-4 mb-2 mb-sm-0" href="#">Go back to Homepage</a><a class="btn btn-dark d-block d-sm-inline-block" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

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

<section class="py-20 overflow-hidden">
  <div class="container">
    <div class="mw-sm mw-md-6xl mx-auto px-lg-24 py-12 py-md-24 bg-light-light position-relative"><img class="d-none d-sm-block position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/left-squares.svg" alt=""/><img class="d-none d-sm-block position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/right-squares.svg" alt=""/>
      <div class="row align-items-center">
        <div class="col-12 col-md-6 col-lg-3 mb-12 mb-lg-0"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 mb-12 mb-lg-0"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 mb-12 mb-md-0"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="mw-3xl mx-auto text-center mb-12"><span class="badge bg-secondary-light">Lorem Ipsum</span>
      <h2 class="mt-6 mb-4">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="mw-2xl mx-auto lead lh-lg text-muted">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>
    </div>
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto">
        <div class="row">
          <div class="col-12 col-lg-6 mb-8">
            <div class="p-8 bg-light-light">
              <div class="row align-items-center">
                <div class="col-12 col-lg-5 mb-4 mb-lg-0"><img class="img-fluid w-100" style="height: 223px; object-fit: cover;" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
                <div class="col-12 col-lg-7">
                  <h6 class="text-primary mb-2">Sophie Baialey</h6>
                  <p class="mb-2 fw-bold">CEO &amp; Founder</p>
                  <p class="lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-8">
            <div class="p-8 bg-light-light">
              <div class="row align-items-center">

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

<section class="py-20">
  <div class="container">
    <div class="mw-3xl mx-auto mb-12 text-center"><span class="badge bg-secondary-light">Lorem Ipsum</span>
      <h2 class="mt-6 mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mw-xl mx-auto mb-8 lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 mb-12">
        <div>
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M32.117 40H27.8293C27.4175 38.8348 26.3062 38 25 38H23C21.3431 38 20 39.3431 20 41C20 42.6568 21.3431 44 23 44H25C26.3062 44 27.4175 43.1652 27.8293 42H32.117C34.2691 42 36.1798 40.6228 36.8604 38.5811L37.3162 37.2136C37.5578 36.4888 38.236 36 39 36C41.7614 36 44 33.7614 44 31V25C44 22.2385 41.7614 20 39 20H38V17.9688C38 10.2368 31.732 3.96875 24 3.96875C16.268 3.96875 10 10.2368 10 17.9688V20H9C6.23858 20 4 22.2385 4 25V31C4 33.7614 6.23858 36 9 36H13C13.5523 36 14 35.5523 14 35V21C14 20.4477 13.5523 20 13 20H12V17.9688C12 11.3413 17.3726 5.96875 24 5.96875C30.6274 5.96875 36 11.3413 36 17.9688V20H35C34.4477 20 34 20.4477 34 21V35C34 35.5523 34.4477 36 35 36H35.6682C35.5701 36.1842 35.4865 36.3783 35.4189 36.5811L34.963 37.9487C34.5547 39.1737 33.4083 40 32.117 40ZM12 22V34H9C7.34315 34 6 32.6568 6 31V25C6 23.3431 7.34315 22 9 22H12ZM36 22V34H39C40.6569 34 42 32.6568 42 31V25C42 23.3431 40.6569 22 39 22H36ZM23 42C22.4477 42 22 41.5523 22 41C22 40.4477 22.4477 40 23 40H25C25.5523 40 26 40.4477 26 41C26 41.5523 25.5523 42 25 42H23Z" fill="#006251"></path>
          </svg>
          <h6 class="mt-6 mb-5">Neque porro quisquam est</h6>
          <ul class="text-muted">
            <li><a class="btn fw-normal" href="#">Etiam pellentesque non nibh</a></li>
            <li><a class="btn fw-normal" href="#">Mauris posuere</a></li>
            <li><a class="btn fw-normal" href="#">Tellus sit amet tempus vestibulum</a></li>
            <li><a class="btn fw-normal" href="#">Erat augue imperdiet neque</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 mb-12">
        <div>
          <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <div class="position-relative mx-auto mb-6">
          <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
            <p class="mb-0 fw-bold text-muted">65%</p>
          </div><span class="position-relative">
            <svg class="me-3" width="82" height="90" viewbox="0 0 82 90" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M45 90C37.3005 90 29.7298 88.0244 23.0121 84.2623C16.2943 80.5002 10.6542 75.0773 6.6312 68.5124C2.60823 61.9475 0.336984 54.4602 0.0347 46.7667C-0.267576 39.0731 1.40922 31.4307 4.90471 24.5704C8.4002 17.7101 13.5975 11.8615 19.9993 7.58387C26.4012 3.30627 33.7936 0.742814 41.4693 0.138719C49.1451 -0.465376 56.8475 0.910098 63.8397 4.13356C70.8319 7.35702 76.8801 12.3207 81.4058 18.5497L79.5855 19.8722C75.2861 13.9546 69.5403 9.23917 62.8977 6.17687C56.2551 3.11459 48.9378 1.80789 41.6459 2.38178C34.3539 2.95567 27.3312 5.39095 21.2494 9.45467C15.1676 13.5184 10.2302 19.0746 6.90948 25.5919C3.58876 32.1092 1.9958 39.3695 2.28297 46.6784C2.57014 53.9872 4.72782 61.1002 8.54964 67.3368C12.3715 73.5735 17.7296 78.7252 24.1114 82.2992C30.4933 85.8732 37.6855 87.75 45 87.75L45 90Z" fill="#CCE0DC"></path>
            </svg></span><span class="position-absolute top-0 start-0 bottom-0 end-0 ms-2">
            <svg width="82" height="90" viewbox="0 0 82 90" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M37 0C44.6995 9.18154e-08 52.2702 1.97555 58.988 5.73768C65.7057 9.49981 71.3458 14.9227 75.3688 21.4876C79.3918 28.0525 81.663 35.5398 81.9653 43.2333C82.2676 50.9268 80.5908 58.5693 77.0953 65.4296C73.5998 72.2899 68.4025 78.1385 62.0007 82.4161C55.5988 86.6937 48.2064 89.2572 40.5307 89.8613C32.8549 90.4654 25.1526 89.0899 18.1603 85.8664C11.1681 82.643 5.11988 77.6794 0.594241 71.4503L2.41453 70.1278C6.71389 76.0454 12.4597 80.7608 19.1023 83.8231C25.7449 86.8854 33.0622 88.1921 40.3541 87.6182C47.6461 87.0443 54.6688 84.609 60.7506 80.5453C66.8324 76.4816 71.7698 70.9254 75.0905 64.4081C78.4112 57.8908 80.0042 50.6305 79.717 43.3216C79.4299 36.0128 77.2722 28.8998 73.4504 22.6632C69.6285 16.4265 64.2704 11.2748 57.8886 7.7008C51.5067 4.12677 44.3145 2.25 37 2.25V0Z" fill="#006251"></path>
            </svg></span>
        </div>
        <h6 class="mb-2">Stat Example 1</h6>
        <p class="text-muted">Dolor sit amet consectutar</p>
      </div>
      <div class="col-12 col-md-6 col-lg-3 text-center mb-5 mb-lg-0">
        <div class="position-relative mx-auto mb-6">
          <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
            <p class="mb-0 fw-bold text-muted">65%</p>
          </div><span class="position-relative">
            <svg class="me-3" width="82" height="90" viewbox="0 0 82 90" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-20 bg-secondary-light" style="background-image: url('cronos-assets/elements/lines.svg'); background-repeat: no-repeat; background-size: cover;" >
  <div class="container">
    <div class="mw-4xl mx-auto text-center"><span class="badge bg-primary-llight">New feature</span>
      <h2 class="mt-6 mb-4">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mb-6 mw-2xl mx-auto lead lh-lg text-muted">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 btn-primary d-block d-md-inline-block mb-2 mb-md-0 me-md-4" href="#">Activate your demo</a><a class="btn btn-dark d-block d-md-inline-block" href="#">Share with friends</a>
    </div>
  </div>
</section>

<div class="position-fixed bottom-0 start-0 end-0" style="z-index: 50;">
  <div class="p-8 p-md-12 bg-primary">
    <div class="container">
      <h6 class="mb-4 text-secondary">Cookie Policy</h6>
      <p class="mb-6 lead lh-lg text-light" style="opacity: 75%;">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our. Otherwise, if you agree to our use of cookies, please continue to use our website.</p><a class="btn btn-secondary me-4" href="#">Allow</a><a class="btn btn-dark" href="#">Decline</a>
    </div>
  </div>
</div>

<section class="py-20 pt-lg-32 bg-light-light">
  <div class="container position-relative">
    <div class="row mb-n4">
      <div class="col-12 col-lg-6 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/light-warning-dark-warning.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt=""/></div>
      </div>
      <div class="col-12 col-lg-6 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute top-0 start-100 translate-middle-x" src="cronos-assets/elements/warning-light-small.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1467007849282-42dad96c2312?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=755&amp;q=80" alt=""/></div>
      </div>
      <div class="col-12 col-lg-4 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute bottom-0 start-0 translate-middle-x" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1507208773393-40d9fc670acf?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
      </div>
      <div class="col-12 col-lg-4 p-4"><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1488751045188-3c55bbf9a3fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
      <div class="col-12 col-lg-4 p-4">
        <div class="position-relative"><img class="d-none d-lg-block position-absolute bottom-0 start-100 translate-middle-x" src="cronos-assets/elements/light-green-small.svg" alt=""/><img class="img-fluid w-100" style="height: 292px; object-fit: cover;" src="https://images.unsplash.com/photo-1598826859769-e62543ab62b0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-secondary-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg-md"><span class="badge bg-secondary">Lorem ipsum</span>
          <h3 class="my-6">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <p class="mw-lg-sm lead lh-lg">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 col-lg-6">
        <div class="row">
          <div class="col-12 col-md-6 mb-10"><span>
              <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 40H40" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M34 20L28 14" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span>
            <h6 class="mt-8 mb-4 fw-normal">Change of access</h6>
            <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
          </div>
          <div class="col-12 col-md-6 mb-10"><span>
              <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 14L24 6L40 14V34L24 42L8 34V14Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M30 18L18 30" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="position-relative py-20 bg-primary overflow-hidden">
  <div class="d-none d-md-block position-absolute top-0 start-0 bg-white w-75 h-100"><img class="d-none d-lg-block position-absolute top-0 end-0" style="height: 88px;" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 end-0" style="height: 88px;" src="cronos-assets/elements/light-green-left.svg" alt=""/></div>
  <div class="d-md-none position-absolute top-0 start-0 bg-white w-100 h-100"></div>
  <div class="container position-relative">
    <div class="row py-lg-16 align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg-md">
          <h2 class="mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="py-12 px-12 mw-xl mx-auto bg-white shadow-lg text-center">
          <form action="#"><span class="badge bg-secondary-light text-uppercase">Sign In</span>
            <h3 class="mt-6 mb-8">Join our community</h3>
            <input class="form-control mb-6" type="email" placeholder="E-mail address"/>
            <input class="form-control mb-6" type="password" placeholder="Password"/>
            <button class="btn btn-secondary mb-6 w-100">Sign In</button><a class="small text-decoration-none text-muted" href="#">Forgot password?</a><a class="d-flex mt-6 mb-4 justify-content-center align-items-center py-3 small fw-bold text-white w-100 bg-dark text-decoration-none" href="#"><img class="img-fluid me-2" src="cronos-assets/logos/brands/facebook-white.svg" alt=""/><span>Sign in with Facebook</span></a><a class="d-flex justify-content-center align-items-center py-3 small fw-bold text-white w-100 bg-info text-decoration-none" href="#"><img class="img-fluid me-2" src="cronos-assets/logos/brands/twitter-white.svg" alt=""/><span>Sign in with Twitter</span></a>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-20 py-lg-0">
  <div class="d-none d-lg-flex justify-content-center align-items-center position-absolute top-0 end-0 h-100 col-lg-6 bg-light-light"><img class="img-fluid" style="object-fit: contain; max-height: 380px;" src="cronos-assets/images/example-scene2.png" alt=""/></div>
  <div class="py-6 d-lg-none"><img class="img-fluid d-block mx-auto d-lg-none" style="object-fit: contain; max-height: 360px;" src="cronos-assets/images/example-scene2.png" alt=""/></div>
  <div class="container">
    <div class="row">
      <div class="position-relative col-12 col-lg-6 text-center pt-32 pb-40 py-lg-64"><img class="position-absolute bottom-0 start-0" style="height: 80px;" src="cronos-assets/elements/light-green-left.svg" alt=""/><img class="position-absolute top-0 start-0" style="height: 80px;" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="position-absolute top-0 end-0" style="height: 80px;" src="cronos-assets/elements/light-green-small.svg" alt=""/><img class="position-absolute bottom-0 end-0" style="height: 80px;" src="cronos-assets/elements/light-green-right.svg" alt=""/><span class="badge bg-warning-light">Error 404</span>
        <h2 class="mt-4 mb-3">Page not found</h2>
        <p class="lead lh-lg text-muted mb-6">Sorry! We are unable to find the page you are looking for</p>
        <div><a class="btn btn-primary d-block d-sm-inline-block me-sm-4 mb-2 mb-sm-0" href="#">Go back to Homepage</a><a class="btn btn-dark d-block d-sm-inline-block" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

<nav class="position-relative navbar navbar-expand-lg navbar-light py-5"  >
  <div class="container-fluid"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
    <button class="btn p-0 d-lg-none navbar-burger">
      <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 7C3.22386 7 3 6.77614 3 6.5C3 6.22386 3.22386 6 3.5 6H20.5C20.7761 6 21 6.22386 21 6.5C21 6.77614 20.7761 7 20.5 7H3.5ZM3.5 12C3.22386 12 3 11.7761 3 11.5C3 11.2239 3.22386 11 3.5 11H20.5C20.7761 11 21 11.2239 21 11.5C21 11.7761 20.7761 12 20.5 12H3.5ZM3 16.5C3 16.7761 3.22386 17 3.5 17H20.5C20.7761 17 21 16.7761 21 16.5C21 16.2239 20.7761 16 20.5 16H3.5C3.22386 16 3 16.2239 3 16.5Z" fill="#006251"></path>
      </svg>
    </button>
    <ul class="d-none d-lg-flex position-absolute top-50 start-50 translate-middle navbar-nav">
      <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>
    </ul>
    <div class="d-none d-lg-flex" action="">
      <div class="input-group">
        <input class="form-control" type="search" placeholder="Search" aria-label="Search"/>
        <button class="btn btn-secondary" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 24px;height: 24px">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

<section class="py-20">
  <div class="container">
    <div class="row border-bottom">
      <div class="col-12 col-lg-3 mb-10 mb-lg-0"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a></div>
      <div class="col-12 col-lg-9 mb-12">
        <div class="row justify-content-between">
          <div class="col-12 col-sm-6 col-lg-auto mb-8 mb-lg-0">
            <p class="fw-bold mb-6">Product</p>
            <ul class="list-unstyled">
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Careers</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">About Us</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Insights</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">PCI Compliance</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Interfratlons</a></li>
              <li><a class="small text-muted text-decoration-none" href="#">Pricing</a></li>
            </ul>
          </div>
          <div class="col-12 col-sm-6 col-lg-auto mb-8 mb-lg-0">
            <p class="fw-bold mb-6">For Developers</p>
            <ul class="list-unstyled">
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Docs</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">Knowledge Base</a></li>
              <li class="mb-3"><a class="small text-muted text-decoration-none" href="#">System Status</a></li>
              <li><a class="small text-muted text-decoration-none" href="#">Security</a></li>

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-8 mb-4 mb-lg-0">
        <div class="d-flex align-items-center"><img class="me-8" src="cronos-assets/logos/cronos-big-logo.svg" alt=""/>
          <div>
            <h3 class="fw-bold">Sign up to our newsletter</h3>
            <p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <form action="#">
          <div class="input-group">
            <input class="form-control" type="email" placeholder="E-mail address"/>
            <button class="btn btn-primary">Sign Up</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-20 bg-primary">
  <div class="container text-center pb-48 pb-lg-80">
    <div class="mw-4xl mx-auto"><span class="badge bg-success text-white">New feature</span>
      <h2 class="mt-6 mb-4 text-white">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mw-2xl mb-6 mx-auto text-light lead lh-lg">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
      <div class="text-center"><a class="btn btn-secondary d-block d-sm-inline-block me-sm-4 mb-2 mb-sm-0" href="#">Active your Demo</a><a class="btn btn-dark d-block d-sm-inline-block" href="#">Share with Friends</a></div>
    </div>
  </div>
  <div class="bg-white pb-20">
    <div class="container">
      <div class="mw-4xl mx-auto text-center"><img class="d-none d-lg-inline-block img-fluid" src="cronos-assets/images/laptop.png" alt="" style="margin-top: -240px;"/><img class="d-lg-none img-fluid" src="cronos-assets/images/laptop.png" alt="" style="margin-top: -140px;"/></div>
    </div>
  </div>
</section>

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