<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"> <div class="row"> <div class="col-sm-4 col-sm-offset-4"> <div class="card"> <img src="https://d13yacurqjgara.cloudfront.net/users/1174720/screenshots/3084779/cafe6_2x-01.png"> <h1>Card Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id sollicitudin quam.</p> </div> </div> </div> </div>

body {background-color: #F2703F;} .card { background-color:white; width:100%; height:400px; margin:50px 0 100px 0; border-radius: 8px; box-shadow: 0px 10px 20px -6px rgba(242,112,63,.5); overflow:hidden; cursor:pointer; } .card:before, .card:after { content: ''; display: block; height: 15px; border-radius: 0px 0px 4px 4px; position:absolute; bottom:100px; background-color: #F2C5B3; } .card:before { width:85%; margin-left:3.5%; margin-bottom:-10px; z-index: -1; box-shadow: 0px 10px 20px -6px rgba(242,112,63,.5); } .card:after { width:75%; z-index: -2; margin-left:9%; margin-bottom:-20px; height: 30px; background-color: #F59A78; } /* Inside Card */ img { width:100%; height: auto; } h1 { font-family: 'Poppins'; text-align:center; color: #92D1FA; } p { font-family: 'Roboto'; text-align:center; margin: 0 20px; color: gray; } /* Interactive States */ .card, .card:after, .card:before { transition: all .5s ease; } .card:hover { margin-top: 45px; box-shadow: 0px 15px 30px -6px rgba(242,112,63,.4); } .card:hover:before { margin-bottom:-15px; } .card:hover:after { margin-bottom:-25px; }