Skip to content

Instantly share code, notes, and snippets.

@JamesChevalier

JamesChevalier/index.html

Created January 9, 2012 17:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JamesChevalier/1584083 to your computer and use it in GitHub Desktop.
Save JamesChevalier/1584083 to your computer and use it in GitHub Desktop.
Download ZIP
Zurb's Foundation (v2.1.4), with transparent divs & ToTop JS
Raw
index.html
<!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 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</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" type="text/css" media="screen,projection" href="stylesheets/ui.totop.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- JC Added - IE Fix for Transparencies -->
<!--[if IE]>
<style type="text/css">
#container
{
background:transparent;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
zoom: 1;
}
</style>
<![endif]-->
<!-- JC Added - Override some of Foundation -->
<style type="text/css">
html, body
{
background: #fff url(http://jameschevalier.us/resources/images/bg.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
div.panel
{
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
background: rgb(255,255,255); /* Fallback */
background: rgba(255,255,255,.9); /* Transparent */
}
</style>
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<div class="twelve columns">
</div>
</div>
<div class="row">
<div class="three columns">
<div class="panel">
<img src="http://www.gravatar.com/avatar/something?d=http://robohash.org/name.png?size=80x80&set=set3">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<dl class="nice mobile vertical tabs">
<dd><a href="#simple1">Home</a></dd>
<dd><a href="#simpl2" class="active">Blog</a></dd>
<dd><a href="#simple2">Contact</a></dd>
<dd><a href="#simple3">Twitter</a></dd>
</dl>
</div>
</div>
<div class="nine columns">
<div class="panel">
<h1>Thoughtful Post</h1>
<ul class="vertical tabs-content">
<li class="active" id="simple1Tab">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.</li>
<li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
</ul>
</div>
<div class="panel">
<h3>Some Random Image</h3>
<p><img src="http://7alan.com/wp-content/uploads/2011/11/48cd1_1240203089121_funniest_pictures_ever-s580x464-17964-580.jpg"></p>
</div>
<div class="row">
<div class="six columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="six columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="four columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="four columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="four columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
<div class="panel">
<h3>Buttons</h3>
<p><a href="#" class="nice radius small blue button">Nice Blue Button</a></p>
<p><a href="#" class="nice radius blue button">Nice Blue Button</a></p>
<p><a href="#" class="nice radius large blue button">Nice Blue Button</a></p>
</div>
<div class="panel">
<h3>Tables</h3>
<p>They're sortable.</p>
<table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- container -->
<!-- Included JS Files -->
<script src="javascripts/foundation.js"></script>
<script src="javascripts/app.js"></script>
<!-- Tablesorter -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.tablesorter.min.js"></script>
<script type="text/javascript" id="js">$(document).ready(function() {
$("table").tablesorter({
sortList: [[1,0]]
});
}); </script>
<!-- JC Added - ToTop Button -->
<script src="javascripts/easing.js" type="text/javascript"></script>
<script src="javascripts/jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment