index.html

---
layout: default
---

<div class="hero">
  <div class="wrapper">
    <div class="logo">
      <img src="./assets/media/pixelbuddy_logo.svg" alt="Pixelbuddy Logo"/>
    </div>
    <h2 class="order-2 regular">A Figma based pixel character builder.</h2>
    <a href="https://www.figma.com/file/FL9vQKJFP0y5aJVQGuMUVM/Pixelbuddy/duplicate" target="_blank">
      <div class="btn copy-small">Open template in Figma</div>
    </a>
  </div>
</div>

<div class="media-player">
  <video autoplay muted loop playsinline>
    <source src="./assets/media/pixelbuddy-demo-video.mov" type="video/mp4" alt="pixelbuddy demo video">
  </video>
</div>

<div class="benefits">
  <div class="wrapper">
    <ul>
      <li>
        <h3 class="order3">110.000+ combinations</h3>
        <p>Choose your face, clothing, hair and combine it to your unique version</p>
      </li>
      <li>
        <h3 class="order3">Drag, Drop, Done</h3>
        <p>Just drag from Figma assets on the Artboard and you're done!</p>
      </li>
      <li>
        <h3 class="order3">Vectors > Pixel</h3>
        <p><span class="strikethrough">Pixel</span>Vectorbuddy is based on Vectors which makes scaling a breeze</p>
      </li>
    </ul>
  </div>

</div>

<div class="features">

  <div class="fifty-fifty">
    <div class="content">
      <div class="text">
        <h2 class="order-1">Choose out of 60+ outfit combinations. </h2>
        <p class="order-1">Easily switch your Buddy's look with the component selector.</p>
      </div>
    </div>
    <div class="media">
      <img src="assets/media/pxlbdy_feat_combinations.svg" alt="Feature Combinations" />
    </div>
  </div>

  <div class="fifty-fifty flipped">
    <div class="content">
      <div class="text">
        <h2 class="order-1">So much expression with so less pixel. </h2>
        <p class="order-1">Choose the face and hairstyles to match your style.</p>
      </div>
    </div>
    <div class="media">
      <img src="assets/media/pxlbdy_feat_faces.svg" alt="Feature Faces and Hair" />
    </div>
  </div>

  <div class="fifty-fifty">
    <div class="content">
      <div class="text">
        <h2 class="order-1">Pixelbuddy is running on Figma. </h2>
        <p class="order-1">With the power of Figma, the whole pixelate world is open to your creations.</p>
      </div>
      <!-- <div class="btn sp-bot-m">Learn how to customize</div> -->
      <a href="/guides/customization.html" class="link-arrow copy sp-bot-s">Learn how to customize</a>
      <p class="copy-small">
        Not familiar with Figma? <br />
        Check out the <a href="/guides/">guides</a> or visit <a href="https://figma.com">Figma</a>.
      </p>
    </div>

    <div class="media">
      <img src="assets/media/pxlbdy_feat_figma.svg" alt="Feature: Running on Figma" />
    </div>
  </div>

</div>

<div class="teaser inverted">
  <div class="wrapper">

    <h2 class="order-1">
      Help to make Pixelbuddy better
    </h2>
    <p class="copy">
      Pixelbuddy is open source and released under the MIT license. 
    </p>
    <p class="copy">
      Feel free to duplicate, iterate or just make your own version of a pixel character builder.
    </p>
    <p class="copy">
      If you want to contribute and help to make Pixelbuddy better and better, hop over to github and <a href="https://github.com/markusoelhafen/pixelbuddy/issues/new?assignees=&labels=&template=component-request.md&title=">create an issue</a>.
    </p>

  </div>
</div>