test

index.pug

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Reenie+Beanie" />

<!--plattegrond-->
<div class="plattegrond plattegrond-handgetekend">
  <div style="text-align: center;" class="boekenkast" onclick="boekenkast()">Boeken</div>
  <div class="zitkussen" id="zit1" onclick=""></div>
  <div class="zitkussen" id="zit2" onclick=""></div>
  <div class="zitkussen" id="zit3" onclick=""></div>
  <div class="zitkussen" id="zit4" onclick=""></div>
  <div class="kast" id="kast1" onclick=""></div>
  <div class="kast" id="kast2" onclick=""></div>
  <div class="kast" id="kast3" onclick=""></div>
  <div class="kast" id="houten" onclick=""></div>
  <div class="kast" id="houten2" onclick=""></div>
  <div class="aquarium" onclick=""></div>
  <div class="bank" id="klein" onclick=""></div>
  <div class="stoel" id="stoel1" onclick=""></div>
  <div class="kast" id="houten3" onclick=""></div>
  <div class="bank" id="knutsel" onclick=""></div>
  <div class="stoel" id="stoel2" onclick=""></div>
  <div class="stoel" id="stoel3" onclick=""></div>
</div>


<!-- <div class="container" ><span id="showbook1"> Ann en Sofie lazen gisteren dit boekje. <br> Ze verstopten er een briefje in. <br> Klik op het boek om het briefje te lezen.</span><a id="showbook2" class="book" href="https://theoutstanding.dev/" target="_blank" rel="noreferrer noopener">
 <img alt="The Outstanding Developer by Sebastien Castiel" src="https://media.s-bol.com/YE6pjxOBmKGn/550x811.jpg">-->
</>
</>

script.js

/*function boekenkast() {
  var x = document.getElementById("showbook1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
  var x = document.getElementById("showbook2");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}*/

style.scss

body {
	background: #f8f8f8; /*background-image: url("https://img.pngio.com/fully-simple-wrinkled-paper-background-paper-wrinkle-background-wrinkled-paper-png-640_856.png"); https://codepen.io/marioestrella/details/oNxXKKZ*/
	font-family: "Reenie Beanie";
  color: #383838; /*default text color*/
  cursor: default;
}

/*plattegrond*/
/*https://codemyui.com/comicbook-inspired-hand-drawn-borders/*/
.plattegrond{
  margin: 30px;
  width: 500px;
  height: 300px;
  background: #bbb;
  border: solid black;
  border-color: black;
  float: left; 
}

.plattegrond-handgetekend{
  border-width: 4px 4px 5px 5px;
  border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
  transform: rotate(-2deg);
}

/*meubels*/
.boekenkast{
  transform: rotate(2deg);
  padding: 0 5px;
  position: fixed;
  top: 12px;
  right: 25px;
  width: 40px;
  height: 15px;
  background: #3f3f3f;
  color: #fff;
  border: 1px solid #222;
  box-shadow: 3px 3px 0 #222;
}
.boekenkast:hover{
  background: #1aff1a;
  color: #000;
  cursor: help;
}

.zitkussen{
  border: 1px solid #222;
  box-shadow: 1px 1px 0 #222;
}
.zitkussen#zit1{
  transform: rotate(272deg);
  padding: 0 5px;
  position: fixed;
  top: 32px;
  right: 80px;
  width: 10px;
  height: 15px;
  background: #36602c;
}
.zitkussen#zit2{
  transform: rotate(272deg);
  padding: 0 5px;
  position: fixed;
  top: 58px;
  right: 78px;
  width: 15px;
  height: 15px;
  background: #284866;
 }
.zitkussen#zit3{
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 37px;
  right: -5px;
  width: 17px;
  height: 15px;
  background: #19e194;
  border-radius: 10%;
 }
.zitkussen#zit4{
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 66px;
  right: -4px;
  width: 17px;
  height: 15px;
  background: #19e194;
  border-radius: 10%;
 }

.kast{
  background: #d3d3d3;
  border: 1px solid #222;
  box-shadow: 3px 3px 0 #222;
}
.kast#kast1{
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 35px;
  right: 73
  width: 60px;
  height: 18px;
}
.kast#kast2{
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 172px;
  right: 79px;
  width: 60px;
  height: 18px;
}
.kast#kast3{
  transform: rotate(2deg);
  padding: 0 5px;
  position: fixed;
  top: 212px;
  right: 15px;
  width: 60px;
  height: 18px;
}
.kast#houten{
  background: #533619;
  transform: rotate(182deg);
  padding: 0 5px;
  position: fixed;
  top: 95px;
  right: 4px;
  width: 20px;
  height: 18px;
}
.kast#houten2{
  background: #ddcebf;
  transform: rotate(182deg);
  padding: 0 5px;
  position: fixed;
  top: 94px;
  right: 37px;
  width: 25px;
  height: 18px;
}
.kast#houten3{
  background: #ddcebf;
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 165px;
  right: -17px;
  width: 55px;
  height: 18px;
}
.aquarium{
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 98px;
  right: 35px;
  width: 8px;
  height: 10px;
  background: #80c5de;
  color: #fff;
  border: 1px solid #222;
  border-radius: 10%;
}
.aquarium:hover{
  background: #1aff1a;
  color: #000;
  cursor: help;
}

.bank{
  border: 1px solid #222;
  box-shadow: 1px 1px 0 #222;
}
.bank#klein{
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 119px;
  right: 2px;
  width: 10px;
  height: 15px;
  background: #fff;
}
.bank#klein{
  transform: rotate(92deg);
  padding: 0 5px;
  position: fixed;
  top: 119px;
  right: 2px;
  width: 10px;
  height: 15px;
  background: #fff;
}
.bank#knutsel{
  transform: rotate(272deg);
  padding: 0 5px;
  position: fixed;
  top: 154px;
  right: 75px;
  width: 25px;
  height: 20px;
  background: #eee6df;
}

.stoel{ /*http://jsfiddle.net/hashem/u78bQ/*/
  width: 12px;
  height: 6px;
  background-color: gold;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
  border: 1px solid #000;
  border-bottom: 0;
}
.stoel#stoel1{
  transform: rotate(272deg);
  position: fixed;
  top: 124px;
  right: 19px;
}
.stoel#stoel2{
  transform: rotate(92deg);
  position: fixed;
  top: 152px;
  right: 71px;
}
.stoel#stoel3{
  transform: rotate(92deg);
  position: fixed;
  top: 171px;
  right: 72px;
}

.container {
  background: #fbfbf9;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-30deg);
  }
}

.book {
  margin: 30px;
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book:hover {
  transform: rotateY(0deg);
}

.book > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  width: 200px;
  height: 300px;
  transform: translateZ(25px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: 5px 5px 20px #666;
}

.book::before {
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 3px;
  width: 48px;
  height: 294px;
  transform: translateX(172px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 200px;
  height: 300px;
  transform: translateZ(-25px);
  background-color: #01060f;
  border-radius: 0 2px 2px 0;
  box-shadow: -10px 0 50px 10px #666;
}

test.markdown

test

A Pen by Sofie Van Den Bossche on CodePen.

License.