API tools faq
paste
WyrmWrought

RotR Forum Template Banner HTML

WyrmWrought
Mar 4th, 2026 (edited)
69
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.93 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    ROTR Character Profile Template #1 - "Banner"
  3.    Full-width header with background image,
  4.    No credit required, customize and pick apart as wanted.
  5.  
  6.    -> Replace placeholder URLs with images (placehold.co) and proper links (link.link) and text
  7. -->
  8. <div class="ch-wrap">
  9.  
  10.     <!-- BANNER -->
  11.     <div class="ch-banner" style="background-image:url(https://placehold.co/960x220/1a2a1a/3a5a3a?text=960+x+220+banner);">
  12.         <div class="ch-banner-overlay"></div>
  13.         <div class="ch-banner-info">
  14.             <img class="ch-avatar" src="https://placehold.co/80x80/2a3a2a/8a9e6b?text=80" alt="">
  15.             <div class="ch-name-block">
  16.                 <div class="ch-name">CHARACTER NAME</div>
  17.                 <div class="ch-subtitle">Species - Gender - Age</div>
  18.             </div>
  19.         </div>
  20.     </div>
  21.  
  22.     <!-- TABS -->
  23.     <div class="nav ch-tabs" role="tablist">
  24.  
  25.         <a data-toggle="tab" class="active ch-tab" href="#ch-about" role="tab" style="flex:1; text-align:center; padding:10px 8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">About</a>
  26.  
  27.         <a data-toggle="tab" class="ch-tab" href="#ch-appearance" role="tab" style="flex:1; text-align:center; padding:10px 8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">Appearance</a>
  28.  
  29.         <a data-toggle="tab" class="ch-tab" href="#ch-history" role="tab" style="flex:1; text-align:center; padding:10px 8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">History</a>
  30.  
  31.         <a data-toggle="tab" class="ch-tab" href="#ch-relations" role="tab" style="flex:1; text-align:center; padding:10px 8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">Relations</a>
  32.  
  33.         <a data-toggle="tab" class="ch-tab" href="#ch-gallery" role="tab" style="flex:1; text-align:center; padding:10px 8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">Gallery</a>
  34.  
  35.         <a data-toggle="tab" class="ch-tab" href="#ch-ooc" role="tab" style="flex:1; text-align:center; padding:10px 8px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; background:none;">OOC</a>
  36.     </div>
  37.  
  38.     <!-- CONTENT -->
  39.     <div class="tab-content ch-content">
  40.  
  41.         <!-- ==== ABOUT ==== -->
  42.         <div class="tab-pane fade show active ch-pane" id="ch-about" role="tabpanel">
  43.             <div class="row no-gutters" style="margin-bottom:14px;">
  44.                 <div class="col-sm-6" style="padding-right:7px; margin-bottom:14px;">
  45.                     <div class="ch-card" style="height:100%; margin-bottom:0;">
  46.  
  47.                       <!-- ==== BASICS ==== -->
  48.                         <div class="ch-card-title">Basics <span class="ch-card-icon">ℹ</span></div>
  49.                         <hr class="ch-divider">
  50.  
  51.                         <div class="ch-stat"><span class="ch-stat-label">Name</span><span class="ch-stat-value">content</span></div>
  52.  
  53.                         <div class="ch-stat"><span class="ch-stat-label">Species</span><span class="ch-stat-value">content</span></div>
  54.  
  55.                         <div class="ch-stat"><span class="ch-stat-label">Age</span><span class="ch-stat-value">content</span></div>
  56.  
  57.                         <div class="ch-stat"><span class="ch-stat-label">Sex</span><span class="ch-stat-value">content</span></div>
  58.  
  59.                         <div class="ch-stat"><span class="ch-stat-label">Pack</span><span class="ch-stat-value">content</span></div>
  60.  
  61.                         <div class="ch-stat"><span class="ch-stat-label">Role</span><span class="ch-stat-value">content</span></div>
  62.  
  63.                         <div class="ch-stat"><span class="ch-stat-label">Mate</span><span class="ch-stat-value">content</span></div>
  64.  
  65.                         <div class="ch-stat"><span class="ch-stat-label">Theme</span><span class="ch-stat-value"><a href="https://link.link">content</a></span></div>
  66.  
  67.                     </div>
  68.                 </div>
  69.                 <div class="col-sm-6" style="padding-left:7px; margin-bottom:14px;">
  70.                     <div class="ch-card" style="height:100%; margin-bottom:0;">
  71.  
  72.                       <!-- ==== SUMMARY ==== -->
  73.                         <div class="ch-card-title">Summary <span class="ch-card-icon">📋</span></div>
  74.                         <hr class="ch-divider">
  75.                         <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  76.                         <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  77.                         <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  78.                         <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  79.                         <p class="ch-trait"><strong style="color:var(--ch-accent)">Trait.</strong> Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.             <!-- ==== PERSONALITY ==== -->
  84.             <div class="ch-card">
  85.                 <div class="ch-card-title">Personality</div>
  86.                 <hr class="ch-divider">
  87.  
  88.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.</p>
  89.  
  90.                 <p class="ch-text">Add as many paragraphs as needed. The tab content area scrolls vertically so long entries are fine.</p>
  91.             </div>
  92.         </div>
  93.  
  94.         <!-- ==== APPEARANCE ==== -->
  95.         <div class="tab-pane fade ch-pane" id="ch-appearance" role="tabpanel">
  96.             <div class="ch-card">
  97.  
  98.               <!-- ==== PALETTE 1 ==== -->
  99.                 <div class="ch-card-title">Palette <span class="ch-card-icon">🎨</span></div>
  100.                 <hr class="ch-divider">
  101.  
  102.                 <!-- v delete to remove palette -->
  103.                 <div class="row no-gutters ch-palette">
  104.                     <div class="col" style="background:#d4c4a0;"></div>
  105.                     <div class="col" style="background:#8a7a5a;"></div>
  106.                     <div class="col" style="background:#5a4a3a;"></div>
  107.                     <div class="col" style="background:#3a2a1a;"></div>
  108.                     <div class="col" style="background:#6b8a5a;"></div>
  109.                 </div>
  110.                 <!-- ^ delete to remove palette -->
  111.  
  112.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  113.             </div>
  114.  
  115.             <!-- ==== PALETTE 1 ==== -->
  116.             <div class="ch-card">
  117.                 <div class="ch-card-title">Palette 2</div>
  118.                 <hr class="ch-divider">
  119.  
  120.                 <!-- v delete to remove palette -->
  121.                 <div class="row no-gutters ch-palette">
  122.                     <div class="col" style="background:#d4c4a0;"></div>
  123.                     <div class="col" style="background:#8a7a5a;"></div>
  124.                     <div class="col" style="background:#5a4a3a;"></div>
  125.                     <div class="col" style="background:#3a2a1a;"></div>
  126.                     <div class="col" style="background:#6b8a5a;"></div>
  127.                 </div>
  128.                 <!-- ^ delete to remove palette -->
  129.  
  130.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  131.             </div>
  132.  
  133.             <!-- ==== SCARS ==== -->
  134.             <div class="ch-card">
  135.                 <div class="ch-card-title">Scars &amp; Markings</div>
  136.                 <hr class="ch-divider">
  137.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  138.             </div>
  139.             <div class="ch-card">
  140.  
  141.               <!-- ==== NOTES ==== -->
  142.                 <div class="ch-card-title">Design Notes</div>
  143.                 <hr class="ch-divider">
  144.                 <ul class="ch-notes">
  145.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  146.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  147.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  148.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  149.                 </ul>
  150.             </div>
  151.         </div>
  152.         <!-- ==== HISTORY ==== -->
  153.         <div class="tab-pane fade ch-pane" id="ch-history" role="tabpanel">
  154.             <div class="ch-card">
  155.  
  156.               <!-- ==== TLDR ==== -->
  157.                 <div class="ch-card-title">TLDR</div>
  158.                 <hr class="ch-divider">
  159.                 <ul class="ch-notes">
  160.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  161.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  162.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  163.                     <li>Lorem ipsum dolor sit amet consectetur adipiscing elit.</li>
  164.                 </ul>
  165.             </div>
  166.  
  167.             <!-- ==== 1 ==== -->
  168.             <div class="ch-card">
  169.                 <div class="ch-card-title">Event</div>
  170.                 <hr class="ch-divider">
  171.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  172.             </div>
  173.  
  174.             <!-- ==== 2 ==== -->
  175.             <div class="ch-card">
  176.                 <div class="ch-card-title">Event</div>
  177.                 <hr class="ch-divider">
  178.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  179.             </div>
  180.  
  181.             <!-- ==== 3 ==== -->
  182.             <div class="ch-card">
  183.                 <div class="ch-card-title">Event</div>
  184.                 <hr class="ch-divider">
  185.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  186.             </div>
  187.  
  188.             <!-- ==== 4 ==== -->
  189.             <div class="ch-card">
  190.                 <div class="ch-card-title">Event</div>
  191.                 <hr class="ch-divider">
  192.                 <p class="ch-text">Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
  193.             </div>
  194.         </div>
  195.  
  196.         <!-- ==== RELATIONS ==== -->
  197.         <div class="tab-pane fade ch-pane" id="ch-relations" role="tabpanel">
  198.  
  199.             <!-- relationship 1 -->
  200.             <div class="ch-card">
  201.                 <div class="ch-rel-header">
  202.  
  203.                   <div><strong>Name</strong>
  204.                   <a href="https://Link.Link">Link</a>
  205.                   <em style="color: var(--ch-accent)">-</em>
  206.                   <a href="https://Link.Link">Link</a></div>
  207.  
  208.                   <span class="ch-rel-type">Relationship - Elaborate</span></div>
  209.                 <hr class="ch-divider">
  210.                 <div class="row no-gutters">
  211.                     <div class="col-3 col-md-2 text-center"><img class="ch-rel-avatar" src="https://placehold.co/80x80/2a3a2a/5a7d7e?text=80" alt=""></div>
  212.                     <div class="col-9 col-md-10"><span class="ch-rel-desc">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.</span></div>
  213.                 </div>
  214.             </div>
  215.  
  216.             <!-- relationship 2 -->
  217.             <div class="ch-card">
  218.  
  219.                 <div class="ch-rel-header"><div><strong>Name</strong>
  220.  
  221.                   <a href="https://Link.Link">Link</a>
  222.                   <em style="color: var(--ch-accent)">-</em>
  223.                   <a href="https://Link.Link">Link</a></div>
  224.  
  225.                   <span class="ch-rel-type">Relationship - Elaborate</span></div>
  226.                 <hr class="ch-divider">
  227.                 <div class="row no-gutters">
  228.                     <div class="col-3 col-md-2 text-center"><img class="ch-rel-avatar" src="https://placehold.co/80x80/2a3a2a/5a7d7e?text=80" alt=""></div>
  229.                     <div class="col-9 col-md-10"><span class="ch-rel-desc">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.</span></div>
  230.                 </div>
  231.             </div>
  232.  
  233.             <!-- relationship 3 -->
  234.             <div class="ch-card">
  235.                 <div class="ch-rel-header"><strong>Name</strong><span class="ch-rel-type">Relationship - Elaborate</span></div>
  236.                 <hr class="ch-divider">
  237.                 <div class="row no-gutters">
  238.                     <div class="col-3 col-md-2 text-center"><img class="ch-rel-avatar" src="https://placehold.co/80x80/2a3a2a/5a7d7e?text=80" alt=""></div>
  239.                     <div class="col-9 col-md-10"><span class="ch-rel-desc">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.</span></div>
  240.                 </div>
  241.             </div>
  242.  
  243.             <!-- relationship 4 -->
  244.             <div class="ch-card">
  245.                 <div class="ch-rel-header"><strong>Name</strong><span class="ch-rel-type">Relationship - Elaborate</span></div>
  246.                 <hr class="ch-divider">
  247.                 <div class="row no-gutters">
  248.                     <div class="col-3 col-md-2 text-center"><img class="ch-rel-avatar" src="https://placehold.co/80x80/2a3a2a/5a7d7e?text=80" alt=""></div>
  249.                     <div class="col-9 col-md-10"><span class="ch-rel-desc">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.</span></div>
  250.                 </div>
  251.             </div>
  252.             </div>
  253.  
  254.         <!-- ==== GALLERY ==== -->
  255.         <!-- ==== All image sizes fit ==== -->
  256.  
  257.         <div class="tab-pane fade ch-pane" id="ch-gallery" role="tabpanel">
  258.             <div class="row">
  259.  
  260.               <!-- ==== start gallery item ==== -->
  261.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/300x200/2a3a2a/5a7d7e?text=Art+1" alt=""><br><span class="ch-gallery-credit">
  262.  
  263.                   Art by <a href="https://Link.Link">Artist</a>
  264.  
  265.                 </span></div>
  266.                 <!-- ==== end gallery item ==== -->
  267.  
  268.                 <!-- ==== start gallery item ==== -->
  269.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/300x400/2a3a2a/5a7d7e?text=Art+2" alt=""><br><span class="ch-gallery-credit">
  270.  
  271.                   Art by <a href="https://Link.Link">Artist</a>
  272.  
  273.                   </span></div>
  274.                 <!-- ==== end gallery item ==== -->
  275.  
  276.                 <!-- ==== start gallery item ==== -->
  277.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/200x200/2a3a2a/5a7d7e?text=Art+3" alt=""><br><span class="ch-gallery-credit">
  278.  
  279.                   Art by <a href="https://Link.Link">Artist</a>
  280.  
  281.                   </span></div>
  282.                 <!-- ==== end gallery item ==== -->
  283.  
  284.                 <!-- ==== start gallery item ==== -->
  285.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/400x250/2a3a2a/5a7d7e?text=Art+4" alt=""><br><span class="ch-gallery-credit">
  286.  
  287.                   Art by <a href="https://Link.Link">Artist</a>
  288.  
  289.                 </span></div>
  290.                 <!-- ==== end gallery item ==== -->
  291.  
  292.                 <!-- ==== start gallery item ==== -->
  293.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/250x350/2a3a2a/5a7d7e?text=Art+5" alt=""><br><span class="ch-gallery-credit">
  294.  
  295.                   Art by <a href="https://Link.Link">Artist</a>
  296.  
  297.                   </span></div>
  298.                 <!-- ==== end gallery item ==== -->
  299.  
  300.                 <!-- ==== start gallery item ==== -->
  301.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/300x300/2a3a2a/5a7d7e?text=Art+6" alt=""><br><span class="ch-gallery-credit">
  302.  
  303.                   Art by <a href="https://Link.Link">Artist</a>
  304.  
  305.                   </span></div>
  306.                 <!-- ==== end gallery item ==== -->
  307.  
  308.                 <!-- ==== start gallery item ==== -->
  309.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/350x200/2a3a2a/5a7d7e?text=Art+7" alt=""><br><span class="ch-gallery-credit">
  310.  
  311.                   Art by <a href="https://Link.Link">Artist</a>
  312.  
  313.                 </span></div>
  314.                 <!-- ==== end gallery item ==== -->
  315.  
  316.                 <!-- ==== start gallery item ==== -->
  317.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/200x300/2a3a2a/5a7d7e?text=Art+8" alt=""><br><span class="ch-gallery-credit">
  318.  
  319.                   Art by <a href="https://Link.Link">Artist</a>
  320.  
  321.                   </span></div>
  322.                 <!-- ==== end gallery item ==== -->
  323.  
  324.                 <!-- ==== start gallery item ==== -->
  325.                 <div class="col-6 col-sm-4 text-center mb-3"><img class="ch-gallery-img" src="https://placehold.co/300x200/2a3a2a/5a7d7e?text=Art+9" alt=""><br><span class="ch-gallery-credit">
  326.  
  327.                   Art by <a href="https://Link.Link">Artist</a>
  328.  
  329.                   </span></div>
  330.                 <!-- ==== end gallery item ==== -->
  331.  
  332.             </div>
  333.         </div>
  334.         <!-- ==== OOC ==== -->
  335.  
  336.         <div class="tab-pane fade ch-pane" id="ch-ooc" role="tabpanel">
  337.  
  338.           <!-- Player Info -->
  339.             <div class="ch-card">
  340.                 <div class="ch-card-title">Player Info</div>
  341.                 <hr class="ch-divider">
  342.                 <span style="font-size:12px;">Played by <strong>Username</strong> - Contact via PM - Timezone</span>
  343.             </div>
  344.  
  345.             <!-- RP preferences -->
  346.             <div class="ch-card">
  347.                 <div class="ch-card-title">RP Preferences</div>
  348.                 <hr class="ch-divider">
  349.                 <p class="ch-text">Any notes about your roleplay style, post length, triggers, availability. Delete sections you don't need.</p>
  350.             </div>
  351.  
  352.             <!-- plot ideas -->
  353.             <div class="ch-card">
  354.                 <div class="ch-card-title">Hooks &amp; Plot Ideas</div>
  355.                 <hr class="ch-divider">
  356.                 <ul class="ch-notes">
  357.                     <li>(template example) Open to patrol encounters along the eastern ridge</li>
  358.                     <li>(template example) Looking for someone who knew x before the flood</li>
  359.                     <li>(template example) Would love a slow-burn rivalry that turns to respect</li>
  360.                 </ul>
  361.             </div>
  362.  
  363.             <!-- Credits
  364.             No need to credit for template
  365.             -->
  366.             <div class="ch-card">
  367.                 <div class="ch-card-title">Credits</div>
  368.                 <hr class="ch-divider">
  369.                 <span style="font-size:12px;">Character design by You - Art credits in Gallery tab</span>
  370.             </div>
  371.         </div>
  372.     </div>
  373.  
  374. </div>
Tags: html
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!