Game Jolt Ribbons!

Put 'em on your pages. Inspired by GitHub's glorious Ribbons. Open sourced so you can make modifications as needed.

The idea was to make a Ribbon that was more in line with the Game Jolt style. Using the Game Jolt color palette, and Open Sans (which is the default heading font we use), they look pretty snazzy. They should work on light and dark backgrounds.

Feel free to make modifications to them to fit your project's page.

Available snippets

Copy the HTML code and put it in your site, preferably right after the body tag.

Make sure to change the URL in the HTML snippets to point to your game pages!

There are currently two versions. One that says "Play on Game Jolt" and one that says "Follow on Game Jolt".

Play

The Play versions are probably good if you have a released game and you want them to play it on the site.

Play - Green - Left

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-green-left-1.png" alt="Play on Game Jolt"></a>

Play - Green - Right

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-green-right-1.png" alt="Play on Game Jolt"></a>

Play - Dark Green - Left

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-dark-green-left-1.png" alt="Play on Game Jolt"></a>

Play - Dark Green - Right

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-dark-green-right-1.png" alt="Play on Game Jolt"></a>

Play - Blue - Left

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-blue-left-1.png" alt="Play on Game Jolt"></a>

Play - Blue - Right

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-blue-right-1.png" alt="Play on Game Jolt"></a>

Play - Pink - Left

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-pink-left-1.png" alt="Play on Game Jolt"></a>

Play - Pink - Right

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-pink-right-1.png" alt="Play on Game Jolt"></a>

Play - Gray - Left

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-gray-left-1.png" alt="Play on Game Jolt"></a>

Play - Gray - Right

<a href="http://gamejolt.com/your_game_url" title="Play on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/play-gray-right-1.png" alt="Play on Game Jolt"></a>

Follow

The Follow versions may be better for games that are in active development or haven't released yet.

Follow - Green - Left

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-green-left-1.png" alt="Follow on Game Jolt"></a>

Follow - Green - Right

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-green-right-1.png" alt="Follow on Game Jolt"></a>

Follow - Dark Green - Left

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-dark-green-left-1.png" alt="Follow on Game Jolt"></a>

Follow - Dark Green - Right

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-dark-green-right-1.png" alt="Follow on Game Jolt"></a>

Follow - Blue - Left

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-blue-left-1.png" alt="Follow on Game Jolt"></a>

Follow - Blue - Right

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-blue-right-1.png" alt="Follow on Game Jolt"></a>

Follow - Pink - Left

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-pink-left-1.png" alt="Follow on Game Jolt"></a>

Follow - Pink - Right

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-pink-right-1.png" alt="Follow on Game Jolt"></a>

Follow - Gray - Left

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-gray-left-1.png" alt="Follow on Game Jolt"></a>

Follow - Gray - Right

<a href="http://gamejolt.com/your_game_url" title="Follow on Game Jolt"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s.gjcdn.net/img/ribbons/follow-gray-right-1.png" alt="Follow on Game Jolt"></a>