index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>OSSCafe's Photo Feed</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/photo.css" />
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Abril+Fatface" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
	<script src="js/main.js"></script>
</head>

<body>	
	<header>
		<div class="center">
			<h1>下北沢オープンソースCafe</h1>
			<nav>
				<a href="#">Home</a>
				<a href="#">About</a>
				<a href="#">Portfolio</a>
				<a href="#">Blog</a>
				<a href="#">Contact</a>
			</nav>
		</div>
	</header>
	
	<section id="main-content">
		<div class="center">
			<h1>Our Photo Feed</h1>
			<p>各種サービスから、APIを使って写真のデータを取り出すことができます。</p>
			<h2>Instagram</h2>
			<p>Instagramでは、ユーザがアップロードした写真の検索APIが提供されています。特定の場所や、ハッシュタグ付きで撮影された写真を抜き出して来ることが可能です。</p>
			<div id="instagram-photos"></div>
		</div>
	</section>
	
	<footer>
		<div class="center">
			<p><a class="made-in-osscafe" href="http://www.osscafe.net/">Made in OSSCafe</a></p>
			<p>&copy; 2012 - CogniTom Academic Design</p>
		</div>
	</footer>
	
	<a href="http://github.com/osscafe/photofeed"><img class="github-ribon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
</body>

</html>