Tools and News for Developers using the AllClients Platform

Sample Template (with YouTube Video)

Landing Pages

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
 <style>
 body {
 font-family: 'Oxygen', sans-serif;
 border:0; margin:0;
 background-color:#ffffff;
 }
 .bodywrap
 {
 border-top: 10px solid #c0ccdd;
 border-bottom: 10px solid #c0ccdd;
 padding: 30px 0 50px 0;
 background-color:#dbe2ec;
 }
 .title {
 font-size:42px; 
 text-align:center;
 color: #364a65;
 }
 .subtitle {
 font-size:20px; 
 text-align:center;
 color: #364a65;
 margin-bottom:40px;
 }
 .video {
 width:540px;
 margin-right:20px;
 min-height:320px;
 -webkit-box-shadow: 6px 8px 18px -6px rgba(0,0,0,0.76);
 -moz-box-shadow: 6px 8px 18px -6px rgba(0,0,0,0.76);
 box-shadow: 6px 8px 18px -6px rgba(0,0,0,0.76);
 .moreInfo{
 width:800px;
 margin: 100px auto 0px auto;
 }
 }
 .formwrapper
 {
 background-color: #364a65;
 width:360px;
 min-height: 320px;
 -webkit-box-shadow: 6px 8px 18px -6px rgba(0,0,0,0.76);
 -moz-box-shadow: 6px 8px 18px -6px rgba(0,0,0,0.76);
 box-shadow: 6px 8px 18px -6px rgba(0,0,0,0.76); 
 }
 .formTitle {
 font-size:20px; 
 text-align:center;
 color: #e5e5e5;
 margin:10px 0;
 }
 .formSubtitle {
 font-size:14px; 
 text-align:center;
 color: #b5ccec;
 margin-bottom:20px;
 }
 .formTable
 {
 margin-left:15px;
 }
 .fieldLabel
 {
 color: #FFFFFF;
 font-size: 12px;
 }
 .field
 {
 width:220px;
 padding:5px;
 font-size:14px;
 }
 .fieldComments
 {
 width:220px;
 padding:5px;
 font-size:14px;
 } 
 .fieldSelect
 {
 width:220px;
 padding:5px;
 font-size:14px;
 } 
 #birthday_month {width:80px}
 #birthday_day {width:70px}
 #birthday_year {width:70px}
 .submitButton {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #ffffff;
 width:230px;
 padding: 11px 30px;
 background: -moz-linear-gradient(
 top,
 #69b6f0 0%,
 #69b6f0);
 background: -webkit-gradient(
 linear, left top, left bottom,
 from(#69b6f0),
 to(#69b6f0));
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 border: 0px solid #69b6f0;
 -moz-box-shadow:
 0px 1px 3px rgba(000,000,000,0.5),
 inset 0px 0px 3px rgba(255,255,255,1);
 -webkit-box-shadow:
 0px 1px 3px rgba(000,000,000,0.5),
 inset 0px 0px 3px rgba(255,255,255,1);
 box-shadow:
 0px 1px 3px rgba(000,000,000,0.5),
 inset 0px 0px 3px rgba(255,255,255,1);
 text-shadow:
 0px -1px 0px rgba(000,000,000,0.1),
 0px 1px 0px rgba(255,255,255,1);
 }
 </style>
 </head>
 <body>
 <div class="bodywrap">
 <div style="width:1000px; overflow:auto; margin: 0 auto; padding-bottom:10px;">
 <div class='title'>
 <!-- type:text; label:"Title"; default:"Your title goes here"; -->
 </div>
 <div class='subtitle'>
 <!-- type:text; label:"Subtitle"; default:"Your subtitle goes here"; -->
 </div>
 <div style="float:left;" class='video'>
 <iframe width="540" height="320" src="//www.youtube.com/embed/<!-- type:text; label:"YouTube Video ID"; tip:"This is the 10-12 characters YouTube video links, like 'b8pEIDCGeuI'"; default:"b8pEIDCGeuI"; -->?rel=0" frameborder="0" allowfullscreen></iframe> 
 </div>
 <div style="float:left;" class='formwrapper'>
 <div class='formTitle'>
 <!-- type:text; label:"Form Title"; default:"Subscribe Today"; -->
 </div>
 <div class='formSubtitle'>
 <!-- type:text; label:"Form Subtitle"; default:"Get Your Free Gift"; -->
 </div>
 <!-- form --><br>
 </div>
 </div>
 </div>
 <br>
 <div class="moreInfo">
 <!-- type:editor; label:"More Info Text"; tip:"This option text goes below the video and form"; -->
 </div>
 </body>
</html>