Adding a basic temporary front-end for api examples

hackathon_starter/hackathon/templates/hackathon/api_examples.html

@@ -4,22 +4,23 @@
 
 
 	<div class="row text-center">
-	    <div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/githubUser/">Github Example</a></div>
-	    <div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/steam/">Steam Example</a></div>
-	    <div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/tumblr/">Tumblr Example</a></div>
-		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/linkedin/">LinkedIn Example</a></div>
-		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/twilio/">Twilio Example</a></div>
-		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/instagram/">Instagram Example</a></div>
-		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/instagramMediaByLocation/">Instagram Media by Location Example</a></div>
-		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/twitter/">Twitter Example</a></div>
-		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/twitterTweets/">Twitter Tweet Example</a></div>
-		<div class="col-sm-4"><a href="http://localhost:8000/hackathon/quandlstocks/">Quandl Example</a></div>
-		<div class="col-sm-4"><a href="http://localhost:8000/hackathon/meetupUser/">Meetup</a></div>
-		<div class="col-sm-4"><a href="http://localhost:8000/hackathon/yelp/">Yelp</a></div>
-		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/nytimesarticles/">New York Times</a></div>
-        <div class="col-sm-4"><a href="http://localhost:8000/hackathon/facebook/">Facebook Get User Info Exmaple</a></div>
-        <div class="col-sm-4"><a href="http://localhost:8000/hackathon/google/">Google Get User Info Exmaple</a></div>
-        <div class="col-sm-4"><a href="http://localhost:8000/hackathon/dropbox/">Dropbox API</a></div>
+	    <div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/githubUser/" style="color: #fff"><div style="background-color: #000" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/2AaBlpf.png" height="40"> GitHub Example</div></div></a></div>
+	    <div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/steam/" style="color: #fff"><div style="background-color: #000" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/1xGmKBX.jpg" height="40"> Steam Example</div></div></a></div>
+	    <div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/tumblr/" style="color: #fff"><div style="background-color: #304e6c" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/rZGQShS.png" height="40"> Tumblr Example</div></div></a></div>
+		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/linkedin/" style="color: #fff"><div style="background-color: #007bb6" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/sYmVWAw.png"  height="40"> LinkedIn Example</div></div></a></div>
+		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/twilio/" style="color: #fff"><div style="background-color: #fd0404" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/mEUd6zM.png" height="40"> Twilio Example</div></div></a></div>
+		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/instagram/" style="color: #fff"><div style="background-color: #947563" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/aRc6LUJ.png" height="40"> Instagram Example</div></div></a></div>
+		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/instagramMediaByLocation/" style="color: #fff"><div style="background-color: #947563" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/aRc6LUJ.png" height="40"> Instagram Media by location</div></div></a></div>
+		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/twitterTweets/" style="color: #fff"><div style="background-color: #00abf0" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/EYA2FO1.png" height="40"> Twitter Example</div></div></a></div>
+		<div class="col-sm-4"><a href="http://localhost:8000/hackathon/quandlstocks/" style="color: #000"><div style="background-color: #f5f5f5" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/Trgca6o.png" height="40"> Quandl Example</div></div></a></div>
+		<div class="col-sm-4"><a href="http://localhost:8000/hackathon/meetup/" style="color: #000"><div style="background-color: #f5f5f5" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/Vded0sR.png" height="40"> Meet Up </div></div></a></div>
+		<div class="col-sm-4"><a href="http://localhost:8000/hackathon/yelp/" style="color: #000"><div style="background-color: #f5f5f5" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/pCmuBIY.png" height="40"> Yelp </div></div></a></div>
+		<div class="col-sm-4"><a href="http://127.0.0.1:8000/hackathon/nytimesarticles/" style="color: #fff"><div style="background-color: #454442" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/e3sjmYj.png" height="40"> New York Times</div></div></a></div>
+        <div class="col-sm-4"><a href="http://localhost:8000/hackathon/facebook/" style="color: #fff"><div style="background-color: #3b5998" class="panel panel-default"><div class="panel-body"><img src="http://i.imgur.com/jiztYCH.png" height="40"> Facebook Example</div></div></a></div>
+        
+        <div class="col-sm-4"><a href="http://localhost:8000/hackathon/google/" style="color: #fff"><div style="background-color: #d95234" class="panel panel-default"><div class="panel-body"><img src="http://upcity.com/blog/wp-content/uploads/2013/11/Google-Plus-Logo-650x318.png" height="40">Google User Info Example</div></div></a></div>
+        
+        <div class="col-sm-4"><a href="http://localhost:8000/hackathon/dropbox/" style="color: #fff"><div style="background-color: #0d56a0" class="panel panel-default"><div class="panel-body"><img src="https://lh6.ggpht.com/fR_IJDfD1becp10IEaG2ly07WO4WW0LdZGUaNSrscqpgr9PI53D3Cp0yd2dXOgyux8w=w300" height="40">Dropbox API</div></div></a></div>
 
   	</div>