<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 ---------->
<section class="container content-section text-center" data-offset="50" data-target=".navbar" id="about">
<ul class="nav nav-tabs tabsbar ">
<li class=""><a data-toggle="pill" href="#about_tab">Про клуб</a></li>
<li class="active"><a data-toggle="pill" href="#members_tab">Учасники</a></li>
</ul>
<div class="tab-content panel">
<div class="tab-pane panel-content fade" id="about_tab">
<h2>МАРАФОНСЬКИЙ КЛУБ "РАНОК"</h2>
<p>Засновано у 2011 році.</p>
<a href="https://vk.com/mk_runok">Група ВК</a>
</div>
<div class="tab-pane panel-content fade active in" id="members_tab">
<div class="row">
<!--template bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
}--><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Самусенко photo " alt="Самусенко photo ">
<div class="caption">
<h4 class="">Самусенко Олександр</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Микитенко photo " alt="Микитенко photo ">
<div class="caption">
<h4 class="">Микитенко Андрій</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Дубінський photo " alt="Дубінський photo ">
<div class="caption">
<h4 class="">Дубінський Ілля</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Дубінська photo " alt="Дубінська photo ">
<div class="caption">
<h4 class="">Дубінська Юлія</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Пічурін photo " alt="Пічурін photo ">
<div class="caption">
<h4 class="">Пічурін Роман</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Пічуріна photo " alt="Пічуріна photo ">
<div class="caption">
<h4 class="">Пічуріна Тетяна</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Глиняна photo " alt="Глиняна photo ">
<div class="caption">
<h4 class="">Глиняна Катерина</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Ковбель photo " alt="Ковбель photo ">
<div class="caption">
<h4 class="">Ковбель Олександр</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Тітов photo " alt="Тітов photo ">
<div class="caption">
<h4 class="">Тітов В'ячеслав</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Тітов photo " alt="Тітов photo ">
<div class="caption">
<h4 class="">Тітов Владіслав</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Ярцев photo " alt="Ярцев photo ">
<div class="caption">
<h4 class="">Ярцев Тимофій</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Соколенко photo " alt="Соколенко photo ">
<div class="caption">
<h4 class="">Соколенко Олександр</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Суровцев photo " alt="Суровцев photo ">
<div class="caption">
<h4 class="">Суровцев Сергій</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Мешевський photo " alt="Мешевський photo ">
<div class="caption">
<h4 class="">Мешевський Дмитро</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Колеснік photo " alt="Колеснік photo ">
<div class="caption">
<h4 class="">Колеснік Людміла</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Камешков photo " alt="Камешков photo ">
<div class="caption">
<h4 class="">Камешков Деніс</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Камешков photo " alt="Камешков photo ">
<div class="caption">
<h4 class="">Камешков Кирило</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Камешков photo " alt="Камешков photo ">
<div class="caption">
<h4 class="">Камешков Єгор</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Гаджиєва photo " alt="Гаджиєва photo ">
<div class="caption">
<h4 class="">Гаджиєва Ганна</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Цвященко photo " alt="Цвященко photo ">
<div class="caption">
<h4 class="">Цвященко Роза</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Якімов photo " alt="Якімов photo ">
<div class="caption">
<h4 class="">Якімов Дмитро</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div><div class="card col-xs-6 col-sm-3">
<div class="thumbnail">
<img class="" ng-reflect-src="http://placehold.it/350x350" src="http://placehold.it/350x350" ng-reflect-alt="Дашко photo " alt="Дашко photo ">
<div class="caption">
<h4 class="">Дашко Дмитро</h4>
<p>Член клуба с 2011 года</p>
<p class="card-text">Я суперпупер бегун</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.infolist
{
text-align: center;
font-family: 'Merriweather', serif;
font-size:2em;
color: #fff;
line-height:200%;
border-radius:5px;
}
.labelname
{
font-family: 'Merriweather', serif;
font-size:1.1em;
}
.listnow .btn-primary
{
background-color:#ff5b5b;
font-family: 'Merriweather', serif;
font-size:1.5em;
}
.listnow .btn-primary
{
border-color:#ff5b5b;
}
.listnow .btn-primary:active, .listnow .btn-primary:focus
{
outline: none;
}
.tabsbar
{
margin-top:20px;
border-radius-top:3px;
}
.tabsbar li a
{
font-family: 'Merriweather', serif;
font-size:1.1em;
color:#313b4b;
}
.tabsbar li #pets:hover
{
background-color:#1aa3a3;
color:white;
}
.tabsbar li #vets:hover
{
background-color:#005b96;
color:white;
}
.tabsbar li #shops:hover
{
background-color:#00C060;
color:white;
}
.tabsbar li #trainer:hover
{
background-color:#930072;
color:white;
}
#pets1
{
background-color:#1aa3a3;
border:1px solid #1aa3a3;
}
#vets2
{
border:1px solid #005b96;;
background-color:#005b96;
}
#shops3
{
border:1px solid #00C060;;
background-color:#00C060;
}
#trainer4
{
border:1px solid #930072;
background-color:#930072;
}
.nav-tabs {
border-bottom: 1px solid #313b4b;
}
.nav-tabs>li.active>#pets, .nav-tabs>li.active>#pets:hover, .nav-tabs>li.active>#pets:focus
{
background-color:#1aa3a3;
color:white;
}
.nav-tabs>li.active>#vets, .nav-tabs>li.active>#vets:hover, .nav-tabs>li.active>#vets:focus
{
background-color:#005b96;
color:white;
}
.nav-tabs>li.active>#shops, .nav-tabs>li.active>#shops:hover, .nav-tabs>li.active>#shops:focus
{
background-color:#00C060;
color:white;
}
.nav-tabs>li.active>#trainer, .nav-tabs>li.active>#trainer:hover, .nav-tabs>li.active>#trainer:focus
{
background-color:#930072;
color:white;
}
@media(max-width: 420px){
.infolist{font-size: 1.5em;}
}
