-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·550 lines (460 loc) · 24.2 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
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
<!doctype html>
<html>
<head>
<title>Steph Milovic - Web Design & Front End Development Portfolio | Chicago</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<META NAME="ROBOTS" CONTENT="index, follow">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="Steph Milovic is a web designer and front-end developer in Chicago IL. Call on Steph for all of your Chicago web design needs!" />
<meta name="ICBM" content="41.890304, -87.629145" />
<meta name="DC.title" content="web designer chicago" />
<meta name="geo.position" content="41.890304, -87.629145" />
<meta name="geo.region" content="US-IL" />
<link rel="image_src" href="http://histeph.com/images/thumbs/port-g.jpg">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta property="og:type" content="web designer" />
<meta property="og:url" content="http://histeph.com"/>
<meta property="og:title" content="Chicago Web Designer - Front End Developer Chicago" />
<meta property="og:description" content="Steph Milovic is a web designer and front-end developer in Chicago IL. Call on Steph for all of your Chicago web design needs!" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://histeph.com/images/thumbs/port-g.jpg" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/application.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/colio.css" type="text/css" media="screen" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lekton|Josefin+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="wrap"><a name="home"></a>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<p class="intro-text">hi, i'm steph</p>
<h1>Design. Develop. SEO.</h1>
<p class="intro-text">i create & code websites that convert</p>
</header>
<section id="work" class="portfolio"><a name="work"></a>
<div class="container sixteen columns special">
<h2>{WORK}</h2><div class="thing"></div>
<div class="filters">
<a href="#" class="filter-active">All</a>
<a href="#static">Static</a>
<a href="#wp">Wordpress</a>
<a href="#joomla">Joomla</a>
</div><!-- filters -->
<ul class="list">
<li class="wp" data-content="#colio_c1">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/rev-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">Reverend John</a></h4>
<p>Responsive Wordpress Site</p>
</li>
<li class="static" data-content="#colio_c2">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/port-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">This Portfolio</a></h4>
<p>Responsive Site</p>
</li>
<li class="joomla" data-content="#colio_c3">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/corp-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">Corporate Events</a></h4>
<p>Joomla Page</p>
</li>
<li class="wp" data-content="#colio_c4">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/howl2go-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">Howl 2-Go</a></h4>
<p>Responsive Wordpress Site</p>
</li>
<li class="joomla" data-content="#colio_c5">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/live-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">Live Loud Cruise</a></h4>
<p>Joomla Page</p>
</li>
<li class="joomla" data-content="#colio_c6">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/club-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">Birthday Club</a></h4>
<p>Joomla Page</p>
</li>
<li class="static" data-content="#colio_c7">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/stu-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">Stu Records</a></h4>
<p>Static Site</p>
</li>
<li class="joomla" data-content="#colio_c8">
<div class="thumb">
<div class="view">
<a class="button colio-link" href="#">View Project</a>
</div>
<img src="images/thumbs/show-g.jpg" alt="Pic"/>
</div>
<h4><a class="colio-link" href="#">The Show</a></h4>
<p>Joomla Page</p>
</li>
</ul><!-- list -->
</div><!-- portfolio -->
<div id="colio_c1" class="colio-content">
<div class="main">
<h3>Reverend John</h3>
<p>Coded in Wordpress using Bootstrap with SASS and Compass. </p>
<p>Optimized for "Chicago Wedding Officiant", "Ordained Minister Chicago", "Gay Wedding Officiant", and more!</p>
<div class="links">
<a class="visit-link" href="#" onClick="alert('Coming soon. Check back next week!'); return false;">Visit Site</a>
<a class="visit-link" href="https://github.com/stephmilovic/Reverend/" target="_blank">View Code on Github</a>
</div>
</div><!-- main -->
<div class="laptop">
<span>
<img class="revscroll mobile" id="rev" src="/images/websites/loading.jpg" data-src="/images/websites/reverend-mobile.jpg">
<img class="revscroll tablet" id="rev" src="/images/websites/loading.jpg" data-src="/images/websites/reverend-tablet.jpg">
<img class="revscroll desktop" id="rev" src="/images/websites/loading.jpg" data-src="/images/websites/reverend-desktop.jpg">
</span>
</div><!-- laptop -->
</div><!-- colio-content # colio_c1 -->
<div id="colio_c2" class="colio-content">
<div class="main">
<h3>This Portfolio</h3>
<p>Coded in the Bourbon/Bourbon Neat frameworks using HTML5, CSS3, SASS, & jQuery.</p>
<p>Optimized for "Chicago Web Designer" & "Front-End Developer Chicago"</p>
<div class="links">
<a class="visit-link" onClick="alert('You are already here!'); return false;" href="">Visit Site</a>
<a class="visit-link" href="https://github.com/stephmilovic/WTF/" target="_blank">View Code on Github</a>
</div>
</div><!-- main -->
<div class="laptop">
<span>
<img class="portscroll mobile" id="port" src="/images/websites/loading.jpg" data-src="/images/websites/port-mobile.jpg">
<img class="portscroll tablet" id="port" src="/images/websites/loading.jpg" data-src="/images/websites/port-tablet.jpg">
<img class="portscroll desktop" id="port" src="/images/websites/loading.jpg" data-src="/images/websites/port-desktop.jpg">
</span>
</div><!-- side -->
</div><!-- colio-content # colio_c2 -->
<div id="colio_c3" class="colio-content">
<div class="main">
<h3>Corporate Events</h3>
<p>Coded using HTML, CSS, and jQuery in Joomla.</p>
<p>Optimized for "Corporate Events Philadelphia", "Corporate Event Venue Philadelphia PA", and more!</p>
<div class="links2">
<a class="visit-link" href="http://www.howlatthemoon.com/corporate-events-philadelphia" target="_blank">Visit Site</a>
</div>
</div><!-- main -->
<div class="laptop">
<span>
<img class="corpscroll" id="corp" src="/images/websites/loading.jpg" data-src="/images/websites/corp-philly.jpg">
</span>
</div><!-- laptop -->
</div><!-- colio-content # colio_c3 -->
<div id="colio_c4" class="colio-content">
<div class="main">
<h3>Howl 2-Go</h3>
<p>Wordpress Child Theme utilizing HTML, CSS, and jQuery.</p>
<p>Optimized for "Entertainment for Events", "Music for Event", "Corporate Event Entertainment", and more!</p>
<div class="links2">
<a class="visit-link" target="_blank" alt="Entertainment for Events" href="http://www.howlatthemoon.com/howl2go/">Visit Site</a>
</div>
</div><!-- main -->
<div class="laptop">
<span>
<img class="howl2goscroll mobile" id="howl2go" src="/images/websites/loading.jpg" data-src="/images/websites/howl2go-mobile.jpg">
<img class="howl2goscroll tablet" id="howl2go" src="/images/websites/loading.jpg" data-src="/images/websites/howl2go.jpg">
<img class="howl2goscroll desktop" id="howl2go" src="/images/websites/loading.jpg" data-src="/images/websites/howl2go.jpg">
</span>
</div><!-- side -->
</div><!-- colio-content # colio_c4 -->
<div id="colio_c5" class="colio-content">
<div class="main">
<h3>Live Loud Cruise</h3>
<p>Coded using HTML, CSS, and jQuery in Joomla.</p>
<p>Optimized for "Live Loud Cruise Giveaway", "Win a Cruise", & "Cruise Contest"</p>
<div class="links2">
<a class="visit-link" href="http://www.howlatthemoon.com/liveloud" target="_blank">Visit Site</a>
</div>
</div><!-- main -->
<div class="laptop">
<span>
<img class="livescroll" id="live" src="/images/websites/loading.jpg" data-src="/images/websites/liveloud.jpg">
</span>
</div><!-- laptop -->
</div><!-- colio-content # colio_c5 -->
<div id="colio_c6" class="colio-content">
<div class="main">
<h3>Birthday Club</h3>
<p>Coded using HTML, CSS, and jQuery in Joomla.</p>
<p>This page is no-index and accessed only through a Birthday Club eBlast.</p>
<div class="links2">
<a class="visit-link" href="http://www.howlatthemoon.com/birthday-parties" target="_blank">Visit Site</a>
</div>
</div><!-- main -->
<div class="laptop">
<span>
<img class="clubscroll" id="club" src="/images/websites/loading.jpg" data-src="/images/websites/birthday-club.jpg">
</span>
</div><!-- laptop -->
</div><!-- colio-content # colio_c6 -->
<div id="colio_c7" class="colio-content">
<div class="main">
<h3>Stu Records</h3>
<p>Coded using HTML & CSS</p>
<p>This page is no longer live, but the site is still ranking for "Stu Records", "Student Run Record Label", & "Student Record Label".</p>
</div><!-- main -->
<div class="laptop">
<span>
<img class="stuscroll" id="stu" src="/images/websites/loading.jpg" data-src="/images/websites/sturecords.jpg">
</span>
</div><!-- laptop -->
</div><!-- colio-content # colio_c7 -->
<div id="colio_c8" class="colio-content">
<div class="main">
<h3>The Show</h3>
<p>Coded using HTML, CSS, and jQuery in Joomla.</p>
<div class="links2">
<a class="visit-link" href="http://www.howlatthemoon.com/the-show" target="_blank">Visit Site</a>
</div>
</div><!-- main -->
<div class="laptop">
<span>
<img class="showscroll" id="show" src="/images/websites/loading.jpg" data-src="/images/websites/the-show.jpg">
</span>
</div><!-- laptop -->
</div><!-- colio-content # colio_c8 -->
</div>
<div class="thing2"></div>
</section>
<section id="about"><a name="about"></a>
<div class="container">
<h2>{ABOUT ME}</h2>
<div class="about-para">
<p>I am a multidisciplinary web designer & front-end developer with an expertise in SEO based in Chicago. I am always up for a new challenge. Please feel free to fill out the form below or shoot me an <a href="mailto:[email protected]">e-mail</a> with any job inquiries, questions, or just to say hello.</p>
</div>
<article class="about">
<div class="leftcol">
<div id='create2'></div>
<div id='create'><img src="images/create2.svg" width="300" height="300"></div>
</div>
<div class="rightcol text-mobile">
<h5>Create {</h5>
<p>Photoshop; Illustrator; Flash</p>
<p>InDesign; Dreamweaver;</p><div class="thing3"></div>
<h5>}</h5>
</div>
</article>
<article class="about">
<div class="rightcol">
<div id='code2'></div>
<div id='code'><img src="images/code2.svg" width="300" height="300"></div>
</div>
<div class="leftcol pad-left text-mobile">
<h5>Code {</h5>
<p>HTML5; CSS3;</p>
<p>SASS; LESS; Compass;</p>
<p>Bootstrap; Bourbon; Foundation;</p>
<p>Javascript; jQuery; PHP;</p>
<p>Wordpress; Joomla;</p>
<h5>}</h5>
</div>
</article>
<article class="about">
<div class="leftcol">
<div id='convert2'></div>
<div id='convert'><img src="images/convert2.svg" width="300" height="300"></div>
</div>
<div class="rightcol text-mobile">
<h5>Convert {</h5>
<p>SEO; PPC;</p>
<p>Social Media;</p>
<h5>}</h5>
</div>
</article>
</div>
</section><!-- end about -->
<section id="contact"><a name="contact"></a>
<div class="container">
<h2>{LET'S TALK}</h2>
<p>If you are interested in hiring me or need a freelance designer, please get in touch using one of the methods below. To see my full digital portfolio, including digital marketing, audio, & video, please visit <a href="http://www.stephmilovic.com" alt="chicago web design" target="_blank">stephmilovic.com</a>.</p>
<aside>
<ul>
<li>Steph Milovic</li>
<li>Chicago, IL</li>
<li><a href="tel:7085674201">708-567-4201</a></li>
<li><a href="mailto:[email protected]" target="_blank">[email protected]</a></li>
</ul>
<a href="#"><img src="images/linkedin.png" width="64" height="64"></a>
<a href="#"><img class="left" src="images/gmail.png" width="64" height="64"></a>
</aside>
<form name="wedding" id="wedding-form" method="post" action="receiving.php">
<input type="text" name="name" placeholder="name:" autocomplete="off" tabindex="1" id="name" class="txtinput" required>
<input type="email" name="email" id="email" placeholder="email:" autocomplete="off" tabindex="3" class="txtinput" required>
<textarea name="message" id="message" placeholder="message:" tabindex="7" class="txtblock" required></textarea>
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="8" value="submit">
</form>
</div>
</section><!-- end contact -->
<footer>
<p>Copyright © 2014 Steph Milovic. All Rights Reserved.</p>
</footer>
<!-- VENDOR JS
================================================== -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- PLUGINS
================================================== -->
<script type="text/javascript" src="js/jquery.unveil.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/jquery.colio.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="css/colio-black/fancybox/jquery.fancybox.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="js/jquery.lazylinepainter-1.4.1.min.js"></script>
<!-- CUSTOM SCRIPT
================================================== -->
<script type="text/javascript">
(function($){
// "scrollTop" plugin
$.scrollUp();
// "colio" plugin
$('.portfolio .list').colio({
id: 'demo_1',
theme: 'black',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
// init "fancybox" plugin
$('.fancybox', content).fancybox();
// "unveil" plugin
$("img").unveil(200);
}
});
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).
trigger('colio','excludeHidden');
};
$('.portfolio .filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
isotope_run(filter);
return false;
});
isotope_run(filter);
// Define object containing your Raphael path data.
// goto http://lazylinepainter.info to convert your svg into a svgData object.
var createSVG = {
"create2": {
"strokepath": [{
"path": "M280.9,127.044h-34.049h-5.677v5.667v9.208L59.584,95.873v-7.084L161.729,49.12v4.249v5.667h5.674h34.049 h5.674v-5.667V19.366v-5.667h-5.674h-34.049h-5.674v5.667v17.708L59.584,77.098v-1.064v-5.666H53.91H19.862h-5.677v5.666v34.003 v5.671h5.674h34.049h5.673v-5.666v-2.479l181.594,46.047v8.501l-111.721,78.273H99.307h-5.674v5.669v34.004v5.666h5.674h34.048 h5.674v-5.666v-32.237l107.112-75.441h0.711H280.9h5.674v-5.666V132.71v-5.667H280.9z M173.078,25.035h22.7v22.667h-22.7V25.035z M48.234,104.374H25.536V81.706h22.698V104.374z M127.681,274.39h-22.698v-22.668h22.698V274.39z M275.223,161.047h-22.698v-22.668 h22.698V161.047z",
"duration": 1300
}],
"dimensions": {
"width": 300,
"height": 300
}
}
};
var codeSVG = {
"code2": {
"strokepath": [
{
"path": "M 274.674,249.39 L 170.237,249.394 164.405,249.394 164.405,255.869 164.405,274.028 164.405,280.5 170.237,280.5 274.674,280.5 280.5,280.5 280.5,274.028 280.5,255.869 280.5,249.394 z",
"duration": 600
},
{
"path": "M 114.556,24.29 L 22.687,76.252 19.5,78.051 19.5,82.022 19.5,95.988 19.5,99.967 22.695,101.765 114.561,153.501 123.029,158.265 123.029,147.72 123.029,132.841 123.029,128.858 119.829,127.06 51.854,88.893 119.829,50.724 123.029,48.928 123.029,44.942 123.029,30.063 123.029,19.5 z",
"duration": 600
},
{
"path": "M 222.453,19. L 205.447,19.5 201.711,19.5 200.151,23.283 98.129,271.332 94.358,280.5 103.433,280.5 120.438,280.5 124.187,280.5 125.74,276.71 227.755,28.669 231.521,19.5 z",
"duration": 600
}
],
"dimensions": {
"width": 300,
"height": 300
}
}
};
var convertSVG = {
"convert2": {
"strokepath": [
{
"path": "M209.423,15.126c24.964,0,49.92,0,74.865,0c0,23.899,0,47.801,0,71.7 c-7.242,0.62-15.717,0.09-23.447,0.269c-0.649-10.625-0.095-22.396-0.277-33.466c-2.807,1.564-5.023,3.922-7.347,6.109 c-35.226,33.115-71.141,67.045-106.495,100.377c-16.169-14.312-31.013-28.876-47.182-44.08c-0.944-0.88-3.024-2.92-3.11-2.92 c-0.572-0.02-3.995,3.495-5.079,4.513c-10.397,9.771-19.062,17.908-29.669,27.882c-1.247,1.173-4.107,4.757-4.801,4.782 c-0.866,0.033-6.854-6.174-7.625-6.903c-2.807-2.639-5.234-5.511-7.625-6.903c2.062,25.984,12.616,43.073,28.525,56.293 c15.199,12.633,38.282,22.758,66.115,19.126c25.787-3.374,44.166-15.151,56.21-30.277c11.272-14.149,20.589-35.221,16.091-60.545 c-0.233-1.336-1.022-3.164-0.831-4.252c0.38-2.358,7.261-7.62,9.037-9.29c1.664-1.56,3.318-2.863,4.801-4.248 c1.516-1.425,2.642-3.526,4.81-3.718c11.768,27.442,5.181,67.978-9.904,86.843c14.687,14.099,30.025,29.233,45.776,43.285 c7.833,6.979,19.221,14,18.639,27.873c-0.363,8.765-5.779,15.541-12.149,19.914c-7.424,5.117-20.984,5.784-29.088,0.271 c-5.442-3.706-10.121-9.506-15.268-14.337c-14.955-14.067-31.116-28.533-45.751-42.494c-16.688,8.846-37.295,14.67-61.02,13.016 c-22.459-1.563-41.211-9.627-55.093-19.116c-26.359-18.034-50.726-53.035-42.095-98.792c7.192-38.063,33.863-64.752,68.94-76.742 c19.037-6.517,44.356-7.824,64.962-2.391c19.574,5.156,34.67,14.438,47.468,26.024c-4.836,5.551-10.753,10.068-15.822,15.403 c-16.811-16.242-48.396-29.629-82.779-20.714c-28.377,7.363-47.38,26.151-57.059,50.453c2.062,3.299,4.731,4.977,7.911,7.966 c0.407,0.383,2.157,2.643,2.547,2.655c0.694,0.033,4.021-3.515,5.078-4.512c10.19-9.583,19.185-18.026,29.669-27.882 c1.283-1.218,4.255-4.761,4.801-4.781c0.866-0.037,4.956,4.39,6.499,5.84c14.454,13.595,29.236,27.866,43.784,41.163 c32.183-30.207,65.37-60.878,96.606-91.082c-11.203-0.179-23.16,0.347-33.896-0.269c0-7.082,0-14.165,0-21.243 C209.119,15.545,209.102,15.171,209.423,15.126z",
"duration": 1800
}
],
"dimensions": {
"width": 300,
"height": 300
}
}
};
/*
Setup and Paint your lazyline!
*/
$('.thing').waypoint(function() {
// Setup your Lazy Line element.
// see README file for more settings
$('#create2').lazylinepainter({"svgData": createSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint');
}, {triggerOnce: true});
$('.thing2').waypoint(function() {
// Setup your Lazy Line element.
// see README file for more settings
$('#code2').lazylinepainter({"svgData": codeSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint');
}, {triggerOnce: true});
$('.thing3').waypoint(function() {
// Setup your Lazy Line element.
// see README file for more settings
$('#convert2').lazylinepainter({"svgData": convertSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint');
}, {triggerOnce: true});
})( jQuery );
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-36869872-2', 'histeph.com');
ga('send', 'pageview');
</script>
</body>
</html>