-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·169 lines (169 loc) · 8.97 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Fri Dec 04 2015 14:39:39 GMT+0000 (UTC) -->
<html data-wf-site="535693504aa023792d00091a" data-wf-page="535693504aa023792d00091b">
<head>
<meta charset="utf-8">
<title>b.Shenk - Freelance Web Designer and Developer</title>
<meta name="description" content="The website and portfolio for Staunton, VA based web designer and developer Brandon Shenk.">
<meta name="keywords" content="b.shenk, bshenk, brandon, shenk, web, design, designer, developer, front-end, freelance, harrisonburg, charlottesville, staunton, augusta, county, waynesboro">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webflow">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/webflow.css">
<link rel="stylesheet" type="text/css" href="css/bshenk.webflow.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ["Montserrat:400,700"]
}
});
</script>
<script type="text/javascript" src="js/modernizr.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico">
<link rel="apple-touch-icon" href="https://daks2k3a4ib2z.cloudfront.net/img/webclip.png">
</head>
<body>
<div class="w-container">
<div class="header">
<div data-collapse="medium" data-animation="default" data-duration="400" data-contain="1" class="w-nav smallnav">
<div class="w-container w-hidden-main w-hidden-medium w-hidden-small">
<a href="#" class="w-nav-brand"><img src="images/smallLogo.png" width="60" height="60">
</a>
<nav role="navigation" class="w-nav-menu smallnavmenu"><a href="#" class="w-nav-link smallnavlink">Home</a><a href="#aboutme" class="w-nav-link smallnavlink">About</a><a href="#portfolio" class="w-nav-link smallnavlink">Portfolio</a><a href="#contact" class="w-nav-link smallnavlink">Hire Me</a>
</nav>
<div class="w-nav-button smallnavmenubutton">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div data-ix="logo" class="logo"><img src="images/smallLogo.png" data-ix="logo" class="w-hidden-tiny logoimg">
</div>
<div class="w-hidden-tiny nav"><a href="#" class="navlink">home</a><a href="#aboutme" class="navlink">about</a><a href="#portfolio" class="navlink">Portfolio</a><a href="#contact" class="button bshenkbutton">Hire me</a>
</div>
</div>
</div>
<div class="banner">
<div class="w-container taglinecontainer">
<div class="w-clearfix taglinecenter">
<h1 data-ix="fade-in" class="tagline">Elegant, simple web design<br>and branding crafted<br>here in the Valley</h1><a href="#portfolio" data-ix="fade-in" class="viewwork">view my work</a>
</div>
</div>
</div>
<div class="w-container">
<div class="featuredproject">
<h3 data-ix="fade-in">Featured project</h3>
<div data-ix="fade-in" class="h3underline"></div>
</div>
<div class="w-row featuredprojectinfo">
<div class="w-col w-col-7">
<div class="featuredprojectpic"><img src="images/featuredProjectPic.jpg" data-ix="fade-in-from-left">
</div>
</div>
<div data-ix="fade-in-from-right" class="w-col w-col-5 featuredprojectright">
<h2>crossfit staunton</h2>
<div class="featuredprojecttags">web design, branding</div>
<p>My most recent, completely finished freelance project for the folks over at CrossFit Staunton. I designed the entire site in Photoshop and converted it into a responsive website using the Foundation framework.</p><a href="crossfitstaunton.html" class="button bshenkbutton">view project</a>
</div>
</div>
</div>
<div id="aboutme" data-ix="fade-in" class="aboutme">
<div class="aboutoverlay">
<div class="w-container">
<h3 data-ix="fade-in" class="aboutheader">my story</h3>
<div data-ix="fade-in" class="h3underline"></div>
<p class="about abouttext">About five years ago, I started on a journey that I had no idea would end up becoming an undescribable love for web design.
<br>
<br>
<br>It started with me fiddling around with Photoshop creating images and graphics for online message boards. Over the next few years, I managed to turn that hobby into the dream job that I continue to pursue every day. Since then, I’ve read hundreds of online tutorials, passed many courses both online and on-campus, and completed several local freelance web design projects.
<br>
<br>
<br>I love my job and I strive to learn as much as I can about this massively expanding field of work every day. Overcoming challenges, embracing new techniques, and learning from the men and women who keep pushing the boundaries of design, both print and web, keep me both interested and passionate. I absolutely love web design and everything it has to offer myself and the world around me.</p>
</div>
</div>
</div>
<div class="w-container">
<div id="portfolio" data-ix="fade-in" class="portfolio">
<div class="w-container">
<h3>portfolio</h3>
<div class="h3underline"></div>
<div class="w-row portfoliorow">
<div class="w-col w-col-4">
<div class="featuredprojectpic crossfitstaunton"><a href="crossfitstaunton.html" class="w-inline-block overlay"><h5 text-decoration="none">crossfit staunton</h5><p class="portfoliodescription">Website re-design</p></a>
</div>
</div>
<div class="w-col w-col-4"></div>
<div class="w-col w-col-4"></div>
</div>
</div>
</div>
<div id="contact" data-ix="fade-in" class="contactme">
<h3>say hello</h3>
<div class="h3underline"></div>
<div class="w-form contactwrapper">
<form id="email-form" name="email-form" data-name="Email Form">
<input id="name" type="text" placeholder="Name" name="name" data-name="Name" required="required" class="w-input contactform">
<input id="email" type="email" placeholder="Email" name="email" data-name="Email" required="required" class="w-input contactform">
<input id="subject" type="text" placeholder="Subject" name="subject" required="required" data-name="Subject" class="w-input contactform">
<textarea id="message" placeholder="Message" name="message" data-name="Message" required="required" class="w-input contactform"></textarea>
<input type="submit" value="Submit" data-wait="Please wait..." class="w-button bshenkbutton">
</form>
<div class="w-form-done">
<p>Thank you! Your submission has been received!</p>
</div>
<div class="w-form-fail">
<p>Oops! Something went wrong while submitting the form :(</p>
</div>
</div>
</div>
</div>
<div>
<div class="creativeprocessbg">
<div class="w-container creativecontainer">
<div>
<h3>my creative process</h3>
</div>
<div class="creativeprocess">
<div class="w-row">
<div data-ix="fade-in-from-top" class="w-col w-col-3">
<div><img src="images/ear.png" class="creativeimg">
<h4>LISTEN</h4>
</div>
<p class="creativetext">All goals and expections for the project are set and recorded during the very first meeting.</p>
</div>
<div data-ix="fade-in-from-top-2" class="w-col w-col-3">
<div><img src="images/brain.png" class="creativeimg">
<h4>BRAInSTORM</h4>
</div>
<p class="creativetext">Sketching, creating mind maps, searching for inspiration happens here.</p>
</div>
<div data-ix="fade-in-from-top-3" class="w-col w-col-3">
<div><img src="images/design.png" width="75" class="creativeimg">
<h4>DESIGN</h4>
</div>
<p class="creativetext">Everything that was gathered from the two previous stages come to life in Photoshop and Illustrator.</p>
</div>
<div data-ix="fade-in-from-top-4" class="w-col w-col-3">
<div><img src="images/code.png" class="creativeimg">
<h4>CODE</h4>
</div>
<p class="creativetext">The final,</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="w-container">
<div class="footerinfo">
<p class="footerinfop">© 2014 Brandon Shenk</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/webflow.js"></script>
<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>