<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-xs-12 col-sm-offset-2 col-sm-8">
<div class="row event"> <!-- мероприятие -->
<div class="col-md-3 time">
<span class="day">1</span>
<span class="month">Янв</span>
</div>
<div class="col-md-9">
<h3>Рискменеджмент</h3>
<table class="table table-condensed table-hover">
<tr>
<th>Время</th>
<th>Описание</th>
</tr>
<tr>
<td><i class="fa fa-clock-o fa-lg"></i> 09:00</td>
<td>Начало</td>
</tr>
<tr>
<td><i class="fa fa-clock-o fa-lg"></i> 18:00</td>
<td>Окончание</td>
</tr>
</table>
</div>
</div>
<div class="row event"> <!-- мероприятие -->
<div class="col-md-3 time">
<span class="fa-stack fa-3x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<strong class="fa-stack-1x calendar-text">27</strong>
</span>
<div class="month">Май</div>
</div>
<div class="col-md-9">
<h3>Рискменеджмент</h3>
<ul class="list-group">
<a href="#" class="list-group-item"><span class="timing">10:00</span>Начало занятия.</a>
<a href="#" class="list-group-item"><span class="timing">12:00</span>Первая отметка о присутствии! Не проспать!</a>
<a href="#" class="list-group-item"><span class="timing">16:00</span>Вторая отметка о присутствии! Не прогулять!</a>
<a href="#" class="list-group-item"><span class="timing">16:00</span>Окончание занятия. Не проспать!</a>
</ul>
</div>
</div>
<div class="row event"> <!-- мероприятие -->
<div class="col-md-3 time">
<span class="day">4</span>
<span class="month">Июл</span>
</div>
<div class="col-md-9">
<h3>Наставничество 1</h3>
<p>Мы рады приветствовать Вас на странице программы «Наставничество-I». Наверняка Вы задумывались о том, как улучшить взаимодействие с Вашими сотрудниками, сделать так, чтобы они более эффективно выполняли поставленные задачи, развивались и профессионально совершенствовались на рабочем месте.<p>
<dl class="dl-horizontal">
<dt><i class="fa fa-clock-o fa-lg"></i> 09:00</dt>
<dd>Сбор гостей на мероприятие.</dd>
<dt><i class="fa fa-clock-o fa-lg"></i> 10:00</dt>
<dd>Кофебрэйк плавно перетекающий в фуршет.</dd>
<dt><i class="fa fa-clock-o fa-lg"></i> 19:00</dt>
<dd>Окончание фуршета.</dd>
</dl>
</div>
</div>
<div class="row event"> <!-- мероприятие -->
<div class="col-md-3 time">
<span class="day">5</span>
<span class="month">Июл</span>
</div>
<div class="col-md-9">
<h3>Наставничество 1 - вебинар</h3>
<p>О программе вебинара:<p>
<ul>
<li>Цели, структура</li>
<li>Правила обучения</li>
<li>Оценка эффективности обучения</li>
</ul>
</div>
</div>
<div class="row event"> <!-- мероприятие -->
<div class="col-md-3 time">
<span class="fa-stack fa-3x">
<i class="fa fa-calendar-o fa-stack-2x"></i>
<strong class="fa-stack-1x calendar-text">25</strong>
</span>
<div class="month">Авг</div>
</div>
<div class="col-md-9">
<h3>Наставничество 2</h3>
<p>В ПРОГРАММЕ «НАСТАВНИЧЕСТВО-II» ВЫ УЗНАЕТЕ:<p>
<ul class="list-group">
<li class="list-group-item">О системе наставничества в Сбербанке, взаимосвязи с HR-циклом и корпоративной моделью компетенций.</li>
<li class="list-group-item">Как работать с ИПР подопечного. В чем заключается специфика обучения взрослых людей.</li>
<li class="list-group-item">Каковы особенности наставничества представителей разных поколений.</li>
<li class="list-group-item">Из чего состоит «Портфель наставника»: инструменты наставничества, особенности их применения для подопечных разных категорий.</li>
<li class="list-group-item">Как выстраивать доверительные отношения с подопечным, работать с мотивацией подопечного.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
/* УДАЛИТЬ НАХРЕН ПЕРЕД ПАБЛИШЕМ*/
body {
padding: 60px 0px;
}
.event {
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 5px rgb(51, 51, 51);
box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
padding: 0px;
margin: 0px 0px 20px;
}
.event > .time {
padding-top:15px;
display: inline-block;
color: rgb(44, 110, 61);
text-align: center;
text-transform: uppercase;
}
.event:nth-child(even) > .time {
color: rgb(108, 154, 120);
}
.calendar-text { margin-top: .3em; }
.day {
display: block;
font-size: 56pt;
font-weight: 100;
line-height: 1;
}
.month. {
display: block;
font-size: 24pt;
font-weight: 900;
line-height: 1;
}
.timing {
text-align:center;
margin: 0 10px;
padding-right:10px;
border-right: 2px solid black;
font-weight: 900;
}
@media (max-width: 768px) {
.event > .time {
padding:5px;
width: 100%;
color: rgb(255,255,255);
background-color: rgb(44, 110, 61);
text-align: center;
text-transform: uppercase;
}
.event:nth-child(even) > .time {
color: rgb(255,255,255);
background-color: rgb(108, 154, 120);
}
.day {
display: inline;
font-size: 36pt;
font-weight: 100;
line-height: 1;
}
.month. {
display: inline;
font-size: 32pt;
font-weight: 900;
line-height: 1;
}
}
