<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="container"> <div class="row"> <div class="col-md-3 picarea"> <img src="https://i.annihil.us/u/prod/marvel/i/mg/c/30/5aabe2924dd38/portrait_incredible.jpg" alt="Smiley face" height="auto" width="200px"> </div> <div class="col-md-9 details"> <br> <small>HINDI</small> <br> <h5><span>Avengers: Infinity War (3D Hindi) (U/A)</span></h5> <p><b>Director:</b> Anthony Russo, Joe Russo</p> <p><b>Cast & Crew:</b> Robert Downey Jr.,Scarlett Johansson, Benedict Cumberbatch, Chris Pratt, Brie Larson, Elizabeth Olsen, Zoe Saldana, Chris Evans, Chris Hemsworth, Tom Holland</p> <div class="show-time row"> <div class="col-sm-2 day"> <p>DAY</p> <h5><b>Friday</b></h5> </div> <div class="col-sm-2 date"> <p>DATE</p> <h5><b>Apr 27, 2018</b></h5> </div> <div class="col-sm-2 time"> <p>TIME</p> <h5><b>09:30 AM</b></h5> </div> <div class="col-sm-2 button"> <button class="btn btn-primary">Buy TIckets</button> </div> </div> <br> <p>Other shows</p> <br> <small><b>Note</b></small> <ul> <li><i>Internet handling fees (per ticket) will be levied. Check the same before completing your transaction.</i></li> <li><i>Children aged 3 years and above will require a separate ticket.</i></li> </ul> <br> <storng><b>OTHER SHOW TIMES</b></storng> <div class="border-red"></div> <br> <div class="col-sm-2 dotted"> <p>12:30 PM</p> </div> <div class="col-sm-2 dotted"> <p>2:30 PM</p> </div> <div class="col-sm-2 dotted"> <p>4:30 PM</p> </div> <div class="col-sm-2 dotted"> <p>7:00 PM</p> </div> <div class="col-sm-2 dotted"> <p>12:30 PM</p> </div> <div class="col-sm-2 dotted"> <p>2:30 PM</p> </div> <div class="col-sm-2 dotted"> <p>4:30 PM</p> </div> <div class="col-sm-2 dotted"> <p>7:00 PM</p> </div> </div> </div> </div>

body{ background:#eaf0f9; } .container{ background:white; margin-top:30px; padding-bottom:15px; padding-top:15px; } .picarea { padding-right:1px; width:250px; } .details{ padding-left:0px; } .details h5{ font-weight:500; } .details p{ color:green; cursor:pointer; } .details p b{ color:black; cursor:none; } small{ color:green; text-transform:capitalize; } .show-time{ margin-top:30px; border:2px #e0e0e0 dotted; padding:30px; } .show-time p { color:gray; margin-bottom:2px; } .show-time button { vertical-align:center; border-radius:0px; padding:15px; } small b{ color:black; } .border-red{ width: 30px; height: 2px; background: #c80910; margin: 10px 0 30px; } .dotted { border:1px gray dotted; width:120px; margin-left:30px; padding:10px 10px 0px 10px; text-align:center; color:blue; margin-bottom:15px; } .dotted p { color:blue; vertical-align: baseline; }