Bootstrap 5 HTTP codes Components

<section class="position-relative overflow-hidden">
  <img class="d-none d-md-block position-absolute top-0 end-0 col-6 h-100" style="object-fit: cover;" src="saturn-assets/images/http-codes/image-yellow.png" alt="">
  <div class="container position-relative">
    <div class="mw-xs mw-lg-sm mx-auto mx-md-0 py-24 py-md-52">
      <h2 class="font-heading mb-2">404</h2>
      <h5 class="font-heading lh-sm mb-6">Oops! Can't Find That Page</h5>
      <p class="fs-6 text-secondary mb-12">Sorry, the page you are looking for doesn't exist or has been moved. Try searching our site:</p>
      <a class="btn btn-primary rounded-pill" href="#">Take me home</a>
    </div>
  </div>
  <img class="d-block d-md-none w-100" style="object-fit: cover;" src="saturn-assets/images/http-codes/image-yellow.png" alt="">
</section>

<section class="pt-24 pt-md-32 position-relative overflow-hidden"><img class="d-none d-lg-block position-absolute bottom-0 end-0 w-100 mw-xl mw-lg-2xl mw-xl-3xl me-2xl-40" src="flaro-assets/images/http-codes/illustration.png" alt=""/>
  <div class="container">
    <div class="mw-sm mx-auto mx-lg-0"><img class="d-block mb-14 img-fluid" src="flaro-assets/images/http-codes/404-2.svg" alt=""/>
      <h5 class="fs-5 mb-4" >Something is wrong!</h5>
      <p class="text-secondary mb-32 mb-md-64" >The page you are looking for is not found! Try something else or go back to homepage.</p><a class="btn p-0 mb-16 btn-link fw-light d-inline-flex align-items-center" href="#">
        <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.66667 12.6667L2 8.00004M2 8.00004L6.66667 3.33337M2 8.00004L14 8.00004" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg><span class="ms-2" >Go Back to Homepage</span></a>
    </div><img class="d-lg-none d-block img-fluid mt-20 mx-auto" src="flaro-assets/images/http-codes/illustration.png" alt=""/>
  </div>
</section>

<section class="position-relative pt-16 pb-44 bg-white overflow-hidden"><img class="position-absolute top-0 left-0" src="gradia-assets/elements/http-codes/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;"><a class="d-inline-block mb-36" href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""/></a>
    <div>
      <h2 class="d-inline-block fs-1 mb-32" style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">404</h2>
    </div>
    <div class="mw-md-xl">
      <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-6" style="letter-spacing: 1px;" >Nothing found</h3>
      <h2 class="fs-10 lh-sm mb-5" >The page you are looking for is not available!</h2>
      <p class="fs-17 text-muted mb-11" >Try something different or go back to the homepage.</p>
      <div class="d-md-inline-block">
        <button class="btn btn-secondary fs-20 text-uppercase px-8 py-4 w-100 h-100" type="button" >Go back to Homepage</button>
      </div>
    </div>
  </div>
</section>

<section class="pb-12 pb-md-20 overflow-hidden">
  <div class="container">
    <div class="row mb-n6">
      <div class="d-none d-xl-block col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="d-none d-xl-block col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 mb-6">
        <div class="rounded-3" style="height: 340px; background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 100%);"></div>
      </div>
      <div class="col-6 col-xl-3 order-last order-xl-0 mb-6">
        <div class="bg-light-light bg-opacity-50 rounded-3" style="height: 340px;"></div>
      </div>
      <div class="col-12 col-xl-6 mb-6">
        <div class="d-flex h-100 align-items-center position-relative" style="min-height: 340px;">
          <div class="position-absolute top-0 h-100 start-0 w-100">
            <div class="row position-relative">
              <div class="position-absolute top-0 py-40 start-0 w-100" style="background: linear-gradient(0deg, rgba(248, 248, 248, 0.00) 0%, white 100%);"></div>
              <div class="col-6">
                <div class="w-100 border border-light rounded-3" style="height: 340px;"></div>
              </div>
              <div class="col-6">
                <div class="w-100 border border-light rounded-3" style="height: 340px;"></div>
              </div>
            </div>
          </div>
          <div class="position-relative mw-xl mx-auto py-4 text-center">
            <h3 class="mb-6">Oops. Page not found.</h3>
            <p class="mw-lg mx-auto fs-5 text-light-dark mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p>
            <a class="btn py-4 px-6 btn-primary border-primary-dark" href="#">Back to Home</a>
          </div>
        </div>
      </div>
      <div class="col-6 col-xl-3 mb-6">
        <div class="bg-light-light bg-opacity-50 rounded-3" style="height: 340px;"></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pb-20 py-lg-20"><img class="d-none d-lg-block position-absolute top-0 start-0 h-100 col-lg-5" style="object-fit: cover;" src="https://images.unsplash.com/photo-1544717305-996b815c338c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt=""/><img class="d-lg-none w-100 mb-12" style="object-fit: cover;" src="https://images.unsplash.com/photo-1544717305-996b815c338c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt=""/>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 ms-auto text-center"><span class="small text-muted fw-bold text-uppercase">Error 404</span>
        <h2 class="mt-8 mb-10">Page not found</h2>
        <p class="mb-12 lead text-muted">Sorry! We are unable to find the page you are looking for</p>
        <div class="d-flex flex-wrap justify-content-center"><a class="btn btn-primary me-4" href="#">Go back to Homepage</a><a class="btn btn-outline-dark" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark py-40 overflow-hidden"><img class="position-absolute top-0 end-0 mt-n80 me-n80 img-fluid" src="zospace-assets/lines/circle.svg" alt=""/><img class="d-none d-md-block position-absolute top-0 end-0 mt-xl-40 mw-xs mw-lg-none img-fluid" src="zospace-assets/images/five-stars.svg" alt=""/><img class="position-absolute top-0 start-0 col-6 col-md-4 col-lg-2 img-fluid" src="zospace-assets/images/blue-double-circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 col-6 col-md-4 col-lg-3 img-fluid" src="zospace-assets/lines/half-double-circle.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-lg mw-md-xl mw-xl-5xl mx-auto">
      <div class="mw-xl"><a class="d-inline-block mb-6" href="#"><img class="img-fluid" src="zospace-assets/logos/zospace-logo.svg" alt=""/></a>
        <h2 class="h3 text-white mb-14" >Sorry, we can&apos;t find that page or something has gone wrong...</h2>
        <p class="text-secondary-light mb-20" >Go back or try here:</p><a class="btn btn-primary" href="#" >Start again</a>
      </div>
    </div>
  </div>
</section>

<section class="pt-36 pt-xl-96 pb-40 bg-primary-dark position-relative">
  <div class="d-none d-md-block position-absolute top-0 start-0 ps-6 h-100 bg-white"></div>
  <div class="container">
    <div class="ms-md-6 ms-xl-0">
      <h2 class="h1 text-white mb-24"><span class="d-inline-block position-relative" >Something has
          <div class="d-none d-sm-block position-absolute bottom-0 start-0 mb-md-2 w-100 bg-white" style="height: 1px;"></div></span><span class="d-inline-block position-relative" >gone wrong
          <div class="d-none d-sm-block position-absolute bottom-0 start-0 mb-md-2 w-100 bg-white" style="height: 1px;"></div></span><span class="d-inline-block ms-n5" >.</span></h2>
      <p class="text-white mb-16"><span class="me-3" >We can&rsquo;t find that page. Back to home.</span><span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="white"></path>
          </svg></span></p><a class="btn btn-primary" href="#" >Homepage</a>
    </div>
  </div>
</section>

<section class="position-relative py-64 bg-light-light overflow-hidden" style="background-image: url('flex-assets/elements/pattern-light.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(247, 248, 249, 0) 0%, #F7F8F9 100%);"></div>
  <img class="position-absolute top-0 start-0 ms-n36 mt-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute bottom-0 end-0 me-n36 mb-n36" src="flex-assets/elements/circle-xxl-orange.svg" alt="">
  <img class="position-absolute top-0 end-0 me-6 mt-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <img class="position-absolute bottom-0 start-0 ms-6 mb-6" src="flex-assets/elements/dots-blue.svg" alt="">
  <div class="position-relative container" style="z-index:1;">
    <div class="text-center mw-md-5xl mx-auto">
      <span class="badge mb-4 bg-success-dark text-success shadow">Error 404</span>
      <h2 class="font-heading mb-4 fs-5" style="letter-spacing: -1px;">Page not found</h2>
      <p class="mb-12 fs-9 text-secondary">Something went wrong, so this page is broken.</p>
      <div class="row justify-content-center g-4 g-md-6">
        <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success w-100 text-success-light shadow" href="#">Go back to Homepage</a></div>
        <div class="col-12 col-md-auto">
          <div class="bg-white rounded"><a class="btn btn-lg btn-outline-light w-100 text-light-dark shadow" href="#">Try Again</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-light-light pb-20">
  <div class="py-10 bg-light">
    <div class="container"><a class="d-inline-block h6" href="#"  ><img class="img-fluid" src="yofte-assets/logos/yofte-logo.svg" alt=""/></a></div>
  </div>
  <div class="position-relative py-20 py-md-32 bg-light-light" style="background-image: url('yofte-assets/elements/lines-color2.svg'); background-size: contain; background-repeat: no-repeat;" alt="" >
    <div class="container">
      <div class="mw-md">
        <h2 class="mb-8 bg-light-light" >Sorry, we can&rsquo;t find that page or something has gone wrong</h2>
        <p class="mb-8 mb-md-16 lead" >Checkout for any URL misspelling.</p><a class="btn btn-primary" href="#" >Homepage</a>
      </div>
    </div>
  </div>
</section>

<section class="bg-white vh-100 d-flex align-items-center position-relative">
  <div class="container">
    <div class="mw-sm mw-md-xl mx-auto position-relative" style="z-index: 3;">
      <h3 class="mb-12 text-primary display-5 lh-sm font-heading" >Error 404</h3>
      <h4 class="mb-12 display-5 lh-sm font-heading" >Sorry, we can&apos;t find that page or something has gone wrong...</h4><a class="btn btn-dark d-block d-md-inline-block" href="#" >Go back to Homapage</a>
    </div><img class="position-absolute top-0 start-0 end-0 bottom-0 w-100 h-100" style="object-fit: contain;" src="pstls-assets/images/http-codes/404.png" alt="" /><img class="position-absolute top-0 start-0 end-0 bottom-0 w-100 h-100" src="pstls-assets/images/http-codes/http-codes-shadow.png" alt="" style="z-index: 2;"/>
  </div>
</section>

<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/error1.png" alt="">
      </div>
    </div>
    <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>
</section>

<section class="position-relative py-20 py-lg-0">
  <div class="d-none d-lg-flex justify-content-center align-items-center position-absolute top-0 start-0 h-100 col-lg-6 bg-light-light"><img class="img-fluid" style="object-fit: contain; max-height: 380px;" src="cronos-assets/images/example-scene2.png" alt=""/></div>
  <div class="py-6 d-lg-none"><img class="img-fluid d-block mx-auto d-lg-none" style="object-fit: contain; max-height: 360px;" src="cronos-assets/images/example-scene2.png" alt=""/></div>
  <div class="container">
    <div class="row">
      <div class="position-relative col-12 col-lg-6 ms-auto text-center pt-32 pb-40 py-lg-64"><img class="position-absolute bottom-0 start-0" style="height: 80px;" src="cronos-assets/elements/light-green-left.svg" alt=""/><img class="position-absolute top-0 start-0" style="height: 80px;" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="position-absolute top-0 end-0" style="height: 80px;" src="cronos-assets/elements/light-green-small.svg" alt=""/><img class="position-absolute bottom-0 end-0" style="height: 80px;" src="cronos-assets/elements/light-green-right.svg" alt=""/><span class="badge bg-warning-light">Error 404</span>
        <h2 class="mt-4 mb-3">Page not found</h2>
        <p class="lead lh-lg text-muted mb-6">Sorry! We are unable to find the page you are looking for</p>
        <div><a class="btn btn-primary d-block d-sm-inline-block me-sm-4 mb-2 mb-sm-0" href="#">Go back to Homepage</a><a class="btn btn-dark d-block d-sm-inline-block" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-24">
  <div class="container">
    <div class="bg-light-light rounded-3 px-8 px-md-16 py-16 py-md-32">
      <div class="row align-items-center">
        <div class="col-12 col-lg-7 mb-10 mb-lg-0"><img class="img-fluid pe-lg-8" src="consulty-assets/http-codes/404-image.png" alt=""></div>
        <div class="col-12 col-lg-5">
          <h1 class="font-heading mb-4"><span class="d-block">Oops!</span><span>Page not found</span></h1>
          <p class="text-dark-light fs-7 mb-8 mw-md">The page you are looking for either doesn’t exist or currently not available</p><a class="btn btn-dark fs-9 d-inline-flex align-items-center" href="#"><span class="me-2">Go Back to Home</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-md-24 pb-lg-32 bg-danger-dark">
  <div class="container">
    <div class="mw-lg mx-auto text-center"><img class="img-fluid d-block mx-auto mb-24" src="vista-assets/images/http-codes/illustration.svg" alt="">
      <h4 class="font-heading mb-4">Oops. Page not found.</h4>
      <p class="fs-7 text-white text-opacity-50 mb-10">The page you are looking for was moved, removed, renamed or might have never existed!</p><a class="btn d-inline-flex align-items-center btn-danger border-2 border-white border-opacity-10" href="#"><span class="me-2">Back to home</span>
        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-20 bg-light bg-opacity-25 overflow-hidden">
  <img class="position-absolute bottom-0 end-0" src="mirga-assets/images/http-codes/404.png" alt="">
  <div class="container mw-lg mx-auto mw-lg-7xl position-relative">
    <div class="position-relative px-8 px-sm-12 py-16 bg-white rounded-5">
      <div class="row">
        <div class="col-12 col-lg-9 mb-12 mb-lg-0">
          <div class="d-flex flex-column h-100 align-items-start pe-lg-4">
            <div class="mw-xl">
              <h3 class="font-heading h4 mb-12">
                <span class="d-block">Shh*</span>
                <span class="d-inline-block position-relative">
                  <span>Something</span>
                  <div class="py-1 bg-success rounded-pill"></div>
                </span>
                <span class="d-inline-block">has wrong.</span>
              </h3>
              <p class="lead fs-5 mb-16 mb-lg-52">That page isn’t doesn’t exist or we can’t find it.</p>
              <a class="btn mt-auto btn-primary" href="#">Homepage</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-3 pt-12 pt-lg-0 position-relative">
          <div class="d-lg-none position-absolute top-0 start-0 w-100 border-top border-light"></div>
          <div class="d-none d-lg-block position-absolute top-0 start-0 h-100 ms-n4 ms-xl-n8 border-start border-light"></div>
          <img class="d-block mx-auto me-lg-0 img-fluid" src="mirga-assets/images/http-codes/face.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-lg-5 pb-5">
  <img class="d-none d-lg-block position-absolute top-0 start-0 h-100 col-lg-6" style="object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
  <img class="d-lg-none w-100 mb-5" style="object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 ms-auto text-center py-lg-5">
        <span class="text-muted">Error 404</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Page not found</h2>
        <p class="lead text-muted mb-5">Sorry! We are unable to find the page you are looking for</p>
        <div class="d-flex flex-wrap justify-content-center"><a class="btn btn-primary me-2 mb-2 mb-sm-0" href="#">Go back to Homepage</a><a class="btn btn-outline-secondary mb-2 mb-sm-0" href="#">Try Again</a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-10 bg-light-light">
  <div class="container">
    <div class="row mx-n2">
      <div class="col-12 col-lg-6 mb-4 mb-lg-0 px-2">
        <div class="py-20 px-8 px-sm-20 bg-white rounded-5">
          <div class="mw-2xl mx-auto">
            <div class="mw-md mb-32"><span class="badge mb-4 border border-dark" >Error</span>
              <h2 class="mb-6" >Error 404</h2>
              <p class="text-light-dark mb-10" >
                It is a long established fact that a reader will be distracted by the readable content
                of a page when looking at its
                layout.
              </p><a class="btn btn-outline-dark" href="#"><span class="me-2" >Back to homepage</span>
                <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a>
            </div>
            <div class="mw-xs ms-auto text-end"><span class="d-block fs-9" >2023</span>
              <p class="text-light-dark mb-0" >
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
                layout.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-5 col-lg-2 px-2"><img class="img-fluid w-100 h-100 rounded-5" src="asitrastudio-assets/http-codes/photo-sm.png" alt=""/></div>
      <div class="col-7 col-lg-4 px-2"><img class="img-fluid w-100 h-100 rounded-5" src="asitrastudio-assets/http-codes/photo-lg.png" alt=""/></div>
    </div>
  </div>
</section>

<section class="position-relative pt-12 pt-lg-24 pt-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="text-center mb-24">
      <p class="fs-3 fw-medium text-white mb-16">That page isn’t doesn’t exist or we can’t find it.</p><a class="btn btn-primary" href="#">Back to homepage</a>
    </div><img class="img-fluid w-100" src="fily-assets/categories/404.png" alt="">
  </div>
</section>