-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.html
150 lines (137 loc) · 6.41 KB
/
gallery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE HTML>
<!--
Snapshot by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Gallery - Snapshot by TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<div class="page-wrap">
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html"><span class="icon fa-home"></span></a></li>
<li><a href="gallery.html" class="active"><span class="icon fa-camera-retro"></span></a></li>
<li><a href="generic.html"><span class="icon fa-file-text-o"></span></a></li>
</ul>
</nav>
<!-- Main -->
<section id="main">
<!-- Header -->
<header id="header">
<div>Snapshot <span>by TEMPLATED</span></div>
</header>
<!-- Gallery -->
<section id="galleries">
<!-- Photo Galleries -->
<div class="gallery">
<!-- Filters -->
<header>
<h1>Gallery</h1>
<ul class="tabs">
<li><a href="#" data-tag="all" class="button active">All</a></li>
<li><a href="#" data-tag="people" class="button">People</a></li>
<li><a href="#" data-tag="place" class="button">Places</a></li>
<li><a href="#" data-tag="thing" class="button">Things</a></li>
</ul>
</header>
<div class="content">
<div class="media all people">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all place">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all thing">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all people">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all place">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all thing">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all people">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all place">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all thing">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all people">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all place">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
<div class="media all thing">
<a href="images/pic03.jpg"><img src="images/pic03.jpg" alt="" title="This right here is a caption." /></a>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact">
<!-- Social -->
<div class="social column">
<h3>About Me</h3>
<p>Mus sed interdum nunc dictum rutrum scelerisque erat a parturient condimentum potenti dapibus vestibulum condimentum per tristique porta. Torquent a ut consectetur a vel ullamcorper a commodo a mattis ipsum class quam sed eros vestibulum quisque a eu nulla scelerisque a elementum vestibulum.</p>
<p>Aliquet dolor ultricies sem rhoncus dolor ullamcorper pharetra dis condimentum ullamcorper rutrum vehicula id nisi vel aptent orci litora hendrerit penatibus erat ad sit. In a semper velit eleifend a viverra adipiscing a phasellus urna praesent parturient integer ultrices montes parturient suscipit posuere quis aenean. Parturient euismod ultricies commodo arcu elementum suspendisse id dictumst at ut vestibulum conubia quisque a himenaeos dictum proin dis purus integer mollis parturient eros scelerisque dis libero parturient magnis.</p>
<h3>Follow Me</h3>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
</ul>
</div>
<!-- Form -->
<div class="column">
<h3>Get in Touch</h3>
<form action="#" method="post">
<div class="field half first">
<label for="name">Name</label>
<input name="name" id="name" type="text" placeholder="Name">
</div>
<div class="field half">
<label for="email">Email</label>
<input name="email" id="email" type="email" placeholder="Email">
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6" placeholder="Message"></textarea>
</div>
<ul class="actions">
<li><input value="Send Message" class="button" type="submit"></li>
</ul>
</form>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="copyright">
© Untitled Design: <a href="https://templated.co/">TEMPLATED</a>. Images: <a href="https://unsplash.com/">Unsplash</a>.
</div>
</footer>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/typed.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>