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.