Desktop:
Mobile:
Left side of movie detail:
<div class="post">
<div class="heading">
<h1>Movie Title Here</h1>
<div class="social-panel">
<ul class="social-networks">
<li><a href="#" class="twitter">twitter</a></li>
<li><a href="#" class="facebook">facebook</a></li>
<li><a href="#" class="google-plus">google-plus</a></li>
<li><a href="#" class="linkedin">linkedin</a></li>
<li><a href="#" class="mail">mail</a></li>
</ul>
</div>
</div>
<img class="alignleft" src="images/img-11.jpg" height="253" width="170" alt="image description">
<div class="meta">
<img class="alignleft" src="images/ico-01.png" alt="image description">
<div class="text-block">
<p>For strong violence, disturbing images, language and brief nudity.</p>
</div>
</div>
<div class="text">
<p>Formerly a detective with the NYPD, now a recovering alcoholic haunted by regrets, Matt Scudder has a lot to make up for. When a series of kidnappings targeting the city's worst drug criminals escalates to grisly murder, the circuit's ruthless leader convinces Scudder to find the culprits and bring them to bloody justice. Working as an unlicensed private detective, Matt sees what the police don't see and treads where they most fear to. Operating just outside the law to track down the monsters responsible, Scudder stops just short of becoming one himself.</p>
</div>
</div>
Showtime Block:
<div class="showtimes">
<div class="heading">
<h1>Showtimes</h1>
</div>
<div class="holder">
<table title="moviestable" class="table top">
<thead>
<tr>
<th class="headings">Ticket Types</th>
<th>Adult</th>
<th>Active Duty</th>
<th>Child</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong class="main-title"><i class="icon-ico-ticket1"></i>2D Double Feature</strong></td>
<td title="Adult"><span>$5.00</span></td>
<td title="Active Duty"><span>$5.00</span></td>
<td title="Child"><span>$5.00</span></td>
</tr>
<tr>
<td><strong class="main-title"><i class="icon-ico-ticket1"></i>3D Double Feature</strong></td>
<td title="Adult"><span>$10.00</span></td>
<td title="Active Duty"><span>$10.00</span></td>
<td title="Child"><span>$10.00</span></td>
</tr>
<tr>
<td><strong class="main-title"><i class="icon-ico-ticket1"></i>Ticket Type Title</strong></td>
<td title="Adult"><span>$3.00</span></td>
<td title="Active Duty"><span>$3.00</span></td>
<td title="Child"><span>$3.00</span></td>
</tr>
<tr>
<td><strong class="main-title"><i class="icon-ico-ticket1"></i>3D Movie</strong></td>
<td title="Adult"><span>$6.00</span></td>
<td title="Active Duty"><span>$6.00</span></td>
<td title="Child"><span>$6.00</span></td>
</tr>
<tr>
<td><strong class="main-title"><i class="icon-ico-ticket1"></i>3D-2D Double Feature</strong></td>
<td title="Adult"><span>$8.00</span></td>
<td title="Active Duty"><span>$8.00</span></td>
<td title="Child"><span>$8.00</span></td>
</tr>
</tbody>
</table>
<div class="shows">
<div class="post">
<time datetime="2014-05-05">Monday - April 14, 2014</time>
<ul class="show-details">
<li>
<time datetime="2015-05-18">5:50 PM</time>
<div class="text">
<strong class="name"><a href="#">Muppets Most Wanted</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">113 min</span>
</div>
</li>
<li>
<time datetime="2015-05-18">8:00 PM</time>
<div class="text">
<strong class="name"><a href="#">Last Showing**</a></strong>
</div>
</li>
<li>
<time datetime="2015-05-18">5:50 PM</time>
<div class="text">
<strong class="name"><a href="#">Son of God</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">94 min</span>
</div>
</li>
</ul>
</div>
<div class="post">
<time datetime="2014-05-05">Tuesday - April 15, 2014</time>
<ul class="show-details">
<li>
<time datetime="2015-05-18">5:50 PM</time>
<div class="text">
<strong class="name"><a href="#">Need for Speed</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">124 min</span>
</div>
</li>
<li>
<time datetime="2015-05-18">8:10 PM</time>
<div class="text">
<strong class="name"><a href="#">300: Rise of an Empire</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">102 min</span>
</div>
</li>
</ul>
</div>
<div class="post">
<time datetime="2014-05-05">Wednesday - April 16, 2014</time>
<ul class="show-details">
<li>
<time datetime="2015-05-18">5:50 PM</time>
<div class="text">
<strong class="name"><a href="#">Tyler Perry's: Single Mom's Club</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">124 min</span>
</div>
</li>
<li>
<time datetime="2015-05-18">8:10 PM</time>
<div class="text">
<strong class="name"><a href="#">Need for Speed</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">102 min</span>
</div>
</li>
</ul>
</div>
<div class="post">
<time datetime="2014-05-05">Thursday - April 17, 2014</time>
<ul class="show-details">
<li>
<time datetime="2015-05-18">5:50 PM</time>
<div class="text">
<strong class="name"><a href="#">Muppets Most Wanted</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">124 min</span>
</div>
</li>
<li>
<time datetime="2015-05-18">8:10 PM</time>
<div class="text">
<strong class="name"><a href="#">3 Days to Kill</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">102 min</span>
</div>
</li>
</ul>
</div>
<div class="post">
<time datetime="2014-05-05">Friday - April 18, 2014</time>
<ul class="show-details">
<li>
<time datetime="2015-05-18">5:50 PM</time>
<div class="text">
<strong class="name"><a href="#">Mr. Peabody and Sherman</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">124 min</span>
</div>
</li>
<li>
<time datetime="2015-05-18">8:10 PM</time>
<div class="text">
<strong class="name"><a href="#">Divergent</a></strong>
<span style="padding:0 10px 0 0;" class="frost"><img alt="image" src="/assets/movies/images/glyph_navyfirst.png"></span>
<span style="padding:0;" class="rating"><img class="reg" alt="pg" src="images/ico-02.png" height="16" width="30"></span>
<span class="show-time">102 min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>