A Pen by Anthony

Thumbnail
This awesome code was written by anthonygermishuys, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright anthonygermishuys ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Anthony</title>
  
  
  <link rel='stylesheet prefetch' href='http://weloveiconfonts.com/api/?family=typicons'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="C3D"></div>
<div id="C2D"></div>

<div class="stage">
			<div class="coin">
				<figure class="coin-s1"></figure>
				<figure class="coin-s2"></figure>
				<figure class="coin-s3"></figure>
				<figure class="coin-s4"></figure>
				<figure class="coin-s5"></figure>
				<figure class="coin-s6"></figure>
				<figure class="coin-s7"></figure>
				<figure class="coin-s8"></figure>
				<figure class="coin-s9"></figure>
				<figure class="coin-s10"></figure>
				<figure class="coin-s11"></figure>
				<figure class="coin-s12"></figure>
				<figure class="coin-s13"></figure>
				<figure class="coin-s14"></figure>
				<figure class="coin-s15"></figure>
				<figure class="coin-s16"></figure>
				<figure class="coin-s17"></figure>
				<figure class="coin-s18"></figure>
				<figure class="coin-s19"></figure>
				<figure class="coin-s20"></figure>
				<figure class="coin-s21"></figure>
				<figure class="coin-s22"></figure>
				<figure class="coin-s23"></figure>
				<figure class="coin-s24"></figure>
				<figure class="coin-s25"></figure>
				<figure class="coin-s26"></figure>
				<figure class="coin-s27"></figure>
				<figure class="coin-s28"></figure>
				<figure class="coin-s29"></figure>
				<figure class="coin-s30"></figure>
          <figure class="coin-top">			<!--COIN TOP -->
          <div class="holo-loader"></div>
          
          </figure>							<!--COIN TOP END -->
			  <figure class="coin-bottom">         <!--COIN BOTTOM -->
          <div class="pulser-bottom"></div>
          </figure>	 <!--COIN BOTTOM END -->
          <div class="flipWrapper">
          <div class="card">	 <!--FACE FLIP-->
          <div class="face front">			 <!--FACE FRONT-->
          <div class="menu-button">			<!--INNER CIRCLE-->

   <div class="close" onclick="closemenu()">
   <div class="barv" style='-webkit-transform:rotate(-45deg);'></div>
   <div class="barv" style='-webkit-transform:rotate(45deg);'></div>
   </div>  
   <div id="spark"></div>
   <div id="laurel"><img class="img" id="shine" alt="" src="http://anthony.germishuys.cloudvent.net/pics/laurel.png"/></div> 


    <div class="pulser-top"></div>                                                            				<!--Hexagons-->
		 	<div class="socket">
       
     			<div class="gel center-gel"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c1 r1"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c2 r1"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c3 r1"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c4 r1"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c5 r1"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c6 r1"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c7 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c8 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c9 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c10 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c11 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c12 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c13 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c14 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c15 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c16 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c17 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c18 r2"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c19 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c20 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c21 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c22 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c23 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c24 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c25 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c26 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c28 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c29 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			<div class="gel c30 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c31 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c32 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c33 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c34 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c35 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c36 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>	
			<div class="gel c37 r3"><div class="hex-brick h1"></div><div class="hex-brick h2"></div><div class="hex-brick h3"></div></div>
			</div>      <!--Hexagons END-->
  <!--PULSE ANIMATION-->         <div class="pulse"></div>               <!--PULSE ANIMATION-->
      
            
    
</div>                                                                                                                                           <!--Menu Button End-->

   
        <!--RADIAL MENU ----BUTTONS 4-->                     
   <ul id="menu-radial-4button">
         <li class="menu-item" menu4-icon="|"><a id="top" class="menu-item-back"></a></li>
         <li class="menu-item" menu4-icon="B"><a id="right" class="menu-item-back"></a></li>
         <li class="menu-item" menu4-icon="A"><a id="bottom" class="menu-item-back"></a></li>
         <li class="menu-item" menu4-icon="["><a id="left" class="menu-item-back"></a></li>
         </ul>
  
  </ul>         
  </div>          <!--FACE FRONT END-->
    
     						            <!--FACE TOP-->
 <div class="face top">
 <div id="menu-t-button" m3-icon="|">
 
 <div class="close" onclick="closetop()">
   <div class="barv" style='-webkit-transform:rotate(-45deg) scale(2);'></div>
   <div class="barv" style='-webkit-transform:rotate(45deg)  scale(2);'></div>
 </div>
 </div>
  
 <ul id="menu-radial-3buttonb">
 <li class="menu-item-3b fa fa-car fa-3x"><a id="car" class="menu-item-back"></a></li>
 <li class="menu-item-3b fa fa-history fa-2x"><a id="history" class="menu-item-back"></a></li> 
 <li class="menu-item-3b fa fa-group fa-2x"><a id="group" class="menu-item-back"></a></li>    
 </ul> 
        
 </div>       <!--End of face top --> 
						                <!--FACE RIGHT-->

<div class="face right">
<div id="menu-r-button" phone-icon="B">     <!--FACE RIGHT BUTTON-->
 
<div class="close" onclick="closeright()">
   <div class="barv" style='-webkit-transform:rotate(-45deg) scale(2);'></div>
   <div class="barv" style='-webkit-transform:rotate(45deg)  scale(2);'></div>
 </div>
 </div>  
  
 <ul id="menu-radial-3button">   <!--RADIAL MENU ----BUTTONS 3--> 
 <li class="menu-item-3 fa fa-mobile fa-4x"><a class="menu-item-back" href="#"></a></li>
 <li class="menu-item-3 fa fa-skype fa-4x"><a class="menu-item-back" href="#"></a></li>
 <li class="menu-item-3 fa fa-fax fa-3x"><a class="menu-item-back" href="#"></a></li>
</ul>
            
</div>							   <!--FACE RIGHT END-->

							 <!--FACE LEFT-->
 <div class="face left">

 <div id="menu-l-button" face-left-icon="[">     <!--FACE RIGHT BUTTON-->
 
<div class="close" onclick="closeleft()">
   <div class="barv" style='-webkit-transform:rotate(-45deg) scale(2);'></div>
   <div class="barv" style='-webkit-transform:rotate(45deg)  scale(2);'></div>
 </div>
</div>  

<div id="menu-radial-2button">
  <a id="email" class="menu-radial-2button-left"><div id="at">@</div></a>
  <a id="msg" class="menu-radial-2button-right" m2-icon-right="&#xf040;"></a>
</div>
      
</div> <!--FACE LEFT END-->
						
 <div class="face bottom" > 	                       <!--FACE BOTTOM-->
 <div id="menu-b-button" face-left-icon="A">	                    <!--FACE BOTTOM BUTTON-->
    <div class="close" onclick="closebottom()">
   <div class="barv" style='-webkit-transform:rotate(-45deg) scale(2);'></div>
   <div class="barv" style='-webkit-transform:rotate(45deg)  scale(2);'></div>
    </div>
 </div>				
</div> <!--FACE BOTTOM END-->

</div></div>     					<!--FACE FLIP END-->

<div class="holo"> 
         <div class="holo ring-1"></div>
         <div class="holo ring-2"></div>
         <div class="holo ring-3"></div>
         <div class="holo ring-4"></div>
         <div class="holo ring-5"></div>
         <div class="holo ring-6"></div>
         <div class="holo ring-7"></div>
         <div class="holo ring-8"></div>
         <div class="holo ring-9"></div>
         <div class="holo ring-10"></div>
        </div>
</div>							<!--COIN END -->
</div>							<!--STAGE END -->

<div id="open">
<div class="barh" style='margin-top:30px;'></div>
<div class="barh"></div>
<div class="barh" style='margin-top:-50px;'></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-yyJKyJ */
*, *:after, *:before {margin: 0; padding: 0;}

body {overflow:hidden;
background:radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,
radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
  background-color:#282828;background-size: 16px 16px;}


#C2D,#C3D{position:absolute;width:50px;height:50px;border-radius:50%;z-index:0;margin:10px 0 0 10px;}
#C3D{background:url(http://anthony.germishuys.cloudvent.net/pics/c3d2.png) no-repeat center;background-size:contain;}
#C2D{background: url(http://anthony.germishuys.cloudvent.net/pics/c2d.png) no-repeat center center;background-size:cover;display:none;}

#C3D:hover,#C2D:hover{box-shadow:0px 0px 24px rgba(87,193,232,1);}

.stage{position:absolute;top:50%;Left:50%;-webkit-perspective:1200px;}

.coin {box-sizing:border-box;-webkit-transform-style:preserve-3d;
-webkit-transform:rotate3d(1,0,0,90deg) translate3d(-16px,0,0);
-webkit-transition:-webkit-transform 1s ease-in-out, margin-top 2s ease-in-out;}

.coin.animate{
-webkit-transform:rotate3d(1,0,0,170deg) translate3d(-16px,0,0);
margin-top:280px;-webkit-transition:-webkit-transform 1s ease-in-out 1s, margin-top 2s ease-in-out;}


figure {position:absolute;width:32px;height:20px;opacity:1;}

[class*='coin-s'] {background:#8c8482;
  background:-webkit-linear-gradient(left, #8b918d 0%, #b7bdbc 74%, #797979 75%, #979692 100%);
  background-size:25%;}

figure.coin-bottom {width:300px;height:300px;border-radius:50%;box-sizing:border-box;}
figure.coin-top {width:300px;height:300px;border-radius:50%;-webkit-box-sizing:border-box;}


figure.coin-bottom {
background:url(http://anthony.germishuys.cloudvent.net/pics/bottom2.png) no-repeat center ;background-size:contain;
-webkit-transform:translate3d(-134px,-150px,0) rotate3d(1,0,0,90deg) rotate3d(0,0,1,220deg);  
-webkit-transform-style:preserve-3d;
-webkit-box-shadow:4px 9px 10px rgba(0, 0, 0, .2), 5px 18px 40px rgba(0, 0, 0, .6), 18px 40px 20px rgba(0, 0, 0, .4);
}

.coin-bottom.animate{background:url(http://anthony.germishuys.cloudvent.net/pics/nobottom.png); 
-webkit-transition:background 3s ease 2s;}

figure.coin-top {
background:url(http://anthony.germishuys.cloudvent.net/pics/bigring.png) no-repeat center;
  background-size:cover;z-index:20;
-webkit-transform: translate3d(-134px, -130px, 0px) rotate3d(1,0,0,90deg);}

.coin-s1 {-webkit-transform: rotate3d(0,1,0,0deg) translate3d(0,0,149px);}
.coin-s2 {-webkit-transform: rotate3d(0,1,0,12deg) translate3d(0,0,149px);}
.coin-s3 {-webkit-transform: rotate3d(0,1,0,24deg) translate3d(0,0,149px);}
.coin-s4 {-webkit-transform: rotate3d(0,1,0,36deg) translate3d(0,0,149px);}
.coin-s5 {-webkit-transform: rotate3d(0,1,0,48deg) translate3d(0,0,149px);}
.coin-s6 {-webkit-transform: rotate3d(0,1,0,60deg) translate3d(0,0,149px);}
.coin-s7 {-webkit-transform: rotate3d(0,1,0,72deg) translate3d(0,0,149px);}
.coin-s8 {-webkit-transform: rotate3d(0,1,0,84deg) translate3d(0,0,149px);}
.coin-s9 {-webkit-transform: rotate3d(0,1,0,96deg) translate3d(0,0,149px);}
.coin-s10 {-webkit-transform: rotate3d(0,1,0,108deg) translate3d(0,0,149px);}
.coin-s11 {-webkit-transform: rotate3d(0,1,0,120deg) translate3d(0,0,149px);}
.coin-s12 {-webkit-transform: rotate3d(0,1,0,132deg) translate3d(0,0,149px);}
.coin-s13 {-webkit-transform: rotate3d(0,1,0,144deg) translate3d(0,0,149px);}
.coin-s14 {-webkit-transform: rotate3d(0,1,0,156deg) translate3d(0,0,149px);}
.coin-s15 {-webkit-transform: rotate3d(0,1,0,168deg) translate3d(0,0,149px);}
.coin-s16 {-webkit-transform: rotate3d(0,1,0,180deg) translate3d(0,0,149px);}
.coin-s17 {-webkit-transform: rotate3d(0,1,0,192deg) translate3d(0,0,149px);}
.coin-s18 {-webkit-transform: rotate3d(0,1,0,204deg) translate3d(0,0,149px);}
.coin-s19 {-webkit-transform: rotate3d(0,1,0,216deg) translate3d(0,0,149px);}
.coin-s20 {-webkit-transform: rotate3d(0,1,0,228deg) translate3d(0,0,149px);}
.coin-s21 {-webkit-transform: rotate3d(0,1,0,240deg) translate3d(0,0,149px);}
.coin-s22 {-webkit-transform: rotate3d(0,1,0,252deg) translate3d(0,0,149px);}
.coin-s23 {-webkit-transform: rotate3d(0,1,0,264deg) translate3d(0,0,149px);}
.coin-s24 {-webkit-transform: rotate3d(0,1,0,276deg) translate3d(0,0,149px);}
.coin-s25 {-webkit-transform: rotate3d(0,1,0,288deg) translate3d(0,0,149px);}
.coin-s26 {-webkit-transform: rotate3d(0,1,0,300deg) translate3d(0,0,149px);}
.coin-s27 {-webkit-transform: rotate3d(0,1,0,312deg) translate3d(0,0,149px);}
.coin-s28 {-webkit-transform: rotate3d(0,1,0,324deg) translate3d(0,0,149px);}
.coin-s29 {-webkit-transform: rotate3d(0,1,0,336deg) translate3d(0,0,149px);}
.coin-s30 {-webkit-transform: rotate3d(0,1,0,348deg) translate3d(0,0,149px);}

@-webkit-keyframes rotate {  
0% {-webkit-transform:rotate3d(1,0,0,-270deg) translate3d(0,0,0);}
100% {-webkit-transform: rotate3d(1,0,0,90deg) translate3d(0,0,0);}}

.socket{background:url('http://anthony.germishuys.cloudvent.net/pics/bottom2.png') no-repeat center;background-size:contain;
position:relative;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;
overflow:hidden;opacity:1;-webkit-transform:scale(1.5);-webkit-transition:all 2s ease 2s;}

.socket.animate{opacity:0;-webkit-transition:opacity 2s ease 2s;}
.hex-brick{position:absolute;background:#222;width:30px;height:17px;top:5px;}
.h2{-webkit-transform:rotateZ(60deg);-webkit-transition:-webkit-transform 2s;}
.h3{-webkit-transform:rotateZ(-60deg);-webkit-transition:-webkit-transform 2s;}
.gel{position:absolute;top:50%;left:50%;height:30px;width:30px;-webkit-transition:all .3s;}
.center-gel{margin:-15px 0 0 -15px;-webkit-animation:pulse 2s linear 1 8s both;}
.c1{margin-left:-47px;margin-top:-15px;}
.c2{margin-left:-31px;margin-top:-43px;}
.c3{margin-left:1px;margin-top:-43px;}
.c4{margin-left:17px;margin-top:-15px;}
.c5{margin-left:-31px;margin-top: 13px;}
.c6{margin-left:1px;margin-top:13px;}
.c7{margin-left:-63px;margin-top:-43px;}
.c8{margin-left:33px;margin-top:-43px;}
.c9{margin-left:-15px;margin-top:41px;}
.c10{margin-left:-63px;margin-top:13px;}
.c11{margin-left:33px;margin-top:13px;}
.c12{margin-left:-15px;margin-top:-71px;}
.c13{margin-left:-47px;margin-top:-71px;}
.c14{margin-left:17px;margin-top:-71px;}
.c15{margin-left:-47px;margin-top:41px;}
.c16{margin-left:17px;margin-top:41px;}
.c17{margin-left:-79px;margin-top:-15px;}
.c18{margin-left:49px;margin-top:-15px;}
.c19{margin-left:-63px;margin-top:-99px;}
.c20{margin-left:33px;margin-top:-99px;}
.c21{margin-left:1px;margin-top:-99px;}
.c22{margin-left:-31px;margin-top:-99px;}
.c23{margin-left:-63px;margin-top: 69px;}
.c24{margin-left:33px;margin-top:69px;}
.c25{margin-left:1px;margin-top:69px;}
.c26{margin-left:-31px;margin-top:69px;}
.c27{margin-left:-79px;margin-top:-15px;}
.c28{margin-left:-95px;margin-top:-43px;}
.c29{margin-left:-95px;margin-top:13px;}
.c30{margin-left:49px;margin-top:41px;}
.c31{margin-left:-79px;margin-top:-71px;}
.c32{margin-left:-111px;margin-top:-15px;}
.c33{margin-left:65px;margin-top:-43px;}
.c34{margin-left:65px;margin-top:13px;}
.c35{margin-left:-79px;margin-top:41px;}
.c36{margin-left:49px;margin-top:-71px;}
.c37{margin-left:81px;margin-top:-15px;}
.r1,.r2,.r3{-webkit-animation: pulse 2s linear 1 8.2s both;}

@-webkit-keyframes pulse{0%{-webkit-transform: scale(0.01);} 100%{-webkit-transform: scale(1);}}
@-webkit-keyframes impulse{0%{-webkit-transform: scale(1);opacity:1;} 100%{-webkit-transform: scale(0.01);opacity:0;}}			
@-webkit-keyframes impulse2{0%{-webkit-transform: scale(0.01);opacity:0;} 100%{-webkit-transform: scale(1);opacity:1;}}		

#laurel{border-radius:50%;width:230px;height:230px;position:absolute;left: 50%;top: 50%;margin:150px 0 0 -120px;z-index:11;-webkit-transition:all 1s linear 2s;
-webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0);
}

#laurel.loaded{margin-top:-120px;-webkit-transition:margin-top 1.5s ease;

}
.img {display:block;margin: 0 auto;}

#spark{background:url(http://anthony.germishuys.cloudvent.net/pics/spark.png) no-repeat center;background-size:contain;border-radius:50%;width:240px;height:240px;position:absolute;left: 50%;top:50%;margin:-350px 0 0 -120px;z-index:11;-webkit-transition:all 1s linear 2s;
-webkit-transform: rotate3d(0,1,0,180deg) translate3d(0,0,0);}

#spark.loaded{margin-top:-115px;-webkit-transition:margin-top 1.5s ease;}





@-webkit-keyframes rotate {0% {-webkit-transform: rotate3d(1, 0, 0, -270deg) translate3d(0, 0, 0);}100% {-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 0);} }


.pulser-top {
  position:absolute;
  display: block;
  left:0;
  right:0;
  top:0;
  bottom:0;
  opacity:0;
  margin:auto;
  width:250px;
  height:250px;
  border-radius:50%;
  border:5px solid #0ab4ee;
  box-sizing:border-box;
 }

.pulser-top.animate{opacity:1;
-webkit-animation:pulse 2s infinite backwards cubic-bezier(0.1, 0.3, 0.3, 1.0) 3s;}

.pulser-bottom {
  position:absolute;
  display: block;
  left:0;
  right:0;
  top:0;
  bottom:0;
  opacity:0;
  margin:auto;
  width:300px;
  height:300px;
  border-radius:100%;
  background-color:#0ab4ee; 
 -webkit-transform:translate3d(0,0,5px);
 
}

.pulser-bottom.animate{opacity:1;-webkit-animation:pulse2 2s ease infinite 3s;}

.holo-loader {
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  opacity:0;
  z-index:30;
  margin:auto;
  width:290px;
  height:290px;
  border-radius:50%;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:15px solid #0ab4ee;
  border-right:15px solid #0ab4ee;
  -webkit-box-sizing:border-box;
-webkit-transition:opacity 2s ease;
display:none;
}

.holo-loader.animate{opacity:1;
-webkit-transition:opacity 2s ease 2s;
-webkit-animation:spin 3s infinite linear 3s;
}

.ring-1.animate{-webkit-animation:mymove 1s infinite alternate;}
.ring-2.animate{-webkit-animation:mymove 1s infinite alternate .1s;}
.ring-3.animate{-webkit-animation:mymove 1s infinite alternate .2s;}
.ring-4.animate{-webkit-animation:mymove 1s infinite alternate .3s;}
.ring-5.animate{-webkit-animation:mymove 1s infinite alternate .4s;}
.ring-6.animate{-webkit-animation:mymove 1s infinite alternate .5s;}
.ring-7.animate{-webkit-animation:mymove 1s infinite alternate .6s;}
.ring-8.animate{-webkit-animation:mymove 1s infinite alternate .7s;}
.ring-9.animate{-webkit-animation:mymove 1s infinite alternate .8s;}
.ring-10.animate{-webkit-animation:mymove 1s infinite alternate .9s;}

.holo {
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:500px;
  height:500px;
  border-radius:50%;
  display:none;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
 -webkit-transform-style:preserve-3d;
 -webkit-transform: rotate3d(1, 0, 0, 90deg)
rotate3d(0,1, 0, 180deg)  translate3d(234px,0,0);

}




.ring-1 {
opacity:0;
width:250px;height:250px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,30px);
}

.ring-2 {
opacity:0;
width:270px;height:270px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,50px);
}

.ring-3 {
opacity:0;
width:290px;height:290px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,70px);
}


.ring-4 {
opacity:0;
width:310px;height:310px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,90px);
}

.ring-5 {
opacity:0;
width:330px;height:330px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,110px);
}


.ring-6 {
opacity:0;
width:350px;height:350px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,130px);
}

.ring-7 {
opacity:0;
width:370px;height:370px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,150px);
}

.ring-8 {
opacity:0;
width:390px;height:390px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,170px);
}

.ring-9 {
opacity:0;
width:410px;height:410px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,190px);
}

.ring-10 {
opacity:0;
width:430px;height:430px;
border:4px solid #0ab4ee;
-webkit-box-sizing:border-box;
box-sizing:border-box;border-radius:50%;
-webkit-transform:translate3d(0,0,210px);
}


@-webkit-keyframes mymove
{0% {opacity:0;} 100% {opacity:1;} }

@-webkit-keyframes spin {
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}

@-webkit-keyframes pulse1 {
0%   {opacity:1;-webkit-transform: scale(0.1,0.1);}
  20%  {opacity:1;}
  50%  {-webkit-transform: scale(1,1);}
  80%  {opacity:1;-webkit-transform: scale(1,1);}
100% {opacity:0;}
}

@-webkit-keyframes pulse2 {to{opacity:0;-webkit-transform:scale(2);}}



.flipWrapper {position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;-webkit-perspective:800px;-webkit-transform:rotatex(90deg) rotateZ(180deg) translate3d(-15px,0,-30px);}

.flipWrapper .card.flippedr {-webkit-transform: rotatey(180deg);}
.flipWrapper .card.flippedl {-webkit-transform: rotatey(-180deg);}
.flipWrapper .card.flippedt {-webkit-transform: rotatex(-180deg);}
.flipWrapper .card.flippedb {-webkit-transform: rotatex(180deg);}

.flipWrapper .card {width:100%;height:100%;-webkit-transform-style:preserve-3d;-webkit-transition:2s ease;}

.flipWrapper .card .face {position:absolute;width:100%;height:100%;z-index:2;-webkit-backface-visibility:hidden;}

.flipWrapper .card .front {position:absolute;border-radius:50%;z-index:1;}

.flipWrapper .card .right {background:transparent;border-radius:50%;-webkit-transform:rotatey(-180deg);}

.flipWrapper .card .left {background:transparent;border-radius:50%;-webkit-transform:rotatey(180deg);}

.flipWrapper .card .top {background:transparent;border-radius:50%;-webkit-transform:rotatex(180deg);}

.flipWrapper .card .bottom {background:transparent;border-radius:50%;-webkit-transform:rotatex(-180deg);}

.menu-button {position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;
border-radius:50%;overflow:hidden;border:5px solid grey;box-sizing:border-box;
z-index:10;background:black;-webkit-transition:all 1.5s ease 1.5s;}

.menu-button.animate {width:110px;height:110px;margin:-55px 0 0 -55px;-webkit-transition:all 1.5s ease 1.5s;}

#menu-radial-4button {position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;
overflow:hidden;list-style:none;border-radius:50%;border:5px solid grey;box-sizing:border-box;
-webkit-transition: all 1.5s ease;}

#menu-radial-3button {position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;
overflow:hidden;list-style:none;border-radius:50%;border:5px solid grey;box-sizing:border-box;
-webkit-transform:scale(0.45);-webkit-transition: all 1.5s ease;}

#menu-radial-3buttonb {position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;
overflow:hidden;list-style:none;border-radius:50%;border:5px solid grey;box-sizing:border-box;
-webkit-transform:scale(0.45) rotatez(180deg);
  -webkit-transition: all 1.5s ease;}

#menu-radial-2button {position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;overflow:hidden;border-radius:50%;border:2.5px solid grey;box-sizing:border-box;
-webkit-transform: scale(0.45) rotateY(180deg);-webkit-transition: all 1.5s ease;}

#menu-radial-2button.animate {-webkit-transform:scale(1) rotateY(180deg);
-webkit-transition:-webkit-transform 1.5s ease 1.5s;}

#menu-radial-3button.animate{-webkit-transform:scale(1);
-webkit-transition:-webkit-transform 1.5s ease 1.5s;}

#menu-radial-3buttonb.animate{-webkit-transform:scale(1) rotatez(180deg);-webkit-transition: all 2s ease 2s;}
#menu-radial-4button.animate{width:250px;height:250px;margin:-125px 0 0 -125px;-webkit-transition:all 2s ease 3s;}

.menu-item-3{position:absolute;top:50%;left:50%;text-decoration:none;display:none;}
.menu-item-3:before {position:absolute;top:50%;left:50%;z-index:1;
background:-webkit-linear-gradient(white,#C0C0C0);-webkit-background-clip:text;
-webkit-text-fill-color:transparent;text-shadow:1px 1px 2px rgba(0,0,0,0.6);-webkit-transform:rotatey(180deg);}

.menu-radial-2button-right,
.menu-radial-2button-left{
float:left;width:50%;height:100%;margin:0;background:#222;border:2.5px solid grey;box-sizing:border-box;}
.menu-radial-2button-right {border-radius:0 125px 125px 0;}
.menu-radial-2button-left  {border-radius:125px 0 0 125px;}
#menu-radial-2button a:hover {background:rgba(0,155,255,.1);-webkit-box-shadow: 1px 0 0 1px white, 0 0 10px 1px teal, inset 0 0 10px 1px teal;}


.menu-item-3:nth-child(1) {display: block;}
.menu-item-3:nth-child(1) .menu-item-back {-webkit-transform:rotate(-30deg) skew(30deg);}
.menu-item-3:nth-child(1):before {margin:-120px 0 0 -15px;}

.menu-item-3:nth-child(2) {display: block;}
.menu-item-3:nth-child(2) .menu-item-back {-webkit-transform:rotate(90deg) skew(30deg);}
.menu-item-3:nth-child(2):before {margin:14px 0 0 52px;}

.menu-item-3:nth-child(3) {display: block;}
.menu-item-3:nth-child(3) .menu-item-back {-webkit-transform:rotate(210deg) skew(30deg);}
.menu-item-3:nth-child(3):before {margin:14px 0 0 -105px;}

.menu-item-back {position:absolute;left:50%;top:50%;width:175px;height:149px;margin-top:-150px;background:#222;
border:1px solid rgba(204, 204, 204, 0.2);-webkit-transform-origin:0px 150px;-webkit-transition:all 1s ease-in-out;}
.menu-item-back:hover{background:rgba(0,155,255,.1);-webkit-box-shadow:0 0 0 1px white,0 0 10px 1px teal,inset 0 0 10px 1px teal;
-webkit-transition-duration:.5;}

.menu-item {position:absolute;top:50%;left:50%;text-decoration:none;display:none;}
.menu-item:before {position:absolute;top:50%;left:50%;z-index:1;}

.menu-item:nth-child(1) {display:block;}
.menu-item:nth-child(1) .menu-item-back {-webkit-transform:rotate(-45deg) skew(0deg);}
.menu-item:nth-child(1):before {margin-top:-85px;}

.menu-item:nth-child(2) {display:block;}
.menu-item:nth-child(2) .menu-item-back {-webkit-transform:rotate(45deg) skew(0deg);}
.menu-item:nth-child(2):before {margin-left:85px;}

.menu-item:nth-child(3) {display:block;}
.menu-item:nth-child(3) .menu-item-back {-webkit-transform:rotate(135deg) skew(0deg);}
.menu-item:nth-child(3):before {margin-top:90px;}

.menu-item:nth-child(4) {display:block;}
.menu-item:nth-child(4) .menu-item-back{-webkit-transform:rotate(225deg) skew(0deg);}
.menu-item:nth-child(4):before {margin-left:-85px;}

[menu4-icon]:before {
content:attr(menu4-icon);font-family:'Typicons';background:-webkit-linear-gradient(white, #C0C0C0);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);z-index:10;
font-size:50px;top:-25px;left:-25px;-webkit-transform:rotate3d(0,1,0,-180deg);}

[m3-icon]:before {content:attr(m3-icon);
  font-family:'Typicons';background:-webkit-linear-gradient(white, #C0C0C0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);z-index:10;
  line-height:350px;position:absolute;left:-20px;
  font-size:300px;}

[face-left-icon]:before {content:attr(face-left-icon);
  font-family:'Typicons';background:-webkit-linear-gradient(white, #C0C0C0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);z-index:10;
  line-height:300px;position:absolute;left:20px;
  font-size:200px;}

[m2-icon-right]:before {
  content: attr(m2-icon-right);
  display: block;
  font-family:'FontAwesome'; 
  position:relative;
  left:50%;top:50%;
  margin:-30px 0 0 0px;
  font-size:60px;
  background:-webkit-linear-gradient(white, #C0C0C0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

#at{
   font-family: sans-serif;
   background:-webkit-linear-gradient(white, #C0C0C0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  position:relative;
  left:50%;top:50%;
  margin:-40px 0 0 -55px;
  font-size:60px;
}


[phone-icon]:before {
  content:attr(phone-icon);
  font-family:'Typicons';background:-webkit-linear-gradient(white, #C0C0C0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);z-index:10;
  line-height:300px;position:absolute;left:-5px;
  font-size:250px;}



.menu-item-3b {position:absolute;top:50%;left:50%;text-decoration:none;display:none;}
.menu-item-3b:before {position:absolute;top:50%;left:50%;z-index:1;
  background:-webkit-linear-gradient(white, #C0C0C0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}


.menu-item-3b:nth-child(1) {display: block;}
.menu-item-3b:nth-child(1) .menu-item-back {-webkit-transform: rotate(-30deg) skew(30deg);}
.menu-item-3b:nth-child(1):before {-webkit-transform:rotatez(180deg);margin:-110px 0 0 -25px;}

.menu-item-3b:nth-child(2) {display: block;}
.menu-item-3b:nth-child(2) .menu-item-back {-webkit-transform: rotate(90deg) skew(30deg);}
.menu-item-3b:nth-child(2):before {-webkit-transform:rotatez(180deg);margin: 20.0px 0 0 60px;}

.menu-item-3b:nth-child(3) {display: block;}
.menu-item-3b:nth-child(3) .menu-item-back {-webkit-transform:rotate(210deg) skew(30deg);}
.menu-item-3b:nth-child(3):before {-webkit-transform:rotatez(180deg);margin: 20.0px 0 0 -100px;}


#menu-t-button,#menu-l-button,#menu-r-button,#menu-b-button{
position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;z-index:1;  
background:black;border-radius:50%;border:5px solid grey;box-sizing:border-box;
-webkit-transform:rotateY(-180deg);-webkit-transition: all 1.5s ease-in-out 1.5s;}
  
#menu-r-button.animate, #menu-l-button.animate, #menu-t-button.animate, #menu-b-button.animate{
-webkit-transform:rotateY(-180deg) scale(0.45);-webkit-transition:-webkit-transform 1.5s ease-in-out;}

#open{position:absolute;top:50%;left:50%;margin:-125px 0 0 -125px;height:250px;width:250px;
border-radius:50%;z-index:50;-webkit-transition:background 2s ease;}

#open:hover{background:rgba(0,0,0,.5);-webkit-transition:background 1.5s ease;}

#close {position:absolute;top:50%;left:50%;border-radius:50%;margin:-55px 0 0 -55px;height:110px;width:110px;-webkit-transform:rotate(-45deg);display:none;
-webkit-transition:all 2s ease 1s;z-index:100;}

.barh{position:absolute;top:50%;left:50%;
 background: #d6d6d6 linear-gradient(#666,#d6d6d6,rgba(0,0,0,1)); 
 box-shadow:-.5px 0px 0px white,0px 1px 1px black;
 margin:-10px 0 0 0;height:20px;width:0px;
 -webkit-transition:all 1s ease;}

.barh.animate{width:100px;margin:-10px 0 0 -50px;-webkit-transition:all 1s ease 1s;}


.close {position:absolute;border-radius:50%;margin:auto;height:100%;width:100%;background:transparent;z-index:100;display:none;}
.close:hover{background:black;}

.barv{position:absolute;top:50%;left:50%;height:0px;width:20px;margin:0 0 0 -10px;
 background:#d6d6d6 linear-gradient(#666,#d6d6d6,rgba(0,0,0,1));box-shadow:0 1px 0 black;-webkit-transition:all 1s ease;}

.barv.animate{Height:80px;margin-top:-40px;-webkit-transition:all 1s ease;}



/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-yyJKyJ */


setTimeout(laurel, 5000); 
setTimeout(sparkplug, 5000);

function laurel() {$('#laurel').addClass("loaded");};  
function sparkplug() {$('#spark').addClass("loaded");}; 

$('#C3D').click(function() {$(this).fadeOut(2000);$('#C2D').fadeIn(2000);Go3D();});
$('#C2D').click(function() {$(this).fadeOut(2000);$('#C3D').fadeIn(2000);Go2D();});

function Go3D() {
$('#laurel').removeClass("loaded");  
$('#spark').removeClass("loaded");
dehex();

setTimeout(Go3D2, 5000); };
  
  function Go3D2() {
$('.socket').addClass("animate"); 
$('.coin').toggleClass("animate");
setTimeout(Go3D3, 5000); };
    
 function Go3D3() {
$('.pulser-top').toggleClass("animate");
$('.pulser-bottom').toggleClass("animate");
$('.holo-loader').toggle().toggleClass("animate");
setTimeout(rings,3000);
};

function rings() {
$('.holo').toggle();
$('.ring-1').toggleClass("animate");
$('.ring-2').toggleClass("animate");
$('.ring-3').toggleClass("animate");
$('.ring-4').toggleClass("animate");
$('.ring-5').toggleClass("animate");
$('.ring-6').toggleClass("animate");
$('.ring-7').toggleClass("animate");
$('.ring-8').toggleClass("animate");
$('.ring-9').toggleClass("animate");
$('.ring-10').toggleClass("animate");
};

function Go2D() {
rings();
$('.coin').toggleClass("animate");
$('.pulser-top').toggleClass("animate");
$('.pulser-bottom').toggleClass("animate");
$('.holo-loader').toggle().toggleClass("animate");
$('.socket').toggleClass("animate");
$('#menu-radial-4button').show();
setTimeout(rehex,5000);
setTimeout(laurel,3000); 
setTimeout(sparkplug,3000);
}

$('#open').hover(function(){$('.barh').addClass("animate");},function(){$('.barh').removeClass("animate");});

$('#open').click(function(){
  $('.barh').removeClass("animate"); 
  $(this).css({'opacity':'0','-webkit-transition':'opacity 2s'}); 
  $('figure.coin-bottom').css({'background':'url(http://anthony.germishuys.cloudvent.net/pics/nobottom.png)','-webkit-transition':'background 0s'}); 
  $('#laurel').removeClass("loaded");  
  $('#spark').removeClass("loaded");
setTimeout(dehex, 2000);
setTimeout(openmenu, 2000);  
  });

function dehex() {
$('.gel').css({'-webkit-animation-name':'impulse','-webkit-animation-delay':'0s'}); 
$('.r1').css({'-webkit-animation-name':'impulse','-webkit-animation-delay':'0s'}); 
$('.r2').css({'-webkit-animation-name':'impulse','-webkit-animation-delay':'0s'}); 
$('.r3').css({'-webkit-animation-name':'impulse','-webkit-animation-delay':'0s'}); 
};

function openmenu() {
$('#open').hide(); 
$('.menu-button').addClass("animate");
$('.socket').addClass("animate");
$('#menu-radial-4button').addClass("animate");  
$('.close').css('opacity','1').delay(12000).fadeIn();
};

$('.close').hover(function(){$('.barv').addClass("animate");},function(){$('.barv').removeClass("animate");});

function closemenu() {
$('.barv').removeClass("animate"); 
$('.close').delay(1000).hide();
$('.menu-button').removeClass("animate");
$('#menu-radial-4button').removeClass("animate");   
$('.socket').removeClass("animate");
$('figure.coin-bottom').css({'background':'url(http://anthony.germishuys.cloudvent.net/pics/bottom2.png)','-webkit-transition':'background 0s ease 4s'}); 
setTimeout(rehex,3000);
setTimeout(laurel,5000); 
setTimeout(sparkplug,5000);
};

function rehex() {
$('.gel').css({'-webkit-animation-name':'impulse2','-webkit-animation-delay':'0s'}); 
$('.r1').css({'-webkit-animation-name':'impulse2','-webkit-animation-delay':'0s'}); 
$('.r2').css({'-webkit-animation-name':'impulse2','-webkit-animation-delay':'0s'}); 
$('.r3').css({'-webkit-animation-name':'impulse2','-webkit-animation-delay':'0s'}); 
$('#open').css({'opacity':'1','-webkit-transition':'opacity 1s'}).delay(6000).fadeIn();
};

$('#top').click(function () {
$('.left').hide();$('.right').hide();$('.bottom').hide();$('.close').hide();
$('.top').show();$('.flipWrapper').find('.card').addClass('flippedt');
setTimeout(topbutton,3000);
});

function topbutton() { 
$('#menu-t-button').addClass("animate");
$('#menu-radial-3buttonb').addClass("animate");  
$('.close').delay(6000).fadeIn(2000);
};

function closetop() {
$('.barv').removeClass("animate");
$('.close').delay(2000).hide();
$('#menu-t-button').removeClass("animate");  
$('#menu-radial-3buttonb').removeClass("animate");   
setTimeout(tclose,3000); 
};

function tclose() {
$('.flipWrapper').find('.card').removeClass('flippedt');
$('.close').delay(6000).show();
};
  
$('#right').click(function () {
$('.left').hide();$('.top').hide();$('.bottom').hide();$('.close').hide();    $('.right').show();$('.flipWrapper').find('.card').addClass('flippedr');
setTimeout(rightbutton,3000);   
});

function rightbutton() { 
$('#menu-r-button').addClass("animate");
$('#menu-radial-3button').addClass("animate");  
$('.close').delay(6000).fadeIn(2000);
};

function closeright() {
$('.barv').removeClass("animate");
$('.close').delay(2000).hide();
$('#menu-r-button').removeClass("animate");  
$('#menu-radial-3button').removeClass("animate");   
setTimeout(rclose,3000); 
};

function rclose() {
$('.flipWrapper').find('.card').removeClass('flippedr');
$('.close').delay(10000).show();
};

$('#left').click(function () {
$('.top').hide();$('.right').hide();$('.bottom').hide();$('.close').hide();
$('.left').show();$('.flipWrapper').find('.card').addClass('flippedl');
setTimeout(leftbutton,3000);
});

function leftbutton() { 
$('#menu-l-button').addClass("animate");
$('#menu-radial-2button').addClass("animate"); 
$('.close').delay(6000).fadeIn(2000);
};

function closeleft() {
$('.barv').removeClass("animate");
$('.close').delay(2000).hide();
$('#menu-l-button').removeClass("animate");  
$('#menu-radial-2button').removeClass("animate");
setTimeout(lclose,3000); 
};

function lclose() {
$('.flipWrapper').find('.card').removeClass('flippedl');
$('.close').delay(6000).show();
};

$('#bottom').click(function () {
$('.top').hide();$('.right').hide();$('.left').hide();$('.close').hide();
$('.bottom').show();$('.flipWrapper').find('.card').addClass('flippedb');
setTimeout(bottombutton,3000);
});

function bottombutton() { 
$('#menu-b-button').addClass("animate");
$('.close').delay(6000).fadeIn(2000);
};

function closebottom() {
$('.barv').removeClass("animate");
$('.close').delay(2000).hide();
$('#menu-b-button').removeClass("animate");  
setTimeout(bclose,3000); 
};

function bclose() {
$('.flipWrapper').find('.card').removeClass('flippedb');
$('.close').delay(6000).show();
};

Comments

More from anthonygermishuys

A Pen by Anthony

A Pen by Anthony

By anthonygermishuys
A Pen by Anthony

A Pen by Anthony

By anthonygermishuys
A Pen by Anthony

A Pen by Anthony

By anthonygermishuys
A Pen by Anthony

A Pen by Anthony

By anthonygermishuys

You Might Also Like

STYLEGUIDE ADECCO GROUP WW

STYLEGUIDE ADECCO GROUP WW

By ewiener
A Pen by 2020cbustos

A Pen by 2020cbustos

By 2020cbustos
Twitch Viewer

Twitch Viewer

By TranAP
Experiments with inputs [number, text and tel]

Experiments with inputs [number, text and tel]

By luisfrancisco02
Local Weather - (FreeCodeCamp)

Local Weather - (FreeCodeCamp)

By grsmith
Iphone Plug in Single Div animation/pure CSS drawing

Iphone Plug in Single Div animation/pure CSS drawing

By agoodwin
Sunrise Cut-out

Sunrise Cut-out

By Russell Kitchen
vezba

vezba

By deyonez
© 2018 - Copyright CodeSeek.co
contact email