[dohtml]<link href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">

<style>
@keyframes clock {
 from {
   transform: scale3d(1, 1, 1);
 }

 50% {
   transform: scale3d(1.05, 1.05, 1.05);
 }

 to {
   transform: scale3d(1, 1, 1);
 }
}

@-webkit-keyframes clock {
 from {
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
 }

 50% {
   -webkit-transform: scale3d(1.05, 1.05, 1.05);
   transform: scale3d(1.05, 1.05, 1.05);
 }

 to {
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
 }
}

@-moz-keyframes clock {
 from {
   -moz-transform: scale3d(1, 1, 1);
 }

 50% {
   -moz-transform: scale3d(1.05, 1.05, 1.05);
 }

 to {
   -moz-transform: scale3d(1, 1, 1);
 }
}
#future {height: 450px; width: 250px; background: #292C33; position: relative; margin: auto; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; overflow: hidden; border: 1px solid #09AEEC; box-shadow: 0 0 10px #09AEEC}
#future .bgb {height: 350px; width: 250px; background-size: cover; position: absolute; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); mix-blend-mode: screen; opacity: 0.4; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px}
#future gra {height: 100%; width: 100%; position: absolute; bottom: 0; /* Permalink - use to edit and share this gradient: [URL=http://colorzilla.com/gradient-editor/#292c33+0,292c33+100&0+0,1+66]http://colorzilla.com/gradient-editor/#292...33+100&0+0,1+66[/URL] */
background: -moz-linear-gradient(top, rgba(41,44,51,0) 0%, rgba(41,44,51,1) 66%, rgba(41,44,51,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(41,44,51,0) 0%,rgba(41,44,51,1) 66%,rgba(41,44,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(41,44,51,0) 0%,rgba(41,44,51,1) 66%,rgba(41,44,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00292c33', endColorstr='#292c33',GradientType=0 ); /* IE6-9 */
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px}
#future clo {position: absolute; width: 70%; height: 50px; background: none; display: flex; align-items: center; justify-content: center; font-family: exo; color: #eee; left: 15%; top: 60px; font-size: 40px; font-weight: 100; text-shadow: 0 0 30px; animation: clock 4s infinite; -webkit-animation: clock 4s infinite; -moz-animation: clock 4s infinite}
#future cir {border: 3px solid #09AEEC; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; height: 130px; width: 130px; position: absolute; box-sizing: border-box; box-shadow: 0 0 10px #09AEEC; left: 60px; top: 130px;}
#future .img1 img {height: 70px; width: 70px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; position: absolute; object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); left: 90px; top: 160px}
#future .btmb {background: #16171B; width: 250px; height: 60px; position: absolute; bottom: 0px; border-radius: 0 0 30px 30px; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px;}
#future .btmb:before {height: 25px; width: 90px; background: #16171B; content: ""; position: absolute; top: -25px;}
#future .btmb:after {width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #16171b;
content: ""; position: absolute; top: -25px; left: 90px;}
#future .callt {height: 30px; width: 80%; position: absolute; display: flex; align-items: center; font-family: exo; text-transform: uppercase; color: #eee; left: 10%; top: 280px; justify-content: center; font-size: 10px; letter-spacing: 3px; text-shadow: 0 0 10px #eee;}
#future .btmb .main {width: 80%; background: none; height: 40px; position: absolute; left: 10%; top: 10px; display: flex; justify-content: space-between; align-items: center; font-family: exo; text-transform: uppercase; color: #09AEEC; font-size: 9px; letter-spacing: 2px; font-weight: 700; }
#future .btmb .main img {border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%;  object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); height: 40px; width: 40px}
#future li1 {width: 90px; height: 1px; background: #09AEEC; position: absolute; bottom: calc(60px + 25px);}
#future li3 {width: calc(100% - 90px - 25px); height: 1px; background: #09AEEC; position: absolute; bottom: 60px; right: 0}
#future li2 {height: 1px; background: #09AEEC; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); width: 42px; left: 84px; bottom: 70px; }

#future:hover .callt, #future:hover clo {opacity: 0; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s}
#future:hover cir, #future:hover .img1 img {transform: scale(0.7); opacity: 0; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s}
#future:hover .btmb cco {opacity: 1; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s}
#future:hover .mbit {transform: scale(1); opacity: 1; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s;}

#future .callt, #future cir, #future clo, #future .img1 img, #future .btmb cco {transition: 0.6s ease 0.5s; -webkit-transition: 0.6s ease 0.5s; -moz-transition: 0.6s ease 0.5s;}
#future .mbit {transition: 0.6s ease; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease}
#future .mbit {width: 80%; height: 280px; left: 10%; top: 50px; background: none; position: absolute; overflow: auto; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); opacity: 0}
#future .mbit p {background: rgba(22, 23, 27, .8); padding: 10px; font-family: source sans pro; color: #eee; font-weight: 200; font-size: 14px; line-height: 1.5}
#future .btmb cco {height: 15px; width: 50px; background: none; position: absolute; display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: exo; color: #09AEEC; font-weight: 700; text-shadow: 0 0 20px #09AEEC; letter-spacing: 2px; top: -12px; left: 20px; opacity: 0}
#future ::-webkit-scrollbar {width: 0}
</style>

<div id="future">
 <div class="bgb" style="background-image: url(https://i.pinimg.com/564x/e9/24/9c/e9249c9d7983f319574787eb4821d38c.jpg)"></div>
 <gra></gra>
   <clo>12:00</clo>
   <cir></cir>
   <div class="img1"><img src="YOUR GIF WILL RESIZE"></div>
   <div class="callt">call from YOURNAME</div>
   <div class="mbit">
     <p>MESSAGE HERE
<p>MESSAGE HERE
<p>MESSAGE HERE
   </div>
   <li1></li1><li3></li3><li2></li2>
   <div class="btmb">
   <cco>12:00</cco>
     <div class="main">
     <img src="THEIR GIF WILL RESIZE">
     calling THEM</div>
   </div>
 </div>
  <a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 250px; margin: 10px auto; text-align: center; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">eve's codes</div></a>
[/dohtml]