Valentine's Day E-Card Template - HTML/GAS

Need a last minute idea for a Valentine's day card? Make something special with your coding skills!
Below is an HTML/Google Apps Script template to get you started! This template allows you to tie in IFTTT to trigger other events when your custom e-card is opened. Scroll to the bottom to see it in action!
Note that this is not a card in itself! It is just meant as a place to get started and spark som ideas :-)

Follow along with the code on Google Apps Script!

body{

    background-color: pink;

}

This first block of CSS sets the background to a color of your choice, in this case pink.

#heart{

    position: absolute;

    width: 30vw;

    left: 35vw;

}

This block sets where the #heart image is located. Feel free to play around with thees umbers to get it where you want!

#heart:hover{

    transform:scale(1.25);

}

This block makes the #heart image enlarge when the mouse hovers over it.

<img  id="heart"  src="heart.png"  onclick="love()">

This is the actual image object. It creates the #heart ID and tells the browser to run the love() function when the image is clicked on.

<script>
        function love () {
            alert("Happy V-Day!");
        }
</script> 

This block defines the love() function. Right now it only shows a shorts message as an alert.

Final Thoughts

After creating your e-card, it may be a good idea to use TinyURL or Freenom to customize the link you send.

See the template in action, early access only in the LBRY client and online on Spee.ch!

Written with love in StackEdit.

Posted using Partiko Android