<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-6 col-md-3"> <div class="card well"> <span class="number">1</span> <i class="fa fa-quote-left fa-5x" aria-hidden="true"></i> <p>Текст</p> <div class="progress"> <div class="progress-bar progress-bar-successed progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <span class="number">2</span> <i class="fa fa-youtube-play fa-5x" aria-hidden="true"></i> <p>Видео</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:40%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <span class="number">3</span> <i class="fa fa-calendar fa-5x" aria-hidden="true"></i> <p>Мероприятие</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:15%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <i class="fa fa-book fa-5x" aria-hidden="true"></i> <p>Материалы</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <i class="fa fa-flag fa-5x" aria-hidden="true"></i> <p>Задание</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <i class="fa fa-check-square-o fa-5x" aria-hidden="true"></i> <p>Промежуточное тестирование</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:10%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <i class="fa fa-comments fa-5x" aria-hidden="true"></i> <p>Форум</p> <div class="progress"> <div class="progress-bar progress-bar-successed progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <i class="fa fa-globe fa-5x" aria-hidden="true"></i> <p>Вебинар</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:30%"> </div> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div class="card well"> <i class="fa fa-check-square-o fa-5x" aria-hidden="true"></i> <p>Тестирование</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"> </div> </div> </div> </div> </div> </div>

@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css"); /* УДАЛИТЬ НАХРЕН ПЕРЕД ПАБЛИШЕМ*/ body { padding: 60px 0px; } .card { background-color: rgb(245, 255, 245); color: rgb(45, 55, 45); box-shadow: 0px 0px 5px rgb(51, 51, 51); box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7); text-align: center; } .number { position: absolute; top:10px; right:30px; font-weight:900; } .progress-bar-successed { background-color: #1fa67a; }