[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>
<div class="card">
<div class="imgBox">
<div class="bark"></div>
<img src="https://example.com/wp-content/uploads/2012/01/clickme-1.png" style="width:300px;height:400px;">
</div>
<div class="details">
<h4 class="color1">Greetings from Aashish,</h2>
<h4 class="color2 margin">(HAPPY BIRTHDAY)</h3>
<p>Dear Sandhya,</p>
<p>Sending you smiles </p>
<p>for every moment of your</p>
<p>special day…</p>
<p>Have a wonderful</p>
<p>time and a</p>
<p>very happy birthday!</p>
<p>Stay Blessed !! </p>
<p class="text-right">Happy Birthday, Sandhya!</p>
<p class="text-right">>AR</p>
</div>
</div>
</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.

Do you like Aashish's articles? Follow on social!
Comments to: [HTML] How to wish Birthday in unique way.

Your email address will not be published. Required fields are marked *

Login

welcom
....

You can make anything by Reading and Writing.
Join Aranjra