index.html

---
layout: special
bgcolor: prime
promo: true
permalink: /
---

<section class="special bg bg-{{page.bgcolor}}">
    <div id="app" class="bd">
        <div class="content">
            <h2 class="hero">
                {{site.tagline}}
            </h2>

            <div class="main">
                <div class="inp-paste">
                    <p id="url-form">
                        <label for="url" class="offscreen">Project URL:</label>
                        <input id="url" class="inp" type="url" value="" placeholder="Paste a GitHub, GitLab, Bitbucket file or gist URL here.." autofocus tabindex="1">
                    </p>
                </div>

                <div class="column">
                    <h2>Use this URL in <strong>production</strong></h2>

                    <div class="inp-container">
                        <input id="url-prod" class="inp" placeholder="{{site.cdn.url}}/gh/:user/:repo/:tag/:file" readonly tabindex="2">
                        <button id="url-prod-copy" class="inp-copy-button" data-clipboard-target="#url-prod" title="Copy URL" disabled>
                            <i class="fa fa-copy"></i>
                        </button>
                    </div>

                    <ul>
                        <li>
                            <p>No traffic limits or throttling. Files are served via <a class="white" href="/network">Super Fast Global CDN</a>.</p>
                        </li>
                        <li>
                            <p>Use a specific tag or commit hash in the URL (not a branch). Files are cached permanently based on the URL.</p>
                        </li>
                        <li>
                            <p>Load project from <strong>GitHub, GitLab and Bitbucket</strong> more easily!</p>
                        </li>
                        <li>
                            <p>Files are cached in the browser for 1 year. Learn more about <a class="white" href="/network#cache">Cache Behavior</a>.</p>
                        </li>
                    </ul>
                </div>

                <div class="column">
                    <h2>Solution for your static files</h2>
                    <img class="img-feature" src="{{site.cdn.static}}/images/apps/staticaly.svg" alt="{{page.title}}">
                </div>
            </div>
        </div>
    </div>
</section>

{% include sponsors/optimus.html %}

<div class="bd">
    <div class="content">
        {% include features/main.html %}

        <hr>

        {% include features/imgpx.html %}

        <hr>

        {% include features/apps.html %}
    </div>
</div>

{% include sponsors/optimus-footer.html %}