Clone
---
title: Home page
published: true
---
<!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>{{ page.title }}</title>
{{ 'foundation.css' | stylesheet_tag }}
{{ 'vendor/custom.modernizr.js' | javascript_tag }}
{% inline_editor %}
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h2>Welcome to Foundation</h2>
<p>This is version 4.3.2.</p>
<hr />
</div>
</div>
{% block 'main' %}
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
<!-- Grid Example -->
<div class="row">
<div class="large-12 columns">
<div class="panel">
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
<h3>Buttons</h3>
<div class="row">
<div class="large-6 columns">
<p><a href="#" class="small button">Small Button</a></p>
<p><a href="#" class="button">Medium Button</a></p>
<p><a href="#" class="large button">Large Button</a></p>
</div>
<div class="large-6 columns">
<p><a href="#" class="small alert button">Small Alert Button</a></p>
<p><a href="#" class="success button">Medium Success Button</a></p>
<p><a href="#" class="large secondary button">Large Secondary Button</a></p>
</div>
</div>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
<p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<h4>Other Resources</h4>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<ul class="disc">
<li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
<li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
<li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
</ul>
</div>
</div>
{% endblock %}
{% include footer %}
<script>
document.write('<script src=' +
('__proto__' in {} ? '{{ 'vendor/zepto.js' | javascript_url }}' : '{{ 'vendor/jquery.js' | javascript_url }}') +
'><\/script>')
</script>
{{ 'foundation.min.js' | javascript_tag }}
<!--
{{ 'foundation/foundation.js' | javascript_tag }}
{{ 'foundation/foundation.alerts.js' | javascript_tag }}
{{ 'foundation/foundation.clearing.js' | javascript_tag }}
{{ 'foundation/foundation.cookie.js' | javascript_tag }}
{{ 'foundation/foundation.dropdown.js' | javascript_tag }}
{{ 'foundation/foundation.forms.js' | javascript_tag }}
{{ 'foundation/foundation.joyride.js' | javascript_tag }}
{{ 'foundation/foundation.magellan.js' | javascript_tag }}
{{ 'foundation/foundation.orbit.js' | javascript_tag }}
{{ 'foundation/foundation.reveal.js' | javascript_tag }}
{{ 'foundation/foundation.section.js' | javascript_tag }}
{{ 'foundation/foundation.tooltips.js' | javascript_tag }}
{{ 'foundation/foundation.topbar.js' | javascript_tag }}
{{ 'foundation/foundation.interchange.js' | javascript_tag }}
{{ 'foundation/foundation.placeholder.js' | javascript_tag }}
{{ 'foundation/foundation.abide.js' | javascript_tag }}
-->
<script>
$(document).foundation();
</script>
</body>
</html>