"WorkHours"
Bootstrap 3.2.0 Snippet by Баяндин

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"> </head> <body> <div class="container demo-bg"> <div class="row"> <div class="col-sm-6 col-xs-12"> <div class="business-hours"> <h2 class="title">Часы работы инспекции</h2> <ul class="list-unstyled opening-hours"> <li>Понедельник <span class="pull-right">8:15-17:00</span></li> <li>Вторник <span class="pull-right">8:15-17:00</span></li> <li>Среда <span class="pull-right">8:15-17:00</span></li> <li>Четверг <span class="pull-right">8:15-17:00</span></li> <li>Пятница <span class="pull-right">8:15-15:45</span></li> <li>Суббота <span class="pull-right">Выходной</span></li> <li>Воскресенье <span class="pull-right">Выходной</span></li> </ul> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="business-hours coffeebreak"> <h2 class="title">Перерыв</h2> <ul class="list-unstyled"> <li>Обед <span class="pull-right">12:15-12:45</span></li> <li>Технический перерыв <span class="pull-right">09:45-10:00</span></li> <li>Технический перерыв <span class="pull-right">14:45-15:00</span></li> </ul> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="business-hours"> <h2 class="title">Прием граждан</h2> <ul class="list-unstyled opening-hours"> <li>Среда <span class="pull-right">14:00-16:30</span></li></ul> </div> </div> </div> <div class="row line2"> <div class="col-sm-6 col-xs-12"> <div class="business-hours"> <h2 class="title">Прием и выдача ювелирных изделий</h2> <ul class="list-unstyled opening-hours"> <li>Понедельник <span class="pull-right">10:00-11:00</span></li> <li>Вторник <span class="pull-right">10:00-11:00</span></li> <li>Среда <span class="pull-right">9:00-11:00</span></li> <li>Четверг <span class="pull-right">10:00-11:00</span></li> <li>Пятница <span class="pull-right">10:00-11:00</span></li> <li>Суббота <span class="pull-right">Выходной</span></li> <li>Воскресенье <span class="pull-right">Выходной</span></li> </ul> <p class="text-muted">*Пятница - приемный день для физических лиц</p> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="business-hours"> <h2 class="title">Консультация по специальному учету</h2> <ul class="list-unstyled opening-hours"> <li>Понедельник <span class="pull-right">9:00-12:00</span></li> <li>Вторник <span class="pull-right">9:00-12:00</span></li> <li>Среда <span class="pull-right">9:00-12:00</span></li> <li>Четверг <span class="pull-right">9:00-12:00</span></li> <li>Пятница <span class="pull-right">-</span></li> <li>Суббота <span class="pull-right">Выходной</span></li> <li>Воскресенье <span class="pull-right">Выходной</span></li> </ul> <p class="text-muted">*Иногодние принимаются в часы работы инспекции</p> </div> </div> </div> </div> </body> </html>
.business-hours { padding: 25px 14px; margin-top: 10px; position: relative; min-width:200px; } .business-hours{ border: 5px solid #2C71A4; } .business-hours .title { font-size: 16px; font-weight:bolder; color: #266B9F; text-transform: uppercase; padding-left: 5px; border-left: 4px solid #2C71A4; } .business-hours li { color: rgb(51, 51, 51); line-height: 30px; border-bottom: 1px solid #B3B3B3; } .business-hours li:last-child { border-bottom: none; } .business-hours .opening-hours li.today { color: #2C71A4; } .demo-bg .row:last-child{ margin-bottom:15px; } .coffeebreak{ border: 5px solid #88CD2D; } .coffeebreak > .title{ color: #88CD2D; border-left: 4px solid #88CD2D; }
// highlight current day on opeining hours $(document).ready(function() { var nowDay = new Date().getDay(); $('.opening-hours').each(function(i,e){$(this).find("li").eq(nowDay == 0 ? 6 : nowDay-1).addClass('today').css("font-weight", "600");}); });

Related: See More

Material Dashboard Angular

Questions / Comments: