"GRILLA HORARIOS"
Bootstrap 3.0.0 Snippet by MediaMaster

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <div class="container demo-bg"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"> <div class="business-hours"> <h2 class="white">HORARIOS RUNNING</h2> <h2 class="title">ROSEDAL DE PALERMO</h2> <li>LUNES <span class="pull-right">8:00 a.m</span></li> <li>MARTES <span class="pull-right">19:30 p.m</span></li> <li>MIÉRCOLES <span class="pull-right">8:00 a.m</span></li> <li>JUEVES <span class="pull-right">19:30 p.m</span></li> <li>VIERNES <span class="pull-right">8:00 a.m</span></li> <li>SÁBADOS <span class="pull-right">9:00 a.m</span></li> <div></div> <h2 class="title">PARQUE CENTENARIO</h2> <li>LUNES <span class="pull-right">19:30 p.m</span></li> <li>MARTES <span class="pull-right">8:00 a.m</span></li> <li>MIÉRCOLES <span class="pull-right">19:30 p.m</span></li> <li>JUEVES <span class="pull-right">8:00 a.m</span></li> <li>VIERNES <span class="pull-right">19:30 p.m</span></li> <br> </ul> </div> </div> </div> </body> </html>
.demo-bg{ background: #ffac0c; margin-top: 60px; } .business-hours { background: #222; padding: 5px 14px; margin-top: -15px; position: relative; } .white{ color: #888; } .business-hours:before{ content: ''; width: 23px; height: 23px; background: #111; position: absolute; top: 5px; left: -12px; transform: rotate(-45deg); z-index: -1; } .business-hours .title { font-size: 20px; color: #BBB; text-transform: uppercase; padding-left: 5px; border-left: 4px solid #ffac0c; } .business-hours li { color: #888; line-height: 30px; border-bottom: 1px solid #333; } .business-hours li:last-child { border-bottom: none; } .business-hours .opening-hours li.today { color: #ffac0c; }
// highlight current day on opeining hours $(document).ready(function() { $('.opening-hours li').eq(new Date().getDay()).addClass('today'); });

Related: See More

Paper Kit 2 Angular

Questions / Comments: