Запустить
<!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 - Сниппет галереи статей #4</title> <!-- Bootstrap --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> body { padding-top: 15px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } body { background-color:#eee; } #pinBoot { position: relative; max-width: 100%; width: 100%; } img { width: 100%; max-width: 100%; height: auto; } .white-panel { position: absolute; background: white; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); padding: 10px; } /* stylize any heading tags withing white-panel below */ .white-panel h1 { font-size: 1em; } .white-panel h1 a { color: #A92733; } .white-panel:hover { box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); margin-top: -5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } </style> </head> <body> <div class="container"> <h1 class="h3 text-center page-header">Сниппет галереи статей #4</h1> </div> <div class="container"> <div class="row"> <section id="pinBoot"> <article class="white-panel"> <img src="/examples/images/image1-400-400.jpg"> <h4><a href="#">Заголовок 1</a></h4> <p>6 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 365 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 4 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +5 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Lorem ipsum occaecat cupidatat non proident.</p> </article> <article class="white-panel"> <img src="/examples/images/image3-400-400.jpg"> <h4><a href="#">Заголовок 2</a></h4> <p>10 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 321 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 2 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +3 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut est laborum.</p> </article> <article class="white-panel"> <img src="/examples/images/image1-800-530.jpg"> <h4><a href="#">Заголовок 3</a></h4> <p>12 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 183 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 6 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> -3 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Duis aut irure dolor in reprehenderit in voluptate velit esse.</p> </article> <article class="white-panel"> <img src="/examples/images/image2-400-200.jpg"> <h4><a href="#">Заголовок 4</a></h4> <p>14 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 203 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 1 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +1 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore ut aliquip ex ea commodo consequat. Duis aut irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article class="white-panel"> <img src="/examples/images/image3-400-200.jpg"> <h4><a href="#">Заголовок 5</a></h4> <p>19 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 217 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 2 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +3 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id. Nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p> </article> <article class="white-panel"> <img src="/examples/images/image2-800-530.jpg"> <h4><a href="#">Заголовок 6</a></h4> <p>21 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 98 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 1 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +2 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <article class="white-panel"> <img src="/examples/images/image2-400-400.jpg"> <h4><a href="#">Заголовок 7</a></h4> <p>26 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 107 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 2 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +7 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore nisi ut aliquip ex ea commodo consequat. Duis aut irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p> </article> <article class="white-panel"> <img src="/examples/images/image1-400-200.jpg"> <h4><a href="#">Заголовок 8</a></h4> <p>1 июля 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 32 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 5 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +7 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></p> <p>Lorem ipsum dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </article> </section> <hr> </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> <script src="/examples/vendors/bootstrap-snippet-gallery4.js"></script> </body> </html>