PageSourceSearch

https://codestitchdemo.netlify.app/pricing

html codestitchdemo.netlify.app collected 2026-10-03 10:35:22 UTC 21,630 bytes, 400 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8    <!--Swap our for actual link-->
9    <link rel="canonical" href="https://www.company.com">
10    <meta name="robots" content="noindex" />
11
12    <meta name="description" content="">
13    <meta name="keywords" content="">
14
15    <!--Social Media Display-->
16    <meta property="og:title" content=""/>
17    <meta property="og:description" content=""/>
18    <meta property="og:type" content="website" />
19    <meta property="og:url" content=""/>
20    <meta property="og:image" content="/images/social.jpg"/>
21    <meta property="og:image:secure_url" content="/images/social.jpg"/>
22
23    <!--Favicons-->
24    <!--Use https://realfavicongenerator.net/ to generate and download your favicons-->
25    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
26    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v1">
27    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
28    <link rel="manifest" href="/site.webmanifest">
29    <meta name="msapplication-TileColor" content="#da532c">
30    <meta name="theme-color" content="#ffffff">
31
32    <!-- Preload -->
33    <link rel="preload" as="image" href="/images/landing-m.webp">
34    <link rel="preload" as="font" type="font/woff2" href="fonts/roboto-v29-latin-regular.woff2" crossorigin>
35    <link rel="preload" as="font" type="font/woff2" href="fonts/roboto-v29-latin-700.woff2" crossorigin>
36
37    <link rel="stylesheet" href="/css/root.css">
38    <link rel="stylesheet" href="/css/pricing.css">
39    <link rel="stylesheet" href="/css/dark.css">
40
41    <title>Company Name | What They Do | Town and State</title>
42</head>
43<body>
44    <!--Screen reader skip main nav-->
45    <a class="skip" aria-label="skip to main content" href="#main">Click To Skip To Main Content</a>
46
47    <!-- ============================================ -->
48    <!--                 Navigation                   -->
49    <!-- ============================================ -->
50
51    <div id="navigation">
52        <div class="container">
53            <a aria-label='click to go to home page' class='logo' href='/'>
54                <img class="light" aria-hidden="true" src="/images/logo.png" decoding="async" alt="logo" width="214" height="41">
55                <img class="dark" aria-hidden="true" src="/images/logo-white.svg" decoding="async" alt="logo" width="214" height="41">
56            </a>
57
58            <!--Main Nav-->
59            <nav id="navbar-menu">
60                <ul>
61                    <li><a href='/how-it-works'>How It Works</a></li>
62                    <li><a href='/web-design-resources'>Resources</a></li>
63                    <li><a class='active' href='/pricing'>Pricing</a></li>
64                    <li><a href='/faq'>FAQ</a></li>
65                    <li><a href='/documentation'>Documentation</a></li>
66                    <li><a href='/contact'>Contact</a></li>
67                    <li><a href="" class="button-orange">Upgrade to Pro</a></li>
68                    <li>
69                        <a class="login" href="">Login</a>
70                        <span class="slash">/</span>
71                        <a class="login" href="">Sign Up</a>
72                    </li>
73                </ul>
74            </nav>
75
76            <!--Dark Mode toggle-->
77            <button id="dark-mode-toggle">
78                <!--Moon is an inline SVG so you can edit the color if needed-->
79                <svg class="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" style="enable-background:new 0 0 480 480" xml:space="preserve"><path d="M459.782 347.328c-4.288-5.28-11.488-7.232-17.824-4.96-17.76 6.368-37.024 9.632-57.312 9.632-97.056 0-176-78.976-176-176 0-58.4 28.832-112.768 77.12-145.472 5.472-3.712 8.096-10.4 6.624-16.832S285.638 2.4 279.078 1.44C271.59.352 264.134 0 256.646 0c-132.352 0-240 107.648-240 240s107.648 240 240 240c84 0 160.416-42.688 204.352-114.176 3.552-5.792 3.04-13.184-1.216-18.496z"/></svg>
80                <img class="sun" aria-hidden="true" src="/images/sun.svg" decoding="async" alt="moon" width="15" height="15">
81            </button>
82
83            <!--Mobile Nav toggle-->
84            <button class="hamburger-menu">
85                <span aria-hidden="true"></span>
86            </button>
87        </div>
88    </div>
89
90    <main id="main">
91
92        <!-- ============================================ -->
93        <!--                  Pricing                     -->
94        <!-- ============================================ -->
95
96        <section id="pricing-section">
97            <h2>Choose Your Plan</h2>
98            <p class="heading2">
99                Try CodeStitch's free tier or get a 3 day free trial both with no credit card required. When your trial ends, you can upgrade anytime and whatever progress you made (including any Stitches you made for your personal library) will still be there!
100            </p>
101            <div class="toggle-group">
102                <span id="pro" class="plan">Monthly</span>
103                <div class="toggle" aria-label="click to switch plans pricing">
104                    <span aria-hidden="true" class="toggle-switch"></span>
105                </div>
106                <span id="agency" class="plan">Yearly</span>
107            </div>
108            <div class="plans-wrapper">
109                <div id="pro-plans" class="plans active">
110                    <!--Basic-->
111                    <div class="item">
112                        <h3>Basic</h3>
113                        <p>
114                            For dipping your feet and trying us out, or just borrowing a few things. 
115                        </p>
116                        <span class="price">$0 forever</span>
117                        <a class='button-blue' href='/basic'>Let's get started</a>
118                        <span class="included">What's included?</span>
119                        <ul>
120                            <li>
121                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/blue-check.svg" alt="code stitch icon" width="20" height="20">
122                                Limitied access to Stitches
123                            </li>
124                            <li>
125                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/blue-check.svg" alt="code stitch icon" width="20" height="20">
126                                No Figma design files
127                            </li>
128                            <li>
129                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/blue-check.svg" alt="code stitch icon" width="20" height="20">
130                                Basic support
131                            </li>
132                        </ul>
133                    </div>
134                    <!--Premium-->
135                    <div class="item">
136                        <div class="popular">
137                            <img aria-hidden="true" loading="lazy" decoding="async" src="/images/star.svg" alt="star" width="20" height="20">
138                            <span>Most Popular</span>
139                        </div>
140                        <h3>Pro</h3>
141                        <p>
142                            When you’re ready to start building full websites for clients. 
143                        </p>
144                        <span class="price">$30/mo</span>
145                        <a class='button-blue' href='/pro'>Get 3 Day Free Trial</a>
146                        <span class="included">What's included?</span>
147                        <ul>
148                            <li>
149                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
150                                Unlimited access to all Stitches
151                            </li>
152                            <li>
153                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
154                                Includes Figma design links
155                            </li>
156                            <li>
157                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
158                                Built in dark mode styles
159                            </li>
160                            <li>
161                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
162                                Priority Support
163                            </li>
164                        </ul>
165                    </div>
166                    <!--Yearly-->
167                    <div class="item">
168                        <h3>Freelancer</h3>
169                        <p>
170                            Create your own personal component library of your own code.
171                        </p>
172                        <span class="price">$50/mo</span>
173                        <a class='button-blue' href='/freelancer'>Get 3 Day Free Trial</a>
174                        <span class="included">What's included?</span>
175                        <ul>
176                            <li>
177                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
178                                Create your own personal component library
179                            </li>
180                            <li>
181                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
182                                + Access to the Code Stitch library
183                            </li>
184                            <li>
185                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
186                                Add additional code file types
187                            </li>
188                        </ul>
189                    </div>
190                </div>
191                <div id="agency-plans" class="plans">
192                    <!--Basic-->
193                    <div class="item">
194                        <h3>Basic</h3>
195                        <p>
196                            For dipping your feet and trying us out, or just borrowing a few things. 
197                        </p>
198                        <span class="price">$0 forever</span>
199                        <a class='button-blue' href='/basic'>Let's get started</a>
200                        <span class="included">What's included?</span>
201                        <ul>
202                            <li>
203                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/blue-check.svg" alt="code stitch icon" width="20" height="20">
204                                Limitied access to Stitches
205                            </li>
206                            <li>
207                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/blue-check.svg" alt="code stitch icon" width="20" height="20">
208                                No Figma Design Files
209                            </li>
210                            <li>
211                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/blue-check.svg" alt="code stitch icon" width="20" height="20">
212                                Basic Support
213                            </li>
214                        </ul>
215                    </div>
216                    <!--Premium-->
217                    <div class="item">
218                        <div class="popular">
219                            <img aria-hidden="true" loading="lazy" decoding="async" src="/images/star.svg" alt="star" width="20" height="20">
220                            <span>Most Popular</span>
221                        </div>
222                        <h3>Pro</h3>
223                        <p>
224                            When you’re ready to start building full websites for clients. 
225                        </p>
226                        <span class="price">$324/yr</span>
227                        <a class='button-blue' href='/pro-yearly'>Upgrade And Save 10%</a>
228                        <span class="included">What's included?</span>
229                        <ul>
230                            <li>
231                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
232                                Unlimited access to all Stitches
233                            </li>
234                            <li>
235                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
236                                Includes Figma design links
237                            </li>
238                            <li>
239                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
240                                Built in dark mode styles
241                            </li>
242                            <li>
243                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
244                                Priority Support
245                            </li>
246                        </ul>
247                    </div>
248                    <!--Yearly-->
249                    <div class="item">
250                        <h3>Freelancer</h3>
251                        <p>
252                            Create your own personal component library of your own code.
253                        </p>
254                        <span class="price">$540/yr</span>
255                        <a class='button-blue' href='/freelancer-yearly'>Upgrade And Save 10%</a>
256                        <span class="included">What's included?</span>
257                        <ul>
258                            <li>
259                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
260                                Create your own personal component library
261                            </li>
262                            <li>
263                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
264                                + Access to the Code Stitch library
265                            </li>
266                            <li>
267                                <img aria-hidden="true" loading="lazy" decoding="async" src="/images/purple-check.svg" alt="code stitch icon" width="20" height="20">
268                                Add additional code file types
269                            </li>
270                        </ul>
271                    </div>
272                </div>
273            </div>
274        </section>
275
276        <!-- ============================================ -->
277        <!--                 Newsletter                   -->
278        <!-- ============================================ -->
279
280        <section id="newsletter">
281            <h2><span>Ready to start creating</span> beautiful websites?</h2>
282            <p>
283                Our blocks are designed by professional designers, and developed by skilled developers so you don’t have to worry about the details. 
284            </p>
285            <form id="cta-form" name="Footer Subscribe" method="post">
286                <input id="email" aria-label="email" class="input1 right" name="email" type="email" placeholder="[email protected]" required>
287                <button name="submit" type="submit" id="contact-submit" class="button-transparent" data-submit="...Sending">Subscribe to Our Newsletter</button>
288            </form>
289            <span class="spam">*No spam, we promise. Only product updates.</span>
290            <a class='button-orange' href='/contact'>Get Started</a>
291        </section>
292    </main>
293
294    <footer id="footer">
295        <div class="container">
296            <a class="footer-logo" href="">
297                <img class="light" aria-hidden="true" loading="lazy" decoding="async" src="/images/logo.png" alt="code stitch logo" width="214" height="41">
298                <img class="dark" aria-hidden="true" loading="lazy" decoding="async" src="/images/logo-white.svg" alt="code stitch logo" width="214" height="41">
299            </a>
300            <div class="lists">
301                <ul>
302                    <li><h2>Quick Links</h2></li>
303                    <li><a href='/how-it-works'>How It Works</a></li>
304                    <li><a href='/web-design-resources'>Resources</a></li>
305                    <li><a href='/pricing'>Pricing</a></li>
306                    <li><a href='/faq'>FAQ</a></li>
307                    <li><a href='/contact'>Contact</a></li>
308                </ul>
309                <ul>
310                    <li><h2>Account</h2></li>
311                    <li><a href="">My Account</a></li>
312                    <li><a href="">Dashboard</a></li>
313                    <li><a href="">Stitch Library</a></li>
314                    <li><a href="">Preferences</a></li>
315                    <li><a href="">Settings</a></li>
316                </ul>
317                <ul>
318                    <li><h2>Legal</h2></li>
319                    <li><a href="">Privacy Policy</a></li>
320                    <li><a href="">Terms of Use</a></li>
321                    <li><a href="">Sales & Refunds</a></li>
322                </ul>
323                <ul>
324                    <li><h2>Miscellaneous</h2></li>
325                    <li><a href="">Login/Sign up</a></li>
326                    <li><a href="">Sitemap</a></li>
327                    <li><a href='/page-speed-handbook'>Pagespeed Handbook</a></li>
328                </ul>
329            </div>
330            <div class="social-group">
331                <a aria-label="go to facebook" href="">
332                    <img aria-hidden="true" loading="lazy" decoding="async" src="/images/facebook.svg" alt="facebook logo" width="24" height="24">
333                </a>
334                <a aria-label="go to twitter" href="">
335                    <img aria-hidden="true" loading="lazy" decoding="async" src="/images/twitter.svg" alt="witter logo" width="24" height="24">
336                </a>
337                <a aria-label="go to linked in" href="">
338                    <img aria-hidden="true" loading="lazy" decoding="async" src="/images/linkedin.svg" alt="linked in logo" width="24" height="24">
339                </a>
340                <a aria-label="go to you tube" href="">
341                    <img aria-hidden="true" loading="lazy" decoding="async" src="/images/youtube.svg" alt="youtube logo" width="24" height="24">
342                </a>
343                <a aria-label="go to sub reddit" href="">
344                    <img aria-hidden="true" loading="lazy" decoding="async" src="/images/reddit.svg" alt="reddit logo" width="24" height="24">
345                </a>
346            </div>
347            <div aria-hidden="true" class="bar"></div>
348            <div class="credit">
349                <span class="copyright">Copyright © 2022 CodeStich Inc. All rights reserved.</span>
350                <a href="#main">Back <span>to Top</span></a>
351            </div>
352        </div>
353    </footer>
354
355    
355<script defer src="/nav.js"></script>
355
356    
356<script src="/dark.js"></script>
356
357
358    
358<script defer>
359        const pricingSection = document.querySelector("#pricing-section");
360        const toggleGroup = document.querySelector("#pricing-section .toggle-group");
361        const toggle = document.querySelector("#pricing-section .toggle-group .toggle");
362        const pro = document.querySelector("#pricing-section #pro");
363        const agency = document.querySelector("#pricing-section #agency");
364
365        const proPlans = document.querySelector("#pricing-section #pro-plans");
366        const agencyPlans = document.querySelector("#pricing-section #agency-plans");
367
368        toggle.addEventListener('click', (e) => { 
369            toggleGroup.classList.toggle("active");
370            agencyPlans.classList.toggle("active");
371            proPlans.classList.toggle("active");
372            pricingSection.classList.toggle("agency-active");
373        });
374        pro.addEventListener('click', (e) => { 
375            toggleGroup.classList.remove("active");
376            agencyPlans.classList.remove("active");
377            proPlans.classList.add("active");
378            pricingSection.classList.remove("agency-active");
379        });
380        agency.addEventListener('click', (e) => { 
381            toggleGroup.classList.add("active");
382            agencyPlans.classList.add("active");
383            proPlans.classList.remove("active");
384            pricingSection.classList.add("agency-active");
385        });
386    </script>
386
387    
387<script defer>
388        document.addEventListener('scroll', (e) => { 
389            const scroll = document.documentElement.scrollTop;
390            if(scroll >= 100){
391        document.querySelector('body').classList.add('scroll')
392            } else {
393            document.querySelector('body').classList.remove('scroll')
394            }
395        });
396    </script>
396
397
398
399</body>
400</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.