-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·154 lines (129 loc) · 9.06 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
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="author" content="Zach Keller">
<meta name="description" content="This portfolio site of Zach Keller">
<meta name="viewport" content="width=device-width">
<title>Zach | Keller</title>
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 900px)" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 899px)" href="tablet.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 480px)" href="smartphone.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/scripts.js"></script>
<!-- Fancy box Plugin -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script>
</head>
<!-- Body Content Starts Here -->
<body>
<div class="wrapper">
<div class="header clearfix">
<div class="nav">
<p><a href="#Home" alt="home" id="homebutton"> Home </a><a href="#Portfolio" alt="portfolio" id="portfoliobutton">What I do </a><a href="#Contact" alt="contact" id="contactbutton">Say hello </a></p>
</div>
<div class="social">
<a href="http://www.github.com/zkellerdevelops/" target="_blank" id="github"><img src="images/github.png" alt="Github"></a>
<a href="http://www.linkedin.com/in/zkellerdevelops/" target="_blank" id="linkedin"><img src="images/linkedin.png" alt="Linked In"></a>
<a href="http://www.twitter.com/zlkeller" target="_blank" id="twitter"><img src="images/twitter.png" alt="Twitter"></a>
<a href="http://instagram.com/eloist" target="_blank" id="instagram"><img src="images/instagram.png" alt="Instagram"></a>
<a href="http://gplus.to/zachkeller" target="_blank" id="gplus"><img src="images/gplus.png" alt="Google Plus"></a>
</div>
</div>
<!-- SLIDER markup STARTS here -->
<div class="content" id="home">
<div id="slides">
<div class="slides_container">
<a href="#" title="The 3rd slide" target="_blank"><img src="images/slide/slide3.jpg" width="1100" height="300" alt="Slide 3"></a>
<a href="#" title="The 1st slide" target="_blank"><img src="images/slide/slide1.jpg" width="1100" height="300" alt="Slide 1"></a>
<a href="#" title="The 2nd slide" target="_blank"><img src="images/slide/slide2.jpg" width="1100" height="300" alt="Slide 2"></a>
</div>
<a href="#" class="next"><img src="images/slide/arrow-next.png" width="35" height="43" alt="Arrow Next"></a>
<a href="#" class="prev"><img src="images/slide/arrow-prev.png" width="35" height="43" alt="Arrow Prev"></a>
</div>
</div>
<!-- SLIDER markup ENDS here -->
<div class="content">
<!-- hero image for tablet.css -->
<div id="tablet_hero">
<img src="images/hero_tablet.jpg">
</div>
<!--<img src="images/divider.png">-->
<div class="story_left">
<p><h1>Hello. I'm Zach.</h1></p>
<!--<p><h2>and I'd love to meet you</h2></p>-->
<!--<img src="images/divider_small.png">-->
<p>My name is Zach Keller. I've been working tirelessly as a graphic designer in Nashville, TN and Atlanta, GA for the last 9 years. I've had the pleasure of working in an Atlanta startup agency called Foundation One Studios. I've opened my own design business called Identity Crisis with my best friend, and most recently, I've worked a three year stint with the house design team at Thomas Nelson Publishers.
<p>I've just finished <a href="http://www.nashvillesoftwareschool.com" target="blank">Nashville Software School</a>. It's a 6 month web developer bootcamp teaching the basic fundamentals of front-end and back-end web development. I enrolled in order to take my visual design skills to the next level, and am looking forward to shifting gears to this next chapter of my design and development career. Currently, I'm available for freelance, long-term contract, or full-time web development, print, and identity design.</p>
<p>Have a look around and say hello. <i>I love meeting new people.</i></p>
</div>
<div class="story_right">
<p><h1>You can find me:</h1></p><br>
<h2>• Building beautiful websites</h2>
<h2>• Developing engaging user experiences</h2>
<h2>• Rethinking mobile app design</h2>
<h2>• Building brands and brand identities</h2>
<h2>• Creating stunning book covers</h2>
<h2>• Delivering print and web advertising</h2>
<h2>• Making trade show displays</h2>
<h2>• Obsessing over typography</h2>
<h2>• Meeting deadlines</h2>
<h2>• Watching unhealthy amounts of football</h2>
</div>
<img src="images/divider.png" class="divider">
</div>
<div id="portfolio_fancybox">
<div class="content" id="portfolio">
<p><h1>What I do</h1></p>
<a class="fancybox" rel="group" href="images/fancy/paris_big.jpg" title="The Trouble With Paris - book cover"><img src="images/fancy/paris_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/idc_big.jpg" title="Identity Crisis - agency poster"><img src="images/fancy/idc_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/invite_big.jpg" title="Foil stamp/embossed wedding invite"><img src="images/fancy/invite_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/lost_big.jpg" title="The Gospel According to Lost - book cover"><img src="images/fancy/lost_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/church_big.jpg" title="Permission to Speak Freely - print ad"><img src="images/fancy/church_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/shoes_big.jpg" title="Journeys Kidz - in store signage"><img src="images/fancy/shoes_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/gaither_big.jpg" title="Gaither Homecoming - publishing proposal"><img src="images/fancy/gaither_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/story_big.jpg" title="Story Conference - print spread ad"><img src="images/fancy/story_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/travel_big.jpg" title="Travel Stars - website"><img src="images/fancy/travel_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/blah_big.jpg" title="From Blah to Awe - print ad"><img src="images/fancy/blah_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/angel_big.jpg" title="Angel Eyes - poster"><img src="images/fancy/angel_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/jcteen_big.jpg" title="Jesus Calling for Teens - print ad"><img src="images/fancy/jcteen_thumb.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="images/fancy/kjvsb_big.jpg" title="KJV Study Bible - book cover"><img src="images/fancy/kjvsb_thumb.jpg" alt="" /></a>
</div>
</div>
<img src="images/divider.png" class="divider">
<div class="content" id="contact">
<div class="contact">
<p><h1>Say hello</h1></p>
<form>
<h2>What's your name?</h2>
<input type='name' name='username' id='name' />
<h2>What's your email address?</h2>
<input type='email' name='email' id='email' />
<h2>What do you want to say?</h2>
<input type='text' name='message' id='message' /><br>
<button type='submit' id='submit'>Send</button>
</form>
</div>
</div>
<div class="footer clearfooter">
<div class="content">
<div id="footerlogo">
<img src="images/zlk.png">
<h4>All work © Zach Keller, 2013. Proudly crafted in Nashville, Tennessee.</h4>
</div>
<div class="footernav">
<p><a href="#Home" alt="home" id="homebutton"> Home </a><a href="#Portfolio" alt="portfolio" id="portfoliobutton">What I do </a><a href="#Contact" alt="contact" id="contactbutton">Say hello </a></p>
</div>
</div>
</div>
</div>
</body>
</html>