Bootstrap 5 Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bootstrap Component #3581

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0 img-fluid" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/headers/circle-double-element-dark.svg" alt=""/><img class="position-absolute top-0 end-0 mt-16 me-6 me-lg-64 img-fluid animate-spinStar" src="casper-assets/headers/blink-sm.png" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-end">
      <div class="col-12 col-lg-6 mb-14 mb-lg-0">
        <div class="mw-md mw-lg-xl mx-auto">
          <h2 class="font-heading fw-medium text-white mb-6">Sign in to your account</h2>
          <p class="display-5 lh-lg text-light-light mb-16">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          <div class="mw-md">
            <form action="">
              <div class="row mb-6">
                <div class="col-md-6 mb-4 mb-md-0"><a class="btn w-100 btn-sm btn-outline-secondary" href="#">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M15.12 5.32H17V2.14C16.0897 2.04535 15.1751 1.99862 14.26 2C11.54 2 9.67999 3.66 9.67999 6.7V9.32H6.60999V12.88H9.67999V22H13.36V12.88H16.42L16.88 9.32H13.36V7.05C13.36 6 13.64 5.32 15.12 5.32Z" fill="white"></path>
                    </svg><span class="ms-2">Login with Facebook</span></a></div>
                <div class="col-md-6"><a class="btn w-100 btn-sm btn-outline-secondary" href="#">
                    <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M14.94 5.19C15.3181 4.75428 15.6063 4.24817 15.7882 3.70074C15.9701 3.1533 16.0421 2.57533 16 2C14.8394 2.09369 13.762 2.63956 13 3.52C12.6351 3.94198 12.3586 4.43288 12.1868 4.96364C12.0151 5.49441 11.9516 6.05424 12 6.61C12.5662 6.61472 13.1258 6.4891 13.6356 6.24286C14.1454 5.99662 14.5918 5.63637 14.94 5.19ZM17.46 12.63C17.4667 11.8637 17.6686 11.1118 18.0465 10.4452C18.4244 9.77859 18.966 9.21926 19.62 8.82C19.2073 8.22524 18.6616 7.73483 18.0263 7.38767C17.391 7.04052 16.6835 6.84615 15.96 6.82C14.4 6.66 12.96 7.73 12.13 7.73C11.3 7.73 10.13 6.84 8.83003 6.86C7.98016 6.888 7.15205 7.13578 6.42648 7.57919C5.70091 8.02259 5.10264 8.64648 4.69003 9.39C2.93003 12.45 4.24003 17 6.00003 19.47C6.80003 20.68 7.80003 22.05 9.12003 22C10.44 21.95 10.87 21.18 12.4 21.18C13.93 21.18 14.4 22 15.7 21.97C17 21.94 17.92 20.73 18.76 19.52C19.3551 18.6415 19.8199 17.6816 20.14 16.67C19.3475 16.332 18.6714 15.7693 18.1951 15.0513C17.7188 14.3333 17.4633 13.4916 17.46 12.63Z" fill="white"></path>
                    </svg><span class="ms-2">Login with Apple</span></a></div>
              </div>
              <div class="d-flex align-items-center">
                <div class="w-100 border-bottom border-secondary"></div><span class="d-inline-block flex-shrink-0 mx-4 text-light-light">Or</span>
                <div class="w-100 border-bottom border-secondary"></div>
              </div>
              <div class="mb-5">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3582

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row mb-6 align-items-center">
        <div class="col-12 col-lg-6">
          <div class="mw-md">
            <h2 class="h3 font-heading fw-medium text-white mb-0">Engage your visitors</h2>
          </div>
        </div>
        <div class="col-12 col-lg-6 mt-md-n8 mt-lg-0"><img class="img-fluid d-block ms-auto" src="casper-assets/cta/robo-bubble.png" alt=""/></div>
      </div>
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0"><img class="img-fluid d-block w-100 mw-lg-md" src="casper-assets/cta/robot-image.png" alt=""/></div>
        <div class="col-12 col-lg-6">
          <div class="mw-lg ms-lg-auto">
            <h5 class="lh-lg text-white fw-medium mb-8">Unlock the true potential of your website</h5>
            <p class="display-5 lh-lg text-light-light mb-8">Casper provide instant support, and boost conversions like never before. Join thousands of satisfied customers who have already elevated their online presence with our AI chat assistant.</p><a class="btn btn-primary text-black" href="#"><span class="me-2">CONTACT US</span>
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.44 13C19.22 13 18.99 12.93 18.77 12.88C18.3245 12.7818 17.8866 12.6515 17.46 12.49C16.9961 12.3212 16.4861 12.33 16.0283 12.5146C15.5704 12.6992 15.1971 13.0466 14.98 13.49L14.76 13.94C13.786 13.3982 12.891 12.7252 12.1 11.94C11.3147 11.149 10.6418 10.254 10.1 9.28L10.52 9.00001C10.9633 8.78292 11.3108 8.40954 11.4954 7.9517C11.68 7.49386 11.6888 6.98392 11.52 6.52001C11.3612 6.09243 11.2309 5.6548 11.13 5.21001C11.08 4.99001 11.04 4.76001 11.01 4.53001C10.8885 3.82563 10.5196 3.18775 9.9696 2.73124C9.4196 2.27474 8.72467 2.02961 8.00998 2.04001H5.00998C4.57901 2.03596 4.15223 2.12482 3.75869 2.30054C3.36515 2.47625 3.01409 2.7347 2.72941 3.05829C2.44473 3.38187 2.23311 3.763 2.10897 4.17572C1.98482 4.58844 1.95106 5.02306 2.00998 5.45001C2.54272 9.63939 4.45601 13.5319 7.44763 16.5126C10.4393 19.4934 14.3387 21.3925 18.53 21.91H18.91C19.6474 21.9111 20.3594 21.6405 20.91 21.15C21.2263 20.867 21.4791 20.5202 21.6514 20.1323C21.8238 19.7445 21.9119 19.3244 21.91 18.9V15.9C21.8977 15.2054 21.6448 14.5366 21.1943 14.0077C20.7439 13.4788 20.1238 13.1226 19.44 13ZM19.94 19C19.9398 19.142 19.9094 19.2823 19.8508 19.4116C19.7921 19.5409 19.7066 19.6563 19.6 19.75C19.4882 19.8465 19.3576 19.9185 19.2164 19.9616C19.0752 20.0047 18.9265 20.0177 18.78 20C15.0349 19.5198 11.5562 17.8065 8.89269 15.1303C6.22917 12.4541 4.53239 8.96734 4.06998 5.22001C4.05406 5.07352 4.06801 4.92534 4.11098 4.7844C4.15395 4.64346 4.22505 4.51269 4.31998 4.40001C4.41369 4.29334 4.52904 4.20785 4.65836 4.14922C4.78767 4.0906 4.92799 4.06019 5.06998 4.06001H8.06998C8.30253 4.05483 8.5296 4.13088 8.71212 4.27508C8.89464 4.41927 9.02119 4.62258 9.06998 4.85001C9.10998 5.12334 9.15998 5.39334 9.21998 5.66001C9.3355 6.18715 9.48924 6.70518 9.67998 7.21001L8.27998 7.86001C8.16028 7.91493 8.0526 7.99295 7.96314 8.0896C7.87367 8.18625 7.80418 8.29962 7.75865 8.4232C7.71312 8.54678 7.69245 8.67814 7.69783 8.80973C7.7032 8.94132 7.73452 9.07055 7.78998 9.19C9.22918 12.2728 11.7072 14.7508 14.79 16.19C15.0334 16.29 15.3065 16.29 15.55 16.19C15.6747 16.1454 15.7893 16.0765 15.8871 15.9872C15.985 15.8979 16.0641 15.7901 16.12 15.67L16.74 14.27C17.2569 14.4549 17.7846 14.6085 18.32 14.73C18.5866 14.79 18.8566 14.84 19.13 14.88C19.3574 14.9288 19.5607 15.0553 19.7049 15.2379C19.8491 15.4204 19.9252 15.6475 19.92 15.88L19.94 19ZM21.86 2.68001C21.7585 2.43566 21.5643 2.24148 21.32 2.14001C21.1998 2.08876 21.0707 2.06159 20.94 2.06001H16.94C16.6748 2.06001 16.4204 2.16536 16.2329 2.3529C16.0453 2.54043 15.94 2.79479 15.94 3.06001C15.94 3.32522 16.0453 3.57958 16.2329 3.76711C16.4204 3.95465 16.6748 4.06001 16.94 4.06001H18.52L15.23 7.36001C15.0437 7.54737 14.9392 7.80082 14.9392 8.065C14.9392 8.32919 15.0437 8.58264 15.23 8.77001C15.4173 8.95626 15.6708 9.0608 15.935 9.0608C16.1992 9.0608 16.4526 8.95626 16.64 8.77001L19.94 5.48001V7.06001C19.94 7.32522 20.0453 7.57958 20.2329 7.76711C20.4204 7.95465 20.6748 8.06001 20.94 8.06001C21.2052 8.06001 21.4595 7.95465 21.6471 7.76711C21.8346 7.57958 21.94 7.32522 21.94 7.06001V3.06001C21.9384 2.92933 21.9112 2.80023 21.86 2.68001Z" fill="currentColor"></path>
              </svg></a>
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3583

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="row">
      <div class="col-md-6 mb-10 mb-md-0">
        <div class="mw-lg">
          <h2 class="font-heading fw-medium text-white mb-6">Casper is an awesome UI Library</h2>
          <p class="h4 fw-normal text-light-light mb-6">Arcu ultrices sit non magna enim id semper quam venenatis. Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="h4 fw-normal text-light-light mb-0">Augue justo at convallis vitae nunc maecenas est. Viverra duis feugiat posuere vitae tincidunt.</p>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <p class="display-4 text-white fw-medium mb-9">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
          <p class="fs-6 text-white">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
          <p class="fs-6 text-white mb-12">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p><img class="img-fluid d-block w-100" src="casper-assets/content/image-lg.png" alt=""/>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3584

Bootstrap

Casper

<section class="pt-12 pt-lg-24 pb-64 pb-lg-40 pb-xl-32 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n32 mt-n64" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="position-relative mw-xl mx-auto mw-lg-none pt-12 pt-md-16 pb-72 pt-lg-32 pb-lg-28 pb-xl-40 px-8 px-md-20 px-xl-32 bg-opacity-10 rounded"><img class="position-absolute top-0 start-0 w-100 h-100 rounded" src="casper-assets/newsletter/bg-gradient.png" alt=""/>
      <div class="row position-relative">
        <div class="col-lg-7 col-xl-6 mb-10 mb-lg-0">
          <div class="mw-sm mw-lg-none mx-auto">
            <h3 class="font-heading fw-medium mb-4">Get Benefit with Casper App</h3>
            <p class="mw-lg fs-6 mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
            <div class="d-flex"><a class="d-inline-block me-3" href="#"><img class="img-fluid" style="max-height: 48px;" src="casper-assets/download/button1.png" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" style="max-height: 48px;" src="casper-assets/download/button2.png" alt=""/></a></div>
          </div>
        </div>
        <div class="col-lg-5 col-xl-6 position-relative"><img class="position-absolute top-0 start-0 mt-lg-n28 ms-md-10 ms-lg-0 ms-xl-16 mw-xs mw-lg-none" src="casper-assets/download/phone.png" alt=""/></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3585

Bootstrap

Casper

<section class="py-12 pb-md-32 pt-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0 w-100" src="casper-assets/pricing/triangle-bottom.png" alt=""/><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/blur-left-center-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-2xl mx-auto mb-20 text-center"><span class="badge text-uppercase mb-6" style="background: linear-gradient(158deg, #826FFF 1.14%, #511CFF 51.87%, #00D1FF 104.76%);">Pricing Plan</span>
      <h2 class="font-heading fw-medium text-white mb-4">Choose Your Plan</h2>
      <p class="mw-md mx-auto fs-6 text-light-light mb-8">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="mw-sm mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="rounded overflow-hidden"><img class="img-fluid d-block w-100" src="casper-assets/pricing/pricing-top-1.png" alt=""/>
            <div class="p-10 bg-white bg-opacity-10" style="backdrop-filter: blur(10px);"><span class="d-block mb-10 display-2 fw-semibold text-white">$50</span>
              <h5 class="d-block mb-1 display-4 fw-medium text-white">Beginner</h5>
              <p class="small mb-8 text-white">Simply dummy text of the printing and typesetting industry.</p>
              <h6 class="mb-5 fw-medium text-white">What&rsquo;s included:</h6>
              <ul class="list-unstyled mb-8 text-white">
                <li class="mb-4"><span class="d-inline-block flex-shrink-0">
                    <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path>
                      <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path>
                    </svg></span><span class="ms-1">Unlimited Upload Files</span></li>
                <li class="mb-4"><span class="d-inline-block flex-shrink-0">
                    <svg width="18" height="18" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="#25CA8E"></path>
                      <path d="M14.4732 6.80667C14.4112 6.74418 14.3375 6.69458 14.2563 6.66074C14.175 6.62689 14.0879 6.60947 13.9999 6.60947C13.9119 6.60947 13.8247 6.62689 13.7435 6.66074C13.6623 6.69458 13.5885 6.74418 13.5266 6.80667L8.55989 11.78L6.47322 9.68667C6.40887 9.62451 6.33291 9.57563 6.24967 9.54283C6.16644 9.51003 6.07755 9.49394 5.9881 9.49549C5.89865 9.49703 5.81037 9.51619 5.72832 9.55185C5.64627 9.58751 5.57204 9.63898 5.50989 9.70333C5.44773 9.76768 5.39885 9.84364 5.36605 9.92688C5.33324 10.0101 5.31716 10.099 5.31871 10.1885C5.32025 10.2779 5.3394 10.3662 5.37507 10.4482C5.41073 10.5303 5.4622 10.6045 5.52655 10.6667L8.08655 13.2267C8.14853 13.2892 8.22226 13.3387 8.3035 13.3726C8.38474 13.4064 8.47188 13.4239 8.55989 13.4239C8.64789 13.4239 8.73503 13.4064 8.81627 13.3726C8.89751 13.3387 8.97124 13.2892 9.03322 13.2267L14.4732 7.78667C14.5409 7.72424 14.5949 7.64847 14.6318 7.56414C14.6688 7.4798 14.6878 7.38873 14.6878 7.29667C14.6878 7.2046 14.6688 7.11353 14.6318 7.02919C14.5949 6.94486 14.5409 6.86909 14.4732 6.80667Z" fill="black"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3586

Bootstrap

Casper

<section class="bg-dark-light position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="row align-items-center overflow-hidden">
      <div class="col-12 col-lg-5 mb-14 mb-lg-0 py-12 py-lg-24 position-relative"><img class="img-fluid d-block mb-8 animate-spinStar" src="casper-assets/testimonials/blink-star.png" alt=""/>
        <div class="mw-lg mx-auto mx-lg-0">
          <h2 class="mw-md h3 font-heading fw-medium text-white mb-8">Trusted by more than 100k people</h2>
          <p class="display-5 lh-lg text-light-light mb-0">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="position-relative mw-sm mw-sm-2xl mx-auto me-lg-0 mw-lg-none overflow-hidden">
          <div class="position-absolute top-0 start-0 w-100 py-28" style="z-index: 1; background: linear-gradient(180deg, #16192B 0%, rgba(22, 25, 43, 0.00) 100%);"></div>
          <div class="row">
            <div class="col-12 col-sm-6 mt-n8">
              <div class="position-relative p-6 mb-6"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/blur/box-blur-dark.png" alt=""/>
                <div class="position-relative">
                  <div class="mb-6 pb-6 border-bottom border-secondary">
                    <p class="text-white mb-6">Casper has become an invaluable asset to our website. The AI chat assistant not only engages visitors but also collects valuable data and insights.</p>
                    <svg width="132" height="20" viewbox="0 0 132 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.227 0.796478L13.2574 5.09148C13.4564 5.51312 13.8405 5.8055 14.2859 5.87316L18.8282 6.56543C19.9504 6.73699 20.397 8.17711 19.5848 9.00228L16.3002 12.344C15.9774 12.6727 15.8305 13.1451 15.9068 13.609L16.682 18.3268C16.8729 19.4939 15.6997 20.3843 14.6967 19.8322L10.6369 17.6032C10.2389 17.3845 9.76225 17.3845 9.3631 17.6032L5.30334 19.8322C4.30026 20.3843 3.1271 19.4939 3.31916 18.3268L4.09316 13.609C4.16952 13.1451 4.02259 12.6727 3.6998 12.344L0.4152 9.00228C-0.396983 8.17711 0.0496019 6.73699 1.17185 6.56543L5.71406 5.87316C6.15949 5.8055 6.54475 5.51312 6.74375 5.09148L8.77305 0.796478C9.27517 -0.265493 10.7248 -0.265493 11.227 0.796478Z" fill="#FFD33C"></path>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M39.227 0.796478L41.2574 5.09148C41.4564 5.51312 41.8405 5.8055 42.2859 5.87316L46.8282 6.56543C47.9504 6.73699 48.397 8.17711 47.5848 9.00228L44.3002 12.344C43.9774 12.6727 43.8305 13.1451 43.9068 13.609L44.682 18.3268C44.8729 19.4939 43.6997 20.3843 42.6967 19.8322L38.6369 17.6032C38.2389 17.3845 37.7622 17.3845 37.3631 17.6032L33.3033 19.8322C32.3003 20.3843 31.1271 19.4939 31.3192 18.3268L32.0932 13.609C32.1695 13.1451 32.0226 12.6727 31.6998 12.344L28.4152 9.00228C27.603 8.17711 28.0496 6.73699 29.1718 6.56543L33.7141 5.87316C34.1595 5.8055 34.5448 5.51312 34.7437 5.09148L36.773 0.796478C37.2752 -0.265493 38.7248 -0.265493 39.227 0.796478Z" fill="#FFD33C"></path>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M67.227 0.796478L69.2574 5.09148C69.4564 5.51312 69.8405 5.8055 70.2859 5.87316L74.8282 6.56543C75.9504 6.73699 76.397 8.17711 75.5848 9.00228L72.3002 12.344C71.9774 12.6727 71.8305 13.1451 71.9068 13.609L72.682 18.3268C72.8729 19.4939 71.6997 20.3843 70.6967 19.8322L66.6369 17.6032C66.2389 17.3845 65.7622 17.3845 65.3631 17.6032L61.3033 19.8322C60.3003 20.3843 59.1271 19.4939 59.3192 18.3268L60.0932 13.609C60.1695 13.1451 60.0226 12.6727 59.6998 12.344L56.4152 9.00228C55.603 8.17711 56.0496 6.73699 57.1718 6.56543L61.7141 5.87316C62.1595 5.8055 62.5448 5.51312 62.7437 5.09148L64.773 0.796478C65.2752 -0.265493 66.7248 -0.265493 67.227 0.796478Z" fill="#FFD33C"></path>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M95.227 0.796478L97.2574 5.09148C97.4564 5.51312 97.8405 5.8055 98.2859 5.87316L102.828 6.56543C103.95 6.73699 104.397 8.17711 103.585 9.00228L100.3 12.344C99.9774 12.6727 99.8305 13.1451 99.9068 13.609L100.682 18.3268C100.873 19.4939 99.6997 20.3843 98.6967 19.8322L94.6369 17.6032C94.2389 17.3845 93.7622 17.3845 93.3631 17.6032L89.3033 19.8322C88.3003 20.3843 87.1271 19.4939 87.3192 18.3268L88.0932 13.609C88.1695 13.1451 88.0226 12.6727 87.6998 12.344L84.4152 9.00228C83.603 8.17711 84.0496 6.73699 85.1718 6.56543L89.7141 5.87316C90.1595 5.8055 90.5448 5.51312 90.7437 5.09148L92.773 0.796478C93.2752 -0.265493 94.7248 -0.265493 95.227 0.796478Z" fill="#FFD33C"></path>
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M123.227 0.796478L125.257 5.09148C125.456 5.51312 125.841 5.8055 126.286 5.87316L130.828 6.56543C131.95 6.73699 132.397 8.17711 131.585 9.00228L128.3 12.344C127.977 12.6727 127.83 13.1451 127.907 13.609L128.682 18.3268C128.873 19.4939 127.7 20.3843 126.697 19.8322L122.637 17.6032C122.239 17.3845 121.762 17.3845 121.363 17.6032L117.303 19.8322C116.3 20.3843 115.127 19.4939 115.319 18.3268L116.093 13.609C116.17 13.1451 116.023 12.6727 115.7 12.344L112.415 9.00228C111.603 8.17711 112.05 6.73699 113.172 6.56543L117.714 5.87316C118.159 5.8055 118.545 5.51312 118.744 5.09148L120.773 0.796478C121.275 -0.265493 122.725 -0.265493 123.227 0.796478Z" fill="#FFD33C"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3587

Bootstrap

Casper

<section>
  <div class="position-fixed bottom-0 end-0 p-6 p-md-10" style="z-index: 50;">
    <div class="mw-lg p-12 bg-primary-dark position-relative overflow-hidden rounded-1"><span class="position-absolute bottom-0 end-0">
        <svg width="149" height="140" viewbox="0 0 149 140" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M170.579 75.563C170.579 75.4257 170.539 75.2898 170.506 75.1525V75.0636C170.506 74.9586 170.45 74.8469 170.417 74.7419L170.361 74.5656L170.296 74.3973C170.256 74.2924 170.207 74.1887 170.159 74.0837H170.16C169.548 72.7942 168.391 71.848 167.007 71.5021C162.328 69.8397 158.501 66.3833 156.377 61.8941L156.28 61.7097L156.224 61.5886V61.5321L156.078 61.2911L155.918 61.0906L155.781 60.9142L155.612 60.7056L155.499 60.5845L155.266 60.3516L155.163 60.2857L154.857 60.0366C153.851 59.295 152.597 58.972 151.358 59.1361L150.931 59.2169H150.835L150.497 59.3138L150.304 59.3865L150.063 59.4834H149.982L149.774 59.5884L149.677 59.6369L149.678 59.6342C146.977 61.1323 143.936 61.9103 140.848 61.8941C135.803 61.8968 130.965 59.898 127.392 56.3378C123.819 52.7776 121.803 47.9466 121.789 42.9033C121.756 38.8734 123.041 34.9442 125.448 31.7113C125.545 31.5821 125.632 31.4543 125.713 31.317C125.794 31.1878 125.865 31.0518 125.93 30.9064C125.994 30.7691 126.051 30.6332 126.098 30.4878C126.146 30.3425 126.189 30.1985 126.227 30.0531C126.227 29.9319 126.284 29.8122 126.3 29.6829V29.586V29.2401V29.018V28.6963V28.559V28.2292V28.1C126.3 27.995 126.3 27.8833 126.235 27.7783V27.641L126.212 27.322L126.164 27.1538L126.067 26.9128L125.986 26.7204L125.889 26.5279L125.768 26.295L125.655 26.1268L125.51 25.9101L125.364 25.7257L125.212 25.5332L125.011 25.3246L124.844 25.2317C120.853 21.6205 118.582 16.4866 118.596 11.1039V10.4928V10.05V9.99478C118.596 9.84941 118.575 9.70808 118.532 9.56809V9.56943C118.197 7.92462 117.029 6.57186 115.451 5.99855C96.1822 -1.08808 75.0002 -0.983326 55.7999 6.29333C36.602 13.5712 20.6734 27.5336 10.9475 45.6133L10.8828 45.7345C4.227 58.1166 0.74813 71.9577 0.758814 86.0159C0.853054 104.308 6.78463 122.093 17.691 136.779C28.5974 151.465 43.907 162.289 61.3923 167.672C61.5714 167.736 61.7531 167.79 61.9389 167.833C69.762 170.078 77.8599 171.225 85.9994 171.241C91.359 171.252 96.7076 170.749 101.97 169.738C102.144 169.714 102.315 169.679 102.485 169.634C121.855 165.808 139.296 155.38 151.835 140.131C164.374 124.882 171.233 105.756 171.242 86.0146C171.246 82.5202 171.022 79.0289 170.575 75.5628L170.579 75.563ZM43.1318 23.752C47.3617 27.6998 49.1618 33.6035 47.8573 39.2391C46.5514 44.8747 42.3374 49.3866 36.8031 51.0747C31.2684 52.7626 25.2546 51.3695 21.0248 47.4215C26.6049 38.0331 34.1451 29.9582 43.1318 23.752ZM97.9067 160.66C87.5417 162.278 76.9559 161.776 66.7929 159.181C66.5183 158.006 66.381 156.803 66.3823 155.595C66.3823 149.812 69.468 144.468 74.4788 141.575C79.4882 138.684 85.6609 138.684 90.6703 141.575C95.6798 144.468 98.7668 149.811 98.7668 155.595C98.7533 157.32 98.464 159.031 97.9067 160.66ZM108.257 158.248H108.255C108.352 157.352 108.401 156.45 108.401 155.547C108.401 146.319 103.476 137.79 95.482 133.175C87.4866 128.56 77.6372 128.56 69.6428 133.175C61.6487 137.79 56.724 146.319 56.724 155.547V155.725C44.4242 150.553 33.7119 142.223 25.6706 131.577C17.6306 120.931 12.5485 108.349 10.941 95.1068C9.33357 81.8646 11.2561 68.4315 16.5147 56.1727C23.3701 61.2177 32.2689 62.5637 40.3088 59.7719C48.3487 56.9802 54.4986 50.4089 56.7509 42.2024C59.0019 33.9973 57.0673 25.2077 51.5771 18.7052C69.3936 9.7206 90.0156 8.04077 109.054 14.0265C109.631 19.6703 111.87 25.0179 115.486 29.3913C113.266 33.5342 112.114 38.166 112.133 42.8661C112.138 50.4765 115.166 57.7733 120.551 63.1519C125.936 68.5304 133.238 71.5496 140.85 71.5455C143.951 71.5576 147.033 71.0582 149.97 70.0662C152.847 74.1798 156.758 77.464 161.308 79.5852C161.501 81.716 161.598 83.8711 161.598 86.0178C161.587 102.174 156.404 117.904 146.807 130.903C137.211 143.903 123.704 153.489 108.265 158.259L108.257 158.248ZM86.0043 61.8969C80.4024 61.8969 75.0293 64.1219 71.0672 68.0818C67.1052 72.0431 64.8798 77.4151 64.8784 83.0159C64.8784 88.6167 67.1024 93.9901 71.0631 97.9514C75.0238 101.913 80.3968 104.139 85.9987 104.14C91.6006 104.142 96.9751 101.918 100.937 97.9583C104.901 93.9997 107.127 88.6277 107.13 83.0269C107.123 77.4261 104.897 72.0569 100.936 68.0956C96.9751 64.1343 91.6062 61.9052 86.0043 61.8973V61.8969ZM86.0043 94.5083C82.959 94.5083 80.0377 93.2983 77.8837 91.1447C75.731 88.9924 74.5207 86.0714 74.5207 83.0267C74.5207 79.982 75.731 77.0613 77.8837 74.9077C80.0377 72.7554 82.9593 71.5454 86.0043 71.5454C89.0492 71.5454 91.9708 72.7554 94.1248 74.9077C96.2775 77.0613 97.4878 79.9823 97.4878 83.0267C97.4798 86.0673 96.2668 88.9814 94.1141 91.1298C91.9613 93.2794 89.0453 94.4881 86.0042 94.4922L86.0043 94.5083ZM82.788 43.9447C80.9826 42.1329 79.9702 39.6791 79.9729 37.123C79.9756 34.5656 80.9934 32.1146 82.8028 30.3069C84.6122 28.5005 87.065 27.4857 89.623 27.4857C92.181 27.4857 94.6339 28.5005 96.4433 30.3069C98.2527 32.1146 99.2704 34.5656 99.2731 37.123C99.2758 39.6791 98.2634 42.1329 96.458 43.9447C94.6459 45.7591 92.1851 46.7767 89.6202 46.774C87.0542 46.7713 84.5959 45.747 82.7879 43.9285L82.788 43.9447ZM46.8171 93.9225C48.6225 95.7329 49.6349 98.1867 49.6322 100.744C49.6282 103.3 48.6104 105.753 46.801 107.559C44.9916 109.365 42.5388 110.382 39.9822 110.382C37.4242 110.382 34.9713 109.365 33.1619 107.559C31.3525 105.753 30.3347 103.3 30.3321 100.744C30.328 98.1868 31.3404 95.733 33.1458 93.9225C34.9565 92.1054 37.4163 91.0851 39.9822 91.0851C42.5469 91.0851 45.0064 92.1054 46.8171 93.9225ZM133.451 105.315C135.257 107.127 136.269 109.579 136.265 112.137C136.262 114.694 135.244 117.145 133.435 118.951C131.626 120.759 129.173 121.774 126.615 121.774C124.058 121.774 121.605 120.759 119.796 118.951C117.987 117.145 116.969 114.694 116.965 112.137C116.962 109.579 117.974 107.127 119.78 105.315C121.591 103.498 124.05 102.478 126.615 102.478C129.181 102.478 131.64 103.498 133.451 105.315Z" fill="#7209DC"></path>
        </svg></span>
      <button class="btn border-0 p-0 position-absolute top-0 end-0 m-4">
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.4099 12L19.7099 5.71C19.8982 5.5217 20.004 5.2663 20.004 5C20.004 4.7337 19.8982 4.47831 19.7099 4.29C19.5216 4.1017 19.2662 3.99591 18.9999 3.99591C18.7336 3.99591 18.4782 4.1017 18.2899 4.29L11.9999 10.59L5.70994 4.29C5.52164 4.1017 5.26624 3.99591 4.99994 3.99591C4.73364 3.99591 4.47824 4.1017 4.28994 4.29C4.10164 4.47831 3.99585 4.7337 3.99585 5C3.99585 5.2663 4.10164 5.5217 4.28994 5.71L10.5899 12L4.28994 18.29C4.19621 18.383 4.12182 18.4936 4.07105 18.6154C4.02028 18.7373 3.99414 18.868 3.99414 19C3.99414 19.132 4.02028 19.2627 4.07105 19.3846C4.12182 19.5064 4.19621 19.617 4.28994 19.71C4.3829 19.8037 4.4935 19.8781 4.61536 19.9289C4.73722 19.9797 4.86793 20.0058 4.99994 20.0058C5.13195 20.0058 5.26266 19.9797 5.38452 19.9289C5.50638 19.8781 5.61698 19.8037 5.70994 19.71L11.9999 13.41L18.2899 19.71C18.3829 19.8037 18.4935 19.8781 18.6154 19.9289C18.7372 19.9797 18.8679 20.0058 18.9999 20.0058C19.132 20.0058 19.2627 19.9797 19.3845 19.9289C19.5064 19.8781 19.617 19.8037 19.7099 19.71C19.8037 19.617 19.8781 19.5064 19.9288 19.3846C19.9796 19.2627 20.0057 19.132 20.0057 19C20.0057 18.868 19.9796 18.7373 19.9288 18.6154C19.8781 18.4936 19.8037 18.383 19.7099 18.29L13.4099 12Z" fill="#80818C"></path>
        </svg>
      </button>
      <div class="position-relative">
        <h6 class="display-4 fw-medium text-white mb-4">Cookies on this site</h6>
        <p class="text-white mb-8">By clicking &quot;Accept all cookies&quot; you consent to cookies being stored on your device to improve website.</p>
        <div class="d-flex flex-column flex-sm-row gap-4 align-items-start align-items-sm-center"><a class="btn btn-sm btn-outline-light" href="#">Decline</a><a class="btn btn-sm btn-light" href="#">Accept all cookies</a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3588

Bootstrap

Casper

<section class="pt-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/><img class="position-absolute top-0 start-0 ms-n32" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 me-md-n14 me-lg-n10" src="casper-assets/faq/shield-robot.png" alt=""/><img class="d-none d-lg-block position-absolute top-50 start-0 translate-middle-y ms-n20" src="casper-assets/faq/robot-ball.png" alt=""/>
    <div class="position-relative mw-xl mx-auto mw-xl-none">
      <div class="text-center mb-8 mb-md-16">
        <h2 class="font-heading fw-medium text-white mb-8">Frequently Ask Questions</h2>
        <p class="fs-6 text-light-light">Nunc et tellus non erat accumsan aliquam eget non mi.</p>
      </div><img class="d-block d-md-none img-fluid ms-auto mb-4" style="width: 164px;" src="casper-assets/faq/shield-robot.png" alt=""/>
      <div class="mw-3xl mx-auto">
        <button class="btn mb-6 btn-primary border-0 p-8 w-100 d-block p-0 bg-white text-start fw-normal bg-opacity-10 rounded">
          <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-primary fw-medium">Do you provide a complete design style?</span>
            <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g filter="url(#filter0_d_159_5367)">
                <path d="M23.8333 17.1666H12.1667C11.9457 17.1666 11.7337 17.2544 11.5774 17.4107C11.4211 17.567 11.3333 17.7789 11.3333 18C11.3333 18.221 11.4211 18.4329 11.5774 18.5892C11.7337 18.7455 11.9457 18.8333 12.1667 18.8333H23.8333C24.0544 18.8333 24.2663 18.7455 24.4226 18.5892C24.5789 18.4329 24.6667 18.221 24.6667 18C24.6667 17.7789 24.5789 17.567 24.4226 17.4107C24.2663 17.2544 24.0544 17.1666 23.8333 17.1666Z" fill="#B680ED"></path>
              </g>
            </svg>
          </div>
          <div class="mt-5 mw-xl">
            <p class="fs-6 text-light-light mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>
          </div>
        </button>
        <button class="btn mb-6 btn-primary border-0 p-8 w-100 d-block p-0 bg-white text-start fw-normal bg-opacity-10 rounded">
          <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-white fw-medium">Do you provide a complete design style?</span>
            <svg width="36" height="36" viewbox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g filter="url(#filter0_d_159_5373)">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3589

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n40 mt-n40" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="text-center mb-20"><span class="d-block text-info mb-4">CONTACT US</span>
      <h2 class="font-heading fw-medium text-white mb-4">Let&rsquo;s stay connected</h2>
      <p class="display-5 text-light-light">We&rsquo;re 24/7 ready to help you at anytime</p>
    </div>
    <div class="mw-md mw-md-none mx-auto">
      <div class="row align-items-center">
        <div class="col-md-5 col-lg-6 mb-12 mb-md-0"><img class="img-fluid d-block mw-lg w-100" src="casper-assets/contact/image-robot.png" alt=""/></div>
        <div class="col-md-7 col-lg-6">
          <div class="mw-sm mx-md-auto">
            <div class="d-flex flex-column flex-sm-row mb-12 align-items-sm-center">
              <div class="flex-shrink-0 d-inline-flex align-items-center justify-content-center bg-primary rounded-pill" style="width: 80px; height: 80px;">
                <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M25.92 17.3333C25.6267 17.3333 25.32 17.24 25.0267 17.1733C24.4327 17.0424 23.8489 16.8686 23.28 16.6533C22.6615 16.4283 21.9815 16.44 21.3711 16.6861C20.7606 16.9323 20.2628 17.3955 19.9733 17.9867L19.68 18.5867C18.3813 17.8642 17.188 16.967 16.1333 15.92C15.0864 14.8654 14.1891 13.672 13.4667 12.3733L14.0267 12C14.6178 11.7106 15.0811 11.2127 15.3272 10.6023C15.5734 9.9918 15.585 9.31188 15.36 8.69333C15.1483 8.12323 14.9746 7.53973 14.84 6.94667C14.7733 6.65333 14.72 6.34667 14.68 6.04C14.5181 5.10083 14.0262 4.25032 13.2928 3.64165C12.5595 3.03298 11.6329 2.70615 10.68 2.72H6.68001C6.10539 2.71461 5.53635 2.83309 5.01163 3.06737C4.4869 3.30166 4.01883 3.64626 3.63925 4.07771C3.25968 4.50916 2.97753 5.01733 2.812 5.56762C2.64647 6.11791 2.60145 6.69741 2.68001 7.26667C3.39033 12.8525 5.94138 18.0425 9.93022 22.0168C13.919 25.9912 19.1183 28.5233 24.7067 29.2133H25.2133C26.1966 29.2148 27.1459 28.854 27.88 28.2C28.3018 27.8227 28.6388 27.3602 28.8686 26.8431C29.0985 26.3259 29.216 25.7659 29.2133 25.2V21.2C29.197 20.2738 28.8598 19.3821 28.2591 18.6769C27.6585 17.9717 26.8318 17.4968 25.92 17.3333ZM26.5867 25.3333C26.5864 25.5226 26.5459 25.7097 26.4677 25.8822C26.3896 26.0546 26.2756 26.2084 26.1333 26.3333C25.9872 26.4665 25.8133 26.5655 25.6242 26.6231C25.4351 26.6808 25.2356 26.6956 25.04 26.6667C20.0465 26.0264 15.4083 23.742 11.857 20.1737C8.30561 16.6055 6.04323 11.9565 5.42668 6.96C5.40546 6.76469 5.42406 6.56711 5.48135 6.37919C5.53864 6.19127 5.63344 6.01692 5.76001 5.86667C5.88496 5.72444 6.03876 5.61046 6.21118 5.53229C6.38361 5.45413 6.5707 5.41357 6.76001 5.41333H10.76C11.0701 5.40644 11.3728 5.50784 11.6162 5.7001C11.8596 5.89235 12.0283 6.16343 12.0933 6.46667C12.1467 6.83111 12.2133 7.19111 12.2933 7.54667C12.4474 8.24953 12.6524 8.94024 12.9067 9.61333L11.04 10.48C10.8804 10.5532 10.7368 10.6573 10.6176 10.7861C10.4983 10.915 10.4056 11.0662 10.3449 11.2309C10.2842 11.3957 10.2566 11.5708 10.2638 11.7463C10.271 11.9218 10.3127 12.0941 10.3867 12.2533C12.3056 16.3637 15.6097 19.6677 19.72 21.5867C20.0446 21.72 20.4087 21.72 20.7333 21.5867C20.8996 21.5272 21.0524 21.4353 21.1829 21.3162C21.3134 21.1972 21.4189 21.0535 21.4933 20.8933L22.32 19.0267C23.0093 19.2732 23.7128 19.478 24.4267 19.64C24.7822 19.72 25.1422 19.7867 25.5067 19.84C25.8099 19.9051 26.081 20.0738 26.2733 20.3171C26.4655 20.5605 26.5669 20.8633 26.56 21.1733L26.5867 25.3333ZM25.3333 13.3333C25.687 13.3333 26.0261 13.1929 26.2762 12.9428C26.5262 12.6928 26.6667 12.3536 26.6667 12V6.66667C26.6667 6.31305 26.5262 5.97391 26.2762 5.72386C26.0261 5.47381 25.687 5.33333 25.3333 5.33333C24.9797 5.33333 24.6406 5.47381 24.3905 5.72386C24.1405 5.97391 24 6.31305 24 6.66667V12C24 12.3536 24.1405 12.6928 24.3905 12.9428C24.6406 13.1929 24.9797 13.3333 25.3333 13.3333ZM20 13.3333C20.3536 13.3333 20.6928 13.1929 20.9428 12.9428C21.1929 12.6928 21.3333 12.3536 21.3333 12V6.66667C21.3333 6.31305 21.1929 5.97391 20.9428 5.72386C20.6928 5.47381 20.3536 5.33333 20 5.33333C19.6464 5.33333 19.3073 5.47381 19.0572 5.72386C18.8072 5.97391 18.6667 6.31305 18.6667 6.66667V12C18.6667 12.3536 18.8072 12.6928 19.0572 12.9428C19.3073 13.1929 19.6464 13.3333 20 13.3333Z" fill="black"></path>
                </svg>
              </div>
              <div class="mt-6 mt-sm-0 ms-sm-8"><span class="fs-6 text-white">Phone</span><span class="d-block display-4 text-white">+1 892 3298</span></div>
            </div>
            <div class="d-flex flex-column flex-sm-row mb-12 align-items-sm-center">
              <div class="flex-shrink-0 d-inline-flex align-items-center justify-content-center bg-warning rounded-pill" style="width: 80px; height: 80px;">
                <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.6666 15.3467H21.8933C22.0688 15.3477 22.2427 15.314 22.4052 15.2477C22.5676 15.1813 22.7154 15.0836 22.84 14.96L28.9466 8.85333C29.0716 8.72938 29.1708 8.58191 29.2385 8.41944C29.3062 8.25696 29.341 8.08268 29.341 7.90667C29.341 7.73065 29.3062 7.55638 29.2385 7.3939C29.1708 7.23142 29.0716 7.08395 28.9466 6.96L25.72 3.73333C25.596 3.60836 25.4485 3.50917 25.2861 3.44148C25.1236 3.37379 24.9493 3.33894 24.7733 3.33894C24.5973 3.33894 24.423 3.37379 24.2605 3.44148C24.098 3.50917 23.9506 3.60836 23.8266 3.73333L17.72 9.84C17.4763 10.0955 17.3382 10.4336 17.3333 10.7867V14.0133C17.3333 14.367 17.4738 14.7061 17.7238 14.9561C17.9739 15.2062 18.313 15.3467 18.6666 15.3467ZM20 11.3467L24.7733 6.57333L26.1066 7.90667L21.3333 12.68H20V11.3467ZM28 14.0133C27.6463 14.0133 27.3072 14.1538 27.0571 14.4039C26.8071 14.6539 26.6666 14.993 26.6666 15.3467V24.68C26.6666 25.0336 26.5262 25.3728 26.2761 25.6228C26.0261 25.8729 25.6869 26.0133 25.3333 26.0133H6.66663C6.313 26.0133 5.97387 25.8729 5.72382 25.6228C5.47377 25.3728 5.33329 25.0336 5.33329 24.68V11.8667L13.1733 19.72C13.5454 20.0969 13.9886 20.3962 14.4773 20.6005C14.9659 20.8047 15.4903 20.9099 16.02 20.9099C16.5496 20.9099 17.074 20.8047 17.5626 20.6005C18.0513 20.3962 18.4945 20.0969 18.8666 19.72C19.1109 19.4708 19.2478 19.1357 19.2478 18.7867C19.2478 18.4377 19.1109 18.1026 18.8666 17.8533C18.7425 17.7263 18.5942 17.6254 18.4304 17.5565C18.2667 17.4877 18.0909 17.4522 17.9133 17.4522C17.7357 17.4522 17.5599 17.4877 17.3961 17.5565C17.2324 17.6254 17.0841 17.7263 16.96 17.8533C16.7107 18.0976 16.3756 18.2345 16.0266 18.2345C15.6776 18.2345 15.3425 18.0976 15.0933 17.8533L7.21329 9.98667H13.3333C13.6869 9.98667 14.0261 9.84619 14.2761 9.59614C14.5262 9.34609 14.6666 9.00696 14.6666 8.65333C14.6666 8.29971 14.5262 7.96057 14.2761 7.71052C14.0261 7.46048 13.6869 7.32 13.3333 7.32H6.66663C5.60576 7.32 4.58834 7.74143 3.8382 8.49157C3.08805 9.24172 2.66663 10.2591 2.66663 11.32V24.6533C2.66663 25.7142 3.08805 26.7316 3.8382 27.4818C4.58834 28.2319 5.60576 28.6533 6.66663 28.6533H25.3333C26.3942 28.6533 27.4116 28.2319 28.1617 27.4818C28.9119 26.7316 29.3333 25.7142 29.3333 24.6533V15.32C29.3333 14.9664 29.1928 14.6272 28.9428 14.3772C28.6927 14.1271 28.3536 13.9867 28 13.9867V14.0133Z" fill="black"></path>
                </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3590

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-20" src="casper-assets/blur/blur-center-violet.svg" alt=""/><img class="position-absolute top-0 end-0 me-n64 mt-n64" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 mt-80 me-n12 me-xl-0 col-3 col-lg-auto" src="casper-assets/careers/robot-wrench.png" alt=""/><img class="d-none d-md-block position-absolute top-0 start-0 ms-n12 ms-xl-0 mt-52 col-3 col-lg-auto" src="casper-assets/careers/robot-stand.png" alt=""/>
    <div class="position-relative">
      <div class="mw-2xl mx-auto mb-16 text-center">
        <h2 class="font-heading fw-medium text-white mb-6">Careers at Casper</h2>
        <p class="mw-lg mx-auto fs-6 text-light-light">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
      </div>
      <div class="mw-sm mx-auto mw-lg-xl"><a class="d-block px-0 pt-0 pb-10 mb-10 btn w-100 border-0 border-bottom border-secondary text-start rounded-0 position-relative" href="#">
          <h5 class="text-white fw-medium mb-2">Product Designer</h5>
          <p class="small text-light-light mb-2">Excepteur sint occaecat cupidatat non proident.</p>
          <div class="d-flex align-items-center">
            <div>
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="#994DE6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="ms-2 text-white small">Ponorogo</span>
            </div>
            <div class="ms-8">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M12 6V12L16 14" stroke="#4DCFEC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="ms-2 text-white small">Full-time</span>
            </div>
          </div><span class="position-absolute top-0 end-0 px-2 py-1 bg-info rounded-1 text-black" style="font-size: 12px;">Design</span></a><a class="d-block px-0 pt-0 pb-10 mb-10 btn w-100 border-0 border-bottom border-secondary text-start rounded-0 position-relative" href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3591

Bootstrap

Casper

<section class="pt-12 pt-lg-24 pb-10 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n80" src="casper-assets/blur/blur-center-violet.svg" alt=""/><img class="d-none d-sm-block position-absolute top-0 start-0 mt-20 ms-5 ms-md-20 col-2 col-lg-auto img-fluid" src="casper-assets/footer/gun-bubble.png" alt=""/>
  <div class="container position-relative"><img class="img-fluid d-block mx-auto mb-20" src="casper-assets/footer/logo-c-only.svg" alt=""/>
    <div class="mw-lg mx-auto mw-lg-none">
      <ul class="list-unstyled d-flex flex-wrap flex-row justify-content-center mx-n6 mb-n3">
        <li class="px-6 mb-3"><a class="d-inline-block fs-6 text-white" href="#">Product</a></li>
        <li class="px-6 mb-3"><a class="d-inline-block fs-6 text-white" href="#">Features</a></li>
        <li class="px-6 mb-3"><a class="d-inline-block fs-6 text-white" href="#">Pricing</a></li>
        <li class="px-6 mb-3"><a class="d-inline-block fs-6 text-white" href="#">Resources</a></li>
        <li class="px-6 mb-3"><a class="d-inline-block fs-6 text-white" href="#">Careers</a></li>
        <li class="px-6 mb-3"><a class="d-inline-block fs-6 text-white" href="#">Help</a></li>
        <li class="px-6 mb-3"><a class="d-inline-block fs-6 text-white" href="#">Privacy</a></li>
      </ul>
    </div>
    <div class="mt-20">
      <div class="d-sm-flex justify-content-between align-items-center pt-10 border-2 border-top border-white border-opacity-10">
        <div class="mb-4 mb-sm-0"><span class="text-secondary">&copy; Casper. All rights reserved</span></div>
        <div><a class="d-inline-block me-12 text-white" href="#">Terms &amp; Conditions</a><a class="d-inline-block text-white" href="#">Privacy Policy</a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3592

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/portfolio/double-lines.svg" alt=""/>
  <div class="container position-relative mb-12"><img class="d-none d-sm-block position-absolute top-0 end-0 mt-lg-n12 me-md-10 me-lg-20 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
    <div class="mw-2xl mx-auto text-center">
      <h2 class="bg-gradient-blue-text fw-medium">300+</h2>
      <h2 class="font-heading fw-medium text-white mb-6">Projects Launched</h2>
      <p class="mw-xl mx-auto display-5 lh-lg text-light-light mb-0">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
    </div>
  </div>
  <div class="position-relative">
    <div class="d-sm-flex justify-content-center px-5 px-sm-0 mb-8"><img class="d-none d-sm-block img-fluid col-sm-8 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-2.png" alt=""/><img class="d-none d-sm-block img-fluid d-block col-sm-8 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-2.png" alt=""/>
      <div class="position-relative col-12 col-sm-8 col-lg-4 me-8"><img class="position-absolute top-0 start-0 img-fluid d-block h-100 w-100" src="casper-assets/portfolio/box-horizontal-md-3.png" alt=""/>
        <div class="pt-44 pt-sm-6 pb-6 px-6 h-100 d-flex align-items-end">
          <div class="d-flex w-100 align-items-center justify-content-between p-6 bg-black bg-opacity-25 rounded" style="backdrop-filter: blur(10px);">
            <div class="pe-4 pe-lg-10"><span class="h4 fw-medium text-white mb-3">coca.co.id</span>
              <p class="small mw-xs text-white mb-0">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
            <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M23.8933 8.82667C23.758 8.50087 23.4991 8.24197 23.1733 8.10667C23.013 8.03835 22.8409 8.00211 22.6667 8H9.33333C8.97971 8 8.64057 8.14048 8.39052 8.39052C8.14047 8.64057 8 8.97971 8 9.33333C8 9.68696 8.14047 10.0261 8.39052 10.2761C8.64057 10.5262 8.97971 10.6667 9.33333 10.6667H19.4533L8.38667 21.72C8.26169 21.844 8.1625 21.9914 8.09481 22.1539C8.02712 22.3164 7.99227 22.4907 7.99227 22.6667C7.99227 22.8427 8.02712 23.017 8.09481 23.1794C8.1625 23.3419 8.26169 23.4894 8.38667 23.6133C8.51062 23.7383 8.65808 23.8375 8.82056 23.9052C8.98304 23.9729 9.15732 24.0077 9.33333 24.0077C9.50935 24.0077 9.68362 23.9729 9.8461 23.9052C10.0086 23.8375 10.156 23.7383 10.28 23.6133L21.3333 12.5467V22.6667C21.3333 23.0203 21.4738 23.3594 21.7239 23.6095C21.9739 23.8595 22.313 24 22.6667 24C23.0203 24 23.3594 23.8595 23.6095 23.6095C23.8595 23.3594 24 23.0203 24 22.6667V9.33333C23.9979 9.1591 23.9617 8.98696 23.8933 8.82667Z" fill="white"></path>
            </svg>
          </div>
        </div>
      </div><img class="d-none d-sm-block img-fluid d-block col-sm-8 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-2.png" alt=""/><img class="d-none d-sm-block img-fluid d-block col-sm-8 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-3.png" alt=""/>
    </div>
    <div class="d-flex justify-content-center mb-16"><img class="d-none d-sm-block img-fluid d-block col-12 col-sm-8 col-md-6 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-3.png" alt=""/><img class="d-none d-sm-block img-fluid d-block col-12 col-sm-8 col-md-6 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-2.png" alt=""/><img class="img-fluid d-block col-12 col-sm-8 col-md-6 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-3.png" alt=""/><img class="img-fluid d-block col-12 col-sm-8 col-md-6 col-lg-4 me-8" src="casper-assets/portfolio/box-horizontal-md-2.png" alt=""/></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3593

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 end-0 me-md-n6 me-md-0 animate-spinStar" src="casper-assets/content/blink-star.png" alt=""/>
    <div class="mw-md mw-md-3xl mx-auto position-relative"><span class="d-block mb-4 text-info">BLOG CATEGORY</span>
      <h2 class="font-heading fw-medium text-white mb-10">Gorgeous UI Library</h2><img class="img-fluid d-block w-100 mb-10" src="casper-assets/content/image-lg.png" alt=""/>
      <p class="display-4 text-white fw-medium mb-10">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
      <p class="fs-6 text-white mb-6">Pellentesque ipsum nulla in eget interdum a. Neque pellentesque pulvinar mauris pulvinar diam. Turpis aliquet pellentesque velit vitae nisi sed morbi ultrices sed. Egestas interdum elit integer nec pharetra eget blandit dolor purus. A sed nisi congue morbi fermentum blandit. Turpis pretium dignissim risus ultrices purus et amet netus nibh.</p>
      <p class="fs-6 text-white mb-12">Vestibulum est ante in congue a fusce nunc. At tristique donec nisi viverra vulputate blandit orci at lectus. Morbi cras urna congue ornare. Mi magna vestibulum tortor id nec tortor non. Enim orci lorem egestas sed morbi dui mauris etiam nulla. Euismod cursus viverra ut ac eu sit quam amet tempor. Id in suspendisse nam sit vitae ullamcorper mollis et ut.</p>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3594

Bootstrap

Casper

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo-white.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-10" id="nav01">
        <div class="ms-auto"><a class="btn me-4 btn-sm text-white text-uppercase" href="#">SIGN IN</a><a class="btn btn-sm btn-primary text-black text-uppercase" href="#">SIGN UP</a></div>
      </div>
      <button class="navbar-burger btn border-0 p-0 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 16H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 8H29" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M20 24L29 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo.svg" alt=""/></a><a class="navbar-close" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="py-12">
        <ul class="nav flex-column">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3595

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 ms-n32 mt-n32" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-lg-7 col-xl-6 mb-20 mb-lg-0">
        <div>
          <div class="mw-lg mw-md-xl mb-24">
            <h3 class="font-heading fw-medium text-white mb-3">Stunning UI Library for Start Up</h3>
            <p class="mw-lg fs-6 text-light-light mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
          </div>
          <div class="mw-xs mx-auto mw-sm-none">
            <div class="row">
              <div class="col-12 col-sm-6 mb-12 mb-md-0">
                <div class="d-flex flex-column flex-sm-row pb-12 pb-sm-0 align-items-start align-items-sm-center position-relative">
                  <div class="d-none d-sm-block position-absolute top-0 end-0 h-100 bg-secondary-dark" style="width: 1px;"></div>
                  <div class="d-block d-sm-none position-absolute bottom-0 start-0 w-100 bg-secondary-dark" style="height: 1px;"></div><img class="flex-shrink-0 img-fluid" src="casper-assets/stats/avatar-3.png" alt=""/>
                  <div class="mt-6 mt-sm-0 ms-sm-8"><span class="h4 fw-medium text-white mb-2">99%</span><span class="d-block fs-6 text-light-light">Successful</span></div>
                </div>
              </div>
              <div class="col-12 col-sm-6">
                <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-sm-center position-relative"><img class="flex-shrink-0 img-fluid" src="casper-assets/stats/avatar-2.png" alt=""/>
                  <div class="mt-6 mt-sm-0 ms-sm-8"><span class="h4 fw-medium text-white mb-2">300+</span><span class="d-block fs-6 text-light-light">Projects Done</span></div>
                </div>
              </div>
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3596

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark-light position-relative overflow-hidden"><img class="position-absolute top-50 start-50 translate-middle" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mw-md-6xl mx-auto">
      <div class="row mb-24 align-items-center">
        <div class="col-md-6 mb-8 mb-lg-0">
          <div class="mw-sm mw-md-none">
            <h3 class="font-heading fw-medium text-white mb-0"><span>Get to know our amazing</span><span class="text-info">Team</span></h3>
          </div>
        </div>
        <div class="col-md-6 text-md-end"><a class="btn btn-outline-light" href="#"><span class="me-2">SHOW ALL PEOPLE</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
      <div class="row mb-14">
        <div class="col-md-6 mb-8 mb-md-0">
          <div class="d-flex align-items-center">
            <div><span class="d-block display-2 fw-medium text-white">300+</span><span class="diplay-5 text-white">Tech Team</span></div>
            <div class="mx-6 mx-sm-14 py-10 bg-secondary" style="width: 1px;"></div>
            <div><span class="d-block display-2 fw-medium text-white">80</span><span class="diplay-5 text-white">Fungsional Team</span></div>
          </div>
        </div>
        <div class="col-md-6">
          <div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3597

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-50 end-0 translate-middle-y" src="casper-assets/blur/blur-center-right-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 end-0 mt-n10 me-xl-24 animate-spinStar" src="casper-assets/services/blink-star.png" alt=""/>
    <div class="mw-lg mw-lg-7xl mx-auto position-relative">
      <div class="mw-4xl mb-16">
        <h2 class="font-heading fw-medium text-white mb-6">Look no further! Casper is here to revolutionize</h2>
        <p class="mw-xl display-5 lh-lg text-light-light mb-0">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 mb-8 mb-lg-0">
          <div class="position-relative p-10 h-100 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/services/bg-gradient-square.png" alt=""/>
            <div class="position-relative d-flex flex-column align-items-start h-100"><img class="img-fluid d-block mb-24" src="casper-assets/services/icon-white-1.png" alt=""/>
              <div class="mw-lg mt-auto">
                <h4 class="fw-medium mb-4">Intelligent Conversations</h4>
                <p class="mb-4">ChatBotX is powered by state-of-the-art artificial intelligence, ensuring natural interactions with your users</p><a class="btn btn-primary text-black" href="#"><span class="me-2">SEE DETAILS</span>
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
                  </svg></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="position-relative p-10 mb-8"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/blur/box-lg-right.png" alt=""/>
            <div class="position-relative mw-md"><img class="img-fluid d-block mb-24" src="casper-assets/services/icon-white-2.png" alt=""/>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3598

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n52 mt-n80" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-lg-block position-absolute bottom-0 end-0 me-xl-n12" src="casper-assets/logo-clouds/alien-fly.png" alt=""/><img class="d-none d-md-block position-absolute top-0 start-0 mt-12 mt-lg-n8 ms-lg-n10 ms-lg-4 animate-spinStar" src="casper-assets/logo-clouds/blink-star.png" alt=""/>
    <div class="mw-xl mw-md-2xl mw-lg-3xl mx-auto text-center">
      <h2 class="font-heading fw-medium text-white mb-16">Over 100+ Company Use Casper</h2>
      <div class="row mx-n6 mb-n8 justify-content-center">
        <div class="col-6 col-md-4 px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons1.svg" alt=""/></div>
        <div class="col-6 col-md-4 px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons2.svg" alt=""/></div>
        <div class="col-6 col-md-4 px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons3.svg" alt=""/></div>
        <div class="col-6 col-md-4 px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons4.svg" alt=""/></div>
        <div class="col-6 col-md-4 px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons5.svg" alt=""/></div>
        <div class="col-6 col-md-4 px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons1.svg" alt=""/></div>
      </div>
      <div class="mw-lg mx-auto text-center mt-16">
        <p class="fs-6 text-light-light mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
      </div><img class="d-block ms-auto d-lg-none" src="casper-assets/logo-clouds/alien-fly.png" alt=""/>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3599

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mb-16">
      <h2 class="font-heading fw-medium text-white mb-6">How Does Casper Work</h2>
      <p class="display-5 lh-lg text-light-light mb-4">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
    </div>
    <div class="mw-sm mw-sm-none mx-auto">
      <div class="row">
        <div class="col-sm-4 mb-8 mb-sm-0">
          <div><span class="d-block display-2 fw-semibold text-secondary">01</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
        </div>
        <div class="col-sm-4 mb-8 mb-sm-0">
          <div><span class="d-block display-2 fw-semibold text-secondary">02</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">By understanding your visitors&apos; needs, our chat assistant creates a unique experience</p>
          </div>
        </div>
        <div class="col-sm-4">
          <div><span class="d-block display-2 fw-semibold text-secondary">03</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">Say goodbye to static web pages and hello to an interactive, conversational platform</p>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3600

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mw-md-6xl mx-auto">
      <div class="row mb-14 align-items-end">
        <div class="col-lg-8 mb-8 mb-lg-0">
          <div><span class="d-block mb-6 text-light-light">Type Caption Here</span>
            <h2 class="h3 font-heading fw-medium text-white mb-0">Recent Blog &amp; Articles</h2>
          </div>
        </div>
        <div class="col-lg-auto ms-auto"><a class="btn btn-primary text-black" href="#"><span class="me-2">SEE MORE ARTICLES</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.92 6.62C17.8185 6.37565 17.6243 6.18147 17.38 6.08C17.2598 6.02876 17.1307 6.00158 17 6H7C6.73478 6 6.48043 6.10536 6.29289 6.29289C6.10536 6.48043 6 6.73478 6 7C6 7.26522 6.10536 7.51957 6.29289 7.70711C6.48043 7.89464 6.73478 8 7 8H14.59L6.29 16.29C6.19627 16.383 6.12188 16.4936 6.07111 16.6154C6.02034 16.7373 5.9942 16.868 5.9942 17C5.9942 17.132 6.02034 17.2627 6.07111 17.3846C6.12188 17.5064 6.19627 17.617 6.29 17.71C6.38296 17.8037 6.49356 17.8781 6.61542 17.9289C6.73728 17.9797 6.86799 18.0058 7 18.0058C7.13201 18.0058 7.26272 17.9797 7.38458 17.9289C7.50644 17.8781 7.61704 17.8037 7.71 17.71L16 9.41V17C16 17.2652 16.1054 17.5196 16.2929 17.7071C16.4804 17.8946 16.7348 18 17 18C17.2652 18 17.5196 17.8946 17.7071 17.7071C17.8946 17.5196 18 17.2652 18 17V7C17.9984 6.86932 17.9712 6.74022 17.92 6.62Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
      <div class="row">
        <div class="col-12 col-md-4 mb-12 mb-md-0">
          <div><img class="img-fluid d-block w-100" src="casper-assets/blog/image-sm-blog1.png" alt=""/>
            <div class="mt-6">
              <h5 class="text-white fw-medium mb-4">Type you blog title here</h5>
              <p class="small text-light mb-4">Gain valuable insights into your users&apos; preferences, behavior, and frequently asked questions. Simply dummy text of the printing and typesetting industry.</p>
              <div class="d-flex align-items-center"><a class="btn btn-outline-primary align-items-center justify-content-center p-0" href="#" style="width: 56px; height: 56px;">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z" fill="white"></path>
                  </svg></a><span class="ms-5 small text-white">Read more</span></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #3581

Get the code for 13,400+ components

Bootstrap Component #3582

Get the code for 13,400+ components

Bootstrap Component #3583

Get the code for 13,400+ components

Bootstrap Component #3584

Get the code for 13,400+ components

Bootstrap Component #3585

Get the code for 13,400+ components

Bootstrap Component #3586

Get the code for 13,400+ components

Bootstrap Component #3587

Get the code for 13,400+ components

Bootstrap Component #3588

Get the code for 13,400+ components

Bootstrap Component #3589

Get the code for 13,400+ components

Bootstrap Component #3590

Get the code for 13,400+ components

Bootstrap Component #3591

Get the code for 13,400+ components

Bootstrap Component #3592

Get the code for 13,400+ components

Bootstrap Component #3593

Get the code for 13,400+ components

Bootstrap Component #3594

Get the code for 13,400+ components

Bootstrap Component #3595

Get the code for 13,400+ components

Bootstrap Component #3596

Get the code for 13,400+ components

Bootstrap Component #3597

Get the code for 13,400+ components

Bootstrap Component #3598

Get the code for 13,400+ components

Bootstrap Component #3599

Get the code for 13,400+ components

Bootstrap Component #3600

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support