Permalink
Browse files

Added the contact template

  • Loading branch information...
Jonathan Smiley
Jonathan Smiley committed Sep 5, 2012
1 parent a2296c7 commit 38c3830dd3e924eae3fa831924e4e88fff8ea89c
Showing with 168 additions and 0 deletions.
  1. +168 −0 contact.html
View
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8" />
+
+ <!-- Set the viewport width to device width for mobile -->
+ <meta name="viewport" content="width=device-width" />
+
+ <title>Welcome to Foundation | Blog</title>
+
+ <!-- Included CSS Files (Uncompressed) -->
+ <!--
+ <link rel="stylesheet" href="stylesheets/foundation.css">
+ -->
+
+ <!-- Included CSS Files (Compressed) -->
+ <link rel="stylesheet" href="stylesheets/foundation.min.css">
+ <link rel="stylesheet" href="stylesheets/app.css">
+
+ <script src="javascripts/modernizr.foundation.js"></script>
+
+ <!-- IE Fix for HTML5 Tags -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+</head>
+<body>
+
+ <!-- Top Bar -->
+
+ <div class="row">
+ <div class="twelve columns">
+ <p>Top Bar Goes Here</p>
+ </div>
+ </div>
+
+ <!-- End Top Bar -->
+
+
+ <!-- Main Page Content and Sidebar -->
+
+ <div class="row">
+
+ <!-- Contact Details -->
+ <div class="nine columns">
+
+ <h3>Get in Touch!</h3>
+ <p>We'd love to hear from you. You can either reach out to us as a whole and one of our awesome team members will get back to you, or if you have a specific question reach out to one of our staff. We love getting email all day <em>all day</em>.</p>
+
+ <dl class="contained tabs">
+ <dd class="active"><a href="#contactForm">Contact Our Company</a></dd>
+ <dd><a href="#contactPeople">Specific Person</a></dd>
+ </dl>
+
+ <ul class="tabs-content contained">
+ <li id="contactFormTab" class="active">
+ <div class="row collapse">
+ <div class="two columns"><label class="inline">Your Name</label></div>
+ <div class="ten columns"><input type="text" id="yourName" placeholder="Jane Smith" />
+ </div>
+ <div class="row collapse">
+ <div class="two columns"><label class="inline">Your Email</label></div>
+ <div class="ten columns"><input type="text" id="yourEmail" placeholder="jane@smithco.com" />
+ </div>
+
+ <label>What's up?</label>
+ <textarea rows="4"></textarea>
+
+ <button type="submit" class="radius button">Submit</button>
+ </li>
+
+ <li id="contactPeopleTab">
+ <ul class="block-grid five-up">
+ <li><a href="mailto:mal@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />Mal Reynolds</a></li>
+ <li><a href="mailto:zoe@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />Zoe Washburne</a></li>
+ <li><a href="mailto:jayne@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />Jayne Cobb</a></li>
+ <li><a href="mailto:doc@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />Simon Tam</a></li>
+ <li><a href="mailto:killyouwithmymind@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />River Tam</a></li>
+ <li><a href="mailto:leafonthewind@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />Hoban Washburne</a></li>
+ <li><a href="mailto:book@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />Shepherd Book</a></li>
+ <li><a href="mailto:klee@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]" /><br />Kaywinnet Lee Fry</a></li>
+ <li><a href="mailto:inara@guild.comp.all"><img src="http://placehold.it/200x200&text=[person]" /><br />Inarra Serra</a></li>
+ </ul>
+ </li>
+ </ul>
+
+ </div>
+
+ <!-- End Contact Details -->
+
+
+ <!-- Sidebar -->
+
+ <div class="three columns">
+
+ <h5>Map</h5>
+
+ <!-- Clicking this placeholder fires the mapModal Reveal modal -->
+ <p>
+ <a href="" data-reveal-id="mapModal"><img src="http://placehold.it/400x280" /></a><br />
+ <a href="" data-reveal-id="mapModal">View Map</a>
+ </p>
+
+ <p>
+ 123 Awesome St.<br />
+ Barsoom, MA 95155
+ </p>
+
+ </div>
+
+ <!-- End Sidebar -->
+ </div>
+
+ <!-- End Main Content and Sidebar -->
+
+
+ <!-- Footer -->
+
+ <footer class="row">
+ <div class="twelve columns">
+ <hr />
+ <div class="row">
+ <div class="six columns">
+ <p>&copy; Copyright no one at all. Go to town.</p>
+ </div>
+ <div class="six columns">
+ <ul class="link-list right">
+ <li><a href="#">Link 1</a></li>
+ <li><a href="#">Link 2</a></li>
+ <li><a href="#">Link 3</a></li>
+ <li><a href="#">Link 4</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <!-- End Footer -->
+
+
+
+ <!-- Map Modal -->
+
+ <div class="reveal-modal" id="mapModal">
+ <h4>Where We Are</h4>
+ <p><img src="http://placehold.it/800x600" /></p>
+
+ <!-- Any anchor with this class will close the modal. This also inherits certain styles, which can be overriden. -->
+ <a href="#" class="close-reveal-modal">&times;</a>
+ </div>
+
+ <!-- End Modal -->
+
+
+
+ <!-- Included JS Files (Compressed) -->
+ <script src="javascripts/foundation.min.js"></script>
+
+ <!-- Initialize JS Plugins -->
+ <script src="javascripts/app.js"></script>
+</body>
+</html>

0 comments on commit 38c3830

Please sign in to comment.