UI Components – Metis Library

<section class="py-5 position-relative" style="overflow-x: hidden;">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="d-none d-lg-block" style="height: 512px;">
          <div class="position-absolute right-0" style="margin-right: -256px;">
            <img class="img-fluid" src="metis-assets/elements/macbook.png" alt="" style="height: 512px;">
            <div class="position-absolute" style="top: 5.8%; left: 14.6%; width: 72.8%; height: 76.8%;">
              <img class="h-100 w-100" style="object-fit: cover;" src="metis-assets/placeholders/metis-dashboard-square.png" alt="">
            </div>
          </div>
        </div>
        <div class="d-lg-none position-relative">
          <img class="img-fluid" src="metis-assets/elements/macbook.png" alt="">
          <div class="position-absolute" style="top: 5.8%; left: 14.6%; width: 72.8%; height: 76.8%;">
            <img class="h-100 w-100" style="object-fit: cover;" src="metis-assets/placeholders/metis-dashboard-square.png" alt="">
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 mt-4 mt-lg-0 order-lg-first">
        <div class="d-flex h-100">
          <div class="row my-auto pr-lg-5">
            <div class="col-12 col-lg-10">
              <h2 class="mb-4 fs-1 fw-bold">

<section class="py-4 position-relative">
  <div class="row py-5">
    <div class="position-absolute d-none d-lg-block col-6 h-100 ms-auto bg-primary" style="top:0; right:0;">
      <div class="d-flex h-100 align-items-end">
        <img class="img-fluid d-block mx-auto" src="metis-assets/illustrations/gamer.png" alt="">
      </div>
    </div>
    <div class="col-12 col-lg-7">
      <div class="container">
        <div class="row mb-5">
          <div class="col-8 mx-lg-auto">
            <p class="mb-0 text-muted">We will be glad to hear from you</p>
            <h2 class="fs-1">Get in touch!</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-8 mx-auto">
            <form action="#">
              <div class="d-flex 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>

<section>
  <div class="container-fluid text-center text-lg-left">
    <div class="row h-100">
      <div class="col-12 col-lg-6 py-5 py-lg-0 pl-lg-5 d-flex flex-column justify-content-center order-1 order-lg-0">
        <span class="fs-1 fw-bold text-primary">Whoops!</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>
      <div class="col-12 col-lg-6 bg-primary py-5">
        <div class="row h-100">
          <div class="col-8 col-lg-10 mx-auto d-flex align-items-center">
            <img class="img-fluid" src="metis-assets/illustrations/error1.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative h-100">
  <div class="d-none d-lg-block position-absolute top-0 right-0 bottom-0 col-6 ms-auto bg-light"></div>
  <div class="container">
    <div class="position-relative row py-5 pr-lg-5">
      <div class="col-12 col-md-8 col-lg-5 pt-lg-5 mx-auto mx-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>
        <p class="mt-5 text-muted text-lg-left">Subscribe and stay fully connected with product.</p>
        <div class="row mb-5">
          <div class="col-12 col-lg-8">
            <div class="input-group mb-2">
              <span class="input-group-text">
                <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-lg-4">
            <button class="w-100 w-lg-auto btn btn-primary" type="submit">Sign Up</button>
          </div>
        </div>

<section class="py-5">
  <div class="container overflow-hidden">
    <div class="row mb-5 pb-4">
      <div class="col-12 col-lg-6 mb-5 mb-lg-0">
        <div class="position-relative p-5" style="height: 500px;">
          <div class="position-absolute top-0 start-0 h-100 w-100 bg-light rounded mt-3 ms-3"></div>
          <img class="position-absolute top-0 start-0 h-100 w-100 rounded" style="object-fit: cover;" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?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="col-12 col-lg-6 d-flex">
        <div class="px-lg-5 my-auto">
          <img class="img-fluid" src="metis-assets/icons/quote.svg" alt="">
          <h2 class="my-4 fs-2 lh-base fw-bold">Maecenas nibh purus, pharetra ac felis sed, elementum molestie urna. Nunc at arcu non ipsum auctor lacinia quis quis mi.</h2>
          <h5 class="mb-1 fs-5">Alice Bradley</h5>
          <p class="mb-0 text-primary">Head of Operations</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto">
        <div class="row text-center">
          <div class="col-6 col-md-4 col-lg-2 mb-5">
            <a href="#">
              <svg width="38" height="49" viewbox="0 0 38 49" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-5">
  <div class="container">
    <div class="row text-center">
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="px-2 py-4 shadow-sm rounded">
          <svg class="text-primary mb-2" width="48" height="48" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <p class="mb-1 text-muted">Followers</p>
          <h2 class="fs-1 fw-bold">250 324</h2>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="px-2 py-4 shadow-sm rounded">
          <svg class="text-primary mb-2" width="48" height="48" 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="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path>
          </svg>
          <p class="mb-1 text-muted">Solved Problems</p>
          <h2 class="fs-1 fw-bold">6 510</h2>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="px-2 py-4 shadow-sm rounded">
          <svg class="text-primary mb-2" width="48" height="48" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 px-3 col-lg-7 mx-auto">
        <div class="mb-4 text-center">
          <a class="me-1" href="#">CATEGORY</a>
          <span class="text-muted">24 Jan, 2021</span>
          <h2 class="mt-3 fs-1 fw-bold">Curabitur vestibulum odio maximus ipsum</h2>
        </div>
        <div class="row justify-content-center mb-4">
          <div class="col-auto">
            <img class="rounded-circle" style="object-fit: cover;" width="48" height="48" 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="">
          </div>
          <div class="col-auto pl-2 text-left">
            <a href="#">Alice Bradley</a>
            <div class="text-muted">Author</div>
          </div>
        </div>
        <p class="mb-4 text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo est eget consequat imperdiet. Suspendisse laoreet scelerisque lobortis. Mauris facilisis hendrerit nulla at vehicula. Suspendisse potenti. Ut in nulla a purus bibendum convallis. Suspendisse id nunc maximus, suscipit ante ac, vulputate massa. Sed ut nunc suscipit, bibendum arcu a, interdum elit. Nullam laoreet mollis dictum. Ut suscipit, magna at elementum iaculis, erat erat fermentum justo, sit amet ultrices enim leo sit amet purus. Nulla sed erat molestie, auctor mauris lobortis, iaculis justo.</p>
        <p class="mb-4 text-muted lh-lg">Duis hendrerit dui in dui ornare luctus. Nullam gravida tincidunt lorem cursus suscipit. Integer scelerisque sem et sem porta, eu volutpat mi tempor. Duis interdum sodales lacus non tempor. Nam mattis, sapien a commodo ultrices, nunc orci tincidunt ante, tempus tempus turpis metus laoreet lacus. Praesent condimentum, arcu ut fringilla tincidunt, augue diam pretium augue, sit amet vestibulum nunc felis vel metus. Duis dolor nulla, pellentesque non ultrices ut, convallis eu felis. Duis luctus tempor arcu, vitae elementum massa porta non. Morbi aliquet, neque ut volutpat sodales, dui enim facilisis enim, ut dictum lacus neque in urna. Nam metus elit, ullamcorper pretium nisi at, aliquet gravida lectus. Nullam id lectus pellentesque, suscipit dolor eget, consequat velit. Pellentesque finibus commodo nisl, id interdum leo. Maecenas aliquam felis justo, ut sagittis nunc maximus ut.</p>
      </div>
    </div>
  </div>
</section>

<section 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">
        <h2 class="mb-3 fs-1 fw-bold text-white">
          <span>Lorem ipsum</span>
          <span class="text-warning">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="mb-4 text-white-50">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
        <div class="row justify-content-center">
          <div class="col-12 col-md-8 mb-3 mb-md-0">
            <div class="input-group">
              <span class="input-group-text px-3 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">
            <button class="btn btn-light w-100" type="submit">Sign Up</button>
          </div>

<section class="py-5 bg-light">
  <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 mb-4">
      <div class="col-12 col-md-8 col-lg-5 mx-auto">
        <div class="p-4 shadow-sm rounded bg-white">
          <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>

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="position-relative col-12 col-lg-4 text-center text-lg-left">
        <h2 class="mb-4 fs-1 fw-bold">Lorem ipsum dolor sit amet consectut domor</h2>
        <p class="mb-5 text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        <div class="position-absolute bottom-0 left-0 w-100">
          <div class="d-flex justify-content-center justify-content-lg-start">
            <a class="ms-3 me-3" href="#">
              <svg 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="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
              </svg>
            </a>
            <a href="#">
              <svg 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="ms-lg-auto mt-5 mt-lg-0 col-12 col-lg-7">
        <div class="row">
          <div class="col-12 col-lg-6 mb-4 mb-lg-0">

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-8 col-lg-6 mx-auto text-center">
        <span class="badge rounded-pill bg-primary">New Project</span>
        <h2 class="mt-4 mb-3 fs-1 fw-bold">
          <span>The quick</span>
          <span class="text-primary">brown fox</span>
          <span>jumps over the lazy dog.</span>
        </h2>
        <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="row d-flex mx-auto position-relative">
      <div class="position-absolute px-5" style="top: 25%; left: 0;">
        <div class="d-none d-md-block w-75 py-1 mx-auto bg-white shadow-sm"></div>
      </div>
      <div class="col">
        <div class="row">
          <div class="col-6 col-md-3 d-flex flex-column align-items-center mb-4" style="z-index: 10;">
            <div class="mb-4 d-flex align-items-center justify-content-center shadow-sm bg-white rounded-circle" style="width: 100px; height: 100px;">
              <div class="d-flex align-items-center justify-content-center bg-primary text-white fw-bold rounded-circle" style="width: 90%; height: 90%;">1</div>
            </div>
            <h5 class="fw-bold text-center">Tristique interdum velit</h5>

<section class="py-5" style="background-repeat: no-repeat; background-position: top; background-size: contain; background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-4 mx-auto text-center">
        <h2 class="mb-3 fs-1 fw-bold">Frequently Asked&nbsp;Questions</h2>
        <p class="text-muted lh-lg mb-0">
          <span>Can&rsquo;t find the answer you&rsquo;re looking for? Write out to our</span>
          <a class="text-decoration-none" href="#">customer support team.</a>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto">
        <ul class="list-unstyled accordion bg-white" id="accordion04">
          <li class="accordion-item">
            <h3 class="accordion-header">
              <button class="accordion-button collapsed bg-transparent text-left" type="button" data-toggle="collapse" data-target="#collapseOne04" aria-expanded="false" aria-controls="collapseOne04">
                <span class="fw-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</span>
              </button>
            </h3>
            <div class="accordion-collapse collapse" id="collapseOne04" aria-labelledby="headingOne" data-parent="#accordion04">
              <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>
              </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 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 mx-lg-5">
      <div class="col-12 col-xl-6 mb-5">
        <div class="d-flex flex-row flex-wrap flex-md-nowrap">
          <img class="img-fluid rounded" style="height:256px; width: 256px; object-fit: cover;" 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="">
          <div class="ps-0 ps-md-3 mt-4 mt-lg-0">
            <h4>Julie Bailey</h4>
            <p class="text-primary">CEO</p>
            <p class="small text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-6 mb-5">
        <div class="card flex-row flex-wrap flex-md-nowrap border-0">
          <img class="img-fluid rounded" style="height:256px; width: 256px; 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="ps-0 ps-md-3 mt-4 mt-lg-0">

<section>
  <nav class="position-relative navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="metis-assets/logos/metis/metis.svg" alt="" width="106">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="side-menu" data-target="#sideMenu04" aria-controls="sideMenu04" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item me-4"><a class="nav-link" href="#">Product</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#">Company</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#">About Us</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        </ul>
        <div class="ms-auto"><a class="btn btn-outline-primary me-2" href="#">Log In</a><a class="btn btn-primary" href="#">Sign Up</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none fixed-top top-0 bottom-0" id="sideMenu04">
    <div class="position-absolute top-0 end-0 bottom-0 start-0 bg-dark" style="opacity: 0.7"></div>
    <nav class="navbar navbar-light position-absolute top-0 bottom-0 start-0 w-75 pt-3 pb-4 px-4 bg-white" style="overflow-y: auto;">
      <div class="d-flex flex-column w-100 h-100">

<section class="pb-5">
  <div class="py-5 mb-5" style="background-repeat:no-repeat; background-image: url('https://images.unsplash.com/photo-1603665330306-dd1a67e0cc4e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1280&amp;q=80&amp;blend=fe8484&amp;sat=-80&amp;blend-mode=multiply'); background-size: cover;">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6 mx-auto text-center text-white">
          <div class="mb-4 text-center">
            <a class="text-white me-1" href="#">CATEGORY</a>
            <span>24 Jan, 2021</span>
            <h2 class="mt-3 fs-1 fw-bold">Curabitur vestibulum odio maximus ipsum</h2>
          </div>
          <div class="row justify-content-center mb-4">
            <div class="col-auto">
              <img class="rounded-circle" style="object-fit: cover;" width="48" height="48" 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="">
            </div>
            <div class="col-auto pl-2 text-left">
              <a class="text-white" href="#">Alice Bradley</a>
              <div class="text-white">Author</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">

<section class="py-5">
  <div class="container">
    <div class="bg-primary rounded">
      <div class="row py-5">
        <div class="col-12 col-lg-6 mb-4 px-5 d-flex align-items-center">
          <div>
            <h2 class="mb-3 fs-1 fw-bold text-white">Lorem ipsum dolor sit amet consectetur domor</h2>
            <p class="text-light lh-lg mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            <a class="btn btn-light" href="#">Get Started</a>
          </div>
        </div>
        <div class="col-12 col-lg-6 px-5">
          <div class="position-relative mx-auto" style="max-width: 30rem;">
            <div class="position-absolute bg-primary" style="top: 22.8%; left: 3%; width: 25.2%; height: 72%;">
              <img class="w-100 h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1535223289827-42f1e9919769?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=668&amp;q=80" alt="">
            </div>
            <div class="position-absolute bg-primary" style="top: 3.8%; left: 37%; width: 25.2%; height: 72%;">
              <img class="w-100 h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=350&amp;q=80" alt="">
            </div>
            <div class="position-absolute bg-primary" style="top: 12.8%; left: 70%; width: 25.2%; height: 72%;">
              <img class="w-100 h-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1535223289827-42f1e9919769?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=668&amp;q=80" alt="">
            </div>
            <img class="position-relative img-fluid d-block mx-auto" src="metis-assets/elements/three-iphones.png" alt="">
          </div>

<section>
  <div class="container-fluid">
    <div class="row h-100">
      <div class="col-12 col-lg-6 bg-primary py-5">
        <div class="row h-100">
          <div class="col-8 col-lg-10 mx-auto d-flex align-items-center">
            <img class="img-fluid" src="metis-assets/illustrations/error2.png" alt="">
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 py-5 py-lg-0 d-flex flex-column align-items-center justify-content-center">
        <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>
    </div>
  </div>
</section>

<section class="py-5 bg-primary">
  <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 text-white fw-bold">
          <span>Lorem ipsum</span>
          <span class="text-warning">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="text-white-50 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 class="position-relative pb-5">
  <div class="container">
    <div class="position-absolute top-0 end-0 d-none d-lg-flex align-items-center col-lg-6 h-100 bg-primary">
      <div class="p-4">
        <img class="img-fluid" src="metis-assets/illustrations/walk-dog.png" alt="">
      </div>
    </div>
    <div class="row pb-5">
      <div class="col-12 col-lg-6">
        <div class="row pt-4">
          <div class="col-12 col-md-8 col-lg-10 mx-auto">
            <div class="mb-5 pb-5 d-flex align-items-center justify-content-between">
              <a href="#">
                <img class="img-fluid" src="metis-assets/logos/metis/metis.svg" alt="" width="106">
              </a>
              <a class="btn btn-outline-primary" href="#">Sign In</a>
            </div>
            <div class="mb-3">
              <form action="#">
                <span class="text-muted">Sign Up</span>
                <h2 class="mb-4 fw-light">Create an account</h2>
                <div class="row">
                  <div class="col-12 col-lg-6 mb-3">
                    <input class="form-control" type="text" placeholder="First Name">

<section class="py-5 bg-light">
  <div class="container">
    <div class="row text-center">
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="px-2 py-4 bg-white shadow-sm rounded">
          <svg class="text-primary mb-2" width="48" height="48" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <p class="mb-1 text-muted">Followers</p>
          <h2 class="fs-1 fw-bold">250 324</h2>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="px-2 py-4 bg-white shadow-sm rounded">
          <svg class="text-primary mb-2" width="48" height="48" 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="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path>
          </svg>
          <p class="mb-1 text-muted">Solved Problems</p>
          <h2 class="fs-1 fw-bold">6 510</h2>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4">
        <div class="px-2 py-4 bg-white shadow-sm rounded">
          <svg class="text-primary mb-2" width="48" height="48" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">