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

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/headers/circle-double-element-dark.svg" alt=""/><img class="d-none d-sm-block position-absolute top-0 start-50 mt-lg-16 ms-40 ms-md-64 ms-lg-0 img-fluid animate-spinStar" src="casper-assets/headers/blink.png" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-8 mb-md-0 position-relative"><img class="position-absolute bottom-0 start-0 ms-n10 img-fluid" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
        <div class="mw-md mw-lg-xl mx-auto position-relative">
          <h2 class="font-heading fw-medium text-white mb-6">Sign in to your account</h2>
          <p class="display-5 lh-lg text-light-light">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p><img class="img-fluid" src="casper-assets/sign-in/chip-sm.png" alt=""/>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="mw-lg mx-auto ms-lg-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>

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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0" src="casper-assets/blur/blur-left-top-violet.svg" alt=""/><img class="position-absolute top-0 end-0" src="casper-assets/portfolio/double-lines.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 end-0 mt-lg-n12 me-md-10 me-lg-20 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
    <div class="mw-2xl mx-auto mb-20 text-center">
      <h2 class="font-heading fw-medium text-white mb-6">Our Projects</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-md mw-lg-6xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="bg-secondary bg-opacity-10 h-100" style="backdrop-filter: blur(10px);"><a class="btn h-100 p-8 btn-outline-primary text-start rounded" href="#">
              <div class="d-flex flex-column align-items-start h-100"><span class="d-block display-5 mb-4">01</span><img class="img-fluid d-block mb-24 mb-xl-32" src="casper-assets/portfolio/logo-icon-2.svg" alt=""/>
                <h4 class="mt-auto display-3 fw-medium text-white">Jiggle Branding</h4>
                <p class="small lh-lg text-white mb-3">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
                <div class="mb-n2"><span class="d-inline-block mb-2 me-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-white bg-opacity-10">Branding</span><span class="d-inline-block mb-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-white bg-opacity-10">ILLUSTRATION</span></div>
              </div></a></div>
        </div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="bg-secondary bg-opacity-10 h-100" style="backdrop-filter: blur(10px);"><a class="btn h-100 p-8 btn-outline-primary text-start rounded" href="#">
              <div class="d-flex flex-column align-items-start h-100"><span class="d-block display-5 mb-4">02</span><img class="img-fluid d-block mb-24 mb-xl-32" src="casper-assets/portfolio/logo-icon-2.svg" alt=""/>
                <h4 class="mt-auto display-3 fw-medium text-white">Welytics Company Profile</h4>
                <p class="small lh-lg text-white mb-3">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
                <div class="mb-n2"><span class="d-inline-block mb-2 me-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-white bg-opacity-10">Branding</span><span class="d-inline-block mb-2 me-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-white bg-opacity-10">ILLUSTRATION</span><span class="d-inline-block mb-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-white bg-opacity-10">LANDING PAGE</span></div>
              </div></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 #3623

Bootstrap

Casper

<section class="pt-12 pt-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=""/><img class="d-none d-md-block position-absolute top-50 start-0 mt-n40 mt-lg-n32 ms-5 ms-lg-20 ms-xl-40" src="casper-assets/download/small-star.png" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mw-md-4xl mx-auto mb-28 text-center">
      <h3 class="font-heading fw-medium text-white">Get Benefit with Casper App</h3>
      <p class="mw-lg mx-auto mb-16 fs-6 text-white">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
      <div class="d-flex justify-content-center"><a class="d-inline-block me-3" href="#"><img class="img-fluid" style="max-height: 48px;" src="casper-assets/download/button1.png" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" style="max-height: 48px;" src="casper-assets/download/button2.png" alt=""/></a></div>
    </div>
    <div class="mw-4xl mx-auto position-relative"><img class="img-fluid d-block w-100 mw-sm mw-md-md mw-lg-xl mx-auto" src="casper-assets/download/ellipse-gradient-bg.png" alt=""/><img class="position-absolute bottom-0 start-0 ms-n10 ms-sm-8 ms-md-16 ms-lg-10 col-12 col-sm-9 col-md-8 col-lg-9" src="casper-assets/download/phone-vertival-white.png" alt=""/><img class="position-absolute bottom-0 start-0 ms-16 ms-sm-40 ms-md-52 ms-lg-64 col-11 col-sm-8 col-md-7 col-lg-8" src="casper-assets/download/phone-robot.png" alt=""/></div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3624

Bootstrap

Casper

<section class="pt-12 pt-lg-24 pb-10 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n80 mt-n40" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-sm-block position-absolute top-0 end-0 me-md-n12 me-xl-n40" src="casper-assets/footer/axe.png" alt=""/><img class="position-absolute top-0 start-50 ms-lg-40 animate-spinStar" src="casper-assets/footer/blink-star.png" alt=""/><img class="img-fluid d-block mb-16" src="casper-assets/footer/logo-c-only.svg" alt=""/>
    <div class="row">
      <div class="col-12 col-md-6 mb-12 mb-md-0">
        <div class="mw-xs mw-lg-sm">
          <h4 class="mw-xs fw-medium text-white mb-3">Subscribe to our newsletter</h4>
          <label class="form-label text-white" for="">Email</label>
          <div class="d-flex align-items-center ps-4 pe-2 mw-sm bg-secondary-dark bg-opacity-50 rounded-pill">
            <svg width="24" height="25" viewbox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 4.5H5C4.20435 4.5 3.44129 4.81607 2.87868 5.37868C2.31607 5.94129 2 6.70435 2 7.5V17.5C2 18.2956 2.31607 19.0587 2.87868 19.6213C3.44129 20.1839 4.20435 20.5 5 20.5H19C19.7956 20.5 20.5587 20.1839 21.1213 19.6213C21.6839 19.0587 22 18.2956 22 17.5V7.5C22 6.70435 21.6839 5.94129 21.1213 5.37868C20.5587 4.81607 19.7956 4.5 19 4.5ZM18.59 6.5L12.71 12.38C12.617 12.4737 12.5064 12.5481 12.3846 12.5989C12.2627 12.6497 12.132 12.6758 12 12.6758C11.868 12.6758 11.7373 12.6497 11.6154 12.5989C11.4936 12.5481 11.383 12.4737 11.29 12.38L5.41 6.5H18.59ZM20 17.5C20 17.7652 19.8946 18.0196 19.7071 18.2071C19.5196 18.3946 19.2652 18.5 19 18.5H5C4.73478 18.5 4.48043 18.3946 4.29289 18.2071C4.10536 18.0196 4 17.7652 4 17.5V7.91L9.88 13.79C10.4425 14.3518 11.205 14.6674 12 14.6674C12.795 14.6674 13.5575 14.3518 14.12 13.79L20 7.91V17.5Z" fill="#80818C"></path>
            </svg>
            <input class="form-control bg-transparent border-0 shadow-none rounded-1 bg-secondary-dark" type="email" placeholder="pat@shuffle.dev"/>
            <button class="flex-shrink-0 btn btn-primary p-0" style="width: 36px; height: 36px">
              <svg width="20" height="21" viewbox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.4333 11.0167C17.3937 10.9144 17.3342 10.8209 17.2583 10.7417L14.7583 8.24167C14.6014 8.08475 14.3886 7.99659 14.1667 7.99659C13.9447 7.99659 13.7319 8.08475 13.575 8.24167C13.4181 8.39859 13.3299 8.61142 13.3299 8.83333C13.3299 9.05525 13.4181 9.26808 13.575 9.425L14.6583 10.5H6.66666C6.44564 10.5 6.23368 10.4122 6.0774 10.2559C5.92112 10.0996 5.83332 9.88768 5.83332 9.66667V6.33333C5.83332 6.11232 5.74553 5.90036 5.58925 5.74408C5.43297 5.5878 5.221 5.5 4.99999 5.5C4.77898 5.5 4.56701 5.5878 4.41073 5.74408C4.25445 5.90036 4.16666 6.11232 4.16666 6.33333V9.66667C4.16666 10.3297 4.43005 10.9656 4.89889 11.4344C5.36773 11.9033 6.00362 12.1667 6.66666 12.1667H14.6583L13.575 13.2417C13.4969 13.3191 13.4349 13.4113 13.3926 13.5129C13.3503 13.6144 13.3285 13.7233 13.3285 13.8333C13.3285 13.9433 13.3503 14.0523 13.3926 14.1538C13.4349 14.2554 13.4969 14.3475 13.575 14.425C13.6525 14.5031 13.7446 14.5651 13.8462 14.6074C13.9477 14.6497 14.0566 14.6715 14.1667 14.6715C14.2767 14.6715 14.3856 14.6497 14.4871 14.6074C14.5887 14.5651 14.6809 14.5031 14.7583 14.425L17.2583 11.925C17.3342 11.8457 17.3937 11.7523 17.4333 11.65C17.5167 11.4471 17.5167 11.2196 17.4333 11.0167Z" fill="black"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="col-12 col-sm-4 col-md-2 mb-8 mb-sm-0">
        <div><span class="d-block display-5 mb-4 text-white fw-medium">Services</span>
          <ul class="list-unstyled mb-0">
            <li class="mb-4"><a class="d-inline-block text-light-light" href="#">Email Marketing</a></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 #3625

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="text-center mb-14"><span class="d-block mb-6 text-light-light">Type Caption Here</span>
      <h2 class="h3 font-heading fw-medium text-white mb-0">Blog &amp; Articles</h2>
    </div>
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-5 col-xl-6 mb-12 mb-lg-0"><a class="d-block" href="#"><img class="img-fluid d-block w-100" src="casper-assets/blog/blog-5-article1.png" alt=""/>
            <div class="mt-5 mw-xl"><span class="d-block mb-5 text-light-light">Jul 20, 2022</span>
              <h4 class="text-white fw-medium mb-5">Consectures Dummy Content Velit officia consequat duis enim velit</h4>
              <p class="fs-6 text-light-light mb-0">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit xercitation.</p>
            </div></a></div>
        <div class="col-lg-7 col-xl-6">
          <div><a class="d-block mb-8" href="#">
              <div class="row">
                <div class="col-4"><img class="img-fluid h-100" src="casper-assets/blog/blog-5-article2.png" alt=""/></div>
                <div class="col-8 pe-sm-20"><span class="d-block mb-5 text-light-light">Jul 20, 2022</span>
                  <h5 class="display-5 lh-lg text-white fw-medium mb-0">Consectures Content Velitpato officia consequat duis enim velit mollit</h5>
                </div>
              </div></a><a class="d-block mb-8" href="#">
              <div class="row">
                <div class="col-4"><img class="img-fluid h-100" src="casper-assets/blog/blog-5-article3.png" alt=""/></div>
                <div class="col-8 pe-sm-20"><span class="d-block mb-5 text-light-light">Jul 20, 2022</span>
                  <h5 class="display-5 lh-lg text-white fw-medium mb-0">Consectures Content Velitpato officia consequat duis enim velit mollit</h5>

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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="text-center mb-16">
      <h2 class="font-heading fw-medium text-white mb-6">How Does Casper Work</h2>
      <p class="display-5 lh-lg text-light-light mb-4">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
    </div>
    <div class="mw-md mx-auto mw-md-none">
      <div class="row">
        <div class="col-md-6 mb-24">
          <div class="mw-md-xs mw-lg-lg">
            <h5 class="display-2 fw-semibold text-white mb-0">01. Upload</h5>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="display-5 lh-lg text-white mb-8">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
            <div class="position-relative"><img class="img-fluid d-block w-100" src="casper-assets/how-it-works/bg-square-gradient.png" alt=""/>
              <div class="position-absolute bottom-0 end-0 w-100 ps-10 pt-10"><img class="img-fluid d-block ms-auto" src="casper-assets/how-it-works/image-square-sm-2.png" alt=""/></div>
            </div>
          </div>
        </div>
        <div class="col-md-6 mb-24">
          <div class="mw-md-xs mw-lg-lg ms-md-auto">
            <h5 class="display-2 fw-semibold text-white mb-0">02. Auto Generation</h5>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="display-5 lh-lg text-white mb-8">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
            <div class="position-relative"><img class="img-fluid d-block w-100" src="casper-assets/how-it-works/bg-square-gradient.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 #3627

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n52 mt-n80" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-lg-block position-absolute top-0 start-50 ms-n32 mt-n28 mt-xl-n24 animate-spinStar" src="casper-assets/logo-clouds/blink-star.png" alt=""/>
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row">
        <div class="col-lg-6 order-last order-lg-first mt-14 mt-lg-0">
          <div class="mw-lg">
            <div class="row mb-n8 justify-content-center">
              <div class="col-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons1.svg" alt=""/></div>
              <div class="col-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons2.svg" alt=""/></div>
              <div class="col-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons3.svg" alt=""/></div>
              <div class="col-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons4.svg" alt=""/></div>
              <div class="col-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons5.svg" alt=""/></div>
              <div class="col-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons1.svg" alt=""/></div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div>
            <h3 class="font-heading fw-medium text-white mb-8">Over 100+ Company Use Casper</h3>
            <p class="fs-6 text-light-light mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
          </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 #3628

Bootstrap

Casper

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

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

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="row">
      <div class="col-md-5 mb-14 mb-md-0">
        <div>
          <h2 class="h3 font-heading fw-medium text-white mb-6">Frequently Ask Questions</h2>
          <p class="fs-6 text-light-light mb-8">Nunc et tellus non erat accumsan aliquam eget  mi. </p><a class="btn btn-primary text-black" href="#"><span class="me-2">CONTACT US</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.44 13C19.22 13 18.99 12.93 18.77 12.88C18.3245 12.7818 17.8866 12.6515 17.46 12.49C16.9961 12.3212 16.4861 12.33 16.0283 12.5146C15.5704 12.6992 15.1971 13.0466 14.98 13.49L14.76 13.94C13.786 13.3982 12.891 12.7252 12.1 11.94C11.3147 11.149 10.6418 10.254 10.1 9.27999L10.52 8.99999C10.9633 8.78291 11.3108 8.40952 11.4954 7.95168C11.68 7.49384 11.6888 6.9839 11.52 6.51999C11.3612 6.09241 11.2309 5.65479 11.13 5.20999C11.08 4.98999 11.04 4.75999 11.01 4.52999C10.8885 3.82561 10.5196 3.18773 9.9696 2.73123C9.4196 2.27473 8.72467 2.0296 8.00998 2.03999H5.00998C4.57901 2.03594 4.15223 2.1248 3.75869 2.30052C3.36515 2.47624 3.01409 2.73469 2.72941 3.05827C2.44473 3.38186 2.23311 3.76298 2.10897 4.1757C1.98482 4.58842 1.95106 5.02305 2.00998 5.44999C2.54272 9.63937 4.45601 13.5319 7.44763 16.5126C10.4393 19.4934 14.3387 21.3925 18.53 21.91H18.91C19.6474 21.9111 20.3594 21.6405 20.91 21.15C21.2263 20.867 21.4791 20.5202 21.6514 20.1323C21.8238 19.7444 21.9119 19.3244 21.91 18.9V15.9C21.8977 15.2054 21.6448 14.5365 21.1943 14.0077C20.7439 13.4788 20.1238 13.1226 19.44 13ZM19.94 19C19.9398 19.142 19.9094 19.2823 19.8508 19.4116C19.7921 19.5409 19.7066 19.6563 19.6 19.75C19.4882 19.8465 19.3576 19.9185 19.2164 19.9616C19.0752 20.0046 18.9265 20.0177 18.78 20C15.0349 19.5198 11.5562 17.8065 8.89269 15.1303C6.22917 12.4541 4.53239 8.96733 4.06998 5.21999C4.05406 5.07351 4.06801 4.92532 4.11098 4.78438C4.15395 4.64344 4.22505 4.51268 4.31998 4.39999C4.41369 4.29332 4.52904 4.20783 4.65836 4.14921C4.78767 4.09058 4.92799 4.06017 5.06998 4.05999H8.06998C8.30253 4.05482 8.5296 4.13087 8.71212 4.27506C8.89464 4.41925 9.02119 4.62256 9.06998 4.84999C9.10998 5.12332 9.15998 5.39332 9.21998 5.65999C9.3355 6.18713 9.48924 6.70517 9.67998 7.20999L8.27998 7.85999C8.16028 7.91491 8.0526 7.99294 7.96314 8.08959C7.87367 8.18623 7.80418 8.2996 7.75865 8.42318C7.71312 8.54677 7.69245 8.67812 7.69783 8.80971C7.7032 8.9413 7.73452 9.07054 7.78998 9.18999C9.22918 12.2727 11.7072 14.7508 14.79 16.19C15.0334 16.29 15.3065 16.29 15.55 16.19C15.6747 16.1454 15.7893 16.0764 15.8871 15.9872C15.985 15.8979 16.0641 15.7901 16.12 15.67L16.74 14.27C17.2569 14.4549 17.7846 14.6085 18.32 14.73C18.5866 14.79 18.8566 14.84 19.13 14.88C19.3574 14.9288 19.5607 15.0553 19.7049 15.2378C19.8491 15.4204 19.9252 15.6474 19.92 15.88L19.94 19ZM21.86 2.67999C21.7585 2.43564 21.5643 2.24147 21.32 2.13999C21.1998 2.08875 21.0707 2.06157 20.94 2.05999H16.94C16.6748 2.05999 16.4204 2.16535 16.2329 2.35288C16.0453 2.54042 15.94 2.79477 15.94 3.05999C15.94 3.32521 16.0453 3.57956 16.2329 3.7671C16.4204 3.95463 16.6748 4.05999 16.94 4.05999H18.52L15.23 7.35999C15.0437 7.54735 14.9392 7.8008 14.9392 8.06499C14.9392 8.32918 15.0437 8.58263 15.23 8.76999C15.4173 8.95624 15.6708 9.06078 15.935 9.06078C16.1992 9.06078 16.4526 8.95624 16.64 8.76999L19.94 5.47999V7.05999C19.94 7.32521 20.0453 7.57956 20.2329 7.7671C20.4204 7.95463 20.6748 8.05999 20.94 8.05999C21.2052 8.05999 21.4595 7.95463 21.6471 7.7671C21.8346 7.57956 21.94 7.32521 21.94 7.05999V3.05999C21.9384 2.92931 21.9112 2.80021 21.86 2.67999Z" fill="currentColor"></path>
            </svg></a>
        </div>
      </div>
      <div class="col-md-7">
        <div class="mw-2xl ms-lg-auto">
          <div>
            <button class="d-block mb-6 w-100 bg-transparent text-start fw-normal border-0 p-0">
              <div class="pb-6 border-bottom border-2 border-white border-opacity-25">
                <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="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.71 8.46002L18.36 14.12C18.4537 14.213 18.5281 14.3236 18.5789 14.4454C18.6296 14.5673 18.6558 14.698 18.6558 14.83C18.6558 14.962 18.6296 15.0927 18.5789 15.2146C18.5281 15.3365 18.4537 15.4471 18.36 15.54C18.1726 15.7263 17.9191 15.8308 17.655 15.8308C17.3908 15.8308 17.1373 15.7263 16.95 15.54L11.95 10.59L6.99996 15.54C6.8126 15.7263 6.55915 15.8308 6.29496 15.8308C6.03078 15.8308 5.77733 15.7263 5.58996 15.54C5.49548 15.4474 5.42031 15.337 5.36881 15.2151C5.31731 15.0932 5.29051 14.9623 5.28996 14.83C5.29051 14.6977 5.31731 14.5668 5.36881 14.445C5.42031 14.3231 5.49548 14.2126 5.58996 14.12L11.24 8.46002C11.3336 8.35851 11.4473 8.27751 11.5738 8.2221C11.7003 8.16669 11.8369 8.13809 11.975 8.13809C12.1131 8.13809 12.2497 8.16669 12.3762 8.2221C12.5027 8.27751 12.6163 8.35851 12.71 8.46002Z" fill="#A766E9"></path>
                  </svg>
                </div>
                <div class="mt-4 mw-xl">
                  <p class="fs-6 text-light-light mb-0">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Dummy conten amazing Ante nunc risus viverra vivamus.</p>

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

Bootstrap

Casper

<section class="pt-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n40 mt-n40" src="casper-assets/blur/center-violet-blue.svg" alt=""/><img class="d-none d-lg-block position-absolute top-0 start-0 col-3 col-lg-4 h-100" src="casper-assets/contact/left-side-image.png" alt=""/>
  <div class="container position-relative">
    <div class="mw-md mw-lg-lg mx-auto me-lg-0"><span class="d-block text-info mb-4">CONTACT US</span>
      <h2 class="font-heading fw-medium text-white mb-6">How can we help you?</h2>
      <p class="display-5 text-light-light mb-16">We&rsquo;re 24/7 ready to help you at anytime</p>
      <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>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center">
        <div class="flex-shrink-0 d-inline-flex align-items-center justify-content-center bg-success 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">

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

Bootstrap

Casper

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

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">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="mw-sm mw-md-none mx-auto mb-16">
      <div class="row mb-n8">
        <div class="col-md-6 col-lg-4 mb-8">
          <div class="bg-secondary bg-opacity-10 h-100 rounded" style="backdrop-filter: blur(10px);"><a class="btn flex-column align-items-start w-100 h-100 p-6 btn-outline-primary-dark text-start rounded position-relative" href="#"><img class="img-fluid d-block mb-16" style="height: 40px;" src="casper-assets/logo-clouds/logo-color-icons2.svg" alt=""/>
              <div class="mt-auto">
                <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">Pomorogo</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>

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

Bootstrap

Casper

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3634

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-sm-block position-absolute top-0 end-0 mt-lg-n12 me-md-10 me-lg-20 animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
    <div class="mw-2xl mx-auto mb-20 text-center">
      <h2 class="font-heading fw-medium text-white mb-6">Our Projects</h2>
      <p class="mw-xl mx-auto display-5 lh-lg text-light-light mb-8">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p><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 class="mw-sm mw-md-4xl mw-lg-5xl mx-auto">
      <div class="row mb-16">
        <div class="col-12 col-md-6 order-last order-md-first">
          <div class="mw-sm">
            <h4 class="display-3 fw-medium text-white">Welytics Company Profile</h4>
            <p class="small lh-lg text-white mb-3">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
            <div class="mb-n2"><span class="d-inline-block mb-2 me-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-secondary-dark">WEBSITE</span><span class="d-inline-block mb-2 me-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-secondary-dark">WEBFLOW</span><span class="d-inline-block mb-2 me-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-secondary-dark">UI DESIGN</span><span class="d-inline-block mb-2 px-5 py-2 rounded-pill text-white text-uppercase lh-lg bg-secondary-dark">DEVELOPMENT</span></div><a class="btn mt-12 mt-sm-20 mt-lg-32 btn-outline-light" href="#"><span class="me-2">SEE DETAILS</span>
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
              </svg></a>
          </div>
        </div>
        <div class="col-12 col-md-6 mb-8 mb-md-0"><img class="img-fluid rounded w-100 h-100" src="casper-assets/portfolio/portfolio-post1.png" alt=""/></div>
      </div>
      <div class="row mb-16">

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

Bootstrap

Casper

<section class="bg-primary-dark position-relative overflow-hidden"><img class="position-absolute top-0 start-0 h-100 w-100" style="object-fit: cover;" src="casper-assets/download/bg-gradient.png" alt=""/>
  <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 bg-primary-dark col-lg-4"><img class="position-absolute bottom-0 start-0 ms-lg-n96 mw-3xl mw-xl-none" src="casper-assets/download/phone-robot.png" alt=""/><img class="position-absolute bottom-0 start-0 ms-n64 ms-xl-n32 mw-2xl mw-xl-none" src="casper-assets/download/phonr-white-robot.png" alt=""/></div>
  <div class="container position-relative pt-12 pb-52 pt-lg-52">
    <div class="position-relative mw-md mw-md-lg mx-auto mx-lg-0">
      <h3 class="font-heading fw-medium">Get Benefit with Casper App</h3>
      <p class="fs-6">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
      <ul class="list-unstyled 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>
      </ul>
      <div class="d-flex"><a class="d-inline-block me-3" href="#"><img class="img-fluid" style="max-height: 48px;" src="casper-assets/download/button1.png" alt=""/></a><a class="d-inline-block" href="#"><img class="img-fluid" style="max-height: 48px;" src="casper-assets/download/button2.png" alt=""/></a></div>

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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 mt-n40 me-n20" src="casper-assets/blur/center-violet-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mb-16">
      <h2 class="font-heading fw-medium text-white mb-6">How it works</h2>
      <p class="display-5 lh-lg text-light-light mb-4">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
    </div>
    <div class="row align-items-center">
      <div class="col-md-4 col-lg-3 mb-32 mb-sm-24 mb-md-0">
        <div class="mw-sm mx-auto mw-md-none">
          <div class="mb-12"><span class="d-block display-2 fw-semibold text-secondary">01</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
          <div><span class="d-block display-2 fw-semibold text-secondary">02</span>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="mw-sm display-5 lh-lg text-white mb-0">From answering questions to providing recommendations, our AI assistant will engage your visitors effortlessly.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-lg-6 mb-32 mb-sm-16 mb-md-0">
        <div class="position-relative mw-lg mx-auto px-lg-12"><img class="img-fluid d-block w-100" src="casper-assets/how-it-works/ellipse-bg-gradient.png" alt=""/><img class="position-absolute top-50 start-50 translate-middle w-100 mw-sm" src="casper-assets/how-it-works/phone.png" alt=""/></div>
      </div>
      <div class="col-md-4 col-lg-3">
        <div class="mw-sm mx-auto mw-md-none">

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

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute bottom-0 start-50 translate-middle-x" src="casper-assets/features/double-circle-center.svg" alt=""/><img class="position-absolute top-50 start-50 translate-middle" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="position-relative container">
    <div class="mw-md mw-md-xl mw-lg-7xl mx-auto"><span class="badge text-uppercase mb-6" style="background: linear-gradient(158deg, #826FFF 1.14%, #511CFF 51.87%, #00D1FF 104.76%);">Features</span>
      <div class="row mb-8 align-items-center">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <div class="mw-md mw-lg-none">
            <h2 class="font-heading fw-medium text-white mb-0">Intelligent Conversations</h2>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-sm ms-lg-auto">
            <p class="display-5 lh-lg text-light-light mb-0">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-6 mb-8 mb-lg-0">
          <div class="position-relative h-100 py-12 px-8 px-md-12 rounded overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;" src="casper-assets/features/left-image-robot.png" alt=""/>
            <div class="position-relative mw-md"><span class="d-block mb-3 fw-medium text-info"><span class="d-block">Ready for</span><span>future</span></span>
              <h4 class="fw-medium text-white mb-24">Leveraging tech to drive a better IT experience</h4><a class="btn btn-primary-dark mt-auto" href="#"><span>SEE OUR PLANS</span></a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3 mb-8 mb-md-0"><a class="position-relative d-block p-8 mb-6 rounded bg-gradinet-orange" href="#">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3638

Bootstrap

Casper

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 mt-n64" 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 start-0 mt-n10 mt-lg-0 ms-n14 ms-lg-0 animate-spinStar" src="casper-assets/content/blink-star.png" alt=""/>
    <div class="mw-3xl mx-auto">
      <div class="text-center mb-12"><span class="d-block mb-4 text-info">BLOG CATEGORY</span>
        <h2 class="font-heading display-2 fw-medium text-white mb-12">Mi quisque ultrices hendrerit nec aliquet integer mollis faucibus</h2>
      </div>
      <div class="d-sm-flex mb-12 align-items-center justify-content-between">
        <div class="d-flex align-items-center mb-6 mb-sm-0"><img class="img-fluid" src="casper-assets/content/avatar.png" alt=""/>
          <div class="ms-5"><span class="fs-6 fw-medium text-white">Rakabuming Suhu</span><span class="d-block text-secondary">Editor</span></div>
        </div>
        <div class="d-flex align-items-center"><span class="d-block me-5 text-white fw-medium">Share</span>
          <div class="d-inline-flex me-3 align-items-center justify-content-center bg-info rounded-pill" style="width: 48px; height: 48px;">
            <svg width="21" height="20" viewbox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_337_1235)">
                <path d="M19.6668 2.49999C18.8688 3.06289 17.9853 3.49341 17.0502 3.77499C16.5483 3.19791 15.8813 2.7889 15.1394 2.60326C14.3974 2.41762 13.6164 2.46432 12.9019 2.73703C12.1874 3.00975 11.5739 3.49532 11.1443 4.12808C10.7148 4.76085 10.4899 5.51027 10.5002 6.27499V7.10832C9.03569 7.14629 7.58456 6.8215 6.276 6.16286C4.96745 5.50422 3.84209 4.53218 3.00016 3.33332C3.00016 3.33332 -0.333171 10.8333 7.16683 14.1667C5.4506 15.3316 3.40613 15.9158 1.3335 15.8333C8.8335 20 18.0002 15.8333 18.0002 6.24999C17.9994 6.01787 17.9771 5.78632 17.9335 5.55832C18.784 4.71957 19.3842 3.66058 19.6668 2.49999Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </g>
            </svg>
          </div>
          <div class="d-inline-flex align-items-center justify-content-center bg-info-dark rounded-pill" style="width: 48px; height: 48px;">
            <svg width="21" height="20" viewbox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.5002 1.66666H13.0002C11.8951 1.66666 10.8353 2.10564 10.0539 2.88704C9.27248 3.66845 8.8335 4.72825 8.8335 5.83332V8.33332H6.3335V11.6667H8.8335V18.3333H12.1668V11.6667H14.6668L15.5002 8.33332H12.1668V5.83332C12.1668 5.61231 12.2546 5.40035 12.4109 5.24407C12.5672 5.08779 12.7791 4.99999 13.0002 4.99999H15.5002V1.66666Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </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 #3639

Bootstrap

Casper

<section class="pb-12 pt-20 pb-lg-24 pt-xl-32 bg-dark position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="position-relative mw-7xl mx-auto"><img class="position-absolute top-0 start-0 mt-n20 ms-4 ms-sm-24" style="z-index: 1;" src="casper-assets/cta/robo-bubble.png" alt=""/>
      <div class="position-relative pt-32 pb-24 py-lg-20 px-5 px-sm-8"><img class="position-absolute top-0 start-0 w-100 h-100 img-fluid" src="casper-assets/cta/bg-gradient-banner.png" alt=""/>
        <div class="position-relative mw-4xl mx-auto text-center"><span class="d-block mb-8 display-3 fw-medium">Ready to collaborate?</span>
          <h2 class="h3 fw-medium mb-8">Sign up &amp; transform your customer interactions</h2><a class="btn mb-8 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>
          <p class="mb-0"><span>Join</span><span class="fw-medium">50,000+</span><span>other creators across our communities.</span></p>
        </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 #3640

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-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-6 mt-12 mt-lg-0 order-last order-lg-first">
          <div class="position-relative mw-sm mw-xl-md"><img class="img-fluid d-block w-100" src="casper-assets/newsletter/photo-robot.png" alt=""/><img class="position-absolute top-0 start-100 ms-lg-n4 ms-xl-n8 mt-xl-n10 translate-middle-x col-6 col-md-auto col-lg-7 col-xl-auto" src="casper-assets/newsletter/planet.png" alt=""/></div>
        </div>
        <div class="col-lg-6">
          <div class="mw-xl ms-lg-auto">
            <h2 class="font-heading fw-medium text-white mb-6">Stay up to Date</h2>
            <p class="mw-lg fs-6 text-light-light mb-12">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
            <div class="mw-lg">
              <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>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value=""/>
                <label class="form-check-label ms-2 text-light-light"><span>I agree with</span><a class="d-inline-block text-info" href="#">Privacy Policy</a><span>and</span><a class="d-inline-block text-info" href="#">Terms of Conditions</a></label>
              </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #3621

Get the code for 13,400+ components

Bootstrap Component #3622

Get the code for 13,400+ components

Bootstrap Component #3623

Get the code for 13,400+ components

Bootstrap Component #3624

Get the code for 13,400+ components

Bootstrap Component #3625

Get the code for 13,400+ components

Bootstrap Component #3626

Get the code for 13,400+ components

Bootstrap Component #3627

Get the code for 13,400+ components

Bootstrap Component #3628

Get the code for 13,400+ components

Bootstrap Component #3629

Get the code for 13,400+ components

Bootstrap Component #3630

Get the code for 13,400+ components

Bootstrap Component #3631

Get the code for 13,400+ components

Bootstrap Component #3632

Get the code for 13,400+ components

Bootstrap Component #3633

Get the code for 13,400+ components

Bootstrap Component #3634

Get the code for 13,400+ components

Bootstrap Component #3635

Get the code for 13,400+ components

Bootstrap Component #3636

Get the code for 13,400+ components

Bootstrap Component #3637

Get the code for 13,400+ components

Bootstrap Component #3638

Get the code for 13,400+ components

Bootstrap Component #3639

Get the code for 13,400+ components

Bootstrap Component #3640

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