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

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="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 mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="d-flex flex-wrap gap-4 mb-20 align-items-center justify-content-center"><a class="btn btn-outline-light" href="#">All</a><a class="btn btn-outline-light" href="#">Design</a><a class="btn btn-outline-light" href="#">Developer</a><a class="btn btn-outline-light" href="#">Marketing</a><a class="btn btn-outline-light" href="#">TechSupport</a></div>
    <div class="mw-4xl mx-auto" style="overflow-x: scroll;">
      <table class="table w-100 table-dark border-secondary-dark" style="min-width: max-content;">
        <thead>
          <tr>
            <th class="bg-transparent" scope="col"><span class="fw-medium">Positions</span></th>
            <th class="bg-transparent" scope="col"><span class="fw-medium">Departament</span></th>
            <th class="bg-transparent" scope="col"><span class="fw-medium">Rule</span></th>
            <th class="bg-transparent" scope="col"><span class="fw-medium">Location</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="bg-transparent" scope="row">
              <div class="py-8"><a class="d-inline-block p-0 display-4 fw-medium text-white" href="#">Product Designer</a></div>
            </th>
            <td class="bg-transparent">
              <div class="py-8"><span class="fs-6 fw-medium text-info">Design</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 #3662

Bootstrap

Casper

<section class="py-12 pb-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=""/>
  <div class="container position-relative">
    <div class="mw-lg mw-lg-7xl mx-auto position-relative">
      <div class="row mb-14 align-items-center">
        <div class="col-12 col-lg-6">
          <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">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
        </div>
        <div class="col-12 col-lg-6"><img class="img-fluid d-block ms-auto" src="casper-assets/services/robot-skew.png" alt=""/></div>
      </div>
      <div class="row align-items-center">
        <div class="col-lg-5 col-xl-6 order-last order-lg-first"><img class="img-fluid" src="casper-assets/services/video.png" alt=""/></div>
        <div class="col-lg-7 col-xl-6 mb-12 mb-lg-0">
          <div class="mw-lg ms-auto">
            <div class="mb-14">
              <h4 class="display-3 fw-medium text-white">Personalized Experiences</h4>
              <div class="my-6 pt-1 bg-secondary bg-opacity-25 rounded-pill"></div>
              <div class="d-flex align-items-start"><img class="img-fluid" src="casper-assets/services/circle-icon1.png" alt=""/>
                <p class="ms-6 display-5 lh-lg text-white">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
              </div>
            </div>
            <div>
              <h4 class="display-3 fw-medium text-white">Analytics and Insights</h4>
              <div class="my-6 pt-1 bg-secondary bg-opacity-25 rounded-pill"></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 #3663

Bootstrap

Casper

<section class="position-relative py-18 bg-dark overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/sign-in/background.png" alt=""/>
  <div class="container position-relative">
    <div class="mw-2xl mx-auto py-12 px-5 px-md-8 bg-black bg-opacity-50 rounded">
      <div class="text-center mb-8">
        <h2 class="display-3 font-heading fw-medium text-white mb-6">Sign in to your account</h2>
        <p class="display-5 lh-lg text-light-light">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">

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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-50 start-0 translate-middle-y" src="casper-assets/blur/blur-left-center-violet.svg" alt=""/><img class="position-absolute bottom-0 end-0" src="casper-assets/blur/blur-bottom-blue-right.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-4xl mb-18 mx-auto text-center">
      <h2 class="h3 font-heading fw-medium text-white mb-8">Engage your visitors</h2>
      <p class="fs-6 text-light-light mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. </p>
    </div>
    <div class="mw-sm mx-auto mw-sm-none">
      <div class="d-sm-flex mb-8 justify-content-center align-items-center">
        <div class="d-flex flex-column align-items-center justify-content-center mb-8 mb-sm-0 me-sm-3 py-6 px-10 rounded-pill border-2 border border-secondary"><span class="d-block display-4 text-white fw-medium">Intelligent</span><span class="d-block display-4 text-white fw-medium">Conversations</span></div>
        <div class="mb-8 mb-sm-0 me-sm-3"><img class="img-fluid d-block mx-auto" src="casper-assets/cta/circle-bg-shape.png" alt=""/></div>
        <div class="d-none d-xl-block mb-8 mb-sm-0 me-sm-3"><img class="img-fluid h-100" src="casper-assets/cta/shape-photo-md-2.png" alt=""/></div>
        <div class="d-flex flex-column align-items-center justify-content-center py-6 px-10 rounded-pill bg-white border-2 border border-secondary"><span class="d-block display-4 fw-medium">Personalized</span><span class="d-block display-4 fw-medium">Experiences</span></div>
      </div>
      <div class="d-sm-flex mb-8 justify-content-center">
        <div class="d-none d-md-block mb-8 mb-sm-0 me-sm-3"><img class="img-fluid h-100" src="casper-assets/cta/shape-photo-sm.png" alt=""/></div>
        <div class="d-flex flex-column align-items-center justify-content-center mb-8 mb-sm-0 me-sm-3 py-6 px-12 rounded-pill border-2 border border-secondary"><span class="d-block display-4 text-white fw-medium">Seamless</span><span class="d-block display-4 text-white fw-medium">Integration</span></div>
        <div class="d-flex flex-column align-items-center justify-content-center mb-8 mb-sm-0 me-sm-3 py-6 px-12 rounded-pill border-2 border border-secondary"><span class="d-block display-4 text-white fw-medium">Strong &amp; Solid</span><span class="d-block display-4 text-white fw-medium">Portfolio</span></div>
        <div class="d-none d-xl-block"><img class="img-fluid h-100" src="casper-assets/cta/shape-photo-md.png" alt=""/></div>
      </div>
      <div class="d-sm-flex justify-content-center">
        <div class="mb-8 mb-sm-0 me-sm-3"><img class="img-fluid d-block mx-auto" src="casper-assets/cta/circle-bg-shape.png" alt=""/></div>
        <div class="d-flex flex-column align-items-center justify-content-center mb-8 mb-sm-0 me-sm-3 py-6 px-12 rounded-pill border-2 border border-secondary"><span class="d-block display-4 text-white fw-medium">Analytics and</span><span class="d-block display-4 text-white fw-medium">Insights</span></div>
        <div class="d-none d-md-block"><img class="img-fluid h-100" src="casper-assets/cta/shape-photo-md.png" alt=""/></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 #3665

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/about/doublie-line-top-right.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-md mb-6">
      <h2 class="font-heading fw-medium text-white mb-6">Casper is AI Platform</h2><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="mw-3xl ms-lg-auto mb-16">
      <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-0">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>
    </div>
    <div class="row">
      <div class="col-12 col-sm-6 mb-8 mb-sm-0"><img class="img-fluid d-block w-100" src="casper-assets/about/image-photo-2.png" alt=""/></div>
      <div class="col-12 col-sm-6"><img class="img-fluid d-block w-100" src="casper-assets/about/image-photo-1.png" alt=""/></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 #3666

Bootstrap

Casper

<section class="vh-100 bg-dark">
  <div class="position-fixed top-0 start-0 w-100" style="z-index: 50;">
    <div class="container position-relative">
      <div class="w-100 py-10 px-8 px-sm-14 position-relative">
        <div class="row align-items-center">
          <div class="col-sm-3 col-lg-3 align-self-end mb-8 mb-lg-0 order-last order-sm-first"><img class="img-fluid" src="casper-assets/cookies/cookies-lg.svg" alt=""/></div>
          <div class="col-sm-9 col-lg-5 mb-8 mb-lg-0">
            <div class="mw-md">
              <p class="text-secondary mb-2">By clicking &quot;Accept all cookies&quot; you consent to cookies being stored on your device to improve website.</p><a class="btn btn-link text-info p-0" href="#"><span class="me-2">Read Our Data Policy</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="#00BBE4"></path>
                </svg></a>
            </div>
          </div>
          <div class="col-12 col-lg-auto ms-lg-auto mb-8 mb-md-0">
            <div class="d-flex flex-column flex-sm-row gap-4 align-items-start align-items-sm-center justify-content-center justify-content-lg-end"><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 #3667

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">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 order-last order-lg-first">
        <div class="position-relative mw-lg mw-lg-md mw-xl-none h-100 mx-auto mx-lg-0"><img class="position-absolute top-0 start-0 w-100 h-100 rounded" src="casper-assets/download/bg-gradient-lg-square.png" alt=""/><img class="position-relative img-fluid" src="casper-assets/download/phon-center-stats.png" alt=""/></div>
      </div>
      <div class="col-12 col-lg-6 mb-16 mb-lg-0">
        <div class="mw-md mw-md-lg mx-auto me-lg-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>

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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-7 mb-14 mb-lg-0 position-relative"><img class="img-fluid d-block ms-auto me-40 animate-spinStar" src="casper-assets/testimonials/blink-star.png" alt=""/>
        <div class="mw-xl mx-auto mx-lg-0"><span class="badge text-uppercase mb-8" style="background: linear-gradient(158deg, #826FFF 1.14%, #511CFF 51.87%, #00D1FF 104.76%);">Testimonials</span>
          <p class="h4 fw-normal text-white mb-8">The AI chat assistant not only engages visitors but also collects valuable data and insights. We now have a better understanding of our customers&apos; preferences and can tailor our offerings accordingly. ChatBotX is a must-have for any business.</p>
          <div class="mb-8">
            <h5 class="fw-medium text-white mb-2">Beby Jennifer</h5><span class="h6 fw-normal text-light-light">CEO of an IT Solutions Company</span>
          </div>
          <div>
            <button class="btn me-2 btn-outline-light 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 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="black"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-5 py-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 #3669

Bootstrap

Casper

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container position-relative">
      <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="M29 16H3" stroke="#F7F0FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M29 8H3" stroke="#F7F0FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M12 24L3 24" stroke="#F7F0FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button><a class="d-none d-lg-block position-absolute top-50 start-50 translate-middle navbar-brand" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo-white.svg" alt=""/></a><a class="d-lg-none navbar-brand" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo-white.svg" alt=""/></a>
      <div class="collapse navbar-collapse" 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>
    </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 #3670

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-2xl mx-auto mb-14 text-center">
      <h3 class="font-heading fw-medium text-white mb-3">Achievements So far</h3>
      <p class="mw-lg mx-auto 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-sm mw-md-4xl mx-auto">
      <div class="row">
        <div class="col-12 col-md-6 mb-8 mb-md-0">
          <div class="p-8 rounded border border-primary-dark bg-white bg-opacity-10" style="backdrop-filter: blur(10px);"><img class="img-fluid d-block mb-14 mb-md-32" src="casper-assets/stats/avatar-3.png" alt=""/>
            <div class="mw-xs">
              <h3 class="text-white mb-2">99%</h3><span class="d-block display-5 text-white mb-1">Partners Joined</span>
              <p class="small text-white">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="p-8 rounded border border-primary-dark bg-white bg-opacity-10" style="backdrop-filter: blur(10px);"><img class="img-fluid d-block mb-14 mb-md-32" src="casper-assets/stats/avatar-1.png" alt=""/>
            <div class="mw-xs">
              <h3 class="text-white mb-2">$ 300M</h3><span class="d-block display-5 text-white mb-1">Capital Raised</span>
              <p class="small text-white">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            </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 #3671

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-center-right-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 mt-lg-n12 me-sm-n2 me-lg-20 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
    <div class="mw-3xl mx-auto mb-20 text-center">
      <div class="mw-lg mx-auto mw-lg-none mb-12">
        <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 class="mw-sm mw-md-lg mw-lg-none mx-auto py-2 px-10 px-lg-2 bg-secondary-dark bg-opacity-75 rounded-pill"><a class="btn btn-primary text-black" href="#">All Categories</a><a class="btn btn-link text-white" href="#">Branding</a><a class="btn btn-link text-white" href="#">UI Design</a><a class="btn btn-link text-white" href="#">Illustration</a><a class="btn btn-link text-white" href="#">Development</a></div>
    </div>
    <div class="mw-md mx-auto mw-md-none">
      <div class="row">
        <div class="col-md-6 col-lg-4 mb-8 mb-md-0">
          <div class="d-flex flex-column h-100">
            <div class="position-relative d-flex flex-column pt-24 h-100 pb-6 px-6 mb-8 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/portfolio/projects-box-vertical-1.png" alt=""/><a class="d-block mt-auto text-black p-6 position-relative rounded overflow-hidden" href="#"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/portfolio/bg-gradient-square.png" alt=""/>
                <div class="position-relative">
                  <div class="d-flex mb-20 align-items-center justify-content-between"><img class="img-fluid" src="casper-assets/portfolio/logo-icon-2.svg" alt=""/>
                    <svg width="33" height="32" viewbox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24.3934 8.82667C24.2581 8.50087 23.9992 8.24197 23.6734 8.10667C23.5131 8.03835 23.3409 8.00211 23.1667 8H9.83337C9.47975 8 9.14061 8.14048 8.89057 8.39052C8.64052 8.64057 8.50004 8.97971 8.50004 9.33333C8.50004 9.68696 8.64052 10.0261 8.89057 10.2761C9.14061 10.5262 9.47975 10.6667 9.83337 10.6667H19.9534L8.88671 21.72C8.76174 21.844 8.66254 21.9914 8.59485 22.1539C8.52716 22.3164 8.49231 22.4907 8.49231 22.6667C8.49231 22.8427 8.52716 23.017 8.59485 23.1794C8.66254 23.3419 8.76174 23.4894 8.88671 23.6133C9.01066 23.7383 9.15813 23.8375 9.3206 23.9052C9.48308 23.9729 9.65736 24.0077 9.83337 24.0077C10.0094 24.0077 10.1837 23.9729 10.3461 23.9052C10.5086 23.8375 10.6561 23.7383 10.78 23.6133L21.8334 12.5467V22.6667C21.8334 23.0203 21.9738 23.3594 22.2239 23.6095C22.4739 23.8595 22.8131 24 23.1667 24C23.5203 24 23.8595 23.8595 24.1095 23.6095C24.3596 23.3594 24.5 23.0203 24.5 22.6667V9.33333C24.4979 9.1591 24.4617 8.98696 24.3934 8.82667Z" fill="black"></path>
                    </svg>
                  </div>
                  <div>
                    <h5 class="fw-medium">Jiggle Branding</h5>
                    <p class="small">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
                  </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 #3672

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0 w-100" src="casper-assets/team/triangle-line.png" alt=""/>
  <div class="container position-relative"><img class="d-none d-md-block position-absolute top-0 start-0 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
    <div class="mw-3xl mx-auto mb-52 mb-md-40 mb-lg-18 text-center">
      <h2 class="font-heading fw-medium text-white mb-6">Get to know our Team</h2>
      <p class="display-5 lh-lg text-light-light mb-6">Mi turpis turpis in justo pellentesque id nibh praesent.</p><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 class="mw-sm mw-md-2xl mw-lg-6xl mx-auto position-relative"><img class="position-absolute bottom-100 end-0 mb-n10 me-n20 me-xl-n32 px-10 px-md-0 mw-xs mw-xl-none" src="casper-assets/team/robot.png" alt=""/>
      <div class="row position-relative">
        <div class="col-12 col-md-6 col-lg-3 mb-8 mb-lg-0">
          <div class="pt-3 px-3 pb-5 bg-white rounded"><img class="img-fluid d-block w-100" src="casper-assets/team/avatar-square-md-1.png" alt=""/>
            <div class="mt-4 text-center"><span class="d-block display-5 fw-medium">Cameron Williamson</span><span class="small text-light-light">Founder</span></div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3 mb-8 mb-lg-0">
          <div class="pt-3 px-3 pb-5 bg-white rounded"><img class="img-fluid d-block w-100" src="casper-assets/team/avatar-square-md-2.png" alt=""/>
            <div class="mt-4 text-center"><span class="d-block display-5 fw-medium">Annette Black</span><span class="small text-light-light">Co-Founder</span></div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3 mb-8 mb-lg-0">
          <div class="pt-3 px-3 pb-5 bg-white rounded"><img class="img-fluid d-block w-100" src="casper-assets/team/avatar-square-md-3.png" alt=""/>
            <div class="mt-4 text-center"><span class="d-block display-5 fw-medium">Robert Fox</span><span class="small text-light-light">Art Director</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 #3673

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0 w-100" src="casper-assets/faq/gradient-line-triangle.png" alt=""/><img class="position-absolute bottom 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">
    <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-white">Nunc et tellus non erat accumsan aliquam eget non mi.</p>
      </div>
      <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 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-dark 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 rounded">
          <div class="d-flex align-items-center justify-content-between"><span class="me-4 display-5 text-dark 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 #3674

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-lg-none 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-lg-6 mb-20 mb-lg-0">
          <div><img class="img-fluid d-block w-100 mb-8" src="casper-assets/blog/post-banner-photo.png" alt=""/>
            <h4 class="text-white fw-medium mb-4">Consectures Dummy Content consequat duis</h4>
            <div class="pt-4 border-top border-light border-opacity-10">
              <p class="pe-8 text-white mb-4">By understanding your vi amet minim mollit nonsitors&apos; needs, our chat assistant creates a unique experience</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

Bootstrap Component #3675

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/features/left-double-circle.svg" alt=""/><img class="position-absolute top-0 start-50 mt-lg-n10 translate-middle-x" src="casper-assets/blur/blur-center-top-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 start-0 mt-n10 ms-md-20 animate-spinStar" src="casper-assets/features/blink-star.png" alt=""/>
    <div class="mb-8 text-center"><span class="badge text-uppercase mb-4" 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-3">Intelligent Conversations</h2>
      <p class="display-5 lh-lg text-light-light">Casper is powered by state-of-the-art artificial intelligence</p>
    </div>
    <div class="mw-md mx-auto mw-md-4xl">
      <div class="row">
        <div class="col-12 mb-8">
          <div class="position-relative pt-6 px-8 pb-10 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/features/card-bg-image-1.png" alt=""/>
            <div class="position-relative">
              <h3 class="fw-medium text-white mb-6">01</h3>
              <p class="display-4 fw-medium text-white mb-28">Intelligent Conversations</p><a class="btn btn-outline-light" href="#"><span class="me-2">TRY IT NOW</span>
                <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9999 11C11.8021 11 11.6088 11.0586 11.4443 11.1685C11.2799 11.2784 11.1517 11.4346 11.076 11.6173C11.0003 11.8 10.9805 12.0011 11.0191 12.1951C11.0577 12.3891 11.153 12.5673 11.2928 12.7071C11.4327 12.847 11.6108 12.9422 11.8048 12.9808C11.9988 13.0194 12.1999 12.9996 12.3826 12.9239C12.5653 12.8482 12.7215 12.72 12.8314 12.5556C12.9413 12.3911 12.9999 12.1978 12.9999 12C12.9999 11.7348 12.8946 11.4804 12.707 11.2929C12.5195 11.1054 12.2651 11 11.9999 11ZM19.6199 12L19.7299 11.86C21.0799 10 21.3999 8.29 20.6599 7C19.9199 5.71 18.2599 5.14 15.9999 5.37H15.8199C14.9099 3.3 13.5599 2 11.9999 2C10.4399 2 9.08991 3.3 8.18991 5.4L7.99991 5.37C5.73991 5.14 4.07991 5.71 3.33991 7C2.59991 8.29 2.91991 10 4.26991 11.86L4.37991 12L4.26991 12.14C2.91991 14 2.59991 15.71 3.33991 17C3.99991 18.1 5.26991 18.68 6.99991 18.68C7.30991 18.68 7.62991 18.68 7.99991 18.63H8.17991C9.08991 20.7 10.4399 22 11.9999 22C13.5599 22 14.9099 20.7 15.8099 18.6H15.9899C16.3299 18.6 16.6499 18.65 16.9899 18.65C18.7599 18.65 20.0599 18.07 20.6899 16.97C21.4299 15.68 21.1099 13.97 19.7599 12.11L19.6199 12ZM5.06991 8C5.31991 7.56 6.06991 7.32 7.06991 7.32H7.55991C7.40321 7.93517 7.2863 8.5598 7.20991 9.19C6.70045 9.57537 6.21613 9.99288 5.75991 10.44C4.99991 9.44 4.77991 8.5 5.06991 8ZM5.06991 16C4.77991 15.5 5.06991 14.56 5.73991 13.53C6.19613 13.9771 6.68045 14.3946 7.18991 14.78C7.26631 15.4135 7.38322 16.0415 7.53991 16.66C6.29991 16.74 5.35991 16.5 5.06991 16ZM11.9999 4C12.5599 4 13.2299 4.66 13.7999 5.83C13.189 6.00731 12.5881 6.21762 11.9999 6.46C11.4117 6.21762 10.8109 6.00731 10.1999 5.83C10.7699 4.66 11.4399 4 11.9999 4ZM11.9999 20C11.4399 20 10.7699 19.34 10.1999 18.17C10.8109 17.9927 11.4117 17.7824 11.9999 17.54C12.5881 17.7824 13.189 17.9927 13.7999 18.17C13.2299 19.34 12.5599 20 11.9999 20ZM14.9299 13.69C14.4699 14.01 13.9999 14.31 13.4999 14.6C12.9999 14.89 12.4999 15.15 11.9999 15.38C11.4999 15.1467 10.9999 14.8867 10.4999 14.6C9.99991 14.31 9.49991 14.01 9.06991 13.69C8.99991 13.15 8.99991 12.59 8.99991 12C8.99991 11.41 8.99991 10.85 9.06991 10.31C9.52991 9.99 9.99991 9.69 10.4999 9.4C10.9999 9.11 11.4999 8.85 11.9999 8.62C12.4999 8.85333 12.9999 9.11333 13.4999 9.4C13.9999 9.69 14.4999 9.99 14.9299 10.31C14.9299 10.85 14.9999 11.41 14.9999 12C14.9999 12.59 14.9999 13.15 14.9299 13.69ZM18.9299 16C18.6399 16.5 17.6999 16.75 16.4599 16.66C16.6166 16.0415 16.7335 15.4135 16.8099 14.78C17.3194 14.3946 17.8037 13.9771 18.2599 13.53C18.9999 14.56 19.2199 15.5 18.9299 16ZM18.2599 10.47C17.8037 10.0229 17.3194 9.60537 16.8099 9.22C16.7335 8.5898 16.6166 7.96517 16.4599 7.35H16.9499C17.9499 7.35 18.6799 7.59 18.9499 8.03C19.2199 8.47 18.9999 9.44 18.2599 10.47Z" fill="currentColor"></path>
                </svg></a>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 mb-8 mb-md-0">
          <div class="position-relative pt-6 px-8 pb-10 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/features/card-bg-image-2.png" alt=""/>
            <div class="position-relative">
              <h3 class="fw-medium text-white mb-6">02</h3>
              <p class="display-4 fw-medium text-white mb-28">Personalized Experiences</p><a class="btn btn-outline-light" href="#"><span class="me-2">TRY IT NOW</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 #3676

Bootstrap

Casper

<section class="p-8 bg-dark position-relative overflow-hidden">
  <div class="position-relative pt-40 pt-sm-28 pb-18 px-4 px-sm-8 px-md-12 ps-xl-20 pe-xl-16 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/team/gradient-color-bg.png" alt=""/>
    <div class="container position-relative">
      <div class="mw-lg mw-lg-none mx-auto">
        <div class="row align-items-center">
          <div class="col-12 col-lg-6 mb-20 mb-lg-0 position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 mt-n32 mt-lg-n64 me-n12 me-md-n24 me-lg-20" src="casper-assets/team/chip-side.png" alt=""/><img class="d-block d-md-none position-absolute top-0 end-0 mt-n40" style="width: 164px;" src="casper-assets/team/chip-side.png" alt=""/>
            <div class="mw-sm mw-lg-lg">
              <h3 class="font-heading fw-medium mb-6">Meet our amazing Team</h3>
              <p class="display-5 lh-lg text-secondary mb-6">Mi turpis turpis in justo pellentesque id nibh praesent.</p><a class="btn btn-primary text-black" 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="col-12 col-lg-6">
            <div class="row">
              <div class="col-sm-6 mt-n8">
                <div class="position-relative mb-8 rounded overflow-hidden">
                  <div class="position-absolute bottom-0 start-0 w-100 p-6" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);"><span class="d-block display-5 text-white fw-medium">Dianne Russell</span><span class="d-block text-light-light fw-medium">CEO &amp; Founder</span></div><img class="img-fluid w-100" style="height: 280px; object-fit: cover;" src="casper-assets/team/people-photos-1.png" alt=""/>
                </div>
                <div class="position-relative rounded overflow-hidden">
                  <div class="position-absolute bottom-0 start-0 w-100 p-6" style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);"><span class="d-block display-5 text-white fw-medium">Bessie Cooper</span><span class="d-block text-light-light fw-medium">Marketing Manager</span></div><img class="img-fluid w-100" style="height: 280px; object-fit: cover;" src="casper-assets/team/people-photos-2.png" alt=""/>
                </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 #3677

Bootstrap

Casper

<section>
  <nav class="navbar navbar-expand-lg navbar-light position-relative"><img class="position-absolute top-0 start-0 w-100 h-100" src="casper-assets/navigations/bg-navigation.png" alt=""/>
    <div class="container position-relative"><a class="navbar-brand" href="#"><img class="img-fluid" src="casper-assets/logos/casper-logo.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-10" id="nav01">
        <div class="ms-auto"><a class="btn me-4 btn-sm text-primary 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-black" 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 #3678

Bootstrap

Casper

<section class="bg-dark position-relative overflow-hidden">
  <div class="d-none d-lg-block position-absolute top-0 start-0 col-5 h-100"><img class="position-relative img-fluid d-block w-100 h-100" style="object-fit: cover;" src="casper-assets/cta/bg-left-lg.png" alt=""/><img class="position-absolute top-0 end-0 me-4" src="casper-assets/cta/planet-left.png" alt=""/><img class="position-absolute top-0 start-0 mt-20" src="casper-assets/cta/robot-left.png" alt=""/><img class="position-absolute bottom-0 end-0 mb-lg-12 me-n40" src="casper-assets/cta/plant-elft.png" alt=""/></div>
  <div class="container position-relative">
    <div class="mw-md mw-lg-lg mx-auto me-lg-0">
      <div class="py-12 py-lg-32">
        <h2 class="h3 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-8 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 text-black" href="#"><span class="me-2">START FREE TRIAL</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 class="d-lg-none position-relative"><img class="position-relative img-fluid d-block w-100 h-100" style="object-fit: cover;" src="casper-assets/cta/bg-left-lg.png" alt=""/><img class="position-absolute top-0 end-0 me-4 w-50" src="casper-assets/cta/planet-left.png" alt=""/><img class="position-absolute bottom-0 start-0 mb-32 w-50" src="casper-assets/cta/robot-left.png" alt=""/><img class="position-absolute bottom-0 end-0 w-50" src="casper-assets/cta/plant-elft.png" alt=""/></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 #3679

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-center-right-violet.svg" alt=""/><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/bottom-left-blue.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 mt-lg-n12 me-sm-n2 me-lg-20 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
    <div class="mw-xl mb-14">
      <h2 class="font-heading fw-medium text-white mb-8">The work we do</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 class="mw-md-none mx-auto">
      <div class="row mb-n12 mb-sm-n20 justify-content-between">
        <div class="col-sm-6 col-md-5 col-md-4 mb-12 mb-sm-20"><a class="d-block" href="#"><img class="img-fluid d-block w-100 mb-6" src="casper-assets/portfolio/image-portfolio-1.png" alt=""/>
            <h5 class="pe-8 display-3 fw-medium text-white">Symtric -  Branding &amp; Web Development</h5></a></div>
        <div class="col-sm-6 col-lg-5 mb-12 mb-sm-20"><a class="d-block" href="#"><img class="img-fluid d-block w-100 mb-6" src="casper-assets/portfolio/image-portfolio-2.png" alt=""/>
            <h5 class="pe-8 display-3 fw-medium text-white">Jiggle - Mobile Application for Finance</h5></a></div>
        <div class="col-md-10 col-lg-9 mb-12 mb-sm-20"><a class="d-block" href="#"><img class="img-fluid d-block w-100 mb-6" src="casper-assets/portfolio/image-portfolio-3.png" alt=""/>
            <h5 class="pe-8 display-3 fw-medium text-white">Welytics - Branding, Illustration &amp; Web Application for health agency</h5></a></div>
        <div class="col-sm-6 col-md-5 col-md-4 mb-12 mb-sm-20"><a class="d-block" href="#"><img class="img-fluid d-block w-100 mb-6" src="casper-assets/portfolio/image-portfolio-1.png" alt=""/>
            <h5 class="pe-8 display-3 fw-medium text-white">Symtric Branding &amp; Web Development</h5></a></div>
        <div class="col-sm-6 col-lg-5 mb-12 mb-sm-20"><a class="d-block" href="#"><img class="img-fluid d-block w-100 mb-6" src="casper-assets/portfolio/image-portfolio-4.png" alt=""/>
            <h5 class="pe-8 display-3 fw-medium text-white">Symtric Branding &amp; Web Development</h5></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 #3680

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-sm-block position-absolute top-0 start-0 mt-40 mt-md-10 mt-lg-0 ms-n10 ms-lg-0 col-md-2 col-xl-auto" src="casper-assets/pricing/axe.png" alt=""/><img class="d-none d-sm-block position-absolute bottom-0 end-0 col-3 col-xl-auto" src="casper-assets/pricing/shield.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">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="mw-xs mw-md-3xl mx-auto">
      <div class="row">
        <div class="col-md-6 mb-8 mb-md-0">
          <div class="p-10 bg-white bg-opacity-10 rounded" style="backdrop-filter: blur(5px);"><img class="d-block mb-8 img-fluid" src="casper-assets/pricing/avatar-pricing1.png" alt=""/><span class="d-block mb-6 display-2 fw-semibold text-white">$25</span>
            <h5 class="display-4 fw-medium text-white">Basic</h5>
            <p class="small text-white mb-8">Gain valuable insights into your users&apos; preferences, behavior, and frequently asked questions</p><a class="btn btn-primary text-black" href="#"><span class="me-2">CHOOSE PLAN</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="p-10 bg-white bg-opacity-10 rounded" style="backdrop-filter: blur(5px);"><img class="d-block mb-8 img-fluid" src="casper-assets/pricing/avatar-pricing3.png" alt=""/><span class="d-block mb-6 display-2 fw-semibold text-white">$50</span>
            <h5 class="display-4 fw-medium text-white">Advanced</h5>
            <p class="small text-white mb-8">Gain valuable insights into your users&apos; preferences, behavior, and frequently asked questions</p><a class="btn btn-primary text-black" href="#"><span class="me-2">CHOOSE PLAN</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>

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

Get the code for 13,400+ components

Bootstrap Component #3662

Get the code for 13,400+ components

Bootstrap Component #3663

Get the code for 13,400+ components

Bootstrap Component #3664

Get the code for 13,400+ components

Bootstrap Component #3665

Get the code for 13,400+ components

Bootstrap Component #3666

Get the code for 13,400+ components

Bootstrap Component #3667

Get the code for 13,400+ components

Bootstrap Component #3668

Get the code for 13,400+ components

Bootstrap Component #3669

Get the code for 13,400+ components

Bootstrap Component #3670

Get the code for 13,400+ components

Bootstrap Component #3671

Get the code for 13,400+ components

Bootstrap Component #3672

Get the code for 13,400+ components

Bootstrap Component #3673

Get the code for 13,400+ components

Bootstrap Component #3674

Get the code for 13,400+ components

Bootstrap Component #3675

Get the code for 13,400+ components

Bootstrap Component #3676

Get the code for 13,400+ components

Bootstrap Component #3677

Get the code for 13,400+ components

Bootstrap Component #3678

Get the code for 13,400+ components

Bootstrap Component #3679

Get the code for 13,400+ components

Bootstrap Component #3680

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