[HTML] How to wish Birthday in unique way.

Many people wish their friends birthday, valentine in a unique style. In the same way, if you are familiar with HTML and CSS then I will show you a cool way to wish a happy birthday. Or if you're not familiar with HTML and CSS then you can just copy my script and wish your loved one in unique way. So let's start with the scratch

<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body {
font-family: 'Indie Flower', cursive !important;
background: #FDE3A7; /*CAPE HONEY*/
margin: 0px;
padding: 0px;
}

::selection {
background: transparent;
}

h4 {
font-size: 26px;
line-height: 1px;
font-family: 'Amatic SC', cursive !important;
}

.color1{color:#1BBC9B}/*MOUNTAIN MEADOW*/
.color2{color:#C0392B/*TALL POPPY*/}

.card {
color: #013243; /*SHERPA BLUE*/
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 400px;
background: #e0e1dc;
transform-style: preserve-3d;
transform: translate(-50%,-50%) perspective(2000px);
box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 20px 0 60px rgba(0,0,0,.5);
transition: 1s;
}

.card:hover {
transform: translate(-50%,-50%) perspective(2000px) rotate(15deg) scale(1.2);
box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
}

.card:before {
content:'';
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 5px;
background: #BAC1BA;
transform-origin: bottom;
transform: skewX(-45deg);
}

.card:after {
content: '';
position: absolute;
top: 0;
right: -5px;
width: 5px;
height: 100%;
background: #92A29C;
transform-origin: left;
transform: skewY(-45deg);
}

.card .imgBox {
width: 100%;
height: 100%;
position: relative;
transform-origin: left;
transition: .7s;
}

.card .bark {
position: absolute;
background: #e0e1dc;
width: 100%;
height: 100%;
opacity: 0;
transition: .7s;
}

.card .imgBox img {
min-width: 250px;
max-height: 400px;
}

.card:hover .imgBox {
transform: rotateY(-135deg);
}

.card:hover .bark {
opacity: 1;
transition: .6s;
box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;
}

.card .details {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 0 0 0 10px;
z-index: -1;
margin-top: 70px;
}

.card .details p {
font-size: 15px;
line-height: 5px;
transform: rotate(-10deg);
padding: 0 0 0 20px;
}

.card .details h4 {
text-align: center;
}

.text-right {
text-align: right;
}
<style>
<head>
<body>
 
 

Greetings from Aashish,

(HAPPY BIRTHDAY)

Dear Sandhya,

Sending you smiles

for every moment of your

special day…

Have a wonderful

time and a

very happy birthday!

Stay Blessed !!

Happy Birthday, Sandhya!

>AR

</body>
</html>

To see it in action, you just have to create a file named 'index.html'.
And copy all the given code and paste it in the file. Now Run locally in any browser or upload on Server. You can Use CodePen for live coding. Comment if you're going to use this code for someone.