Flexifi

by pphheerroonn

HTML

<div class="flexificontainer">
<div class="flexifiterms">
<div class="header">
<h4 class="pricing">€80 to €499.99</h4>
<h3 class="title">No interest</h3>
<h4 class="subtitle">5 equal payments</h4>
</div>
<div class="plan">
  <p>
  This plan equals to 5 equal payments. 1st payment upfront & 4 fortnightly repayments.
  </p>
</div>
<div class="example">
  <p>
Representative example: Total amount of credit: €499.99 over 5 equal payments of €100. First 20% payment upfront & 4 equal fortnightly payments. 0% interest rate. No application fee, No monthly account fee. APR of 0%. Total amount payable: €500.00

  </p>
</div>
</div><!--/flexifiterms-->
<div class="flexifiterms">
<div class="header">
<h4 class="pricing">€80 to €499.99</h4>
<h3 class="title">No interest</h3>
<h4 class="subtitle">5 equal payments</h4>
</div>
<div class="plan">
  <p>
  This plan equals to 5 equal payments. 1st payment upfront & 4 fortnightly repayments.
  </p>
</div>
<div class="example">
  <p>
Representative example: Total amount of credit: €499.99 over 5 equal payments of €100. First 20% payment upfront & 4 equal fortnightly payments. 0% interest rate. No application fee, No monthly account fee. APR of 0%. Total amount payable: €500.00

  </p>
</div>
</div><!--/flexifiterms-->
<div class="flexifiterms">
<div class="header">
<h4 class="pricing">€80 to €499.99</h4>
<h3 class="title">No interest</h3>
<h4 class="subtitle">5 equal payments</h4>
</div>
<div class="plan">
  <p>
  This plan equals to 5 equal payments. 1st payment upfront & 4 fortnightly repayments.
  </p>
</div>
<div class="example">
  <p>
Representative example: Total amount of credit: €499.99 over 5 equal payments of €100. First 20% payment upfront & 4 equal fortnightly payments. 0% interest rate. No application fee, No monthly account fee. APR of 0%. Total amount payable: €500.00

  </p>
</div>
</div><!--/flexifiterms-->
<div class="flexifiterms">
<div class="header">
<h4 class="pricing">€80 to €499.99</h4>
<h3 class="title">No...

CSS

*{
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}


.flexificontainer{
background:#f2f2f2; 
display: flex;
flex-wrap: wrap;
background: white;
}
.flexificontainer .header{
background: red;
text-align: center;
color: white;
}
.flexificontainer .title{
background: #fafafa;
border-radius: 30px;
color: #222;
max-width: 50%;
margin: 0 auto;
}
.flexificontainer .subtitle{

}
.flexificontainer .example p{
color: #999;
}
.flexifiterms{
  background: white;
  max-width: 50%;
  min-width: 25%;
}