<!doctype html>
<!--[if IE 8 ]><html lang="en" class="ieAll ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ieAll ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Neocities: Create your free website now!</title>
  <meta itemprop="name"         content="Neocities.org" />
  <meta itemprop="description"  content="Create your own free home page, and do whatever you want with it." />
  <meta name="description"      content="Neocities is the new Geocities. Create your own free home page, and do whatever you want with it." />
  <meta name="keywords"         content="free website, html, css, learn to code, free hosting, build a website, create a web page" />

  <link rel="canonical" href="//neocities.org" />

  <meta property="og:title"       content="Neocities"/>
  <meta property="og:site_name"   content="Neocities | neocities.org"/>
  <meta property="og:type"        content="website"/>
  <meta property="og:image"       content=""/>
  <meta property="og:url"         content="//www.neocities.org"/>
  <meta property="og:description" content="Neocities is the new Geocities. Create your own free home page, and do whatever you want with it."/>

  <link rel="shortcut icon" type="image/ico"  href="/favicon.ico" />
  <link rel="apple-touch-icon-precomposed"    href="#apple-icon-144.png" />
  <link rel="apple-touch-startup-image"       href="#startup.png" />


  <!-- Mobile Meta -->
  <meta name="HandheldFriendly" content="True" />
  <meta name="MobileOptimized"  content="320" />
  <meta name="viewport"         content="width=device-width, minimum-scale=1, initial-scale=1" />

  <link href="/css/neo.css" rel="stylesheet" type="text/css" media="all"/>

  <!--[if lt IE 9]>
    <script type="text/javascript" src="/js/html5.min.js"></script>
  <![endif]-->

  <script src="/js/jquery-1.11.0.min.js"></script>
</head>

  <body class="hp"><a id="new"></a>

    <div class="page">

      <header class="header-Base">
        <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">
              <li>
                <a href="/" title="back to the start">Neocities</a>
              </li>
              <li>
                <a href="/browse" title="Browse Neocities member websites">Websites</a>
              </li>
              <li>
                <a href="/tutorials" title="Learn to code with these tutorials">Tutorials</a>
              </li>
              <li>
                <a href="/api" title="Neocities Developers API">API</a>
              </li>
              <li>
                <a href="/about" title="About Neocities">About</a>
              </li>
              <li>
                <a href="/plan" title="Support Neocities">Support Us</a>
              </li>
            </ul>

            <ul class="status-Nav">

              <% if !signed_in? %>
                <li>
                  <a href="/signin" class="sign-In" title="Sign into your account">Sign In</a>
                </li>
              <% else %>
                <li>
                  <a href="/dashboard" class="sign-In">Dashboard</a>
                </li>
                <li>
                  <a href="/settings" class="sign-In">Settings</a>
                </li>
                <li>
                  <a href="/signout" class="sign-In">Signout</a>
                </li>
              <% end %>

            </ul>
          </nav>

          <% if flash.keys.length > 0 %>
            <div class="alert txt-Center">
              <p style="padding:5px">
                <% flash.keys.each do |key| %>
                  <%== flash[key] %>
                <% end %>
              </p>
            </div>
          <% end %>

<div class="int-Logo hp-Logo">
  <a href="/" title="back to home">
    <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">Make your own web site, and discover new ones.</h2>
    <p class="intro-text">
     Neocities is a community of <a href="/browse"><%= @sites_count.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %> websites</a> that are bringing back creative expression on the web. Anyone can make a site, only your imagination is required. We provide the space, you provide the web site ideas. Join us!
    </p>
    <ul class="intro-List">
      <li class="intro-Social">
        <span class="intro-Icon"></span>
        <h2 class="delta">Share your web creation with the world</h2>
        <p class="base">
          Follow your favorite Neocities sites to keep up with all the latest updates. Discover new websites related to your interests, comment on them, and share them. Unlimited creativity—and zero ads.
        </p>
      </li>
      <li class="intro-Tools">
        <span class="intro-Icon"></span>
        <h2 class="delta">Powerful new features to help you build</h2>
        <p class="base">
          We’ve made it easier to build your website and explore other sites. Neocities has custom domain support, tag browsing (webrings), faster site performance, easy file uploading, RSS, subdirectory support, and much more.
      </li>
    </ul>
    </div>

    <div class="col signup-Area">
      <% if signed_in? %>

        <div class="signup-Form">
          <div class="content">
            <h2 class="gamma txt-Center">Build your Website!</h2>
          </div>
          <p class="txt-Center">
            Go to your dashboard to<br> start editing your website!
          </p>
          <br />
            <div class="txt-Center">
              <a href="/dashboard" class="btn-Action">Get Started</a>
            </div>
        </div>
      <% else %>
        <form id="createSiteForm" action="/new" method="POST" class="signup-Form" onsubmit="createSite(); return false">
          <input type="hidden" name="csrf_token" value="<%= csrf_token %>">
          <fieldset class="content">
            <h2 class="gamma">Sign up for free</h2>
            <hr />
            <label for="create-Input">Username</label>
            <input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
            <label for="create-Input" id="domain-name">.neocities.org</label>

            <label for="tags-input">Tags (your interests, site topics)</label>
            <input type="text" class="input-Area" id="tags-input" name="new_tags_string" placeholder="art, videogames, food, music, programming, gardening, cats" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />

            <div class="col col-50" style="padding-left:0;">
            <label for="password-input">Password</label>
            <input type="password" class="input-Area" id="password-input" name="password" placeholder="password" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
            </div>

            <div class="col col-50">
            <label for="email-input">Email</label>
            <input type="text" class="input-Area" id="email-input" name="email" placeholder="me@example.com" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
            </div>

            <input type="submit" value="Create My Site" class="btn-Action float-Right" />
          </fieldset>
        </form>

      <% end %>

    </div> <!-- end .col-50 -->

  </div> <!-- end .row -->

</div> <!-- end .header-Outro -->

</header>

<main class="content-Base">

<div class="section featured-Websites">
  <div class="nav prev"></div>
  <ul class="website-Gallery hp-Gallery">
    <li>
      <a href="http://dragonquest.neocities.org/" title="The Quest of Dragons" target="_blank">
        <img src="//neocities.org/site_screenshots/dragonquest/index.html.270x162.jpg" class="neo-SS" alt="Thumbnail of The Quest of Dragons" />
      </a>
    </li>
    <li>
      <a href="http://codeventurer.neocities.org/" title="codeventurer" target="_blank">
        <img src="http://neocities.org/site_screenshots/codeventurer/index.html.270x162.jpg" class="neo-SS" alt="Thumbnail of codeventurer" />
      </a>
    </li>
    <li>
      <a href="http://clouds.neocities.org/" title="Cloud Quotes" target="_blank">
        <img src="//neocities.org/site_screenshots/clouds/index.html.270x162.jpg" class="neo-SS" alt="Thumbnail of Cloud Quotes" />
      </a>
    </li>
    <li>
      <a href="http://manatee.neocities.org/" title="Title of Website" target="_blank">
        <img src="//neocities.org/site_screenshots/manatee/index.html.270x162.jpg" class="neo-SS" alt="Thumbnail of TITLE OF WEBSITE" />
      </a>
    </li>
    <li>
      <a href="http://suppilulemur.neocities.org/" title="Sokoban" target="_blank">
        <img src="//neocities.org/site_screenshots/suppilulemur/index.html.270x162.jpg" class="neo-SS" alt="Thumbnail of Sokoban" />
      </a>
    </li>
    <li>
      <a href="http://drawinglair.neocities.org/" title="Tomasz Zawadzki" target="_blank">
        <img src="//neocities.org/site_screenshots/drawinglair/index.html.270x162.jpg" class="neo-SS" alt="Thumbnail of Tomasz Zawadzki" />
      </a>
    </li>
  </ul>
  <div class="nav next"></div>
</div>

  <section class="section features">

    <h2 class="delta">Forget boring social networks. Let’s make the internet fun again. It’s time to bring back web surfing!</h2>
    <div class="row">
      <div class="col col-33">
        <h3><i class="fa fa-home"></i>You own your site</h3>
        <p>Sites hosted by Neocities are owned by you, not us. And we support custom domains (yoursite.com) for free. This means you always control the content on your site, and you can move it to/from Neocities whenever you want. And of course, all sites still get a subdomain (sitename.neocities.org) for free.</p>
      </div>
      <div class="col col-33">
        <h3><i class="fa fa-tachometer"></i>More space, speed, and security</h3>
        <p>Neocities now uses distributed, globally-cached web servers in datacenters all over the world to serve your site. Whether it’s your personal home page, or a busy professional site for your business, your site loads fast. We also provide Snowden-grade SSL cryptography, preventing snoops from seeing what you browse.</p>
      </div>

      <div class="col col-33">
        <h3><i class="fa fa-lock"></i>Something awesome goes here</h3>
        <p>wooooo.</p>
      </div>
    </div>

    <div class="row">
      <div class="col col-33">
        <h3><i class="fa fa-wrench"></i>Developer tools</h3>
        <p>We now have powerful APIs for developers building applications, and support for remote file uploading via command line tools. Using our new WebDAV support, you can mount your site to your computer, just like Dropbox.</p>
      </div>

      <div class="col col-33">
        <h3><i class="fa fa-university"></i>Open Company</h3>
        <p>Neocities is a member of the <a href="http://www.opencompany.org/" target="_blank">Open Company Initative</a>, working to help improve trustability in tech companies. We <a href="https://github.com/neocities" target="_blank">publish</a> the code that powers the site for inspection, and keep open records for everyone to inspect. And if someone sends a bad takedown request, we fight it. We want to win your trust - not lock you in.</p>
      </div>

      <div class="col col-33">
        <h3><i class="fa fa-eye-slash"></i>Zero advertising</h3>
        <p>Neocities does not sell your personal data, or put ads on your site. In fact, we're prohibited from doing that in our own Terms of Service. We want to succeed the old fashioned way - by providing a great service that helps people be awesome.</p>
      </div>
    </div>
    
    <div class="col col-100">
      <div class="row press">
        <a href="http://www.wired.com/2013/07/neocities/" class="logo wired"></a>
        <a href="http://www.fastcodesign.com/3037028/why-the-internet-is-time-traveling-back-to-1994" class="logo fastco"></a>
        <a href="http://motherboard.vice.com/blog/neocities-is-recreating-the-garish-web-10-creativity-of-geocities" class="logo vice"></a>
        <a href="http://arstechnica.com/tech-policy/2014/05/web-host-gives-fcc-a-28-8kbps-slow-lane-in-net-neutrality-protest/" class="logo ars"></a>
        <!--<a href="/press" class="more">See all press »</a>-->
      </div>
      <div class="row quote">
          <h3>
            "Designed as a 21st century reincarnation of GeoCities, Neocities lets you make your own site for free. <strong>And it just might spark a renaissance of creativity online.</strong>"
            <br />
            —Matthew Guay, <a href="http://web.appstorm.net/reviews/web-dev/neocities-the-free-place-to-code-your-own-site-from-scratch" target="_blank">AppStorm</a>
          </h3>
      </div>
    </div>
  </section>
  
  <%== erb :'plan/_pricing' %>

  <section class="section bottom-signup">
    <h2>What are you waiting for? <a href="#new">Start building your web site!</a></h2>
  </section>
</main>

<footer class="footer-Base">
  <section 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">Support Us</h2>
        <p class="tiny">
          Neocities is funded by donations. If you’d like to contribute, you can help us
          pay our server costs using Bitcoin or PayPal.
        </p>
        <a href="/donate" title="Donate to Neocities" class="action-Link">Donate Today</a>
      </div>
    </div>
    <div class="col col-33">
      <div class="f-Col f-Col-2 clearfix">
        <span class="footer-icon"></span>
        <h2 class="delta">About Us</h2>
        <p class="tiny">
          Neocities is here to bring back the creativity and
          free expression to the world wide web that made it great.
        </p>
        <a href="/about" title="More about Neocities" class="action-Link">More About Us</a>
      </div>
    </div>
    <div class="col col-33">
      <div class="f-Col f-Col-3 clearfix">
        <span class="footer-icon"></span>
        <h2 class="delta">Latest News</h2>
        <p class="tiny">
          The latest news on Neocities can be found on our blog.
        </p>
        <a href="/blog" title="Read about Neocities news and updates" class="action-Link">Read More</a>
      </div>
    </div>
  </div>
  </div>
</section>

  <%== erb :'_footer', layout: false%>
</footer>

    </div>
    <script src="/js/app.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script>
      function createSite() {
        $.post('/create', $('#createSiteForm').serialize(), function(res) {
          if(res.result == 'ok')
            location.reload()
        })
      }

      $('input[type=text]').on('change focusout', function(obj) {
        $.post('/create_validate', {field: obj.target.name, value: obj.target.value, csrf_token: '<%= csrf_token %>'}, function(res) {
          if(res.result == 'ok') {
            return $(obj.target).tooltip('hide')
          }
          $(obj.target).attr('data-original-title', res.error)
          $(obj.target).tooltip('show')
        })
      })
    </script>
  </body>
</html>