Bootstrap 5 Components – Cronos Library

<div class="position-fixed top-0 start-0 w-100 mb-4 mt-12" style="z-index: 50;">
  <div class="container">
    <div class="mw-2xl mx-auto">
      <div class="p-12 bg-success-light">
        <div class="mb-6">
          <h6 class="mb-3">Cookie Policy</h6>
          <p class="text-dark">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>
        </div>
        <div><a class="btn btn-primary me-4 mb-2 mb-sm-0" href="#">Yes, I accept</a><a class="btn btn-success mb-2 mb-sm-0" href="#">View More Informations</a></div>
      </div>
    </div>
  </div>
</div>

<section class="pb-20">
  <div class="position-relative mb-12 mb-md-20"><img class="position-absolute top-0 end-0" src="cronos-assets/elements/warning-light-small.svg" alt=""/><img class="position-absolute bottom-0 start-0" src="cronos-assets/elements/white-green-dark.svg" alt=""/><img class="img-fluid w-100" style="height: 460px; 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-3xl mx-auto mb-12 mb-md-16 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 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>

<section class="py-20 overflow-hidden">
  <div class="container">
    <div class="max-w-6xl mx-auto">
      <div class="row align-items-end justify-content-between mb-10">
        <div class="col-12 col-lg-6 mb-5 mb-lg-0"><span class="badge bg-secondary-light">Lorem ipsum</span>
          <h2 class="mt-6">Lorem ipsum dolor sit amet consectutar</h2>
        </div>
        <div class="col-12 col-lg-3">
          <button class="btn btn-light p-0 d-inline-flex justify-content-center align-items-center me-4" style="width: 64px; height: 64px;">
            <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="#1C1917"></path>
            </svg>
          </button>
          <button class="btn btn-light p-0 d-inline-flex justify-content-center align-items-center" style="width: 64px; height: 64px;">
            <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.2929 13H7.5C7.22386 13 7 12.7761 7 12.5C7 12.2239 7.22386 12 7.5 12H17.2929L14.1464 8.85355C13.9512 8.65829 13.9512 8.34171 14.1464 8.14645C14.3417 7.95118 14.6583 7.95118 14.8536 8.14645L18.8536 12.1464C19.0488 12.3417 19.0488 12.6583 18.8536 12.8536L14.8536 16.8536C14.6583 17.0488 14.3417 17.0488 14.1464 16.8536C13.9512 16.6583 13.9512 16.3417 14.1464 16.1464L17.2929 13Z" fill="#1C1917"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="row flex-nowrap justify-content-center">
        <div class="d-none d-lg-block col-12 px-5"><img class="img-fluid w-100" style="height: 512px; object-fit: cover; opacity: 50%;" src="https://images.unsplash.com/photo-1488751045188-3c55bbf9a3fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1100&amp;q=80" alt=""/></div>
        <div class="col-12 px-5">
          <div class="position-relative mb-8" style="height: 512px;"><img class="position-absolute bottom-0 start-0" src="cronos-assets/elements/light-warning-dark-green.svg" alt=""/><img class="position-absolute top-0 end-0" src="cronos-assets/elements/dark-green-dark-warning.svg" alt=""/><img class="img-fluid w-100" style="height: 512px; 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>

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-4 col-lg-2 mb-8 mb-lg-0">
        <div class="bg-light-light px-10 py-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-8 mb-lg-0">
        <div class="bg-light-light px-10 py-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-8 mb-lg-0">
        <div class="bg-light-light px-10 py-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-8 mb-md-0">
        <div class="bg-light-light px-10 py-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/amazon-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-8 mb-md-0">
        <div class="bg-light-light px-10 py-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/netflix-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2">
        <div class="bg-light-light px-10 py-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="mw-4xl mx-auto text-center"><span class="badge bg-secondary-light">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>
      <div class="mb-16"><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 class="position-relative" style="height: 512px;"><img class="d-none d-lg-block position-absolute bottom-0 start-0 translate-middle-x" src="cronos-assets/elements/light-squares.svg" alt=""/><img class="d-none d-lg-block position-absolute top-0 start-100 img-fluid" src="cronos-assets/elements/warning-group-square.svg" alt=""/><img class="img-fluid w-100 h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1562071707-7249ab429b2a?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80" alt=""/></div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-12"><span class="badge bg-secondary-light">Lorem Ipsum</span>
      <h2 class="mt-6">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
    </div>
    <div class="mx-auto mb-8">
      <div class="row justify-content-lg-center">
        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <button class="btn btn-primary w-100 py-8"><span>
              <svg class="mx-auto" 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="M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12ZM14.665 8C14.1428 5.03217 13.0819 3 12 3C10.9181 3 9.85717 5.03217 9.33498 8H14.665ZM3.93552 8H8.31375C8.65216 5.96286 9.24889 4.27723 10.028 3.21671C7.35208 3.81488 5.1259 5.60466 3.93552 8ZM8.1719 15H3.51212C3.18046 14.0617 3 13.0519 3 12C3 10.9481 3.18046 9.93834 3.51212 9H8.1719C8.05949 9.94765 8 10.9555 8 12C8 13.0445 8.05949 14.0524 8.1719 15ZM10.028 20.7833C7.35208 20.1851 5.1259 18.3953 3.93552 16H8.31375C8.65216 18.0371 9.24889 19.7228 10.028 20.7833ZM20.4879 15C20.8195 14.0617 21 13.0519 21 12C21 10.9481 20.8195 9.93834 20.4879 9H15.8281C15.9405 9.94765 16 10.9555 16 12C16 13.0445 15.9405 14.0524 15.8281 15H20.4879ZM15.6862 16H20.0645C18.8741 18.3953 16.6479 20.1851 13.972 20.7833C14.7511 19.7228 15.3478 18.0371 15.6862 16ZM9.1844 15H14.8156C14.934 14.0624 15 13.0528 15 12C15 10.9472 14.934 9.93761 14.8156 9H9.1844C9.06598 9.93761 9 10.9472 9 12C9 13.0528 9.06598 14.0624 9.1844 15ZM12 21C10.9181 21 9.85717 18.9678 9.33498 16H14.665C14.1428 18.9678 13.0819 21 12 21ZM13.972 3.21671C16.6479 3.81488 18.8741 5.60466 20.0645 8H15.6862C15.3478 5.96286 14.7511 4.27723 13.972 3.21671Z" fill="#CCE0DC"></path>
              </svg></span>
            <h6 class="text-white mb-0 mt-2">General</h6>
          </button>
        </div>
        <div class="col-6 col-md-4 col-lg-2 mb-3">
          <button class="btn btn-success-light w-100 py-8"><span>
              <svg class="mx-auto" 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="M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12ZM16 12.5101V20.0645C18.9634 18.5918 21 15.5337 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 15.5337 5.03656 18.5918 8 20.0645V12.5101C7.99835 12.4316 8.01523 12.3515 8.05279 12.2764C8.05834 12.2653 8.06425 12.2545 8.0705 12.244L11.5681 6.24806C11.761 5.91731 12.239 5.91731 12.4319 6.24806L15.9295 12.244C15.9357 12.2545 15.9417 12.2653 15.9472 12.2764C15.9848 12.3515 16.0016 12.4316 16 12.5101ZM12 7.49232L14.7984 12.2896C13.9812 12.6598 13.0278 12.5843 12.2774 12.084C12.1094 11.972 11.8906 11.972 11.7226 12.084C10.9722 12.5843 10.0188 12.6598 9.20157 12.2896L12 7.49232ZM12 13.0835C12.9226 13.5855 14.0191 13.6597 15 13.2882V20.4879C14.0617 20.8195 13.0519 21 12 21C10.9481 21 9.93834 20.8195 9 20.4879V13.2882C9.98092 13.6597 11.0774 13.5855 12 13.0835Z" fill="#66A197"></path>
              </svg></span>
            <h6 class="mb-0 mt-2 text-primary">Tool</h6>
          </button>
        </div>
        <div class="col-6 col-md-4 col-lg-2 mb-3">

<section class="py-20">
  <div class="container">
    <div class="mw-5xl text-center mx-auto mb-16"><span class="badge bg-warning-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 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 mb-12">
        <div class="row">
          <div class="col-12 col-lg-4 mb-6 mb-lg-0"><img class="img-fluid" 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>
          <div class="col-12 col-lg-8"><span class="text-muted" style="font-size: 12px;">10 jun 2021 19:40</span>
            <h6 class="mt-4 mb-4">Lorem ipsum dolor sit</h6>
            <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><a class="link-primary fw-bold text-decoration-none" href="#">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 mb-12">
        <div class="row">
          <div class="col-12 col-lg-4 mb-6 mb-lg-0"><img class="img-fluid" 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>
          <div class="col-12 col-lg-8"><span class="text-muted" style="font-size: 12px;">10 jun 2021 19:40</span>
            <h6 class="mt-4 mb-4">Lorem ipsum dolor sit</h6>
            <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><a class="link-primary fw-bold text-decoration-none" href="#">Read More</a>
          </div>
        </div>

<section class="bg-white position-relative pb-80"><img class="position-absolute bottom-0 start-0" src="cronos-assets/elements/light-warning-dark-green.svg" alt=""/><img class="position-absolute bottom-0 end-0" style="transform: rotate(90deg);" src="cronos-assets/elements/light-warning-dark-green.svg" alt=""/>
  <div class="bg-primary pt-20 mb-5">
    <div class="container position-relative pb-5">
      <div class="row">
        <div class="col-12 col-lg-8 mx-auto text-center mb-12"><span class="badge bg-success text-white">Lorem ipsum</span>
          <h2 class="text-white mt-4 mb-6">Take quick action that increases your brand&apos;s regular profit.</h2>
          <p class="mw-2xl mx-auto lead text-light">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>
      <div class="row" style="margin-bottom: -200px;">
        <div class="col-12 col-lg-4 mb-4 mb-lg-0 py-24 bg-white shadow-lg">
          <div class="p-5 h-100 text-center">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 10L6 6V38L18 42M18 10L30 6M18 10V42M30 6L42 10V42L30 38M30 6V38M30 38L18 42" stroke="#006251" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <h6 class="mt-3 mb-2">Visit Us</h6>
            <p class="text-muted mb-1">1686, Geraldine Lane</p>
            <p class="text-muted mb-0">New York, NY 10013</p>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-4 mb-lg-0 py-24 bg-white shadow-lg">
          <div class="p-5 text-center">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M41.9988 32.9533V38.3729C42.0072 40.4446 40.1444 42.1746 38.0528 41.9859C20 42 6 27.87 6.01413 9.93837C5.82575 7.85789 7.54715 6.00212 9.61622 6.00018H15.0465C15.9249 5.99155 16.7766 6.302 17.4426 6.87368C19.3363 8.49899 20.5543 14.0155 20.0856 16.2086C19.7197 17.9207 17.9938 19.1186 16.8204 20.2897C19.3972 24.8124 23.1493 28.5571 27.6809 31.1288C28.8544 29.9577 30.0546 28.2351 31.7702 27.87C33.9709 27.4016 39.523 28.6213 41.1418 30.5281C41.7158 31.2042 42.0208 32.0674 41.9988 32.9533Z" stroke="#006251" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="py-20 bg-primary">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <div class="mw-xs px-md-5 mx-auto text-center"><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="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8 40V34L34 8L40 14L14 40H8Z" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M34 20L28 14" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal text-white">Change of access</h6>
          <p class="lead text-light">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-10 mb-lg-0">
        <div class="mw-xs px-md-5 mx-auto text-center"><span>
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 44C24 44 40 36 40 24V10L24 4L8 10V24C8 36 24 44 24 44Z" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#FBDC8E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal text-white">Security in savings</h6>
          <p class="lead text-light">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>

<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 ms-auto 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-block"><a class="btn me-2" href="#">Sign In</a><a class="btn btn-secondary" href="#">Sign Up</a></div>
  </div>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-sm" style="z-index: 9999;"  >
    <div class="navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-primary" style="opacity: 90%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column py-6 px-6 navbar-light bg-white overflow-auto">
      <div class="d-flex align-items-center mb-10"><a class="me-auto navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
        <button class="navbar-close btn-close" type="button" aria-label="Close"></button>
      </div>
      <div>
        <ul class="nav flex-column">
          <li class="nav-item mb-4"><a class="nav-link" href="#">About</a></li>

<section class="py-20 bg-light">
  <div class="container">
    <div class="mw-3xl mx-auto mb-16 text-center"><span class="badge bg-secondary-light">Lorem ipsum</span>
      <h2 class="mt-6 mb-4">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mw-xl 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 mb-n4">
      <div class="col-12 col-lg-4 p-4">
        <div class="py-10 px-8 bg-white text-center"><span class="d-flex mx-auto mb-6 align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">1</span>
          <h6 class="my-6">Suspendisse interdum ullamcorper elit at</h6>
          <p class="lead lh-lg text-muted">Suspendisse vel leo ac quam placerat luctus. Aliquam sit amet nisl ac urna dignissim feugiat nec in ante. Sed sit amet finibus risus, quis mollis erat.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4 p-4">
        <div class="py-10 px-8 bg-white text-center"><span class="d-flex mx-auto mb-6 align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">2</span>
          <h6 class="my-6">Suspendisse interdum ullamcorper elit at</h6>
          <p class="lead lh-lg text-muted">Suspendisse vel leo ac quam placerat luctus. Aliquam sit amet nisl ac urna dignissim feugiat nec in ante. Sed sit amet finibus risus, quis mollis erat.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4 p-4">
        <div class="py-10 px-8 bg-white text-center"><span class="d-flex mx-auto mb-6 align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">3</span>
          <h6 class="my-6">Suspendisse interdum ullamcorper elit at</h6>
          <p class="lead lh-lg text-muted">Suspendisse vel leo ac quam placerat luctus. Aliquam sit amet nisl ac urna dignissim feugiat nec in ante. Sed sit amet finibus risus, quis mollis erat.</p>
        </div>

<section class="position-relative py-lg-20 bg-light-light">
  <div class="d-lg-none d-flex mb-10"><img class="img-fluid" src="cronos-assets/elements/left-top-corner.svg" alt=""/></div><img class="d-none d-lg-block position-absolute top-0 start-0" src="cronos-assets/elements/left-top-corner.svg" alt=""/><img class="d-none d-lg-block position-absolute top-0 end-0" src="cronos-assets/elements/right-top-corner.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 start-0" src="cronos-assets/elements/left-bottom-corner.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 end-0" src="cronos-assets/elements/right-bottom-corner.svg" alt=""/>
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <div class="py-12 px-12 bg-white shadow-lg text-center">
        <form action="#"><span class="badge bg-secondary-light text-uppercase">Sign Up</span>
          <h3 class="mt-6 mb-8">Create new account</h3>
          <input class="form-control mb-6" type="email" placeholder="E-mail address"/>
          <input class="form-control mb-6" type="password" placeholder="Password"/>
          <input class="form-control mb-6" type="password" placeholder="Repeat password"/>
          <label class="d-flex mb-5 text-start">
            <input class="form-check-input me-4" type="checkbox" name="terms" value="1"/><small class="text-muted">By signing up, you agree to our <a class="text-muted text-decoration-none fw-bold" href="#">Terms, Data Policy</a> and <a class="text-muted text-decoration-none fw-bold" href="#">Cookies Policy</a>.</small>
          </label>
          <button class="btn btn-primary w-100">Get Started</button>
        </form>
      </div>
    </div>
  </div>
  <div class="d-lg-none d-flex mt-10"><img class="img-fluid ms-auto" src="cronos-assets/elements/right-bottom-corner.svg" alt=""/></div>
</section>

<section class="py-20">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-12 col-lg-auto pe-lg-5">
        <button class="d-none d-lg-inline-flex btn btn-primary align-items-center justify-content-center p-0" style="width: 64px; height: 64px">
          <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="white"></path>
          </svg>
        </button>
      </div>
      <div class="col-12 col-lg-8">
        <div class="d-flex flex-wrap align-items-center mx-auto">
          <div class="row align-items-center">
            <div class="col-12 col-lg-5"><img class="img-fluid rounded-circle mb-4" style="width: 88px; height: 88px; object-fit: cover; object-position: right;" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/>
              <h6 class="text-primary">Danny Bailey</h6>
              <p class="fw-bold">CEO &amp; Founder</p>
            </div>
            <div class="d-lg-none mb-4">
              <button class="d-inline-flex btn btn-primary align-items-center justify-content-center p-0" style="width: 48px; height: 48px">
                <svg style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="white"></path>
                </svg>
              </button>
              <button class="d-inline-flex btn btn-primary align-items-center justify-content-center p-0" style="width: 48px; height: 48px">

<section class="py-20">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-12 col-lg-4 mb-8 mb-lg-0"><a class="d-block navbar-brand" href="#"><img class="d-block mx-auto mx-lg-0" src="cronos-assets/logos/cronos-logo.svg" alt="" style="width: 132px;"/></a>
        <p class="d-none d-lg-block mt-8 mb-0 small text-muted">All rights reserved &copy; Cronos 2021</p>
      </div>
      <div class="col-12 col-lg-8">
        <ul class="list-unstyled mb-0 d-flex flex-wrap align-items-center justify-content-center justify-content-lg-end">
          <li class="mb-5 mb-lg-0 me-6 me-lg-12"><a class="small link-dark text-decoration-none fw-bold" href="#">About</a></li>
          <li class="mb-5 mb-lg-0 me-6 me-lg-12"><a class="small link-dark text-decoration-none fw-bold" href="#">Company</a></li>
          <li class="mb-5 mb-lg-0 me-6 me-lg-12"><a class="small link-dark text-decoration-none fw-bold" href="#">Services</a></li>
          <li class="mb-5 mb-lg-0 me-6 me-lg-12"><a class="small link-dark text-decoration-none fw-bold" href="#">Testimonials</a></li>
          <li class="mb-5 mb-lg-0"><a class="btn btn-primary mt-6 mt-md-0" href="#">Get in Touch</a></li>
        </ul>
        <p class="d-lg-none small mt-6 text-muted text-center">All rights reserved &copy; Cronos 2021</p>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="mw-3xl mx-auto 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 lh-lg text-muted mb-6">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 justify-content-center mb-10">
        <label class="d-flex align-items-center me-3">
          <input class="form-check-input me-3" type="radio" name="license" value="1" checked=""/><span class="fw-bold">Lifetime license</span><span class="badge bg-secondary ms-3">$150</span>
        </label>
        <label class="d-flex align-items-center">
          <input class="form-check-input me-3" type="radio" name="license" value="2"/><span class="text-muted">Monthly license</span><span class="badge bg-secondary ms-3">$85</span>
        </label>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="d-flex align-items-center bg-light-light overflow-hidden">
          <div class="mb-5 mb-lg-0 mx-auto">
            <div class="py-12 py-lg-0 px-8 text-center">
              <form action=""><span class="text-muted">Sign Up</span>
                <h4 class="mb-6">Finish your payment</h4>
                <input class="form-control mb-6" type="email" placeholder="E-mail address"/>
                <input class="form-control mb-6" type="password" placeholder="Password"/>
                <div class="mb-6">

<section class="py-20 position-relative overflow-hidden">
  <div class="container">
    <div class="row align-items-center py-lg-20">
      <div class="col-12 col-lg-6 mb-12 mb-lg-0">
        <div class="d-flex 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="mw-md mb-4">Lorem ipsum dolor sit amet consectutar domor</h3>
        <div class="d-flex 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>
  <div class="d-lg-none position-relative"><img class="img-fluid" 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>

<section class="py-20 bg-primary-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 order-1 order-lg-0"><img class="d-block me-auto img-fluid" style="max-height: 556px;" src="cronos-assets/images/phones-two.png" alt=""/></div>
      <div class="col-12 col-lg-7 mb-10 mb-lg-0">
        <div class="mw-lg ms-auto">
          <h2 class="mb-4">Get our Free Mobile App</h2>
          <p class="mb-6 mw-lg 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 class="d-flex flex-wrap"><a class="me-4 mb-4 mb-sm-0" href="#"><img src="cronos-assets/buttons/app-store.svg" alt=""/></a><a href="#"><img src="cronos-assets/buttons/google-play.svg" alt=""/></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-auto me-lg-8">
        <button class="d-none btn btn-primary me-16 d-lg-flex align-items-center justify-content-center p-0" style="width: 64px; height: 64px">
          <svg class="text-light" style="width: 24px; height: 24px;" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.70711 12H18.5C18.7761 12 19 12.2239 19 12.5C19 12.7761 18.7761 13 18.5 13H8.70711L11.8536 16.1464C12.0488 16.3417 12.0488 16.6583 11.8536 16.8536C11.6583 17.0488 11.3417 17.0488 11.1464 16.8536L7.14645 12.8536C6.95118 12.6583 6.95118 12.3417 7.14645 12.1464L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L8.70711 12Z" fill="white"></path>
          </svg>
        </button>
      </div>
      <div class="col-12 col-lg-8 mx-auto">
        <div class="row align-items-center">
          <div class="col-12 col-lg-6 mb-10 mb-lg-0">
            <h2 class="text-primary mb-2">Danny Bailey</h2>
            <h3 class="mb-4">CEO &amp; Founder</h3>
            <p class="lead lh-lg text-muted mb-6">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 class="d-flex align-items-center"><a class="me-8" href="#"><img src="cronos-assets/logos/brands/facebook.svg" alt=""/></a><a class="me-8" href="#"><img src="cronos-assets/logos/brands/twitter.svg" alt=""/></a><a class="me-8" href="#"><img src="cronos-assets/logos/brands/Instagram.svg" alt=""/></a><a href="#"><img src="cronos-assets/logos/brands/LinkedIn.svg" alt=""/></a></div>
          </div>
          <div class="col-12 col-lg-6"><img class="mb-5 img-fluid h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/>
            <div class="text-center">
              <button class="btn btn-light p-0 me-2" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
              <button class="btn btn-light p-0 me-2" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
              <button class="btn btn-primary p-0 me-2" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
              <button class="btn btn-light p-0" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>

<section class="position-relative pt-20 overflow-hidden">
  <div class="position-relative bg-white">
    <div class="container pb-48 text-center"><span class="badge bg-warning-light">Error 404</span>
      <h2 class="mt-4 mb-3">Page not found</h2>
      <p class="lead lh-lg 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 class="pt-64 pb-md-20 bg-light"><img class="d-block mw-4xl mx-auto img-fluid mt-n96" src="https://images.unsplash.com/photo-1525785967371-87ba44b3e6cf?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=753&amp;q=80" alt=""/></div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container">
    <div class="max-w-6xl mx-auto">
      <div class="row align-items-center justify-content-between mb-12">
        <div class="col-12 col-lg-6 mb-6 mb-lg-0"><span class="badge bg-secondary-light">Lorem ipsum</span>
          <h2 class="mt-6">Lorem ipsum dolor sit amet consectutar</h2>
        </div>
        <div class="col-12 col-lg-auto">
          <button class="btn btn-primary">About Us</button>
        </div>
      </div>
      <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-x" src="cronos-assets/elements/light-warning-dark-green.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"><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 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-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 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"><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 class="col-12 col-lg-6 p-4"><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 class="col-12 col-lg-6 p-4">
          <div class="position-relative"><img class="d-none d-lg-block position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/light-warning-dark-green.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>