Last active
November 23, 2023 08:45
-
-
Save BananaAcid/9601e2f1c340c6fd1601e371aa206e8d to your computer and use it in GitHub Desktop.
A centered website layout with Vuetify / Vue3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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>© 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Screenshot: