/
index.html
116 lines (96 loc) · 5.07 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="reel">
<!-- Header Item -->
<div id="header" class="item" data-width="400">
<div class="inner">
<h1>Europe</h1>
<p>A gallery of photos from my<br/>
trips to Europe!</p>
</div>
</div>
<!-- Thumb Items -->
<article class="item thumb" data-width="282">
<h2>Tower Bride</h2>
<a href="images/fulls/012.jpg" class="image"><img src="images/fulls/012.jpg" alt=""></a>
</article>
<article class="item thumb" data-width="384">
<h2>Westminster Bridge</h2>
<a href="images/fulls/02.jpg" class="image"><img src="images/fulls/02.jpg" alt=""></a>
</article>
<article class="item thumb" data-width="274">
<h2>Eiffel Tower</h2>
<a href="images/fulls/03.jpg" class="image"><img src="images/fulls/03.jpg" alt=""></a>
</article>
<article class="item thumb" data-width="282">
<h2>Le Mont Blanc</h2>
<a href="images/fulls/04.jpg" class="image"><img src="images/fulls/04.jpg" alt=""></a>
</article>
<article class="item thumb" data-width="476">
<h2>Moulin Rouge</h2>
<a href="images/fulls/05.jpg" class="image"><img src="images/fulls/05.jpg" alt=""></a>
</article>
<article class="item thumb" data-width="232">
<h2>Guggenheim Museum</h2>
<a href="images/fulls/06.jpg" class="image"><img src="images/fulls/06.jpg" alt=""></a>
</article>
<article class="item thumb" data-width="352">
<h2>The Leaning Tower</h2>
<a href="images/fulls/07.jpg" class="image"><img src="images/fulls/07.jpg" alt=""></a>
</article>
<article class="item thumb" data-width="348">
<h2>Vatican stairs</h2>
<a href="images/fulls/09.jpg" class="image"><img src="images/fulls/09.jpg" alt=""></a>
</article>
<!-- Filler Thumb Items (just for demonstration purposes) -->
<article class="item thumb" data-width="476"><h2>Colosseo by night</h2><a href="images/fulls/10.jpg" class="image"><img src="images/fulls/10.jpg" alt=""></a></article>
<article class="item thumb" data-width="232"><h2>Venice</h2><a href="images/fulls/11.jpg" class="image"><img src="images/fulls/11.jpg" alt=""></a></article>
<article class="item thumb" data-width="352"><h2>St. Peter's Square</h2><a href="images/fulls/12.jpg" class="image"><img src="images/fulls/12.jpg" alt=""></a></article>
<article class="item thumb" data-width="348"><h2>Germany</h2><a href="images/fulls/13.jpg" class="image"><img src="images/fulls/13.jpg" alt=""></a></article>
<article class="item thumb" data-width="282"><h2>The Tunnel</h2><a href="images/fulls/14.jpg" class="image"><img src="images/fulls/14.jpg" alt=""></a></article>
<article class="item thumb" data-width="384"><h2>Norge</h2><a href="images/fulls/15.jpg" class="image"><img src="images/fulls/15.jpg" alt=""></a></article>
<article class="item thumb" data-width="274"><h2>Montenegro</h2><a href="images/fulls/16.jpg" class="image"><img src="images/fulls/16.jpg" alt=""></a></article>
<article class="item thumb" data-width="282"><h2>Greece</h2><a href="images/fulls/17.jpg" class="image"><img src="images/fulls/17.jpg" alt=""></a></article>
</div>
</div>
<div id="footer">
<div class="left">
<p>This is a gallery of photos from my trips to <strong>Europe</strong>, a responsive way of displaying</br> some of my favorite photos from accros <strong>Europe</strong>! Hope you enjoyed them! </p>
</div>
<div class="right">
<ul class="contact">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Mike Ferrari</li>
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>