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 /demo.html | |
| parent | 40cead1b80794717906009bd5670bd40c2c12260 (diff) | |
prettified html
Diffstat (limited to 'demo.html')
| -rw-r--r-- | demo.html | 550 |
1 files changed, 0 insertions, 550 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 |