<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container flex-center p-t-5"> <div class="row"> <div class="col-md-4"> <div class="card z-depth-2"> <div class="text-xs-center"> <div class="card-block"> <h5>Basic plan</h5> <div class="flex-center"> <i class="fa fa-home fa-5x cyan-text"></i> </div> <!--Price--> <h2><strong>59$</strong></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p> <a class="btn btn-cyan">Buy now</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="card-wrapper-1"> <div class="card z-depth-2"> <div class="text-xs-center"> <div class="card-block"> <h5>Premium plan</h5> <div class="flex-center"> <i class="fa fa-group fa-5x orange-text"></i> </div> <!--Price--> <h2><strong>79$</strong></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p> <a class="btn btn-warning">Buy now</a> </div> </div> </div> </div> </div> <div class="col-md-4"> <div class="card z-depth-2"> <div class="text-xs-center"> <div class="card-block"> <h5>Advanced plan</h5> <div class="flex-center"> <i class="fa fa-line-chart fa-5x cyan-text"></i> </div> <!--Price--> <h2><strong>99$</strong></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p> <a class="btn btn-cyan">Buy now</a> </div> </div> </div> </div> </div> </div> <!-- Outro --> <section id="outro"> <div class="container"> <div class="row text-xs-center p-t-5 p-b-4"> <div class="col-md-12"> <br> <h3>Built with Material Design for Bootstrap</h3> <br> <p>Powerful and free Material Design UI KIT</p> <p><strong>400+</strong> material UI elements, <strong>600+</strong> material icons, <strong>74</strong> CSS animations, SASS files, templates, tutorials and many more. </p> <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg"><i class="fa fa-download left"></i> Free download</a> </div> </div> </div> </section> <!-- /.Outro -->

html, body, .container { height: 100%; background: #e0e0e0; } @media only screen and (min-width: 768px) { .card-wrapper-1 { position: absolute; left: -30px; right: -30px; z-index: 1; } } @media only screen and (min-width: 768px) { .card-wrapper-1 .card { padding-top: 40px; padding-bottom: 40px; padding-left: 30px; padding-right: 30px; margin-top: -40px; } } .card .card-block i { padding-top: 1rem; padding-bottom: 1.8rem; } .card .card-block h2 { padding-bottom: 1.3rem; } .card .card-block .btn { margin-top: 1.7rem; }