8000 alfa v. · oleg-darkdev/code-404_app@5c4b316 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5c4b316

Browse files
oleg-darkdevoleg-darkdev
committed
alfa v.
1 parent b3fb0ce commit 5c4b316

File tree

1 file changed

+256
-0
lines changed

1 file changed

+256
-0
lines changed

‎src/lib/widgets/ui/landing/Faq.svelte

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
<script>
2+
const faq = [
3+
{
4+
index: '00',
5+
q: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
6+
a: [
7+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
8+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
9+
]
10+
},
11+
{
12+
index: '01',
13+
q: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
14+
a: [
15+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
16+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
17+
]
18+
},
19+
{
20+
index: '02',
21+
q: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
22+
a: [
23+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
24+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
25+
]
26+
},
27+
{
28+
index: '03',
29+
q: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
30+
a: [
31+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
32+
`Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
33+
]
34+
},
35+
36+
];
37+
38+
39+
$: selectedQuestion = faq[0];
40+
</script>
41+
42+
<section class="section has__bottom-sep-line">
43+
<div class="padding-vertical">
44+
<div class="container">
45+
<div class="padding-horizontal">
46+
<div class="padding-vertical padding-huge">
47+
<div class="padding-bottom padding-medium">
48+
<h2 class="big-heading">F.A.Q.</h2>
49+
</div>
50+
51+
<a name="faq"></a>
52+
53+
<div class="">
54+
<div class="custom-tab-grid">
55+
56+
<div class="what-is-rk-m-wrapper w-dyn-list">
57+
<div role="list" class="what-is-kr-m-list w-dyn-items">
58+
{#each faq as question}
59+
<div on:click={()=> selectedQuestion = question } role="listitem" class=" ">
60+
<div class="grid-card">
61+
<div class="tab-number-wrapper">
62+
<div class="tab-number">{question.index}</div>
63+
</div>
64+
<div class="tab-title">{question.q}</div>
65+
</div>
66+
67+
<div class=" statements-dropdown w-dropdown">
68+
<div class="statements-dropdown-toggle w-dropdown-toggle">
69+
<div class="tab-number-wrapper">
70+
<div class="tab-number">{question.index}</div>
71+
</div>
72+
<div class="tab-title">{question.q}</div>
73+
</div>
74+
<nav class="statements-dropdown-list w-dropdown-list">
75+
<div class="tab-text-holder">
76+
<div class="tab-rich-text w-richtext">
77+
{#each question.a as answer}
78+
<p>{answer}</p>
79+
{/each}
80+
</div>
81+
</div>
82+
</nav>
83+
</div>
84+
</div>
85+
{/each}
86+
</div>
87+
</div>
88+
<div class="tab-content desktop_only ">
89+
<div class="w-dyn-list">
90+
<div role="list" class=" w-dyn-items ">
91+
<div role="listitem" class=" w-dyn-item ">
92+
<div class="">
93+
<h3 class="semi-heading cc-statement-heading">{selectedQuestion.index} {selectedQuestion.q}</h3>
94+
<div class="tab-rich-text w-richtext">
95+
{#each selectedQuestion.a as answer}
96+
<p>{answer}</p>
97+< F438 /span>
{/each}
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</section>
111+
112+
113+
<style>
114+
.custom-tab-grid {
115+
grid-column-gap: 64px;
116+
grid-row-gap: 16px;
117+
grid-template-rows: auto;
118+
grid-template-columns: 1fr 1fr;
119+
grid-auto-columns: 1fr;
120+
display: grid;
121+
}
122+
123+
124+
.w-dropdown {
125+
text-align: left;
126+
z-index: 900;
127+
margin-left: auto;
128+
margin-right: auto;
129+
display: inline-block;
130+
position: relative;
131+
}
132+
133+
.w-dropdown-list, .w-dropdown-toggle {
134+
display: none;
135+
}
136+
137+
.tab-content.desktop_only {
138+
margin-top: -16px;
139+
}
140+
.tab-content {
141+
line-height: 1.3;
142+
position: relative;
143+
overflow: auto;
144+
}
145+
146+
@media screen and (max-width: 991px) {
147+
.w-dropdown-toggle {
148+
vertical-align: top;
149+
color: #222;
150+
text-align: left;
151+
white-space: nowrap;
152+
margin-left: auto;
153+
margin-right: auto;
154+
padding: 20px;
155+
text-decoration: none;
156+
position: relative;
157+
}
158+
159+
.w-dropdown-toggle {
160+
-webkit-user-select: none;
161+
-ms-user-select: none;
162+
user-select: none;
163+
cursor: pointer;
164+
padding-right: 40px;
165+
display: inline-block;
166+
}
167+
168+
.w-dropdown-toggle:focus {
169+
outline: 0;
170+
}
171+
172+
173+
.w-dropdown-list {
174+
display: block;
175+
background: #ddd;
176+
min-width: 100%;
177+
position: absolute;
178+
}
179+
180+
181+
.custom-tab-grid {
182+
grid-template-rows: auto;
183+
grid-template-columns: 1fr;
184+
grid-auto-columns: 1fr;
185+
display: block;
186+
}
187+
188+
.tab-content.desktop_only {
189+
display: none;
190+
}
191+
.tab-content {
192+
margin-top: 0;
193+
font-size: 23px;
194+
}
195+
.statements-dropdown {
196+
border-bottom: 1px solid #000;
197+
display: block;
198+
}
199+
200+
.statements-dropdown-toggle {
201+
color: var(--black);
202+
justify-content: flex-start;
203+
align-items: center;
204+
width: 100%;
205+
padding: 32px 0;
206+
transition: padding .4s cubic-bezier(.075, .82, .165, 1);
207+
display: flex;
208+
}
209+
210+
.statements-dropdown-toggle:hover {
211+
color: var(--hover-black);
212+
padding-left: 16px;
213+
}
214+
215+
.statements-dropdown-toggle.w--open {
216+
padding-left: 16px;
217+
}
218+
219+
.statements-dropdown-list {
220+
background-image: linear-gradient(to bottom, rgba(222, 212, 255, 0), var(--purple));
221+
margin-left: -32px;
222+
margin-right: -32px;
223+
padding-left: 32px;
224+
padding-right: 32px;
225+
position: static;
226+
overflow: hidden;
227+
}
228+
229+
.statements-dropdown-list.w--open {
230+
background-color: rgba(0, 0, 0, 0);
231+
}
232+
233+
.statements-dropdown-list.cc-special-dropdown-list {
234+
background-image: linear-gradient(to bottom, var(--white-smoke), rgba(244, 244, 244, 0));
235+
}
236+
}
237+
238+
239+
@media screen and (max-width: 767px) {
240+
.statements-dropdown-list {
241+
margin-left: -18px;
242+
margin-right: -18px;
243+
padding-left: 18px;
244+
padding-right: 18px;
245+
}
246+
}
247+
@media screen and (max-width: 479px) {
248+
.statements-dropdown-toggle {
249+
padding-top: 18px;
250+
padding-bottom: 18px;
251+
}
252+
.tab-content {
253+
font-size: 19px;
254+
}
255+
}
256+
</style>

0 commit comments

Comments
 (0)
0