Mint Plans

by pphheerroonn

HTML

<div class="plans">
<div class="plan bronze">
<h2 class="title">
Bronze
</h2>
<ul>
<li>bridal preparations</li>
<li>groom preparations</li>
<li>additional camera operator</li>
<li>ceremony arrivals</li>
<li>ceremony</li>
<li>receiving line</li>
</ul>
<h3 class="price">
€1999
</h3>
</div>
<div class="plan silver">
<h2 class="title">
Silver
</h2>
<ul>
<li>bridal preparations</li>
<li>groom preparations</li>
<li>additional camera operator</li>
<li>ceremony arrivals</li>
<li>ceremony</li>
<li>receiving line</li>
<li>photo location</li>
<li>reception</li>

</ul>
<h3 class="price">
€1999
</h3>
</div>
<div class="plan gold">
<h2 class="title">
Gold
</h2>
<ul>
<li>bridal preparations</li>
<li>groom preparations</li>
<li>additional camera operator</li>
<li>ceremony arrivals</li>
<li>ceremony</li>
<li>receiving line</li>
<li>photo location</li>
<li>reception</li>
<li>speeches</li>

</ul>
<h3 class="price">
€1999
</h3>
</div>
<div class="plan diamond">
<h2 class="title">
Diamond
</h2>
<ul>
<li>bridal preparations</li>
<li>groom preparations</li>
<li>additional camera operator</li>
<li>ceremony arrivals</li>
<li>ceremony</li>
<li>receiving line</li>
<li>photo location</li>
<li>reception</li>
<li>speeches</li>
<li>first dance</li>
<li>additional dances (15 mins)</li>
</ul>
<h3 class="price">
€1999
</h3>
</div>
</div>

CSS

.plans{
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.plan {
  width: calc(20% - 30px);
  float: left;
  border-radius: 14px;
  background: red;
  margin: 0 10px;
  padding: 15px;
}


.plan .title, .plan .price{
  text-align: center;
  mix-blend-mode: soft-light;
}

.plan ul{
  padding: 15px 0;
  border-top: rgba(0, 0, 0, .2) solid 1px;
  border-bottom: solid rgba(0, 0, 0, .2) 1px;
  mix-blend-mode: overlay;
  list-style-type: none;
}
.plan ul li{
  padding: 0.5em 0;
}

.plan.bronze{
  
 
  background-color: #e8c99b;
background-image: linear-gradient(315deg, #e8c99b 0%, #e8bc85 74%);
}
.plan.silver{
background: #8e9eab;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #eef2f3, #8e9eab);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #eef2f3, #8e9eab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.plan.gold{
 background: linear-gradient(to bottom, #BF953F, #B38728, #AA771C);
}
.plan.diamond{
 background-color: #fde7f9;
background-image: linear-gradient(315deg, #fde7f9 0%, #aacaef 74%);
}