<template>
  <div id="welcome">
    <div class="md-layout md-alignment-center-center">
      <div class="md-layout-item" id="welcome-banner">
        <span class="md-display-3">VideON</span>
      </div>
    </div>
    <div class="md-layout md-alignment-center-center">
      <md-card class="md-layout-item md-size-25 md-medium-size-50 md-small-size-100 md-elevation-5">
          <login-box-content/>
      </md-card>
    </div>
    <div class="md-layout md-alignment-center-center">
      <div class="md-layout-item" id="welcome-footer">
        <span class="md-caption">Copyright 2020 by <b>VideON Team</b></span>
      </div>
    </div>
  </div>
</template>

<script>
import LoginBoxContent from "@/components/LoginBoxContent";

export default {
  name: "Welcome",
  components: {
    LoginBoxContent
  }
}
</script>

<style scoped>
#welcome {
}

#welcome-banner {
  padding: 3rem 0 5rem 0;
  text-align: center;
}

#welcome-footer {
  padding: 3rem 0 0 0;
  text-align: center;
}
</style>