<div class="container-fluid main-container min-vh-100 d-flex flex-wrap justify-content-center align-items-center">
      <div class="card collaborator mx-auto py-3 px-4 my-2">
        <div class="title-container w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Collaborator</h1>
          <h2 class="sub-title m-0 text-muted">Simple Polls and Surveys</h2>
        </div>

<div class="text-center">
          <div class="d-flex justify-content-center subscribtion-price">
            <span class="font-weight-bold">$</span>
            <h3 class="m-0 font-weight-bold">49</h3>
          </div>
          <p class="font-weight-bold m-0">per user, per month</p>
          <div class="separator my-3">Or</div>
        </div>

<p class="font-weight-bold m-0">per user, per year</p>
          <p class="text-muted saving-statement">
            That's a 49% savings per year
          </p>
        </div>

<a href="#" class="text-center font-weight-bold trial-statement"
          >Start free trial</a
        >

<hr />

<div class="px-3">
          <ul class="features-list">
            <li><span class="text-muted">Unlimited surverys</span></li>
            <li><span class="text-muted">Unlimited questions</span></li>
            <li><span class="text-muted">No per response charges</span></li>
            <li><span class="text-muted">24 essential question types</span></li>
            <li>
              <span class="text-muted">Data exports (CSV, PDF, PPT, XLS)</span>
            </li>
            <li><span class="text-muted">Email support</span></li>
          </ul>
        </div>
      </div>

<div class="card professional mx-auto py-3 px-4 my-2">
        <div class="title-container w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Professional</h1>
          <h2 class="sub-title m-0 text-muted">
            Powerful data collection and reporting
          </h2>
        </div>

<div class="text-center">
          <div class="d-flex justify-content-center subscribtion-price">
            <span class="font-weight-bold">$</span>
            <h3 class="m-0 font-weight-bold">149</h3>
          </div>
          <p class="font-weight-bold m-0">per user, per month</p>
          <div class="separator my-3">Or</div>
        </div>

<p class="font-weight-bold m-0">per user, per year</p>
          <p class="text-muted saving-statement">
            That's a 43% savings per year
          </p>
        </div>

<a href="#" class="text-center font-weight-bold trial-statement"
          >Start free trial</a
        >

<hr />

<div class="px-3">
          <p class="m-0 pr-3 font-weight-bold additional-pro-msg">
            Everything in Collaborator, plus:
          </p>
          <ul class="features-list">
            <li><span class="text-muted">Advance question types</span></li>
            <li>
              <span class="text-muted"
                >Advanced reports (profile, longitudinal)</span
              >
            </li>
            <li><span class="text-muted">Segment and filter report</span></li>
            <li><span class="text-muted">Email and phone support</span></li>
            <li><span class="text-muted">API access</span></li>
          </ul>
        </div>
      </div>

<div class="card full-access mx-auto py-3 px-4 my-2">
        <div class="title-container w-75 text-center mx-auto">
          <h1 class="main-title font-weight-bold m-0">Full Access</h1>
          <h2 class="sub-title m-0 text-muted">All our features in one plan</h2>
        </div>

<div class="text-center">
          <div class="d-flex justify-content-center subscribtion-price">
            <span class="font-weight-bold">$</span>
            <h3 class="m-0 font-weight-bold">249</h3>
          </div>
          <p class="font-weight-bold m-0">per user, per month</p>
          <div class="separator my-3">Or</div>
        </div>

<p class="font-weight-bold m-0">per user, per year</p>
          <p class="text-muted saving-statement">
            That's a 40% savings per year
          </p>
        </div>

<a href="#" class="text-center font-weight-bold trial-statement"
          >Start free trial</a
        >

<hr />

<div class="px-3">
          <p class="m-0 pr-3 font-weight-bold additional-full-access-msg">
            Everything in Professional, plus:
          </p>
          <ul class="features-list">
            <li class="full-access">
              <span class="text-muted">Max diff</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Crosstab reports</span>
            </li>
            <li class="full-access">
              <span class="text-muted">TURF reports</span>
            </li>
            <li class="full-access">
              <span class="text-muted">R scripts</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Image heatmap</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Data-cleaning tool</span>
            </li>
            <li class="full-access">
              <span class="text-muted">Custom scripting</span>
            </li>
          </ul>
        </div>
      </div>
      
    </div>

.main-container {
        background-color: #f3f3f3;
      }
      .card {
        width: 95%;
        min-width: 250px;
        max-width: 300px;
        height: 680px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px !important;
        border-radius: unset !important;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12);
        cursor: pointer;
      }
      .card.collaborator {
        border-top: 6px solid #69c5c3;
      }
      .card.collaborator:hover {
        border: 1px solid #69c5c3;
        border-top: 6px solid #69c5c3;
        box-shadow: 0 1px 1px rgba(105, 197, 195, 0.15),
          0 2px 2px rgba(105, 197, 195, 0.15),
          0 4px 4px rgba(105, 197, 195, 0.15),
          0 8px 8px rgba(105, 197, 195, 0.15);
      }

      .card.collaborator.active {
        border: 2px solid darkgray;
        border-top: 6px solid #69c5c3;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .card.professional {
        border-top: 6px solid #41a3a1;
      }
      .card.professional:hover {
        border: 1px solid #41a3a1;
        border-top: 6px solid #41a3a1;
        box-shadow: 0 1px 1px rgba(65, 163, 161, 0.15),
          0 2px 2px rgba(65, 163, 161, 0.15), 0 4px 4px rgba(65, 163, 161, 0.15),
          0 8px 8px rgba(65, 163, 161, 0.15);
      }

      .card.professional.active {
        border: 2px solid darkgray;
        border-top: 6px solid #41a3a1;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .card.full-access {
        border-top: 6px solid #f7941e;
      }
      .card.full-access:hover {
        border: 1px solid #f7941e;
        border-top: 6px solid rgb(247, 148, 30);
        box-shadow: 0 1px 1px rgba(247, 148, 30, 0.15),
          0 2px 2px rgba(247, 148, 30, 0.15), 0 4px 4px rgba(247, 148, 30, 0.15),
          0 8px 8px rgba(247, 148, 30, 0.15);
      }

      .card.full-access.active {
        border: 2px solid darkgray;
        border-top: 6px solid rgb(247, 148, 30);
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .title-container {
        height: 70px;
      }
      .main-title {
        font-size: 22px;
      }
      .sub-title {
        font-size: 12px;
      }
      .subscribtion-price span {
        font-size: 25px;
      }
      .subscribtion-price h3 {
        font-size: 50px;
      }
      /* Separator line with text between */
      .separator {
        display: flex;
        align-items: center;
        text-align: center;
        color: black;
        font-weight: bold;
      }
      .separator::before,
      .separator::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid black;
      }

      .separator:not(:empty)::before {
        margin-right: 1em;
      }

      .separator:not(:empty)::after {
        margin-left: 1em;
      }
      /* Separator line with text between */

      .saving-statement {
        font-size: 12px;
      }
      .buy-now-btn {
        border: 2px solid #f7941e !important;
        color: black !important;
        font-size: 12px !important;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      }
      .buy-now-btn:hover {
        border: 2px solid #f7941e !important;
        background-color: #f7941e !important;
      }
      .trial-statement {
        color: purple;
        text-decoration: underline;
        transition: color 0.3s ease;
      }
      .trial-statement:hover {
        text-decoration: none;
        color: #f7941e;
      }
      .card hr {
        border-bottom: 2px solid black;
      }
      .additional-pro-msg {
        color: #69c5c3;
        font-size: 16px;
      }
      .additional-full-access-msg {
        color: #f7941e;
        font-size: 16px;
      }
      .features-list {
        padding-left: 25px;
        list-style-type: none;
        text-indent: -11px;
        font-size: 13px;
      }

      .features-list li {
        margin: 5px 0;
      }

      .features-list li::before {
        font-family: "Font Awesome 6 Free";
        content: "\f00c";
        color: #69c5c3;
        display: inline-block;
        padding-right: 10px;
        vertical-align: middle;
        font-weight: 900;
        font-size: 12px;
      }
      .features-list li.full-access::before {
        color: #f7941e;
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css

Copy CDN

https://kit.fontawesome.com/d91ebf4c9d.js

Copy CDN

https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js

Copy CDN

Bootstrap 4

Stylish Detailed Package Plan Card

AdBlock Detected!