<body class="hp">
  <div class="page">

    <header class="header-Base" role="banner">
      <nav class="header-Nav clearfix" role="navigation">
        <a href="#!" title="show small screen nav" class="small-Nav">
          <img src="/img/nav-Icon.png" alt="navigation icon" />
        </a>
        <ul class="h-Nav constant-Nav" role="presentation">
          <li>
            <a href="https://neocities.org" title="Neocities.org">Neocities</a>
          </li>
          <li>
            <a href="https://neocities.org/browse">Websites</a>
          </li>
          <li>
            <a href="https://neocities.org/tutorials">Learn</a>
          </li>
          <li>
            <a href="https://neocities.org/supporter">Support Us<i class="fa fa-heart"></i></a>
          </li>
          <li>
            <a href="https://neocities.org/about">About</a>
          </li>
        </ul>

        <ul class="status-Nav">
          <li>
            <a href="https://neocities.org/signin" class="sign-In">Sign In</a>
          </li>
          <li>
            <a href="https://neocities.org/#new" class="sign-In">Create Account</a>
          </li>
        </ul>
      </nav>

      <%== flash_display centered: true %>

      <div class="int-Logo hp-Logo">
        <a href="https://neocities.org" title="Neocities.org">
          <span class="hidden">Neocities.org</span>
          <img src="/img/cat.png" alt="Neocities.org" />
        </a>
      </div>

      <section class="header-Intro">
        <h1 class="logo header-Content content">
          <span class="hidden">Neocities.org</span>
          <img src="/img/neocities-Logo.png" alt="Neocities.org" />
        </h1>
      </section>

      <div class="header-Outro">
        <div class="row header-Content content">
          <div class="col intro">
            <h2 class="section-header">Create your own free website.<br>Unlimited creativity, zero ads.</h2>
            <p class="intro-text">
              Neocities is a social network of websites bringing back the lost individual creativity of the web.
              The full community and tools live at <a href="https://neocities.org">neocities.org</a>.
              Create an account or sign in there to get started.
            </p>
            <ul class="intro-List">
              <li class="intro-Tools">
                <span class="intro-Icon"></span>
                <h3 class="delta">Powerful features to help you build</h3>
                <p class="base">
                  We've made it easy to build your web site and explore other sites. Neocities features an in-browser
                  HTML editor, a <a href="https://neocities.org/cli">command line tool</a>, custom domain support, fast
                  site performance, easy file uploading, RSS feeds, <a href="https://neocities.org/api">APIs</a>,
                  and more.
                </p>
              </li>

              <li class="intro-Social">
                <span class="intro-Icon"></span>
                <h3 class="delta">Share your web creation with the world</h3>
                <p class="base">
                  It's your web site, your vision. Make it as normal or crazy as you want. You're the artist, you're in control.
                </p>
              </li>
            </ul>
          </div>

          <div class="col signup-Area">
            <div class="signup-Form">
              <div class="content">
                <h3 class="gamma txt-Center">Neocities lives at neocities.org</h3>
              </div>
              <p class="txt-Center">
                Visit the main site to create your account<br> or manage your existing sites.
              </p>
              <div class="txt-Center">
                <a href="https://neocities.org/#new" class="btn-Action">Create a Free Site</a>
              </div>
              <p class="txt-Center" style="margin-top: 12px;">
                Already have an account? <a href="https://neocities.org/signin">Sign In</a>
              </p>
            </div>
          </div>

        </div>
      </div>

    </header>

    <main class="content-Base">

    <div class="section previews">
    <h2 class="delta">Our mission: To make the web fun again by giving you back control of how you express yourself online.</h2>

    <div class="row content">
      <div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-editor-screenshot.png)"></div></div>
      <div class="col col-50 text">
        <h3><i class="fa fa-edit"></i> HTML editor, right in your browser</h3>
        <p>No tools needed. With our easy-to-use HTML editor, you're ready to start building your awesome website right now.</p>
        <p>If you'd rather use your favorite desktop editor, no problem. Uploading files is as easy as drag-n-drop.</p>
      </div>
    </div>

    <div class="row content right">
      <div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-browse-screenshot.jpg);"></div></div>
      <div class="col col-50 text">
        <h3><i class="fa fa-globe"></i> Welcome back, web surfing</h3>
        <p>All Neocities sites are viewable and easily surfable in our <a href="https://neocities.org/browse">website gallery</a>.</p>
        <p>Using tags (our version of Web Rings) you can easily discover new sites related to your interests.</p>
      </div>
    </div>

    <div class="row content">
      <div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-follow-screenshot.jpg);"></div></div>
      <div class="col col-50 text">
        <h3><i class="fa fa-user-plus"></i> Follow your favorite Neocities sites</h3>
        <p>Keep track of all your favorite sites by following them. Any changes to the sites automatically show up in your news feed. You'll also see what sites they follow.</p>
      </div>
    </div>

    <div class="row content right">
      <div class="col col-50"><div class="screenshot" style="background-image:url(/img/front-comment-screenshot.png);"></div></div>
      <div class="col col-50 text">
        <h3><i class="fa fa-comments-o"></i> Web creativity plus community</h3>
        <p>Interact with your favorite web builders by posting comments, and sharing their sites on your social network of choice.</p>
      </div>
    </div>
    </div>

    <section class="section features">
      <div class="row">
        <div class="col col-50">
          <h3>
            <i class="fa fa-eye-slash"></i>Zero Advertising, Zero AI Data Selling
          </h3>
          <p>
            <strong>Neocities will never sell your data for AI training or put advertising on your site.</strong> Instead, we are funded directly by people just like you with <a href="https://neocities.org/supporter">supporter accounts</a> and <a href="https://neocities.org/donate">donations</a>.
          </p>
        </div>

        <div class="col col-50">
          <h3><i class="fa fa-tachometer"></i>Fast Site Loading</h3>
          <p>Neocities operates our own caching anycast CDN in over a dozen datacenters all over the world to quickly serve your site to visitors with strong SSL and support for HTTP/2. Our strict focus on static web hosting allows us to routinely out-perform the pricey cloud services on reliability, speed and uptime.</p>
        </div>
      </div>

      <div class="row">
        <div class="col col-50">
          <h3><i class="fa fa-wrench"></i>Developer Tools</h3>
          <p>Our fast static hosting comes with a great in-browser HTML editor, easy file uploading, a <a href="https://neocities.org/cli">command line tool</a>, RSS feeds for every site, <a href="https://neocities.org/api">APIs</a> for building developer applications, and much more!</p>
        </div>

        <div class="col col-50">
          <h3><i class="fa fa-university"></i>Open Source</h3>
          <p>We <a href="https://github.com/neocities" target="_blank">publish</a> the code that powers the site for inspection. We want to win your trust&mdash;not lock you in.</p>
        </div>
      </div>
    </section>

    <section class="section bottom-signup">
      <h2>Ready to build? <a href="https://neocities.org/#new">Create your website at Neocities.org</a></h2>
    </section>

    </main>

    <footer class="footer-Base" role="contentinfo">
      <div class="footer-Intro">
        <div class="footer-Content">
          <div class="row">
            <div class="col col-33">
              <div class="f-Col f-Col-1 clearfix">
                <span class="footer-icon"></span>
                <h2 class="delta">Get Started</h2>
                <p class="tiny">
                  Create a free site or sign in to manage your pages on Neocities.org.
                </p>
                <a href="https://neocities.org/#new" title="Create a free site on Neocities.org" class="action-Link">Create a Site</a>
              </div>
            </div>
            <div class="col col-33">
              <div class="f-Col f-Col-2 clearfix">
                <span class="footer-icon"></span>
                <h2 class="delta">Support Us</h2>
                <p class="tiny">
                  Neocities does not run ads. Support us with a supporter account or donation.
                </p>
                <a href="https://neocities.org/supporter" title="Support Neocities" class="action-Link">Become a Supporter</a>
              </div>
            </div>
            <div class="col col-33">
              <div class="f-Col f-Col-3 clearfix">
                <span class="footer-icon"></span>
                <h2 class="delta">Learn More</h2>
                <p class="tiny">
                  Tutorials, APIs, and guides to help you build your site.
                </p>
                <a href="https://neocities.org/tutorials" title="Neocities Tutorials" class="action-Link">View Tutorials</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <aside class="footer-Outro">
        <div class="footer-Content">
          <div class="row">
            <p class="tiny col credits">
              <a href="https://neocities.org" title="Neocities.org" style="text-decoration:none;">Neocities</a> is <a href="https://github.com/neocities" title="Neocities on GitHub">open source</a>. Follow us on <a href="https://bsky.app/profile/neocities.org">Bluesky</a>
            </p>
            <nav class="footer-Nav col">
              <ul class="tiny h-Nav">
                <li><a href="https://neocities.org/about">About</a></li>
                <li><a href="https://neocities.org/donate">Donate</a></li>
                <li><a href="https://neocities.org/cli">CLI</a></li>
                <li><a href="https://neocities.org/api">API</a></li>
                <li><a href="https://neocities.org/press">Press</a></li>
                <li><a href="http://status.neocitiesops.net/">Status</a></li>
                <li><a href="https://neocities.org/terms" rel="nofollow">Terms</a></li>
                <li><a href="https://neocities.org/contact" rel="nofollow">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </aside>
    </footer>
  </div>
  <script src="/js/app.min.js"></script>
</body>
