<div class="wrapper">
    <div class="box gelb">:-)""</div>
    <div class="box blau">B</div>
    <div class="box c">
    <a href="#">Life as a webdesigner is not always easy...<span><img src="https://pbs.twimg.com/media/CYIBQhMWAAAjLOE.jpg" alt="image"></span></a></div>
    <div class="box gelb">D</div>
    <div class="box r2">(ㆆ_ㆆ)</div>
    <div class="box r3">F</div>
    <div class="box r3">G</div>
    <div class="box blau">H</div>
    <div class="box rot">I</div>
    <div class="box r4">J</div>
    <div class="box schwarz">K</div>
    <div class="box rot">L</div>
    <div class="box blau">M</div>
     <div class="box r5">N</div>
    <div class="box weiss">O</div>
  </div>

index.html

body {
    margin: 10px;
    display: grid;
    font-family: toren;
    font-size: 36px;

  }

  .wrapper {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 0.8fr  0.8fr 1.2fr;
    grid-template-rows: 1.2fr 1fr 1fr 0.5fr 0.7fr;
    grid-gap: 10px;
  }

  .box {
    color: yellow;
    border-radius: 25px;
    padding: 20px;
    font-size: 50px;
  }

  .c {
    grid-column-end: span 2;
    background: #F2E0F7;
    outline: 10px dotted #3104B4;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }


  a {
      color: yellow;
      transition: color .3s ease-in-out;
      text-decoration: none;
  }


  img {
      position: fixed;
      width: 8em;
      height: 11em;
      left: 1em;
      top: 6em;
      border-radius: 25px;
  }


  .c a span {
      width: 100px;
      display:none;
      z-index:99;
  }

  .c a:hover span {
      display: block;
      position: fixed;
      width: 8em;
      height: 11em;
      left: 1em;
      top: 6em;
  }

  a:hover {
      color: #33FFC3;
      outline: 2px black;
      font-family: toren-rotalic;
      font-size: 50px;
      text-decoration: underline;

  }


  .r2 {
    grid-row-end: span 2;
    grid-column-end: span 2;
    background-color: #3104;
    outline: 10px double #A9F5E1;

  }

  .r3 {
    grid-row-end: span 2;
    background: white;
    color: black;
    outline: 10px dashed #A9F5E1;
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;

  }

  .r4 {
    grid-row-end: span 2;
    grid-column-end: span 2;
    background: white;
    color: black;
    outline: 3px dashed black;
  }

  .r5 {
    grid-column-end: span 2;
    background: #3104B4;;
  }

  .gelb {
    background-color: #33FFC3;
  }

  .blau {
    background-color: #3104B4;
  }

  .weiss {
    background-color: white;
    color: black;
    outline: 3px dashed black;
  }

  .rot {
    background-color: #F2E0F7;
  }

  .schwarz {
    background: black;
    color: white;
  }

index.css