-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
215 lines (197 loc) · 8.59 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE HTML>
<html>
<head>
<title>Dustin Hays</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 landing">
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1 id="logo">Dustin Hays</h1>
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<!-- <a href="#">Layouts</a>
<ul>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
<li>
<a href="#">Submenu</a>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>
</li>
</ul> -->
</li>
<li><a href="business.html">Business</a></li>
<li><a href="portfolio.html">Personal</a></li>
<li><a href="index.html#four">Work</a></li>
<li><a href="index.html#five" class="">Contact</a></li>
</ul>
</nav>
</header>
<!-- Banner head shot image, top of page -->
<section id="banner">
<div class="content">
<header>
<h2>Dustin Hays.</h2>
<p> <br />
Full-stack web developer<br />
For real people with real needs.</p>
</header>
<span class="image"><img src="images/01headshot_hays.jpeg" alt="Picture of Dustin Hays" /></span>
</div>
<a href="#one" class="goto-next scrolly">Next</a>
</section>
<!-- One -->
<section id="one" class="spotlight style1 bottom">
<span class="image fit main"><img src="images/02stacked-logs.jpg" alt="" /></span>
<div class="content">
<div class="container">
<div class="row">
<div class="col-4 col-12-medium">
<header>
<h2>I wasn't always a full-stack web developer</h2>
<p>In fact, I worked as a contract forester cruising timber across the western United States and Alaska for nearly 10 years
</p>
<ul class="actions">
<li><a href="https://www.rayonier.com/stories/what-is-a-timber-cruise-in-forestry/" class="button">Learn More</a></li>
</ul>
</header>
</div>
<div class="col-4 col-12-medium">
<p>During that time I started noticing a gap. Old ways were butting heads with new ones. Businesses that once sustained themselves on word of mouth alone began to struggle while those with a responsive and updated web presence thrived.
</p>
</div>
<div class="col-4 col-12-medium">
<p> A website creates legitimacy for companies, products, services, and individuals. It becomes the first point of contact where people in need can interact with you as a brand or entity. It’s the place to showcase what you have to offer and highlight your accomplishments in the best possible light.
</p>
</div>
</div>
</div>
</div>
<a href="#two" class="goto-next scrolly">Next</a>
</section>
<!-- Two -->
<section id="two" class="spotlight style2 right">
<span class="image fit main"><img src="images/03chainsaw.jpg" alt="" /></span>
<div class="content">
<header>
<h2>Businesses are judged by their presence online.</h2>
<p>When somebody needs a thing they will use the internet to find it.</p>
</header>
<p>The better your presence is the better your chances are of attracting the resources you need. Your success and growth are dependent on people being able to find you online.</p>
<ul class="actions">
<li><a href="business.html" class="button">Learn More</a></li>
</ul>
</div>
<a href="#three" class="goto-next scrolly">Next</a>
</section>
<!-- Three -->
<section id="three" class="spotlight style3 left">
<span class="image fit main bottom"><img src="images/04chainsaw-log.jpg" alt="" /></span>
<div class="content">
<header>
<h2>Individuals can have websites too.</h2>
<p>It’s called a portfolio website and in it, you can showcase who you are.</p>
</header>
<p>Regardless of your occupation a professional website is that extra inch that keeps your name on the shortlist.
</p>
<ul class="actions">
<li><a href="portfolio.html" class="button">Learn More</a></li>
</ul>
</div>
<a href="#four" class="goto-next scrolly">Next</a>
</section>
<!-- Four -->
<section id="four" class="wrapper style1 special fade-up">
<div class="container">
<header class="major">
<h2>My work</h2>
<p></p>
</header>
<div class="box alt">
<div class="row gtr-uniform">
<section class="col-6 col-6-medium col-12-xsmall">
<h2>Business Concept One</h2>
<a class="image fit" href="https://business-concept-one.netlify.app/"><img class="project" src="images/business-one-golden.png" alt="business concept one"></a>
</section>
<section class="col-6 col-6-medium col-12-xsmall">
<h2>Business Concept Two</h2>
<a class="image fit" href="https://business-concept-two.netlify.app/"><img class="project" src="images/business-two-white.png" alt="Business Concept Two"></a>
</section>
<section class="col-6 col-6-medium col-12-xsmall">
<h2>Portfolio Concept One</h2>
<a class="image fit" href="https://portfolio-concept-one.netlify.app/"><img class="project" src="images/portfolio-one-fix.png" alt="portfolio one"></a>
</section>
<section class="col-6 col-6-medium col-12-xsmall">
<h2>Portfolio Concept Two</h2>
<a class="image fit" href="https://portfolio-concept-two.netlify.app/"><img class="project" src="images/portfolio-twoa.png" alt="screenshot"></a>
</section>
</section>
</div>
</div>
</div>
</section>
<!-- Five -->
<section id="five" class="wrapper style2 special fade">
<div class="container">
<header>
<h2>Let's get in touch:</h2>
<p>[email protected]</p>
<h2></h2>
</header>
<form id="clear-form" method="post" action="https://getform.io/f/8c1eadda-cdee-44e9-a6e8-6af208416432">
<div class="row gtr-50">
<div class="col-6 col-12-small">
<input class="shape" name="name" placeholder="Name" type="text" class="shape" />
</div>
<div class="col-6 col-12-small">
<input class="shape" name="email" placeholder="Email" type="text"/>
</div>
<div class="col-12">
<textarea class="shape" name="message" placeholder="Message"></textarea>
</div>
<div class="col-12 shape">
<caption class="">Don't be afraid to reach out. I do not upsell or manipulate. It is my goal to be successful and by that mark, I need my clients to be happy and proud of their websites. At the end of the day, it’s you selling my services
</caption>
</div>
<div class="col-12">
<button type="submit" class="form-button-submit button icon solid fa-envelope">Send Message</button>
<button type="reset" class="form-button-submit button icon fa-circle">Clear</button>
</div>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a href="https://twitter.com/hays_dustin_u" class="icon brands alt fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/in/dustin-hays-965898229/" class="icon brands alt fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/dustinhaysu" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
</ul>
<ul class="copyright">
<li>© Dustin Hays. All rights reserved.</li><li><a class="clear-link" href="#">Top of page</a></li> </ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>