Skip to content

Instantly share code, notes, and snippets.

@moskowite
Created March 28, 2012 22:30
Show Gist options
  • Save moskowite/2231113 to your computer and use it in GitHub Desktop.
Save moskowite/2231113 to your computer and use it in GitHub Desktop.
faire
<!DOCTYPE html>
<html lang="en">
<head>
<meta>
<title>Maker Faire - The Worlds Largest DIY Festival</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body { padding-top:50px; }
</style><!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-114x114.png">
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-alerts.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script>
$('.alert-message').alert();
$('.tabs, .pills').dropdown();
$('.tabs, .pills').tabs();
</script>
</head>
<body>
<div class="topbar" >
<div class="topbar-inner">
<div class="container">
<ul class="nav">
<li><a class="red" href="http://makezine.com">MAKE</a></li>
<li id="menu-item-119103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-119103"><a href="http://makezine.com">Magazine</a></li>
<li id="menu-item-119104" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-119104"><a href="http://blog.makezine.com">Blog</a></li>
<li id="menu-item-119105" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-119105"><a href="http://makerfaire.com">Maker Faire</a></li>
<li id="menu-item-119106" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-119106"><a href="http://makeprojects.com">Make: Projects</a></li>
<li id="menu-item-119107" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-119107"><a href="http://makershed.com">Maker Shed</a></li>
<li id="menu-item-119108" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-119108"><a href="http://craftzine.com">CRAFT</a></li>
</ul>
<ul class="nav secondary-nav">
<li class="pull-right">
<form action="http://www.google.com/cse" id="searchbox_008032414425079535247:kplxrakvu20">
<input type="hidden" name="cx" value="008032414425079535247:kplxrakvu20" />
<input type="text" name="q" class="span3" style="height:14px;background-image:none;" />
<input type="submit" name="sa" class="btn primary" value="Search MAKE" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_008032414425079535247%3Akplxrakvu20&lang=en"></script></li>
</ul>
</div>
</div>
</div>
<div class="container content">
<header class="row">
<div class="logo">
<img src="http://cdn.makezine.com/make/makerfaire/mainpage/mfheader477x109.gif" class="span7">
</div>
<ul class="span9 tabs navi">
<li class="active"><a href="#">Home</a></li>
<li><a href="#footer">About</a></li>
<li><a href="http://news.makerfaire.com">Blog</a></li>
<li><a href="#">Social</a></li>
<li><a href="#">Attend</a></li>
<li><a href="#">Press</a></li>
<li class="dropdown" data-dropdown="dropdown">
<a href="#" class="dropdown-toggle">Faires</a>
<ul class="dropdown-menu">
<li><a href="#">Bay Area</a></li>
<li><a href="#">Detroit</a></li>
<li><a href="#">New York</a></li>
<li class="divider"></li>
<li><a href="#">Mini Maker Faires</a></li>
</ul>
</li>
</ul>
</header>
<div class="clear"></div>
<div class="third_projects">
<div class="top_slide">
<div id="three_three" class="slide">
<div class="wider">
<a href="http://makerfaire.com/bayarea/2011/makerinfo/">
<img src="http://cdn.makezine.com/make/makerfaire/images/triptych_ms_011.jpg" alt="Faires" />
</a>
<a href="http://makerfaire.com/detroit/2011/makerinfo">
<img src="http://cdn.makezine.com/make/makerfaire/images/triptych_ms_032.jpg" alt="Faires" />
</a>
<a href="http://makerfaire.com/newyork/2011/callformakers">
<img src="http://cdn.makezine.com/make/makerfaire/images/triptych_ms_051.jpg" alt="Faires" />
</a>
</div>
</div>
<div id="three_two" class="slide">
<iframe width="940" height="290" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=215355169387785573651.0004b1138b47525378f16&amp;t=w&amp;vpsrc=1&amp;ll=6.836882,141.3165&amp;spn=96.281916,295.147694&amp;output=embed"></iframe>
</div>
<div id="three_one" class="slide hero-unit">
<h1>Maker Faires around the world</h1>
</div>
<div id="three_four" class="slide">
<div class="thumber">
<img src="images/arduino_uno.jpg" alt="2WD Arduino Compatible Mobile Platform" />
</div>
<div class="proj_description">
<h3 class="project_title">Arduino Uno</h3>
<p class="meta">Time Required: <span class="bold_me">4 Hours</span> Difficulty: <span class="bold_me">Moderate</span></p>
<p>So you want to get mobile with your Arduino or other micro controller, and you aren't sure where to start? This affordable 2WD robotic platform is a great start! The kit includes geared motors, wheels, and a high-strength aluminum alloy body. Just add an Arduino, or other microcontroller, motorshield, and power supply and you ready to get going! <strong>For more details go to <a href="#">Maker Shed</a></strong></p>
<p class="links"><img src="images/facebook.jpg" alt="facebook" /><img src="images/twitter.jpg" alt="twitter" /><img src="images/get_the_kit.jpg" alt="Get the kit" /></p>
</div>
<div class="clear"></div>
</div>
<div id="three_five" class="slide">
<div class="thumber">
<img src="images/mintronics.jpg" alt="2WD Arduino Compatible Mobile Platform" />
</div>
<div class="proj_description">
<h3 class="project_title">Build a Mintronics: MintDuino</h3>
<p class="meta">Time Required: <span class="bold_me">4 Hours</span> Difficulty: <span class="bold_me">Moderate</span></p>
<p>So you want to get mobile with your Arduino or other micro controller, and you aren't sure where to start? This affordable 2WD robotic platform is a great start! The kit includes geared motors, wheels, and a high-strength aluminum alloy body. Just add an Arduino, or other microcontroller, motorshield, and power supply and you ready to get going! <strong>For more details go to <a href="#">Maker Shed</a></strong></p>
<p class="links"><img src="images/facebook.jpg" alt="facebook" /><img src="images/twitter.jpg" alt="twitter" /><img src="images/get_the_kit.jpg" alt="Get the kit" /></p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="links">
<span id="3_1" class="link active"></span>
<span id="3_2" class="link"></span>
<span id="3_3" class="link"></span>
<span id="3_4" class="link"></span>
<span id="3_5" class="link"></span>
</div>
<div class="row">
<div class="span-two-thirds">
<div class="alert-message block-message info">
<a class="close" href="#">×</a>
<p>Maker Faire is the World's Largest DIY Festival and the premier event for grassroots American innovation. It's a two-day, family-friendly showcase of invention, creativity and resourcefulness, and a celebration of the Maker mindset.</p>
<!--<p>Want to learn more? Check out photos, videos and more on our <a href="#social">social page</a>.</p>-->
</div>
<div class="twitter">
<pre>
<?php
$request_url = 'https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=whyisjake&count=1';
$xml = json_decode($request_url) or die('feed not loading');
//print_r($xml);
?>
</pre>
</div>
<div class="post">
<div class="thumb">
<img alt="" src="http://placehold.it/150x150" class="pull-left">
</div>
<div class="entry" class="pull-right">
<h2>Blog Post Title</h2>
<p>Yo shizzlin dizzle dolizzle sit amet, sure adipiscing bow wow wow. Nullizzle crackalackin yo, aliquet volutpizzle, suscipizzle quis, gravida vizzle, black. Pellentesque funky fresh tortizzle. Sed erizzle. Dizzle izzle dolizzle dapibus fo shizzle break yo neck, yall away. Mauris pellentesque nibh dizzle things. in yippiyo. Pizzle away shiz nisi. In hac habitasse gangsta rizzle. Break yo neck, yall dapibizzle. Yo owned dawg, pretium fo shizzle, sheezy ac, eleifend vitae, nunc.</p>
</div>
<div class="clear"></div>
<h3>News</h3>
<ul>
<li><a href="http://daily.makerfaire.com/makers-are-loading-in">Makers Are Loading In...</a></li>
<li><a href="http://daily.makerfaire.com/the-close-of-world-maker-faire-2011-braindrop">The Close of World Maker Faire 2011</a></li>
<li><a href="http://daily.makerfaire.com/steel-this-band">Steel this Band</a></li>
</ul>
<p><a class="label" href="http://news.makerfaire.com">More News &rarr;</a></p>
</div>
</div>
<div class="span-one-third">
<img src="images/maker.png" alt="Be a Maker" />
<img src="images/faire.png" alt="Make a Faire" />
<img src="images/join.png" alt="Join the List" />
<img src="images/make.png" alt="Get MAKE" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmakerfaire&amp;width=300&amp;height=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23172E50&amp;stream=true&amp;header=true&amp;appId=216859768380573" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:400px;" allowTransparency="true"></iframe>
</div>
</div>
<footer>
<ul class="pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Attend</a></li>
<li><a href="http://makezine.com">MAKE Magazine</a></li>
<li><a href="http://makeprojects.com">Make:Projects</a></li>
<li><a href="http://craftzine.com">CRAFT</a></li>
<li><a href="http://makershed.com">Maker Shed</a></li>
<li><a href="#">&copy; 2011 O'Reilly Media</a></li>
</ul>
</footer>
</div><!-- /container -->
<script>
var getInt = setInterval('js_spinner()', 4000);
$('.third_projects').mouseenter(
function(){
stopScrolling();
}
).mouseleave(
function(){
startScrolling();
}
);
function js_spinner(){
if(typeof js_spinner_bottom === 'undefined'){
js_spinner_bottom = 0;
}
js_spinner_bottom += 300;
if(js_spinner_bottom > 1200){
js_spinner_bottom = 0;
}
$('div.top_slide').animate({ bottom: js_spinner_bottom+'px'}, 500, 'swing');
}
function startScrolling(){
getInt = setInterval('js_spinner()', 4000);
}
function stopScrolling(){
clearInterval(getInt);
}
</script>
</body>
</html>s_spinner(){
if(typeof js_spinner_bottom === 'undefined'){
js_spinner_bottom = 0;
}
js_spinner_bottom += 300;
if(js_spinner_bottom > 1200){
js_spinner_bottom = 0;
}
$('div.top_slide').animate({ bottom: js_spinner_bottom+'px'}, 500, 'swing');
}
function startScrolling(){
getInt = setInterval('js_spinner()', 4000);
}
function stopScrolling(){
clearInterval(getInt);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment