A Pen by Lance Vickers

undefined

Forked from Michael Rossi's Pen LVmWKN.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Lance Vickers</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="team-work-board-1">
  <li class="letter-flip t-1">T</li>
  <li class="letter-flip e-1">E</li>
  <li class="letter-flip a-1">A</li>
  <li class="letter-flip m-1">M</li>
  <li class="letter-flip w-1">W</li>
  <li class="letter-flip o-1">O</li>
  <li class="letter-flip r-1">R</li>
  <li class="letter-flip k-1">K</li>
</ul>
<ul class="team-work-board-1">
  <li class="letter-flip t-2">T</li>
  <li class="letter-flip e-2">E</li>
  <li class="letter-flip a-2">A</li>
  <li class="letter-flip m-2">M</li>
  <li class="letter-flip w-2">W</li>
  <li class="letter-flip o-2">O</li>
  <li class="letter-flip r-2">R</li>
  <li class="letter-flip k-2">K</li>
</ul>
<ul class="final-word">
  <li class="t">T</li>
  <li class="e">E</li>
  <li class="a">A</li>
  <li class="m">M</li>
  <li class="w">W</li>
  <li class="o">O</li>
  <li class="r">R</li>
  <li class="k">K</li>
</ul>
  <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/lancevickers/a-pen-by-lance-vickers-zGjdmQ */
body {
  width: 1170px;
  margin: 0 auto;
}

.final-word li {
  display: inline-block;
  font-size: 165px;
}

ul {
  text-align: center;
}

.letter-flip {
  display: inline-block;
  background: #000;
  font-size: 80px;
  color: #000;
  padding: 20px;
  width: 80px;
  text-align: center;
  transform: rotateY(180deg);
  transition: ease .3s;
  cursor: pointer;
}
.clicked {
  transform: rotateY(0deg);
  color: #fff;
}
.unclicked {
  transform: rotateY(180deg);
   transition: ease .3s;
  color: #000;
}
.t, .e, .a, .m, .w, .o, .r, .k {
  visibility: hidden;
}

.revealed {
  visibility: visible;
}

.matching {
  background: #67BE61;
}

.not-matching {
  background: #EF4136;
}


/*Downloaded from https://www.codeseek.co/lancevickers/a-pen-by-lance-vickers-zGjdmQ */
$(function() {
  $(".letter-flip").click(function() {
    $(this).addClass("clicked");
    setTimeout(function(){

$(this).removeClass("clicked")
},2000);
    
  });
});

$(function() {
  $(".t-1").click(function() {
    $('.t').addClass("revealed");
  });
});

Comments