jekyll dirs

gallery.html

@@ -0,0 +1,54 @@
+---
+layout: default
+menu: gallery
+---
+
+
+<div class="container">
+	<div class="page-header">
+		<h1 class="page-title">
+			Gallery
+		</h1>
+		<div class="page-subtitle">1 - 12 of 1713 photos</div>
+		<div class="page-options d-flex">
+			<select class="form-control custom-select w-auto">
+				<option value="asc">Newest</option>
+				<option value="desc">Oldest</option>
+			</select>
+			<div class="input-icon ml-2">
+				<span class="input-icon-addon">
+					<i class="fe fe-search"></i>
+				</span>
+				<input type="text" class="form-control w-10" placeholder="Search photo">
+			</div>
+		</div>
+	</div>
+	
+	<div class="row row-cards">
+
+		{% for photo in site.data.photos limit: 12 offset: 20 %}
+		<div class="col-sm-6 col-lg-4">
+			{% assign user = site.data.users[forloop.index] %}
+			<div class="card p-3">
+				<a href="javascript:void(0)" class="mb-3">
+					<img src="{{ photo.small }}" alt="Photo by {{ user.name }} {{ user.surname }}" class="rounded">
+				</a>
+				<div class="d-flex align-items-center px-2">
+					<div class="avatar avatar-md mr-3" style="background-image: url({{ user.photo }})"></div>
+					<div>
+						<div>{{ user.name }} {{ user.surname }}</div>
+						<small class="d-block text-muted">{{ forloop.index | random_number: 3, 20 }} days ago</small>
+					</div>
+					<div class="ml-auto text-muted">
+						<a href="javascript:void(0)" class="icon"><i class="fe fe-eye mr-1"></i> {{ forloop.index | random_number | plus: 70 }}</a>
+						<a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i> {{ forloop.index | random_number }}</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		{% endfor %}
+
+
+	</div>
+	
+</div>