* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-family:'SansationLight', sans-serif;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
body{
background:#fff;
margin:20px;
text-align:center;
}
#outer {
background:url(../images/bg-outer.png) repeat-x center center #f9f9f9;
width:100%;
}
header,
footer {
margin:0 auto;
padding:30px 20px;
width:960px;
}
header h2 {
color:#339966;
font-weight:normal;
font-size:1.5em;
letter-spacing: -.05em;
margin:0;
text-align:left;
}
article {
margin:0 auto;
width:960px;
}
#attention{
width:100%;
}
#attention header {
background:none;
height:auto;
margin:0;
padding:10px;
text-align:center;
}
#attention header h1 {
color:#201818;
font-size:4em;
font-weight:normal;
margin:30px auto;
}
#attention header h1 em {
color:#339966;
display:block;
font-size:.55em;
line-height:.65em;
}
#interest {
background:#fff;
margin:10px auto 0;
overflow:hidden;
padding:30px;
width:960px;
}
#interest .video {
float:left;
height:352px;
width:710px;
}
#interest .social {
float:right;
width:190px;
}
#interest .social ul {
margin:0;
padding:0;
}
#interest .social ul li {
height:88px;
list-style:none;
overflow:hidden;
}
.social-widget {
margin:35px 0 0 15px;
}
#interest .social .facebook {
background:url(../images/ico-facebook.png) no-repeat 10px center #3b5a9b;
}
#interest .social .twitter {
background:url(../images/ico-twitter.png) no-repeat 10px center #00aced;
}
#interest .social .plus {
background:url(../images/ico-plus.png) no-repeat 10px center #c4452a;
}
#interest .social .pinterest {
background:url(../images/ico-pinterest.png) no-repeat 10px center #cb2027;
}
#action {
background:#396;
border:solid #1d7e4e;
border-width:0 190px 0 0;
clear:both;
padding:30px 0;
text-align: center;
}
#action form{
margin:0 auto 0 20px;
width:860px;
}
#action form input[type='text'],
#action form input[type='email'] {
border: solid #f0f8f5;
border-width:0 0 1px 0;
color:#396;
font-size:1em;
padding:10px;
width:75%;
}
#action form input[type='submit'] {
background:url(../images/ico-mail.png) no-repeat right center #1d7e4e;
border:none;
color:#fff;
cursor:pointer;
font-size:1em;
margin-left:60px;
padding:10px 56px 10px 10px;
}
footer {
color:#396;
font-size:.85em;
overflow:hidden;
}
footer nav {
float:left;
height:100%;
text-align:left;
width:48%;
}
footer nav a {
color:#396;
margin:0 10px 0 0;
padding:0;
text-decoration: none;
}
footer aside {
float:right;
}
footer aside h3{
font-size:1em;
font-weight:normal;
margin:0;
text-align:left;
}
@font-face {
font-family: 'SansationLight';
src: url('../fonts/Sansation_Light-webfont.eot');
src: url('../fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Sansation_Light-webfont.woff') format('woff'),
url('../fonts/Sansation_Light-webfont.ttf') format('truetype'),
url('../fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
font-weight: normal;
font-style: normal;
}
Framed Video Landing Page
Turn your videos into lead forms.
It only takes a few clicks. Watch the video to see how.
