HTML
<div class="container">
<div class="cat">
<div class="body">
<div class="face">
<span class="eyes left"></span>
<span class="eyes right"></span>
<span class="mouth"></span>
</div>
<div class="inside">
<div class="heart-tree">
<div class="heart"></div>
<div class="stem"></div>
<ul>
<li class="first-stone"></li>
<li class="second-stone"></li>
<li class="third-stone"></li>
</ul>
</div>
<div class="floor"></div>
</div>
</div>
<div class="hands">
</div>
<div class="paws">
</div>
</div>
<ul class="base">
<li>I love you Matzkóm</li>
<li>to the moon and back!</li>
<li>Boldog Valentin napot!</li>
<li>Mitzikéd</li>
</ul>
</div>
<head>
<style> @import url(http://fonts.googleapis.com/css?family=Imprima);
body,html {
background:#8FD367;
height:100%;
}
div, ul{
display: block; position: absolute;
margin: auto; padding: 0;
}
span, li{ font-family: 'Imprima', sans-serif; }
.container {
width: 240px;
height: 360px;
top: 0; bottom: 0; left: 0; right: 0;
}
.cat {
width: 100%;
height: 80%;
top: 0; bottom: auto; left: 0; right: 0;
}
.cat .body{
background:#AB7860;
height: 70%;
width: 60%;
left: 0; right:0; bottom: 0; top:0;
z-index: 9;
}
.cat .body:before{
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #AB7860;
top: -20px;
left: 0;
position: absolute;
content: "";
}
.cat .body:after{
width: 0;
height: 0;
border-right: 0px solid transparent;
border-left: 50px solid transparent;
border-bottom: 25px solid #AB7860;
top: -20px;
right: 0;
position: absolute;
content: "";
}
.cat .face {
height: 30%;
width: 80%;
left: 0; right: 0;
}
.cat .face .eyes{
position: absolute;
height: 10px; width: 10px;
background: #FFF;
border-radius: 100%;
top: 20px;
}
.cat .face .eyes.left{ left: 6px; }
.cat .face .eyes.right{ right: 6px; }
.cat .face .mouth{
position: absolute;
height: 10px; width: 55%;
background: #eee;
border-radius: 0 0 40% 40%;
top: 34px;
margin: auto;
left: 0; right: 0;
}
.cat .hands{
height: 10%;
width: 90%;
left: 0; right:0; top:40%;
background:#AB7860;
border-radius: 50%;
}
.cat .paws{
height: 10%;
width: 60%;
left: 0; right:0; top:80%;
}
.cat .paws:before{
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
border-top: 30px solid #AB7860;
top: 10px;
left: 0;
position: absolute;
content: "";
}
.cat .paws:after{
width: 0;
height: 0;
border-right: 0px solid transparent;
border-left: 50px solid transparent;
border-top: 30px solid #AB7860;
top: 10px;
right: 0;
position: absolute;
content: "";
}
.cat .inside{
background: #FFBF87;
border: 3px solid #FFA875;
height: 60%;
width: 70%;
top: 20%; bottom: 0; left:0; right: 0;
}
.cat .inside .floor{
background: #AB5E59;
border-top: 4px solid #6E3C39;
height: 20%;
width: 100%;
top: auto; bottom: 0; left:0; right: 0;
}
.cat .inside .heart-tree{
height: 70%;
width: 50%;
top: 10%; bottom: 20%; left:0; right: 0;
}
.cat .inside ul{
height: 20%;
width: 100%;
top: auto; bottom: 0; left:0; right: 0;
}
.cat .inside li{
background: #63372D;
height: 100%;
width: 33%;
display: inline;
float: left;
border-radius: 50% 50% 0 0;
}
.cat .inside li.first-stone, .cat .inside li.third-stone{
background: #471A20;
height: 70%;
margin-top: 5%;
width: 30%;
display: inline;
float: left;
border-radius: 25% 30% 0 0;
}
.cat .inside .stem{
border: 2px solid #5D856C;
height: 60%;
width: 0;
bottom: 0;
left: 0; right: 0;
}
.cat .inside .heart {
position: relative;
width: 90%;
height: 50%;
z-index: 9;
animation:beat 0.45s infinite;
-webkit-animation:beat 0.45s infinite;
}
.cat .inside .heart:before,
.cat .inside .heart:after {
position: absolute;
content: "";
left: 50%;
top: 0;
width: 50%;
height: 100%;
background: #F0433F;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.cat .inside .heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
.base {
width: 100%;
height: 25%;
top: auto; bottom: 0; left: 0; right: 0;
}
.base li{
width: 100%;
height: 33.3%;
display: block;
position: relative;
background: #44854F;
border-bottom: 3px solid #2E5935;
text-align: center;
line-height: 1.85em;
color: #FFF;
text-shadow: -1px -1px 0 #333;
border-radius: 5px 5px 0 0;
}
@keyframes beat{
0 {height:90%; width: 45%;}
100% {height:100%; width: 50%;}
}
@-webkit-keyframes beat //Safari and Chrome// {
0% {height: 50%;}
100% {height: 45%;}
}
</style>
</head>
