Created
February 28, 2013 06:14
-
-
Save ghaida/5054646 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="top-bar"> | |
| <ul class="title-area"> | |
| <!-- Title Area --> | |
| <li class="name"> | |
| <h1> | |
| <a href="#"> | |
| Top Bar Title | |
| </a> | |
| </h1> | |
| </li> | |
| <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li> | |
| </ul> | |
| <section class="top-bar-section"> | |
| <!-- Right Nav Section --> | |
| <ul class="right"> | |
| <li class="divider"></li> | |
| <li class="has-dropdown"> | |
| <a href="#">Main Item 1</a> | |
| <ul class="dropdown"> | |
| <li><label>Section Name</label></li> | |
| <li class="has-dropdown"> | |
| <a href="#" class="">Has Dropdown, Level 1</a> | |
| <ul class="dropdown"> | |
| <li><a href="#">Dropdown Options</a></li> | |
| <li><a href="#">Dropdown Options</a></li> | |
| <li><a href="#">Level 2</a></li> | |
| <li><a href="#">Subdropdown Option</a></li> | |
| <li><a href="#">Subdropdown Option</a></li> | |
| <li><a href="#">Subdropdown Option</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li class="divider"></li> | |
| <li><label>Section Name</label></li> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li class="divider"></li> | |
| <li><a href="#">See all →</a></li> | |
| </ul> | |
| </li> | |
| <li class="divider"></li> | |
| <li><a href="#">Main Item 2</a></li> | |
| <li class="divider"></li> | |
| <li class="has-dropdown"> | |
| <a href="#">Main Item 3</a> | |
| <ul class="dropdown"> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li><a href="#">Dropdown Option</a></li> | |
| <li class="divider"></li> | |
| <li><a href="#">See all →</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </section> | |
| </nav> | |
| <!-- End Top Bar --> | |
| <!-- Main Page Content and Sidebar --> | |
| <div class="row"> | |
| <!-- Contact Details --> | |
| <div class="large-9 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> | |
| <div class="section-container tabs" data-section> | |
| <section class="section"> | |
| <h5 class="title"><a href="#panel1">Contact Our Company</a></h5> | |
| <div class="content" data-slug="panel1"> | |
| <form> | |
| <div class="row collapse"> | |
| <div class="large-2 columns"> | |
| <label class="inline">Your Name</label> | |
| </div> | |
| <div class="large-10 columns"> | |
| <input type="text" id="yourName" placeholder="Jane Smith"> | |
| </div> | |
| </div> | |
| <div class="row collapse"> | |
| <div class="large-2 columns"> | |
| <label class="inline"> Your Email</label> | |
| </div> | |
| <div class="large-10 columns"> | |
| <input type="text" id="yourEmail" placeholder="jane@smithco.com"> | |
| </div> | |
| </div> | |
| <label>What's up?</label> | |
| <textarea rows="4"></textarea> | |
| <button type="submit" class="radius button">Submit</button> | |
| </form> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h5 class="title"><a href="#panel2">Specific Person</a></h5> | |
| <div class="content" data-slug="panel2"> | |
| <ul class="large-block-grid-5"> | |
| <li><a href="mailto:mal@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Mal Reynolds</a></li> | |
| <li><a href="mailto:zoe@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Zoe Washburne</a></li> | |
| <li><a href="mailto:jayne@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Jayne Cobb</a></li> | |
| <li><a href="mailto:doc@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Simon Tam</a></li> | |
| <li><a href="mailto:killyouwithmymind@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">River Tam</a></li> | |
| <li><a href="mailto:leafonthewind@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Hoban Washburne</a></li> | |
| <li><a href="mailto:book@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Shepherd Book</a></li> | |
| <li><a href="mailto:klee@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Kaywinnet Lee Fry</a></li> | |
| <li><a href="mailto:inara@guild.comp.all"><img src="http://placehold.it/200x200&text=[person]">Inarra Serra</a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <!-- End Contact Details --> | |
| <!-- Sidebar --> | |
| <div class="large-3 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="large-12 columns"> | |
| <hr /> | |
| <div class="row"> | |
| <div class="large-6 columns"> | |
| <p>© Copyright no one at all. Go to town.</p> | |
| </div> | |
| <div class="large-6 columns"> | |
| <ul class="inline-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">×</a> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This breaks when trying to edit locally. The modal doesn't work, nor do the contact tabs. Haven't done anything but plugged in the code between the body tags and haven't edited the foundation css.