UI Components – Metis Library

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-5 mx-auto text-center">
        <span class="badge mb-3 bg-primary py-2 x-3 rounded-pill">Lorem ipsum</span>
        <h2 class="mb-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
        <p class="mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto">
        <div class="row mb-2">
          <div class="col-12 col-lg-6">
            <div class="row d-flex flex-wrap">
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">
                <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
              </div>
              <div class="col-6 py-2">

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-6 pe-lg-5 mb-5 mb-lg-0">
        <span class="badge bg-primary rounded-pill">Our Team</span>
        <h2 class="my-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="text-muted lh-lg mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="col-12 col-lg-6 pl-lg-5">
        <div class="row">
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Anne Bailey</h4>
            <p class="text-muted">CEO</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Julie Brown</h4>
            <p class="text-muted">Head of Development</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Tom Jones</h4>
            <p class="text-muted">Head of Operations</p>

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-2 mb-5 mb-lg-0 text-center text-lg-left">
        <a class="navbar-brand" href="#">
          <img class="img-fluid" src="metis-assets/logos/metis/metis.svg" alt="" width="106">
        </a>
      </div>
      <div class="col-12 col-lg-7 mb-5 mb-lg-0">
        <ul class="d-flex flex-wrap justify-content-center justify-content-lg-start list-unstyled mb-0">
          <li class="me-4 me-lg-5"><a class="text-decoration-none fs-5 lh-1 fw-bold text-dark" href="#">Shop</a></li>
          <li class="me-4 me-lg-5"><a class="text-decoration-none fs-5 lh-1 fw-bold text-dark" href="#">About</a></li>
          <li class="me-4 me-lg-5"><a class="text-decoration-none fs-5 lh-1 fw-bold text-dark" href="#">Blog</a></li>
          <li class="me-lg-5"><a class="text-decoration-none fs-5 lh-1 fw-bold text-dark" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="col-12 col-lg-3">
        <div class="d-flex flex-column flex-lg-row align-items-center">
          <span class="ms-lg-auto mb-4 mb-lg-0 me-lg-2 me-xl-4 text-muted">Let&apos;s get in touch</span>
          <a class="btn btn-primary" href="#">Contact us</a>
        </div>
      </div>
    </div>
  </div>

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8 col-lg-6 mx-auto mb-4 text-center text-lg-left">
        <h2 class="mb-3 fs-1 fw-bold">
          <span>Lorem ipsum</span>
          <span class="text-primary">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="text-muted mb-0">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      </div>
      <div class="col-12 col-lg-6 d-flex flex-column justify-content-center">
        <div class="row justify-content-center justify-content-lg-end">
          <div class="col-12 col-md-6 col-lg-8 mb-3 mb-md-0">
            <div class="input-group">
              <span class="input-group-text px-3 bg-light rounded-left">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
              </span>
              <input class="form-control" type="text" placeholder="Type your e-mail">
            </div>
          </div>
          <div class="col-12 col-md-auto">

<section>
  <nav class="navbar">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
      </a>
      <div><a class="btn btn-outline-primary me-2" href="#">Log In</a><a class="btn btn-primary" href="#">Sign Up</a></div>
    </div>
  </nav>
</section>

<section class="py-5" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-md-8 col-lg-7 mx-auto text-center">
        <h2 class="mb-3 fs-1 fw-bold">
          <span>Start saving time today and</span>
          <span class="text-primary">choose</span>
          <span>your best plan</span>
        </h2>
        <p class="mb-0 text-muted">Best for freelance developers who need to save their time.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="px-3 py-5 text-center bg-white rounded shadow-sm">
          <img class="mb-4 img-fluid mx-auto" width="75" height="75" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="mb-2 fs-1 fw-bold">Begginer</h3>
          <span class="fs-1 fw-bold text-primary">$32.99</span>
          <p class="mt-1 text-muted">user per month</p>
          <div class="my-4 py-2 d-flex justify-content-center">
            <ul class="list-unstyled text-start text-muted mb-0">
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>

<section class="py-5 bg-light">
  <div class="container">
    <div class="bg-white px-4 py-3 rounded shadow-sm">
      <table class="table table-responsive">
        <thead>
          <tr><th>Project</th><th>Budget</th><th>Status</th><th>Users</th><th>Completion</th></tr>
        </thead>
        <tbody>
          <tr>
            <td class="d-flex align-items-center">
              <img class="img-fluid" src="metis-assets/logos/react.svg" alt="">
              <div class="ps-3">
                <p class="mb-0 fw-bold">React</p>
                <a class="text-decoration-none" href="#">www.reactjs.org</a>
              </div>
            </td>
            <td class="fw-bold">5000$</td>
            <td>
              <span class="badge py-2 px-3 bg-primary rounded-pill text-uppercase">Pending</span>
            </td>
            <td>
              <div>
                <img class="img-fluid rounded-circle border border-white" style="height: 35px; width: 35px; object-fit: cover; object-position: top;" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=128&amp;q=60">
                <img class="img-fluid rounded-circle border border-white" style="height: 35px; width: 35px; object-fit: cover; object-position: top; margin-left: -15px;" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=128&amp;q=60">

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-5 mx-auto text-center">
        <span class="badge bg-primary rounded-pill">Lorem ipsum</span>
        <h2 class="my-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
        <p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-6 col-lg-3 mb-4 text-center">
        <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        <h4 class="mb-2">Anne Bailey</h4>
        <p class="text-primary">CEO</p>
      </div>
      <div class="col-6 col-lg-3 mb-4 text-center">
        <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        <h4 class="mb-2">Julie Brown</h4>
        <p class="text-primary">Head of Development</p>
      </div>
      <div class="col-6 col-lg-3 mb-4 text-center">
        <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
        <h4 class="mb-2">Tom Jones</h4>
        <p class="text-primary">Head of Operations</p>

<section class="py-5 bg-light">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4 mb-3">
        <div class="p-4 shadow-sm bg-white rounded">
          <div class="mb-3 d-flex justify-content-between align-items-center">
            <p class="mb-0 text-muted">Followers</p>
            <span class="badge py-2 px-3 rounded-pill bg-primary">Monthly</span>
          </div>
          <h2 class="fs-1 fw-bold">250 324</h2>
          <p class="text-muted">
            <span class="text-success me-2">+18%</span>
            <span>Since last week</span>
          </p>
        </div>
      </div>
      <div class="col-12 col-md-4 mb-3">
        <div class="p-4 shadow-sm bg-white rounded">
          <div class="mb-3 d-flex justify-content-between align-items-center">
            <p class="mb-0 text-muted">Customers</p>
            <span class="badge py-2 px-3 rounded-pill bg-primary">Monthly</span>
          </div>
          <h2 class="fs-1 fw-bold">250 324</h2>
          <p class="text-muted">

<section class="py-5">
  <div class="container text-center">
    <a class="d-inline-block mb-5" href="#">
      <img class="img-fluid" src="metis-assets/logos/metis/metis.svg" alt="" width="106">
    </a>
    <div class="row">
      <div class="col-12 col-md-8 col-lg-5 mx-auto">
        <div class="px-4 mb-4">
          <form action="#">
            <span class="text-muted">Sign In</span>
            <h2 class="mb-4 fw-light">Join our community</h2>
            <div class="mb-3 input-group">
              <input class="form-control" type="email" placeholder="name@email.com">
              <span class="input-group-text">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                </svg>
              </span>
            </div>
            <div class="mb-3 input-group">
              <input class="form-control" type="password" placeholder="Enter your password">
              <div class="input-group-text">
                <svg width="20" height="20" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>

<div class="fixed-bottom">
  <div class="py-4 px-1 px-md-4 bg-dark text-white">
    <div class="container">
      <h5 class="fw-bold mb-3">Cookie Policy</h5>
      <p class="mb-3">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the &lsquo;how to reject cookies&apos; section of our. Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
      <a class="me-3 btn btn-primary" href="#">Accept Cookies</a><a class="btn btn-outline-primary" href="#">Refuse Cookies</a>
    </div>
  </div>
</div>

<section class="py-5">
  <div class="container">
    <h2 class="mb-4 fw-bold">Our Blog</h2>
    <div class="row mb-5">
      <div class="col-12 col-lg-6 py-4 pr-lg-5">
        <span class="badge bg-primary rounded-pill">Development</span>
        <h4 class="my-4 fw-bold">Curabitur vestibulum odio maximus.</h4>
        <p class="mb-4 lh-lg text-muted">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend, quis dictum eros bibendum. Maecenas convallis tempor varius.</p>
        <a class="text-decoration-none" href="#">
          <span>Read More</span>
          <svg class="d-inline-block ms-1" height="16" width="16" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </a>
      </div>
      <div class="col-12 col-lg-6">
        <img class="w-100 rounded" style="object-fit: cover; height: 20rem;" src="https://images.unsplash.com/photo-1603050927325-baf630505e27?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjExMDk0fQ&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
      </div>
    </div>
    <div class="row mb-5">
      <div class="col-12 col-lg-6 py-4 order-lg-1 pl-lg-5">
        <span class="badge bg-primary rounded-pill">Startup</span>
        <h4 class="my-4 fw-bold">Curabitur vestibulum odio maximus.</h4>
        <p class="mb-4 text-muted lh-lg">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend, quis dictum eros bibendum. Maecenas convallis tempor varius.</p>

<section>
  <div class="py-5 bg-primary">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-8 col-lg-6 mx-auto text-center">
          <span class="badge rounded-pill bg-warning">Lorem ipsum</span>
          <h2 class="my-3 fs-1 fw-bold text-white">Lorem ipsum dolor sit amet consectutar domor</h2>
          <p class="mb-4 text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
          <div><a class="btn btn-light" href="#">Get Started</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row mb-4">
      <div class="col-lg-5 text-center mx-auto">
        <span class="text-muted">Contact Us</span>
        <h2 class="mt-4 fs-1 fw-bold">We will be glad to hear from you!</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 mx-auto">
        <form class="mb-2 mb-lg-5" action="#">
          <div class="d-flex justify-content-center mb-4">
            <span class="me-3 fw-bold">Departament:</span>
            <div class="me-3 form-check">
              <input class="form-check-input" type="radio" name="department" value="1" checked="">
              <label class="form-check-label" for="departament1">Support</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="department" value="2">
              <label class="form-check-label" for="departament2">Sales</label>
            </div>
          </div>
          <div class="mb-3">
            <input class="form-control py-2 px-3 bg-light border-0" type="text" placeholder="Subject">

<section class="position-relative">
  <div class="d-none d-lg-block position-absolute top-0 left-0 bottom-0 col-lg-4 bg-primary"></div>
  <div class="container">
    <div class="row overflow-hidden">
      <div class="position-relative d-none d-lg-block col-12 col-lg-5 p-5 bg-primary">
        <div class="position-absolute right-0 mt-5 d-flex align-items-center" style="margin-right: -128px;">
          <img class="img-fluid" src="metis-assets/illustrations/hardworking-man.png" alt="" style="max-width: 32rem;">
        </div>
      </div>
      <div class="col-12 col-lg-7 pl-lg-5">
        <div class="container">
          <div class="row py-5">
            <div class="col-12 col-lg-10 mx-auto">
              <h2 class="mb-5 fw-bold">Frequently Asked Questions</h2>
              <ul class="list-unstyled accordion" id="accordion02">
                <li class="accordion-item">
                  <h3 class="accordion-header">
                    <button class="accordion-button collapsed bg-transparent text-left" type="button" data-toggle="collapse" data-target="#collapseOne02" aria-expanded="false" aria-controls="collapseOne02">
                      <span class="fw-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
                    </button>
                  </h3>
                  <div class="accordion-collapse collapse" id="collapseOne02" aria-labelledby="headingOne" data-parent="#accordion02">
                    <div class="accordion-body">
                      <p class="text-muted lh-lg">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>

<section class="py-5" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-6 mx-auto text-center">
        <img class="img-fluid" src="metis-assets/icons/quote.svg" alt="">
        <p class="fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</p>
        <p class="text-muted lh-lg mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="row mb-4">
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="p-4 bg-white shadow-sm rounded">
          <div class="d-flex">
            <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: cover;" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="ms-3">
              <h5 class="mb-1">John Bailey</h5>
              <p class="text-primary">CEO</p>
            </div>
          </div>
          <p class="text-muted lh-lg">In et sagittis risus, sed molestie sapien. Suspendisse potenti. Sed pharetra, leo quis dignissim tristique, arcu arcu varius libero, ut vestibulum sapien odio facilisis nunc.</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="p-4 bg-white shadow-sm rounded">

<section class="py-5">
  <div class="container text-center">
    <div class="row mb-5">
      <div class="col-12 col-md-8 col-lg-5 mx-auto">
        <img class="img-fluid" src="metis-assets/illustrations/error2.png" alt="">
      </div>
    </div>
    <span class="fs-1 fw-bold text-primary">Error 404</span>
    <h2 class="mb-4 fs-1 fw-bold">Something went wrong!</h2>
    <p class="mb-4 text-muted">Sorry, but we are unable to open this page.</p>
    <div><a class="btn btn-primary me-2" href="#">Go back to Homepage</a><a class="btn btn-light" href="#">Try Again</a></div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 mt-5 mt-lg-0 order-1 order-lg-0">
        <div class="mb-5 pe-5">
          <h2 class="mb-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
          <p class="lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </div>
        <ul class="list-unstyled">
          <li class="mb-4">
            <span class="d-inline-block py-2 px-3 me-3 bg-success text-white rounded">1</span>
            <span>Proin volutpat ex eu</span>
          </li>
          <li class="mb-4">
            <span class="d-inline-block py-2 px-3 me-3 bg-success text-white rounded">2</span>
            <span>Fusce posuere nibh in cursus</span>
          </li>
          <li>
            <span class="d-inline-block py-2 px-3 me-3 bg-success text-white rounded">3</span>
            <span>Maecenas sit amet vehicula</span>
          </li>
        </ul>
      </div>
      <div class="col-12 col-lg-6 p-lg-5 d-flex">

<section class="py-5 overflow-hidden">
  <div class="container py-5">
    <div class="row align-items-center">
      <div class="position-relative col-12 col-lg-6 order-last mt-5 mt-lg-0">
        <img class="position-relative mx-auto rounded w-100" style="z-index:10" src="https://images.unsplash.com/photo-1536940135352-b4b3875df888?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=1200&amp;q=80" alt="">
        <img class="img-fluid position-absolute" width="160" height="160" style="top:0; left:0; margin-left: -48px; margin-top: -48px;" src="metis-assets/elements/blob-tear.svg" alt="">
        <img class="img-fluid position-absolute" width="160" height="160" style="right:0; bottom:0; margin-right: -48px; margin-bottom: -48px;" src="metis-assets/elements/blob-tear.svg" alt="">
      </div>
      <div class="col-12 col-lg-6 py-5">
        <div class="row">
          <div class="col-12 col-lg-8 mx-auto">
            <span class="badge rounded-pill bg-primary">Lorem ipsum</span>
            <h2 class="mt-3 mb-5 fs-1 fw-bold">Key Features</h2>
            <div class="d-flex mb-4 pb-1">
              <span class="me-4 text-primary">
                <svg width="32" height="32" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </span>
              <div>
                <h5>Easy to customize</h5>
                <p class="mb-0 text-muted lh-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis expedita animi.</p>
              </div>
            </div>

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-5 mx-auto text-center">
        <span class="badge mb-3 bg-primary py-2 x-3 rounded-pill">Lorem ipsum</span>
        <h2 class="mb-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
        <p class="mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-3 d-flex align-items-center">
        <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1464655646192-3cb2ace7a67e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
      </div>
      <div class="col-12 col-lg-6">
        <div class="row d-flex align-items-end justify-content-center">
          <div class="col-7 p-2">
            <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1529513342590-3b342bb7dd67?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
          <div class="col-4 p-2">
            <img class="img-fluid rounded" src="https://images.unsplash.com/photo-1489058535093-8f530d789c3b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          </div>
        </div>
        <div class="row d-flex align-items-start justify-content-center">
          <div class="col-4">