Created
September 20, 2012 01:14
-
-
Save michaelminter/3753403 to your computer and use it in GitHub Desktop.
Splash page template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header class="main-header"> | |
<hgroup class="main-headings"> | |
<h1 class="main-heading">Fact: Better buttons increase app installs.</h1> | |
<h2 class="sub-heading">Thousands of people use Growify's appstore badges (free) and SMS app install buttons" (<a href="/pricing" class="header-link">see pricing</a>)</h2> | |
</hgroup> | |
<a href="/create-account" class="button button-blue button-large try-it-free">Get the code for your site »</a> | |
<p class="no-credit-card-required">No obligation.</p> | |
</header> | |
<section class="content"> | |
<aside class="slider"> | |
<div class="showcase-slide"> | |
<div class="showcase-content"> | |
<img class="slider-image" src="https://d2nvy5xhcrv86v.cloudfront.net/assets/marketing2012/screen-01-a45bcfeb39d0e3259906c59476be142e.png" alt="03" /> | |
</div> | |
<div class="showcase-thumbnail"> | |
<img src="https://d2nvy5xhcrv86v.cloudfront.net/assets/marketing2012/screen-01-a45bcfeb39d0e3259906c59476be142e.png" alt="01" width="140px" /> | |
</div> | |
</div> | |
<div class="showcase-slide"> | |
<div class="showcase-content"> | |
<img class="slider-image" src="https://d2nvy5xhcrv86v.cloudfront.net/assets/marketing2012/screen-02-e7ba98c85715a3dd942bb6b7bd700b79.png" alt="03" /> | |
</div> | |
<div class="showcase-thumbnail"> | |
<img class="slider-thumbnail" src="https://d2nvy5xhcrv86v.cloudfront.net/assets/marketing2012/screen-02-e7ba98c85715a3dd942bb6b7bd700b79.png" alt="01" width="140px" /> | |
</div> | |
</div> | |
</aside> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() | |
{ | |
$(".slider").awShowcase( | |
{ | |
content_width: 928, | |
content_height: 470, | |
auto: false, | |
interval: 3000, | |
continuous: true, | |
buttons:false, | |
loading: true, | |
arrows: true, | |
keybord_keys: true, | |
pauseonover: true, | |
transition: 'hslide', | |
transition_delay: 300, | |
transition_speed: 500, | |
thumbnails: true, | |
thumbnails_position: 'outside-last', | |
thumbnails_direction: 'horizontal' | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* @section reset | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video, input, textarea, button { | |
margin: 0;padding: 0;border: 0;vertical-align: baseline; | |
font: inherit;font-size: 100%;background: none; | |
} | |
input:focus,textarea:focus { | |
outline:none; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block;} | |
body {line-height: 1;} | |
ol, ul {list-style: none;} | |
blockquote, q {quotes: none;} | |
blockquote:before, blockquote:after, | |
q:before, q:after {content: '';content: none;} | |
table {border-collapse: collapse;border-spacing: 0;} | |
/*reset end*/ | |
/** | |
* @section clearfix | |
*/ | |
.clearfix:before, | |
.clearfix:after { | |
display:table; | |
content:""; | |
} | |
.clearfix:after { | |
clear:both; | |
} | |
/*clearfix end*/ | |
body { | |
font-family: Arial, sans-serif; | |
} | |
a { | |
color: #3875D7; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #2A62BC; | |
} | |
.main-header { | |
text-align: center; | |
color: #000; | |
padding: 20px 0; | |
position: relative; | |
} | |
.main-heading { | |
font-size: 36px; | |
line-height: 48px; | |
padding: 13px 0 16px; | |
color: #888a92; | |
} | |
.sub-heading { | |
font-size: 24px; | |
line-height: 36px; | |
margin: 0 0 35px; | |
} | |
.button { | |
display: inline-block; | |
padding: 10px 15px; | |
outline:none; | |
border: 1px solid transparent; | |
border-radius:3px; | |
text-align: center; | |
text-decoration: none; | |
font-weight: bold; | |
line-height: normal; | |
cursor: pointer; | |
position: relative; | |
z-index: 0; | |
} | |
.button:hover { | |
text-decoration: none; | |
color: #fff; | |
} | |
.button:focus { | |
outline: none; | |
} | |
.try-it-free { | |
position: relative; | |
overflow: hidden; | |
width: 276px; | |
} | |
.button-large { | |
border-radius: 5px; | |
font-size: 21px; | |
padding: 13px 27px; | |
} | |
.try-it-free:after { | |
display: block; | |
box-shadow:0 0 30px 0 rgba(255,255,255,.2); | |
left: 20%; | |
right: 20%; | |
top: -60%; | |
height: 100%; | |
border-radius:50%; | |
content: ''; | |
position: absolute; | |
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(229,229,229,0) 100%); /* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(229,229,229,0))); /* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(229,229,229,0) 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(229,229,229,0) 100%); /* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(229,229,229,0) 100%); /* IE10+ */ | |
background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%,rgba(229,229,229,0) 100%); /* W3C */ | |
} | |
/*@section getheapp blue button*/ | |
.button-blue { | |
border: 1px solid #0055cc; | |
border-color: #0055cc #0055cc #001156; | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
background: #0088cc; | |
background: -moz-linear-gradient(top, #0088cc 0%, #0055cc 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); | |
background: -webkit-linear-gradient(top, #0088cc 0%,#0055cc 100%); | |
background: -o-linear-gradient(top, #0088cc 0%,#0055cc 100%); | |
background: -ms-linear-gradient(top, #0088cc 0%,#0055cc 100%); | |
background: linear-gradient(to bottom, #0088cc 0%,#0055cc 100%); | |
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.05); | |
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.05); | |
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.05); | |
color: #fff; | |
text-shadow: 0 -1px 0 #00376b, 0 1px 0 #01284d; | |
} | |
.button-blue:hover { | |
background: #31a3d8; | |
background: -moz-linear-gradient(top, #31a3d8 0%, #0055cc 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#31a3d8), color-stop(100%,#0055cc)); | |
background: -webkit-linear-gradient(top, #31a3d8 0%,#0055cc 100%); | |
background: -o-linear-gradient(top, #31a3d8 0%,#0055cc 100%); | |
background: -ms-linear-gradient(top, #31a3d8 0%,#0055cc 100%); | |
background: linear-gradient(to bottom, #31a3d8 0%,#0055cc 100%); | |
} | |
.button-blue:active { | |
top: 1px; | |
outline: none; | |
border-top:1px solid #00376b; | |
background: #0055cc; | |
background: -moz-linear-gradient(top, #0055cc 0%, #31a3d8 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0055cc), color-stop(100%,#31a3d8)); | |
background: -webkit-linear-gradient(top, #0055cc 0%,#31a3d8 100%); | |
background: -o-linear-gradient(top, #0055cc 0%,#31a3d8 100%); | |
background: -ms-linear-gradient(top, #0055cc 0%,#31a3d8 100%); | |
background: linear-gradient(to bottom, #0055cc 0%,#31a3d8 100%); | |
} | |
.no-credit-card-required { | |
color: #818486; | |
font-size: 13px; | |
margin: 8px 0 0; | |
text-align: center; | |
} | |
/*getheapp blue button end*/ | |
/*@section slider*/ | |
.content { | |
padding: 25px 0 70px; | |
border-bottom: 1px solid #191A1E; | |
box-shadow: 0 -1px 0 #384c6e inset; | |
background: #3888cf; /* Old browsers */ | |
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ | |
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzODg4Y2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjEyZDNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
background: -moz-radial-gradient(center, ellipse cover, #3888cf 0%, #212d3d 100%); /* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3888cf), color-stop(100%,#212d3d)); /* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, #3888cf 0%,#212d3d 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, #3888cf 0%,#212d3d 100%); /* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, #3888cf 0%,#212d3d 100%); /* IE10+ */ | |
background: radial-gradient(ellipse at center, #3888cf 0%,#212d3d 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3888cf', endColorstr='#212d3d',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ | |
} | |
.slider { | |
margin: 0 auto; | |
width: 928px; | |
height: 470px; | |
position: relative; | |
} | |
.showcase-content { | |
width: 928px; | |
height: 470px; | |
text-align: center; | |
} | |
.showcase-arrow-previous, | |
.showcase-arrow-next { | |
height: 32px; | |
width: 50px; | |
display: block; | |
background: url(http://i.imgur.com/OlQ3d.png) 0 0 no-repeat; | |
position: absolute; | |
top: 222px; | |
cursor: pointer; | |
} | |
.showcase-slide { | |
background: #000; | |
width: 928px; | |
height: 200px; | |
} | |
.slider-image { | |
max-width: 100%; | |
} | |
.showcase-arrow-next { | |
background-position: -50px 0; | |
right: -70px; | |
} | |
.showcase-arrow-next:hover { | |
background-position: -50px -32px; | |
} | |
.showcase-arrow-next:active { | |
background-position: -50px -64px; | |
} | |
.showcase-arrow-previous { | |
left: -70px; | |
background-position: 0 0; | |
} | |
.showcase-arrow-previous:hover { | |
background-position: 0 -32px; | |
} | |
.showcase-arrow-previous:active { | |
background-position: 0 -64px; | |
} | |
.showcase-thumbnail-container { | |
margin: 5px 0; | |
padding: 0 50px; | |
} | |
.showcase-thumbnail { | |
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.6); | |
display: block; | |
height: 50px; | |
opacity: 0.85; | |
position: relative; | |
width: 75px; | |
border: 2px solid transparent; | |
border-radius: 3px 3px 3px 3px; | |
cursor: pointer; | |
} | |
.showcase-thumbnail:before { | |
bottom: 0; | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.6) inset; | |
content: ""; | |
display: block; | |
left: 0; | |
position: absolute; | |
right: 0; | |
top: 0; | |
} | |
.showcase-thumbnail-container .active { | |
border-color: #1188DD; | |
} | |
.slider-thumbnail { | |
max-width: 100%; | |
} | |
/*slider end*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment