Pricing tag in reversed cascade

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Pricing tag in reversed cascade

Bertoli pro asked 7 years ago

HeyIs it possible to get three pricing tags in a row in a reversed cascade with the flipping card animation. How should i do to make it possible? Or could i take a way the white area over the img. And put three flipping pricing tags over the img instead?// Kim

Marta Szymanska staff pro premium answered 7 years ago

Hi, could you show me an example of something like this? Any website or screenshot so I could imagine this? Best, Marta

Bertoli pro answered 7 years ago

Something like the link down below. But with a video in the background and the cards more separated and then they can rotate like the flipping cards to get the information about the products. https://www.google.se/search?biw=1440&bih=826&tbm=isch&sa=1&ei=GWeWWvO2NobosQGOpJ2ADQ&q=bootstrap+pricing+template&oq=bootstrap+pricing+t&gs_l=psy-ab.1.0.0i19k1l4.6829.7189.0.8608.3.3.0.0.0.0.59.155.3.3.0....0...1c.1.64.psy-ab..0.2.111....0.JNkpiu9s79s#imgrc=EaUSqCrZ6A3A2M:

Marta Szymanska staff pro premium answered 7 years ago

I'll try to help you with this, but tell me first what version of MDB do you have? Is this the newest - 4.5.0 version?

Bertoli pro commented 7 years ago

Yes it is the newest version

Marta Szymanska staff pro premium answered 7 years ago

Hi,

try this code:

CSS:

/* Required for full background image */

html,
body,
header,
.view {
height: 100%;
}

@media (max-width: 740px) {
header {
height: 1850px;
}
}

@media (min-width: 741px) and (max-width: 800px) {
header {
height: 1250px;
}
}

.top-nav-collapse {
background-color: #563e91 !important;
}

.navbar:not(.top-nav-collapse) {
background: transparent !important;
}

@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #563e91 !important;
}
}

.rgba-gradient {
background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}

video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

HTML:

<!-- Main navigation -->
<header>
<!-- Full Page Intro -->
<div class="view">
<video poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay muted loop>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-4 col-md-12 pb-5 mt-lg-5">

<!--Rotating card-->
<div class="card-wrapper">
<div id="card-1" class="card-rotating effect__click text-center h-100 w-100">

<!--Front Side-->
<div class="face front white">

<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header blue">
<h1>10</h1>
<div class="version">
<h5>Basic</h5>
</div>
</div>
<!--Price-->

<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>

<a class="btn btn-blue rotate-btn" data-card="card-1">Click here to rotate</a>
</div>
<!--Features-->

</div>
<!--Pricing card-->

</div>
<!--/.Front Side-->

<!--Back Side-->
<div class="face back white">

<div class="card-body">

<!--Content-->
<h4>More info</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item"><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li class="list-inline-item"><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here to rotate back</a>
<a class="btn btn-blue"> Buy now</a>

</div>

</div>
<!--/.Back Side-->

</div>
</div>
<!--/.Rotating card-->

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-4 col-md-6 py-5">

<!--Rotating card-->
<div class="card-wrapper">
<div id="card-2" class="card-rotating effect__click text-center h-100 w-100">

<!--Front Side-->
<div class="face front white">

<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header indigo">
<h1>20</h1>
<div class="version">
<h5>Pro</h5>
</div>
</div>
<!--Price-->

<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>

<a class="btn btn-indigo rotate-btn" data-card="card-2">Click here to rotate</a>
</div>
<!--Features-->

</div>
<!--Pricing card-->

</div>
<!--/.Front Side-->

<!--Back Side-->
<div class="face back white">

<div class="card-body">

<!--Content-->
<h4>More info</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item"><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li class="list-inline-item"><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-2"><i class="fa fa-undo"></i> Click here to rotate back</a>
<a class="btn btn-indigo"> Buy now</a>

</div>

</div>
<!--/.Back Side-->

</div>
</div>
<!--/.Rotating card-->

</div>
<!-- Grid column -->

<!-- Grid column -->
<div class="col-lg-4 col-md-6 py-5">

<!--Rotating card-->
<div class="card-wrapper">
<div id="card-3" class="card-rotating effect__click text-center h-100 w-100">

<!--Front Side-->
<div class="face front white">

<!--Pricing card-->
<div class="card pricing-card">
<!--Price-->
<div class="price header deep-purple">
<h1>30</h1>
<div class="version">
<h5>Enterprise</h5>
</div>
</div>
<!--Price-->

<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p class="mt-1"><i class="fa fa-check"></i> 20 GB Of Storage</p>
</li>
<li>
<p><i class="fa fa-check"></i> 2 Email Accounts</p>
</li>
<li>
<p><i class="fa fa-times"></i> 24h Tech Support</p>
</li>
<li>
<p><i class="fa fa-times"></i> 300 GB Bandwidth</p>
</li>
<li>
<p><i class="fa fa-times"></i> User Management </p>
</li>
</ul>

<a class="btn btn-deep-purple rotate-btn" data-card="card-3">Click here to rotate</a>
</div>
<!--Features-->

</div>
<!--Pricing card-->

</div>
<!--/.Front Side-->

<!--Back Side-->
<div class="face back white">

<div class="card-body">

<!--Content-->
<h4>More info</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item"><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
<li class="list-inline-item"><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-3"><i class="fa fa-undo"></i> Click here to rotate back</a>
<a class="btn btn-deep-purple"> Buy now</a>

</div>

</div>
<!--/.Back Side-->

</div>
</div>
<!--/.Rotating card-->

</div>
<!-- Grid column -->

</div>
<!-- Grid row -->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->
</header>
<!-- Main navigation -->

 

Best,

Marta

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Bertoli
Pro User
10Support score
1Questions 1Answers
0Snippets likes 0Snippets