Gadgety_Euclidean_Sequencer_Web_Interface/pages/index.vue

<template>
  <div id="app">
  <h2 class="subtitle">
    Second attempt at building a web interface for ESP8266
  </h2>
    <sequencer></sequencer>
    <sequencer></sequencer>
    <sequencer></sequencer>
    <sequencer></sequencer>
    <div class="icon-wrapper">
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/barrier.png">
      </div>
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/pixel.png">
      </div>
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/squares.png">
      </div>
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/bell.png">
      </div>
      <div class="icon-button">
        <img style="margin:auto;" src="~/assets/img/add.png">
      </div>
    </div>
  </div>
</template>

<script>
import sequencer from '~/components/sequencer.vue'
import sequencerDivided from '~/components/sequencerDivided.vue'
import beatMenu from '~/components/beatMenu.vue'

export default {
  components: {
    sequencer,
    sequencerDivided,
    beatMenu
  }
}
</script>

<style>
.icon-button{
  display:flex;
  background-color:red;
  width:3em;
  height:3em;
  border-radius:3em;
  margin:0.2em;
}

.icon-wrapper{
  display:flex;
}
</style>