A centered website layout with Vuetify / Vue3

web-business-card-centered.view.vue

<!--
BananaAcid 2023

Playground:
https://play.vuetifyjs.com/#eNqtVm1v2zYQ/is3ARvSwhRtOQ4W1yv6ggLrUGzDum/zPtDSWWJCiQRJOc6K/vedKMmRrSRzgfkN5N1zbw+PZ/31JXI25W+NiXc1Rsto9R1j8E5U9H6bygySaTIHxl6vq3W18lgaJTzSDmC1Y8KYsAybUsiq24V9qitPIrSQKuHcT+toK5ViBcq88OvoAA1gVyD6A9AIlgD9uJItABXuhJe6Ysn0yCwYWn13JOpCK6Bv42qWrCNwJa2uTowDVpY5EAGkJphQnhafdK5pw0/d8uD3/GCHajzuPVO49RBWZcbsiILOW4EiGxAW8MXVwa5YtEuVs+LyEXuAz7pEeC9Mw9fIO2/dn1FYI2uZPZPucSk7RtyOE0z1Du1Y3J5B4b1xS86NTF1dxqbQXjsuM55cXvLZdTLlV1PqgbF5e3I/t+x9LEWOj6F6Wh86ajGGnXPu/wM95vUnbbGEOI5XvL9FR3rSgDTEw39ganc31n5r1sctF/qzbbW066XTZnv62DO5k80xnBIZEv4h1eb+1WDAfGvqQ0kYGg8jJ9h1M6cfSyQ7zKVm006sFR9MMto6f68QHOWGWYDyl6B0LlN4yZttPJxmX1rXpdizO5n5YgnX06nZv2rEX1tuCd8OtA5L7kpxi5Bi5dFiRreAFpUHYVGAL0ijrcXUQ/A4gQoxczCIGg9mZ5cUwFbhnuXEyxJmffgVD8U8XVcrO9TVsNOnuRHpLbmrq2wJtVUXT17HxYwvptMpn9MrvjH5i64y8NqERIa+mJP/4LK9+M+RNLCg49d2CTbfXCSzBJL5ApLFAjhcXX//YhAgs9owYoZCL2Gjansxo5NoEV2UZsB3AbZEJgvlL0F6oWTauXoIJy6mE+g+8aIPFS6CrDKqkZjGcsx1NIk80VxtZR7fOF3RH2kIuo5SXRqp0P4WrpFbR8s+nXUklNJ3vwSZtzVOenlaYHr7iPzG7RvZOvrdokO7oyF30Hlhc6T/lEb94fOvlPFAWeqsVoR+RvkHOq3q9qo3sHd0DpT2ABey/Vgabb2s8j/dhz21sOuLahINtAT8OqKniffPlP6Q7jyed3TSh3iUIQL1pTlhslUcu6Eobbp9q6ZZRWYZKrmzcYWeV6bkbwjGbV15WSLLdPmGYsY/8kw6PxTHSM8bG7pOxC05GZRO9l5u788I1SEpwmU8ayN0IqbExjUhRq55OEvLLFKL2Ybz8yo6MRtWdaIaVTZg/OskCoZEfUg6+vtfX6T3oA==
-->

<template>
  <v-app>
    <v-main>
      <v-container class="fill-height">
        <v-sheet class="pa-2 pa-sm-5 elevation-20">
          <v-row>
            <v-col cols="12" sm="6">
              <img src="" alt="Logo" />
            </v-col>
            <v-col cols="12" sm="6" class="text-left text-md-right">
              <header class="text-h6 text-md-h5 text-lg-h4">
                Some Caption
              </header>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-img
                cover
                src="https://picsum.photos/id/244/1920/600"
                alt="Header Image"
                class="elevation-5"
              />
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <p>Lorem ...</p>
              <p>... ipsum ...</p>
              <p>... usw</p>
            </v-col>
          </v-row>

          <v-row class="text-right text-caption">
            <v-col>
              <v-divider />
              <p>&copy; BananaAcid</p>
            </v-col>
          </v-row>
        </v-sheet>
      </v-container>
    </v-main>
  </v-app>
</template>

<style scoped>
  /* logic */
  .v-container {
    max-width: 900px;
  }

  .v-sheet {
    /* make centered content area the correct width, needs v-container.fill-height */
    flex-grow: 1;
  }
</style>

<style scoped>
  /* style */
  .v-main {
    background: url(https://picsum.photos/id/51/5000/3333.jpg) center top;
    background-size: cover;
  }

  .v-sheet {
    background-color: rgb(212 235 255 / 69%);
    backdrop-filter: blur(10px);
  }

  img {
    font-style: italic;
    color: rgba(0, 0, 0, 0.5);
    text-indent: 1em;
  }
</style>

Screenshot:

With Vuetify darkmode switcher (and System Darkmode detection)

https://play.vuetifyjs.com/#eNqtVmlz2zYQ/SsbzrSSMwYpyZanYZw0RzPTdJKm0/Rb1Q8wCZGweQ0AHa7H/70PAClRkh2r09qyjGOPt28XC/x5F2iVRG+bJlwuRBAHl88Yo3e8wu/bRKY0GU3OiLHXs2pWXRpRNgU3AjOiyyXjTUOxyUUpXs0Ckvonrm4+16n4UtGPNEgxG1BMg0JmuRnQLHB60ISPJSu5rChOCq41tO+sdAndeNfOPQw7907Ra7UzN0/qymBJKOoszWVRsFxYnxuPrbDOhTAbwYazCeFLl2xKohBLbmRdscloR80pqnq1s9S6Lgh/1tR4Api6xOhiT9nJyjIj0IxtiPHCYPCpzmpMon2zkbN7vLNNNEasDSvE3JAblSlTBxS01nLB0x5hTj6/2OjlUz8sMpafP6BP9LUuBb3njeXrwHrkzR8RmF3zzB5J92EoSwZuDwEm9VKow2Wfg9yYRsdR1MhEL8qwyWtT60im0eT8PBq/mIyiixFq4FDdZ+5nz97HkmfiIamO1m1FTQ/Fjsn7/0BP8/pTrURJYRheRs1D+9gh2YCHJ2QWevXg7pJdmYreJIVMbhD0ztl9Rc/684fIem3qLCsEdaffxgyD+4L/ka3dUnfnwpd40tbwfpE/Xm6pXEqb/v0EOqK+T+rm9mWvfR5S9m3o/RXXrLatzum1va5rh1jb9EM7QT/G+DLq9WlMdaJk4y3JsqmVoTtKxRyG3teYV6IydE9zVZc0wCUw8AyKtROFIF8U7n9fYXjnIaTc8OEJtTOiAv31CrFooWzibUpRBitZpfUqLLlJ8s8ilXy4DXUwbJSYC6UtLbViOrH3Sewq4gRYvNSJVxZ6m14lzEJVW9eIrlds8T6M007u3g/u3cL9ieVrw5Bly9yiHjUyKVLHWfScijqTCT2P7DTs3zmt85Kv2UqmJo/pxWjUrF860x4q5P2108rCXMlvBCVgUSiRoldhgBRwJTjhMsWCUiIxYA0WT6kSItXU8xr2brgWFNG8EGuWIeSYxp17BGaDeSQuAHNXN2Pufu7wMXaV2aYa00IVw0d75fg8mo5Go+gMP+F1k504p606MhmTyq6Gk/GEJmdTmkynFNHFi++2YnM0po0gH45Oqf2EUy+05a+FaSviX6Kcjo9BCZDA+CREBHFqI2m/9oEisZ7jTZ24F04L+IonN0jPokpjWnI17AI4aQuBTN20jreiTMu/cRTcbdZuukPSmegA7hO2U3A9czvKnoEuWiuVqrphKC7AwfEpFmo4RjFbid3SdadaryQOpKwymuM+9Lj0phyN4pWWtrfGuDYLkHWm+yDti6jFN0ddM8ccnn6G4yJ5OlQ4sO0bbQXkoeJFeVjzwWlgUO7VXGbhta4rPG6dx1mQoIvJQqgvrvnrWRB3WGYBwNarX9yaUYuua0AnF8nNA+vXem3XZsFvSqDbLPEk2OwZrjKBF5jd/vD1VyDubYLERQHpb2z+LnRdLPwFZcXeIYeA3ZNzaD+6po5M/KE/rNFKdBeUBepocfKzAM3dNvDHQt/CPQvPWjrxAY/+2kA9N3tM+o1dM/Di4XanMkkrqKWikEsVVsJEVVNGbyAWqUVlJI52Wpdv4DP8IUqlNv3lUOB13nZyGOmFDn0j57dHuGol4eE8HHsP7RIr+JW2Lg5MRy6XiimBElOW8+Mi2lPrR7W3dRBZj/H708ApgnoHOvjrHw4wDzM=