Impress your sweetheart like a coder :D

nilotpalbiswas (26)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/

#coding #programming #blog #new