[F2U] DA RPG Card

subject404

Info

Created
4 years, 7 months ago
Creator
subject404
Favorites
88
rpg dragon age free ttrpg code template freebie html layout f2u

Profile

Quick Reference Card

Name
Name
Class/Level
Class / Level
Health
Health
Communication
00
Lorem Ipsum
Constitution
00
Lorem Ipsum
Cunning
00
Lorem Ipsum
Dexterity
00
Lorem Ipsum
Magic
00
Lorem Ipsum
Perception
00
Lorem Ipsum
Strength
00
Lorem Ipsum
Willpower
00
Lorem Ipsum
Weapon
Attack
Damage
Weapon
Roll
Damage
Weapon
Roll
Damage
Weapon
Roll
Damage
Powers Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Speed
Speed
Defense
Defense
Armor
Armor
Equipment Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!--
headers: #343A40
background: #F7F7F7
header text: #F8F9FA
boxes: #FFF
-->

<div class="container card col-12 col-md-10 col-lg-7 col-xl-4 px-0" style="background: #F7F7F7; color: #343A40; border: medium solid #343A40; border-radius: .5em; font-family: serif; font-variant: small-caps; letter-spacing: .15em; min-width: 245px;">

<div class="card-header display-4 pt-1 pb-2 text-center" style="background: #343A40; color: #f8f9fa;">

<p>Quick Reference Card<a href="https://toyhou.se/Subject404"><span class="pull-right pt-2" style="color: rgba(248,249,250, .6); font-size: 20px;"><i class="fas fa-code tooltipster" title="code by subject404"></i></span></a></p>

</div>

<div class="card-content" style="font-size: 18px; font-weight: bold;">

<div class="row p-2">

<div class="col-12 col-sm-9 col-lg-8 pr-sm-2 mb-2 mb-sm-0">

<div class="col-12">

<div class="row text-center" style="border: medium solid #343A40; border-radius: .5em;">

<div class="col-5 px-0" style="background: #343A40; color: #f8f9fa;">Name</div>

<div class="col-7 px-0" style="background: #fff; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Name</div>

</div>

<div class="row mt-2 text-center" style="border: medium solid #343A40; border-radius: .5em;">

<div class="col-7 col-sm-5 px-0" style="background: #343A40; color: #f8f9fa;">Class/Level</div>

<div class="col-5 col-sm-7 px-0" style="background: #fff; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Class / Level</div>

</div>

</div>

</div>

<div class="col-12 col-sm-3 col-lg-4 pl-sm-0">

<div class="col-12 px-0 text-center">

<div class="pt-1" style="background: #343A40; color: #f8f9fa; border: medium solid #343A40; border-radius: .5em .5em 0 0;">Health</div>

<div class="pt-1" style="background: #fff; border: medium solid #343A40; border-radius: 0 0 .5em .5em; letter-spacing: 0;">Health</div>

</div>

</div>

</div>

<div class="row mx-2 text-center" style="border: medium solid #343A40; border-radius: .5em .5em 0 0;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Communication</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row mx-2 text-center border-top-0" style="border: medium solid #343A40;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Constitution</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row mx-2 text-center border-top-0" style="border: medium solid #343A40;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Cunning</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row mx-2 text-center border-top-0" style="border: medium solid #343A40;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Dexterity</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row mx-2 text-center border-top-0" style="border: medium solid #343A40;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Magic</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row mx-2 text-center border-top-0" style="border: medium solid #343A40;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Perception</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row mx-2 text-center border-top-0" style="border: medium solid #343A40;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Strength</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row mx-2 text-center border-top-0" style="border: medium solid #343A40; border-radius: 0 0 .5em .5em;">

<div class="col-12 col-sm-5 col-md-4 pl-1 pr-0 text-left" style="background: #343A40; color: #f8f9fa;">Willpower</div>

<div class="col-2 col-sm-1 px-0" style="background: #fff; letter-spacing: 0; border-radius: .5em;">00</div>

<div class="col-10 col-sm-6 col-md-7 px-0 border-top-0 border-bottom-0 border-right-0" style="background: #fff; border: medium solid #343A40; border-radius: 0 .5em .5em 0; letter-spacing: 0;">Lorem Ipsum</div>

</div>

<div class="row p-2">

<div class="col-12 col-sm-9 pr-sm-2">

<div class="col-12">

<div class="row pt-1" style="background: #343A40; color: #f8f9fa; border: medium solid #343A40; border-radius: .5em .5em 0 0;">

<div class="col-12 col-sm-4 pl-2 pr-0 text-left">Weapon</div>

<div class="col-12 col-sm-4 px-0 text-center">Attack</div>

<div class="col-12 col-sm-4 pl-0 pr-2 text-right">Damage</div>

</div>

<div class="row border-bottom-0" style="background: #fff; border: medium solid #343A40; letter-spacing: 0;">

<div class="col-12 col-sm-5 pl-2 pr-0 text-left">Weapon</div>

<div class="col-12 col-sm-2 px-0 text-center">Roll</div>

<div class="col-12 col-sm-5 pl-0 pr-2 text-right">Damage</div>

</div>

<div class="row border-top-0 border-bottom-0" style="background: #fff; border: medium solid #343A40; letter-spacing: 0;">

<div class="col-12 col-sm-5 pl-2 pr-0 text-left">Weapon</div>

<div class="col-12 col-sm-2 px-0 text-center">Roll</div>

<div class="col-12 col-sm-5 pl-0 pr-2 text-right">Damage</div>

</div>

<div class="row border-top-0" style="background: #fff; border: medium solid #343A40;letter-spacing: 0; border-radius: 0 0 .5em .5em;">

<div class="col-12 col-sm-5 pl-2 pr-0 text-left">Weapon</div>

<div class="col-12 col-sm-2 px-0 text-center">Roll</div>

<div class="col-12 col-sm-5 pl-0 pr-2 text-right">Damage</div>

</div>

</div>

<div class="col-12 mt-2 mb-2 mb-sm-0 px-2 text-justify" style="background: #fff; border: medium solid #343A40; border-radius: .5em; line-height: 1.15em; height: 5.9em; overflow-y: auto;">

<div><span class="px-2" style="margin-left: -.5em; background: #343A40; color: #f8f9fa; border: medium solid #343A40;">Powers</span> <span style="letter-spacing: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>

</div>

</div>

<div class="col-12 col-sm-3 pl-sm-0">

<div class="col-12 px-0 text-center">

<div class="pt-1" style="background: #343A40; color: #f8f9fa; border: medium solid #343A40; border-radius: .5em .5em 0 0;">Speed</div>

<div class="pt-1" style="background: #fff; border: medium solid #343A40; border-radius: 0 0 .5em .5em; letter-spacing: 0;">Speed</div>

</div>

<div class="col-12 pt-2 px-0 text-center">

<div class="pt-1" style="background: #343A40; color: #f8f9fa; border: medium solid #343A40; border-radius: .5em .5em 0 0;">Defense</div>

<div class="pt-1" style="background: #fff; border: medium solid #343A40; border-radius: 0 0 .5em .5em; letter-spacing: 0;">Defense</div>

</div>

<div class="col-12 pt-2 px-0 text-center">

<div class="pt-1" style="background: #343A40; color: #f8f9fa; border: medium solid #343A40; border-radius: .5em .5em 0 0;">Armor</div>

<div class="pt-1" style="background: #fff; border: medium solid #343A40; border-radius: 0 0 .5em .5em; letter-spacing: 0;">Armor</div>

</div>

</div>

</div>

<div class="mx-2 mb-2 px-2 text-justify" style="background: #fff; border: medium solid #343A40; border-radius: .5em; line-height: 1.15em; height: 3.8em; overflow-y: auto;">

<div><span class="px-2" style="margin-left: -.5em; background: #343A40; color: #f8f9fa; border: medium solid #343A40;">Equipment</span> <span style="letter-spacing: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>

</div>

</div>

</div>

Recent Images

No images.

1687 Users Online 12:42 am © cyancrows 2017
About FAQ Rules TOS