<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.0.0/darkly/bootstrap.min.css" integrity="sha256-bhD4/DdCApNAYlOpvKssUa2hD0Du8xrgOvtY4w25shM=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.9/css/lightgallery.min.css" integrity="sha256-8rfHbJr+ju3Oc099jFJMR1xAPu8CTPHU8uP5J3X/VAY=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <style> .card { cursor: pointer; } .card .card-img-overlay { pointer-events: none; z-index: 3; } .card.gallery:hover img { z-index: 1; } .card.gallery:hover img:nth-child(1) { z-index: 2; } .card.gallery:hover img:nth-child(2) { transform: rotate(-2deg) translateY(10px) translateX(-12px); } .card.gallery:hover img:nth-child(3) { transform: rotate( 5deg) translateY(-8px) translateX( 12px); } .card .gallery-indicator { position: absolute; right: 1em; text-shadow: 0 0 3px #202020; top: 1em; } .card .card-img-overlay h5 { text-shadow: 0 0 3px #202020; } .card div.img { display: none; } .card img:not(:first-child) { position: absolute; z-index: -1; } .card img { transition: transform .3s ease-out; width: 100%; } .nav-link i { color: rgba(255,255,255,.5); } @media (max-width: 767.98px) { .w-proc { width: 50%; } } @media (max-width: 991.98px) and (min-width: 768px) { .w-proc { width: 33%; } } @media (max-width: 1199.98px) and (min-width: 992px) { .w-proc { width: 25%; } } @media (min-width: 1200px) { .w-proc { width: 20%; } } </style> <title>Photos</title> </head> <body> <nav class="navbar navbar-expand-lg fixed-bottom navbar-light bg-light"> <a class="navbar-brand" href="#">Photos</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="https://ahlers.me/" title="Website"><i class="fas fa-home"></i> Homepage</a></li> <li class="nav-item"><a class="nav-link" href="https://knut.in/twitter" title="Twitter"><i class="fab fa-twitter"></i> @Luzifer</a></li> </ul> </div> </nav> <div class="container-fluid"> <div class="row mt-3 mb-5"> <div class="col-md-12 d-flex justify-content-left flex-wrap" id="gallery-wrap"></div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/popper.min.js" integrity="sha256-ST2MecrXrJaAsqmfpk9XRQITlDoyMmUtgKBEndDisSc=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous"></script> <!-- LightGallery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.9/js/lightgallery.min.js" integrity="sha256-nEcjdQ8bF4o/xKFCSWB9AkZ+HPWmCbkHNquhE5YNLds=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lg-hash/1.0.4/lg-hash.min.js" integrity="sha256-rC6pN4R1omjrtMw06nFMCARzYqxu4yaVoRTHZa+wTzw=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js" integrity="sha256-Ck/PWQUoHsc9d2X4yUALvrs71Qo5cs+gIHDWBl2Ggb8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js" integrity="sha256-+JMHsXRyeTsws/tzbIh5YHQxRdKCuNjmvNcTFtY6DLc=" crossorigin="anonymous"></script> <script src="app.js"></script> <script id="album-template" type="text/x-handlebars-template"> <div class="card bg-light text-white w-proc float-left {{#ifGt images.length 1}}gallery{{/ifGt}}"> {{#each images}} {{#ifGt @index 2}} <div class="card-img border img" src="{{thumbnail}}" alt="{{title}}" data-src="{{fullsize}}"></div> {{else}} <img class="card-img border img" src="{{thumbnail}}" alt="{{title}}" data-src="{{fullsize}}"> {{/ifGt}} {{/each}} <div class="card-img-overlay h-100 d-flex flex-column justify-content-end"> <h5>{{title}}</h5> {{#ifGt images.length 1}} <i class="fas fa-clone gallery-indicator"></i> {{/ifGt}} </div> </div> </script> <script id="error-template" type="text/x-handlebars-template"> <div class="row justify-content-md-center"> <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4"> <div class="alert alert-danger">{{message}}</div> </div> </div> </script> </body> </html>