116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
Vue
<template>
|
|
<v-container fluid class="pa-0">
|
|
<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
|
|
<v-col
|
|
class="d-flex align-center pt-0 ml-8"
|
|
style="position: relative; z-index: 10;"
|
|
>
|
|
<v-card flat color="rgb(0, 0, 0, 0)">
|
|
<h1 class="display" style="position: relative;">
|
|
Welcome to Savvy Firebox Tutorial
|
|
</h1>
|
|
<v-btn
|
|
x-large
|
|
color="primary"
|
|
style="position: relative; z-index: 10;"
|
|
class="lighten-1"
|
|
>Click Here</v-btn
|
|
>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
|
|
<v-row class="d-flex justify-space-around">
|
|
<v-col class="d-flex justify-center" md="6" xs="12">
|
|
<v-card
|
|
flat
|
|
color="rgb(0, 0, 0, 0)"
|
|
class="d-flex align-center justify-center flex-column pa-6"
|
|
data-aos="zoom-in"
|
|
>
|
|
<v-card-title>
|
|
<span class="display-2 font-weight-bold">Learn more</span>
|
|
</v-card-title>
|
|
<v-card-text class="d-flex justify-center flex-column align-center">
|
|
<transition name="bounce">
|
|
<v-img
|
|
src="@/assets/images/11-Casino chip.png"
|
|
max-height="150px"
|
|
max-width="150px"
|
|
class="mb-5"
|
|
></v-img>
|
|
</transition>
|
|
<span
|
|
class="d-flex justify-center display body-1"
|
|
style="color: black;"
|
|
>
|
|
More information about what we do and why.
|
|
</span>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-btn color="secondary" medium>Click here</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col class="d-flex justify-center" md="6" xs="12">
|
|
<v-card
|
|
flat
|
|
color="rgb(0, 0, 0, 0)"
|
|
class="d-flex align-center justify-center flex-column pa-6"
|
|
data-aos="zoom-in"
|
|
>
|
|
<v-card-title>
|
|
<span class="display-2 font-weight-bold">See more</span>
|
|
</v-card-title>
|
|
<v-card-text class="d-flex flex-column justify-center align-center">
|
|
<v-img
|
|
src="@/assets/images/12-Casino chip.png"
|
|
max-height="150px"
|
|
max-width="150px"
|
|
class="mb-5"
|
|
></v-img>
|
|
<span
|
|
class="d-flex justify-center display body-1"
|
|
style="color: black;"
|
|
>
|
|
Additional things about what it is.
|
|
</span>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-btn color="secondary" medium>Click here</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
<!-- <v-col md="1" xs="0"></v-col> -->
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
animate: false
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.newtriangle {
|
|
width: 105vw;
|
|
height: 50vh;
|
|
background-image: radial-gradient(
|
|
circle farthest-corner at 7.5% 54.1%,
|
|
rgba(0, 0, 0, 1) 0%,
|
|
rgba(39, 0, 89, 1) 74.9%
|
|
);
|
|
-webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
|
clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
|
|
}
|
|
|
|
h1 {
|
|
color: white;
|
|
}
|
|
</style>
|