706 lines
35 KiB
HTML
706 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<!-- Main CSS -->
|
|
<link href="assets/css/main.css" rel="stylesheet" >
|
|
<title>Creative Agency</title>
|
|
<!-- WebFont JS -->
|
|
<script src="assets/js/webfont/webfont.js"></script>
|
|
<script>document.documentElement.className = "js";
|
|
var supportsCssVars = function supportsCssVars() {
|
|
var e,
|
|
t = document.createElement("style");
|
|
return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
|
|
};
|
|
|
|
supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
|
|
</script>
|
|
</head>
|
|
<body class="demo-1 loading">
|
|
<main>
|
|
<div class="frame frame--header">
|
|
<!-- NAVIGATION STARTS
|
|
========================================================================= -->
|
|
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" class="img-fluid" alt=""></a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="nav navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="index.html">Work</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="about-us.html" >About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="contact-us.html">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- NAVIGATION ENDS
|
|
========================================================================= -->
|
|
</div>
|
|
<!-- work STARTS
|
|
========================================================================= -->
|
|
<div class="menu">
|
|
<a class="menu__item" data-img="img/1.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">sirens</span></span><sup class="menu__item-number">(5)</sup></a>
|
|
<a class="menu__item" data-img="img/6.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">convoys</span></span><sup class="menu__item-number">(4)</sup></a>
|
|
<a class="menu__item" data-img="img/10.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">screens</span></span><sup class="menu__item-number">(3)</sup></a>
|
|
<a class="menu__item" data-img="img/13.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">alloy</span></span><sup class="menu__item-number">(4)</sup></a>
|
|
<a class="menu__item" data-img="img/17.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">tv</span></span><sup class="menu__item-number">(4)</sup></a>
|
|
<a class="menu__item" data-img="img/21.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">lunatic</span></span><sup class="menu__item-number">(5)</sup></a>
|
|
<a class="menu__item" data-img="img/26.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">irresistible</span></span><sup class="menu__item-number">(6)</sup></a>
|
|
<a class="menu__item" data-img="img/32.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">frontiers</span></span><sup class="menu__item-number">(3)</sup></a>
|
|
<a class="menu__item" data-img="img/35.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">barrage</span></span><sup class="menu__item-number">(4)</sup></a>
|
|
<a class="menu__item" data-img="img/39.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">moet</span></span><sup class="menu__item-number">(5)</sup></a>
|
|
<a class="menu__item" data-img="img/4.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">rubber</span></span><sup class="menu__item-number">(3)</sup></a>
|
|
<a class="menu__item" data-img="img/7.jpg"><span class="menu__item-inner-wrap"><span class="menu__item-inner">handy</span></span><sup class="menu__item-number">(4)</sup></a>
|
|
</div>
|
|
<section class="content-wrap">
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">sirens</span></span>
|
|
<sup class="content__title-number">(4)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/1.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Girl in pink</h3>
|
|
<p class="gallery__item-meta">2016, Paris</p>
|
|
<a href="assets/img/1.jpg" title="The Cleaner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/2.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Overdose</h3>
|
|
<p class="gallery__item-meta">2015, Bologna</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/3.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Premiere</h3>
|
|
<p class="gallery__item-meta">2014, Brno</p>
|
|
<a href="assets/img/3.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/4.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">face paint</h3>
|
|
<p class="gallery__item-meta">2011, Copenhagen</p>
|
|
<a href="assets/img/4.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/5.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Recursive</h3>
|
|
<p class="gallery__item-meta">2010, Berlin</p>
|
|
<a href="assets/img/5.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">convoys</span></span>
|
|
<sup class="content__title-number">(4)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/6.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Fantasia</h3>
|
|
<p class="gallery__item-meta">2015, Rome</p>
|
|
<a href="assets/img/6.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/7.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Greenery</h3>
|
|
<p class="gallery__item-meta">2016, Berlin</p>
|
|
<a href="assets/img/9.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/8.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Freaky</h3>
|
|
<p class="gallery__item-meta">2017, Davos</p>
|
|
<a href="assets/img/8.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/9.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Shannon</h3>
|
|
<p class="gallery__item-meta">2018, Sydney</p>
|
|
<a href="assets/img/9.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">screens</span></span>
|
|
<sup class="content__title-number">(3)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/10.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Big Ben</h3>
|
|
<p class="gallery__item-meta">2013, London</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/11.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Cranky</h3>
|
|
<p class="gallery__item-meta">2014, Budapest</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/12.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Love Horse</h3>
|
|
<p class="gallery__item-meta">2015, Belgrade</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">alloy</span></span>
|
|
<sup class="content__title-number">(4)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/13.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Lady Brown</h3>
|
|
<p class="gallery__item-meta">2001, Helsinki</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/14.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">King Candy</h3>
|
|
<p class="gallery__item-meta">2003, Lisbon</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/15.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">The Book</h3>
|
|
<p class="gallery__item-meta">2005, Toronto</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/16.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Corner</h3>
|
|
<p class="gallery__item-meta">2006, Dublin</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">tv</span></span>
|
|
<sup class="content__title-number">(4)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/17.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Fun fun fun</h3>
|
|
<p class="gallery__item-meta">2014, Moscow</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/18.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Lovelife</h3>
|
|
<p class="gallery__item-meta">2015, Shanghai</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/19.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Woodland</h3>
|
|
<p class="gallery__item-meta">2016, Vienna</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/20.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">No where</h3>
|
|
<p class="gallery__item-meta">2017, Bern</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">lunatic</span></span>
|
|
<sup class="content__title-number">(5)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/21.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Fantastic</h3>
|
|
<p class="gallery__item-meta">2013, Bangkok</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/22.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Cutting Me</h3>
|
|
<p class="gallery__item-meta">2014, Florence</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/23.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Houseparty</h3>
|
|
<p class="gallery__item-meta">2015, Ljubljana</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/24.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Gnatus</h3>
|
|
<p class="gallery__item-meta">2016, Helsinki</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/25.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">What?</h3>
|
|
<p class="gallery__item-meta">2017, Kiev</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">irresistible</span></span>
|
|
<sup class="content__title-number">(6)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/26.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Handsome</h3>
|
|
<p class="gallery__item-meta">1998, Cologne</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/27.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Quo Vadis?</h3>
|
|
<p class="gallery__item-meta">1999, Rome</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/28.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Prime Time</h3>
|
|
<p class="gallery__item-meta">2000, Pasadena</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/29.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Doom</h3>
|
|
<p class="gallery__item-meta">2001, Dublin</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/30.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Algebra</h3>
|
|
<p class="gallery__item-meta">2002, Bukarest</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/31.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Freedom</h3>
|
|
<p class="gallery__item-meta">2003, Sarajevo</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">frontiers</span></span>
|
|
<sup class="content__title-number">(3)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/32.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Apples</h3>
|
|
<p class="gallery__item-meta">2019, Porto</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/33.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Overdose</h3>
|
|
<p class="gallery__item-meta">2020, Barcelona</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/34.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Removed</h3>
|
|
<p class="gallery__item-meta">2021, Osaka</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">barrage</span></span>
|
|
<sup class="content__title-number">(4)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/35.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Hard Candy</h3>
|
|
<p class="gallery__item-meta">2021, Agra</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/36.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Longing</h3>
|
|
<p class="gallery__item-meta">2022, Las Vegas</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/37.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Free Fall</h3>
|
|
<p class="gallery__item-meta">2023, Pattaya</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/38.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Cracking</h3>
|
|
<p class="gallery__item-meta">2024, Seoul</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">moet</span></span>
|
|
<sup class="content__title-number">(5)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/39.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Equals</h3>
|
|
<p class="gallery__item-meta">2015, Tokyo</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/40.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Forced</h3>
|
|
<p class="gallery__item-meta">2016, Melbourne</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/1.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Shackles</h3>
|
|
<p class="gallery__item-meta">2017, London</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/2.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Unknown</h3>
|
|
<p class="gallery__item-meta">2018, Jerusalem</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/3.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Holy Spirit</h3>
|
|
<p class="gallery__item-meta">2019, Paris</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">rubber</span></span>
|
|
<sup class="content__title-number">(3)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/4.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Just You</h3>
|
|
<p class="gallery__item-meta">2010, Detroit</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/5.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Splitting</h3>
|
|
<p class="gallery__item-meta">2011, Milan</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/6.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Handy Hat</h3>
|
|
<p class="gallery__item-meta">2012, Jakarta</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<h2 class="content__title">
|
|
<span class="content__title-wrap"><span class="content__title-inner">handy</span></span>
|
|
<sup class="content__title-number">(4)</sup>
|
|
</h2>
|
|
<div class="gallery">
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/7.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Hallo Friend</h3>
|
|
<p class="gallery__item-meta">2011, Frankfurt</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/8.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Middle</h3>
|
|
<p class="gallery__item-meta">2012, Liverpool</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/9.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Location</h3>
|
|
<p class="gallery__item-meta">2013, Denver</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="gallery__item">
|
|
<div class="gallery__item-img">
|
|
<div class="gallery__item-imginner" style="background-image:url(assets/img/10.jpg)"></div>
|
|
</div>
|
|
<figcaption class="gallery__item-caption">
|
|
<h3 class="gallery__item-title" data-splitting="">Heavy Womb</h3>
|
|
<p class="gallery__item-meta">2014, Manchester</p>
|
|
<a href="assets/img/2.jpg" title="The Cleasdf fdner" class="gallery__item-more image-popup-vertical-fit">+</a>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<button class="back">
|
|
<svg viewBox="0 0 60 34" width="30" height="17">
|
|
<path d="M60 15.066H7.235L19.128 3.173 16.456.5 0 16.956 16.456 33.41l2.672-2.672L7.235 18.846H60z"></path>
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
<!-- WORK ENDS
|
|
========================================================================= -->
|
|
<!-- FOOTER STARTS
|
|
========================================================================= -->
|
|
<footer class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<ul class="socialmedia">
|
|
<li><a href="#">Facebook</a></li>
|
|
<li><a href="#">Instagram</a></li>
|
|
<li><a href="#">Twitter</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 text-end">
|
|
<p class="">ThisOne © 2021</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- /.. FOOTER ENDS
|
|
========================================================================= -->
|
|
</main>
|
|
<svg class="cursor" width="30" height="30" viewBox="0 0 30 30">
|
|
<circle class="cursor__inner" cx="15" cy="15" r="7.5"></circle>
|
|
</svg>
|
|
<!--JQUERY MIN JS-->
|
|
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
|
|
<!--BOOTSTRAP JS-->
|
|
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
|
|
<!-- OWL CAROUSEL -->
|
|
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
|
|
<!-- MAGNIFIC POPUP -->
|
|
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
|
|
<!-- PORTFOLIO -->
|
|
<script src="assets/js/work.js"></script>
|
|
<!-- CUSTOM JS -->
|
|
<script src="assets/js/script.js"></script>
|
|
</body>
|
|
</html> |