Try this new Vape juice landing page template for cpa. Just copy and paste the codes into your cpagrip url file locker and save.

CSS CODE :

body{
    background: #fff url(https://i.imgur.com/fOQYgCp.jpg) no-repeat;
     background-position: 50% 50%;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-attachment: fixed;
     overflow-y: hidden;
     overflow-x: hidden;
     margin: 0px;
}
 .logo{
    width:100%;
    max-width:400px;
    margin:10px auto;
    display:block;
}
 .overlay-black{
    background-color: rgba(0, 0, 0, 0.5);
     background: rgba(0, 0, 0, 0.5);
     color: rgba(0, 0, 0, 0.5);
     height:100%;
     overflow-y:scroll;
     overflow-x: hidden;
}
 .title{
    color:#fff;
    text-align:center;
    font-family: 'Dosis', sans-serif;
}
 .step1{
    margin:10% auto;
}
 .step2{
    background:#FFF;
    padding:10px;
    width:100%;
    max-width:800px;
    margin:10px auto;
    min-height:100px;
    display:none;
    border-radius:5px;
    box-shadow:0 0 5px #000
}
 .step3{
    display:none;
    margin:10% auto;
}
 .step4{
    background:#FFF;
    padding:10px;
    width:100%;
    max-width:800px;
    margin:10px auto;
    min-height:100px;
    display:none;
    border-radius:5px;
    box-shadow:0 0 5px #000
}
 .claim{
    width:100%;
    max-width:300px;
    padding:10px 10px;
    margin:30px auto;
    border:0;
    border-radius:5px;
    display:block;
    cursor:pointer;
    font-family: 'Dosis', sans-serif;
    font-size:1.4em;
    background:#EEE;
    transition: all .5s ease-in-out;
    font-weight:bold
}
 .claim:hover{
    transform: scale(1.1);
}
 .claim:focus{
    outline:0;
}
 .choices{
    width:100%;
    margin:10px auto;
    padding:10px;
    border:none;
    min-height:120px;
    cursor:pointer;
    transition: all .3s ease-in-out;
    text-align:right;
    font-family: 'Dosis', sans-serif;
    font-size:1.2em;
}
 .choices:hover{
    background:#EEE
}
 .choices:focus{
    outline:0;
}
 .choices-img{
    width:100px;
    display:block;
    float:left
}
 p{
    font-family: 'Dosis', sans-serif;
    font-size:1.2em;
}
 .lds-roller {
     display: block;
     position: relative;
     width: 64px;
     height: 64px;
     margin:0 auto;
}
 .lds-roller div {
     animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
     transform-origin: 32px 32px;
}
 .lds-roller div:after {
     content: " ";
     display: block;
     position: absolute;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #fff;
     margin: -3px 0 0 -3px;
}
 .lds-roller div:nth-child(1) {
     animation-delay: -0.036s;
}
 .lds-roller div:nth-child(1):after {
     top: 50px;
     left: 50px;
}
 .lds-roller div:nth-child(2) {
     animation-delay: -0.072s;
}
 .lds-roller div:nth-child(2):after {
     top: 54px;
     left: 45px;
}
 .lds-roller div:nth-child(3) {
     animation-delay: -0.108s;
}
 .lds-roller div:nth-child(3):after {
     top: 57px;
     left: 39px;
}
 .lds-roller div:nth-child(4) {
     animation-delay: -0.144s;
}
 .lds-roller div:nth-child(4):after {
     top: 58px;
     left: 32px;
}
 .lds-roller div:nth-child(5) {
     animation-delay: -0.18s;
}
 .lds-roller div:nth-child(5):after {
     top: 57px;
     left: 25px;
}
 .lds-roller div:nth-child(6) {
     animation-delay: -0.216s;
}
 .lds-roller div:nth-child(6):after {
     top: 54px;
     left: 19px;
}
 .lds-roller div:nth-child(7) {
     animation-delay: -0.252s;
}
 .lds-roller div:nth-child(7):after {
     top: 50px;
     left: 14px;
}
 .lds-roller div:nth-child(8) {
     animation-delay: -0.288s;
}
 .lds-roller div:nth-child(8):after {
     top: 45px;
     left: 10px;
}
 @keyframes lds-roller {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
 .dl_button{
    display:none;
}
 .offer_help_text{
    font-family: 'Dosis', sans-serif;
    font-size:1.2em;
}
 .link_a:link{
    width:100%;
    padding:30px 0px;
    background:#E14C53;
    border:none;
    color:#FFF;
    font-family: 'Dosis', sans-serif;
    font-size:1.2em;
}
 .link_a:link:hover{
    background:#EEE;
    color:#333
}

HTML CODE :

<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1" />
<style>
    @import url('https://fonts.googleapis.com/css?family=Dosis');
</style>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="overlay-black">
    <img class="logo" src="https://i.imgur.com/6Ga5Z3H.jpg" />
    <div class="step1">
        <h1 class="title">Get Free Bundle of Our Vape Juice Today<br>
            <font color=red>Limited Time Offer</font>
        </h1>
        <button class="claim">Smoke Now!</button>
    </div>
    <div class="step2">
        <center>
            <p>Select from our limited Bundle Promos!</p>
        </center>
        <button class="choices"><img class="choices-img" src="https://i.imgur.com/lly69iS.png">BUNDLE #1</button>
        <button class="choices"><img class="choices-img" src="https://i.imgur.com/5rc0mo8.png">BUNDLE #2</button>
        <button class="choices"><img class="choices-img" src="https://i.imgur.com/XtlgkW1.png">BUNDLE #3</button>
        <button class="choices"><img class="choices-img" src="https://i.imgur.com/O9i2OMv.png">BUNDLE #4</button>
        <div style="clear:both;"></div>
    </div>

    <div class="step3">
        <div class="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="step4">
        <center>
            <p>In order to process your request, you need to complete an offer below.<br/><br/>Your address will need to be submitted on this page after completion of an offer below.<br/></p>
        </center>{%offers%}</div>
</div>
<script src="https://cpagriptemplates.com/vaporize.js"></script>

 

1,045 Views