343 lines
12 KiB
HTML
343 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Gallery V1{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/lightbox2/dist/css/lightbox.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/isotope-layout/dist/isotope.pkgd.min.js' %}"></script>
|
|
<script src="{% static 'plugins/lightbox2/dist/js/lightbox.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/gallery.demo.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">Gallery</a></li>
|
|
<li class="breadcrumb-item active">Gallery v1</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Gallery <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
<!-- BEGIN #options -->
|
|
<div id="options" class="mb-3">
|
|
<div class="d-flex flex-wrap text-nowrap mb-n1" id="filter" data-option-key="filter">
|
|
<a href="#show-all" class="btn btn-white btn-sm active border-0 me-1 mb-1" data-option-value="*">Show All</a>
|
|
<a href="#gallery-group-1" class="btn btn-white btn-sm border-0 me-1 mb-1" data-option-value=".gallery-group-1">Gallery Group 1</a>
|
|
<a href="#gallery-group-2" class="btn btn-white btn-sm border-0 me-1 mb-1" data-option-value=".gallery-group-2">Gallery Group 2</a>
|
|
<a href="#gallery-group-3" class="btn btn-white btn-sm border-0 me-1 mb-1" data-option-value=".gallery-group-3">Gallery Group 3</a>
|
|
<a href="#gallery-group-4" class="btn btn-white btn-sm border-0 me-1 mb-1" data-option-value=".gallery-group-4">Gallery Group 4</a>
|
|
</div>
|
|
</div>
|
|
<!-- END #options -->
|
|
<!-- BEGIN #gallery -->
|
|
<div id="gallery" class="gallery">
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-1">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-1.jpg' %}" data-lightbox="gallery-group-1">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-1.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#1382 - 3D Arch
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Lorem ipsum dolor sit amet</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Sean Ngu</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Nunc velit urna, aliquam at interdum sit amet, lacinia sit amet ligula. Quisque et erat eros. Aenean auctor metus in tortor placerat, non luctus justo blandit.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-1">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-2.jpg' %}" data-lightbox="gallery-group-1">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-2.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#2343 - Madness Arch
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Fusce aliquet ac quam at tincidunt</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Camryn Wong</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Fusce eu rutrum nisi, ut pretium mi. Sed mollis nisi sed auctor molestie. Vestibulum dictum pharetra leo sed euismod.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-1">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-3.jpg' %}" data-lightbox="gallery-group-1">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-3.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#3452 - Scottwills Arch
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Etiam lobortis egestas nisl</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Lelouch Wong</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eget ultricies arcu.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-2">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-4.jpg' %}" data-lightbox="gallery-group-2">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-4.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#4123 - Scottwills Pinecone
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Donec mi quis volutpat ornare</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Richard Leong</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut et augue luctus libero dignissim sodales, sapien consequat lacinia fringilla.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-2">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-5.jpg' %}" data-lightbox="gallery-group-2">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-5.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#9200 Kariminal Rider
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Donec pretium volutpat ornare</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Derrick Wong</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut et augue luctus libero, feugiat sapien consequat lacinia fringilla.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-3">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-6.jpg' %}" data-lightbox="gallery-group-3">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-6.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#1832 Scottwills Autumn
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Mi quis volutpat ornare sodales</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Apple Tong</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Ut et augue luctus libero dignissim sodales. Fusce feugiat sapien consequat lacinia fringilla. Vivamus eget ultricies arcu.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-3">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-7.jpg' %}" data-lightbox="gallery-group-3">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-7.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#0229 Scottwills Autumn 2
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Vestibulum ante ipsum primis</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Thomas Wong</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut et augue luctus libero dignissim sodales, sapien consequat lacinia fringilla.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-4">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-8.jpg' %}" data-lightbox="gallery-group-4">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-8.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#5721 Scottwills Snow
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Nunc eget hendrerit nisi sodales</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">Andy Wong</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Ut et augue nisi sodales luctus libero dignissim sodales. Fusce feugiat nisi sodales sapien consequat lacinia fringilla.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-4">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-9.jpg' %}" data-lightbox="gallery-group-4">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-9.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#9921 Scottwills Riverbank
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Nunc eget hendrerit nisi dignissim</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">William Tan</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Ut et augue luctus libero dignissim sodales. Fusce feugiat sapien consequat libero dignissim lacinia fringilla.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
<!-- BEGIN image -->
|
|
<div class="image gallery-group-4">
|
|
<div class="image-inner">
|
|
<a href="{% static 'img/gallery/gallery-10.jpg' %}" data-lightbox="gallery-group-4">
|
|
<div class="img" style="background-image: url({% static 'img/gallery/gallery-10.jpg' %})"></div>
|
|
</a>
|
|
<p class="image-caption">
|
|
#6436 Scottwills Buss
|
|
</p>
|
|
</div>
|
|
<div class="image-info">
|
|
<h5 class="title">Sed mollis nisi sed auctor</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="rating">
|
|
<span class="star active"></span>
|
|
<span class="star active"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
<span class="star"></span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<small>by</small> <a href="javascript:;">David King</a>
|
|
</div>
|
|
</div>
|
|
<div class="desc">
|
|
Vestibulum dictum pharetra leo sed euismod. Lorem ipsum dolor sit amet, consectetur adipiscing feugiat sapien elit.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END image -->
|
|
</div>
|
|
<!-- END #gallery -->
|
|
{% endblock %} |