From be2d01f3d89b4a6c65b4fef49ceac92c1b20ddcb Mon Sep 17 00:00:00 2001 From: BFlat Date: Wed, 1 Jun 2022 03:22:15 +0100 Subject: [PATCH] added pre-heading and faq section --- templates/storyteller-stream/assets/munis.svg | 3 + templates/storyteller-stream/assets/plus.svg | 4 + .../storyteller-stream/assets/title-shape.png | Bin 0 -> 1561 bytes templates/storyteller-stream/index.html | 167 ++++++++++++++++-- templates/storyteller-stream/style.css | 57 +++++- 5 files changed, 214 insertions(+), 17 deletions(-) create mode 100644 templates/storyteller-stream/assets/munis.svg create mode 100644 templates/storyteller-stream/assets/plus.svg create mode 100644 templates/storyteller-stream/assets/title-shape.png diff --git a/templates/storyteller-stream/assets/munis.svg b/templates/storyteller-stream/assets/munis.svg new file mode 100644 index 0000000000..57a3b0c548 --- /dev/null +++ b/templates/storyteller-stream/assets/munis.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/storyteller-stream/assets/plus.svg b/templates/storyteller-stream/assets/plus.svg new file mode 100644 index 0000000000..f060693945 --- /dev/null +++ b/templates/storyteller-stream/assets/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/templates/storyteller-stream/assets/title-shape.png b/templates/storyteller-stream/assets/title-shape.png new file mode 100644 index 0000000000000000000000000000000000000000..d3b05b7586c0e86607dbfeeb1750fb7b8fe5bd5e GIT binary patch literal 1561 zcmV+!2Il#RP)@DZ)E_S;#(64M~&h9@m|NQg) zmpK8rkN*V%yBHIZiG4;Je@+m7P;e`&D(aQwQt~Ra02FpH%#isC0oFr>AR5)$fy0x- zk%>dl0_17QuA|h^f(N?2U|`It_P-vFLb&fOrNs$OYJYJcxT6 znLIZ6)698)=EaBN102W^ML>=N{Vk<``gPF!#37m6r_ySID5dZ2CXit84z?AG;TgUM z&43WkN>+f}6p?EXK#vONwfs|l;?mGUz>B!`E@V&-fYmp0eEfyr>4i-^;mVJJj9Q{n*LjlaD|h^!N9x^5Y$n2i09ne%TPk1;H9Vmb)q#AtuJZC( z0e{w^(RvuLP7MgNIC?c@0{i{2&hQ{w=IycLW4^A(IWM{scSp-uP6-V>B*zvGGix!Zz3g|pWsbwL zfVnNOI%O*}F&>LR-JH#Cmr9ySba#-Plc7VQkjNW(GCe&V@_wzT<3t_O$-s>pd$`)X zsL0DfV@jKIVq6fm90iCY=cpAx&XT_F@0M&8#jfKN!E278j0uG+Xp!1gi(1I;DL!mC zO*WgAbKCP54JW{k;!qE+3lTdcdisOt@RfyX&$O9@5zK#c)R7?Gn0hg*BCEP{)?%{_ zRYUg4dXF`neT@!dhrZNRQW~wU)tJV)1>{gK+9NZ!fYF zw8T~(6X?Gvqe?S4i5NfF)t7f>RLim|?pEC03=eSCq@Miy#EIB`%AuS9za4WwQ_vn6)|2OT*RSx0SbC^tWK8ohiOh0%s zNC$^@oL>%}ujI-YI0e+XZ!ImQu2@_7-wU*Gt-uRc8@XEI-P%N>*<>#NUPWhk7nj$e zRF24s-~(s^@SgB1I?!R_vd$|r%!2u+pL|+RpB)_>&EfUwaRD@Ba`<-fO!~XP`KyzM z0(GH(rEfqJpe9$6UyO{5JW37vCNcpFFF2Q8PJRQ;z+QHaB!@L%YT^9C z&7dKfmCQwKE;cZG#U)>sBX(1#9BCF>vPk0fM6aot?cwfl(_Smd_i-9CUjip5F!XDt z;H>}+d1HQg{u10}wB&u<+~;#^&}0yjH$3%i=HaDQz8x`WYZ$j{-vBQxEZoGXxh?z7 z6&ULl`4WbO)}RI0)qiv7fQ}1T3H&4b=%z?E`t#|}KKTRg894Yf~00000 LNkvXXu0mjfmNV(~ literal 0 HcmV?d00001 diff --git a/templates/storyteller-stream/index.html b/templates/storyteller-stream/index.html index d18d9bbc8b..42f73d4eb2 100644 --- a/templates/storyteller-stream/index.html +++ b/templates/storyteller-stream/index.html @@ -150,7 +150,14 @@
-

Features

+
+ +
Features
+ +
+

+ TTS Features +

@@ -208,7 +215,18 @@
-

+
+ +
Statistics
+ +
+

Our Insights

@@ -242,24 +260,139 @@

-

- Got Any Questions? +
+ +
+ Questions and Answers +
+ +
+

+ Frequently Asked Questions

-
-
-

- Join us in Discord! -

-

- We'd love to chat with you! -
- Please join us in Discord so that we know what you're thinking. -

- +

+ FAQ +

+ +
+
+
+

+ +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. +
+
+
+
+

+ +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. +
+
+
+
+

+ +

+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. +
+
+
+
+
+ +
+ Still got questions? +
+ +
+

+ Join Our Community +

+

+ We'd love to chat with you! +
+ Please join us in Discord so that we know what you're thinking. +

+
+ + +
+
+
@@ -267,7 +400,9 @@
-

Get started with Storyteller Stream!

+

+ Get started with Storyteller Stream! +

diff --git a/templates/storyteller-stream/style.css b/templates/storyteller-stream/style.css index 17515d64e3..4b67c5df75 100644 --- a/templates/storyteller-stream/style.css +++ b/templates/storyteller-stream/style.css @@ -63,6 +63,20 @@ p { color: rgba(255, 255, 255, 0.8); } +.pre-heading { + font-size: 18px; + color: #fc6b68; + text-transform: uppercase; +} + +.rotateimg180 { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); +} + img { image-rendering: auto; image-rendering: crisp-edges; @@ -475,7 +489,7 @@ span.word:after { .cta-img { position: absolute; - max-width: 500px; + max-width: 600px; left: 50%; top: 50%; transform: translate(-50%, -55%); @@ -567,6 +581,47 @@ span.word:after { max-width: 800px !important; } +.faq-panel { + max-width: 800px; +} + +.accordion-item { + background-color: rgba(255, 255, 255, 0.1) !important; + border-color: #ffffff12 !important; + border: 2px solid; + border-radius: 5px; +} + +.accordion-button { + background-color: rgba(255, 255, 255, 0) !important; + color: rgba(255, 255, 255, 0.8); + font-size: 20px; +} + +.accordion-button:hover { + color: #fff; +} + +.accordion-button::after { + background-image: url(assets/plus.svg); + opacity: 0.5; + background-position: center; +} + +.accordion-button:not(.collapsed)::after { + background-image: url(assets/munis.svg); + opacity: 0.5; +} + +.accordion-body { + color: rgba(255, 255, 255, 0.8); + font-weight: 300; +} + +.accordion-button:not(.collapsed) { + color: #fff; +} + .nav-pills { backdrop-filter: blur(5px); width: 100% !important;