plumz

by Joe

HTML

<!------ Include the above in your HEAD tag ---------->

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PLumz</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap" rel="stylesheet">

  </head>

  <body>
    <ul>
      <li><a href="#"><i class="fa" aria-hidden="true">&#x50;</i></a></li>
      <li><a href="#"><i class="fa" aria-hidden="true">&#x4c;</i></a></li>
      <li><a href="#"><i class="fa" aria-hidden="true">&#x55;</i></a></li>
      <li><a href="#"><i class="fa" aria-hidden="true">&#x4d;</i></a></li>
      <li><a href="#"><i class="fa" aria-hidden="true">&#x5a;</i></a></li>
    </ul>
  </body>

</html>

CSS

ul li .fa {
  font-family: 'Odibee Sans', cursive;
}


body {
  margin: 0;
  padding: 0;
  background-color: #ccc;
	background-image: url(:https://images.alphacoders.com/889/889210.png;);
}

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;

}

ul li {
  list-style: none;
  margin: 0 40px;

}

ul li .fa {
  font-size: 40px;
  color: #737373;
  line-height: 80px;
  transition: .5s;

}

ul li a {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  transform: perspective(100px) rotate(-30deg) skew(25deg) translate(0, 0);
  transition: .5s;
  box-shadow: -20px 20px 10px rgb(0, 0, 0, 0.5);
}

ul li a::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #b1b1b1;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
}

ul li a::after {
  content: "";
  position: absolute;
  top: 80px;
  left: -11px;
  height: 20px;
  width: 100%;
  background: #b1b1b1;
  transition: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
  box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}

ul li:hover .fa {
  color: #fff;
}

ul li a:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
  box-shadow: -50px 50px 50px rgb(0, 0, 0, 0.5);
}

ul li:hover:nth-child(1) a {
  background: #55acee;
}

ul li:hover:nth-child(1) a:before {
  background: #4184b7;
}

ul li:hover:nth-child(1) a:after {
  background: #4d9fde;
}

ul li:hover:nth-child(2) a {
  background: #55acee;
}

ul li:hover:nth-child(2) a:before {
  background: #4184b7;
}

ul li:hover:nth-child(2) a:after {
  background: #4d9fde;
}

ul li:hover:nth-child(3) a {
  background: #55acee;
}

ul li:hover:nth-child(3) a:before {
  background: #4184b7;
}

ul li:hover:nth-child(3) a:after {
 ...