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
When s/he touches the heart the message starts appearing letter by letter and keep him/her busy touching..
After touching/ clicking the heart
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/
Bro...you being nostalgic I guess😉
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Lol..ya a bit 😉
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @nilotpalbiswas! You received a personal award!
Happy Birthday! - You are on the Steem blockchain for 1 year!
Click here to view your Board
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @nilotpalbiswas! You received a personal award!
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!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit