ClearlyElevated
12/24/2019 - 7:58 PM
Christmas card
Christmas card
<div id="page-wrap">
<div class="card card-behind"></div>
<div class="card card-container">
<div class="front">
<div class="tree top"></div>
<div class="tree middle"></div>
<div class="tree bottom"></div>
<div class="branch"></div>
<div><h2>Merry Christmas</h2></div>
<div class="star"></div>
</div>
<div class="back">
<div class="snowman">
<div class="background">
<div class="frost"></div>
</div>
<div class="hat">
<div class="top"></div>
<div class="top-tip"></div>
<div class="face"></div>
<div class="body"></div>
<div class="arms"></div>
<div class="scarf"></div>
<div class="eyes"></div>
<div class="nose"></div>
<div class="smile"></div>
<div class="snow-1"></div>
<div class="snow-2"></div>
<div class="snow-3"></div>
<div class="snow-4"></div>
<div class="stand">
<h4>Happy Holidays</h4>
<p>“Open your gifts but don't forget to open your heart, as well”</p>
</div>
</div>
</div>
</div>
</div>
<div class="card card-container-content">
<h2>
<span class="text-1">Wish you a</span> <span class="text-2">Merry</span> <span class="text-3">Christmas</span> <span class="text-4"></span> <span class="text-5">& a Happy</span> <span class="text-6">New Year </span>
</h2>
</div>
</div>$('.front').click(function(){
$(this).parent('.card-container').css({
'transform' : 'rotateY(180deg) translateX(40%)',
'-webkit-transform' : 'rotateY(180deg) translateX(40%)',
'-ms-transform' : 'rotateY(180deg) translateX(40%)',
'-moz-transform' : 'rotateY(180deg) translateX(40%)',
'transition' : 'all 1.5s'
});
$('.card-container-content').css({
'transform' : 'translateX(60%)',
'-webkit-transform' : 'translateX(60%)',
'-moz-transform' : 'translateX(-40%)',
'transition' : 'all 1s'
});
});
$('.back').click(function(){
$(this).parent('.card-container').css({
'transform' : 'rotateY(0deg) translateX(0)',
'-moz-transform' : 'rotateY(0deg) translateX(0)',
'-webkit-transform' : 'rotateY(0deg) translateX(0)',
'-ms-transform' : 'rotateY(0deg) translateX(0)',
'transition' : 'all 1s'
});
$('.card-container-content').css({
'transform' : 'translateX(0)',
'-moz-transform' : 'translateX(0)',
'-moz-transform' : 'translateX(-100%)',
'transition' : 'all 1.5s'
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
body{
background: #767;
color: #FAFAFA !important;
}
h1, h2, p, hr, ul{
margin: 0;
padding: 0;
}
.fa-lg{
font-size: 50px;
line-height: 60px;
}
.fa-color-candy{
color: #FBE0E9;
}
.fa-color-green{
color: #A2D8C0;
}
#page-wrap{
display: flex;
-moz-display: flex;
justify-content: center;
-moz-justify-content: center;
margin-top: 50px;
}
.card{
background: #FAFAFA;
background: repeating-linear-gradient(-45deg, #9ACDB6 0%, #9ACDB6 10%, #A2D8C0 0%, #A2D8C0 50%) 0 / 5px 5px;
width: 400px;
height: 550px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
border: 5px solid #FAEEC6;
box-shadow: 0 6px 5px rgba(0,0,0,.1), 0 6px 5px rgba(0,0,0,.1);
}
.card-container{
position: relative;
top:0;
bottom: 0;
}
.card-behind{
background: #FAFAFA;
position: absolute;
display: block;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index: -1000;
border: 5px solid #EEE;
}
.card-container-content{
position: absolute;
z-index: -99;
-moz-transform: translateX(-100%);
}
.card-container-content p{
padding: 25px;
margin-top: 20px;
font-size: 20px;
font-family: 'Lobster Two', cursive;
text-align: center;
}
.card-container-content p span{
display: block;
line-height: 40px;
}
.front, .back{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
cursor: pointer;
}
.card-container .back{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
display: inline-block;
position: absolute;
background: #A2D8C0;
background: repeating-linear-gradient(-45deg, #9ACDB6 0%, #9ACDB6 10%, #A2D8C0 0%, #A2D8C0 50%) 0 / 5px 5px;
}
.card-container .front h2{
font-size: 30px;
letter-spacing: 2px;
font-family: 'Lobster 1.3', serif;
position: absolute;
top: 450px;
left: 90px;
color: #FAFAFA;
text-shadow:0 2px 4px rgba(0, 0, 0, .32);
}
.card-container .front span{
padding: 5px;
color: #FAFAFA;
}
.card-container-content p{
position: absolute;
top:50px;
left: 100px;
font-size: 35px;
margin-top: 15px;
bottom: 20px;
}
.card-container-content span{
font-size: 60px;
text-align: center;
}
.card-container .front ul{
text-align: center;
padding-top: 70px;
}
.card-container .front li{
display: inline-block;
margin: 5px 15px;
background: #518F69;
width: 10px;
height:10px;
border-radius: 50%;
border: 2px solid #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.card-container-content h2{
font-size: 30px;
display: block;
font-weight: 300;
color: #FAFAFA;
text-align: center;
text-shadow: 0 3px 3px rgba(0,0,0,.1), 0 3px 3px rgba(0,0,0,.1);
margin: 100px auto;
padding: 10px;
}
.card-container-content .text-1{
font-size: 60px;
font-family: 'Rouge Script', cursive;
display: block;
line-height: 15px;
z-index: 10;
color: #888;
}
.card-container-content .text-2{
font-size: 80px;
font-family: 'Turtles', serif;
display: block;
line-height: 70px;
color: #DC9C93;
}
.card-container-content .text-3{
font-size: 55px;
font-family: 'Coolvetica', serif;
display: block;
line-height: 65px;
color: #e9d880;
}
.card-container-content .text-4{
font-size: 55px;
font-family: 'Sacramento', serif;
display: block;
line-height: 50px;
color: #FAEEC6;
font-weight: 600;
}
.card-container-content .text-5{
font-size: 65px;
font-family: 'Lobster 1.3', serif;
display: block;
line-height: 50px;
color: #DC93B1;
}
.card-container-content .text-6{
font-size: 55px;
font-family: 'Pacifico', serif;
display: block;
line-height: 60px;
color: #767;
padding: 5px;
}
.front .tree{
position: absolute;
top: 100px;
left: 160px;
width: 80px;
height: 90px;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
border-radius: 30%;
background: -webkit-linear-gradient(top, rgba(171,245,199,1) 0%, #0e7547 100%);
background: -moz-linear-gradient(top, rgba(171,245,199,1) 0%, #0e7547 100%);
background: linear-gradient(top, rgba(171,245,199,1) 0%, #0e7547 100%);
box-shadow: 0 2px 3px rgba(0, 0, 0, .23);
}
.front .top{
position: absolute;
top: 100px;
left: 160px;
width: 80px;
height: 90px;
}
.front .middle{
position: absolute;
top: 140px;
left: 140px;
width: 120px;
height: 130px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index: -1;
}
.front .bottom{
position: absolute;
top: 210px;
left: 130px;
width: 140px;
height: 150px;
z-index: -10;
}
.front .branch{
position: absolute;
top: 360px;
left: 185px;
width: 30px;
height: 30px;
background: #6F4E37;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
.front .star{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid #F8F400;
position: relative;
top: 80px;
left: 185px;
animation: twinkling 2s infinite ease-in-out alternate;
}
.front .star:after{
width: 0;
height: 0;
border-left:15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 35px solid #F8F400;
position: absolute;
content: '';
top:10px;
left:-15px;
transform: rotate(180deg);
}
.hat .top{
background: #AD72AC;
width: 60px;
height: 30px;
position: absolute;
top: 90px;
left: 170px;
box-shadow: 0 2px 3px rgba(0, 0, 0, .23);
}
.back .hat .top-tip{
background: #AD72AC;
width: 120px;
height: 30px;
position: absolute;
left: 140px;
top:120px;
border-radius: 30px;
box-shadow: 0 2px 3px rgba(0, 0, 0, .23);
}
.back .face{
background: #FAFAFA;
width: 100px;
height: 100px;
position: absolute;
left: 150px;
top:130px;
border-radius: 50%;
z-index: -1;
box-shadow: 0 0 3px rgba(0, 0, 0, .23);
}
.back .body{
background: #FAFAFA;
position: absolute;
width: 130px;
height: 130px;
border-radius: 50%;
left: 140px;
top:190px;
z-index: -100;
box-shadow: 0 0 2px rgba(0, 0, 0, .23);
}
.back .background{
position: absolute;
background: #B0B8CF;
left: 50px;
top: 50px;
width: 300px;
height: 300px;
z-index: -1000;
clip-path: circle(50%);
-webkit-clip-path: circle(50%);
border-radius: 50%;
}
.back .background:after{
position: absolute;
content: '';
background: #999;
left: 0;
top: 220px;
width: 400px;
height: 100px;
z-index: -1000;
}
.back .arms{
position: absolute;
background: #836953;
left: 120px;
top: 180px;
width: 12px;
height: 100px;
border-radius: 20px;
transform: rotate(-45deg);
box-shadow: 0 1px 2px rgba(0, 0, 0, .23);
animation: wave 3s infinite alternate;
}
.back .arms:before{
position: absolute;
content: '';
background: #836953;
left: -15px;
top:15px;
width: 12px;
height: 40px;
transform: rotate(-55deg);
border-radius: 20px;
z-index: -100;
}
.back .arms:after{
position: absolute;
content: '';
background: #836953;
left: 12px;
top:12px;
width: 12px;
height: 30px;
transform: rotate(55deg);
border-radius: 20px;
z-index: -30;
}
.back .scarf{
background: #FFF99D;
position: absolute;
left: 170px;
top: 215px;
width: 35px;
height: 50px;
transform: rotate(30deg);
z-index: -10;
}
.back .eyes{
position: absolute;
background: #000;
left: 170px;
top:165px;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #333;
}
.back .eyes:before{
position: absolute;
content: '';
background: #000;
left:40px;
top:0px;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #333;
}
.back .nose{
position: absolute;
background: #EBAE7B;
left:180px;
top:180px;
width: 25px;
height: 25px;
-webkit-clip-path: polygon(50% 0, 5% 100%, 95% 100%);
clip-path: polygon(50% 0, 5% 100%, 95% 100%);
border-radius: 30px;
z-index: 1000;
transform: rotate(-85deg);
}
.back .smile{
background: #666;
width: 20px;
height: 10px;
position: absolute;
left: 190px;
top: 210px;
z-index: -1;
border-radius: 0 0 25px 25px;
}
.back .snow-1{
background: #FFF;
position: absolute;
left: 120px;
top: 100px;
width: 15px;
height: 15px;
border-radius: 50%;
}
.back .snow-2{
background: #FFF;
position: absolute;
left: 100px;
top: 170px;
width: 15px;
height: 15px;
border-radius: 50%;
}
.back .snow-3{
background: #FFF;
position: absolute;
left: 300px;
top: 180px;
width: 15px;
height: 15px;
border-radius: 50%;
}
.back .snow-4{
background: #FFF;
position: absolute;
left: 250px;
top: 100px;
width: 15px;
height: 15px;
border-radius: 50%;
}
.back .stand{
position: absolute;
background: #888;
left: 75px;
top: 330px;
width: 250px;
height: 60px;
border-radius: 10px 10px 60px 60px;
border: 1px solid #EEE;
box-shadow: 0 1px 2px rgba(10, 10, 0, 0.5);
}
.back .stand h4{
text-align: center;
font-family: 'Great Vibes';
font-size: 25px;
margin: 15px 0 0 0;
color: #EEE;
}
.back .stand p{
margin: 50px 40px 40px 40px;
text-align: center;
font-variant: small-caps;
color: #FAFAFA;
text-shadow: 0 2px 2px rgba(0,0,0,.32);
}