API tools faq
paste
iownfish

HTML | Char#001

iownfish
Mar 27th, 2020
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.81 KB | None | 0 0
raw download clone embed print report
  1. <!----------
  2.  
  3.  Please don't remove the credit tag! Code: tobirama @toyhouse
  4.  
  5.  Change the accent colour by using the ctrl+f function, putting in the current hex code #D7392D. Then click the plus, put in your new colour hex code and replace all. Enjoy!
  6.  
  7. ---------->
  8. <div class="mx-auto w-100" style="font-size:13px;max-width:1100px;">
  9. <div class="row no-gutters" style="margin:-4px;">
  10.  
  11. <!----------
  12.  
  13. Left column - name + basics
  14.  
  15. ---------->
  16.  
  17. <div class="col-md-4" style="min-height: 460px;"><div class="info">
  18. <div class="display-4 text-uppercase" style="letter-spacing:1px;background: #D7392D">
  19.   <div class="btn rounded-0 text-white border-0 d-flex justify-content-between"
  20.  style="font-size:18px;">
  21.    
  22.     NAME <i class="fas fa-quote-right fa-fw my-auto"></i>
  23.    
  24.   </div>
  25. </div>  
  26. <div id="info">
  27. <div class="p-3 bg-faded" style="height:500px;border:1px solid #D7392D;overflow: auto;padding-top: 0.25rem !important;
  28.    padding: 1rem;">
  29. <div class="row no-gutters p-1">
  30. <div class="col-sm">
  31.  
  32.  
  33.   <div class="d-flex">
  34.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Age</span>
  35.     <span class="w-50 p-1 text-right">[age]</span>
  36.   </div>
  37.  
  38.   <div class="d-flex">
  39.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Gender</span>
  40.     <span class="w-50 p-1 text-right">[gender]</span>
  41.   </div>
  42.  
  43.   <div class="d-flex">
  44.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Pronouns</span>
  45.     <span class="w-50 p-1 text-right">[pronouns]</span>
  46.   </div>
  47.  
  48.  <div class="d-flex">
  49.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Height</span>
  50.     <span class="w-50 p-1 text-right">[height]</span>
  51.   </div>
  52.    
  53.   <div class="d-flex">
  54.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Species</span>
  55.     <span class="w-50 p-1 text-right">[species]</span>
  56.   </div>
  57.  
  58.   <div class="d-flex">
  59.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Orientation</span>
  60.     <span class="w-50 p-1 text-right">[orientation]</span>
  61.   </div>
  62.  
  63.   <div class="d-flex">
  64.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Relationship</span>
  65.     <span class="w-50 p-1 text-right">[relationship]</span>
  66.   </div>
  67.  
  68.   <div class="d-flex">
  69.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Birthday</span>
  70.     <span class="w-50 p-1 text-right">[birthday]</span>
  71.   </div>
  72.  
  73.   <div class="d-flex">
  74.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Zodiac</span>
  75.     <span class="w-50 p-1 text-right">[zodiac]</span>
  76.   </div>
  77.  
  78.   <div class="d-flex">
  79.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Theme</span>
  80.     <span class="w-50 p-1 text-right"><a href="url" style="color:#D7392D">[song]</a></span>
  81.   </div>
  82.  
  83.   <hr style="margin:14px 4px;">
  84.  
  85.   <div class="d-flex">
  86.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Strength</span>
  87.     <div class="w-50 mx-1 progress my-auto rounded-10" style="height:10px">
  88.       <div class="progress-bar" style="width: 50%;background:#D7392D"></div>
  89.     </div>
  90.   </div>
  91.  
  92.   <div class="d-flex">
  93.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Dexterity</span>
  94.     <div class="w-50 mx-1 progress my-auto rounded-10" style="height:10px">
  95.       <div class="progress-bar" style="width: 50%;background:#D7392D"></div>
  96.     </div>
  97.   </div>
  98.  
  99.   <div class="d-flex">
  100.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Constitution</span>
  101.     <div class="w-50 mx-1 progress my-auto rounded-10" style="height:10px">
  102.       <div class="progress-bar" style="width: 50%;background:#D7392D"></div>
  103.     </div>
  104.   </div>
  105.  
  106.   <div class="d-flex">
  107.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Intelligence</span>
  108.     <div class="w-50 mx-1 progress my-auto rounded-10" style="height:10px">
  109.       <div class="progress-bar" style="width: 50%;background:#D7392D"></div>
  110.     </div>
  111.   </div>
  112.  
  113.   <div class="d-flex">
  114.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Wisdom</span>
  115.     <div class="w-50 mx-1 progress my-auto rounded-10" style="height:10px">
  116.       <div class="progress-bar" style="width: 50%;background:#D7392D"></div>
  117.     </div>
  118.   </div>
  119.  
  120.     <div class="d-flex">
  121.     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Charisma</span>
  122.     <div class="w-50 mx-1 progress my-auto rounded-10" style="height:10px">
  123.       <div class="progress-bar" style="width: 50%;background:#D7392D"></div>
  124.     </div>
  125.   </div>
  126.  
  127.  
  128.  
  129. </div>
  130.     </div></div></div></div></div>
  131.  
  132. <!----------
  133.  
  134. Middle column - image
  135.  
  136. ---------->
  137.  
  138. <div class="col-md-4 ">
  139. <div class="card rounded-0 h-100" style="min-height:200px;border-color:#D7392D;
  140.  
  141.  
  142.  background: url(url-here) center;background-size:cover;padding:100px;">
  143.  
  144.  
  145. </div>
  146. </div>
  147. <div class="col-md-4" style="min-height: 460px;">
  148.  
  149. <!----------
  150.  
  151. Right column - Story
  152.  
  153. ---------->
  154.  
  155. <div class="story">
  156. <div class="display-4 text-uppercase" style="letter-spacing:1px;background: #D7392D">
  157.   <div class="btn rounded-0 text-white border-0 d-flex justify-content-between"
  158.  style="font-size:18px;">
  159.    
  160.     Story <i class="fas fa-bookmark fa-fw my-auto"></i>
  161.    
  162.   </div>
  163. </div>  
  164. <div id="story">
  165. <div class="p-3 bg-faded" style="height:500px;border:1px solid #D7392D;overflow: auto;padding-top: 0.25rem !important;
  166.    padding: 1rem;">
  167. <div class="row no-gutters p-1">
  168.  
  169.   <!----------
  170.  
  171.  For longer subtitles you may need to shorten the line width so it fits, for shorter you can increase the default 150px I have here!
  172.  
  173.  ---------->
  174.  
  175. <div class="text-uppercase text-muted" style="font-size:18px; text-align: right;">Subtitle<div style="display:inline-block; width: 150px; border-bottom:1px solid #D7392D; vertical-align: super; margin-left:0.5rem;"></div></div>
  176.  
  177.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Fermentum leo vel orci porta non. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Posuere morbi leo urna molestie at elementum. Felis bibendum ut tristique et egestas. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Facilisis volutpat est velit egestas dui id. Est velit egestas dui id. Dolor sed viverra ipsum nunc aliquet bibendum. Augue neque gravida in fermentum et sollicitudin ac orci. Scelerisque viverra mauris in aliquam sem. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam vehicula. Tempus urna et pharetra pharetra massa. Odio pellentesque diam volutpat commodo sed egestas egestas. Ac tincidunt vitae semper quis lectus nulla at.</p>
  178.  
  179. <p>Eu consequat ac felis donec et. Maecenas accumsan lacus vel facilisis volutpat est. Eget egestas purus viverra accumsan in nisl nisi. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Auctor eu augue ut lectus arcu bibendum. Et malesuada fames ac turpis. Sed augue lacus viverra vitae congue. Quis risus sed vulputate odio ut enim. Etiam tempor orci eu lobortis elementum nibh tellus. Amet porttitor eget dolor morbi non arcu risus quis varius. Eu augue ut lectus arcu bibendum at varius vel pharetra. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Lectus urna duis convallis convallis. Est ultricies integer quis auctor. Turpis massa tincidunt dui ut ornare lectus. Porttitor leo a diam sollicitudin tempor id eu nisl nunc.</p>
  180.  
  181. <div class="text-uppercase text-muted" style="font-size:18px; text-align: right;">Subtitle<div style="display:inline-block; width: 150px; border-bottom:1px solid #D7392D; vertical-align: super; margin-left:0.5rem;"></div></div>
  182.  
  183. <p>Odio morbi quis commodo odio aenean sed adipiscing diam donec. Netus et malesuada fames ac turpis egestas sed. Quis viverra nibh cras pulvinar mattis nunc sed. Varius morbi enim nunc faucibus a pellentesque. Viverra tellus in hac habitasse platea dictumst. Volutpat odio facilisis mauris sit amet massa vitae. Turpis cursus in hac habitasse. Dui ut ornare lectus sit amet est. Egestas pretium aenean pharetra magna ac placerat vestibulum. Leo vel fringilla est ullamcorper eget nulla facilisi. Egestas congue quisque egestas diam in. Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Curabitur vitae nunc sed velit dignissim. Morbi enim nunc faucibus a. Pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies. Est sit amet facilisis magna. Eget mi proin sed libero enim sed faucibus turpis in.</p>
  184.  
  185. </div>
  186. </div>
  187. </div>  
  188. </div>
  189.  
  190. </div>
  191. </div>
  192.    
  193. <!---------
  194.  
  195. Please don't remove this part! It is my credit :)
  196.  
  197. ---------->
  198.    
  199. <div class="text-right p-1" style="font-size:10px;">
  200.   <a href="https://toyhou.se/6408102.char-001"><i class="far fa-code text-muted"></i></a>
  201. </div>
  202. </div>
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!