Added links to users and sponsors of Papa Parse

index.html

@@ -137,15 +137,33 @@ Papa.parse(fileOrString, {
 					<div class="clear"></div>
 
 
-					<div class="grid-100 text-center pad-75">
+					<div class="grid-100 text-center pad-50">
+						<div class="showcase">
+							<div class="showcase-title">
+								People <i class="fa fa-heart" title="Love"></i> Papa
+							</div>
+							<div class="showcase-images">
+								<a href="http://smartystreets.com" title="SmartyStreets" class="showcase-image smartystreets">
+									<img src="/resources/images/smartystreets.png" title="Fast, easy address verification">
+								</a>
+								<a href="http://www.maxcdn.com/" title="MaxCDN" class="showcase-image maxcdn">
+									<img src="/resources/images/maxcdn.png" title="Supercharge your website with MaxCDN's content delivery network">
+								</a>
+								<a href="javascript:" title="MaxCDN" class="showcase-image" id="showcase-add-link">
+									<i class="fa fa-plus fa-lg"></i>
+								</a>
+							</div>
+							<div class="showcase-add">
+								Thanks to all users and sponsors! Are you using Papa Parse or want to be a sponsor? <a href="https://twitter.com/mholt6">Let me know.</a>
+							</div>
+						</div>
+
 						<a href="https://github.com/mholt/PapaParse" class="button">
 							<i class="fa fa-download"></i>&nbsp; Get Papa Parse on GitHub
 						</a>
 						<a href="/demo.html" class="button red">
 							<i class="fa fa-bolt"></i>&nbsp; Try the demo
 						</a>
-						<br><br>
-						<b><small>Are you using Papa Parse on your site?</b> <a href="https://twitter.com/mholt6">Let me know!</a> Sites/companies using Papa may get mentioned on this page.</small>
 					</div>
 					<div class="clear"></div>
 

resources/css/home.css

@@ -74,6 +74,89 @@ h3 {
 	text-align: left;
 }
 
+.showcase {
+	text-align: left;
+	margin-bottom: 40px;
+	background: #1D2933;
+	clear: both;
+}
+
+.showcase a {
+	color: #668B99;
+}
+
+.showcase-title {
+	color: #FFF;
+	font-size: 14px;
+	text-transform: uppercase;
+	padding: 10px 0;
+	background: #2C4252;
+	text-align: center;
+}
+
+.showcase .fa-heart {
+	color: #F00;
+	margin: 0 2px;
+}
+
+.showcase-image img {
+	width: 90%;
+	vertical-align: middle;
+}
+
+.showcase-image .fa-plus {
+	padding: 20px 35px;
+	border: 4px dashed #2C4252;
+}
+
+.showcase-image {
+	width: 200px;
+	height: 100px;
+	line-height: 100px;
+	text-align: center;
+	display: inline-block;
+	transition: background .4s;
+}
+
+.showcase-image:hover {
+	background: #375A77;	/* default */
+}
+
+
+
+
+
+.showcase-image.smartystreets:hover {
+	background: #FFC200;
+}
+
+.showcase-image.maxcdn:hover {
+	background: #F37121;
+}
+
+.showcase-image.maxcdn img {
+	width: auto;
+	max-height: 20px;
+}
+
+
+
+
+
+
+.showcase-add {
+	display: none;
+	color: #DDD;
+	padding: 10px 0;
+	font-size: 16px;
+	text-align: center;
+	border-top: 1px solid #337BAC;
+}
+
+
+
+
+
 @media (max-width: 900px) {
 	header,
 	.sticky-wrapper {
@@ -108,4 +191,15 @@ h3 {
 	.insignia {
 		display: none;
 	}
+
+
+
+
+	.showcase-image {
+		width: 49%;
+	}
+
+	.showcase img {
+		max-width: 200px;
+	}
 }

resources/js/home.js

@@ -34,4 +34,9 @@ $(function()
 			$next.fadeIn(500).addClass('current');
 		});
 	}, 7000);
+
+	$('#showcase-add-link').click(function()
+	{
+		$('.showcase-add').slideToggle('fast');
+	});
 });