Jump to content
  • I want to make plans with you

       (0 reviews)

    Hover effect plotter template.


    Actual Template Not Responsive


    TITLE HERE

    ........................

    TEXT HERE

    ......................


    QUOTE HERE

    Template code

    <link href='http://fonts.googleapis.com/css?family=Clicker+Script' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
    <style type="text/css">
    
    .leapimage {
    opacity: 0;
    width: 600px;
    height: 550px;
    border-radius: 40px 0px 40px 0px; 
    -webkit-border-radius: 40px 0px 40px 0px; 
    -moz-border-radius:  40px 0px 40px 0px; 
    -o-border-radius:  40px 0px 40px 0px;
    -webkit-transition: opacity .7s linear;
    -moz-transition: opacity .7s linear;
    -o-transition: opacity .7s linear;  
    z-index: 1;  }
    
    .leapimage:hover {
    opacity: 0.9; }
    
    
    
    
    .leapgif {
    background-image: url("150X300 GIF/PIC HERE");
    height: 150px;
    width: 300px;
    border-radius: 40px 0px 40px 0px; 
    -webkit-border-radius: 40px 0px 40px 0px; 
    -moz-border-radius:  40px 0px 40px 0px; 
    -o-border-radius:  40px 0px 40px 0px; 
    margin: auto;
    }
    
    .leaptitle {
    font-family: 'Clicker Script', cursive;
    font-size: 35px;
    text-transform: lowercase;
    color: #242f36;
    text-shadow: 1px 1px 1px #fff;
    margin: auto;
    }
    
    .leapbody {
    height: 270px;
    width: 300px;
    border-radius: 40px 0px 40px 0px; 
    -webkit-border-radius: 40px 0px 40px 0px; 
    -moz-border-radius:  40px 0px 40px 0px; 
    -o-border-radius:  40px 0px 40px 0px; 
    font-family: 'PT Serif', serif;
    font-size: 11px;
    overflow: auto;
    margin: auto;
    opacity: 0.9;
    background-color: #c2c2c2;
    opacity: 0.9;
    color: #000;
    
    }
    
    .leapquote {
    background-color: #000;
    height: 13px;
    width: 600px;
    font-family: 'PT Serif', serif;
    text-transform: uppercase;
    color: #fff;
    margin: auto;
    opacity: 0.9;
    }
    
    </style>
    
    <center>
    <div style="width: 600px; height: 550px; background-image: url(http://i.imgur.com/LWjxk89.png);">
    	<div class="leapimage">
    		<br>
    		<div class="leapgif"></div>
    		<div class="leaptitle"> TITLE HERE</div>
    		<br>
    		<div class="leapbody">
    			<p></p>........................<p></p>
    			TEXT HERE
    		</div> 
    		<p></p>......................<p></p>
    		<br>
    		<div class="leapquote"> QUOTE HERE</div>
    	</div>
    	<div style="background-color:#fff; width:90px; height: 10px; opacity:0.9; border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px; -o-border-radius: 20px 20px 20px 20px; margin-top: 12px; opacity: 0.6; "><a href=https://rpginitiative.com/user/471-caraphernelia/>♥Caraphernelia</a></div>
      </div>
    </center>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.