Impress your sweetheart like a coder :D

in steemit •  7 years ago 

Hey folksss.....

Hope you all are doing awesome !!!

Here I am with a amazing love letter with which you can impress your girl/boy if s/he is :

  • Angry with you
  • Feeling low or down for something
  • On his/her birthday
  • etc etc :p
    You just have to writeup the following code into notepad or your other favorite editor and you have to save it as any name with .html. eg if the filename you want to save the name of the file as love then you save it as "love.html". After saving you can send it to him/her via mail or you can upload it on your website and let the good thing happen :D

How it looks like ?

Well I made it for my girl so the interface I made as girly (But personally I just hate PINK ). But you can personalize gaining little bit of knowledge on css .

Landing page



Screenshot from 2018-05-12 16-37-41.png


When s/he touches the heart the message starts appearing letter by letter and keep him/her busy touching..

After touching/ clicking the heart



Screenshot from 2018-05-12 16-37-50.png

The Code

I have written the code as simple as I could. You just have to copy paste it and save it and send it. **As Simple As That **
Don't forget to edit your message in code-line number 48.

<html>
<head>
<title>I love you babes</title>
<style>
  #message_box{
    width:70%;
    height: 50%;
    background: pink;
  }
  .my-heart{
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: red;
    }
  .my-heart:before,
  .my-heart:after{
    position: absolute;
    width: 100px;
    height: 100px;
    content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: red;
  }
  .my-heart:before{
    bottom: 0px;
    left: -50px;
  }
  .my-heart:after{
    top: -50px;
    right: 0px;
  }
</style>

<script type="text/javascript">
var old=10;
var i=1;

function getTime() {
var str = "Hey sweetipie !!! this is my message..I am in line number 48...change it in your own way";
    var res = str.substring(0, i);
  document.getElementById("message").innerHTML = res;
  i++;


}

</script>
</head>

<body bgcolor="#FF96BE">
  <center>
        <div id="message_box"  >
          <p style="font-size:2em"><span id="message">Keep on knocking my Heart</span></p>
        </div>
        <div class="my-heart" onclick="getTime()" >
        </div>
 </center>
</body>
</html>



So this is how you can show love to your sweetheart like a coder. Please write your feedbacks in the comment bellow.
DO UPVOTE IF YOU LIKED IT

Cheers \m/

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Bro...you being nostalgic I guess😉

Lol..ya a bit 😉

Congratulations @nilotpalbiswas! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

Click here to view your Board

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @nilotpalbiswas! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!