<template>
  <div>
   <div id="image1div">
            <button class="button button1" onclick="openForm()"></button>
            <img src="../Assets/taske.png" class="image1">
        </div>
  <div id="image2div">
            <img src="../Assets/taske.png" class="image2">
            <img src="../Assets/taske.png" class="image3">

        </div>
  <div id="image3div">
            <img src="../Assets/taske.png" class="image4">
            <img src="../Assets/taske.png" class="image5">

        </div>

  <div id="image4div">
            <img src="../Assets/taske.png" class="image6">
        </div>

    <div id="contactForm">
      <h1>Keep in touch!</h1>
      <small>I'll get back to you as quickly as possible</small>

      <form action="#">
        <input placeholder="Name" type="text" required>
        <input placeholder="Email" type="email" required>
        <input placeholder="Subject" type="text" required>
        <textarea placeholder="Comment"></textarea>
        <input class="formBtn" type="submit">
        <input class="formBtn" type="reset">
      </form>
    </div>
  </div>
</template>

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

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

      this.contactformVisible = !this.contactformVisible;

    }
  }
}
</script>



<style <style lang="scss" scoped>


#image1div{
  background-color: red;
}

#image2div{
  background-color: blue;

}
#image3div{
  background-color: green;

}
#image4div{
  background-color: red;
}
.image1{
  height: 100px;
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.image2{
  height: 100px;
  width: 100px;
  padding-left: 200px;
}

.image3{
  height: 100px;
  width: 100px;
  float: right;
  padding-right: 200px;
}

.image4{
  height: 100px;
  width: 100px;
  padding-left: 200px;
  padding-top: 100px;
}

.image5{
  height: 100px;
  width: 100px;
  float: right;
  padding-right: 200px;
  padding-top: 100px;

}

.image6{
  height: 100px;
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.button{
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-left: 500px;
}



#contactForm {
  display: block;
  opacity: 0;
  border: 6px solid salmon;
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;

}

input, textarea {
  margin: .8em auto;
  font-family: inherit;
  text-transform: inherit;
  font-size: inherit;

  display: block;
  width: 280px;
  padding: .4em;
}
textarea { height: 80px; resize: none; }

.formBtn {
  width: 140px;
  display: inline-block;

  background: teal;
  color: #fff;
  font-weight: 100;
  font-size: 1.2em;
  border: none;
  height: 30px;
}
</style>