Added Sequence.js ad

css/demo-page.css

@@ -185,7 +185,7 @@ h3 {
 
 .made-by {
   display: block;
-  margin-top: 5em;
+  margin-top: 3em;
   padding-top: 3em;
   padding-bottom: 1em;
   font-family: $fontFeature;
@@ -355,6 +355,38 @@ h3 {
   top: auto;
 }
 
+.ad {
+  margin-top: 3.5em;
+  padding: 3em 1.5em;
+  background: #f8f8f8;
+  text-align: center;
+}
+
+.ad h2 {
+  margin: 0;
+  margin-bottom: 2em;
+  line-height: 1.4;
+  font-size: 1.2em;
+}
+
+.ad a {
+  display: inline-block;
+  margin: 0 auto 2em auto;
+}
+
+.ad__preview {
+  font-size: 0;
+}
+
+.ad__preview a {
+  display: block;
+  width: 75%;
+}
+
+.ad__preview img {
+  width: 100%;
+}
+
 @media only screen and (min-width: 360px) {
   h1 {
     font-size: 4em;
@@ -382,4 +414,13 @@ h3 {
     transform: rotate(45deg);
     box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
   }
+
+  .ad__preview a {
+    display: inline-block;
+    width: 32%;
+  }
+
+  .ad__preview .second {
+    margin: 0 2%;
+  }
 }

index.html

@@ -201,6 +201,19 @@
 					<p>Quickly and easily install <a href="https://eager.io/app/AN_LdP2tOk0f">Hover.css</a> on your WordPress site or via an embed code with <a href="https://eager.io/">Eager app</a>.</p>
 				</div>
 			</div>
+
+			<div class="ad">
+				<h2>Like Hover.css? Try out my animation framework for sliders,<br /> presentations, and other step-based applications</h2>
+
+				<a class="ad__logo" href="http://www.sequencejs.com/" title="Learn more about Sequence.js">
+					<img src="sequence-logo.png" alt="Sequence.js" />
+				</a>
+
+				<div class="ad__preview">
+					<a href="http://www.sequencejs.com/" title="Learn more about Sequence.js"><img src="modern-slide-in.png" /></a> <a class="second" href="http://www.sequencejs.com/" title="Learn more about Sequence.js"><img src="photo-stack.png" /></a> <a href="http://www.sequencejs.com/" title="Learn more about Sequence.js"><img src="two-up.png" /></a>
+				</div>
+			</div>
+
 		</div>
 
 		<div class="made-by group">