Happy Birthday Animation Html code
Happy Birthday Animation HTML & CSS Code
Right click on image and save.
You might like this
HTML Code
<html>
<head>
<title></title>
<style>
body
{
background-image: linear-gradient(to right top, #1f0537, #380c60, #55108c, #7413bb, #9612eb);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
.card {
position: relative;
width: 300px;
height: 425px;
border: 10px solid #9612eb;
margin: 60px auto 0 auto;
box-shadow: inset 10px 0px 15px 0px rgba(0, 0, 0, 0.1);
background-image: linear-gradient(to bottom, rgba(255, 255, 255), rgba(255, 255, 255, 0.5)), url("https://blogger.googleusercontent.com/img/a/AVvXsEgWlaxGe0qFkUkZ9S-pwz7bktj6EtIhhddk_tMdWPZj6CQHrA6AO8tZ8jaQ9PG3PEw3Zfz7qQnpHxk73Fpz6oSZq9S4evhoKcKW2pD11-DtXmUym0qeSmIYCY1BYBiaMffy5-qJZlqig4yFENV0sjd9j0Z_rcd8xuwaCdVOoqChhtwXU5J4Ldbn_T6sHjvV");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
background-color: #e6f0e6;
}
.card .text-container {
width: 80%;
height: 80%;
margin: auto;
}
.strikethrough {
text-decoration: line-through;
}
.card .text-container #head {
font-family: 'Nobile', sans-serif;
font-size: 1.5em;
margin: 60px auto 60px auto;
}
.card p {
font-size: 1.1em;
line-height: 1.4;
font-family: 'Nobile';
color: #331717;
font-style: italic;
text-align: center;
margin: 30px auto 0px auto;
}
.card .front {
position: absolute;
width: 100%;
height: 100%;
margin: -10px 0px 0px -10px;
border: 10px solid #9612eb;
backface-visibility: hidden;
background-color: #9612eb;
/* background-image: url($cover-image);
*/
background-size: contain;
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
}
.card:hover .front {
transform: perspective(800px) rotateY(-170deg);
background-color: #41718d;
}
.card:hover .back {
transform: perspective(800px) rotateY(-170deg);
box-shadow: 7px 0px 5px 0px rgba(0, 0, 0, 0.3), inset 2px 0px 15px 0px rgba(0, 0, 0, 0.1);
background-color: #d2dcd2;
}
.card .back {
position: absolute;
width: 100%;
height: 100%;
border: 10px solid #9612eb;
margin: -10px 0px 0px -10px;
backface-visibility: visible;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .5));
transform-style: preserve-3d;
transform-origin: 0% 50%;
transform: perspective(800px) rotateY(0deg);
transition: all 0.8s ease-in-out;
background-color: #e6f0e6;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.imgset
{
position: relative;
z-index: 1;
margin-bottom: -215px;
}
.imgset img
{
box-shadow: 0px 6px 11px 7px rgba(0, 0, 0, 0.22);
border-radius: 5px;
}
</style>
</head>
<body>
<div class="card">
<div class="back"></div>
<div class="front">
<div class="imgset">
<img width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTT2WnYtByLmjAqzkZr1xKP-BK1ZzC7iP6h7wLRBERsIVKVFNYJmaSg77EmkSvOEjPFaaUb7GIEsea3DvM1Ql4Bu95Rld_ZCKFtBj9sOcukKAq1mbETtLPmLN3yTjqNjanPv5TX-cSKFEM_uyGE8H87WsWtUBV9tXPc6t-vymW9ezn9Fw58KiHRN5qnGih/s1600/2713997.png">
</div>
</div>
<div class="text-container">
<p id="head">Happy Birthday!</p>
<p>I hope your special day will bring you lots of happiness, love, and fun. You deserve them a lot. Enjoy!</p>
<p>Hope your day goes great!</p>
</div>
</div>
</body>
</html>
0 Comments