keksAccountGUI/src/views/Startpage.vue

<template>
  <div style="">
  <div class="headerStartpage">
    <h1>{{ nameBig }}<span class="small">{{ nameSmall }}</span></h1>
    <h2>{{ slogen }}</h2>
  </div>
    <v-container grid-list-md>
      <v-layout row wrap>
        <v-flex md12>
          <h1>Services</h1>
          <p>Mit deinem KeksAccount Username kannst du dich u.a. bei folgenden Servicen einloggen und diese nutzten. </p>
        </v-flex>
        <v-flex md4 text-xs-center>
          <v-card>
            <v-layout>
              <v-flex xs5>
                <v-img
                        src="https://account.keks.cloud/gui/apps/1/icon"
                        height="125px"
                        contain
                ></v-img>
              </v-flex>
              <v-flex xs7>
                <v-card-title primary-title>
                  <div>
                    <div class="headline">Git</div>
                    <div>Git-Server von keks.cloud</div>
                  </div>
                </v-card-title>
              </v-flex>
            </v-layout>
            <v-divider light></v-divider>
            <v-card-actions class="pa-3">

              <v-spacer></v-spacer>
              <v-icon>exit_to_app</v-icon>
            </v-card-actions>
          </v-card>
        </v-flex>
        <v-flex md4 text-xs-center>
          <v-card>
            <v-layout>
              <v-flex xs5>
                <v-img
                        src="https://account.keks.cloud/gui/apps/3/icon"
                        height="125px"
                        contain
                ></v-img>
              </v-flex>
              <v-flex xs7>
                <v-card-title primary-title>
                  <div>
                    <div class="headline">Chat</div>
                    <div>Mattermost Chat Server</div>
                  </div>
                </v-card-title>
              </v-flex>
            </v-layout>
            <v-divider light></v-divider>
            <v-card-actions class="pa-3">

              <v-spacer></v-spacer>
              <v-icon>exit_to_app</v-icon>
            </v-card-actions>
          </v-card>
        </v-flex>
        <v-flex md4 text-xs-center>
          <v-card>
            <v-layout>
              <v-flex xs5>
                <v-img
                        src="https://account.keks.cloud/gui/apps/4/icon"
                        height="125px"
                        contain
                ></v-img>
              </v-flex>
              <v-flex xs7>
                <v-card-title primary-title>
                  <div>
                    <div class="headline">Nextcloud</div>
                    <div>Share Files with other Users</div>
                  </div>
                </v-card-title>
              </v-flex>
            </v-layout>
            <v-divider light></v-divider>
            <v-card-actions class="pa-3">

              <v-spacer></v-spacer>
              <v-icon>exit_to_app</v-icon>
            </v-card-actions>
          </v-card>
        </v-flex>
        <v-flex md4 text-xs-center>
          <v-card>
            <v-layout>
              <v-flex xs5>
                <v-img
                        src="https://account.keks.cloud/gui/apps/5/icon"
                        height="125px"
                        contain
                ></v-img>
              </v-flex>
              <v-flex xs7>
                <v-card-title primary-title>
                  <div>
                    <div class="headline">Jenkins</div>
                    <div>Build pipelines for Developer</div>
                  </div>
                </v-card-title>
              </v-flex>
            </v-layout>
            <v-divider light></v-divider>
            <v-card-actions class="pa-3">

              <v-spacer></v-spacer>
              <v-icon>exit_to_app</v-icon>
            </v-card-actions>
          </v-card>
        </v-flex>
        <v-flex md4 text-xs-center>
          <v-card>
            <v-layout>
              <v-flex xs5>
                <v-img
                        src="https://account.keks.cloud/gui/apps/7/icon"
                        height="125px"
                        contain
                ></v-img>
              </v-flex>
              <v-flex xs7>
                <v-card-title primary-title>
                  <div>
                    <div class="headline">Wiki</div>
                    <div>Dokumentation von Servicen und Projekten</div>
                  </div>
                </v-card-title>
              </v-flex>
            </v-layout>
            <v-divider light></v-divider>
            <v-card-actions class="pa-3">

              <v-spacer></v-spacer>
              <v-icon>exit_to_app</v-icon>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>


  </div>

</template>

<script>
  export default {
    data () {
      return {
        nameBig: '',
        nameSmall: '',
        slogen: '',
        menu: [
          { icon: 'home', title: 'Login' },
          { icon: 'info', title: 'Invited' },
          { icon: 'warning', title: 'Register' }
        ]
      }
    },
    mounted: function() {
      this.nameBig = this.$store.getters.getSettingValue("name_big");
      this.nameSmall = this.$store.getters.getSettingValue("name_small");
      this.slogen = this.$store.getters.getSettingValue("name_slogen");
    }
      }
</script>

<style>
.headerStartpage {
  background-image: url('~@/assets/manhattan-407703_1920.jpg');
  background-repeat: no-repeat;
  margin-top: -100px;
  height:90vh;
  text-align: center;
}
  .headerStartpage h1{
    padding-top: 200px;
    font-size: 56px !important;
    font-weight: 400;
    line-height: 32px !important;
    letter-spacing: normal !important;
  }
  .headerStartpage h1 .small{
    font-weight: 300 !important;
  }
.headerStartpage h2{
  padding-top: 30px;
  font-size: 34px !important;
  font-weight: 300;
  line-height: 32px !important;
  letter-spacing: normal !important;
}
h1{
  font-weight: 300;
  line-height: 32px !important;
  letter-spacing: normal !important;
}
h2{
  font-weight: 300;
  line-height: 32px !important;
  letter-spacing: normal !important;
}
</style>