API tools faq
paste
Advertisement
meromerc

Say So (Custom Colors)

meromerc
Apr 16th, 2024 (edited)
575
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.83 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    SAY SO (Custom Colors)
  4.    
  5.    code by @meromercury
  6.    
  7.    originally made sometime in 2019 idk // made free: 4/16/24
  8.    
  9.    Want bootstrap colors? Check my original listing for the other version.
  10.    
  11.    Accent color: #b2487c (CTRL+F to replace)
  12.    Use fontawesome to change the symbols.
  13.    
  14.  
  15. -->
  16.  
  17.  
  18. <div class="container">
  19. <div class="mx-auto" style="font-size:14px;max-width:800px;font-family:consolas">
  20.  
  21. <div class="card mb-2">
  22. <div class="card-header" style="background-color:#b2487c;">
  23.  
  24.    <div class="pull-right ml-1">
  25.       <div class="btn btn-sm" style="background-color:#696969;border-color:#b2487c"><i class="fa fa-minus"></i></div>
  26.       <div class="btn btn-sm" style="background-color:#696969;border-color:#b2487c"><i class="fa fa-window-restore"></i></div>
  27.       <div class="btn btn-sm" style="background-color:#555;"><i class="fa fa-times"></i></div>
  28.    </div>
  29.  
  30. <ul class="nav nav-tabs card-header-tabs nav-fill mt-2 ml-1 mr-1"><li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab1">About</a></li>
  31. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab2">Details</a></li>
  32. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab3">Biography</a></li>
  33. <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab4">Relationships</a></li>
  34. </ul>
  35.  
  36. </div>
  37.  
  38. <div class="tab-content">
  39.  
  40. <!-------------------
  41.  
  42.      TAB 1
  43.  
  44. --------------------->
  45.  
  46. <div class="tab-pane active show card-block table-responsive fade" style="height:500px; " id="tab1">
  47.  
  48. <div class="text-center mb-3">
  49. <i>
  50. <h1><i class="fas fa-quote-left"></i> You want it? Say so. <i class="fas fa-quote-right"></i></h1>
  51. </i>
  52. </div>
  53. <!-------------------
  54.  
  55.      ABOUT
  56.  
  57. --------------------->
  58. <div class="row">
  59. <div class="col-7 h-auto overflow-hidden" style="max-height:500px">
  60.  
  61. <h1>About</h1>
  62. <hr class="my-1">
  63.  
  64.   <div class="container mb-3">
  65.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consectetur porttitor magna, quis vulputate nunc mattis et. Suspendisse varius ante in aliquam placerat. Aliquam ex ante, semper at finibus vel, dapibus quis felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam varius risus facilisis tellus dignissim, eu iaculis libero molestie. Suspendisse suscipit enim eget blandit cursus.</p>
  66.  
  67.   <p>Donec at imperdiet urna. Maecenas a purus id ex consectetur pulvinar ac non ex. Aliquam quis consequat ante. Curabitur vulputate, sem sed ultricies imperdiet, velit enim auctor enim, eget euismod urna magna eu justo. Nunc sed nibh sed magna consectetur euismod at eu felis. Cras fringilla, nibh ut rhoncus interdum, dui diam molestie neque, eget dapibus dolor velit et erat. Try not to make this too long!</p>
  68.   </div>
  69.  
  70.   </div>
  71.  
  72.   <!-- height will automatically crop to 450. if you do NOT want this as a fixed h/w, remove "style="height:450px" and "w-100" -->
  73.  
  74.     <div class="col-md-5 p-1 m-auto">
  75.       <img src="https://images.pexels.com/photos/2251822/pexels-photo-2251822.jpeg" class="rounded w-100" style="height:450px;">
  76.     </div>
  77. </div>
  78. <!-------------------
  79.  
  80.      APPEARANCE
  81.  
  82. --------------------->
  83. <h1>Appearance</h1>
  84. <hr class="my-1">
  85.  
  86.   <div class="container mb-3">
  87.   <p>Vivamus volutpat ultricies ligula, sed pharetra nibh mattis lacinia. Quisque pulvinar magna ex, sed tristique erat ullamcorper eget. Curabitur tempor id mauris eu dapibus. Suspendisse aliquet semper odio, id posuere est. In tincidunt mauris a metus condimentum, id egestas orci lacinia. Nulla convallis, dui eu malesuada viverra, ipsum velit imperdiet mauris, nec porttitor augue metus ac tortor. Cras auctor sem vel pretium efficitur. Suspendisse non rhoncus metus. Sed consectetur eros vitae iaculis consectetur.</p>
  88.  
  89.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis metus feugiat egestas bibendum. Etiam efficitur eros at justo commodo mollis. Nulla luctus egestas risus quis vulputate. Suspendisse id pellentesque nisi, vel convallis nunc. Aenean rhoncus vulputate urna a pulvinar. Nullam rhoncus nibh enim, sed efficitur lorem luctus at. Sed pretium purus non tortor pharetra sodales. Cras quis ante eros.</p>
  90.   </div>
  91.  
  92. </div>
  93.  
  94. <!-------------------
  95.  
  96.      TAB 2
  97.  
  98. --------------------->
  99.  
  100. <div class="tab-pane show card-block table-responsive fade" style="height:500px; " id="tab2">
  101.  
  102. <div class="container">
  103. <!-------------------
  104.  
  105.      BASICS
  106.  
  107. --------------------->
  108.  
  109. <!-- the symbols are inside of <i class="">. to replace symbols, find your symbol on fontawesome.com and replace it below-->
  110. <div class="row no-gutters">
  111. <div class="col-sm">
  112.   <ul class="list-group list-group-flush">
  113.       <li class="list-group-item d-flex justify-content-between">
  114.         <i class="fas fa-user"></i>
  115.         Name</li>
  116.       <li class="list-group-item d-flex justify-content-between">
  117.         <i class="far fa-transgender"></i>
  118.         Gender</li>
  119.       <li class="list-group-item d-flex justify-content-between">
  120.         <i class="far fa-signature"></i>
  121.         Pronouns</li>
  122.       <li class="list-group-item d-flex justify-content-between">
  123.         <i class="far fa-clock"></i>
  124.         Age</li>
  125.       <li class="list-group-item d-flex justify-content-between">
  126.         <i class="far fa-heart"></i>
  127.         Sexuality</li>
  128.     </ul>
  129. </div>
  130.  
  131. <div class="col-auto p-2 hidden-xs-down">
  132.   <div class="card h-100" style="border-width:1px"></div>
  133. </div>
  134.  
  135. <div class="col-sm">
  136.   <ul class="list-group list-group-flush">
  137.     <li class="list-group-item d-flex justify-content-between">
  138.         <i class="far fa-heart"></i>
  139.         Sexuality</li>
  140.       <li class="list-group-item d-flex justify-content-between">
  141.         <i class="far fa-ruler"></i>
  142.         Height</li>
  143.       <li class="list-group-item d-flex justify-content-between">
  144.         <i class="far fa-moon"></i>
  145.         Dream moon / Zodiac</li>
  146.       <li class="list-group-item d-flex justify-content-between">
  147.         <i class="fas fa-tint"></i>
  148.         Blood color / Species</li>
  149.       <li class="list-group-item d-flex justify-content-between">
  150.         <i class="far fa-male"></i>
  151.         Class of Aspect</li>
  152.     </ul>
  153. </div>
  154. </div>
  155. <!-------------------
  156.  
  157.      STATS
  158.  
  159. --------------------->
  160.  
  161. <hr class="m-3">
  162. <div class="row no-gutters mb-2">
  163.   <div class="col-md-6">
  164.    <div class="col-lg-11 no-gutters pt-2 pb-2 mx-auto">
  165.      <div class="col-lg-12 no-gutters mb-3">
  166.      <span class="mb-2">Introvert</span>
  167.      <span class="pull-right mb-2">Extrovert</span>
  168.     <div class="progress my-2">
  169.      <div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#b2487c;width:50%;height:16px"></div></div>
  170.       </div>
  171.       <div class="col-lg-12 no-gutters mb-3">
  172.      <span class="mb-2">Observant</span>
  173.      <span class="pull-right mb-2">Intuitive</span>
  174.     <div class="progress my-2">
  175.      <div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#b2487c;width:50%;height:16px"></div></div>
  176.       </div>
  177.       <div class="col-lg-12 no-gutters mb-3">
  178.      <span class="mb-2">Thinking</span>
  179.      <span class="pull-right mb-2">Feeling</span>
  180.     <div class="progress my-2">
  181.      <div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#b2487c;width:50%;height:16px"></div></div>
  182.       </div>
  183.       <div class="col-lg-12 no-gutters mb-6">
  184.      <span class="mb-2">Judging</span>
  185.      <span class="pull-right mb-2">Prospecting</span>
  186.     <div class="progress my-2">
  187.      <div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#b2487c;width:50%;height:16px"></div></div>
  188.       </div>
  189.    </div>
  190. </div>
  191.  
  192. <div class="col-md-6">
  193. <div class="row m-auto">
  194.   <div class="col-lg-12 d-flex p-3 m-auto justify-around">
  195.   <!-- to use: copy everything in your youtube link AFTER ?v=. replace everything after /embed/ with what you copied. -->
  196.     <iframe width="345" height="210" src="https://www.youtube.com/embed/uAYG46w1SCA" frameborder="0" class="p-2 m-auto mb-2"></iframe>
  197.  
  198.   </div>
  199. </div>
  200. </div>
  201. </div>
  202. <hr class="m-3">
  203.  
  204. <!-------------------
  205.  
  206.    LIKES/DISLIKES
  207.  
  208. --------------------->
  209.  
  210. <div class="row no-gutters mb-2">
  211. <div class="col-sm">
  212.   <p class="text-left mb-2 ml-2" style="font-size:22px">Likes</p>
  213.   <ul class="list-group list-group-flush">
  214.       <li class="list-group-item d-flex justify-content-between">
  215.         <i class="fas fa-check"></i>
  216.         Yes</li>
  217.       <li class="list-group-item d-flex justify-content-between">
  218.         <i class="fas fa-check"></i>
  219.         Yes</li>
  220.       <li class="list-group-item d-flex justify-content-between">
  221.         <i class="fas fa-check"></i>
  222.         Yes</li>
  223.       <li class="list-group-item d-flex justify-content-between">
  224.         <i class="fas fa-check"></i>
  225.         Yes</li>
  226.       <li class="list-group-item d-flex justify-content-between">
  227.         <i class="fas fa-check"></i>
  228.         Yes</li>
  229.     </ul>
  230. </div>
  231.  
  232. <div class="col-auto p-2 hidden-xs-down">
  233.   <div class="card h-100" style="border-width:1px"></div>
  234. </div>
  235.  
  236. <div class="col-sm">
  237.   <p class="text-left mb-2 ml-2" style="font-size:22px">Dislikes</p>
  238.   <ul class="list-group list-group-flush">
  239.       <li class="list-group-item d-flex justify-content-between">
  240.         <i class="fas fa-times"></i>
  241.         No</li>
  242.       <li class="list-group-item d-flex justify-content-between">
  243.         <i class="fas fa-times"></i>
  244.         No</li>
  245.       <li class="list-group-item d-flex justify-content-between">
  246.         <i class="fas fa-times"></i>
  247.         No</li>
  248.       <li class="list-group-item d-flex justify-content-between">
  249.         <i class="fas fa-times"></i>
  250.         No</li>
  251.       <li class="list-group-item d-flex justify-content-between">
  252.         <i class="fas fa-times"></i>
  253.         No</li>
  254.     </ul>
  255. </div>
  256. </div>
  257.  
  258. </div>
  259. </div>
  260.  
  261. <!-------------------
  262.  
  263.      TAB 3
  264.  
  265. --------------------->
  266. <div class="tab-pane show card-block table-responsive fade" style="height:500px; " id="tab3">
  267.  
  268. <!-------------------
  269.  
  270.      BIOGRAPHY
  271.  
  272. --------------------->
  273.  
  274. <h1>Background</h1>
  275. <hr class="my-1 mb-2">
  276.  
  277.   <div class="container mb-4">
  278.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque, ante ac tempus ornare, mauris lorem maximus sem, at congue neque orci mattis mauris. Sed molestie mi non ligula maximus, nec consectetur diam sollicitudin. Quisque est arcu, pretium et neque facilisis, vulputate mattis eros. Ut nec eros ac augue sollicitudin pulvinar. Nunc bibendum gravida nibh, quis fringilla tellus. Cras erat libero, bibendum in tempus eget, vestibulum nec erat. Ut id elit volutpat, scelerisque nisl at, porta odio.</p>
  279.  
  280.  
  281.   <h4 class="text-underline mb-1" style="font-weight:bold">Subheader</h4>
  282.   <p>Donec at imperdiet urna. Maecenas a purus id ex consectetur pulvinar ac non ex. Aliquam quis consequat ante. Curabitur vulputate, sem sed ultricies imperdiet, velit enim auctor enim, eget euismod urna magna eu justo. Nunc sed nibh sed magna consectetur euismod at eu felis. Cras fringilla, nibh ut rhoncus interdum, dui diam molestie neque, eget dapibus dolor velit et erat. Vestibulum quis risus commodo, tempus lacus quis, interdum mauris. Aliquam eu tincidunt ipsum. Duis consequat vulputate neque, nec venenatis mauris convallis eget. Nulla neque sapien, consectetur dapibus aliquam in, fermentum nec nunc. Quisque sodales lorem rutrum condimentum lacinia. Pellentesque aliquam, ante et iaculis lacinia, massa tellus tincidunt purus, quis tempor justo dui non est.</p>
  283.  
  284.   <h4 class="text-underline mb-1" style="font-weight:bold">Subheader</h4>
  285.   <p>Aliquam congue, metus rutrum venenatis volutpat, odio dui congue lorem, sit amet gravida sapien augue sit amet lectus. Aliquam non accumsan sem. Fusce nibh felis, ullamcorper ut neque quis, porta dictum quam. Nam sed rutrum nisl. Curabitur sollicitudin nisi odio, ac tristique dui fermentum id. Cras facilisis sed massa et sagittis. Fusce imperdiet a metus et semper.</p>
  286.  
  287.   <!-- add on here! -->
  288.  
  289.   </div>
  290. <hr class="my-1 mb-3">
  291. <h1>Personality</h1>
  292. <hr class="my-1 mt-3 mb-2">
  293.  
  294.   <div class="container mb-4">
  295.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed justo felis, hendrerit ut nibh vitae, pellentesque euismod nisi. Vestibulum mauris nibh, pretium sit amet fermentum nec, imperdiet ac ipsum. Maecenas ornare, velit vulputate semper bibendum, justo mauris hendrerit nunc, et fringilla justo nibh sed odio. Sed in hendrerit mi. Maecenas consectetur porttitor lacus et aliquam. Etiam ut neque et purus ultrices pulvinar nec vitae neque. Sed bibendum elit vel nibh pulvinar consequat.</p>
  296.  
  297.   <p>Nunc purus justo, auctor vitae ultrices vel, pretium sit amet nisi. Sed volutpat sodales malesuada. Curabitur blandit auctor justo, vitae convallis massa vulputate non. Ut a orci et urna iaculis varius sed in est. Maecenas dignissim sit amet mi non posuere. Sed vestibulum scelerisque nulla sed suscipit. Nulla vulputate dignissim ornare. Suspendisse potenti. Suspendisse pellentesque iaculis diam, et facilisis nibh finibus sed. Duis sem nunc, finibus porta volutpat nec, dictum nec sem. Maecenas nec urna ac urna elementum varius ac quis erat. Donec ullamcorper mollis nisi a feugiat. Nulla interdum libero non metus tempor interdum.</p>
  298.  
  299.   <!-- add on here! -->
  300.  
  301.   </div>
  302.  
  303. <!-------------------
  304.  
  305.      TRIVIA
  306.  
  307. --------------------->
  308.  
  309. <hr class="my-1 mb-3">
  310. <h1>Trivia</h1>
  311. <hr class="my-1 mt-3">
  312.  
  313. <div class="col-lg-11 no-gutters pt-2 mx-auto">
  314.   <ul>
  315.     <li>Day to night to morning</li>
  316.     <li>Keep with me in the moment</li>
  317.     <li style="font-weight:bold">I'd let you had I known it</li>
  318.     <ul><li>Why don't you say so?</li></ul>
  319.     <li>Didn't even notice</li>
  320.     <li style="font-weight:bold">No punches there to roll with</li>
  321.     <li><u>You got to keep me focused</u></li>
  322.     <ul><li>You want it? Say so</li></ul>
  323.   </ul>
  324. </div>
  325.  
  326. </div>
  327. <!-------------------
  328.  
  329.      TAB 4
  330.  
  331. --------------------->
  332. <div class="tab-pane show card-block table-responsive fade" style="height:500px; " id="tab4">
  333.  
  334. <!-------------------
  335.  
  336.      RELATIONSHIPS
  337.  
  338. --------------------->
  339.  
  340. <div class="row">
  341. <div class="col-md-3 text-center mb-3 h-100">
  342.      <img src="https://i.imgur.com/XNO9z5Q.png" class="rounded-circle" style="max-width:167px;max-height:167px">
  343.  </div>
  344.  
  345. <div class="col-md-9">
  346.     <div class="col-md-12 p-2" style="min-height:167px;font-size:13px;">
  347.         <h2 class="text-left mb-0"><a href="CHARACTER LINK" style="color:#b2487c">Name</a></h2>
  348.         <p class="text-muted mb-1" style="font-size:14px">Relationship</p>
  349.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh dolor, pellentesque placerat faucibus eget, pretium non augue. Maecenas enim justo, gravida eget luctus sed, dictum et ex. Proin ut nisi eget libero condimentum mollis. Morbi maximus sapien ut ex malesuada mollis. Pellentesque rutrum velit id risus accumsan, vitae consequat risus eleifend. Nullam id metus purus. In a finibus nunc. Cras scelerisque cursus purus, ac dictum nulla lacinia non. Proin vestibulum, lectus et bibendum cursus, urna diam commodo justo, a porta metus sem et quam.</p>
  350.     </div>
  351. </div>
  352. </div>
  353.  
  354. <hr class="mt-4 mb-4">
  355.  
  356. <div class="row">
  357. <div class="col-md-3 text-center mb-3 h-100">
  358.      <img src="https://i.imgur.com/XNO9z5Q.png" class="rounded-circle" style="max-width:167px;max-height:167px">
  359.  </div>
  360.  
  361. <div class="col-md-9">
  362.     <div class="col-md-12 p-2" style="min-height:167px;font-size:13px;">
  363.         <h2 class="text-left mb-0"><a href="CHARACTER LINK" style="color:#b2487c">Name</a></h2>
  364.         <p class="text-muted mb-1" style="font-size:14px">Relationship</p>
  365.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh dolor, pellentesque placerat faucibus eget, pretium non augue. Maecenas enim justo, gravida eget luctus sed, dictum et ex. Proin ut nisi eget libero condimentum mollis. Morbi maximus sapien ut ex malesuada mollis. Pellentesque rutrum velit id risus accumsan, vitae consequat risus eleifend. Nullam id metus purus. In a finibus nunc. Cras scelerisque cursus purus, ac dictum nulla lacinia non. Proin vestibulum, lectus et bibendum cursus, urna diam commodo justo, a porta metus sem et quam.</p>
  366.     </div>
  367. </div>
  368. </div>
  369.  
  370. <!--
  371. COPY FROM HERE TO END TO ADD MORE PEOPLE
  372. -->
  373. <hr class="mt-4 mb-4">
  374.  
  375. <div class="row">
  376. <div class="col-md-3 text-center mb-3 h-100">
  377.      <img src="https://i.imgur.com/XNO9z5Q.png" class="rounded-circle" style="max-width:167px;max-height:167px">
  378.  </div>
  379.  
  380. <div class="col-md-9">
  381.     <div class="col-md-12 p-2" style="min-height:167px;font-size:13px;">
  382.         <h2 class="text-left mb-0"><a href="CHARACTER LINK" style="color:#b2487c">Name</a></h2>
  383.         <p class="text-muted mb-1" style="font-size:14px">Relationship</p>
  384.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh dolor, pellentesque placerat faucibus eget, pretium non augue. Maecenas enim justo, gravida eget luctus sed, dictum et ex. Proin ut nisi eget libero condimentum mollis. Morbi maximus sapien ut ex malesuada mollis. Pellentesque rutrum velit id risus accumsan, vitae consequat risus eleifend. Nullam id metus purus. In a finibus nunc. Cras scelerisque cursus purus, ac dictum nulla lacinia non. Proin vestibulum, lectus et bibendum cursus, urna diam commodo justo, a porta metus sem et quam.</p>
  385.     </div>
  386. </div>
  387. </div>
  388. <!--
  389. END COPY
  390. -->
  391.  
  392.  
  393.  
  394.  
  395.  
  396. <!-- ^^^ paste ABOVE here to add more people -->
  397.  
  398. </div>
  399.  
  400. </div>
  401. </div>
  402.  
  403.  
  404. <!------------------- my credit, please don't remove! --------------------->
  405.  
  406. <div class="m-1 text-center text-primary" style="font-size:12px">
  407. <a target="_blank" href="https://toyhou.se/meromercury" class="tooltipster" title="made by cass" style="color:#A4A4A4;font-weight:600"><i class="fal fa-code"></i></a></div>
  408.  
  409. </div>
  410. </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!