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 #3601

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 h-100" src="casper-assets/about/double-lines-lg-right.svg" alt=""/><img class="d-none d-sm-block position-absolute top-50 start-0 w-25 translate-middle-y" src="casper-assets/about/planet-lg-half.png" 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-md mw-lg-2xl mw-xl-4xl mx-auto text-center">
      <h2 class="font-heading fw-medium text-white mb-4">About Us</h2>
      <p class="fs-6 text-light-light mb-6">Our Chat AI platform is powered by the latest advancements in natural language processing (NLP) and machine learning, making it capable of engaging in natural and human-like conversations. Say goodbye to clunky interactions and hello to seamless communication that feels just like chatting with a real person.</p>
      <p class="fs-6 text-light-light mb-6">Whether you need a chatbot for customer support, sales, lead generation, or any other use case, our platform is versatile enough to cater to your specific requirements. Our APIs and integration capabilities allow for easy deployment across websites, applications, and messaging platforms, providing a consistent experience for your users.</p><a class="btn p-0 btn-link" href="#"><span class="me-2">GET TO KNOW US</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>
</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 #3602

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n10 mt-n80" src="casper-assets/blur/blur-center-right-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 mb-8">
          <div>
            <h2 class="font-heading fw-medium text-white mb-0">Sign up to our newsletter</h2>
          </div>
        </div>
        <div class="col-lg-6 mb-8 align-self-center">
          <div class="mw-md ms-lg-auto">
            <p class="fs-6 text-light-light mb-0">Nunc et tellus non erat lorem ipsum dolor sit amet consectures accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
          </div>
        </div>
        <div class="col-lg-6 mb-8 mb-lg-0 align-self-end">
          <div class="mw-md">
            <div class="d-flex flex-column flex-sm-row mb-5 align-items-sm-end">
              <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="pat@saturn.dev"/>
              <button class="flex-shrink-0 mt-4 mt-sm-0 ms-sm-3 btn btn-sm px-5 py-2 btn-primary text-black" type="submit"><span class="me-1">Submit</span>
                <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="black"></path>
                </svg>
              </button>
            </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 #3603

Bootstrap

Casper

<section class="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">
    <div class="row">
      <div class="col-12 col-md-5 col-lg-6 position-relative order-last order-md-first"><img class="d-none d-md-block position-absolute bottom-0 start-0 img-fluid" src="casper-assets/download/silver-phone-left.png" alt=""/><img class="img-fluid d-block d-md-none mx-auto mw-sm" src="casper-assets/download/silver-phone-left.png" alt=""/></div>
      <div class="col-12 col-md-7 col-lg-6 py-12 py-md-24 py-lg-40">
        <div class="mw-md mw-md-lg mx-auto me-md-0">
          <h3 class="font-heading fw-medium text-white">Get Benefit with Casper App</h3>
          <p class="fs-6 text-white">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
          <ul class="list-unstyled text-white mb-14">
            <li class="d-flex mb-4 align-items-center"><span class="flex-shrink-0">
                <svg width="20" height="20" viewbox="0 0 20 20" 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.4733 6.80667C14.4114 6.74418 14.3376 6.69458 14.2564 6.66074C14.1752 6.62689 14.088 6.60947 14 6.60947C13.912 6.60947 13.8249 6.62689 13.7436 6.66074C13.6624 6.69458 13.5886 6.74418 13.5267 6.80667L8.56001 11.78L6.47334 9.68667C6.40899 9.62451 6.33303 9.57563 6.2498 9.54283C6.16656 9.51003 6.07768 9.49394 5.98822 9.49549C5.89877 9.49703 5.8105 9.51619 5.72844 9.55185C5.64639 9.58751 5.57217 9.63898 5.51001 9.70333C5.44785 9.76768 5.39897 9.84364 5.36617 9.92688C5.33337 10.0101 5.31728 10.099 5.31883 10.1885C5.32038 10.2779 5.33953 10.3662 5.37519 10.4482C5.41085 10.5303 5.46233 10.6045 5.52667 10.6667L8.08667 13.2267C8.14865 13.2892 8.22238 13.3387 8.30362 13.3726C8.38486 13.4064 8.472 13.4239 8.56001 13.4239C8.64802 13.4239 8.73515 13.4064 8.81639 13.3726C8.89763 13.3387 8.97137 13.2892 9.03334 13.2267L14.4733 7.78667C14.541 7.72424 14.595 7.64847 14.632 7.56414C14.6689 7.4798 14.688 7.38873 14.688 7.29667C14.688 7.2046 14.6689 7.11353 14.632 7.02919C14.595 6.94486 14.541 6.86909 14.4733 6.80667Z" fill="black"></path>
                </svg></span><span class="ms-2">Unlimited Upload Files</span></li>
            <li class="d-flex mb-4 align-items-center"><span class="flex-shrink-0">
                <svg width="20" height="20" viewbox="0 0 20 20" 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.4733 6.80667C14.4114 6.74418 14.3376 6.69458 14.2564 6.66074C14.1752 6.62689 14.088 6.60947 14 6.60947C13.912 6.60947 13.8249 6.62689 13.7436 6.66074C13.6624 6.69458 13.5886 6.74418 13.5267 6.80667L8.56001 11.78L6.47334 9.68667C6.40899 9.62451 6.33303 9.57563 6.2498 9.54283C6.16656 9.51003 6.07768 9.49394 5.98822 9.49549C5.89877 9.49703 5.8105 9.51619 5.72844 9.55185C5.64639 9.58751 5.57217 9.63898 5.51001 9.70333C5.44785 9.76768 5.39897 9.84364 5.36617 9.92688C5.33337 10.0101 5.31728 10.099 5.31883 10.1885C5.32038 10.2779 5.33953 10.3662 5.37519 10.4482C5.41085 10.5303 5.46233 10.6045 5.52667 10.6667L8.08667 13.2267C8.14865 13.2892 8.22238 13.3387 8.30362 13.3726C8.38486 13.4064 8.472 13.4239 8.56001 13.4239C8.64802 13.4239 8.73515 13.4064 8.81639 13.3726C8.89763 13.3387 8.97137 13.2892 9.03334 13.2267L14.4733 7.78667C14.541 7.72424 14.595 7.64847 14.632 7.56414C14.6689 7.4798 14.688 7.38873 14.688 7.29667C14.688 7.2046 14.6689 7.11353 14.632 7.02919C14.595 6.94486 14.541 6.86909 14.4733 6.80667Z" fill="black"></path>
                </svg></span><span class="ms-2">Advanced Statistic With Smart System</span></li>
            <li class="d-flex mb-4 align-items-center"><span class="flex-shrink-0">
                <svg width="20" height="20" viewbox="0 0 20 20" 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.4733 6.80667C14.4114 6.74418 14.3376 6.69458 14.2564 6.66074C14.1752 6.62689 14.088 6.60947 14 6.60947C13.912 6.60947 13.8249 6.62689 13.7436 6.66074C13.6624 6.69458 13.5886 6.74418 13.5267 6.80667L8.56001 11.78L6.47334 9.68667C6.40899 9.62451 6.33303 9.57563 6.2498 9.54283C6.16656 9.51003 6.07768 9.49394 5.98822 9.49549C5.89877 9.49703 5.8105 9.51619 5.72844 9.55185C5.64639 9.58751 5.57217 9.63898 5.51001 9.70333C5.44785 9.76768 5.39897 9.84364 5.36617 9.92688C5.33337 10.0101 5.31728 10.099 5.31883 10.1885C5.32038 10.2779 5.33953 10.3662 5.37519 10.4482C5.41085 10.5303 5.46233 10.6045 5.52667 10.6667L8.08667 13.2267C8.14865 13.2892 8.22238 13.3387 8.30362 13.3726C8.38486 13.4064 8.472 13.4239 8.56001 13.4239C8.64802 13.4239 8.73515 13.4064 8.81639 13.3726C8.89763 13.3387 8.97137 13.2892 9.03334 13.2267L14.4733 7.78667C14.541 7.72424 14.595 7.64847 14.632 7.56414C14.6689 7.4798 14.688 7.38873 14.688 7.29667C14.688 7.2046 14.6689 7.11353 14.632 7.02919C14.595 6.94486 14.541 6.86909 14.4733 6.80667Z" fill="black"></path>
                </svg></span><span class="ms-2">Powered by state-of-the-art AI</span></li>

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 #3604

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0 ms-n20 img-fluid" src="casper-assets/blur/blur-center-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-xl-64 img-fluid animate-spinStar" src="casper-assets/headers/blink-sm.png" alt=""/>
  <div class="container position-relative"><img class="d-none d-lg-block position-absolute top-0 start-0 mt-32 mw-xs mw-xl-none" src="casper-assets/sign-in/robot.png" alt=""/><img class="d-none d-lg-block position-absolute top-0 end-0 mt-32 px-10 px-xl-0 mw-xs mw-xl-none" src="casper-assets/sign-in/planet.png" alt=""/>
    <div class="text-center mb-12">
      <h2 class="font-heading fw-medium text-white mb-6">Sign in to your account</h2>
      <p class="mw-xl mx-auto lh-lg display-5 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="mw-md mx-auto">
      <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">
          <label class="form-label text-white" for="">Email</label>

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 #3605

Bootstrap

Casper

<section class="pb-12 pt-24 pb-lg-24 bg-dark-light position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-12 col-lg-5 col-xl-6 mb-14 mb-lg-0 position-relative"><img class="position-absolute top-0 end-0 mt-n24 me-20 img-fluid animate-spinStar" src="casper-assets/headers/blink-sm.png" alt=""/><img class="img-fluid d-block" src="casper-assets/features/left-image-robot.png" alt=""/></div>
        <div class="col-12 col-lg-7 col-xl-6">
          <div class="position-relative">
            <div class="position-absolute top-0 start-0 w-100 py-20" style="background: linear-gradient(180deg, #16192B 0%, rgba(22, 25, 43, 0.00) 100%);"></div>
            <div>
              <div class="d-flex mb-10 align-items-start">
                <div class="d-inline-flex flex-shrink-0 align-items-center justify-content-center bg-info rounded-pill" style="width: 60px; height: 60px;">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 3V2C2.44772 2 2 2.44772 2 3H3ZM18.293 14.293L17.3818 13.8809C17.2104 14.2601 17.2916 14.7058 17.5859 15.0001L18.293 14.293ZM21 17L21.7071 17.7071C22.0976 17.3166 22.0976 16.6834 21.7071 16.2929L21 17ZM17 21L16.2929 21.7071C16.6834 22.0976 17.3166 22.0976 17.7071 21.7071L17 21ZM14.293 18.293L15.0001 17.5859C14.7058 17.2916 14.2601 17.2104 13.8809 17.3818L14.293 18.293ZM11 2H3V4H11V2ZM20 11C20 6.02944 15.9706 2 11 2V4C14.866 4 18 7.13401 18 11H20ZM19.2041 14.7051C19.7157 13.5738 20 12.3188 20 11H18C18 12.029 17.7786 13.0036 17.3818 13.8809L19.2041 14.7051ZM17.5859 15.0001L20.2929 17.7071L21.7071 16.2929L19.0001 13.5859L17.5859 15.0001ZM20.2929 16.2929L16.2929 20.2929L17.7071 21.7071L21.7071 17.7071L20.2929 16.2929ZM17.7071 20.2929L15.0001 17.5859L13.5859 19.0001L16.2929 21.7071L17.7071 20.2929ZM11 20C12.3188 20 13.5738 19.7157 14.7051 19.2041L13.8809 17.3818C13.0036 17.7786 12.029 18 11 18V20ZM2 11C2 15.9706 6.02944 20 11 20V18C7.13401 18 4 14.866 4 11H2ZM2 3V11H4V3H2Z" fill="white"></path>
                    <ellipse cx="11" cy="11" rx="2" ry="2" transform="rotate(-180 11 11)" fill="white"></ellipse>
                    <path d="M3 3L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="ms-8 pt-2">
                  <h4 class="text-white fw-medium mb-8">Intelligent Conversations</h4>
                  <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. Sign up  today and transform your customer interactions.</p>
                </div>
              </div>
              <div class="d-flex mb-10 align-items-start">
                <div class="d-inline-flex flex-shrink-0 align-items-center justify-content-center bg-warning rounded-pill" style="width: 60px; height: 60px;">

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 #3606

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden">
  <div class="container position-relative"><img class="position-absolute top-50 start-50 translate-middle" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
    <div class="position-relative mw-3xl mx-auto mb-16 text-center">
      <h2 class="h3 font-heading fw-medium text-white mb-6">Unlock the true potential of your website</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="position-relative mw-sm mw-md-xl mw-lg-7xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-3 mb-8 mb-lg-0">
          <div class="position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/cta/vertical-bg-place-1.png" alt=""/>
            <div class="position-relative p-8">
              <div class="d-flex flex-column align-items-start">
                <h5 class="text-white fw-medium mb-52"><span class="d-block">Personalized</span><span>Experiences</span></h5><a class="btn btn-outline-light" href="#"><span class="me-2">VIEW 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-md-6 col-lg-3 mb-8 mb-lg-0">
          <div class="position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/cta/vertical-bg-place-2.png" alt=""/>
            <div class="position-relative p-8">
              <div class="d-flex flex-column align-items-start">

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 #3607

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-64" src="casper-assets/blur/blur-center-violet.svg" alt=""/><img class="position-absolute top-0 end-0 me-n40 mt-n64" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-end">
      <div class="col-lg-7 mb-16 mb-lg-0">
        <div class="mw-lg mx-auto mx-lg-0 mw-lg-none position-relative">
          <div class="mb-16">
            <h2 class="font-heading fw-medium text-white mb-6">Careers at Casper</h2>
            <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-lg mw-xl-xl"><a class="d-block px-0 pt-0 pb-10 mb-10 btn w-100 h-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>

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 #3608

Bootstrap

Casper

<section class="pt-12 pt-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0 w-100" src="casper-assets/testimonials/triangle-line-bottom.png" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 start-0 mt-n10 ms-md-12 animate-spinStar" src="casper-assets/features/blink-star.png" alt=""/>
    <div class="mw-md mw-md-lg mw-lg-3xl mx-auto mb-12 text-center">
      <h2 class="font-heading fw-medium text-white mb-8">Trusted by more than 100k people</h2>
      <p class="mw-xl mx-auto display-5 lh-lg text-secondary 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 pb-12 pb-lg-24">
    <div class="d-flex align-items-start justify-content-center">
      <div class="position-relative w-100 mw-xs me-6 flex-shrink-0 p-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>
            <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>
            </svg>
          </div>
        </div>
      </div>
      <div class="position-relative w-100 mw-xs me-6 flex-shrink-0 p-6"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/blur/box-blur-dark.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 #3609

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="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 mb-20 mb-lg-0">
          <div class="mw-lg-md mw-xl-xl">
            <h3 class="font-heading fw-medium text-white mb-3">Stunning UI Library for Start Up</h3>
            <p class="mw-sm mw-xl-lg fs-6 text-light-light mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p><a class="btn btn-primary text-black" href="#"><span class="me-2">LEARN MORE</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="col-12 col-lg-6">
          <div class="mw-lg-md ms-lg-auto mw-xl-none">
            <div class="row mb-n20">
              <div class="col-auto col-sm-6 mb-20">
                <div><span class="d-block mb-1 text-secondary">Purchase</span><span class="display-2 mb-1 fw-semibold text-white">$150 M</span>
                  <div class="d-flex align-items-center">
                    <div class="d-flex me-2 align-items-center text-danger-dark">
                      <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.2824 9.5325L9.5324 13.2825C9.46107 13.3508 9.37696 13.4043 9.2849 13.44C9.1023 13.515 8.89749 13.515 8.7149 13.44C8.62283 13.4043 8.53872 13.3508 8.4674 13.2825L4.71739 9.5325C4.64747 9.46257 4.592 9.37956 4.55415 9.28819C4.51631 9.19682 4.49683 9.0989 4.49683 9C4.49683 8.80027 4.57617 8.60873 4.71739 8.4675C4.85862 8.32627 5.05017 8.24693 5.2499 8.24693C5.44962 8.24693 5.64117 8.32627 5.7824 8.4675L8.2499 10.9425V5.25C8.2499 5.05109 8.32891 4.86032 8.46957 4.71967C8.61022 4.57902 8.80098 4.5 8.9999 4.5C9.19881 4.5 9.38957 4.57902 9.53023 4.71967C9.67088 4.86032 9.7499 5.05109 9.7499 5.25V10.9425L12.2174 8.4675C12.2871 8.3972 12.3701 8.34141 12.4615 8.30333C12.5529 8.26526 12.6509 8.24565 12.7499 8.24565C12.8489 8.24565 12.9469 8.26526 13.0383 8.30333C13.1297 8.34141 13.2127 8.3972 13.2824 8.4675C13.3527 8.53722 13.4085 8.62017 13.4466 8.71157C13.4846 8.80296 13.5042 8.90099 13.5042 9C13.5042 9.09901 13.4846 9.19704 13.4466 9.28843C13.4085 9.37983 13.3527 9.46278 13.2824 9.5325Z" fill="currentColor"></path>
                      </svg><span class="fw-medium">10.5%</span>
                    </div><span class="small text-white">from last year</span>

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 #3610

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0 ms-n40 mt-n40" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-7 mb-10 mb-lg-0">
          <div><span class="d-block text-info mb-4">CONTACT US</span>
            <h2 class="font-heading fw-medium text-white">Have a project?</h2>
            <h2 class="font-heading fw-medium text-white mb-24">Let&rsquo;s get connect!</h2>
            <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>
              </div>
              <div class="mt-6 mt-sm-0 ms-sm-8"><span class="fs-6 text-white">Email</span><span class="d-block display-4 text-white">hello@yourdomain.com</span></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 #3611

Bootstrap

Casper

<section class="py-12 py-lg-24 pt-xl-32 bg-dark-light 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-md mw-md-6xl mx-auto">
      <div class="row mb-14 align-items-end">
        <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-6"><span>Get to know our amazing</span><span class="bg-gradient-blue-text">Team</span></h3>
            <p class="display-5 lh-lg text-secondary mb-0">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
          </div>
        </div>
        <div class="col-md-6 text-md-end position-relative"><img class="position-absolute top-0 end-0 me-lg-52 me-md-8 mt-n10 mt-md-n40 mt-lg-n52 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
          <div>
            <button class="btn me-2 btn-outline-secondary p-0" 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="M6.08 11.62C6.12759 11.4973 6.19896 11.3851 6.29 11.29L11.29 6.29C11.3832 6.19676 11.4939 6.1228 11.6158 6.07234C11.7376 6.02188 11.8681 5.99591 12 5.99591C12.2663 5.99591 12.5217 6.1017 12.71 6.29C12.8032 6.38324 12.8772 6.49393 12.9277 6.61575C12.9781 6.73758 13.0041 6.86814 13.0041 7C13.0041 7.2663 12.8983 7.5217 12.71 7.71L9.41 11H17C17.2652 11 17.5196 11.1054 17.7071 11.2929C17.8946 11.4804 18 11.7348 18 12C18 12.2652 17.8946 12.5196 17.7071 12.7071C17.5196 12.8946 17.2652 13 17 13H9.41L12.71 16.29C12.8037 16.383 12.8781 16.4936 12.9289 16.6154C12.9797 16.7373 13.0058 16.868 13.0058 17C13.0058 17.132 12.9797 17.2627 12.9289 17.3846C12.8781 17.5064 12.8037 17.617 12.71 17.71C12.617 17.8037 12.5064 17.8781 12.3846 17.9289C12.2627 17.9797 12.132 18.0058 12 18.0058C11.868 18.0058 11.7373 17.9797 11.6154 17.9289C11.4936 17.8781 11.383 17.8037 11.29 17.71L6.29 12.71C6.19896 12.6149 6.12759 12.5028 6.08 12.38C5.97998 12.1365 5.97998 11.8635 6.08 11.62Z" fill="#80818C"></path>
              </svg>
            </button>
            <button class="btn btn-primary-dark text-white p-0" 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="currentColor"></path>
              </svg>
            </button>
          </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 #3612

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" 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"><img class="d-none d-md-block position-absolute top-0 start-0 mt-10 mt-lg-0 ms-n10 ms-lg-0 col-2 col-lg-auto" src="casper-assets/pricing/crystal.png" alt=""/>
    <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-md mw-lg-5xl mx-auto">
      <div class="p-5 bg-white bg-opacity-10 rounded" style="backdrop-filter: blur(10px);">
        <div class="row">
          <div class="col-lg-6 py-10 px-5 ps-10">
            <div><img class="img-fluid d-block mb-8" src="casper-assets/pricing/avatar-pricing1.png" alt=""/>
              <div class="d-sm-flex mb-6">
                <div><span class="d-block display-2 fw-semibold text-white">$25</span></div>
                <div class="mt-4 mt-sm-0 ps-sm-10">
                  <h5 class="d-block mb-1 display-4 fw-medium text-white">Basic</h5>
                  <p class="small mb-0 text-white">Simply dummy text of the printing and typesetting industry.</p>
                </div>
              </div>
              <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>

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 #3613

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 animate-spinStar" src="casper-assets/content/blink-star.png" alt=""/>
    <div class="position-relative">
      <div class="mw-lg mb-12">
        <h2 class="font-heading fw-medium text-white mb-4">Blog Content</h2>
        <p class="fs-6 text-light-light mb-0">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus morbi.</p>
      </div>
      <div class="row">
        <div class="col-md-4 col-lg-3 mb-12 mb-md-0">
          <ul class="mw-sm list-unstyled">
            <li class="pb-6 mb-6 border-secondary-dark" style="border-bottom: 1px dashed"><a class="d-inline-flex p-0 align-items-center fs-6 text-info" href="#">
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 12H19" stroke="#00BBE4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M12 5L19 12L12 19" stroke="#00BBE4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg><span class="ms-2">Category One</span></a></li>
            <li class="pb-6 mb-6 border-secondary-dark" style="border-bottom: 1px dashed"><a class="d-inline-flex p-0 align-items-center fs-6 text-white" href="#">Category Two</a></li>
            <li class="pb-6 mb-6 border-secondary-dark" style="border-bottom: 1px dashed"><a class="d-inline-flex p-0 align-items-center fs-6 text-white" href="#">Category Three</a></li>
            <li class="pb-6 mb-6 border-secondary-dark" style="border-bottom: 1px dashed"><a class="d-inline-flex p-0 align-items-center fs-6 text-white" href="#">Category Four</a></li>
            <li><a class="d-inline-flex p-0 align-items-center fs-6 text-white" href="#">Category Five</a></li>
          </ul>
        </div>
        <div class="col-md-8 col-lg-7 ms-md-auto">
          <div><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>

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 #3614

Bootstrap

Casper

<section class="vh-100 bg-dark">
  <div class="position-fixed top-0 start-0 w-100 p-10" style="z-index: 50;">
    <div class="container">
      <div class="w-100 py-10 px-14 position-relative rounded bg-white bg-opacity-10 border border-primary-dark" style="backdrop-filter: blur(10px);">
        <div class="row align-items-center">
          <div class="col-7">
            <div>
              <p class="text-secondary mb-0"><span class="d-inline">By clicking &quot;Accept all cookies&quot; you consent to cookies being stored on your device to improve website navigation, analyze website usage and assist with our marketing efforts. View our</span><a class="btn btn-link p-0" href="#">Personal Data Policy</a><span class="d-inline">for more information.</span></p>
            </div>
          </div>
          <div class="col-auto ms-auto">
            <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>
    </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 #3615

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n24 mt-n80" src="casper-assets/blur/blur-center-right-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="position-relative mw-xl mx-auto mw-lg-none py-12 py-md-16 px-8 px-md-20 px-lg-16 bg-opacity-10 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/newsletter/bg-gradient.png" alt=""/>
      <div class="row position-relative">
        <div class="col-lg-6 mb-10 mb-lg-0">
          <div>
            <h2 class="font-heading fw-medium mb-6">Stay up to Date</h2>
            <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 flex-column flex-sm-row align-items-sm-center">
              <div class="flex-shrink-0" style="width: 72px; height: 72px;"><img class="img-fluid" src="casper-assets/newsletter/avatar.png" alt=""/></div>
              <div class="mt-6 mt-sm-0 ms-sm-9"><span class="display-2 fw-medium">50%</span>
                <p class="fs-6 mb-0">Nunc et tellus non erat aliquam eget non mi.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-md ms-lg-auto"><img class="img-fluid d-block ms-auto me-24 mb-10 mb-sm-16 animate-spinStar" src="casper-assets/newsletter/blink-star.png" alt=""/>
            <div>
              <label class="form-label" for="">Email</label>
              <div class="d-flex flex-column flex-sm-row mb-5 align-items-sm-end">
                <input class="form-control rounded-1 text-dark border-white bg-white bg-opacity-50" type="email" placeholder="pat@saturn.dev"/>
                <button class="flex-shrink-0 mt-4 mt-sm-0 ms-sm-3 btn btn-sm px-5 py-2 btn-primary text-black" type="submit"><span class="me-1">Submit</span>
                  <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/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 #3616

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 mt-n10 me-md-n14 me-lg-n10" src="casper-assets/faq/shield-robot.png" alt=""/><img class="d-none d-md-block position-absolute top-0 start-0 mt-n20 ms-n20" src="casper-assets/faq/robot-ball.png" alt=""/>
    <div class="position-relative">
      <div class="mw-xl mx-auto mw-xl-none text-center mb-8 mb-md-20">
        <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>
      <div class="mw-sm mw-sm-none mx-auto">
        <div class="row mb-n8">
          <div class="col-sm-6 col-lg-4 mb-8">
            <div class="position-relative pt-9 px-9 pb-8 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100 img-fluid" src="casper-assets/faq/bg-box1.png" alt=""/>
              <div class="position-relative">
                <h5 class="display-5 text-white fw-medium mb-4">How to Apply</h5>
                <p class="text-white mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p><a class="btn btn-sm btn-outline-light" href="#">Read More</a>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-8">
            <div class="position-relative pt-9 px-9 pb-8 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100 img-fluid" src="casper-assets/faq/bg-box2.png" alt=""/>
              <div class="position-relative">
                <h5 class="display-5 text-white fw-medium mb-4">How to Apply</h5>
                <p class="text-white mb-4">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut.</p><a class="btn btn-sm btn-outline-light" href="#">Read More</a>
              </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 #3617

Bootstrap

Casper

<section class="pb-12 pt-24 pb-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0 w-100" src="casper-assets/features/triangle-top-lines.png" alt=""/>
  <div class="container position-relative">
    <div class="mw-xl mw-md-none mx-auto">
      <div class="mw-2xl mb-14"><span class="badge text-uppercase mb-6" style="background: linear-gradient(158deg, #826FFF 1.14%, #511CFF 51.87%, #00D1FF 104.76%);">Features</span>
        <h2 class="font-heading fw-medium text-white mb-6">AI assistant engage your visitors</h2>
        <p class="display-5 lh-lg text-light-light mb-0">We powered by state-of-the-art artificial intelligence</p>
      </div>
      <div class="row mb-n8">
        <div class="col-12 col-md-6 mb-8">
          <div class="position-relative rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/features/image-banner-box-1.png" alt=""/>
            <div class="position-relative pt-6 px-8 pb-8"><span class="d-block h3 fw-medium text-white mb-6">01</span><span class="display-4 text-white">Intelligent Conversations</span></div>
          </div>
        </div>
        <div class="col-12 col-md-6 mb-8">
          <div class="position-relative rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/features/image-banner-box-2.png" alt=""/>
            <div class="position-relative pt-6 px-8 pb-8"><span class="d-block h3 fw-medium text-white mb-6">02</span><span class="display-4 text-white">Personalized Experiences</span></div>
          </div>
        </div>
        <div class="col-12 col-md-6 mb-8">
          <div class="position-relative rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/features/image-banner-box-3.png" alt=""/>
            <div class="position-relative pt-6 px-8 pb-8"><span class="d-block h3 fw-medium text-white mb-6">03</span><span class="display-4 text-white">24/7 Availability</span></div>
          </div>
        </div>
        <div class="col-12 col-md-6 mb-8">

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 #3618

Bootstrap

Casper

<section class="py-12 pb-lg-24 pt-lg-16 bg-dark position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="mw-md-6xl mx-auto">
      <div class="row align-items-center">
        <div class="col-md-6 mb-12 mb-lg-0">
          <div class="mw-sm mw-lg-md mx-auto mx-md-0">
            <h2 class="h3 font-heading fw-medium text-white mb-4">Start custom &amp; build!</h2>
            <p class="fs-6 text-light-light mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
            <div class="d-flex mb-6 align-items-center">
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.50002 6C7.20334 6 6.91333 6.08798 6.66666 6.2528C6.41999 6.41762 6.22773 6.65189 6.1142 6.92598C6.00067 7.20007 5.97096 7.50167 6.02884 7.79264C6.08672 8.08361 6.22958 8.35088 6.43936 8.56066C6.64914 8.77044 6.91641 8.9133 7.20738 8.97118C7.49835 9.02906 7.79995 8.99935 8.07404 8.88582C8.34813 8.77229 8.5824 8.58003 8.74722 8.33336C8.91204 8.08668 9.00002 7.79667 9.00002 7.5C9.00002 7.10218 8.84198 6.72065 8.56068 6.43934C8.27937 6.15804 7.89784 6 7.50002 6ZM21.12 10.71L12.71 2.29C12.6166 2.19732 12.5058 2.12399 12.3839 2.07423C12.2621 2.02447 12.1316 1.99924 12 2H3.00002C2.7348 2 2.48045 2.10536 2.29291 2.29289C2.10537 2.48043 2.00002 2.73478 2.00002 3V12C1.99926 12.1316 2.02448 12.2621 2.07425 12.3839C2.12401 12.5057 2.19734 12.6166 2.29002 12.71L10.71 21.12C11.2725 21.6818 12.035 21.9974 12.83 21.9974C13.625 21.9974 14.3875 21.6818 14.95 21.12L21.12 15C21.6818 14.4375 21.9974 13.675 21.9974 12.88C21.9974 12.085 21.6818 11.3225 21.12 10.76V10.71ZM19.71 13.53L13.53 19.7C13.3427 19.8863 13.0892 19.9908 12.825 19.9908C12.5608 19.9908 12.3074 19.8863 12.12 19.7L4.00002 11.59V4H11.59L19.71 12.12C19.8027 12.2134 19.876 12.3243 19.9258 12.4461C19.9756 12.5679 20.0008 12.6984 20 12.83C19.9989 13.0923 19.8948 13.3437 19.71 13.53Z" fill="#FFB11A"></path>
              </svg><span class="ms-2 h4 text-white fw-medium mb-0">Only $50</span>
            </div><a class="btn btn-primary" href="#"><span class="me-2">SEE OUR PLANS</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="col-md-6">
          <div class="position-relative mw-md mx-auto me-md-0"><img class="position-absolute top-50 start-50 translate-middle w-100" src="casper-assets/cta/circle-bg-large.png" alt=""/><img class="position-relative img-fluid d-block w-100 mw-sm mx-auto" src="casper-assets/cta/phone-robot.png" alt=""/><img class="position-absolute top-0 start-0 mt-lg-20 ms-n6 ms-lg-n20" src="casper-assets/cta/box-items.png" alt=""/></div>
        </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 #3619

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 h-100" src="casper-assets/about/double-lines-lg-right.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/><img class="d-none d-md-block position-absolute top-0 end-0 me-lg-n10 col-6 col-lg-auto mt-20 mt-lg-0" src="casper-assets/about/robot-lg.png" alt=""/>
  <div class="container position-relative">
    <div class="mw-3xl">
      <div class="mw-md-md mw-lg-xl mw-xl-none pe-lg-20 mb-14">
        <h2 class="font-heading fw-medium text-white mb-4">About Us</h2>
        <p class="fs-6 text-light-light mb-6">Our Chat AI platform is powered by the latest advancements in natural language processing (NLP) and machine learning, making it capable of engaging in natural and human-like conversations. Say goodbye to clunky interactions and hello to seamless communication that feels just like chatting with a real person.</p>
        <p class="fs-6 text-light-light mb-6">Whether you need a chatbot for customer support, sales, lead generation, or any other use case, our platform is versatile enough to cater to your specific requirements. Our APIs and integration capabilities allow for easy deployment across websites, applications, and messaging platforms, providing a consistent experience for your users.</p><a class="btn p-0 btn-link" href="#"><span class="me-2">GET TO KNOW US</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 class="row">
        <div class="col-sm-4 text-center text-sm-start">
          <div class="d-inline-sm-block py-8 py-sm-0 pe-sm-6 pe-lg-12 position-relative">
            <div class="d-none d-sm-block position-absolute top-0 end-0 h-100 bg-white bg-opacity-10" style="width: 1px;"></div>
            <h2 class="fw-medium text-white mb-4">300+</h2><span class="text-secondary">PRODUCTS</span>
          </div>
        </div>
        <div class="col-sm-4 text-center text-sm-start position-relative">
          <div class="d-none d-sm-block position-absolute top-0 end-0 h-100 bg-white bg-opacity-10" style="width: 1px;"></div>
          <div class="d-inline-sm-block py-8 py-sm-0 px-sm-6 px-lg-12 position-relative">
            <div class="d-sm-none position-absolute top-0 start-0 w-100 bg-white bg-opacity-10" style="height: 1px;"></div>
            <h2 class="fw-medium text-white mb-4">100+</h2><span class="text-secondary">WEB TEMPLATE</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

Bootstrap Component #3620

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-md-none mx-auto position-relative">
      <div class="mw-4xl mb-16">
        <h2 class="font-heading fw-medium text-white mb-6">Our Services</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="mw-sm mw-sm-none mx-auto"><a class="d-block pb-8 mb-12 border-bottom border-2 border-white" href="#">
          <div class="row align-items-center">
            <div class="col-12 col-sm-8 col-md-5 mb-8 mb-md-0">
              <div class="d-flex align-items-start"><span class="display-3 fw-medium text-info">01</span>
                <h4 class="ms-4 display-3 fw-medium text-info"><span class="d-block">Personalized</span><span>Experiences</span></h4>
              </div>
            </div>
            <div class="col-12 col-sm-4 col-md-2 mb-8 mb-md-0"><img class="img-fluid" src="casper-assets/services/axe.png" alt=""/></div>
            <div class="col-12 col-sm-9 col-md-4 mb-8 mb-sm-0">
              <div class="mw-md ms-auto text-end">
                <p class="text-white mb-0">By understanding your visitors&apos; needs, our chat assistant creates a unique experience that keeps them coming back for more unique process.</p>
              </div>
            </div>
            <div class="col-12 col-sm-3 col-md-1 ms-auto text-end">
              <svg width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.5 17.5L42.5 42.5" stroke="#1AC2E7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M17.5 42.5H42.5V17.5" stroke="#1AC2E7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></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

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 #3601

Get the code for 13,400+ components

Bootstrap Component #3602

Get the code for 13,400+ components

Bootstrap Component #3603

Get the code for 13,400+ components

Bootstrap Component #3604

Get the code for 13,400+ components

Bootstrap Component #3605

Get the code for 13,400+ components

Bootstrap Component #3606

Get the code for 13,400+ components

Bootstrap Component #3607

Get the code for 13,400+ components

Bootstrap Component #3608

Get the code for 13,400+ components

Bootstrap Component #3609

Get the code for 13,400+ components

Bootstrap Component #3610

Get the code for 13,400+ components

Bootstrap Component #3611

Get the code for 13,400+ components

Bootstrap Component #3612

Get the code for 13,400+ components

Bootstrap Component #3613

Get the code for 13,400+ components

Bootstrap Component #3614

Get the code for 13,400+ components

Bootstrap Component #3615

Get the code for 13,400+ components

Bootstrap Component #3616

Get the code for 13,400+ components

Bootstrap Component #3617

Get the code for 13,400+ components

Bootstrap Component #3618

Get the code for 13,400+ components

Bootstrap Component #3619

Get the code for 13,400+ components

Bootstrap Component #3620

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