popskip/components/Hero.vue
2019-11-15 17:40:56 +07:00

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>