UI Components – Cronos Library

<section class="position-relative overflow-hidden py-20">
  <div class="container">
    <div class="row align-items-center mb-6 mb-lg-0">
      <div class="col-12 col-lg-6 col-xl-5 mb-12 mb-lg-0">
        <h2 class="mb-6">Lorem Ipsum dolor sit amet</h2>
        <p class="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 class="d-flex align-items-center mb-8">
          <svg class="me-4" 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>
          <div>
            <p class="mb-0">Change of access</p>
          </div>
        </div>
        <div class="d-flex align-items-center mb-8">
          <svg class="me-4" 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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <div>
            <p class="mb-0">Security in savings</p>
          </div>

<section class="py-20 bg-light-light">
  <div class="container">
    <div class="row bg-white shadow-lg">
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <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="#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>
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>

<section class="pt-20 mb-48 bg-secondary-light">
  <div class="pt-5">
    <div class="container position-relative pb-5">
      <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>
        <div class="mb-12 mb-lg-32"><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>
      <div class="row pb-10" style="margin-bottom: -200px;">
        <div class="col-12 col-lg-4 mb-4 mb-lg-0 px-lg-0">
          <div class="py-20 px-5 h-100 text-center bg-white shadow-lg"><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>
            <div>
              <h3 class="h5 fw-normal mt-6 mb-4">Check of access</h3>
              <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-4 mb-lg-0 px-lg-0">
          <div class="py-20 px-5 h-100 text-center bg-white shadow-lg"><span>

<nav class="navbar navbar-light py-5"  >
  <div class="container">
    <div class="d-flex w-100 justify-content-between"><a class="navbar-brand" href="#"><img src="cronos-assets/logos/cronos-logo.svg" alt="" width="132"/></a>
      <button class="btn p-0 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>
    </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>
          <li class="nav-item mb-4"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item mb-4"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item mb-4"><a class="nav-link" href="#">Testimonials</a></li>
        </ul>
      </div>

<section class="py-20">
  <div class="container">
    <h6 class="mb-16 fw-normal text-center">Trusted by brands all over the world</h6>
    <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-grey.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-grey.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-grey.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-grey.svg" alt=""/></div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="mw-2xl mx-auto">
      <h3 class="mb-6">Decisions To Consider Before Wireframing</h3>
      <ul class="list-unstyled">
        <li class="py-5 border-bottom">
          <button class="bg-transparent border-0 w-100 d-flex justify-content-between align-items-center text-start"><span class="fw-bold">Creating Content Wireframes For Responsive Design</span>
            <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.120366C7.38428 -0.0593456 7.69993 -0.0350648 7.87964 0.174598C8.05935 0.384261 8.03507 0.699911 7.8254 0.879622L4.3254 3.87962C4.13816 4.04012 3.86186 4.04012 3.67461 3.87962L0.174613 0.879622C-0.0350495 0.699911 -0.0593303 0.384261 0.120381 0.174598C0.300092 -0.0350648 0.615742 -0.0593456 0.825405 0.120366L4.00001 2.84145L7.17461 0.120366Z" fill="#001410"></path>
            </svg>
          </button>
          <p class="d-none pe-4 mt-4 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="py-5 border-bottom">
          <button class="bg-transparent border-0 w-100 d-flex justify-content-between align-items-center text-start"><span class="fw-bold">The Skeptic&rsquo;s Guide To Low-Fidelity Prototyping</span>
            <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.120373C7.38428 -0.0593379 7.69993 -0.0350572 7.87964 0.174606C8.05935 0.384269 8.03507 0.699919 7.8254 0.87963L4.3254 3.87963C4.13816 4.04013 3.86186 4.04013 3.67461 3.87963L0.174613 0.87963C-0.0350495 0.699919 -0.0593303 0.384269 0.120381 0.174606C0.300092 -0.0350572 0.615742 -0.0593379 0.825405 0.120373L4.00001 2.84146L7.17461 0.120373Z" fill="#001410"></path>
            </svg>
          </button>
          <p class="pe-4 mt-4 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="py-5 border-bottom">
          <button class="bg-transparent border-0 w-100 d-flex justify-content-between align-items-center text-start"><span class="fw-bold">Beyond Wireframing: The Real-Life UX Design Process</span>
            <svg class="flex-shrink-0" width="8" height="4" viewbox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="position-relative overflow-hidden py-20">
  <div class="d-none d-lg-block position-absolute top-0 start-0 ms-n80 ms-xl-n64 mt-24 mb-24 col-6" style="height: 28rem;"><img class="h-100" src="cronos-assets/images/laptop.png" alt=""/></div>
  <div class="container">
    <div class="row align-items-center mb-6 mb-lg-0">
      <div class="col-12 col-lg-6 col-xl-5 mb-12 mb-lg-0 ms-lg-auto">
        <h2 class="mb-6">Lorem Ipsum dolor sit amet</h2>
        <p class="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 class="d-flex align-items-center mb-8">
          <svg class="me-4" 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>
          <div>
            <p class="mb-0">Change of access</p>
          </div>
        </div>
        <div class="d-flex align-items-center mb-8">
          <svg class="me-4" 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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <div>
            <p class="mb-0">Security in savings</p>

<section class="pt-20 mb-48 bg-secondary">
  <div class="pt-5">
    <div class="container position-relative pb-5">
      <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-12 mb-lg-32"><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>
      <div class="row pb-10" style="margin-bottom: -200px;">
        <div class="col-12 col-lg-4 mb-4 mb-lg-0 px-lg-0">
          <div class="py-20 px-5 h-100 text-center bg-white shadow-lg"><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>
            <div>
              <h3 class="h5 fw-normal mt-6 mb-4">Check of access</h3>
              <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-4 mb-lg-0 px-lg-0">
          <div class="py-20 px-5 h-100 text-center bg-white shadow-lg"><span>

<section class="py-20">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <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="#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>
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>

<section class="py-20">
  <div class="container">
    <div class="row mb-16 mb-lg-40">
      <div class="col-12 col-lg-8 mx-auto text-center">
        <h2 class="mb-3">Get our Free Mobile App</h2>
        <p class="mb-6 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 justify-content-center"><a class="me-3 mb-3 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 class="row">
      <div class="col-12 col-lg-4">
        <div class="d-flex mb-8"><span class="mt-n3">
            <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>
          <div class="ms-6">
            <h6 class="mb-2 fw-normal">Change of access</h6>
            <p class="lead lh-lg text-muted">Pellentesque eu quam vitae mi lacinia consequat quis in metus.</p>
          </div>
        </div>
        <div class="d-flex mb-8"><span class="mt-n3">
            <svg width="48" height="48" viewbox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-20 poistion-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mw-md-3xl mx-auto">
      <div class="position-relative py-8 py-lg-12 px-6 pe-md-16 mb-12 mb-md-4 bg-warning-light"><img class="position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/warning-two-green.svg" alt=""/><img class="position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/warning-two-green2.svg" alt=""/>
        <div class="d-flex"><span class="me-8"><img src="cronos-assets/elements/quote-gold.svg" alt=""/></span>
          <div>
            <p class="lead lh-lg">On the other hand, perfection can also haunt some of us to the point of inaction. While some are too quick to act and end up wasting resources, others are completely paralyzed by the &ldquo;excessive&rdquo; amount of work behind building something new. There&rsquo;s just &ldquo;so much to get done&rdquo; before delivering the product to the user that we end up feeling frustrated and overwhelmed.</p>
          </div>
        </div>
      </div>
      <p class="text-muted text-center">Danny Bailey, CEO &amp; Founder at Wireframes</p>
    </div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container">
    <div class="px-24 pt-14 pb-8 bg-light-light position-relative"><img class="d-none d-md-block position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/left-squares.svg" alt=""/><img class="d-none d-md-block position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/right-squares.svg" alt=""/>
      <h6 class="mb-4 fw-normal text-center">Trusted by brands all over the world</h6>
      <div class="row align-items-center">
        <div class="col-12 col-md-4 col-lg-2">
          <div class="py-8 py-lg-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">
          <div class="py-8 py-lg-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">
          <div class="py-8 py-lg-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">
          <div class="py-8 py-lg-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">
          <div class="py-8 py-lg-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="py-8 py-lg-14"><img class="img-fluid d-block mx-auto" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></div>
        </div>
      </div>

<section class="py-20">
  <div class="container">
    <div class="row bg-white shadow-lg">
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <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="#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>
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0 position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 ms-n3" style="width: 296px; height: 296px;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt=""/>
        <div class="d-flex flex-column mx-auto" style="width: 296px;"><img class="ms-auto" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/>
          <div class="d-flex justify-content-end align-items-end"><img class="d-none d-lg-block" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="ms-auto img-fluid" style="width: 296px; height: 296px; object-fit: cover;" src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=890&amp;q=80" alt=""/></div>
          <div class="d-flex justify-content-end"><img style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="img-fluid" style="height: 148px; width: 148px; object-fit: cover;" src="https://images.unsplash.com/photo-1600275669439-14e40452d20b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-lg-sm mx-auto">
          <h2 class="mb-6">Expand your brand with this excellent extension tool</h2>
          <p class="lead lh-lg text-muted mb-6">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p><a class="btn btn-primary d-block d-md-inline-block mb-6 mb-md-0 mb-lg-0 me-md-8" href="#">Try Demo</a><a class="link-dark text-decoration-none fw-bold" href="#">Learn more about Cronos<span class="inline-block ms-2">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12H20" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14 18L20 12L14 6" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span></a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg-sm mx-auto">
          <h2 class="mb-6">Expand your brand with this excellent extension tool</h2>
          <p class="lead lh-lg text-muted mb-6">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p><a class="btn btn-primary d-block d-md-inline-block mb-6 mb-md-0 mb-lg-0 me-md-4" href="#">Try Demo</a><a class="link-dark text-decoration-none fw-bold" href="#">Learn more about Cronos<span class="inline-block ms-2">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12H20" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M14 18L20 12L14 6" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg></span></a>
        </div>
      </div>
      <div class="col-12 col-lg-6 position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 ms-n3" style="width: 296px; height: 296px;" src="cronos-assets/elements/dark-green-dark-warning-right.svg" alt=""/>
        <div class="d-flex flex-column mx-auto" style="width: 296px;"><img class="ms-auto" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/>
          <div class="d-flex justify-content-end align-items-end"><img class="d-none d-lg-block" style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="ms-auto img-fluid" style="width: 296px; height: 296px; object-fit: cover;" src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=890&amp;q=80" alt=""/></div>
          <div class="d-flex justify-content-end"><img style="width: 148px; height: 148px;" src="cronos-assets/elements/grey-square.svg" alt=""/><img class="img-fluid" style="height: 148px; width: 148px; object-fit: cover;" src="https://images.unsplash.com/photo-1600275669439-14e40452d20b?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-primary">
  <div class="container">
    <div class="row bg-white">
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <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="#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>
      <div class="col-12 col-md-6 col-lg-4 py-20 shadow-lg">
        <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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>

<section class="py-20">
  <div class="container">
    <h6 class="mb-8 fw-normal text-center">Trusted by brands all over the world</h6>
    <div class="row align-items-center">
      <div class="col-12 col-md-4 col-lg-2 mb-6 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-4 col-lg-2 mb-6 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-4 col-lg-2 mb-6 mb-lg-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-4 col-lg-2 mb-6 mb-md-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/amazon-color.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-4 col-lg-2 mb-6 mb-md-0">
        <div class="bg-light-light py-14"><img class="d-block mx-auto img-fluid" 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 py-14"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></div>
      </div>
    </div>
  </div>

<section class="py-20 poistion-relative overflow-hidden">
  <div class="container">
    <div class="mw-2xl mx-auto">
      <h3 class="mb-6">When I was a developer, I often had a hundred questions when</h3>
      <p class="mb-12 lead lh-lg text-muted">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <div class="mb-12 position-relative" style="height: 448px;"><img class="d-none d-lg-block position-absolute top-0 start-100 translate-middle-x" style="height: 112px;" src="cronos-assets/elements/warning-group-square.svg" alt=""/><img class="d-none d-lg-block position-absolute bottom-0 start-0 translate-middle-x" style="height: 112px;" src="cronos-assets/elements/light-squares.svg" alt=""/><img class="img-fluid h-100 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>
      <p class="mb-8 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-8 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>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="mb-24 mx-auto 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-xl mx-auto mb-12 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><img class="img-fluid" style="max-height: 495px;" src="cronos-assets/images/laptop.png" alt=""/>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-4 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="#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>
        <div class="mt-6 mw-xs px-lg-4 mx-auto">
          <h6 class="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>
      <div class="col-12 col-lg-4 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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="py-20 bg-primary">
  <div class="container">
    <div class="row bg-white shadow-lg">
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <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="#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>
      <div class="col-12 col-md-6 col-lg-4 py-20 border-bottom border-end">
        <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="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16 23L22 29L34 17" stroke="#006251" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
          <h6 class="mt-6 mb-4 fw-normal">Security in savings</h6>
          <p class="lead lh-lg text-muted">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>