-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (135 loc) · 7.52 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
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
<!DOCTYPE HTML>
<html>
<head>
<title>Magnus Media</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Wrapper -->
<div id="wrapper">
<!-- Panel (Banner) -->
<section class="panel banner right">
<div class="content color0 span-3-75">
<h1 class="major">Hello, my name<br />
is Vincent Magnus</h1>
<p>I'm the guy behind <strong>Magnus Media</strong>.<br>People often describe my work as striking & expressive. I just like the photophilic and almost dreamlike scenes like a Dalíesque dream. I invite you to explore and enjoy.</p>
<ul class="actions">
<li><a href="#first" class="button primary color1 circle icon solid fa-angle-right">Next</a></li>
</ul>
</div>
<div class="image filtered span-1-75" data-position="25% 25%">
<img src="images/pic01.jpg" alt="">
</div>
</section>
<!-- Panel (Spotlight) -->
<section class="panel spotlight medium right" id="first">
<div class="content span-7">
<h2 class="major">Experienced photographer</h2>
<p>Lifting moments out of time for more than 10 years, I specialize in photographing live music + events.</p>
</div>
<div class="image filtered tinted" data-position="top left">
<img src="images/pic02.jpg" alt="">
</div>
</section>
<!-- Panel -->
<section class="panel color1">
<div class="intro joined">
<h2 class="major">Tools</h2>
<p>Every frame is captured in vivid detail with my:<br><strong>Canon EOS 5D Mark IV 24-105L IS II</strong><br>After shooting, I use:<br><strong>Lightroom/Nik Collection</strong><br>for meticulous editing.<br>Trusted by 50+ organizers and talent bookers, year after year.</p>
</div>
<div class="inner">
<ul class="grid-icons two connected">
<li><span class="icon solid fa-camera-retro"><span class="label">Ipsum</span></span></li>
<li><span class="icon solid fa-photo-video"><span class="label">Dolor</span></span></li>
<li><span class="icon solid fa-sd-card"><span class="label">Amet</span></span></li>
<li><span class="icon solid fa-icons"><span class="label">Nullam</span></span></li>
</ul>
</div>
</section>
<!-- Panel (Spotlight) -->
<section class="panel spotlight large left">
<div class="content span-5">
<h2 class="major">I saw that</h2>
<p>To me, photography is about finding something interesting in an ordinary place. I've found it has little to do with the things you see and everything to do with the way you see them.</p>
</div>
<div class="image filtered" data-position="top right">
<img src="images/pic03.jpg" alt="" />
</div>
</section>
<!-- Panel -->
<section class="panel">
<div class="intro color2">
<h2 class="major">Renaissance lensman</h2>
<p>Each of the photos featured in this collection were an experience and experiment in chronicology with the tools and cameras - mostly cell phones - available to me in the moment.<br>I implore you to delve into these works, see if they stir up any feelings or reflections, and welcome any comment or story you may wish to share via the contact form.</p>
</div>
<div class="gallery">
<div class="group span-3">
<a href="images/gallery/fulls/01.jpg" class="image filtered span-3" data-position="bottom"><img src="images/gallery/thumbs/01.jpg" alt="" /></a>
<a href="images/gallery/fulls/02.jpg" class="image filtered span-1-5" data-position="center"><img src="images/gallery/thumbs/02.jpg" alt="" /></a>
<a href="images/gallery/fulls/03.jpg" class="image filtered span-1-5" data-position="bottom"><img src="images/gallery/thumbs/03.jpg" alt="" /></a>
</div>
<a href="images/gallery/fulls/04.jpg" class="image filtered span-2-5" data-position="top"><img src="images/gallery/thumbs/04.jpg" alt="" /></a>
<div class="group span-4-5">
<a href="images/gallery/fulls/05.jpg" class="image filtered span-3" data-position="top"><img src="images/gallery/thumbs/05.jpg" alt="" /></a>
<a href="images/gallery/fulls/06.jpg" class="image filtered span-1-5" data-position="center"><img src="images/gallery/thumbs/06.jpg" alt="" /></a>
<a href="images/gallery/fulls/07.jpg" class="image filtered span-1-5" data-position="bottom"><img src="images/gallery/thumbs/07.jpg" alt="" /></a>
<a href="images/gallery/fulls/08.jpg" class="image filtered span-3" data-position="top"><img src="images/gallery/thumbs/08.jpg" alt="" /></a>
</div>
<a href="images/gallery/fulls/09.jpg" class="image filtered span-2-5" data-position="right"><img src="images/gallery/thumbs/09.jpg" alt="" /></a>
</div>
</section>
<!-- Panel -->
<section class="panel color4-alt">
<div class="intro color4">
<h2 class="major">Contact</h2>
<p>Thank you for checking out my photography portfolio.<br>These works are unnamed, apart from location, and are open to interpretation.<br>Limited canvas prints are available for purchase where available.</p>
</div>
<div class="inner columns divided">
<div class="span-3-25">
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="email" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4" placeholder="This portfolio contact form is disabled - Please message [email protected] to have a site like this built for you!"></textarea>
</div>
</div>
<ul class="actions">
<li><input disabled type="submit" value="Send Message" class="button primary" /></li>
</ul>
</form>
</div>
<div class="span-1-5">
<ul class="contact-icons color1">
<li class="icon brands fa-twitter"><a href="#">@untitled-tld</a></li>
<li class="icon brands fa-facebook-f"><a href="#">facebook.com/untitled</a></li>
<li class="icon brands fa-snapchat-ghost"><a href="#">@untitled-tld</a></li>
<li class="icon brands fa-instagram"><a href="#">@untitled-tld</a></li>
<li class="icon brands fa-medium-m"><a href="#">medium.com/untitled</a></li>
</ul>
</div>
</div>
</section>
<!-- Copyright -->
<div class="copyright">© <a href="https://tapper.codes">Andrew Tapper</a></div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>