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 0000000000..d3b05b7586 Binary files /dev/null and b/templates/storyteller-stream/assets/title-shape.png differ 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;