35 lines
599 B
Vue
35 lines
599 B
Vue
<template>
|
|
<div class="hero-image">
|
|
<div class="hero-fade">
|
|
</div>
|
|
<div class="hero-contents">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
}
|
|
</script>
|
|
<style>
|
|
.hero-image {
|
|
@apply w-full relative;
|
|
background-image: url("~assets/bg.png");
|
|
background-size: cover;
|
|
min-height: 300px;
|
|
height: 50vh;
|
|
}
|
|
.hero-fade {
|
|
@apply bg-black w-full h-full;
|
|
opacity: 0.25;
|
|
}
|
|
.hero-contents {
|
|
@apply absolute bottom-0 text-white w-full py-4;
|
|
}
|
|
.hero-contents h1 {
|
|
@apply text-6xl text-center;
|
|
}
|
|
</style>
|