API tools faq
paste
Advertisement
Elxyie

[TH] Leia profile

Elxyie
Mar 16th, 2019
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.82 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="container-fluid p-0" style="font-size:13px;"><div class="row no-gutters" style="min-height:40vh;background:#e6b2ad;">
  12. <!-- -----------------------------
  13.  
  14.  
  15.             AVATAR
  16.  
  17.  
  18. ------------------------------ -->
  19. <div class="col-lg-4 p-3 d-flex"><div class="rounded-circle m-auto" style="min-height:250px;min-width:250px;
  20.  
  21.  
  22.  background: url(https://file.toyhou.se/characters/1989031?1522047642) center;background-size:cover;">
  23.  
  24.  
  25. <div style="height:350px;width:350px;"></div></div></div>
  26. <div class="col-lg-8 p-3 pr-xl-5 my-auto">
  27. <!-- -----------------------------
  28.  
  29.  
  30.             NAME
  31.  
  32.  
  33. ------------------------------ -->
  34. <div class="display-1 text-uppercase text-lg-left text-center" style="font-size:30px;font-family:'courier new';letter-spacing:3px;font-weight:300;">
  35.  
  36.  
  37.   Leia
  38.  
  39.  
  40. </div><hr class="mt-3 mb-1">
  41. <!-- -----------------------------
  42.  
  43.  
  44.            DECRIPS
  45.  
  46.  
  47. ------------------------------ -->
  48. <div class="text-lg-right text-center text-muted" style="font-size:20px;font-weight:300;letter-spacing:2px;">
  49.  
  50.  
  51.   tortor
  52.   •
  53.   facilisis
  54.   •
  55.   gravida
  56.  
  57.  
  58. </div></div></div><div class="row no-gutters p-2"><div class="col-lg-4 p-2 row no-gutters">
  59. <!-- -----------------------------
  60.  
  61.  
  62.          BASIC INFO
  63.  
  64.  
  65. ------------------------------ -->
  66. <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>
  67.  
  68. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  69.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Name</span><span>[info]</span>
  70. </div>
  71.  
  72. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  73.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Age</span><span>[info]</span>
  74. </div>
  75.  
  76. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  77.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Height</span><span>[info]</span>
  78. </div>
  79.  
  80. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  81.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Species</span><span>[info]</span>
  82. </div>
  83.  
  84. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  85.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Gender</span><span>[info]</span>
  86. </div>
  87.  
  88. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  89.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Pronouns</span><span>[info]</span>
  90. </div>
  91.  
  92. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  93.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Orientation</span><span>[info]</span>
  94. </div>
  95.  
  96. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  97.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Relationship Status</span><span>[info]</span>
  98. </div>
  99.  
  100. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  101.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Job</span><span>[info]</span>
  102. </div>
  103.  
  104. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  105.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Theme</span><a href="">[song]</a>
  106. </div><div class="col-12"><hr></div>
  107. <!-- -----------------------------
  108.  
  109.  
  110.            PALETTE
  111.  
  112.  
  113. ------------------------------ -->
  114. <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>
  115.  
  116. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  117.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Skin</span><span>#000000</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;">Hair</span><span>#000000</span>
  122. </div>
  123.  
  124. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  125.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Eyes</span><span>#000000</span>
  126. </div>
  127.  
  128. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  129.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Shirt</span><span>#000000</span>
  130. </div>
  131.  
  132. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  133.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Pants</span><span>#000000</span>
  134. </div>
  135.  
  136.  
  137. <!-- add more above this line -->
  138. <div class="col-12"><hr></div>
  139. <!-- -----------------------------
  140.  
  141.  
  142.             STATS
  143.  
  144.  
  145. ------------------------------ -->
  146. <div class="col-12 text-uppercase" style="font-size:25px;font-family:'courier new';letter-spacing:1px;font-weight:300;background:#ffbeae;">Stats</div>
  147.  
  148. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  149.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Intelligence</span>
  150.   <span>
  151.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  152.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  153.     <i class="fal fa-circle fa-fw"></i>
  154.     <i class="fal fa-circle fa-fw"></i>
  155.     <i class="fal fa-circle fa-fw"></i>
  156.   </span>
  157. </div>
  158.  
  159. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  160.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Creativity</span>
  161.   <span>
  162.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  163.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  164.     <i class="fal fa-circle fa-fw"></i>
  165.     <i class="fal fa-circle fa-fw"></i>
  166.     <i class="fal fa-circle fa-fw"></i>
  167.   </span>
  168. </div>
  169.  
  170. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  171.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Confidence</span>
  172.   <span>
  173.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  174.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  175.     <i class="fal fa-circle fa-fw"></i>
  176.     <i class="fal fa-circle fa-fw"></i>
  177.     <i class="fal fa-circle fa-fw"></i>
  178.   </span>
  179. </div>
  180.  
  181. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  182.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Humor</span>
  183.   <span>
  184.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  185.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  186.     <i class="fal fa-circle fa-fw"></i>
  187.     <i class="fal fa-circle fa-fw"></i>
  188.     <i class="fal fa-circle fa-fw"></i>
  189.   </span>
  190. </div>
  191.  
  192. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  193.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Empathy</span>
  194.   <span>
  195.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  196.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  197.     <i class="fal fa-circle fa-fw"></i>
  198.     <i class="fal fa-circle fa-fw"></i>
  199.     <i class="fal fa-circle fa-fw"></i>  
  200.   </span>
  201. </div>
  202.  
  203. <div class="col-lg-12 col-sm-6 p-2 d-flex justify-content-between">
  204.   <span class="text-muted text-uppercase" style="letter-spacing:1px;">Charisma</span>
  205.   <span>
  206.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  207.     <i class="fas fa-circle fa-fw" style="color:#ffbeae;"></i>
  208.     <i class="fal fa-circle fa-fw"></i>
  209.     <i class="fal fa-circle fa-fw"></i>
  210.     <i class="fal fa-circle fa-fw"></i>  
  211.   </span>
  212. </div>
  213. <!-- -----------------------------
  214.  
  215.  
  216.           MAIN BODY
  217.  
  218.  
  219. ------------------------------ -->
  220. </div><div class="col-lg-auto col-12 p-lg-2">
  221. <div class="card h-100 border-left-0 rounded-0 hidden-md-down"></div><hr class="hidden-lg-up"></div>
  222. <div class="col-lg row no-gutters">
  223. <!-- -----------------------------
  224.  
  225.  
  226.            SUMMARY
  227.  
  228.  
  229. ------------------------------ -->
  230. <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;">
  231.  
  232.   Summary
  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.  
  240. </div></div>
  241. <!-- -----------------------------
  242.  
  243.  
  244.         DESIGN NOTES
  245.  
  246.  
  247. ------------------------------ -->
  248. <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;">
  249.  
  250.   Design Notes
  251.  
  252. </div><div class="p-2 text-muted"><ul class="m-0">
  253.  
  254.  
  255.   <li>Consectetur dictum velit</li>
  256.   <li>Risus tempor</li>
  257.   <li>Vehicula odio</li>
  258.   <li>Tincidunt leo eget</li>
  259.  
  260.  
  261. </ul></div></div>
  262. <!-- -----------------------------
  263.  
  264.  
  265.           BACKGROUND
  266.  
  267.  
  268. ------------------------------ -->
  269. <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;">
  270.  
  271.   Background
  272.  
  273. </div><div class="p-2 text-muted">
  274.  
  275.  
  276.   <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>
  277.  
  278.   <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>
  279.  
  280.  
  281. </div></div>
  282. <!-- -----------------------------
  283.  
  284.  
  285.             LIKES
  286.  
  287.  
  288. ------------------------------ -->
  289. <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;">
  290.  
  291.   Likes
  292.  
  293. </div><div class="p-2 text-muted"><ul class="m-0">
  294.  
  295.  
  296.   <li>Consectetur dictum velit</li>
  297.   <li>Risus tempor</li>
  298.   <li>Vehicula odio</li>
  299.   <li>Tincidunt leo eget</li>
  300.  
  301.  
  302. </ul></div></div>
  303. <!-- -----------------------------
  304.  
  305.  
  306.            DISLIKES
  307.  
  308.  
  309. ------------------------------ -->
  310. <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;">
  311.  
  312.   Dislikes
  313.  
  314. </div><div class="p-2 text-muted"><ul class="m-0">
  315.  
  316.   <li>Consectetur dictum velit</li>
  317.   <li>Risus tempor</li>
  318.   <li>Vehicula odio</li>
  319.   <li>Tincidunt leo eget</li>
  320.  
  321. </ul></div></div>
  322. <!-- -----------------------------
  323.  
  324.  
  325.             TRIVIA
  326.  
  327.  
  328. ------------------------------ -->
  329. <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;">
  330.  
  331.   Trivia
  332.  
  333. </div><div class="p-2 text-muted"><ul class="m-0">
  334.  
  335.  
  336.   <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  337.   <li>Maecenas condimentum ipsum ut risus tempor, eu pharetra mauris tristique.</li>
  338.   <li>Mauris tincidunt dui et libero tempus, eu vehicula odio sagittis.</li>
  339.   <li>Morbi tincidunt leo eget ipsum semper, consectetur dictum velit tempor.</li>
  340.  
  341.  
  342. </ul></div></div>
  343. <!-- -----------------------------
  344.  
  345.  
  346.         RELATIONSHIPS
  347.  
  348.  
  349. ------------------------------ -->
  350. <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;">
  351.  
  352.   Relationships
  353.  
  354. </div><div class="row no-gutters">
  355.   <!-- character box -->
  356.             <div class="col-lg-3 col-md-4 col-sm-6 p-1 text-center">
  357.                 <div class="card p-3 border-0">
  358.                     <a data-toggle="collapse" href="#a1">
  359.                     <!-- avatar, using 200x200 works best -->  
  360.                     <img src="https://file.toyhou.se/characters/1989031?1522047642" class="rounded-circle img-thumbnail">
  361.            
  362.             <!-- character name -->
  363.                     <h1 class="font-weight-normal my-1">Character Name</h1>
  364.                     </a>
  365.  
  366.                     <div class="collapse multi-collapse" id="a1">
  367.                         <!-- basics -->
  368.                         <p class="text-muted">age . gender . adjective</p>
  369.  
  370.             <!-- small desc -->
  371.                         <div class="table-responsive d-flex mb-3" style="height:120px;">
  372.                           <p class="my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum eleifend nunc, rutrum iaculis velit sagittis a.
  373.                           <!-- to make new paragraphs, use below code and paste it over this comment - DO NOT USE MORE <p></p>'s!
  374.                          
  375.                           <br><br>
  376.                           paragraph
  377.                           <br><br>
  378.                           another paragraph
  379.                          
  380.                           -->
  381.                           </p>
  382.                         </div>
  383.                        
  384.                         <p>
  385.                           <!-- link to character's profile -->
  386.                           <a class="btn btn-outline-primary btn-block" href="#">Full Profile</a>
  387.                         </p>
  388.                     </div>
  389.                 </div>
  390.             </div>
  391.       <!-- end character box -->
  392.      
  393.       <!-- character box -->
  394.             <div class="col-lg-3 col-md-4 col-sm-6 p-1 text-center">
  395.                 <div class="card p-3 border-0">
  396.                     <a data-toggle="collapse" href="#a2">
  397.                       <!-- avatar, using 200x200 works best -->  
  398.                     <img src="https://file.toyhou.se/characters/1989031?1522047642" class="rounded-circle img-thumbnail">
  399.            
  400.             <!-- character name -->
  401.                     <h1 class="font-weight-normal my-1">Character Name</h1>
  402.                 </a>
  403.  
  404.                     <div class="collapse  multi-collapse" id="a2">
  405.                         <!-- basics -->
  406.                         <p class="text-muted">age . gender . adjective</p>
  407.  
  408.             <!-- small desc -->
  409.                         <div class="table-responsive d-flex mb-3" style="height:120px;">
  410.                           <p class="my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum eleifend nunc, rutrum iaculis velit sagittis a.
  411.                           <!-- to make new paragraphs, use below code and paste it over this comment - DO NOT USE MORE <p></p>'s!
  412.                          
  413.                           <br><br>
  414.                           paragraph
  415.                           <br><br>
  416.                           another paragraph
  417.                          
  418.                           -->
  419.                           </p>
  420.                         </div>
  421.                        
  422.                         <p>
  423.                           <!-- link to character's profile -->
  424.                           <a class="btn btn-outline-primary btn-block" href="#">Full Profile</a>
  425.                         </p>
  426.                     </div>
  427.                 </div>
  428.             </div>
  429.       <!-- end character box -->
  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="#a3">
  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="a3">
  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.             <!-- character box -->
  471.             <div class="col-lg-3 col-md-4 col-sm-6 p-1 text-center">
  472.                 <div class="card p-3 border-0">
  473.                     <a data-toggle="collapse" href="#a4">
  474.                     <!-- avatar, using 200x200 works best -->  
  475.                     <img src="https://file.toyhou.se/characters/1989031?1522047642" class="rounded-circle img-thumbnail">
  476.            
  477.             <!-- character name -->
  478.                     <h1 class="font-weight-normal my-1">Character Name</h1>
  479.                     </a>
  480.  
  481.                     <div class="collapse multi-collapse" id="a4">
  482.                         <!-- basics -->
  483.                         <p class="text-muted">age . gender . adjective</p>
  484.  
  485.             <!-- small desc -->
  486.                         <div class="table-responsive d-flex mb-3" style="height:120px;">
  487.                           <p class="my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum eleifend nunc, rutrum iaculis velit sagittis a.
  488.                           <!-- to make new paragraphs, use below code and paste it over this comment - DO NOT USE MORE <p></p>'s!
  489.                          
  490.                           <br><br>
  491.                           paragraph
  492.                           <br><br>
  493.                           another paragraph
  494.                          
  495.                           -->
  496.                           </p>
  497.                         </div>
  498.                        
  499.                         <p>
  500.                           <!-- link to character's profile -->
  501.                           <a class="btn btn-outline-primary btn-block" href="#">Full Profile</a>
  502.                         </p>
  503.                     </div>
  504.                 </div>
  505.             </div>
  506.       <!-- end character box -->
  507.  
  508.  
  509. </div></div></div></div>
  510. <!-- -----------------------------
  511.  
  512.     CREDIT | DO NOT REMOVE
  513.  
  514. ------------------------------ -->
  515. <div class="bg-faded p-2"><div class="text-right" style="font-size:12px">
  516.   <a href="https://toyhou.se/vomcodesstuff"><i class="fal fa-code fa-fw text-muted"></i></a>
  517. </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!