diff options
| author | Ben Harris <bharris@hagerty.com> | 2017-12-20 15:36:28 -0500 |
|---|---|---|
| committer | Ben Harris <bharris@hagerty.com> | 2017-12-20 15:36:28 -0500 |
| commit | bf9a669417c91959a372ef729c01a53c934a82aa (patch) | |
| tree | dcbc37b9c1efb659cc60dd98f8afa56bded85a37 | |
| parent | 40cead1b80794717906009bd5670bd40c2c12260 (diff) | |
prettified html
| -rw-r--r-- | demo.html | 550 | ||||
| -rw-r--r-- | footer.php | 40 | ||||
| -rw-r--r-- | header.html | 25 | ||||
| -rw-r--r-- | index.php | 515 | ||||
| -rw-r--r-- | social.html | 48 |
5 files changed, 385 insertions, 793 deletions
diff --git a/demo.html b/demo.html deleted file mode 100644 index 36c0944..0000000 --- a/demo.html +++ /dev/null @@ -1,550 +0,0 @@ -<!DOCTYPE html> -<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]--> -<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]--> -<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]--> -<head> - - <!--- Basic Page Needs - ================================================== --> - <meta charset="utf-8"> - <title>CeeVee - Free Responsive HTML5/CSS3 Template</title> - <meta name="description" content=""> - <meta name="author" content=""> - - <!-- Mobile Specific Metas - ================================================== --> - <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> - - <!-- CSS - ================================================== --> - <link rel="stylesheet" href="css/default.css"> - <link rel="stylesheet" href="css/layout.css"> - <link rel="stylesheet" href="css/media-queries.css"> - <link rel="stylesheet" href="css/magnific-popup.css"> - - <!-- Script - ================================================== --> - <script src="js/modernizr.js"></script> - - <!-- Favicons - ================================================== --> - <link rel="shortcut icon" href="favicon.ico" > - -</head> - -<body> - - <!-- Header - ================================================== --> - <header id="home"> - - <nav id="nav-wrap"> - - <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a> - <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a> - - <ul id="nav" class="nav"> - <li class="current"><a class="smoothscroll" href="#home">Home</a></li> - <li><a class="smoothscroll" href="#styles">Style Guide</a></li> - </ul> <!-- end #nav --> - - </nav> <!-- end #nav-wrap --> - - <div class="row banner"> - <div class="banner-text"> - <h1 class="responsive-headline">I'm Jonathan Doe.</h1> - <h3>I'm a Manila based <span>graphic designer</span>, <span>illustrator</span> and <span>webdesigner</span> creating awesome and - effective visual identities for companies of all sizes around the globe. Let's <a class="smoothscroll" href="#about">start scrolling</a> - and learn more <a class="smoothscroll" href="#about">about me</a>.</h3> - <hr /> - <ul class="social"> - <li><a href="#"><i class="fa fa-facebook"></i></a></li> - <li><a href="#"><i class="fa fa-twitter"></i></a></li> - <li><a href="#"><i class="fa fa-google-plus"></i></a></li> - <li><a href="#"><i class="fa fa-linkedin"></i></a></li> - <li><a href="#"><i class="fa fa-instagram"></i></a></li> - <li><a href="#"><i class="fa fa-dribbble"></i></a></li> - <li><a href="#"><i class="fa fa-skype"></i></a></li> - </ul> - </div> - </div> - - <p class="scrolldown"> - <a class="smoothscroll" href="#styles"><i class="icon-down-circle"></i></a> - </p> - - </header> <!-- Header End --> - - <!-- Style Guide Section - ================================================== --> - <section id="styles" style="padding: 90px 0 72px; background: #fff;"> - - <div class="row add-bottom"> - - <div class="twelve columns"> - - <h1>Style Demo.</h1> - - <p class="lead add-bottom">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum - deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate. - At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium. - </p> - - <hr> - - </div> - - </div> <!-- Row End--> - - <div class="row add-bottom"> - - <div class="six columns add-bottom"> - - <h3>Paragraph and Image</h3> - - <p><a href="#"><img width="120" height="120" class="pull-left" alt="sample-image" src="images/sample-image.jpg"></a> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. - Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu - posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum - odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra - condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. - posuere nunc justo tempus leo. </p> - - <p>A <a href="#">link</a>, - <abbr title="this really isn't a very good description">abbrebation</abbr>, - <strong>strong text</strong>, - <em>em text</em>, - <del>deleted text</del>, and - <mark>this is a mark text.</mark> - </p> - - </div> - - <div class="six columns add-bottom"> - - <h3>Drop Caps</h3> - - <p class="drop-cap">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the - Semantics, a large language ocean. A small river named Duden flows by their place and supplies - it with the necessary regelialia. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu - posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum - odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra - condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. - </p> - - <h3>Small Print</h3> - - <p>Buy one widget, get one free! - <small>(While supplies last. Offer expires on the vernal equinox. Not valid in Ohio.)</small> - </p> - - </div> - - <hr /> - - </div> <!-- Row End--> - - <div class="row add-bottom"> - - <div class="six columns add-bottom"> - - <h3>Pull Quotes</h3> - - <aside class="pull-quote"> - <blockquote> - <p>It is a paradisematic country, in which roasted parts of - sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind - texts it is an almost unorthographic life One day however a small line of blind text by the name - of Lorem Ipsum decided to leave for the far World of Grammar.</p> - </blockquote> - </aside> - - </div> - - <div class="six columns add-bottom"> - - <h3>Block Quotes</h3> - - <blockquote cite="http://where-i-got-my-info-from.com"> - <p>Your work is going to fill a large part of your life, and the only way to be truly satisfied is - to do what you believe is great work. And the only way to do great work is to love what you do. - If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. - </p> - <cite> - <a href="#">Steve Jobs</a> - </cite> - </blockquote> - - <blockquote> - <p>Good design is as little design as possible.</p> - <cite>Dieter Rams</cite> - </blockquote> - - </div> - - <hr /> - - </div> <!-- Row End--> - - <div class="row add-bottom"> - - <div class="eight columns add-bottom"> - - <h3 class="add-bottom">Definition Lists</h3> - - <h5>a) Multi-line Definitions (default)</h5> - - <dl> - <dt><b>This is a term</b></dt> - <dd>this is the definition of that term, which both live in a <code>dl</code>.</dd> - <dt><b>Another Term</b></dt> - <dd>And it gets a definition too, which is this line</dd> - <dd>This is a 2<sup>nd</sup> definition for a single term. A <code>dt</code> may be followed by multiple <code>dd</code>s.</dd> - </dl> - - <h5>b) Inline Definitions</h5> - - <dl class="lining"> - <dt><b>This is a term</b></dt> - <dd>this is the definition of that term, which both live in a <code>dl</code>.</dd> - <dt><b>Another Term</b></dt> - <dd class="micro">And it gets a definition too, which is this line</dd> - <dd class="micro"> this is a 2<sup>nd</sup> definition for a single term.</dd> - <dt><b>Term</b></dt> - <dt><b>Other Defined Term</b></dt> - <dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd> - </dl> - - <h5>c) Dictionary-style Definition</h5> - - <dl class="dictionary-style"> - <dt><b>This is a term</b></dt> - <dd>this is the definition of that term, which both live in a <code>dl</code>.</dd> - <dt><b>Another Term</b></dt> - <dd>And it gets a definition too, which is this line</dd> - <dd> this is a 2<sup>nd</sup> definition for a single term.</dd> - <dt><b>Term</b></dt> - <dt><b>Other Defined Term</b></dt> - <dd><code>dt</code> terms may stand on their own without an accompanying <code>dd</code>, but in that case they <em>share</em> descriptions with the next available <code>dt</code>. You may not have a <code>dd</code> without a parent <code>dt</code>.</dd> - </dl> - - </div> - - <div class="four columns add-bottom"> - - <h3>Example Lists</h3> - - <ol> - <li>Here is an example</li> - <li>of an ordered list</li> - </ol> - - <ul class="disc"> - <li>Here is an example</li> - <li>of an unordered list</li> - </ul> - - <h3>Stats Tabs</h3> - - <ul class="stats-tabs"> - <li><a href="#">1,234 <b>Sasuke</b></a></li> - <li><a href="#">567 <b>Hinata</b></a></li> - <li><a href="#">23,456 <b>Naruto</b></a></li> - <li><a href="#">3,456 <b>Kiba</b></a></li> - <li><a href="#">456 <b>Shikamaru</b></a></li> - <li><a href="#">26 <b>Sakura</b></a></li> - </ul> - - <h3>Headers</h3> - - <h1>H1 Heading</h1> - <h2>H2 Heading</h2> - <h3>H3 Heading</h3> - <h4>H4 Heading</h4> - <h5>H5 Heading</h5> - <h6>H6 Heading</h6> - - <hr> - - <h3>button</h3> - - <a class="button" href="#">This is a button</a> - - </div> - - <hr /> - - </div> <!-- Row End--> - - <div class="row add-bottom"> - - <div class="twelve columns add-bottom"> - - <h3 class="add-bottom">Pagination</h3> - - <nav class="pagination add-bottom"> - - <span class="page-numbers prev inactive">Prev</span> - <span class="page-numbers current">1</span> - <a href="#" class="page-numbers">2</a> - <a href="#" class="page-numbers">3</a> - <a href="#" class="page-numbers">4</a> - <a href="#" class="page-numbers">5</a> - <a href="#" class="page-numbers">6</a> - <a href="#" class="page-numbers">7</a> - <a href="#" class="page-numbers">8</a> - <a href="#" class="page-numbers">9</a> - <a href="#" class="page-numbers next">Next</a> - - </nav> - - </div> - - <hr /> - - </div> <!-- Row End--> - - <!-- - <div class="row add-bottom"> - - <div class="twelve columns add-bottom"> - - <h3>Form Styles</h3> - - <form> - <fieldset> - - <label for="regularInput">Regular Input</label> - <input type="text" id="regularInput"> - - <label for="regularTextarea">Regular Textarea</label> - <textarea id="regularTextarea"></textarea> - - <label for="selectList">Select List</label> - <select id="selectList"> - <option value="Option 1">Option 1</option> - <option value="Option 2">Option 2</option> - <option value="Option 3">Option 3</option> - <option value="Option 4">Option 4</option> - </select> - - <fieldset> - <legend>Checkboxes</legend> - - <label for="regularCheckbox"> - <input type="checkbox" value="checkbox 1" id="regularCheckbox"> - <span>Regular Checkbox</span> - </label> - - <label for="secondRegularCheckbox"> - <input type="checkbox" value="checkbox 2" id="secondRegularCheckbox"> - <span>Regular Checkbox</span> - </label> - </fieldset> - - <fieldset> - <legend>Radio Buttons</legend> - - <label for="regularRadio"> - <input type="radio" value="radio 1" id="regularRadio" name="radios"> - <span>Regular Radio</span> - </label> - - <label for="secondRegularRadio"> - <input type="radio" value="radio 2" id="secondRegularRadio" name="radios"> - <span>Regular Radio</span> - </label> - </fieldset> - - <button type="submit">Submit Form</button> - - </fieldset> - </form> - - </div> - - <hr /> - - </div> - --> - - - <div class="row"> - - <div class="twelve columns"> - <h3 class="half-bottom">Columns</h3> - </div> - - </div> <!-- Row End--> - - <!--<h4>1/3 Columns</h4> --> - - <div class="row"> - - <div class="four columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. </p> - </div> - - <div class="four columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. </p> - </div> - - <div class="four columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. </p> - </div> - - </div> - - <!--<h4>1/4 Columns</h4> --> - - <div class="row"> - - <div class="three columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. Ut dui lectus, ultrices ut, sodales tincidunt, - viverra sed, nisl. </p> - </div> - - <div class="three columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. Ut dui lectus, ultrices ut, sodales tincidunt, - viverra sed, nisl. </p> - </div> - - <div class="three columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. Ut dui lectus, ultrices ut, sodales tincidunt, - viverra sed, nisl. </p> - </div> - - <div class="three columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. Ut dui lectus, ultrices ut, sodales tincidunt, - viverra sed, nisl. </p> - </div> - - </div> - - <!--<h4>1/2 Columns</h4> --> - - <div class="row"> - - <div class="six columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. </p> - </div> - - <div class="six columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. </p> - </div> - - </div> - - <!--<h4>2/3 Columns</h4> --> - - <div class="row"> - - <div class="eight columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor.</p> - </div> - - <div class="four columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. </p> - </div> - - </div> - - <!--<h4>3/4 Columns</h4> --> - - <div class="row"> - - <div class="three columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at. </p> - </div> - - <div class="nine columns"> - <p>Cras aliquet. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor.Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor. Integer faucibus, eros ac molestie placerat, enim tellus varius lacus, - nec dictum nunc tortor id urna. Suspendisse dapibus ullamcorper pede. Vivamus ligula ipsum, - faucibus at, tincidunt eget, porttitor non, dolor.</p> - </div> - - </div> - - </section> <!-- Resume Section End--> - - - <!-- footer - ================================================== --> - <footer> - - <div class="row"> - - <div class="twelve columns"> - - <ul class="social-links"> - <li><a href="#"><i class="fa fa-facebook"></i></a></li> - <li><a href="#"><i class="fa fa-twitter"></i></a></li> - <li><a href="#"><i class="fa fa-google-plus"></i></a></li> - <li><a href="#"><i class="fa fa-linkedin"></i></a></li> - <li><a href="#"><i class="fa fa-instagram"></i></a></li> - <li><a href="#"><i class="fa fa-dribbble"></i></a></li> - <li><a href="#"><i class="fa fa-skype"></i></a></li> - </ul> - - <ul class="copyright"> - <li>© Copyright 2014 CeeVee</li> - <li>Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a></li> - </ul> - - </div> - - <div id="go-top" style="display: block;"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div> - - </div> - - </footer> <!-- Footer End--> - - <!-- Java Script - ================================================== --> - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> - <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> - <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> - - <script src="js/jquery.flexslider.js"></script> - <script src="js/waypoints.js"></script> - <script src="js/jquery.fittext.js"></script> - <script src="js/magnific-popup.js"></script> - <script src="js/doubletaptogo.js"></script> - <script src="js/spin.js"></script> - - <script src="js/init.js"></script> - -</body> - -</html> \ No newline at end of file diff --git a/footer.php b/footer.php index a3c932a..f887d58 100644 --- a/footer.php +++ b/footer.php @@ -1,10 +1,10 @@ - <!-- footer +<!-- footer ================================================== --> - <footer> +<footer> - <div class="row"> + <div class="row"> - <div class="twelve columns"> + <div class="twelve columns"> <?php include 'social.html'; ?> @@ -12,27 +12,31 @@ <li>© Copyright <?=date("Y")?> Benjamin Harris</li> </ul> - </div> + </div> - <div id="go-top"><a class="smoothscroll" title="Back to Top" href="#home"><i class="icon-up-open"></i></a></div> + <div id="go-top"> + <a class="smoothscroll" title="Back to Top" href="#home"> + <i class="icon-up-open"></i> + </a> + </div> - </div> + </div> - </footer> <!-- Footer End--> +</footer> +<!-- Footer End--> - <!-- Java Script +<!-- Java Script ================================================== --> - <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> - <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> - <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> +<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> +<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> - <script src="js/jquery.flexslider.js"></script> - <script src="js/waypoints.js"></script> - <script src="js/jquery.fittext.js"></script> - <script src="js/magnific-popup.js"></script> - <script src="js/init.js"></script> +<script src="js/jquery.flexslider.js"></script> +<script src="js/waypoints.js"></script> +<script src="js/jquery.fittext.js"></script> +<script src="js/magnific-popup.js"></script> +<script src="js/init.js"></script> </body> </html> - diff --git a/header.html b/header.html index 05664a2..5d35fc4 100644 --- a/header.html +++ b/header.html @@ -1,18 +1,21 @@ <!DOCTYPE html> <!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]--> -<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]--> +<!--[if (gte IE 8)|!(IE)]><!--> +<html class="no-js" lang="en"> +<!--<![endif]--> + <head> - <!--- Basic Page Needs + <!--- Basic Page Needs ================================================== --> - <meta charset="utf-8"> + <meta charset="utf-8"> <title>Benjamin Harris</title> <meta name="description" content="Benjamin Harris"> <meta name="author" content="Benjamin Harris"> - <meta name="theme-color" content="#333333"> + <meta name="theme-color" content="#333333"> - <!-- Mobile Specific Metas + <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> @@ -23,18 +26,18 @@ <link rel="pgpkey" href="/keypub.txt"> <!-- CSS ================================================== --> - <link rel="stylesheet" href="css/default.css"> + <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/layout.css"> - <link rel="stylesheet" href="css/media-queries.css"> - <link rel="stylesheet" href="css/magnific-popup.css"> + <link rel="stylesheet" href="css/media-queries.css"> + <link rel="stylesheet" href="css/magnific-popup.css"> - <!-- Script + <!-- Script ================================================== --> <script src="js/modernizr.js"></script> - <!-- Favicons + <!-- Favicons ================================================== --> - <link rel="shortcut icon" href="favicon.ico" > + <link rel="shortcut icon" href="favicon.ico"> </head> diff --git a/index.php b/index.php index 8bf9ab5..cdbe8d9 100644 --- a/index.php +++ b/index.php @@ -1,323 +1,426 @@ <?php include 'header.html'; ?> - <!-- Header + <!-- Header ================================================== --> - <header id="home"> - - <nav id="nav-wrap"> - - <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a> - <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a> - - <ul id="nav" class="nav"> - <li class="current"><a class="smoothscroll" href="#home">Home</a></li> - <li><a class="smoothscroll" href="#about">About</a></li> - <li><a class="smoothscroll" href="#resume">Resume</a></li> - <li><a class="smoothscroll" href="#contact">Contact</a></li> - </ul> <!-- end #nav --> - - </nav> <!-- end #nav-wrap --> - - <div class="row banner"> - <div class="banner-text"> - <h1 class="responsive-headline">Hello, <br>I'm Benjamin Harris</h1> - <hr> - <h3><a class="smoothscroll" href="#about">I'm a Michigan-based software developer. Scroll down to learn more.</a></h3> - <hr /> - <?php include 'social.html'; ?> - </div> - </div> + <header id="home"> + + <nav id="nav-wrap"> + + <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a> + <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a> + + <ul id="nav" class="nav"> + <li class="current"> + <a class="smoothscroll" href="#home">Home</a> + </li> + <li> + <a class="smoothscroll" href="#about">About</a> + </li> + <li> + <a class="smoothscroll" href="#resume">Resume</a> + </li> + <li> + <a class="smoothscroll" href="#contact">Contact</a> + </li> + </ul> + <!-- end #nav --> + + </nav> + <!-- end #nav-wrap --> + + <div class="row banner"> + <div class="banner-text"> + <h1 class="responsive-headline">Hello, + <br>I'm Benjamin Harris</h1> + <hr> + <h3> + <a class="smoothscroll" href="#about">I'm a Michigan-based software developer. Scroll down to learn more.</a> + </h3> + <hr /> + <?php include 'social.html'; ?> + </div> + </div> - <p class="scrolldown"> - <a class="smoothscroll" href="#about"><i class="icon-down-circle"></i></a> - </p> + <p class="scrolldown"> + <a class="smoothscroll" href="#about"> + <i class="icon-down-circle"></i> + </a> + </p> - </header> <!-- Header End --> + </header> + <!-- Header End --> - <!-- About Section + <!-- About Section ================================================== --> - <section id="about"> + <section id="about"> - <div class="row"> + <div class="row"> - <div class="three columns"> + <div class="three columns"> - <img class="profile-pic" src="images/profilepic.jpg" alt="" /> + <img class="profile-pic" src="images/profilepic.jpg" alt="" /> - </div> + </div> - <div class="nine columns main-col"> + <div class="nine columns main-col"> - <h2>About Me</h2> + <h2>About Me</h2> - <p>I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to travel and have lived in Ecuador and Switzerland. - </p> + <p>I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to + travel and have lived in Ecuador and Switzerland. + </p> - <p>Check out what I'm up to <a href="/now">now</a>.</p> + <p>Check out what I'm up to + <a href="/now">now</a>.</p> - <div class="row"> + <div class="row"> - <div class="columns download"> - <p> - <a href="/resume.pdf" class="button"><i class="fa fa-download"></i>Download/View Resume</a> - </p> - </div> + <div class="columns download"> + <p> + <a href="/resume.pdf" class="button"> + <i class="fa fa-download"></i>Download/View Resume</a> + </p> + </div> - </div> <!-- end row --> + </div> + <!-- end row --> - </div> <!-- end .main-col --> + </div> + <!-- end .main-col --> - </div> + </div> - </section> <!-- About Section End--> + </section> + <!-- About Section End--> - <!-- Resume Section + <!-- Resume Section ================================================== --> - <section id="resume"> + <section id="resume"> - <!-- Education + <!-- Education ----------------------------------------------- --> - <div class="row education"> + <div class="row education"> - <div class="three columns header-col"> - <h1><span>Education</span></h1> - </div> + <div class="three columns header-col"> + <h1> + <span>Education</span> + </h1> + </div> - <div class="nine columns main-col"> + <div class="nine columns main-col"> - <div class="row item"> + <div class="row item"> - <div class="twelve columns"> + <div class="twelve columns"> - <h3>Northern Michigan University</h3> - <p class="info">Bachelor of Arts - Computer Science/Economics double major, Mathematics minor <span>•</span> <em class="date">August 2013 - May 2017</em></p> + <h3>Northern Michigan University</h3> + <p class="info">Bachelor of Arts - Computer Science/Economics double major, Mathematics minor + <span>•</span> + <em class="date">August 2013 - May 2017</em> + </p> - <p> - Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable code. - </p> + <p> + Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable + code. + </p> - </div> + </div> - </div> <!-- item end --> + </div> + <!-- item end --> - <div class="row item"> + <div class="row item"> - <div class="twelve columns"> + <div class="twelve columns"> - <h3>Zurich University of Applied Sciences (ZHAW)</h3> - <p class="info">Study Abroad Exchange Semester <span>•</span> <em class="date">February - July 2015</em></p> + <h3>Zurich University of Applied Sciences (ZHAW)</h3> + <p class="info">Study Abroad Exchange Semester + <span>•</span> + <em class="date">February - July 2015</em> + </p> - <p> - Continued Computer Science coursework in German. - </p> + <p> + Continued Computer Science coursework in German. + </p> - </div> + </div> - </div> <!-- item end --> + </div> + <!-- item end --> - </div> <!-- main-col end --> + </div> + <!-- main-col end --> - </div> <!-- End Education --> + </div> + <!-- End Education --> - <!-- Work + <!-- Work ----------------------------------------------- --> - <div class="row work"> + <div class="row work"> - <div class="three columns header-col"> - <h1><span>Work</span></h1> - </div> + <div class="three columns header-col"> + <h1> + <span>Work</span> + </h1> + </div> - <div class="nine columns main-col"> + <div class="nine columns main-col"> - <div class="row item"> + <div class="row item"> - <div class="twelve columns"> + <div class="twelve columns"> - <h3>Hagerty Insurance Agency</h3> - <p class="info">Developer <span>•</span> <em class="date">December 2017 - Present</em></p> + <h3>Hagerty Insurance Agency</h3> + <p class="info">Developer + <span>•</span> + <em class="date">December 2017 - Present</em> + </p> - <p> - Work on the Automation release train to improve business processes across the board. - </p> + <p> + Work on the Automation release train to improve business processes across the board. + </p> - </div> + </div> - </div> <!-- item end --> + </div> + <!-- item end --> - <div class="row item"> + <div class="row item"> - <div class="twelve columns"> + <div class="twelve columns"> - <h3>Hagerty Insurance Agency</h3> - <p class="info">Test Engineer <span>•</span> <em class="date">June - December 2017</em></p> + <h3>Hagerty Insurance Agency</h3> + <p class="info">Test Engineer + <span>•</span> + <em class="date">June - December 2017</em> + </p> - <p> - Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to ensure software results and performance. - </p> + <p> + Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to + ensure software results and performance. + </p> - </div> + </div> - </div> <!-- item end --> + </div> + <!-- item end --> - <div class="row item"> + <div class="row item"> - <div class="twelve columns"> + <div class="twelve columns"> - <h3>Northern Michigan University</h3> - <p class="info">Student Programmer, Business Intelligence/Information Systems <span>•</span> <em class="date">May 2014 - May 2017</em></p> + <h3>Northern Michigan University</h3> + <p class="info">Student Programmer, Business Intelligence/Information Systems + <span>•</span> + <em class="date">May 2014 - May 2017</em> + </p> - <p> - Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery, and Bootstrap. - </p> + <p> + Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills + and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery, + and Bootstrap. + </p> - </div> + </div> - </div> <!-- item end --> + </div> + <!-- item end --> - <div class="row item"> + <div class="row item"> - <div class="twelve columns"> + <div class="twelve columns"> - <h3>Iron Fish Distillery</h3> - <p class="info">App Developer/Webmaster <span>•</span> <em class="date">June 2016 - Present</em></p> + <h3>Iron Fish Distillery</h3> + <p class="info">App Developer/Webmaster + <span>•</span> + <em class="date">June 2016 - Present</em> + </p> - <p> - Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site. - </p> + <p> + Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site. + </p> - </div> + </div> - </div> <!-- item end --> + </div> + <!-- item end --> - </div> <!-- main-col end --> + </div> + <!-- main-col end --> - </div> <!-- End Work --> + </div> + <!-- End Work --> - <!-- Skills + <!-- Skills ----------------------------------------------- --> - <div class="row skill"> - - <div class="three columns header-col"> - <h1><span>Skills</span></h1> - </div> - - <div class="nine columns main-col"> - - <p>There are some of my most notable skills: - </p> + <div class="row skill"> - <div class="bars"> - - <ul class="skills"> - <li><span class="bar-expand php"></span><em>PHP</em></li> - <li><span class="bar-expand sql"></span><em>SQL</em></li> - <li><span class="bar-expand python"></span><em>python</em></li> - <li><span class="bar-expand cpp"></span><em>C++</em></li> - <li><span class="bar-expand jquery"></span><em>jQuery</em></li> - <li><span class="bar-expand unix-admin"></span><em>Unix Administration</em></li> - <li><span class="bar-expand git"></span><em>Git</em></li> - <li><span class="bar-expand unit-testing"></span><em>Unit Testing</em></li> - <li><span class="bar-expand bootstrap"></span><em>Bootstrap</em></li> - </ul> + <div class="three columns header-col"> + <h1> + <span>Skills</span> + </h1> + </div> - </div><!-- end skill-bars --> + <div class="nine columns main-col"> + + <p>There are some of my most notable skills: + </p> + + <div class="bars"> + + <ul class="skills"> + <li> + <span class="bar-expand php"></span> + <em>PHP</em> + </li> + <li> + <span class="bar-expand sql"></span> + <em>SQL</em> + </li> + <li> + <span class="bar-expand python"></span> + <em>python</em> + </li> + <li> + <span class="bar-expand cpp"></span> + <em>C++</em> + </li> + <li> + <span class="bar-expand jquery"></span> + <em>jQuery</em> + </li> + <li> + <span class="bar-expand unix-admin"></span> + <em>Unix Administration</em> + </li> + <li> + <span class="bar-expand git"></span> + <em>Git</em> + </li> + <li> + <span class="bar-expand unit-testing"></span> + <em>Unit Testing</em> + </li> + <li> + <span class="bar-expand bootstrap"></span> + <em>Bootstrap</em> + </li> + </ul> + + </div> + <!-- end skill-bars --> - </div> <!-- main-col end --> + </div> + <!-- main-col end --> - </div> <!-- End skills --> + </div> + <!-- End skills --> - </section> <!-- Resume Section End--> + </section> + <!-- Resume Section End--> - <!-- Contact Section + <!-- Contact Section ================================================== --> - <section id="contact"> + <section id="contact"> - <div class="row section-head"> + <div class="row section-head"> <div class="two columns header-col"> - <h1><span>Get In Touch.</span></h1> + <h1> + <span>Get In Touch.</span> + </h1> </div> <div class="ten columns"> - <p class="lead">Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message on <a href="https://t.me/bharris">Telegram</a> or send me an email with this form here.</p> + <p class="lead">Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message + on + <a href="https://t.me/bharris">Telegram</a> or send me an email with this form here.</p> </div> - </div> + </div> - <div class="row"> + <div class="row"> <div class="eight columns"> - <!-- form --> - <form action="" method="post" id="contactForm" name="contactForm"> - <fieldset> - - <div> - <label for="contactName">Name <span class="required">*</span></label> - <input type="text" value="" size="35" id="contactName" name="contactName"> - </div> - - <div> - <label for="contactEmail">Email <span class="required">*</span></label> - <input type="text" value="" size="35" id="contactEmail" name="contactEmail"> - </div> - - <div> - <label for="contactSubject">Subject</label> - <input type="text" value="" size="35" id="contactSubject" name="contactSubject"> - </div> - - <div> - <label for="contactMessage">Message <span class="required">*</span></label> - <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea> - </div> - - <div> - <button class="submit">Submit</button> - <span id="image-loader"> - <img alt="" src="images/loader.gif"> - </span> - </div> - - </fieldset> - </form> <!-- Form End --> - - <!-- contact-warning --> - <div id="message-warning"> Error boy</div> - <!-- contact-success --> - <div id="message-success"> - <i class="fa fa-check"></i>Your message was sent, thank you!<br> - </div> + <!-- form --> + <form action="" method="post" id="contactForm" name="contactForm"> + <fieldset> + + <div> + <label for="contactName">Name + <span class="required">*</span> + </label> + <input type="text" value="" size="35" id="contactName" name="contactName"> + </div> + + <div> + <label for="contactEmail">Email + <span class="required">*</span> + </label> + <input type="text" value="" size="35" id="contactEmail" name="contactEmail"> + </div> + + <div> + <label for="contactSubject">Subject</label> + <input type="text" value="" size="35" id="contactSubject" name="contactSubject"> + </div> + + <div> + <label for="contactMessage">Message + <span class="required">*</span> + </label> + <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea> + </div> + + <div> + <button class="submit">Submit</button> + <span id="image-loader"> + <img alt="" src="images/loader.gif"> + </span> + </div> + + </fieldset> + </form> + <!-- Form End --> + + <!-- contact-warning --> + <div id="message-warning"> Error boy</div> + <!-- contact-success --> + <div id="message-success"> + <i class="fa fa-check"></i>Your message was sent, thank you! + <br> + </div> </div> <aside class="four columns footer-widgets"> - <div class="widget widget_contact"> + <div class="widget widget_contact"> - <h4>Hi!</h4> - <p>I look forward to hearing from you!</p> + <h4>Hi!</h4> + <p>I look forward to hearing from you!</p> - </div> + </div> </aside> - </div> - - </section> <!-- Contact Section End--> + </div> + </section> + <!-- Contact Section End--> -<?php include 'footer.php'; + <?php include 'footer.php'; diff --git a/social.html b/social.html index acb6cd0..185b315 100644 --- a/social.html +++ b/social.html @@ -1,10 +1,42 @@ <ul class="social social-links"> - <li><a rel="me" href="https://github.com/benharri"><i class="fa fa-github"></i></a></li> - <li><a rel="me" href="https://gitlab.com/benharri"><i class="fa fa-gitlab"></i></a></li> - <li><a rel="me" href="https://t.me/bharris"><i class="fa fa-paper-plane"></i></a></li> - <li><a rel="me" href="https://twitter.com/nebsirrah"><i class="fa fa-twitter"></i></a></li> - <li><a rel="me" href="https://www.linkedin.com/in/benjaminhharris"><i class="fa fa-linkedin"></i></a></li> - <li><a rel="me" href="https://instagram.com/benharr.is"><i class="fa fa-instagram"></i></a></li> - <li><a rel="me" href="https://keybase.io/bharris"><i class="fa fa-key"></i></a></li> - <li><a rel="me" href="mailto:mail@benharr.is"><i class="fa fa-email"></i></a></li> + <li> + <a rel="me" href="https://github.com/benharri"> + <i class="fa fa-github"></i> + </a> + </li> + <li> + <a rel="me" href="https://gitlab.com/benharri"> + <i class="fa fa-gitlab"></i> + </a> + </li> + <li> + <a rel="me" href="https://t.me/bharris"> + <i class="fa fa-paper-plane"></i> + </a> + </li> + <li> + <a rel="me" href="https://twitter.com/nebsirrah"> + <i class="fa fa-twitter"></i> + </a> + </li> + <li> + <a rel="me" href="https://www.linkedin.com/in/benjaminhharris"> + <i class="fa fa-linkedin"></i> + </a> + </li> + <li> + <a rel="me" href="https://instagram.com/benharr.is"> + <i class="fa fa-instagram"></i> + </a> + </li> + <li> + <a rel="me" href="https://keybase.io/bharris"> + <i class="fa fa-key"></i> + </a> + </li> + <li> + <a rel="me" href="mailto:mail@benharr.is"> + <i class="fa fa-email"></i> + </a> + </li> </ul> |