Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Сниппет галереи статей #2</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> body { padding-top: 15px; } .card { min-width: 0; margin: 20px 10px; width: 100%; background: #0C0C0C; color: #696969; -webkit-transition: .3s ease all; transition: .3s ease all; border: none; border-radius: 5px; padding: 0; margin-bottom: 30px; } .card .card-img-container .card-img { background-size: cover; background-position: top center; display: block; height: 175px; } .card .card-img { height: 150px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .card .card-img-container { position: relative; overflow: hidden; width: 100%; } .card .card-content { padding: 20px 20px 40px; text-align: center; } .card .card-meta { font-size: 12px; } .card .meta-box { margin-right: 20px; } .card .card-content h2 { margin-top: 10px; margin-bottom: 0; font-size: 16px; line-height: 1.4; } .card h2 a { color: #D0D0D0; -webkit-transition: .3s ease all; transition: .3s ease all; } a:hover{ text-decoration:none; } .card:hover h2 a { color: #FFF; } .card .meta-tags a:hover { color: #FFF; } .card .meta-tags .tag { background: #DD1B16; color: #f9c7c6; } .card .meta-tags a:last-child { margin-right: 0; border-bottom-right-radius: 5px; } .card .meta-tags a:first-child { border-top-left-radius: 5px; } .card .meta-tags a { display: inline-block; padding: 3px 8px; color: #FFF; -webkit-transition: .3s ease all; transition: .3s ease all; } </style> </head> <body> <div class="container"> <h1 class="h3 text-center page-header">Сниппет галереи статей #2</h1> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card card-favorite"> <div class="card-img-container"> <a href="#" style="background-image:url('/examples/images/image1-400-200.jpg')" class="card-img"></a> </div> <div class="card-content"> <div class="card-meta"> <span class="meta-date meta-box"> 11 Января </span> <span class="meta-pulse meta-box"> <a href="#" class="card-share-number sharrre">50 Поделиться</a> </span> </div> <h2> <a href="#"> Quaerat voluptatem sequi nesciunt </a> </h2> </div> <span class="meta-tags"> <a href="#" title="tags" class="tag">Тег</a> </span> </div> </div> <div class="col-md-4"> <div class="card card-favorite"> <div class="card-img-container"> <a href="#" style="background-image:url('/examples/images/image2-400-200.jpg')" class="card-img"></a> </div> <div class="card-content"> <div class="card-meta"> <span class="meta-date meta-box"> 14 Января </span> <span class="meta-pulse meta-box"> <a href="#" class="card-share-number sharrre">50 Поделиться</a> </span> </div> <h2> <a href="#"> Quaerat voluptatem sequi nesciunt </a> </h2> </div> <span class="meta-tags"> <a href="#" title="tags" class="tag">Тег</a> </span> </div> </div> <div class="col-md-4"> <div class="card card-favorite"> <div class="card-img-container"> <a href="#" style="background-image:url('/examples/images/image3-400-200.jpg')" class="card-img"></a> </div> <div class="card-content"> <div class="card-meta"> <span class="meta-date meta-box"> 18 Января </span> <span class="meta-pulse meta-box"> <a href="#" class="card-share-number sharrre">50 Поделиться</a> </span> </div> <h2> <a href="#"> Quaerat voluptatem sequi nesciunt </a> </h2> </div> <span class="meta-tags"> <a href="#" title="tags" class="tag">Тег</a> </span> </div> </div> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.2.1.min.js"></script> <!-- Bootstrap --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>