description = "home layout"

[blogPosts]
pageNumber = "{{ :page }}"
categoryFilter = "news"
postsPerPage = 4
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = "home"
postPage = "{{ :slug }}"
==

<!DOCTYPE html>
<html lang="en">
{% partial "head" %}
{% partial "header" %}
{% set posts = blogPosts.posts %}

<style>
  #main_message {
    background-color: var(--dark-color);
    position: relative;
    z-index: 2;
  }

  #main_message .container {
    overflow: initial;
  }

  .full-graphic {
    padding-bottom: 0px;
  }

  .full-graphic > img {
    height: 100%;
  }

  #donations {
    background-color: var(--dark-color);
    color: var(--dark-color-text);
    overflow: auto;
    text-align: center;
  }

  #donations h1, #donations h2, #donations h3 {
    color: var(--dark-color-text-title);
  }

  #sponsors .sponsor {
    overflow: auto;
    display: flex;
    align-items: center;
    height: 70px;
    box-sizing: border-box;
    margin-bottom: 8px;
    margin-left: 8px;
  }

  #sponsors .platinum .sponsor {
    height: 100px;
  }

  #sponsors img {
    width: inherit;
    height: 100%;
  }

  #sponsors .flex {
    justify-content: center;
    flex-wrap: wrap;
  }

  .feature, #highlight {
    position: relative;
  }

  #highlight {
    min-height: 250px;
    background-size: cover;
    background-position: center;
  }

  .feature {
    margin-bottom: 16px;
  }

  .features-row > :first-child, .split-row > :first-child {
    margin-right: 8px;
  }

  .features-row > :last-child, .split-row > :last-child {
    margin-left: 8px;
  }

  .feature img {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #607080;
  }

  .feature .dark, #highlight .dark {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--transparent-cover-darker);
  }

  .feature .dark h4 {
    color: var(--dark-color-text-title);
  }

  @media (max-width: 900px) {
    .features-row > :first-child {
      margin-right: 0px;
    }
    .features-row > :last-child {
      margin-left: 0px;
    }
  }

  .img-auto-size {
    width: 100%;
    height: auto;
  }
</style>

<div id="main_image"></div>

<section id="main_message" class="dark">
  <div class="container flex eqsize responsive">

    <div class="padded">
      <h2>The game engine you waited&nbsp;for.</h2>
      <p>
        Godot provides a huge set of common tools, so you can just focus on
        making your game without reinventing the wheel.
      </p>
      <p>
        Godot is completely free and open-source under the very permissive MIT license.
        No strings attached, no royalties, nothing.
        Your game is yours, down to the last line of engine code.
      </p>

      <a href="/download" class="btn download">
        <div class="main">Download</div><div class="opt">3.2</div>
      </a>
      <a href="/features" class="btn flat">Learn more</a>
    </div>

    <div class="base-padding full-graphic text-right">
      <img src=" {{ 'assets/home/graphic.svg' | theme }} " alt="">
    </div>

  </div>
</section>

<section id="news_and_highlights" class="container padded">
  <div class="flex eqsize responsive card">

    <a id="highlight" style="background-image: url({{ posts[0].featured_images[0].path }});" href="{{ 'article' | page({ slug: posts[0].slug }) }}">
      <div class="dark base-padding">
        <h4 class="no-margin">{{ posts[0].title }}</h4>
        <p class="hide-on-mobile">{{ str_limit(posts[0].excerpt, 200) | raw }}</p>
      </div>
    </a>

    <div id="news">
      <h3 class="base-padding no-margin-bottom">News</h3>
      <hr class="">
      {% for post in posts %}
        {% if post != posts[0] %}
          <a class="base-padding flex base-color-text" href="{{ 'article'|page({ slug: post.slug }) }}">
            <strong>{{ post.title }}</strong>
          </a>
          <hr>
        {% endif %}
      {% endfor %}
      <div class="text-center base-padding"><a href="/news" class="btn flat no-margin">More</a></div>
    </div>

  </div>
</section>

<section id="features" class="container padded">
  <h2 class="text-right">A different way to make games</h2>

  <div class="flex eqsize responsive features-row">
    <div class="feature">
      <img src="{{ 'assets/home/features/innovative.png' | theme }}" alt="" width="1" height="1">
      <div class="dark base-padding">
        <h4>Innovative Design</h4>
        <p>Big or small ideas adapt seamlessly to Godot's node-based architecture, making your life easier.</p>
      </div>
    </div>
    <div class="feature">
      <img src="{{ 'assets/home/features/3d.jpg' | theme }}" alt="" width="1" height="1">
      <div class="dark base-padding">
        <h4>Gorgeous 3D</h4>
        <p>Innovative 3D renderer design, which makes your art look great with minimal effort.</p>
      </div>
    </div>
  </div>

  <div class="flex eqsize responsive features-row">
    <div class="feature">
      <img src="{{ 'assets/home/features/2d.jpg' | theme }}" alt="" width="1" height="1">
      <div class="dark base-padding">
        <h4>Beautiful 2D</h4>
        <p>Dedicated 2D engine that works in pixel coordinates, with plenty of built-in tools.</p>
      </div>
    </div>
    <div class="feature">
      <img src="{{ 'assets/home/features/easy_code.png' | theme }}" alt="" width="1" height="1">
      <div class="dark base-padding">
        <h4>Easy to program</h4>
        <p>Object-oriented API with language options such as GDScript, C#, C++ and visual scripting.</p>
      </div>
    </div>
  </div>

  <div class="flex eqsize responsive features-row">
    <div class="feature">
      <img src="{{ 'assets/home/features/team_friendly.svg' | theme }}" alt="" width="1" height="1">
      <div class="dark base-padding">
        <h4>Team-Friendly</h4>
        <p>From architecture and tools to VCS integration, Godot is designed for everyone in your team.</p>
      </div>
    </div>
    <div class="feature">
      <img src="{{ 'assets/home/features/oss.svg' | theme }}" alt="" width="1" height="1">
      <div class="dark base-padding">
        <h4>Open Source</h4>
        <p>Truly open development: anyone who contributes to Godot benefits equally from others’ contributions.</p>
      </div>
    </div>
  </div>
</section>

<section id="get_involved" class="container padded">
  <h2>Get involved</h2>
  <p>
    Join the community and help create a game engine that belongs to everybody.
  </p>

  <div class="flex eqsize responsive">

    <div class="text-center base-padding">
      <img src="{{ 'assets/home/code.svg' | theme }}" alt="" width="250" height="250">
      <h4>Code</h4>
      <p>
        If you know how to code, and enjoy fun and challenging problems, you can help by fixing bugs or creating cool new features.
      </p>
      <a href="https://docs.godotengine.org/en/stable/community/contributing/ways_to_contribute.html#contributing-code" class="btn flat" target="_blank" rel="noopener"> Learn more </a>
    </div>

    <div class="text-center base-padding">
      <img src="{{ 'assets/home/document.svg' | theme }}" alt="" width="250" height="250">
      <h4>Document</h4>
      <p>
        Documentation quality is essential in a game engine; help make it better by updating the API reference, writing new guides or submitting corrections.
      </p>
      <a href="https://docs.godotengine.org/en/stable/community/contributing/ways_to_contribute.html#contributing-to-the-documentation" class="btn flat" target="_blank" rel="noopener"> Learn more </a>
    </div>

    <div class="text-center base-padding">
      <img src="{{ 'assets/home/report.svg' | theme }}" alt="" width="250" height="250">
      <h4>Report</h4>
      <p>
        Found a problem with the engine? Don't forget to report it so that developers can track it down.
      </p>
      <a href="https://docs.godotengine.org/en/stable/community/contributing/ways_to_contribute.html#testing-and-reporting-issues" class="btn flat" target="_blank" rel="noopener"> Learn more </a>
    </div>

  </div>
</section>

<section id="donations" class="padded">
  <div class="container sm-full">
    <img id="sfc_graphic" src=" {{ 'assets/home/sfc.svg' | theme }} " alt="Software Freedom Conservancy" width="1" height="1" class="img-auto-size">
    <h3 class="text-center">Donate</h3>
    <p class="small auto-margin">
      You don't need to be an engine developer to help Godot. Consider donating to speed up development and make Godot Engine even more awesome!
    </p>

    <a href="/donate" class="btn flat">Learn more</a>
  </div>
</section>

<section id="sponsors">
  <div class="container sm-full padded">
    <h2 class="text-center">Sponsored by</h2>

    <div class="platinum flex">
      <a class="sponsor card base-padding" href="https://heroiclabs.com/" target="_blank" rel="noopener">
        <img src="{{ 'assets/home/sponsors/heroiclabs.png' | theme }}" alt="Heroic Labs">
      </a>
      <a class="sponsor card base-padding" href="https://www.gamblify.com/" target="_blank" rel="noopener">
        <img src="{{ 'assets/home/sponsors/gamblify.png' | theme }}" alt="Gamblify">
      </a>
    </div>
    <div class="gold flex">
      <a class="sponsor card" href="https://www.moonwards.com/" target="_blank" rel="noopener">
        <img src="{{ 'assets/home/sponsors/moonwards.png' | theme }}" alt="Moonwards">
      </a>
    </div>
  </div>
</section>

{% partial "footer" %}
</html>
