Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--[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">
- <meta name="viewport" content="width=device-width">
- <title>Web Design Tutorial - Sample Site</title>
- <link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
- <script src="js/vendor/custom.modernizr.js"></script>
- <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
- </head>
- <body style=" margin: 20px;">
- <div class="row">
- <div class="large-3 columns">
- <h1><img src="http://placehold.it/400x100&text=Logo"/></h1>
- </div>
- <div class="large-9 columns">
- <ul class="right button-group">
- <li><a href="index.html" class="button">Home</a></li>
- <li><a href="services.html" class="button">Service</a></li>
- <li><a href="aboutus.html" class="button">About Us</a></li>
- <li><a href="faq.html" class="button">FAQ </a></li>
- <li><a href="contact.html" class="button">Contact Us</a></li>
- </ul>
- </div>
- </div>
- <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>
- <dl class="tabs" data-tab>
- <dd class="active"><a href="#panel1">Contact Our Company</a></dd>
- <dd><a href="#panel2">Specific Person</a></dd>
- </dl>
- <div class="tabs-content">
- <div class="content active" id"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="name">
- </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="email@domain-name.com">
- </div>
- </div>
- <label>What's up?</label>
- <textarea rows="4"></textarea>
- <button type="submit" class="radius button">Submit</button>
- </form>
- </div>
- <div class="content" id="panel2">
- <ul class="large-block-grid-5">
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 1</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 2</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 3</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 4</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 5</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 6</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 7</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 8</a></li>
- <li><a href="mailto:mal@domain.com"><img src="http://placehold.it/200x200&text=[person]">Person 9</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <!-- End Contact Details -->
- <footer class="row">
- <div class="large-12 columns">
- <hr/>
- <div class="row">
- <div class="large-6 columns">
- <p>© Copyright - Tourist Site.</p>
- </div>
- <div class="large-6 columns">
- <ul class="inline-list right">
- <li><a href="#">Home</a></li>
- <li><a href="#">Services</a></li>
- <li><a href="#">About Us</a></li>
- <li><a href="#">FAQ</a></li>
- <li><a href="#">Contact Us</a></li>
- </ul>
- </div>
- </div>
- </div>
- </footer>
- <script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
- <script>
- $(document).foundation();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement