Argumentum card Design Html integration

Argumentum is a card game about argumentation. It contains 2 decks of cards for fallacies and

argumentation scenarios plus additional cards for the rules and a memo for the fallacies

taxonomy.

This is a follow up to the following contest that allowed creating new designs for all of the game's cards:

https://www.freelancer.com/contest/Argumentum-Card-Design-Required-1770885

The contest winner is handing over a set of card layouts assets, according to our specifications.

Now those layouts need to be integrated within our customized Html based generation engine. (Details are provided below).

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Besides the initial tarot+poker size formats for print, we plan to have various web-based usage of the cards

with various formats (typically square or horizontal ratio for mobile/desktop), so integrated templates should use flexbox and percentage/rem/em sizes to allow for such versatility.

If amendments need to be made to the provided layout assets to achieve that flexibility, they should be accounted in your proposal, and other suggestions to improve the layout are also welcome and to be accounted for.

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The cards generation engine is available at the following url:

[login to view URL]

That engine generate cards based on json congiguration files, that combine csv data to be injected, a css file, and an html template leveraging handlebars token to inject csv rows for each cards.

Previously to the contest, example Html/css templates were integrated to generate the cards faces for the 2 decks and rules.

Their design and css quality is substandard, but they provide guidance for the expected cards content and

integration principles. The fallacy cards more specifically, demonstrate using percentage based dimensions to changing ratio relatively easy with a font-size update.

In order to visualize the examples, load the generation engine from the url above, click "load" on the upper

right, and choose one of the following files:

Fallacies - French:

[login to view URL]

Fallacies - English:

[login to view URL]

Scenarii - French:

[login to view URL]

Scenarii - English:

[login to view URL]

Rules - French:

[login to view URL]

Rules - English:

[login to view URL]

Additionally, example non integrated images are provided for the cards back but those are now moot since the contest yielded better results.

Fallacies/Rules back:

[login to view URL]

Scenarii back:

[login to view URL]

Memo face:

[login to view URL]

Memo back:

[login to view URL]

MEMO cards will have a dependency with the employer to show up on the code pen.

Rules card integration should be able to proceed.

平面设计 CSS HTML5 HTML

项目ID： #25829468

关于项目