Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
<body>

<div class="container-fluid background-all">
  <div class="row-intro">
    <div class="row"> <!-- Introduction -->
      <div class="col-xs-6">
      <h3>Batsou Eleftheria</h3>
      </div> <!-- end first col-xs-6  -->
      <div class="col-xs-6">
       <div class="up-buttons text-right">
        <button class="btn target">
          <a href="#Home">Home </a>
        </button>
        <button class="btn target">
          <a href="#About">About </a> 
        </button>
        <button class="btn target">
          <a href="#Portofolio">Portfolio </a>
        </button>
        <button class="btn target">
         <a href="#Contact">Contact </a> 
        </button>
        </div>
      
      </div> <!-- end second col-xs-6  -->
    </div> <!-- End Introduction -->
  </div> <!-- End class row-intro-->
  
  <div class="row" id="Home"> <!-- Home -->
    <img class="img-responsive image" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/portofolio%20codepen%20image%20with%20words_zpsijpuce5c.jpg">
    
  </div> <!-- End class Home-->
   
  <div class="row" id="About"> <!-- == About == -->                                                                             
    <div class="col-xs-6"> <!-- about me -->
      <p>Hi! I am Eleftheria and I am a Web Developer currently based in Amsterdam. I have a degree from the university of Western Macedonia in the field of Informatics and Telecommunication engineering. <br></br>
      My passion is to use technology based solutions, to help solve real world challenges.<br></br>
      I like travelling and dancing.</p>
    </div> <!-- end class col-xs-6 --> 
  
    <div class="col-xs-6"> <!-- my picture -->
      <!-- start: code for flipping the image -->
      <!-- code insiration: https://davidwalsh.name/css-flip-->
      
      <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	      <div class="flipper">
		      <div class="front">
			    <!-- front content -->
           <img class="face-image img-responsive text-center" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/my%20face/kappalambdataurho-v3_zpseh1dg7kw.png" alt="profile photo-front" >
		      </div> <!-- end: class front-->
		      <div class="back">
			    <!-- back content  -->
            <img class="face-image img-responsive text-center" src="http://i1356.photobucket.com/albums/q729/eleftheria_b/my%20face/9fe14b75-c096-49f0-b7a7-63c318cfc171_zpsaqjlwakm.png" alt="profile photo with filter">
		      </div> <!-- end: class back -->
		    </div> <!-- end: class flipper-->
	    </div> <!-- end: class flip-container--> 
      <!-- end: code for flipping the image -->      
    </div> <!-- end class col-xs-6, my picture-->  
  </div> <!-- end About -->
  
  <div class="row rowLM">
        <!-- code for Collapse with js and css -->
        <!-- Don t forget the things in the head-->
        <button id="button" class="btn target"><a href="#LearnMore">Learn more about me :) </a></button>
        <br></br> <br></br>
        <div id="wrapper">
          <p>
            <b>Languages and Frameworks:</b>          
              <li>Good Knowledge: HTML5, CSS3, Bootstrap, Javascript, JQuery, Photoshop </li>
              <li>Basic Knowledge: Php, Java, C++, C, Matlab, Git</li>
              <li>Web Developing CMS: Drupal, WordPress </li>
              <li>Databases: MySQL</li>
              <li>Operating Systems: Windows, Linux</li>
           </p>
           <p>
            <b>Tools & Expertise: </b>
              <li>Responsive Web Design</li>
              <li>Image Processing</li>
             <br></br>
           </p>
          </div> <!-- end class wrapper -->    
        <!-- end code for Collaspe  -->
      </div> <!-- end class row rowLM -->

  <div class="row" id="Portofolio" style="background-color:orange"> <!-- Portofolio -->
    <h2 class="text-center"> Portfolio </h2>
    <h4 class="text-center">Javascript, Jquery, Bootstrap and API Projects </h4>
    <!-- code inspiration for the image gallery: http://www.the-art-of-web.com/css/infinite-photo-carousel/#vertical -->
    
    <div id="stage">
      <div id="rotator" style="-webkit-animation-name: rotator;">
        <!-- Javascript, Jquery, Bootstrap and API Projects-->		
		<a href="https://codepen.io/EleftheriaBatsou/full/RRYgqP/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/11e40fa3-22d2-4c71-8aa4-7d53c994ae68_zpsc3eigb9e.jpg" alt="Digital Clock" width="140" title="Digital Clock"/></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/vKzmyR" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/70966daf-c278-41ae-ae7c-ec9e71f51d62_zps5zitomr8.jpg" alt="Sketch" width="140" title="Sketch"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/Gqdvgd" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/b2a83c86-d2d7-4a04-8b04-e9a14da4fbc6_zpsgqmehd97.jpg" alt="Code Player" width="140" title="Code Player"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/vKjmqN" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/c56b74f4-9af3-47c5-b586-8cbb99c76189_zpsvn7g43pu.jpg" alt="Test your reactions game" width="140" title="Test your reactions game"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/zBWNyB" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/b3944858-29f4-4e97-8c2c-e3b96729e1f0_zpsvd4x4m0d.jpg" alt="Flipboard" width="140" title="Flipboard"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/NAYbbp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/newsReader_zpsusk6mfen.jpg" alt="Newsreader" width="140" title="Newsreader"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/qNoNyA" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/pushMenu_zpsartzv5co.jpg" alt="Push Menu" width="140" title="Push Menu"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/QEAgkJ" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/validationForm_zpsi7psyi3u.jpg" alt="Validation Form" width="140" title="Validation Form"></a>
		
		<a href="https://codepen.io/EleftheriaBatsou/full/vKdkkp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/465ec332-b18f-4984-8734-b0faada69d5b_zpsqhdprelj.jpg" alt="Accordion Style" width="140" title="Accordion Style"></a>
		
		<a href="https://codepen.io/EleftheriaBatsou/full/QKwVZO" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/sun%20earth%20and%20code_zpshwxtlyyp.jpg" alt="Sun, Earth, Code" width="140" title="Sun, Earth, Code"></a>
		
		<a href="https://codepen.io/EleftheriaBatsou/full/dporQp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20js%20and%20jq/Animate%20your%20name_zpsoojpnxvj.jpg" alt="Animatate Your name" width="140" title="Animatate Your name"></a>
		
		<!-- Bootstrap + API projects-->

		<a href="https://codepen.io/EleftheriaBatsou/full/pbVOPo" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/LandingPageForAnApp_zpstxo81kfk.jpg" alt="Landind Page For An App" width="140" title="Landind Page For An App"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/EyLwqr" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/bootstrapMenu_zpsejqiv98s.jpg" alt="Bootstrap Menu" width="140" title="Bootstrap Menu"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/BzOaqp" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/twitterApi_zpsoexyucpf.jpg" alt="Twitter Api" width="140" title="Twitter Api"></a>
        
		<a href="https://codepen.io/EleftheriaBatsou/full/kXRNjg" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/project%20images%20bootsrap%20and%20api/PostalCodeFor_zpsvrkiznbc.jpg" alt="Postal Code For" width="140" title="Postal Code For"></a>
		
      </div> <!-- end: id rotator-->
    </div> <!-- -end: id stage -->
    
    <h4 class="text-center">FreeCodeCamp Front-End Projects </h4>  
        <!-- FreeCodeCamp Front-End Projects-->
	      <div class="stageFCC" style="width: 220px; height: 220px;">
        <div class="cubespinner">
          
          <div class="face1">
            <a href="https://s.codepen.io/EleftheriaBatsou/debug/JXjPxZ" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/b635fc9c-f83b-4d5c-8477-e146acba64f8_zpsvwdm6p2q.png" alt="calculator" title="Calculator"/></a>
          </div>
          
          <div class="face2">
            <a href="https://codepen.io/EleftheriaBatsou/full/jqEPBg/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/b8c9c68f-66de-4d92-911d-5a0093ef9d7c_zpsva41a6vl.png" alt="Pomodoro Clock"  title="Pomodoro Clock"></a>
          </div>
          
          <div class="face3">
            <a href="https://codepen.io/EleftheriaBatsou/full/NxZYoE/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/a800e61a-ab53-41fd-91ad-16dbd1a5616e_zpsk6igea3b.png" alt="Random quote generator" title="Random quote generator"></a>
          </div>
          
          <div class="face4">
            <a href="https://codepen.io/EleftheriaBatsou/full/JXdEQe/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/96e6f6cc-2f10-4bfe-8031-78c161fc918e_zps19s1uovm.png" alt="Simon Game"  title="Simon Game"></a>
          </div>
          
          <div class="face5">
            <a href="https://codepen.io/EleftheriaBatsou/full/JXddGX" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/d53a1107-8913-4a44-95bc-c33e567cfe84_zps4hmoyj6y.png" alt="Tac tac toe game" title="Tac tac toe game" ></a>
          </div>
          
          <div class="face6"><a href="https://codepen.io/EleftheriaBatsou/full/MKNppY/" target="_blank"><img src="http://i1356.photobucket.com/albums/q729/eleftheria_b/codepen%20-%20front%20end%20pictures/fbaea6c0-2bdf-447b-a313-5c89246379b5_zpshwrlhhk2.png" alt="Wikipedia Viewer"></a></div>
        </div>
      </div>
	   
  </div> <!-- End portofolio-->

  <div class="row" id="Contact" style="background-color:#94ed64"> <!-- Contact -->  
    <div class="col-xs-6">
    	<p>Let's stay in touch!</br>Whatever the reason is, don't hesitate to contact me at: </br><b>eleftheriabatsou@gmail.com</b></p>
    </div>

    <div class="col-xs-6">
    <p> Υou can also find me here: </p>    
      <div id="media">
       
        <button class="target contactButtons" id="Twitter" title="Twitter"><a href="https://twitter.com/BatsouElef" target="_blank"><img src="http://www.foodspotting.com/images/twitter-icon.png?1458072226"></a></button>
        
        <button class="target contactButtons" id="Github" title="GitHub"><a href="https://github.com/EleftheriaBatsou" target="_blank"><img src="http://www.fancyicons.com/free-icons/222/simple/png/32/github_32.png"></a></button>
        
        <button class="target contactButtons" id="LinkedIn" title="LinkedIn"><a href="https://gr.linkedin.com/in/eleftheriabatsou" target="_blank"><img src="http://codersblock.com/images/social-icons/footer/linkedin.png"></a></button>
        
        <button class="target contactButtons" id="GooglePlus" title="Google Plus"><a href="https://plus.google.com/106572474276639965035" target="_blank"><img src="http://scottyzen.com/images/social/googleplus.png"></a></button>		
        
        <button class="target contactButtons" id="CodePen" title="CodePen"><a href="https://codepen.io/EleftheriaBatsou" target="_blank"><img src="https://chriswrightdesign.com/img/icon_codepen.svg"></a></button>		
        
        <button class="target contactButtons" id="FCC" title="Free Code Camp"><a href="https://www.freecodecamp.com/eleftheriabatsou" target="_blank"><img src=" https://d262ilb51hltx0.cloudfront.net/fit/c/32/32/1*MotlWcSa2n6FrOx3ul89kw.png"></a></button>
        
      </div> <!-- End: media-->
      
    
    </div> 
  </div> <!-- end Contact --> 


  <div class="row"> <!-- All rights -->
  <p class="text-center p-bottom">Copyright © <a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria </a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a>| 2017. </p>
  </div> <!-- End: All rights -->
</div> <!--End class container-fluid background-all -->

</body>
</html>
            
          
!
            
              .background-all{
  background-color: #6495ed; /* light blue */
  color: #050017; /* dark blue */
}

body{
  background-color:#6495ed; /* light blue */
}

a:link    {color: #050017; text-decoration:none}
a:visited {color: #050017; text-decoration:none}
a:hover   {color: #6495ed; text-decoration:none}
a:active  {color: #050017; text-decoration:underline}

.up-buttons{ /* Menu buttons */
  margin: 4% 4% 2%;   
}
.image { /* Home Image with the h1 */
   position: relative; 
   width: 100%; 
}
h1 { 
  /* 
   position: absolute;  
   */
}

p { 
   position: relative; 
   font-size: 20px;
   margin:20% 0% 20% 20%;
  }

.face-image{
  margin:20% 0% 20% 20%;
  height: 340px;  /* was: 340px*/
}

.p-bottom{ /* For the: Copyright section*/
  font-size:12px;
  margin: 5px;
}
/* changes 7/5/16 
   if I use the default hover (I set it above) 
   the background color is blue so you cant see anything.
   In this way, i change the hover color to black
*/
.p-bottom a:hover{ color: black; text-decoration:underline;}

/* changes 2/4/16 */
/* mostly about the header and home*/
.row-intro{
 position: fixed; 
 right: 0;
 width: 100%;
 border: 3px solid #94ed64; /* green*/
 background-color: #6495ed;
 z-index: 10;  
 font-family: "Bauhaus 93", "Times New Roman";
 font-size: 30%;
 font-color: #050017;
}
.row-intro h3{
  font-size: 8em;
  margin: 4% 4% 4%; 
  color: inherit; 
}

#Home h1{
  font-size: 500%;
  font-family: "Arial Black";
  top: 50% /* to be in the vertical middle */
}

.btn{
  background-color: orange;
  color: #050017; /* dark blue*/
  font-size: 400%;
  font-family: "Bauhaus 93", "Arial Black";
  margin-bottom: 4px;
  margin-right: 4px;
  border: 3px solid #94ed64; /* green */
}

.btn:hover{ /* enlarging image on mouseover*/
        -moz-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -webkit-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -o-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -ms-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}
  


/** 04/04/16 
  * changes in the "About" section a.k.a "Learn More" 
  * How to make the button "learn more about me" 
**/

#wrapper {
  background: #6495ed;
  overflow: hidden;
  transition: max-height 300ms;
  max-height: 0; /* <---hide by default */
  left: 50%;
}
#wrapper.open {
  max-height: 500px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}

.rowLM {
  font-size: 50%;
  margin-left: 10%;
  margin-bottom: 0%;
  position: relative;
  top: -40px
 
}
.rowLM p{
  margin: 0% 0% 20px 0%;
}
.rowLM li {
  font-size: 20px; 
}

/* end "Learn More" */


/* 5/4/16 */
/* Changes in contact section */

#Contact p{
  margin-top: 10%;
  margin-bottom: 5%;
}

/* 7/5/16 */
.contactButtons{
   background-color: orange; 
   padding: 3px;
   margin-bottom: 3px;
   border: 3px solid #6495ed; /* blue */
}


.contactButtons:hover{ /* enlarging image on mouseover*/
        -moz-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -webkit-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -o-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -ms-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}

#media{
  margin-left: 20%;
}

/* End contact section*/

/* Changes 11-09-16*/

/* About section: let's do sth better with the image, like flip it! */

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px; /* was 320px */
	height: auto; /*was 480px */
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

/* Changes 12-09-16 */
/* ========== Portfolio section ================ */

/* Image gallery: code priveded by --> http://www.the-art-of-web.com/css/infinite-photo-carousel/#vertical    */

#stage {
    margin: 2em auto 1em 50%; 
    height: 140px; 
    -webkit-perspective: 1200px; 
    -webkit-perspective-origin: 0 50%;
  }

  #rotator a {
    position: absolute;
    left: -81px;
  }
  #rotator a img {
    padding: 3px;
    border: 1px solid #94ed64; /* Light green */
    background: #6495ed; /*Light blue */
    -webkit-backface-visibility: hidden;
    
  }

  #rotator a:nth-of-type(1) img {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
  }
  #rotator a:nth-of-type(2) img {
    -webkit-transform: rotateY(-60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(3) img {
    -webkit-transform: rotateY(-30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(4) img {
    -webkit-transform: translateZ(300px);
    background: #94ed64; /*was: #000 */
  }
  #rotator a:nth-of-type(5) img {
    -webkit-transform: rotateY(30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(6) img {
    -webkit-transform: rotateY(60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(n+7) { display: none; }

/* a touch of animation*/
 @-webkit-keyframes rotator {
    from { -webkit-transform: rotateY(0deg);  }
    to   { -webkit-transform: rotateY(30deg); }
  }

  #rotator {
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
  }
  
  #rotator:hover {
    -webkit-animation-play-state: paused;
  }
 

/* =========================== */
/* code for freecodecamp front-end pforjects 
inspired by: http://www.the-art-of-web.com/css/3d-transforms/
*/
  @-webkit-keyframes spincube {
    from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { -webkit-transform: rotateY(-90deg);                           }
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);           }
    66%      { -webkit-transform: rotateY(-270deg) rotateX(90deg);           }
    83%      { -webkit-transform: rotateX(90deg);                            }
  }

  @keyframes spincube {
    from,to {
      -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
      -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
    }
    33% {
      -moz-transform: rotateY(-90deg) rotateZ(90deg);
      -ms-transform: rotateY(-90deg) rotateZ(90deg);
      transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
      -moz-transform: rotateY(-180deg) rotateZ(90deg);
      -ms-transform: rotateY(-180deg) rotateZ(90deg);
      transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
      -moz-transform: rotateY(-270deg) rotateX(90deg);
      -ms-transform: rotateY(-270deg) rotateX(90deg);
      transform: rotateY(-270deg) rotateX(90deg);
    }
    83% {
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
  }

  .cubespinner {
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;

    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;
    -moz-transform-origin: 60px 60px 0;
    -ms-transform-origin: 60px 60px 0;
    transform-origin: 60px 60px 0;
    
  }

  .cubespinner div { 
    position: absolute; 
    width: 120px;
    height: 120px;
    border: 3px solid #94ed64;
    left: 50%
  }

  .cubespinner {
    margin-top: 25px;
    margin-bottom: auto;
    position: absolute;    
    left: 37%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

#Portofolio{
  height: 600px !important;
}

  .cubespinner .face1 {
    -webkit-transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -ms-transform: translateZ(60px);
    transform: translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face2 {
    -webkit-transform: rotateY(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) translateZ(60px);
    transform: rotateY(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face5 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face6 {
    -webkit-transform: rotateX(-90deg) translateZ(60px);
    -moz-transform: rotateX(-90deg) translateZ(60px);
    -ms-transform: rotateX(-90deg) translateZ(60px);
    transform: rotateX(-90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }




            
          
!
            
              $(document).ready(function(){  });

// =============== About ==================//
// Start: Toggle Button
$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  b.click(function() {
    w.toggleClass('open'); /* <-- toggle the application of the open class on click */
  });
});
// End: Toggle Button





// ================ PORTFOLIO ==================//

/* 
code for js, jq, bootstrap and api projects

detect when the animation has ended in order to coordinate the photos moving with the wheel reset. Without this the wheel would only alternate between the first two photos. 

http://www.the-art-of-web.com/css/infinite-photo-carousel/#vertical
*/

document.addEventListener("DOMContentLoaded", function() {

    var rotateComplete = function() {
      target.style.webkitAnimationName = "";
      target.insertBefore(arr[arr.length-1], arr[0]);
      setTimeout(function(el) {
        el.style.webkitAnimationName = "rotator";
      }, 0, target);
    };

    var target = document.getElementById("rotator");
    var arr = target.getElementsByTagName("a");

    target.addEventListener("webkitAnimationEnd", rotateComplete, false);

  }, false);



// Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.

  var rotateComplete = function() {
    with(target.style) {
      webkitAnimationName = MozAnimationName = msAnimationName = "";
    }
    target.insertBefore(arr[arr.length-1], arr[0]);
    setTimeout(function(el) {
      with(el.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "rotator";
      }
    }, 0, target);
  };

  var target = document.getElementById("rotator");
  var arr = target.getElementsByTagName("a");

  target.addEventListener("webkitAnimationEnd", rotateComplete, false);
  target.addEventListener("animationend", rotateComplete, false);
  target.addEventListener("MSAnimationEnd", rotateComplete, false);

//==============================//



                  

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console