API tools faq
paste
Advertisement
Elxyie

[TH] Leia (with Header) profile

Elxyie
Mar 16th, 2019
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.30 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  CREDIT: vom | vomcodesstuff | vomwastaken
  4.  
  5.  INFO:
  6.    - Avatar can be any size, over 350px is your best bet. Make sure the subject is in the middle.
  7.    - Relationship avatars should all be square and the same height.
  8.    - Isn't actually designed for a ton of info but it won't break if there is...everything in the sidebar is going to space itself out evenly.
  9.  
  10. -->
  11. <div class="row"><div class="col-md-12">
  12.   <!----HEADER BG---->
  13.   <div class="card rounded-0" style="border:none;background-image:url('https://i.imgur.com/8Y16Ral.png'); background-attachment:fixed; height:380px;border-bottom:5px solid #fff;"><div class="card-block display-4" style="color:#fff;text-transform:uppercase;letter-spacing:8px;font-family:century gothic;font-size:64pt;text-align:center;margin-top:115px;"><!----------------------------------------------------
  14.  
  15. HEADER -- WILL NOT SHRINK ON MOBILE
  16.  
  17. ------------------------------------------------------>
  18. <!---end card---></div></div><!---end 12---></div></div>
  19. <div class="row no-gutters p-2"><div class="col-lg-4 p-2 row no-gutters">
  20. <!-- -----------------------------
  21.  
  22.  
  23.          BASIC INFO
  24.  
  25.  
  26. ------------------------------ -->
  27. <div class="col-12 text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">Basic Info</div>
  28.  
  29. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  30.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Name</span><span>[info]</span>
  31. </div>
  32.  
  33. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  34.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Age</span><span>[info]</span>
  35. </div>
  36.  
  37. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  38.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Height</span><span>[info]</span>
  39. </div>
  40.  
  41. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  42.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Species</span><span>[info]</span>
  43. </div>
  44.  
  45. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  46.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Gender</span><span>[info]</span>
  47. </div>
  48.  
  49. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  50.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Pronouns</span><span>[info]</span>
  51. </div>
  52.  
  53. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  54.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Orientation</span><span>[info]</span>
  55. </div>
  56.  
  57. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  58.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Relationship Status</span><span>[info]</span>
  59. </div>
  60.  
  61. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  62.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Job</span><span>[info]</span>
  63. </div>
  64.  
  65. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  66.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Theme</span><a href="">[song]</a>
  67. </div><div class="col-12"><hr></div>
  68. <!-- -----------------------------
  69.  
  70.  
  71.            PALETTE
  72.  
  73.  
  74. ------------------------------ -->
  75. <div class="col-12 text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">Color Palette</div>
  76.  
  77. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  78.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Skin</span><span>#000000</span>
  79. </div>
  80.  
  81. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  82.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Hair</span><span>#000000</span>
  83. </div>
  84.  
  85. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  86.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Eyes</span><span>#000000</span>
  87. </div>
  88.  
  89. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  90.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Shirt</span><span>#000000</span>
  91. </div>
  92.  
  93. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  94.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Pants</span><span>#000000</span>
  95. </div>
  96.  
  97.  
  98. <!-- add more above this line -->
  99. <div class="col-12"><hr></div>
  100. <!-- -----------------------------
  101.  
  102.  
  103.             STATS
  104.  
  105.  
  106. ------------------------------ -->
  107. <div class="col-12 text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">Stats</div>
  108.  
  109. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  110.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Intelligence</span>
  111.   <span>
  112.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  113.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  114.     <i class="fal fa-circle fa-fw"></i>
  115.     <i class="fal fa-circle fa-fw"></i>
  116.     <i class="fal fa-circle fa-fw"></i>
  117.   </span>
  118. </div>
  119.  
  120. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  121.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Creativity</span>
  122.   <span>
  123.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  124.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  125.     <i class="fal fa-circle fa-fw"></i>
  126.     <i class="fal fa-circle fa-fw"></i>
  127.     <i class="fal fa-circle fa-fw"></i>
  128.   </span>
  129. </div>
  130.  
  131. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  132.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Confidence</span>
  133.   <span>
  134.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  135.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  136.     <i class="fal fa-circle fa-fw"></i>
  137.     <i class="fal fa-circle fa-fw"></i>
  138.     <i class="fal fa-circle fa-fw"></i>
  139.   </span>
  140. </div>
  141.  
  142. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  143.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Humor</span>
  144.   <span>
  145.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  146.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  147.     <i class="fal fa-circle fa-fw"></i>
  148.     <i class="fal fa-circle fa-fw"></i>
  149.     <i class="fal fa-circle fa-fw"></i>
  150.   </span>
  151. </div>
  152.  
  153. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  154.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Empathy</span>
  155.   <span>
  156.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  157.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  158.     <i class="fal fa-circle fa-fw"></i>
  159.     <i class="fal fa-circle fa-fw"></i>
  160.     <i class="fal fa-circle fa-fw"></i>  
  161.   </span>
  162. </div>
  163.  
  164. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  165.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Charisma</span>
  166.   <span>
  167.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  168.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  169.     <i class="fal fa-circle fa-fw"></i>
  170.     <i class="fal fa-circle fa-fw"></i>
  171.     <i class="fal fa-circle fa-fw"></i>  
  172.   </span>
  173. </div>
  174. <!-- -----------------------------
  175.  
  176.  
  177.           MAIN BODY
  178.  
  179.  
  180. ------------------------------ -->
  181. </div><div class="col-lg-auto col-12 p-lg-2">
  182. <div class="card h-100 border-left-0 rounded-0 hidden-md-down"></div><hr class="hidden-lg-up"></div>
  183. <div class="col-lg row no-gutters">
  184. <!-- -----------------------------
  185.  
  186.  
  187.            SUMMARY
  188.  
  189.  
  190. ------------------------------ -->
  191. <div class="col-lg-8 p-2"><div class="text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">
  192.  
  193.   Summary
  194.  
  195. </div><div class="p-2 text-muted">
  196.  
  197.  
  198.   <p>Sed condimentum mauris non imperdiet lacinia. Donec venenatis risus eros, eget viverra lacus fringilla commodo. Praesent dapibus est vel risus tempor ultrices. Nullam vulputate congue libero at suscipit. Etiam nisl metus, tempor egestas metus eu, ultricies iaculis diam. Sed facilisis ac leo a auctor. Quisque aliquet nec ante eu vestibulum. Curabitur sapien dolor, volutpat eu sollicitudin nec, consequat a eros. </p>
  199.  
  200.  
  201. </div></div>
  202. <!-- -----------------------------
  203.  
  204.  
  205.         DESIGN NOTES
  206.  
  207.  
  208. ------------------------------ -->
  209. <div class="col-lg-4 p-2"><div class="text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">
  210.  
  211.   Design Notes
  212.  
  213. </div><div class="p-2 text-muted"><ul class="m-0">
  214.  
  215.  
  216.   <li>Consectetur dictum velit</li>
  217.   <li>Risus tempor</li>
  218.   <li>Vehicula odio</li>
  219.   <li>Tincidunt leo eget</li>
  220.  
  221.  
  222. </ul></div></div>
  223. <!-- -----------------------------
  224.  
  225.  
  226.           BACKGROUND
  227.  
  228.  
  229. ------------------------------ -->
  230. <div class="col-12 p-2"><div class="text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">
  231.  
  232.   Background
  233.  
  234. </div><div class="p-2 text-muted">
  235.  
  236.  
  237.   <p>Sed condimentum mauris non imperdiet lacinia. Donec venenatis risus eros, eget viverra lacus fringilla commodo. Praesent dapibus est vel risus tempor ultrices. Nullam vulputate congue libero at suscipit. Etiam nisl metus, tempor egestas metus eu, ultricies iaculis diam. Sed facilisis ac leo a auctor. Quisque aliquet nec ante eu vestibulum. Curabitur sapien dolor, volutpat eu sollicitudin nec, consequat a eros. </p>
  238.  
  239.   <p>Vivamus accumsan tristique arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent convallis justo orci, vitae facilisis massa semper sit amet. Nunc placerat accumsan orci, eget vehicula arcu accumsan ac. Suspendisse dignissim nisl nec imperdiet scelerisque. Morbi nec laoreet arcu. Cras condimentum lobortis ligula, sit amet gravida purus elementum ut.</p>
  240.  
  241.  
  242. </div></div>
  243. <!-- -----------------------------
  244.  
  245.  
  246.             LIKES
  247.  
  248.  
  249. ------------------------------ -->
  250. <div class="col-lg-6 p-2"><div class="text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">
  251.  
  252.   Likes
  253.  
  254. </div><div class="p-2 text-muted"><ul class="m-0">
  255.  
  256.  
  257.   <li>Consectetur dictum velit</li>
  258.   <li>Risus tempor</li>
  259.   <li>Vehicula odio</li>
  260.   <li>Tincidunt leo eget</li>
  261.  
  262.  
  263. </ul></div></div>
  264. <!-- -----------------------------
  265.  
  266.  
  267.            DISLIKES
  268.  
  269.  
  270. ------------------------------ -->
  271. <div class="col-lg-6 p-2"><div class="text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">
  272.  
  273.   Dislikes
  274.  
  275. </div><div class="p-2 text-muted"><ul class="m-0">
  276.  
  277.   <li>Consectetur dictum velit</li>
  278.   <li>Risus tempor</li>
  279.   <li>Vehicula odio</li>
  280.   <li>Tincidunt leo eget</li>
  281.  
  282. </ul></div></div>
  283. <!-- -----------------------------
  284.  
  285.  
  286.             TRIVIA
  287.  
  288.  
  289. ------------------------------ -->
  290. <div class="col-12 p-2"><div class="text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">
  291.  
  292.   Trivia
  293.  
  294. </div><div class="p-2 text-muted"><ul class="m-0">
  295.  
  296.  
  297.   <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  298.   <li>Maecenas condimentum ipsum ut risus tempor, eu pharetra mauris tristique.</li>
  299.   <li>Mauris tincidunt dui et libero tempus, eu vehicula odio sagittis.</li>
  300.   <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  301.  
  302.  
  303. </ul></div></div>
  304. <!-- -----------------------------
  305.  
  306.  
  307.         RELATIONSHIPS
  308.  
  309.  
  310. ------------------------------ -->
  311. <div class="col-12 p-2"><div class="text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">
  312.  
  313.   Relationships
  314.  
  315. </div><div class="row no-gutters">
  316.   <!-- character box -->
  317.             <div class="col-lg-3 col-md-4 col-sm-6 p-1 text-center">
  318.                 <div class="card p-3 border-0">
  319.                     <a data-toggle="collapse" href="#a1">
  320.                     <!-- avatar, using 200x200 works best -->  
  321.                     <img src="https://file.toyhou.se/characters/1989031?1522047642" class="rounded-circle img-thumbnail">
  322.            
  323.             <!-- character name -->
  324.                     <h1 class="font-weight-normal my-1">Character Name</h1>
  325.                     </a>
  326.  
  327.                     <div class="collapse multi-collapse" id="a1">
  328.                         <!-- basics -->
  329.                         <p class="text-muted">age . gender . adjective</p>
  330.  
  331.             <!-- small desc -->
  332.                         <div class="table-responsive d-flex mb-3" style="height:120px;">
  333.                           <p class="my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum eleifend nunc, rutrum iaculis velit sagittis a.
  334.                           <!-- to make new paragraphs, use below code and paste it over this comment - DO NOT USE MORE <p></p>'s!
  335.                          
  336.                           <br><br>
  337.                           paragraph
  338.                           <br><br>
  339.                           another paragraph
  340.                          
  341.                           -->
  342.                           </p>
  343.                         </div>
  344.                        
  345.                         <p>
  346.                           <!-- link to character's profile -->
  347.                           <a class="btn btn-outline-primary btn-block" href="#">Full Profile</a>
  348.                         </p>
  349.                     </div>
  350.                 </div>
  351.             </div>
  352.       <!-- end character box -->
  353.      
  354.       <!-- character box -->
  355.             <div class="col-lg-3 col-md-4 col-sm-6 p-1 text-center">
  356.                 <div class="card p-3 border-0">
  357.                     <a data-toggle="collapse" href="#a2">
  358.                       <!-- avatar, using 200x200 works best -->  
  359.                     <img src="https://file.toyhou.se/characters/1989031?1522047642" class="rounded-circle img-thumbnail">
  360.            
  361.             <!-- character name -->
  362.                     <h1 class="font-weight-normal my-1">Character Name</h1>
  363.                 </a>
  364.  
  365.                     <div class="collapse  multi-collapse" id="a2">
  366.                         <!-- basics -->
  367.                         <p class="text-muted">age . gender . adjective</p>
  368.  
  369.             <!-- small desc -->
  370.                         <div class="table-responsive d-flex mb-3" style="height:120px;">
  371.                           <p class="my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum eleifend nunc, rutrum iaculis velit sagittis a.
  372.                           <!-- to make new paragraphs, use below code and paste it over this comment - DO NOT USE MORE <p></p>'s!
  373.                          
  374.                           <br><br>
  375.                           paragraph
  376.                           <br><br>
  377.                           another paragraph
  378.                          
  379.                           -->
  380.                           </p>
  381.                         </div>
  382.                        
  383.                         <p>
  384.                           <!-- link to character's profile -->
  385.                           <a class="btn btn-outline-primary btn-block" href="#">Full Profile</a>
  386.                         </p>
  387.                     </div>
  388.                 </div>
  389.             </div>
  390.       <!-- end character box -->
  391.  
  392.       <!-- character box -->
  393.             <div class="col-lg-3 col-md-4 col-sm-6 p-1 text-center">
  394.                 <div class="card p-3 border-0">
  395.                     <a data-toggle="collapse" href="#a3">
  396.                       <!-- avatar, using 200x200 works best -->  
  397.                     <img src="https://file.toyhou.se/characters/1989031?1522047642" class="rounded-circle img-thumbnail">
  398.            
  399.             <!-- character name -->
  400.                     <h1 class="font-weight-normal my-1">Character Name</h1>
  401.                     </a>
  402.  
  403.                     <div class="collapse multi-collapse" id="a3">
  404.                         <!-- basics -->
  405.                         <p class="text-muted">age . gender . adjective</p>
  406.  
  407.             <!-- small desc -->
  408.                         <div class="table-responsive d-flex mb-3" style="height:120px;">
  409.                           <p class="my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum eleifend nunc, rutrum iaculis velit sagittis a.
  410.                           <!-- to make new paragraphs, use below code and paste it over this comment - DO NOT USE MORE <p></p>'s!
  411.                          
  412.                           <br><br>
  413.                           paragraph
  414.                           <br><br>
  415.                           another paragraph
  416.                          
  417.                           -->
  418.                           </p>
  419.                         </div>
  420.                        
  421.                         <p>
  422.                           <!-- link to character's profile -->
  423.                           <a class="btn btn-outline-primary btn-block" href="#">Full Profile</a>
  424.                         </p>
  425.                     </div>
  426.                 </div>
  427.             </div>
  428.       <!-- end character box -->
  429.  
  430.  
  431.             <!-- character box -->
  432.             <div class="col-lg-3 col-md-4 col-sm-6 p-1 text-center">
  433.                 <div class="card p-3 border-0">
  434.                     <a data-toggle="collapse" href="#a4">
  435.                     <!-- avatar, using 200x200 works best -->  
  436.                     <img src="https://file.toyhou.se/characters/1989031?1522047642" class="rounded-circle img-thumbnail">
  437.            
  438.             <!-- character name -->
  439.                     <h1 class="font-weight-normal my-1">Character Name</h1>
  440.                     </a>
  441.  
  442.                     <div class="collapse multi-collapse" id="a4">
  443.                         <!-- basics -->
  444.                         <p class="text-muted">age . gender . adjective</p>
  445.  
  446.             <!-- small desc -->
  447.                         <div class="table-responsive d-flex mb-3" style="height:120px;">
  448.                           <p class="my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum eleifend nunc, rutrum iaculis velit sagittis a.
  449.                           <!-- to make new paragraphs, use below code and paste it over this comment - DO NOT USE MORE <p></p>'s!
  450.                          
  451.                           <br><br>
  452.                           paragraph
  453.                           <br><br>
  454.                           another paragraph
  455.                          
  456.                           -->
  457.                           </p>
  458.                         </div>
  459.                        
  460.                         <p>
  461.                           <!-- link to character's profile -->
  462.                           <a class="btn btn-outline-primary btn-block" href="#">Full Profile</a>
  463.                         </p>
  464.                     </div>
  465.                 </div>
  466.             </div>
  467.       <!-- end character box -->
  468.  
  469.  
  470. </div></div></div></div>
  471. <!-- -----------------------------
  472.  
  473.     CREDIT | DO NOT REMOVE
  474.  
  475. ------------------------------ -->
  476. <div class="bg-faded p-2"><div class="text-right" style="font-size:12px">
  477.   <a href="https://toyhou.se/vomcodesstuff"><i class="fal fa-code fa-fw text-muted"></i></a>
  478. </div></div></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!