Hexipal - For #PassThePen Video Game Quiz

In this example below you will see how to do a Hexipal - For #PassThePen Video Game Quiz with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by KristopherVanSant, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright KristopherVanSant ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Hexipal - For #PassThePen Video Game Quiz</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id='hexipal'>
  <div class='hexagon1'></div>
  <div class='hexagon2'></div>
  <div class='hexagon3'></div>
  <div class='hexagon4'></div>
  <div class='eyes'>
    <div class='eye'></div>
    <div class='eye'></div>
  </div>
  <div class='smile'>U</div>
  <div class='left-arm'></div>
  <div class='left-hands'>E</div>
  <div class='right-arm'></div>
  <div class='right-hands'>E</div>
  <div class='left-leg'></div>
  <div class='right-leg'></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KristopherVanSant/hexipal-for-passthepen-video-game-quiz-xWQbBX */
#hexipal {
  display: flex;
  align-content: center;
  justify-content: center;
  height: 275px;
  width: 200px;
  font-family: "Comic Sans MS", sans-serif;
}

/* Hexagon 1  */
.hexagon1 {
  position: relative;
  width: 125px;
  height: 72.17px;
  background-color: #573718;
  margin: 66.08px 0;
}
.hexagon1:before, .hexagon1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 62.5px solid transparent;
  border-right: 62.5px solid transparent;
}
.hexagon1:before {
  bottom: 100%;
  border-bottom: 36.08px solid #573718;
}
.hexagon1:after {
  top: 100%;
  width: 0;
  border-top: 36.08px solid #573718;
}

/* Hexagon 2 */
.hexagon2 {
  position: absolute;
  width: 115px;
  height: 66.4px;
  background-color: #feeccf;
  margin: 33.2px 0;
  margin-top: 69px;
}
.hexagon2:before, .hexagon2:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 57.5px solid transparent;
  border-right: 57.5px solid transparent;
}
.hexagon2:before {
  bottom: 100%;
  border-bottom: 33.2px solid #feeccf;
}
.hexagon2:after {
  top: 100%;
  width: 0;
  border-top: 33.2px solid #feeccf;
}

/* Hexagon 3 */
.hexagon3 {
  position: absolute;
  width: 90px;
  height: 51.96px;
  background-color: #fc852e;
  margin: 25.98px 0;
  margin-top: 76px;
}
.hexagon3:before, .hexagon3:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
}
.hexagon3:before {
  bottom: 100%;
  border-bottom: 25.98px solid #fc852e;
}
.hexagon3:after {
  top: 100%;
  width: 0;
  border-top: 25.98px solid #fc852e;
}

/* Hexagon 4 */
.hexagon4 {
  position: absolute;
  width: 70px;
  height: 40.41px;
  background-color: #ffb141;
  margin: 20.21px 0;
  margin-top: 82px;
}
.hexagon4:before, .hexagon4:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
}
.hexagon4:before {
  bottom: 100%;
  border-bottom: 20.21px solid #ffb141;
}
.hexagon4:after {
  top: 100%;
  width: 0;
  border-top: 20.21px solid #ffb141;
}

/* Face */
.eyes {
  position: absolute;
  display: flex;
  margin-top: 80px;
}

.eye {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0 17px;
}

.smile {
  position: absolute;
  margin-top: 102px;
  font-size: 21px;
  -webkit-font-stretch: expanded;
}

/* Arms and Legs  */
.left-arm {
  position: absolute;
  z-index: -1;
  margin-top: 115px;
  margin-left: -70px;
  border-left: 4px solid black;
  height: 30px;
  transform: rotate(40deg);
}
.left-arm:before {
  content: "";
  position: absolute;
  border-left: 4px solid black;
  height: 30px;
  transform: rotate(97deg);
  margin-left: 10px;
  margin-top: 15px;
}

.left-hands {
  position: absolute;
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 150px;
  margin-left: -54px;
  transform: rotate(48deg);
}

.right-arm {
  position: absolute;
  z-index: -1;
  margin-top: 117px;
  margin-left: 70px;
  border-left: 4px solid black;
  height: 30px;
  transform: rotate(-40deg);
}
.right-arm:before {
  content: "";
  position: absolute;
  border-left: 4px solid black;
  height: 30px;
  transform: rotate(80deg);
  margin-left: -17px;
  margin-top: 17px;
}

.right-hands {
  position: absolute;
  margin-top: 154px;
  margin-left: 61px;
  transform: rotate(130deg);
  font-weight: bold;
  font-size: 1.2em;
}

.left-leg {
  position: absolute;
  z-index: -1;
  border-left: 4px solid black;
  height: 70px;
  margin-top: 147px;
  margin-left: -30px;
}
.left-leg:before {
  content: "";
  position: absolute;
  margin-top: 60px;
  margin-left: -15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 15px;
  border-color: transparent transparent black transparent;
}

.right-leg {
  position: absolute;
  z-index: -1;
  border-left: 4px solid black;
  height: 70px;
  margin-top: 147px;
  margin-left: 30px;
}
.right-leg:before {
  content: "";
  position: absolute;
  margin-top: 60px;
  margin-left: -4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 0 15px;
  border-color: transparent transparent transparent black;
}

Comments