diff --git a/css/demo-page.css b/css/demo-page.css index ae8c1a9..8fe8b56 100644 --- a/css/demo-page.css +++ b/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%; + } } diff --git a/index.html b/index.html index 1d117c8..73e4d72 100644 --- a/index.html +++ b/index.html @@ -201,6 +201,19 @@

Quickly and easily install Hover.css on your WordPress site or via an embed code with Eager app.

+ +
+

Like Hover.css? Try out my animation framework for sliders,
presentations, and other step-based applications

+ + + +
+ +
+
+
diff --git a/modern-slide-in.png b/modern-slide-in.png new file mode 100644 index 0000000..76fe69e Binary files /dev/null and b/modern-slide-in.png differ diff --git a/photo-stack.png b/photo-stack.png new file mode 100644 index 0000000..bdca98d Binary files /dev/null and b/photo-stack.png differ diff --git a/sequence-logo.png b/sequence-logo.png new file mode 100644 index 0000000..d2fbeb1 Binary files /dev/null and b/sequence-logo.png differ diff --git a/two-up.png b/two-up.png new file mode 100644 index 0000000..dfe589a Binary files /dev/null and b/two-up.png differ