122 lines
6.6 KiB
HTML
122 lines
6.6 KiB
HTML
|
{% include 'blocks/head.html' %}
|
||
|
|
<!-- Header -->
|
||
|
|
{% include 'blocks/header.html' %}
|
||
|
|
<!-- Header -->
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main id="main-content">
|
||
|
|
<div class="main-section">
|
||
|
|
<section class="page-section">
|
||
|
|
<div class="container">
|
||
|
|
<h2>Portfolio</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div class="section-fullwidth">
|
||
|
|
<div class="element-size-100">
|
||
|
|
<div class="px-filter-holder col-md-12">
|
||
|
|
<div class="px-main-filter">
|
||
|
|
<span>SORT BY:</span>
|
||
|
|
<ul class="portfolio-filter">
|
||
|
|
<li><a class="btn btn-primary active margin-5" href="#" data-filter="*">List All</a></li>
|
||
|
|
{% for category in categories %}
|
||
|
|
<li><a class="btn btn-primary margin-5" href="#" data-filter=".{{ category|replace(' ','') }}">{{ category }}</a></li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="wrap-pad first">
|
||
|
|
<div class="row">
|
||
|
|
<div class="px-portfolio px-portfolio-masonary">
|
||
|
|
<ul class="portfolio-items col-3">
|
||
|
|
{% for category in categories %}
|
||
|
|
<li class="portfolio-item {{ category }} col-md-12">
|
||
|
|
<div class="item-main">
|
||
|
|
<div class="portfolio-image">
|
||
|
|
<div class="px-media">
|
||
|
|
<figure>
|
||
|
|
<a href="{{ url_for('show_project_category', category=category) }}"><img src="{{ url_for('show_category_banner', filename=category) }}" alt=""></a>
|
||
|
|
<figcaption>
|
||
|
|
<h6><a href="{{ url_for('show_project_category', category=category) }}">{{ category }}</a></h6>
|
||
|
|
<span><a href="{{ url_for('show_project_category', category=category) }}">{{ category }}</a></span>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
<h6 class="px-luxury">{{ category }}</h6>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- ./ Content div-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<!-- jQuery (necessary for JavaScript plugins) -->
|
||
|
|
<script src="{{ url_for('static', filename='scripts/jquery.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/bootstrap.min.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/modernizr.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/jquery.flexslider-min.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/jquery.prettyPhoto.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/isotope.min.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/custom.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/owl.carousel.min.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/sticky_header.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/jquery.nicescroll.min.js') }}"></script>
|
||
|
|
<script src="{{ url_for('static', filename='scripts/functions.js') }}"></script>
|
||
|
|
<script >
|
||
|
|
$('.px-carousel').owlCarousel({
|
||
|
|
nav: true,
|
||
|
|
margin: 20,
|
||
|
|
navText: [
|
||
|
|
"<i class=' icon-angle-left'></i>",
|
||
|
|
"<i class='icon-angle-right'></i>"
|
||
|
|
],
|
||
|
|
responsive: {
|
||
|
|
0: {
|
||
|
|
items: 1 // In this configuration 1 is enabled from 0px up to 479px screen size
|
||
|
|
},
|
||
|
|
|
||
|
|
480: {
|
||
|
|
items: 2, // from 480 to 677
|
||
|
|
nav: false // from 480 to max
|
||
|
|
},
|
||
|
|
|
||
|
|
678: {
|
||
|
|
items: 3, // from this breakpoint 678 to 959
|
||
|
|
center: false // only within 678 and next - 959
|
||
|
|
},
|
||
|
|
|
||
|
|
960: {
|
||
|
|
items: 4, // from this breakpoint 960 to 1199
|
||
|
|
center: false,
|
||
|
|
loop: false
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
1200: {
|
||
|
|
items: 4,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
jQuery(window).load(function(){
|
||
|
|
jQuery('.px-testimonial-slider, .px-bannerslider').flexslider({
|
||
|
|
animation: "fade",
|
||
|
|
prevText:"<em class='icon-arrow-left9'></em>",
|
||
|
|
nextText:"<em class='icon-arrow-right9'></em>",
|
||
|
|
start: function(slider){
|
||
|
|
jQuery('body').removeClass('loading');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<!-- Main Content -->
|
||
|
|
<!-- Footer -->
|
||
|
|
{% include 'blocks/footer.html' %}
|
||
|
|
<!-- Footer -->
|
||
|
|
{% include 'blocks/foot.html' %}
|