API tools faq
paste
Advertisement
tgCodes

trashguts's PMD: wonder toyhou.se profile template v2

tgCodes
Sep 29th, 2022 (edited)
11
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.56 KB | None | 0 0
raw download clone embed print report
  1. <div style="max-width:1000px;margin:auto;padding:20px;">
  2.     <!-- ------
  3.        header
  4.        -------- -->
  5.     <div class="row w-100 align-items-center my-2" style="border-bottom:2px solid #f6f6f6;">
  6.         <div class="col-lg-5">
  7.             <div class="p-2 display-3 text-uppercase border-0 d-inline"><i class="fa-regular fa-{{!venus, mars, etc!}} fa-xs"></i> {{!character name!}} <span class="font-italic" style="font-size:80%;">LV.{{!level!}}</span></div>
  8.         </div>
  9.         <div class="col-lg-3" style="text-align:center;">
  10.             <div class="p-2" style="border:none;display:inline-block;">
  11.                 <!--change the title="sldkfj" part to whatever variations your species might have! if it doesnt have any, you can leave it blank and no tooltip will appear.-->
  12.                 <span type="button" class="btn btn-primary p-2" data-toggle="tooltip" data-placement="top" title="{{!species 1 variations!}}">{{!species 1!}}</span>
  13.                 <span type="button" class="btn btn-primary p-2" data-toggle="tooltip" data-placement="top" title="{{!species 2 variations!}}">{{!species 2!}}</span>
  14.             </div>
  15.         </div>
  16.         <div class="col-lg-4" style="text-align:center;">
  17.             <!--change the background color to match your types! i just colorpicked from a screenshot of the bulbapedia type page for these two lol-->
  18.             <div class="card p-2 text-light" style="display:inline-block;min-width:100px;text-align:center;background-color:#{{!type 1 color!}};">{{!type 1!}}</div>
  19.             <div class="card p-2 text-light" style="display:inline-block;min-width:100px;text-align:center;background-color:#{{!type 2 color!}};">{{!type 2!}}</div>
  20.         </div>
  21.     </div>
  22.     <!-- ------
  23.        end header
  24.        -------- -->
  25.     <div class="row">
  26.         <!-- navigation (reccomend not touching this unless you really know what you're doing) -->
  27.         <div class="col-md-1 p-1" style="max-height:350px;border-right:2px solid #f6f6f6;">
  28.             <div class="nav flex-column nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical" style="height:100%;">
  29.                 <a class="nav-link active" id="v-pills-bio-tab" data-toggle="pill" href="#v-pills-bio" role="tab" aria-controls="v-pills-bio" aria-selected="true" style="border-radius:0px;"><i class="fal fa-book"></i></a>
  30.                 <a class="nav-link" id="v-pills-genetics-tab" data-toggle="pill" href="#v-pills-genetics" role="tab" aria-controls="v-pills-genetics" aria-selected="false" style="border-radius:0px;"><i class="fal fa-dna"></i></a>
  31.                 <a class="nav-link" id="v-pills-exp-tab" data-toggle="pill" href="#v-pills-exp" role="tab" aria-controls="v-pills-exp" aria-selected="false" style="border-radius:0px;"><i class="fal fa-leaf"></i></a>
  32.             </div>
  33.         </div>
  34.         <!--main chunk-->
  35.         <div class="col-md-7 p-0 tab-content" id="v-pills-tabContent" style="max-height:350px;border-right:2px solid #f6f6f6;">
  36.             <!-- bio -->
  37.             <div class="tab-pane fade show active p-2" id="v-pills-bio" role="tabpanel" aria-labelledby="v-pills-bio-tab" style="height:100%;overflow-y:scroll;overflow-x:hidden;">
  38.                 <!-- basic info -->
  39.                 <div class="row px-2">
  40.                     <div class="col-lg justify-content-around mx-2 p-2 bg-light rounded text-dark">
  41.                         <div class="text-uppercase font-weight-bold">pronouns</div>
  42.                         <div class="font-italic">{{!pronouns!}}</div>
  43.                     </div>
  44.                     <div class="col-lg justify-content-around mx-2 p-2 bg-light rounded text-dark">
  45.                         <div class="text-uppercase font-weight-bold text-dark">role</div>
  46.                         <div class="text-dark font-italic">{{!role!}}</div>
  47.                     </div>
  48.                     <div class="col-lg justify-content-around mx-2 p-2 bg-light rounded text-dark">
  49.                         <div class="text-uppercase font-weight-bold">nature</div>
  50.                         <div class="font-italic">{{!nature!}}</div>
  51.                     </div>
  52.                 </div>
  53.                 <div class="justify-content-between my-2 p-2 bg-light rounded text-dark">
  54.                     <div class="text-uppercase font-weight-bold">characteristic</div>
  55.                     <div class="font-italic">{{!characteristic!}}</div>
  56.                 </div>
  57.                 <!-- stats -->
  58.                 <div class="row">
  59.                     <div class="col-md">
  60.                         <div class="progress m-2">
  61.                             <!--change the "width: 50%" and the aria-valuenow="50" to your desired percentage for this bar to be filled!-->
  62.                             <div class="progress-bar" role="progressbar" style="width: {{!HP (out of 100)!}}%" aria-valuenow="{{!HP (out of 100)!}}" aria-valuemin="0" aria-valuemax="100">HP</div>
  63.                         </div>
  64.                         <div class="progress m-2">
  65.                             <div class="progress-bar" role="progressbar" style="width: {{!ATK (out of 100)!}}%" aria-valuenow="{{!ATK (out of 100)!}}" aria-valuemin="0" aria-valuemax="100">ATK</div>
  66.                         </div>
  67.                         <div class="progress m-2">
  68.                             <div class="progress-bar" role="progressbar" style="width: {{!DEF (out of 100)!}}%" aria-valuenow="{{!DEF (out of 100)!}}" aria-valuemin="0" aria-valuemax="100">DEF</div>
  69.                         </div>
  70.                     </div>
  71.                     <div class="col-md">
  72.                         <div class="progress m-2">
  73.                             <div class="progress-bar" role="progressbar" style="width: {{!SPEED (out of 100)!}}%" aria-valuenow="{{!SPEED (out of 100)!}}" aria-valuemin="0" aria-valuemax="100">SPD</div>
  74.                         </div>
  75.                         <div class="progress m-2">
  76.                             <div class="progress-bar" role="progressbar" style="width: {{!SPATK (out of 100)!}}%" aria-valuenow="{{!SPATK (out of 100)!}}" aria-valuemin="0" aria-valuemax="100">SPATK</div>
  77.                         </div>
  78.                         <div class="progress m-2">
  79.                             <div class="progress-bar" role="progressbar" style="width: {{!SPDEF (out of 100)!}}%" aria-valuenow="{{!SPDEF (out of 100)!}}" aria-valuemin="0" aria-valuemax="100">SPDEF</div>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.                 <!--moveset-->
  84.                 <div class="row px-2">
  85.                     <!--same deal as the typing from the top to change these: change background-color to another hex to change the typing color!-->
  86.                     <div class="pill col-md m-2 p-2 rounded text-light text-center" style="background-color:#{{!move 1 color!}};">
  87.                         {{!move 1 name!}}
  88.                     </div>
  89.                     <div class="pill col-md m-2 p-2 rounded text-light text-center" style="background-color:#{{!move 2 color!}};">
  90.                         {{!move 2 name!}}
  91.                     </div>
  92.                 </div>
  93.                 <div class="row px-2">
  94.                     <div class="pill col-md m-2 p-2 rounded text-light text-center" style="background-color:#{{!move 3 color!}};">
  95.                         {{!move 3 name!}}
  96.                     </div>
  97.                     <div class="pill col-md m-2 p-2 rounded text-light text-center" style="background-color:#{{!move 4 color!}}">
  98.                         {{!move 4 name!}}
  99.                     </div>
  100.                 </div>
  101.                 <!-- section header (copy paste this chunk to add more sections. you can replace "bio" with fontawesome icons too if you want) -->
  102.                 <div class="row justify-content-between my-2">
  103.                     <div class="col-4 d-inline align-middle">
  104.                         <hr>
  105.                     </div>
  106.                     <div class="col-4 d-inline">
  107.                         <div class="display-4 text-center border-0">bio</div>
  108.                     </div>
  109.                     <div class="col-4 d-inline align-middle">
  110.                         <hr>
  111.                     </div>
  112.                 </div>
  113.                 <div class="text-muted font-italic p-4" style="letter-spacing:4px;margin-top:-10px;">{{!tagline/quote!}}<i class="fal fa-star fa-rotate-180"></i></div>
  114.                 <!--section text-->
  115.                 <p>{{!bio!}}</p>
  116.                 <div class="bg-light rounded text-dark p-2 my-2">
  117.                     <div class="text-uppercase font-weight-bold p-2">items:</div>
  118.                     <ul class="fa-ul">
  119.                         <li><span class="fa-li"><i class="far fa-hand"></i></span>{{!held item!}}</li>
  120.                         <li><span class="fa-li"><i class="far fa-backpack"></i></span>{{!bag item 1!}}</li>
  121.                         <li><span class="fa-li"><i class="far fa-backpack"></i></span>{{!bag item 2!}}</li>
  122.                         <li><span class="fa-li"><i class="far fa-archive"></i></span>{{!item in storage!}}</li>
  123.                         <li><span class="fa-li"><i class="far fa-archive"></i></span>{{!item in storage!}}</li>
  124.                     </ul>
  125.                 </div>
  126.             </div>
  127.             <!--
  128.            genetics
  129.            -->
  130.             <div class="tab-pane fade px-3" id="v-pills-genetics" role="tabpanel" aria-labelledby="v-pills-genetics-tab" style="overflow-y:scroll;overflow-x:hidden;height:100%;">
  131.                 <!-- section header -->
  132.                 <div class="row justify-content-between my-2">
  133.                     <div class="col-4 d-inline align-middle">
  134.                         <hr>
  135.                     </div>
  136.                     <div class="col-4 d-inline">
  137.                         <div class="display-4 text-center border-0">genetics</div>
  138.                     </div>
  139.                     <div class="col-4 d-inline align-middle">
  140.                         <hr>
  141.                     </div>
  142.                 </div>
  143.                 <!--section text-->
  144.                 <div class="justify-content-around my-2 p-2 bg-light rounded text-dark">
  145.                     <div class="text-uppercase font-weight-bold">genotype</div>
  146.                     <div class="font-italic">{{!genotype!}}</div>
  147.                 </div>
  148.                 <div class="justify-content-around my-2 p-2 bg-light rounded text-dark">
  149.                     <div class="text-uppercase font-weight-bold">egg group</div>
  150.                     <div class="font-italic">{{!egg group!}}</div>
  151.                 </div>
  152.                 <!-- section header -->
  153.                 <div class="row justify-content-between my-2">
  154.                     <div class="col-4 d-inline align-middle">
  155.                         <hr>
  156.                     </div>
  157.                     <div class="col-4 d-inline">
  158.                         <div class="display-4 text-center border-0">relations</div>
  159.                     </div>
  160.                     <div class="col-4 d-inline align-middle">
  161.                         <hr>
  162.                     </div>
  163.                 </div>
  164.                 <!--ancestors-->
  165.                 <!--don't have any ancestors? feel free to comment out this whole section by adding the comment brackets around it, or just delete everything from here to the next comment!-->
  166.                 <div class="card my-2 p-1 text-center text-uppercase font-weight-bold border-left-0 border-top-0 border-right-0 rounded-0 w-25 mx-auto">
  167.                     ancestors
  168.                 </div>
  169.                 <div class="row px-2 text-center">
  170.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  171.                         <a href="{{!ancestor 1 link!}}">{{!ancestor 1 name!}}</a>
  172.                     </div>
  173.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  174.                         <a href="{{!ancestor 2 link!}}">{{!ancestor 2 name!}}</a>
  175.                     </div>
  176.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  177.                         <a href="{{!ancestor 3 link!}}">{{!ancestor 3 name!}}</a>
  178.                     </div>
  179.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  180.                         <a href="{{!ancestor 4 link!}}">{{!ancestor 4 name!}}</a>
  181.                     </div>
  182.                 </div>
  183.                 <!--parents-->
  184.                 <div class="card my-2 p-1 text-center text-uppercase font-weight-bold border-left-0 border-top-0 border-right-0 rounded-0 w-25 mx-auto">
  185.                     parents
  186.                 </div>
  187.                 <div class="row px-2 text-center">
  188.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  189.                         <a href="{{!parent 1 link!}}">{{!parent 1 name!}}</a>
  190.                     </div>
  191.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  192.                         <a href="{{!parent 2 link!}}">{{!parent 2 name!}}</a>
  193.                     </div>
  194.                 </div>
  195.                 <!--offspring-->
  196.                 <div class="card my-2 p-1 text-center text-uppercase font-weight-bold border-left-0 border-top-0 border-right-0 rounded-0 w-25 mx-auto">
  197.                     offspring
  198.                 </div>
  199.                 <div class="row px-2 text-center">
  200.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  201.                         <a href="{{!offspring 1 link!}}">{{!offspring 1 name!}}</a>
  202.                     </div>
  203.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  204.                         <a href="{{!offspring 2 link!}}">{{!offspring 2 name!}}</a>
  205.                     </div>
  206.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  207.                         <a href="{{!offspring 3 link!}}">{{!offspring 3 name!}}</a>
  208.                     </div>
  209.                     <div class="col-lg mx-2 p-2 bg-light rounded text-dark">
  210.                         <a href="{{!offspring 4 link!}}">{{!offspring 4 name!}}</a>
  211.                     </div>
  212.                 </div>
  213.             </div>
  214.             <!--
  215.            EXP tracker
  216.            -->
  217.             <div class="tab-pane fade px-3" id="v-pills-exp" role="tabpanel" aria-labelledby="v-pills-exp-tab" style="overflow-y:scroll;overflow-x:hidden;height:100%;">
  218.                 <!-- section header -->
  219.                 <div class="row justify-content-between my-2">
  220.                     <div class="col-4 d-inline align-middle">
  221.                         <hr>
  222.                     </div>
  223.                     <div class="col-4 d-inline">
  224.                         <div class="display-4 text-center border-0">xp log</div>
  225.                     </div>
  226.                     <div class="col-4 d-inline align-middle">
  227.                         <hr>
  228.                     </div>
  229.                 </div>
  230.                 <div class="justify-content-around my-2 p-2 bg-light rounded text-dark" style="font-size:120%;">
  231.                     <div class="text-uppercase font-weight-bold">TOTAL XP</div>
  232.                     <div class="font-italic">{{!total XP!}}</div>
  233.                 </div>
  234.                 <!--image-->
  235.                 <!--this section is kinda hard to get looking good in all themes... adding text-light or text-dark depending on your bg-(color) can help readability depending on the colors on certain themes-->
  236.                 <div class="row justify-content-around my-2 p-2 bg-light rounded text-light">
  237.                     <div class="col-md-3 bg-secondary m-1 p-2 rounded"><a href="{{!artwork 1 url!}}" class="text-light">{{!artwork 1 name!}}</a></div>
  238.                     <div class="col-md-2 bg-secondary m-1 p-2 rounded">+{{!artwork 1 XP!}} gained</div>
  239.                     <div class="col-md bg-secondary m-1 p-2 rounded">{{!artwork 1 category/bonuses!}}</div>
  240.                 </div>
  241.                 <!--image-->
  242.                 <div class="row justify-content-around my-2 p-2 bg-light rounded text-light">
  243.                     <div class="col-md-3 bg-secondary m-1 p-2 rounded"><a href="{{!artwork 2 url!}}" class="text-light">{{!artwork 2 name!}}</a></div>
  244.                     <div class="col-md-2 bg-secondary m-1 p-2 rounded">+{{!artwork 2 XP!}} gained</div>
  245.                     <div class="col-md bg-secondary m-1 p-2 rounded">{{!artwork 2 category/bonuses!}}</div>
  246.                 </div>
  247.                 <!--image-->
  248.                 <div class="row justify-content-around my-2 p-2 bg-light rounded text-light">
  249.                     <div class="col-md-3 bg-secondary m-1 p-2 rounded"><a href="{{!artwork 3 url!}}" class="text-light">{{!artwork 3 name!}}</a></div>
  250.                     <div class="col-md-2 bg-secondary m-1 p-2 rounded">+{{!artwork 3 XP!}} gained</div>
  251.                     <div class="col-md bg-secondary m-1 p-2 rounded">{{!artwork 3 category/bonuses!}}</div>
  252.                 </div>
  253.                 <!--image-->
  254.                 <div class="row justify-content-around my-2 p-2 bg-light rounded text-light">
  255.                     <div class="col-md-3 bg-secondary m-1 p-2 rounded"><a href="{{!artwork 4 url!}}" class="text-light">{{!artwork 4 name!}}</a></div>
  256.                     <div class="col-md-2 bg-secondary m-1 p-2 rounded">+{{!artwork 4 XP!}} gained</div>
  257.                     <div class="col-md bg-secondary m-1 p-2 rounded">{{!artwork 4 category/bonuses!}}</div>
  258.                 </div></div>
  259.         </div>
  260.         <!--image-->
  261.         <div class="col-md-4 p-2" style="height:350px;">
  262.             <!--change the background-image:url(URLHERE) to whatever image you'd like-- a picture of your poke, some aesthetic pic, whatever! you might have to mess around with the background-position and background-size a little bit for best results.
  263.            the imgur image below is intended to be for some kind of held item, or just a decoration image if you'd like! it'll just hang out in the corner there.-->
  264.             <div style="background-image:url({{!character image url!}});background-size:contain;background-repeat:no-repeat;background-position:center;height:100%;">
  265.                 <div style="position:absolute; right:20px; bottom:0px;"><img src="{{!decoration image url!}}" style="width:75px; height:75px;"></div>
  266.             </div>
  267.         </div>
  268.     </div><a class="btn text-muted p-1 mt-3" type="button" data-toggle="collapse" href="#credit" aria-expanded="false" aria-controls="credit">credit <i class="far fa-star fa-xs"></i></a>
  269.     <div class="collapse" id="credit">
  270.   <div class="card text-muted bg-light p-2 m-1" style="width:fit-content;">
  271.     <span>code by <a href="https://toyhou.se/18111450.pmd-w-character-template-v1-">trashguts</a> for use within the <a href="https://toyhou.se/~world/118729.pmd-wonder">pmd: wonder</a> group!</span>
  272.   </div>
  273. </div>
  274. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!