fondueflow/index.html at main · Frontify/fondueflow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Fondueflow</title>

    <!-- Fondueflow CSS minified stylesheet -->
    <link rel="stylesheet" href="dist/styles/fondueflow.css">
    <!-- Fondueflow JavaScript minified script -->
     <script src="dist/scripts/fondueflow.js" defer></script>
</head>
<body>
    <main role="main">

        <!-- Navigation -->
<!--<div class="ff-navbar">
    <div class="ff-container">
        <div class="ff-navbar-content">
            <div class="ff-navbar-links">
                <a href="#" style="max-width: 1.5rem;">
<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.985 18.3996L23.9652 16.6572C23.8322 16.5805 23.7217 16.4702 23.6448 16.3374C23.5678 16.2046 23.5271 16.0539 23.5267 15.9005V12.4157C23.5264 12.0592 23.4323 11.7091 23.2539 11.4004C23.0754 11.0918 22.8188 10.8355 22.5099 10.6572L19.4901 8.91486C19.3574 8.83748 19.2473 8.72676 19.1707 8.59371C19.0941 8.46065 19.0536 8.30988 19.0533 8.15637V4.6716C19.0532 4.31463 18.9591 3.96396 18.7807 3.65471C18.6023 3.34547 18.3456 3.0885 18.0366 2.90954L14 0.583984L9.96343 2.90954C9.65502 3.08895 9.39913 3.34612 9.22133 3.65533C9.04354 3.96454 8.95007 4.31498 8.95026 4.6716V8.15637C8.94997 8.30988 8.90951 8.46065 8.83289 8.59371C8.75627 8.72676 8.64616 8.83748 8.51349 8.91486L5.49009 10.6572C5.18175 10.836 4.92574 11.0925 4.74763 11.401C4.56953 11.7096 4.47556 12.0595 4.47513 12.4157V15.9005C4.47507 16.0538 4.43469 16.2044 4.35803 16.3372C4.28137 16.47 4.17113 16.5804 4.03836 16.6572L1.01675 18.3996C0.708175 18.5786 0.451933 18.8354 0.273543 19.1442C0.095153 19.4531 0.000841021 19.8032 0 20.1598L0 24.811L4.03657 27.1365C4.34537 27.3149 4.69575 27.4088 5.05242 27.4088C5.4091 27.4088 5.75948 27.3149 6.06828 27.1365L9.0881 25.3941C9.22128 25.3177 9.37218 25.2775 9.52576 25.2775C9.67935 25.2775 9.83025 25.3177 9.96343 25.3941L12.9833 27.1365C13.2924 27.3147 13.6431 27.4085 14 27.4085C14.3569 27.4085 14.7076 27.3147 15.0168 27.1365L18.0366 25.3941C18.1698 25.3177 18.3207 25.2775 18.4742 25.2775C18.6278 25.2775 18.7787 25.3177 18.9119 25.3941L21.9317 27.1365C22.2405 27.3149 22.5909 27.4088 22.9476 27.4088C23.3043 27.4088 23.6546 27.3149 23.9634 27.1365L28 24.811V20.1598C27.9995 19.8034 27.9056 19.4533 27.7275 19.1444C27.5494 18.8355 27.2934 18.5787 26.985 18.3996V18.3996ZM17.9005 4.6716V8.15637C17.9013 8.51274 17.9956 8.86266 18.174 9.17123C18.3524 9.47979 18.6087 9.73619 18.9173 9.91485L21.9371 11.6572C22.0702 11.7342 22.1808 11.8448 22.2577 11.9779C22.3347 12.111 22.3754 12.262 22.3757 12.4157V15.9005C22.3761 16.2567 22.4701 16.6066 22.6482 16.9152C22.8263 17.2238 23.0823 17.4802 23.3906 17.659L26.4104 19.4013C26.5437 19.4782 26.6543 19.5888 26.7313 19.7219C26.8083 19.855 26.8489 20.0061 26.849 20.1598V23.4818L14.5782 16.4049V2.25302L17.4584 3.9149C17.5922 3.99104 17.7035 4.10108 17.7811 4.23394C17.8587 4.36679 17.8999 4.51776 17.9005 4.6716V4.6716ZM1.59494 19.4013L4.61476 17.659C4.92331 17.4803 5.17958 17.2239 5.35799 16.9153C5.5364 16.6068 5.63071 16.2569 5.63151 15.9005V12.4157C5.63143 12.2621 5.67175 12.1112 5.7484 11.9781C5.82506 11.845 5.93536 11.7343 6.06828 11.6572L9.0881 9.91485C9.39665 9.73619 9.65292 9.47979 9.83133 9.17123C10.0097 8.86266 10.1041 8.51274 10.1048 8.15637V4.6716C10.1053 4.51836 10.1458 4.36789 10.2224 4.23514C10.299 4.1024 10.4091 3.99199 10.5416 3.9149L13.4254 2.25302V16.4049L1.15816 23.4818V20.1598C1.15809 20.0062 1.1984 19.8553 1.27506 19.7222C1.35171 19.5891 1.46202 19.4785 1.59494 19.4013V19.4013ZM23.3852 26.1455C23.2521 26.2219 23.1012 26.2621 22.9476 26.2621C22.794 26.2621 22.6431 26.2219 22.5099 26.1455L19.4901 24.4031C19.1813 24.2247 18.8309 24.1308 18.4742 24.1308C18.1176 24.1308 17.7672 24.2247 17.4584 24.4031L14.4386 26.1455C14.3054 26.2219 14.1545 26.2621 14.0009 26.2621C13.8473 26.2621 13.6964 26.2219 13.5632 26.1455L10.5434 24.4031C10.2343 24.2247 9.88361 24.1308 9.52666 24.1308C9.16971 24.1308 8.81904 24.2247 8.50991 24.4031L5.49009 26.1455C5.35691 26.2219 5.206 26.2621 5.05242 26.2621C4.89884 26.2621 4.74794 26.2219 4.61476 26.1455L1.73635 24.4836L14 17.3996L26.2637 24.4764L23.3852 26.1455Z" fill="currentColor"/>
</svg>
                </a>

                <nav class="ff-navbar-nav">
                    <button class="ff-navbar-trigger" type="button" data-menu="platform">Platform</button>
                    <button class="ff-navbar-trigger" type="button" data-menu="customers">Customers</button>
                    <button class="ff-navbar-trigger" type="button" data-menu="partnerships">Partnerships</button>
                    <button class="ff-navbar-trigger" type="button" data-menu="resources">Resources</button>
                </nav>
            </div>

            <div class="ff-navbar-cta">
                <a href="#">Pricing</a>
                <a href="#" role="button" class="ff-button ff-button--dark">Login</a>
                <a href="#" role="button" class="ff-button ff-button--light">Demo</a>
            </div>

            <div class="ff-submenu" id="ff-submenu">
                <div class="ff-submenu-panel" data-panel="platform">
                    <div class="ff-submenu-grid">
                        <div>
                            <h4>Column A</h4>
                            <a href="#">Overview</a>
                            <a href="#">Features</a>
                            <a href="#">Integrations</a>
                        </div>
                        <div>
                            <h4>Column B</h4>
                            <a href="#">API</a>
                            <a href="#">Documentation</a>
                            <a href="#">Security</a>
                        </div>
                        <div>
                            <h4>Column C</h4>
                            <a href="#">Enterprise</a>
                            <a href="#">Startups</a>
                            <a href="#">Support</a>
                        </div>
                    </div>
                </div>

                <div class="ff-submenu-panel" data-panel="customers">
                    <div class="ff-submenu-grid">
                        <div>
                            <h4>Customers</h4>
                            <a href="#">Case Studies</a>
                            <a href="#">Testimonials</a>
                        </div>
                        <div>
                            <h4>Industries</h4>
                            <a href="#">Retail</a>
                            <a href="#">Finance</a>
                        </div>
                        <div>
                            <h4>More</h4>
                            <a href="#">Success Stories</a>
                            <a href="#">Partners</a>
                        </div>
                    </div>
                </div>

                <div class="ff-submenu-panel" data-panel="partnerships">
                    <div class="ff-submenu-grid">
                        <div>
                            <h4>Customers</h4>
                            <a href="#">Case Studies</a>
                            <a href="#">Testimonials</a>
                        </div>
                        <div>
                            <h4>Industries</h4>
                            <a href="#">Retail</a>
                            <a href="#">Finance</a>
                        </div>
                        <div>
                            <h4>More</h4>
                            <a href="#">Success Stories</a>
                            <a href="#">Partners</a>
                        </div>
                    </div>
                </div>

                <div class="ff-submenu-panel" data-panel="resources">
                    <div class="ff-submenu-grid">
                        <div>
                            <h4>Customers</h4>
                            <a href="#">Case Studies</a>
                            <a href="#">Testimonials</a>
                        </div>
                        <div>
                            <h4>Industries</h4>
                            <a href="#">Retail</a>
                            <a href="#">Finance</a>
                        </div>
                        <div>
                            <h4>More</h4>
                            <a href="#">Success Stories</a>
                            <a href="#">Partners</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>-->
        <!-- / Navigation -->

        <!-- Section and Container -->
        <section class="ff-section">
            <div class="ff-container">
                <h1>This is a Container</h1>
            </div>
        </section>
        <!-- / END: Section and Container -->

        <!-- Accordion -->
        <!--<section class="ff-section">
            <div class="ff-container">
                <div class="ff-accordion">
                    <div>
                        <button class="ff-accordion__button js-ff-accordion__button">
                            <div>Section 1</div>
                            <div class="ff-accordion__icon">test</div>
                        </button>
                        <div class="ff-accordion__content">
                            <p>This is the content for section 1.</p>
                        </div>
                    </div>
                    <div>
                        <button class="ff-accordion__button js-ff-accordion__button">
                            <div>Section 2</div>
                            <div class="ff-accordion__icon">test</div>
                        </button>
                        <div class="ff-accordion__content">
                            <p>This is the content for section 2.</p>
                        </div>
                    </div>
                    <div>
                        <button class="ff-accordion__button js-ff-accordion__button">
                            <div>Section 3</div>
                            <div class="ff-accordion__icon">test</div>
                        </button>
                        <div class="ff-accordion__content">
                            <p>This is the content for section 3.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>-->
        <!-- / END: Accordion -->

        <!-- Buttons -->
        <section class="ff-section">
            <div class="ff-container">
                <a href="#" role="button" class="ff-button ff-button--dark">Button dark</a>
                <a href="#" role="button" class="ff-button ff-button--light">Button light</a>
            </div>
        </section>
        <!-- / END: Buttons-->

        <!-- Grid -->
        <section class="ff-section">
            <div class="ff-container">
                <div class="ff-row">
                    <div class="ff-col">Auto</div>
                    <div class="ff-col">Auto</div>
                    <div class="ff-col">Auto</div>
                </div>
                <div class="ff-row">
                    <div class="ff-col-3">col-3</div>
                    <div class="ff-col-6">col-6</div>
                    <div class="ff-col-3">col-3</div>
                </div>
                <div class="ff-row">
                    <div class="ff-col-12 ff-col-md-6 ff-col-lg-4">Column A</div>
                    <div class="ff-col-12 ff-col-md-6 ff-col-lg-4">Column B</div>
                    <div class="ff-col-12 ff-col-md-12 ff-col-lg-4">Column C</div>
                </div>
            </div>
        </section>
        <!-- / END: Grid -->

        <!-- Flow -->
        <section class="ff-section">
            <div class="ff-container">
                <div class="ff-flow">
                    <h1>Welcome</h1>
                    <p>This is a simple paragraph within the .ff-flow element.</p>
                    <p>Notice the margin is added to the paragraph elements but not the heading, the first element.</p>
                    <p>This provides equal spacing within a container.</p>
                    <a href="#" class="ff-link">See more</a>
                </div>
            </div>
        </section>
        <!-- / END: Flow -->

        <!-- Component: Card -->
        <section class="ff-section">
            <div class="ff-container">
                <div class="ff-card-container">
                    <div class="ff-card">
                        <div class="ff-card__content">
                            <p>This is a card.</p>
                            <p>This is a card.</p>
                            <p>This is a card.</p>
                            <p>This is a card.</p>
                        </div>
                    </div>
                    <div class="ff-card">
                        <div class="ff-card__content">
                            This is a second card.
                        </div>
                    </div>
                    <div class="ff-card">
                        <div class="ff-card__content">
                            This is a second card.
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- / END: Component: Card -->

    </main>
</body>
</html>