prettified html
This commit is contained in:
Ben Harris
parent
40cead1b80
commit
bf9a669417
550
demo.html
550
demo.html
|
|
@ -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>
|
||||
10
footer.php
10
footer.php
|
|
@ -14,11 +14,16 @@
|
|||
|
||||
</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>
|
||||
|
||||
</footer> <!-- Footer End-->
|
||||
</footer>
|
||||
<!-- Footer End-->
|
||||
|
||||
<!-- Java Script
|
||||
================================================== -->
|
||||
|
|
@ -35,4 +40,3 @@
|
|||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<!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
|
||||
|
|
|
|||
223
index.php
223
index.php
|
|
@ -11,29 +11,45 @@ include 'header.html';
|
|||
<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 -->
|
||||
<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 -->
|
||||
</nav>
|
||||
<!-- end #nav-wrap -->
|
||||
|
||||
<div class="row banner">
|
||||
<div class="banner-text">
|
||||
<h1 class="responsive-headline">Hello, <br>I'm Benjamin Harris</h1>
|
||||
<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>
|
||||
<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>
|
||||
<a class="smoothscroll" href="#about">
|
||||
<i class="icon-down-circle"></i>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</header> <!-- Header End -->
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
|
||||
|
||||
<!-- About Section
|
||||
|
|
@ -52,26 +68,32 @@ include 'header.html';
|
|||
|
||||
<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>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="columns download">
|
||||
<p>
|
||||
<a href="/resume.pdf" class="button"><i class="fa fa-download"></i>Download/View Resume</a>
|
||||
<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>
|
||||
|
||||
</section> <!-- About Section End-->
|
||||
</section>
|
||||
<!-- About Section End-->
|
||||
|
||||
|
||||
<!-- Resume Section
|
||||
|
|
@ -83,7 +105,9 @@ include 'header.html';
|
|||
<div class="row education">
|
||||
|
||||
<div class="three columns header-col">
|
||||
<h1><span>Education</span></h1>
|
||||
<h1>
|
||||
<span>Education</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="nine columns main-col">
|
||||
|
|
@ -93,22 +117,30 @@ include 'header.html';
|
|||
<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>
|
||||
<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.
|
||||
Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable
|
||||
code.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- item end -->
|
||||
</div>
|
||||
<!-- item end -->
|
||||
|
||||
<div class="row item">
|
||||
|
||||
<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>
|
||||
<p class="info">Study Abroad Exchange Semester
|
||||
<span>•</span>
|
||||
<em class="date">February - July 2015</em>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Continued Computer Science coursework in German.
|
||||
|
|
@ -116,11 +148,14 @@ include 'header.html';
|
|||
|
||||
</div>
|
||||
|
||||
</div> <!-- item end -->
|
||||
</div>
|
||||
<!-- item end -->
|
||||
|
||||
</div> <!-- main-col end -->
|
||||
</div>
|
||||
<!-- main-col end -->
|
||||
|
||||
</div> <!-- End Education -->
|
||||
</div>
|
||||
<!-- End Education -->
|
||||
|
||||
|
||||
<!-- Work
|
||||
|
|
@ -128,7 +163,9 @@ include 'header.html';
|
|||
<div class="row work">
|
||||
|
||||
<div class="three columns header-col">
|
||||
<h1><span>Work</span></h1>
|
||||
<h1>
|
||||
<span>Work</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="nine columns main-col">
|
||||
|
|
@ -138,7 +175,10 @@ include 'header.html';
|
|||
<div class="twelve columns">
|
||||
|
||||
<h3>Hagerty Insurance Agency</h3>
|
||||
<p class="info">Developer <span>•</span> <em class="date">December 2017 - Present</em></p>
|
||||
<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.
|
||||
|
|
@ -146,44 +186,59 @@ include 'header.html';
|
|||
|
||||
</div>
|
||||
|
||||
</div> <!-- item end -->
|
||||
</div>
|
||||
<!-- item end -->
|
||||
|
||||
<div class="row item">
|
||||
|
||||
<div class="twelve columns">
|
||||
|
||||
<h3>Hagerty Insurance Agency</h3>
|
||||
<p class="info">Test Engineer <span>•</span> <em class="date">June - December 2017</em></p>
|
||||
<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.
|
||||
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> <!-- item end -->
|
||||
</div>
|
||||
<!-- item end -->
|
||||
|
||||
<div class="row item">
|
||||
|
||||
<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>
|
||||
<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.
|
||||
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> <!-- item end -->
|
||||
</div>
|
||||
<!-- item end -->
|
||||
|
||||
<div class="row item">
|
||||
|
||||
<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>
|
||||
<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.
|
||||
|
|
@ -191,11 +246,14 @@ include 'header.html';
|
|||
|
||||
</div>
|
||||
|
||||
</div> <!-- item end -->
|
||||
</div>
|
||||
<!-- item end -->
|
||||
|
||||
</div> <!-- main-col end -->
|
||||
</div>
|
||||
<!-- main-col end -->
|
||||
|
||||
</div> <!-- End Work -->
|
||||
</div>
|
||||
<!-- End Work -->
|
||||
|
||||
|
||||
<!-- Skills
|
||||
|
|
@ -203,7 +261,9 @@ include 'header.html';
|
|||
<div class="row skill">
|
||||
|
||||
<div class="three columns header-col">
|
||||
<h1><span>Skills</span></h1>
|
||||
<h1>
|
||||
<span>Skills</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="nine columns main-col">
|
||||
|
|
@ -214,24 +274,55 @@ include 'header.html';
|
|||
<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>
|
||||
<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>
|
||||
<!-- 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-->
|
||||
|
||||
|
||||
|
||||
|
|
@ -243,13 +334,17 @@ include 'header.html';
|
|||
|
||||
<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>
|
||||
|
||||
|
|
@ -264,12 +359,16 @@ include 'header.html';
|
|||
<fieldset>
|
||||
|
||||
<div>
|
||||
<label for="contactName">Name <span class="required">*</span></label>
|
||||
<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>
|
||||
<label for="contactEmail">Email
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="text" value="" size="35" id="contactEmail" name="contactEmail">
|
||||
</div>
|
||||
|
||||
|
|
@ -279,7 +378,9 @@ include 'header.html';
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label for="contactMessage">Message <span class="required">*</span></label>
|
||||
<label for="contactMessage">Message
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
|
||||
</div>
|
||||
|
||||
|
|
@ -291,13 +392,15 @@ include 'header.html';
|
|||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form> <!-- Form End -->
|
||||
</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>
|
||||
<i class="fa fa-check"></i>Your message was sent, thank you!
|
||||
<br>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -316,8 +419,8 @@ include 'header.html';
|
|||
|
||||
</div>
|
||||
|
||||
</section> <!-- Contact Section End-->
|
||||
</section>
|
||||
<!-- Contact Section End-->
|
||||
|
||||
|
||||
<?php include 'footer.php';
|
||||
|
||||
|
|
|
|||
48
social.html
48
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue