<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="halfbox-section"> <div class="col-md-6 halfbox-left"> <div class="site-title"> <h3>Watch Behind The Scene</h3> </div> <p>Integer eu dui quis purus mattis maximus. Nunc bibendum dignissim libero, at placerat lectus fringilla nec. Morbi ut risus sed nulla elementum ultrices venenatis sit amet nisl.</p> <a href="#" class="about-btm-left">PLAY NOW</a> </div> <div class="col-md-6 video" id="video"> <a href="#" data-toggle="modal" data-target="#modalvideo"> <span class="glyphicon glyphicon-play" aria-hidden="true"></span> </a> <div class="modal fade features-modal" id="modalvideo" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe src="https://player.vimeo.com/video/113009024?color=b8b8b8&title=0&byline=0&portrait=0"></iframe> </div> </div> </div> </div> </div> <div class="clearfix"></div> </div> <div class="halfbox-section"> <div class="col-md-6 video" id="video"> <a href="#" data-toggle="modal" data-target="#modalvideo"> <span class="glyphicon glyphicon-play" aria-hidden="true"></span> </a> <div class="modal fade features-modal" id="modalvideo" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe src="https://player.vimeo.com/video/113009024?color=b8b8b8&title=0&byline=0&portrait=0"></iframe> </div> </div> </div> </div> </div> <div class="col-md-6 halfbox-left"> <div class="site-title"> <h3>Watch Behind The Scene</h3> </div> <p>Integer eu dui quis purus mattis maximus. Nunc bibendum dignissim libero, at placerat lectus fringilla nec. Morbi ut risus sed nulla elementum ultrices venenatis sit amet nisl.</p> <a href="#" class="about-btm-left">PLAY NOW</a> </div> <div class="clearfix"></div> </div>

.halfbox-left { font-size: 14px; display: inline-block; padding: 7px 15px; border: 1px solid #fff; color: #fff; } .halfbox-left { background: #b71b2b; min-height: 400px; padding: 6em; text-align: center; } .site-title h3 { color: #fff; margin-bottom: 0.4em; font-size:3.17em; } .site-title p { font-size: 14px; color: #e4e2e2; text-align: center; line-height: 27px; } .video { background: url(https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat 0px 0px; min-height: 400px; background-size: cover; padding: 168px 0px; text-align: center; }