p6 refleksionstavle

<template>
  <div>

    <div id="div1">
        <img src="../Assets/Palle.png" class="Palle">
        <img src="../Assets/Transportbånd.png" class="Transportbånd">
    </div>

    <div id="div2">
        <img src="../Assets/Hooder.png" class="Hooder">
        <img src="../Assets/Gem.png" class="Gem">
        <img src="../Assets/MiwO.png" class="MiwO">
    </div>


    <div id="div3">
        <img src="../Assets/Wrapper.png" class="Wrapper">
        <img src="../Assets/Lenze.png" class="Lenze">
    </div>

    <div id="div4">
        <button class="Knap" @click="openForm()"> </button>
    </div>


<div id="popUp">
      <h1>Fejlbeskrivelse</h1>
      <small>Medie!</small>

      <form action="#">
        <p>
          Den her fejl er da træls!
        </p>
      </form>
    </div>



  </div>

</template>

<script>
export default {
  data() {
    return {
      contactformVisible: false
    };
  },
  methods:{
    openForm(){
      var ele = document.getElementById("popUp");

      if(this.contactformVisible){
        ele.style = "opacity: 0"
      }
      else ele.style = "opacity: 1"

      this.contactformVisible = !this.contactformVisible;

    }
  }
}
</script>




<style <style lang="scss" scoped>
#div1{
  overflow: auto;

}
#div2{
  overflow: auto;

}
#div3{
  overflow: auto;

}
#div4{
  overflow: auto;

}

.Palle{
  float: left;
  padding-left: 438px;
}
.Transportbånd{
  float: right;
  padding-right: 445px;
  padding-top: 10px;
}
.Hooder{
  float: left;
  padding-left: 355px;
}
.Gem{
  height: 95px;
  width: 95px;
  padding-top: 63px;
  padding-left: 63px;
}
.MiwO{
  float: right;
  padding-right: 358px;
}
.Wrapper{
  float: left;
  padding-left: 455px;
  padding-top: 19px;
}
.Lenze{
  float: right;
  padding-right: 430px;
  padding-top: 23px;
}
.Knap{
  height: 30px;
  width: 30px;
  border-radius: 20px;
  margin-left: 700px;
  margin-bottom: 100px;
}

#popUp{
  display: block;
  opacity: 0;
  border: 2px solid grey;
  padding: 1em;
  width: 200px;
  text-align: center;
  background: #f5f5f5;
  position: fixed;
  top:72%;
  left:57%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
  border-radius: 15px;
}

.formBtn {
  width: 140px;
  display: inline-block;
  background: teal;
  color: #fff;
  font-weight: 100;
  font-size: 1.2em;
  border: none;
  height: 30px;
}

</style>