Skip to content

Instantly share code, notes, and snippets.

@richlove1
Last active December 17, 2015 15:58
Show Gist options
  • Save richlove1/5634936 to your computer and use it in GitHub Desktop.
Save richlove1/5634936 to your computer and use it in GitHub Desktop.
Foundation Problem
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Welcome to iSpot
</title>
<title>iSpot | your place to share nature</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link href="/bundles/ispotcore/css/app.css" type="text/css" rel="stylesheet" />
<link href="/bundles/ispotcore/css/jquery-ui-1.10.0.css" type="text/css" rel="stylesheet" />
<script src="/bundles/ispotcore/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body class="" id="">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<!-- top navigation bar -->
<div class="contain-to-grid fixed">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="/app_dev.php/" id="ispot-home">
Welcome to iSpot..
</a>
</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
</ul>
<!-- Right Nav Section -->
<ul class="right">
<!-- temporary nav to help development -->
<li class="has-dropdown">
<a class="active" href="#">Dev Nav</a>
<ul class="dropdown">
<li><label>Wireframe</label></li>
<li><a href="/app_dev.php/">Landing Page</a></li>
<li><a href="/app_dev.php/logged-in-home">Logged In Home Page</a></li>
<li><a href="/app_dev.php/observation">Observation</a></li>
<li><a href="/app_dev.php/add-observation">Add an Observation</a></li>
<li><label>Test Pages</label></li>
<li><a href="/app_dev.php/">Root</a></li>
<li><a href="/"> Switch to NON-Dev</a></li>
<li><a href="/app_dev.php/">Switch to Dev</a></li>
<li><a href="/app_dev.php/angular">Angular Test App</a></li>
<li><a href="/app_dev.php/elements">Foundation Elements</a></li>
<li class="divider"></li>
<li><label>Templates</label></li>
<li><a href="/app_dev.php/font-icons-font-awesome">Fonts - Font Awesome</a>
<li><a href="/app_dev.php/font-icons-font-foundation">Fonts - Foundation</a>
<li><a href="/app_dev.php/examples">Examples</a>
<li><a href="/app_dev.php/banded">Banded</a>
<li><a href="/app_dev.php/blog">Blog</a>
<li><a href="/app_dev.php/contact">Contact</a>
<li><a href="/app_dev.php/feed">Feed</a>
<li><a href="/app_dev.php/grid">Grid</a>
<li><a href="/app_dev.php/homepage1">HomePage 1</a>
<li><a href="/app_dev.php/homepage2">HomePage 2</a>
<li><a href="/app_dev.php/marketing">Marketing</a>
<li><a href="/app_dev.php/realty">Realty</a>
<li><a href="/app_dev.php/sidebar">Sidebar</a>
<li><a href="/app_dev.php/soboxy">So-Boxy</a>
<li><a href="/app_dev.php/store">Store</a>
<li><a href="/app_dev.php/workspace">Workspace</a>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Language</a>
<ul class="dropdown">
<li><a href="#">English</a></li>
<li><a href="#">French</a></li>
<li><a href="#">Spanish</a></li>
<li><a href="#">Greek</a></li>
<li><a href="#">German</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Site</a>
<ul class="dropdown">
<li><a href="#">UK</a></li>
<li><a href="#">Southern Africa</a></li>
<li><a href="#">America</a></li>
<li><a href="#">China</a></li>
</ul>
</li>
<li class="divider show-for-medium-and-up"></li>
<li class="has-form">
<ul class="button-group radius">
<li><a href="#" id="nav-login-button" class="tiny button" data-animation="fade" data-reveal-id="loginModal">Log In</a></li>
<li><a href="#" id="nav-signup-button" class="tiny button" data-animation="fade" data-reveal-id="registerModal">Sign Up</a></li>
</ul>
</li>
<li>
<a href="#">Help</a>
</li>
</ul>
</section>
</nav> </div>
<!-- begin content -->
<div class="wrapper" id="content-wrapper">
<div class="row">
<div class="small-24 columns">
<div class="row collapse" id="header-row">
<div class="large-17 small-24 columns">
<h1>
<img id="ispot-logo" class="add-obs-photo" src="/bundles/ispotcore/images/icons/ispot_logo.png" />
<span id="strap-line">your place to share nature</span>
</h1>
</div>
<div style="margin-top: 28px">
<div class="large-5 small-18 columns offset-by-one">
<input class="radius" type="text" />
</div>
<div class="large-2 small-6 mobile-four columns">
<a class="button expand postfix radius icon"><i class="icon-search"></i> Search</a>
</div>
</div>
</div>
<div class="row">
<div class="small-16 columns" id="landing-page-main-content">
<div class="section-container tabs" data-section="tabs">
<section>
<p class="title" data-section-title><a href="#panel1">What is iSpot?</a></p>
<div class="content" data-section-content>
<p>Find out all about how iSpot can help you and you can become a valuable member of the iSpot community.</p>
<div class="flex-video">
<iframe width="420" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/Bz8hbxdyoKE"></iframe>
</div>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel2">Join iSpot</a></p>
<div class="content" data-section-content>
<p>You can <a href="#" class="tiny secondary button radius" data-animation="fade" data-reveal-id="registerModal">Sign Up</a> with iSpot or simply <a href="#" class="tiny secondary button radius" data-animation="fade" data-reveal-id="loginModal">Log In</a> using a one of the other services we support.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate consectetur lorem sit amet ultrices. Morbi sodales erat quis justo porttitor sollicitudin nec eu dolor. Etiam pretium dictum lectus, ac mollis risus luctus non. Nulla dignissim, nisi quis egestas ullamcorper, dolor velit faucibus est, adipiscing congue erat orci at lectus. Cras in dui nec felis suscipit scelerisque. Sed commodo dignissim nunc vitae laoreet. Maecenas id magna magna, eu feugiat augue. Duis a sem ultricies est cursus ultricies eget a orci. Etiam congue facilisis nisi, ac consequat sem pulvinar in. Vivamus metus mi, interdum a congue nec, euismod vitae nisl.</p>
<p>In pulvinar mauris sed massa luctus laoreet. Ut enim nisi, bibendum quis pulvinar a, scelerisque sit amet sapien. Nunc lobortis consequat metus vitae eleifend. In lobortis, leo vitae viverra commodo, velit lacus commodo lorem, non elementum ipsum lacus sit amet felis. Aliquam at risus massa. Ut porttitor augue eros, a aliquet nisi. Sed enim mi, congue vel dignissim id, tristique in purus.</p>
<p>Vestibulum condimentum scelerisque ullamcorper. Sed ante justo, tempor sit amet suscipit in, volutpat nec libero. Phasellus interdum porttitor dictum. Donec eget pulvinar velit. Curabitur facilisis ante vel tellus facilisis at condimentum metus fringilla. Ut in auctor elit. Aenean augue magna, interdum mattis accumsan eget, consectetur a dolor. Pellentesque nulla est, scelerisque a lobortis et, facilisis viverra lorem.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel2">Browse iSpot</a></p>
<div class="content" data-section-content>
<p>Why not take a look at some of the content that others have already added to iSpot.</p>
<!-- <img src="/bundles/ispotcore/images/sample/map-mockup.png"> -->
<iframe width="670" height="340" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;aq=1&amp;t=m&amp;ie=UTF8&amp;hnear=MK7+6AA,+United+Kingdom&amp;ll=52.014472,-0.734711&amp;spn=0.147912,0.291824&amp;z=11&amp;output=embed"></iframe>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end content -->
<!-- footer -->
<!--<hr>-->
<div class="wrapper footer">
<footer class="row">
<section class="small-9 columns">
<div class="small-6 columns">
<img id="ou-logo" src="/bundles/ispotcore/images/icons/ou_logo.png" />
</div>
<div class="small-18 columns">
<h6><strong>Made by The open University</strong></h6>
<p>iSpot is made by <a href="http://www.open.ac.uk/">The Open University</a>. Home of the Biodiversity Observatory.</p>
</div>
</section>
<section class="small-6 columns">
<h6><strong>Our Partners</strong></h6>
<img id="opal-logo" src="/bundles/ispotcore/images/icons/opal_logo.png" />
<p>In partnership with <a href="http://www.opalexplorenature.org/">The Open Air Laboratories →</a></p>
</section>
<section class="small-7 columns">
<h6><strong> Apps</strong></h6>
<p><i class="icon-mobile-phone"></i> We currently have an <a href="https://play.google.com/store/apps/details?id=uk.ac.open.ispot">Android app</a> available. An iOS app is in development.</p>
</section>
<section class="small-2 columns">
<h6><strong>Social</strong></h6>
<ul class="inline-list">
<li>
<a target="_blank" id="twitter-link" href="http://www.twitter.com/ispot_uk"><i class="icon-twitter"></i></a>
</li>
<!--<li>
<a target="_blank" href="http://www.twitter.com/ispot_uk"><i class="icon-facebook"></i></a>
</li>
-->
</ul>
</section>
</footer>
</div>
<div id="copyright">
<div class="row">
<div class="small-8 columns">
<p>&copy; 2013 The Open University</p>
</div>
<div class="small-16 columns">
<ul class="inline-list right">
<li><a href="#">Learn about The Open University</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#" id="scrlTop">Top <i class="icon-double-angle-up"></i></a></li>
</ul>
</div>
</div>
</div>
<!--- include any modal windows -->
<!-- TODO add code to only add the login register if not logged in -->
<!--- login / register modal start -->
<div id="loginModal" class="reveal-modal large">
<!-- modal title -->
<h3>Log In</h3>
<div class="row">
<!-- standard login -->
<div class="twelve columns">
<div class="panel">
<h5>Log in with an iSpot Account</h5>
<form class="custom">
<label>Username:</label>
<input type="text" class="twentyfour" />
<label>Password:</label>
<input type="password" class="twentyfour" />
<a href="#">Forgotten Password?</a><br><br>
<input type="submit" class="radius small button" value="Log In" />
</form>
</div>
New User?.....
<a href="#" class="tiny secondary button radius" data-animation="fade" data-reveal-id="registerModal">Sign Up</a>
</div>
<!-- social login -->
<div class="twelve columns" id="social-login">
<div class="panel">
<div class="row">
<div class="nineteen columns" id="social-login">
<h5>Log in using...</h5>
</div>
<div class="five columns" id="social-login">
<span class="has-tip" data-width="210" title="You don't have to manually create a new account. Choose one of the third party options above to make things easier."> <img class="help-icon" src="/bundles/ispotcore/images/icons/qm4.png" /></span>
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="social-login-icon" src="/bundles/ispotcore/images/social/google.png" />
<img class="social-login-icon" src="/bundles/ispotcore/images/social/facebook.png" />
</div>
<div class="twelve columns">
<img class="social-login-icon" src="/bundles/ispotcore/images/social/twitter.png" />
<img class="social-login-icon" src="/bundles/ispotcore/images/social/yahoo.png" />
</div>
</div>
</div>
<!-- ou login -->
<div class="panel">
<div class="row">
<div class="nineteen columns" id="social-login">
<h5>Open University Users</h5>
</div>
<div class="five columns" id="social-login">
<span class="has-tip" data-width="210" title="Use your Open University OUCU to create an account on iSpot."><img class="help-icon" src="/bundles/ispotcore/images/icons/qm4.png" /></span>
</div>
</div>
<div class="row">
<div class="eight columns">
<img class="social-login-icon" src="/bundles/ispotcore/images/icons/ou_logo_plain.png" />
</div>
<div class="sixteen columns">
<form id="ou-signup">
<label>OUCU:</label>
<input type="text" class="twentyfour" />
<input type="submit" class="radius button small" value="Log In" />
</form>
</div>
</div>
</div>
</div><!--<div class="twelve columns" id="social-login">-->
</div><!--<div class="row">-->
<!-- creates close icon in top right corner of modal -->
<a class="close-reveal-modal">&#215;</a>
</div><!--<div id="loginModal" class="reveal-modal large">--><div id="registerModal" class="reveal-modal large">
<!-- modal title -->
<h3>Sign Up</h3>
<div class="row">
<div class="twelve columns">
<!-- standard login -->
<div class="panel">
<h5>Sign up for an iSpot Account</h5>
<form class="custom">
<label>Username:</label>
<input type="text" class="twentyfour" />
<label>Email:</label>
<input type="email" class="twentyfour" />
<label>Password:</label>
<input type="password" class="twentyfour" />
<label>Confirm Password:</label>
<input type="password" class="twentyfour" />
<label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> I accept the <span class="has-tip" data-width="210" title="T and Cs">Terms and Conditions</span>.</label><br><br>
<input type="submit" class="radius small button" value="Sign Up" />
</form>
</div>
Already registered?....
<a href="#" class="tiny button secondary radius" data-animation="fade" data-reveal-id="loginModal">Log In</a><br>
</div>
<div class="twelve columns" id="social-login">
<!-- social login -->
<div class="panel">
<div class="row">
<div class="nineteen columns" id="social-login">
<h5>Sign up using...</h5>
</div>
<div class="five columns" id="social-login">
<span class="has-tip" data-width="210" title="You don't have to manually create a new account. Choose one of the third party options above to make things easier."> <img class="help-icon" src="/bundles/ispotcore/images/icons/qm4.png" /></span>
</div>
</div>
<div class="row">
<div class="twelve columns">
<img class="social-login-icon" src="/bundles/ispotcore/images/social/google.png" />
<img class="social-login-icon" src="/bundles/ispotcore/images/social/facebook.png" />
</div>
<div class="twelve columns">
<img class="social-login-icon" src="/bundles/ispotcore/images/social/twitter.png" />
<img class="social-login-icon" src="/bundles/ispotcore/images/social/yahoo.png" />
</div>
</div>
</div>
<!-- ou login -->
<div class="panel">
<div class="row">
<div class="nineteen columns" id="social-login">
<h5>Open University Users</h5>
</div>
<div class="five columns" id="social-login">
<span class="has-tip" data-width="210" title="You don't have to manually create a new account. Choose one of the third party options above to make things easier."> <img class="help-icon" src="/bundles/ispotcore/images/icons/qm4.png" /></span>
</div>
</div>
<div class="row">
<div class="eight columns">
<img class="social-login-icon" src="/bundles/ispotcore/images/icons/ou_logo_plain.png" />
</div>
<div class="sixteen columns">
<form id="ou-signup">
<label>OUCU:</label>
<input type="text" class="twentyfour" />
<input type="submit" class="radius small button" value="Sign Up" />
</form>
</div>
</div>
</div>
</div>
</div><!--<div class="row">-->
<!-- creates close icon in top right corner of modal -->
<a class="close-reveal-modal">&#215;</a>
</div><!--<div id="registerModal" class="reveal-modal large">-->
<!-- TODO add code to add registered modals for this request -->
<div id="customFilterModal" class="reveal-modal large">
<!-- modal title -->
<h3>Custom Filter</h3>
<dl class="tabs contained">
<dd class="active"><a href="#choose">Choose Saved</a></dd>
<dd><a href="#create">Create New</a></dd>
</dl>
<ul class="tabs-content contained">
<li class="active" id="chooseTab">This is simple tab 1s content. Pretty neat, huh?</li>
<li id="createTab">
<ul class="accordion">
<li class="active">
<div class="title">
<h5>Accordion Panel 1</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title">
<h5>Accordion Panel 2</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
<li>
<div class="title">
<h5>Accordion Panel 3</h5>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</li>
</ul>
</li>
</ul>
<!-- creates close icon in top right corner of modal -->
<a class="close-reveal-modal">&#215;</a>
</div>
<!--- JavaScript -->
<!-- begin javascript -->
<!-- jQuery / Zepto -->
<script>
document.write('<script src=' +
('__proto__' in {} ? '/bundles/ispotcore/js/vendor/zepto' : '/bundles/ispotcore/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="/bundles/ispotcore/js/vendor/jquery-ui-1.10.0.js" type="text/javascript"></script>
<!-- Foundation JS files -->
<script src="/bundles/ispotcore/js/foundation/foundation.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.alerts.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.clearing.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.cookie.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.dropdown.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.forms.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.joyride.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.magellan.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.orbit.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.placeholder.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.reveal.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.section.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.tooltips.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/foundation/foundation.topbar.js" type="text/javascript"></script>
<!-- Initialise Foundation -->
<script>
$(document).foundation();
</script>
<!-- Misc JS files -->
<script src="/bundles/ispotcore/js/plugins.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/main.js" type="text/javascript"></script>
<script src="/bundles/ispotcore/js/vendor/tagmanager.js" type="text/javascript"></script>
<!-- end javascript -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment