You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.5 KiB
57 lines
1.5 KiB
<template>
|
|
<div class="flex-justified-space-between title-big">
|
|
<div>
|
|
<div class="Fa Thin desc"> {{ desc }} </div>
|
|
<div :class="`Fa Bold text-gradient ${gradient} title-fa`"> {{ title_fa }} </div>
|
|
</div>
|
|
<div class="title-en En Bold">
|
|
<div class="text"> {{ title_en }} </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title_fa: { default: " عنوان بخش - بزرگ "},
|
|
desc: { default: " توضحیحات مربوط به این بخش "},
|
|
title_en: { default: "the big title"},
|
|
gradient: { default: "black-black"},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.title-big {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.title-big .title-fa {
|
|
font-size: 50px;
|
|
}
|
|
.title-big .desc {
|
|
font-size: 16px;
|
|
opacity: 0.8;
|
|
}
|
|
.title-big .title-en {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 160px;
|
|
letter-spacing: 3px;
|
|
font-size: 150px;
|
|
line-height: 160px;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
color: #b1b1b1;
|
|
opacity: 0.1;
|
|
}
|
|
.title-big .title-en .text {
|
|
position: absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|