generated from dwd/boilarplate-astro-tailwind
93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<section class="mt-16">
|
|
<div class="flex flex-col lg:flex-row place-content-between gap-x-4">
|
|
<div class="flex flex-col w-full">
|
|
<h1 class="text-[#47ae6a] hero-text font-bold">Frequently Asked <span class="text-[#3084b5]">Questions</span> </h1>
|
|
<div class="grid h-fit" v-for="data in faqData" :key="data.questionNumber">
|
|
<details>
|
|
<summary>
|
|
<div class="flex inline-flex cursor-pointer">{{ data.question }}</div>
|
|
</summary>
|
|
<div v-html="data.answer"></div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col justify-center place-items-center">
|
|
<img class="w-fit rounded-full border-2 shadow-xl" src="/img/faq1.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
faqData: "",
|
|
}
|
|
},
|
|
mounted(){
|
|
fetch(`/assets/faq.json`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.faqData = data.faqs
|
|
console.log(this.faqData)
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.bg3 {
|
|
background: linear-gradient(0deg, rgb(226, 239, 255) 0%, rgba(255, 255, 255) 40%);}
|
|
@media screen and (min-width: 1500px) {
|
|
.hero-text {
|
|
font-size: 50px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1499px) {
|
|
.hero-text {
|
|
font-size: 40px;
|
|
|
|
}
|
|
}
|
|
@media screen and (max-width: 1199px) {
|
|
.hero-text {
|
|
font-size: 30px;
|
|
|
|
}
|
|
}
|
|
.text-color-1 {
|
|
color: #7c4c23;
|
|
}
|
|
details {
|
|
font-weight: lighter;
|
|
border-bottom: 1px solid #d4d4d4;
|
|
border-color: #d4d4d4;
|
|
padding: .75em .75em 0;
|
|
font-size: 17px;
|
|
width: 100%;
|
|
/* margin-top: 10px; */
|
|
/* box-shadow:0 0 8px #d4d4d4; */
|
|
}
|
|
|
|
summary {
|
|
margin: -.75em -.75em 0;
|
|
padding: .75em;
|
|
|
|
}
|
|
|
|
details[open] {
|
|
padding: .75em;
|
|
border-bottom: 1px solid #d4d4d4;
|
|
}
|
|
|
|
details[open] summary {
|
|
border-bottom: 1px solid #d4d4d4;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|