UI Components – Cronos Library

<section class="position-relative py-20 overflow-hidden">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6"><img class="mb-8" style="width: 64px;" src="cronos-assets/elements/quote.svg" alt=""/>
        <h3 class="mw-md mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
        <h6 class="text-primary mb-1">Robert Smith</h6>
        <p class="text-bold mb-10">CEO &amp; Founder</p>
        <div class="d-flex align-items-center">
          <button class="d-none d-lg-inline-flex btn btn-primary align-items-center justify-content-center p-0 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="white"></path>
            </svg>
          </button>
          <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="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="white"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="col-12 col-lg-6 position-relative">
        <div class="d-flex d-lg-none mb-10">
          <button class="d-inline-flex d-lg-none btn btn-primary align-items-center justify-content-center p-0 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">

<section class="py-20">
  <div class="container">
    <div class="row align-items-center mb-8 mb-lg-16">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <div class="mw-lg-md"><span class="badge bg-secondary-light">Lorem ipsum</span>
          <h3 class="mt-6 mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <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="position-relative" style="height: 304px;">
          <button class="position-absolute top-50 start-50 translate-middle btn">
            <svg width="74" height="74" viewbox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0.333374 37C0.333374 57.2504 16.7496 73.6667 37 73.6667C57.2505 73.6667 73.6667 57.2504 73.6667 37C73.6667 16.7495 57.2505 0.333313 37 0.333313C16.7496 0.333313 0.333374 16.7495 0.333374 37ZM70 37C70 55.2254 55.2254 70 37 70C18.7747 70 4.00005 55.2254 4.00005 37C4.00005 18.7746 18.7747 3.99998 37 3.99998C55.2254 3.99998 70 18.7746 70 37ZM22.3334 25.3325C22.3334 24.1181 22.6684 22.9272 23.3017 21.891C25.2024 18.7807 29.2647 17.8002 32.3749 19.7009L52.491 31.9941C53.2852 32.4794 53.9525 33.1467 54.4378 33.9408C56.1273 36.7055 55.2557 40.3164 52.491 42.0059L32.3749 54.2991C31.3387 54.9323 30.1478 55.2674 28.9334 55.2674C25.2883 55.2674 22.3334 52.3125 22.3334 48.6674V25.3325ZM26 48.6674V25.3325C26 24.7928 26.149 24.2635 26.4304 23.8029C27.2752 22.4206 29.0806 21.9848 30.463 22.8296L50.5791 35.1227C50.8769 35.3047 51.1271 35.555 51.3091 35.8528C51.9427 36.8895 51.6158 38.2436 50.5791 38.8772L30.463 51.1704C30.0024 51.4518 29.4731 51.6007 28.9334 51.6007C27.3133 51.6007 26 50.2874 26 48.6674Z" fill="white"></path>
            </svg>
          </button><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="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 h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1496060169243-453fde45943b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=372&amp;q=80" alt=""/>
        </div>
      </div>
    </div>
    <div class="row mb-n8">
      <div class="col-12 col-lg-4 mb-8"><span class="d-flex align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">1</span>
        <h6 class="mt-6 mb-3">Lorem ipsum dolor</h6>
        <p class="lead lh-lg text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
      </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-8 mb-lg-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-8 mb-lg-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-8 mb-md-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="bg-light-light py-14"><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="row align-items-center">
      <div class="col-12 col-lg-4 mb-5 mb-lg-0"><span class="badge bg-secondary-light">Lorem ipsum</span>
        <h3 class="my-6">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
        <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 class="col-12 col-lg-4 mb-5 mb-lg-0">
        <div class="p-6 bg-primary text-center">
          <h6 class="text-light mb-4">Starter</h6>
          <h2 class="text-white mb-6">$65,99</h2>
          <ul class="mb-6">
            <li class="d-flex align-items-center mb-2">
              <svg class="text-info me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-white">Complete documentation</p>
            </li>
            <li class="d-flex align-items-center mb-2">
              <svg class="text-info me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#99C0B9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>

<section class="pb-20 py-md-20 position-relative"><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=""/>
  <div class="d-md-none d-flex mb-12"><img class="ms-auto" src="cronos-assets/elements/warning-light-small.svg" alt=""/></div>
  <div class="container">
    <div class="mw-3xl mb-8 mb-md-16 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 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">
  <div class="container">
    <div class="mw-xl 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="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="p-8 bg-light-light text-center"><img class="img-fluid w-100 mb-6" style="height: 223px; 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=""/>
          <h6 class="text-primary mb-2">Ian Brown</h6>
          <p class="mb-2 fw-bold">CEO &amp; CTO</p>
          <p class="lead lh-lg text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4 p-4">
        <div class="p-8 bg-light-light text-center"><img class="img-fluid w-100 mb-6" 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=""/>
          <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 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4 p-4">
        <div class="p-8 bg-light-light text-center"><img class="img-fluid w-100 mb-6" style="height: 223px; object-fit: cover;" src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/>
          <h6 class="text-primary mb-2">Dennis Robertson</h6>

<section class="position-relative pt-20 pb-lg-20">
  <div class="container mb-8">
    <div class="row">
      <div class="col-12 col-lg-6 ms-auto py-lg-10">
        <div class="mb-10 mb-lg-40">
          <h2 class="mb-4">Get questions?</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 class="row">
          <div class="col-12 col-md-6 mb-5 mb-md-0">
            <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 class="col-12 col-md-6">
            <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>
            </svg>
            <h6 class="mt-3 mb-2">Contact Us</h6>
            <p class="text-muted mb-1">hello@wireframes.org</p>
            <p class="text-muted mb-0">+ 7-843-672-431</p>

<section class="py-20">
  <div class="container">
    <div class="mw-4xl mx-auto text-center mb-12"><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-5 p-6 p-lg-12 bg-light-light">
      <div class="col-12 col-lg-6">
        <div class="pe-lg-5 mb-4">
          <h3 class="mw-xs mb-4">Premium Membership</h3>
          <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>
          <ul class="row mb-5 mb-lg-0 ps-0">
            <li class="col-12 col-md-6 d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M8 11.5L11 14.5L17 8.5" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0 text-muted">Complete documentation</p>
            </li>
            <li class="col-12 col-md-6 d-flex align-items-center mb-2">
              <svg class="text-primary me-2" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<div class="position-fixed p-10 bottom-0 start-0" style="z-index: 50;">
  <div class="p-12 bg-primary mw-xl">
    <div class="row align-items-center">
      <div class="col-12 col-md-7">
        <h6 class="mb-4 text-secondary">Cookie Policy</h6>
        <p class="mb-4 lead lh-lg text-light" style="opacity: 75%;">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
      </div>
      <div class="col-12 col-md-3 d-flex"><a class="btn btn-secondary me-4" href="#">Allow</a><a class="btn btn-dark" href="#">Decline</a></div>
    </div>
  </div>
</div>

<section class="py-20">
  <div class="container text-center">
    <div class="mw-4xl mx-auto"><span class="badge bg-warning-light">New feature</span>
      <h2 class="mt-6 mb-4">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mw-2xl mb-6 mx-auto text-muted 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 mb-14"><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-success text-dark d-block d-sm-inline-block" href="#">Share with Friends</a></div><img class="d-none d-lg-block img-fluid mx-auto" style="height: 493px;" src="cronos-assets/images/laptop.png" alt=""/><img class="d-lg-none img-fluid w-100" src="cronos-assets/images/laptop.png" alt=""/>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <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>
</section>

<section class="py-20">
  <div class="container">
    <div class="mw-xl mx-auto text-center mb-6"><span class="badge bg-secondary-light">Lorem ipsum</span>
      <h2 class="mt-6">Lorem ipsum dolor sit amet consectutar</h2>
    </div>
    <div class="row align-items-center justify-content-center">
      <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 class="col-12 col-lg-10 px-lg-0 text-center">
        <div class="p-6 px-lg-20 py-lg-12 bg-light-light text-center mb-6">
          <p class="lead lh-lg text-muted mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem eget, scelerisque dolor.</p><img class="mx-auto img-fluid mb-4 rounded-circle" 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="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-secondary p-0" style="width: 12px; height: 12px; transform: rotate(45deg);"></button>
        </div>
      </div>

<section class="py-20">
  <div class="container">
    <div class="row justify-content-between pb-6 pb-md-12 border-bottom">
      <div class="col-12 col-lg-auto"><a class="d-inline-block mb-8 mb-lg-0 navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a></div>
      <div class="col-12 col-lg-auto">
        <ul class="list-unstyled d-flex flex-wrap">
          <li class="me-6 me-md-12 mb-4 mb-lg-0"><a class="small text-decoration-none fw-bold link-dark" href="#">About</a></li>
          <li class="me-6 me-md-12 mb-4 mb-lg-0"><a class="small text-decoration-none fw-bold link-dark" href="#">Company</a></li>
          <li class="me-6 me-md-12 mb-4 mb-lg-0"><a class="small text-decoration-none fw-bold link-dark" href="#">Services</a></li>
          <li><a class="small text-decoration-none fw-bold link-dark" href="#">Testimonials</a></li>
        </ul>
      </div>
    </div>
    <div class="d-flex flex-wrap justify-content-between align-items-center pt-12">
      <p class="small mb-6 mb-sm-0">All rights reserved &copy; Cronos 2021</p>
      <div><a class="link-dark text-decoration-none me-4" href="#"><img src="cronos-assets/logos/brands/facebook.svg" alt=""/></a><a class="link-dark text-decoration-none me-4" href="#"><img src="cronos-assets/logos/brands/twitter.svg" alt=""/></a><a class="link-dark text-decoration-none me-4" href="#"><img src="cronos-assets/logos/brands/Instagram.svg" alt=""/></a><a class="link-dark text-decoration-none me-4" href="#"><img src="cronos-assets/logos/brands/github.svg" alt=""/></a><a class="link-dark text-decoration-none me-4" href="#"><img src="cronos-assets/logos/brands/LinkedIn.svg" alt=""/></a></div>
    </div>
  </div>
</section>

<section class="py-20 py-lg-32 bg-primary" style="background-image: url('cronos-assets/elements/lines3.svg'); background-repeat: no-repeat; background-size: cover;" >
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-4 mb-lg-0">
        <div class="mw-lg-md"><span class="badge bg-secondary-light">New feature</span>
          <h3 class="fw-bold mt-6 mb-4 text-white">Lorem ipsum dolor sit amet consectutar</h3>
          <p class="text-white">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="p-12 text-center bg-white">
          <h6 class="fw-bold">Sign up to our newsletter</h6>
          <p class="text-muted mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <form action="#">
            <input class="form-control mb-4" type="email" placeholder="E-mail address"/>
            <button class="btn btn-secondary w-100">Sign Up</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<nav class="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 me-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">
  <div class="container">
    <div class="mw-4xl mx-auto">
      <ul class="list-unstyled">
        <li class="px-6 px-md-16 py-16 mb-6 bg-light-light">
          <button class="btn px-0 w-100 d-flex justify-content-between align-items-center text-start">
            <h6 class="text-muted">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h6>
            <svg class="flex-shrink-0" width="8" height="4" viewbox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.17461 3.87962C7.38428 4.05933 7.69993 4.03505 7.87964 3.82539C8.05935 3.61572 8.03507 3.30007 7.8254 3.12036L4.3254 0.120363C4.13816 -0.040133 3.86186 -0.040133 3.67461 0.120363L0.174613 3.12036C-0.0350495 3.30007 -0.0593303 3.61572 0.120381 3.82539C0.300092 4.03505 0.615742 4.05933 0.825405 3.87962L4.00001 1.15853L7.17461 3.87962Z" fill="#001410"></path>
            </svg>
          </button>
          <p class="mt-6 mw-2xl lead lh-lg text-muted">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>
        </li>
        <li class="px-6 px-md-16 py-16 mb-6 bg-light-light">
          <button class="btn px-0 w-100 d-flex justify-content-between align-items-center text-start">
            <h6 class="text-muted">Donec sed leo sit amet ante ornare laoreet in quis est?</h6>
            <svg class="flex-shrink-0" width="8" height="4" viewbox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.17461 0.120381C7.38428 -0.0593303 7.69993 -0.0350495 7.87964 0.174613C8.05935 0.384276 8.03507 0.699926 7.8254 0.879637L4.3254 3.87964C4.13816 4.04013 3.86186 4.04013 3.67461 3.87964L0.174613 0.879637C-0.0350495 0.699926 -0.0593303 0.384276 0.120381 0.174613C0.300092 -0.0350495 0.615742 -0.0593303 0.825405 0.120381L4.00001 2.84147L7.17461 0.120381Z" fill="#001410"></path>
            </svg>
          </button>
          <p class="d-none mt-6 mw-2xl lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultricies est. Duis nec hendrerit magna. Ut vel orci gravida, hendrerit enim non, gravida turpis. Praesent non lectus porttitor, scelerisque nulla nec, ornare neque. Integer massa libero, ornare ut leo nec, scelerisque rutrum elit. Morbi et massa id ipsum lobortis rhoncus. Aenean sit amet porta nulla, quis varius risus. Suspendisse ultrices ut lectus non laoreet. Etiam ornare laoreet tortor quis porttitor. Suspendisse tempus erat non dui volutpat eleifend.</p>
        </li>
        <li class="px-6 px-md-16 py-16 mb-6 bg-light-light">
          <button class="btn px-0 w-100 d-flex justify-content-between align-items-center text-start">

<section class="py-20 bg-secondary" style="background-image: url('cronos-assets/elements/lines2.svg'); background-repeat: no-repeat; background-size: cover;" >
  <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">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 w-100 d-md-inline mb-2 mb-lg-0 me-sm-4" href="#">Activate your demo</a><a class="btn btn-dark w-100 d-md-inline" href="#">Share with friends</a>
    </div>
  </div>
</section>

<section class="py-20 bg-light">
  <div class="container">
    <div class="row mb-n4">
      <div class="col-12 col-lg-6 p-4">
        <div class="p-6 p-lg-12 bg-white"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">1</span>
          <h3 class="my-6">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
          <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-6 p-4">
        <div class="p-6 p-lg-12 bg-white"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">2</span>
          <h3 class="my-6">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
          <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-6 p-4">
        <div class="p-6 p-lg-12 bg-white"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">3</span>
          <h3 class="my-6">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
          <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-6 p-4">
        <div class="p-6 p-lg-12 bg-white"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-primary text-white" style="width: 64px; height: 64px;">4</span>
          <h3 class="my-6">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>

<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">
          <h1 class="mb-4 text-primary">5095</h1>
          <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">
          <div class="text-center">
            <h1 class="mb-4 text-primary">1350</h1>
            <p class="text-muted">Clients</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-6 mb-md-0">
        <div class="text-center">
          <div class="text-center">
            <h1 class="mb-4 text-primary">15+</h1>
            <p class="text-muted">Years of experience</p>
          </div>
        </div>

<section class="py-20">
  <div class="container">
    <div class="row mb-5">
      <div class="mw-5xl text-center mx-auto mb-14"><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>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 mb-12"><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="mb-4 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 class="col-12 col-md-6 col-lg-4 mb-12"><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="mb-4 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 class="col-12 col-md-6 col-lg-4 mb-12"><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="mb-4 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 class="col-12 col-md-6 col-lg-4 mb-12 mb-lg-0"><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="mb-4 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>