<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-md-12"> <div class="laptop"> <div class="monitor"> <div class="screen"> <img src="http://www.wildosphereadventures.com/wp-content/themes/wildosphere/assets/img/kaziranga.jpg"> </div> <div class="text-center mac-book">MacBook</div> </div> <div class="keybord"> </div> <div class="keybord2"> </div> </div> </div> </div> </div>

body{ background-color:#e8e8e8; } img{ width:100%; } .laptop { top:20px; position: relative; width: 800px; margin: 0 auto; } .monitor{ position:relative; width:600px; height:400px; padding:30px 20px 40px; border-radius:20px; background-color:#000; border:3px solid #F8E8D8; } .screen{ position: absolute; width: 92%; height: 82%; background-color: #fff; top: 6%; left: 4%; overflow:hidden; } .mac-book { padding-top: 2px; color: #c3c3c3; position: absolute; width: 99%; height: 6.2%; background-color: #212226; top: 93%; border-bottom-left-radius: 16px; left: .5%; border-bottom-right-radius: 16px; } .keybord { position: absolute; width: 700px; height: 9px; background-color: #FEEEE1; transform: translate(-50%,-50%); left: 38%; top: 99.6%; box-shadow: inset 0 0 10px #ccc; } .keybord2 { position: absolute; width: 700px; height: 15px; background-color: #FEEEE1; transform: translate(-50%,-50%); left: 38%; top: 102%; border-bottom-left-radius: 130px; border-bottom-right-radius: 130px; box-shadow: inset 0 0 10px #ccc; box-shadow: 0px 4px 4px #dedddd; }