API tools faq
paste
Advertisement
sardine_

Say Something HTML (CC)

sardine_
Aug 1st, 2023 (edited)
2,492
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.37 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------
  2.   Turn WYSIWYG OFF and Code Editor ON
  3.   Don't remove my credit.
  4.   Don't redistribute.
  5.   Feel free to frankenstein with other codes.
  6.   Works with every theme, may not work with custom CSS.
  7.   Say Something (HTML) by sardiine
  8.    
  9.   INSTRUCTIONS:
  10.   -please read specific instructions for each section if you intend to edit the code
  11.   -this is the CC (custom colours) version, for the BS (bootstrap) version go to this page https://pastebin.com/iVeV10R5
  12.   -extensive editing may cause the code to break
  13.    
  14.   primary colour:  #ff4b96; (use ctrl+f + replace all)
  15.    
  16.   --------------------->
  17. <div class="mx-auto p-2">
  18.     <div class="row no-gutters">
  19. <!-------------------- RIGHT COLUMN --------------------->
  20.         <div class="push-lg-8 col-lg-4">
  21.             <div class="col-12 col-lg-11 mb-lg-n5 ml-lg-n5 pb-3 p-0" style="z-index:100">
  22.                 <div class="p-3" style="background:#ff4b96;color:#fff"><span><i class="fad fa-quote-left fa-xl mr-2"></i>
  23. <!-------------------- QUOTE (keep it to one line) --------------------->
  24.                 short quote goes here one line only </span></div>
  25.                 <div style="transform: rotate(198deg) skew(198deg,36deg);height:28px;width:30px;position:absolute;bottom:4px;right:10%;border-right-width:0;border-bottom-width:0;clip-path:polygon(0 0,100% 0,50% 50%,0 100%);background:#ff4b96;"></div>
  26.             </div>
  27.             <hr class="hidden-lg-down m-0 mb-4" style="border-top: 2px dashed rgba(0,0,0,.1);">
  28.             <div class="card rounded-0 border-0 p-3" style="box-shadow:rgba(0,0,0,0.2) 0 0 6px;z-index:10;">
  29.                 <div class="p-0" style="box-shadow:rgba(0,0,0,0.2) 0 0 6px inset;">
  30. <!-------------------- FOCAL IMAGE (replace IMG_URL) --------------------->
  31.                     <div style="
  32.                     background:url(IMG_URL) top;background-size:cover;background-repeat:no-repeat;
  33.                     "><div class="hidden-md-down" style="min-height:500px"></div><div class="hidden-lg-up" style="min-height:300px"></div>
  34.                     </div>
  35.                 </div>
  36. <!-------------------- SONG --------------------->
  37.                 <div class="pt-4 pb-3 text-center justify-content-center">
  38.                     <div class="col-3" style="color:"><i class="fal fa-backward-step fa-2xl"></i></div>
  39.                     <div class="col-3">
  40. <!------------- YOUTUBE EMBED (replace ID_HERE with the ID at the end of videos (after watch?v=) ------------->
  41.                         <iframe class="flex-fill" frameborder="0" style="position:absolute;width:100%;height:25px;width:25px;opacity: 0.001;"
  42.                         src="https://www.youtube.com/embed/ID_HERE?controls=0"></iframe>
  43.                         <i class="fas fa-circle-play fa-2xl"></i>
  44.                     </div>
  45.                     <div class="col-3"><i class="fal fa-forward-step fa-2xl"></i></div>
  46.                 </div>
  47.                 <div class="progress mx-3 my-2" style="height:5px;">
  48.                     <div class="progress-bar" style="width:40%;background-color:#ff4b96;"><i class="fa-solid fa-star fa-spin fa-lg text-white" style="position:absolute;left:40%;bottom:55px;text-shadow:rgba(0,0,0,0.5) 0 0 4px;z-index:10;"></i></div>
  49.                 </div>
  50. <!-------------------- SONG NAME - ARTIST --------------------->
  51.                 <div class="text-center text-muted mt-1" style="letter-spacing:2px">song name - artist</div>
  52.             </div>
  53.         </div>
  54. <!-------------------- LEFT COLUMN --------------------->
  55.         <div class="pull-lg-4 col-lg-8 pr-lg-4">
  56.             <div class="flex-row text-center align-items-center justify-content-between" style="overflow:hidden;">
  57.                 <h1 class="col-12 col-lg-auto text-uppercase my-2 p-0" style="color:#fff;text-shadow:-1px 0 #ff4b96, 0 1px #ff4b96, 3px 1px 0 #ff4b96, 0 -1px #ff4b96;font-size:50px;font-weight:700;font-family:georgia!important;">
  58. <!-------------------- NAME --------------------->
  59.                     username</h1>
  60.                 <div class="hidden-lg-down pr-4">
  61.  <!-------------------- MESSAGE/SUB/AUTH BUTTONS (replace USERNAME with your own username) --------------------->
  62.                     <a href="/~messages/create/USERNAME" class="tooltipster px-3 text-muted" TITLE="message"><i class="fas fa-envelope"></i></a>
  63.                     <a href="/USERNAME/subscribe" class="tooltipster px-3 text-muted" TITLE="subscribe"><i class="fas fa-plus"></i></a>
  64.                     <a href="/USERNAME/authorize" class="tooltipster px-3 text-muted" TITLE="authorize"><i class="fas fa-heart"></i></a>
  65.                 </div>
  66.             </div>
  67.             <div class="flex-row p-1 mb-4 text-monospace justify-content-between text-center" style="background:#ff4b96;color:#fff;font-size:11pt;font-weight:300;letter-spacing:2px">
  68. <!-------------------- INFO --------------------->
  69.                 <div class="col">name</div>/ <div class="col">pronouns</div>/ <div class="col">age</div>
  70.             </div>
  71.             <div class="card rounded-0 border-0 mb-4 p-3" style="box-shadow:rgba(0,0,0,0.2) 0 0 6px;">
  72. <!-------------------- BLURB (this scrolls) --------------------->
  73.                 <div class="p-2" style="overflow:auto;max-height:150px;font-size:12pt;font-weight:300;">
  74.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas nunc id purus venenatis, ac mollis augue bibendum. Maecenas non tortor neque. Vestibulum at metus egestas, feugiat lorem in, eleifend ligula. Nullam at pulvinar dolor. Suspendisse mollis imperdiet ipsum. Ut tincidunt, mi vitae sagittis sollicitudin, leo mauris aliquet odio, at congue lectus libero sit amet diam. Morbi vitae finibus arcu. Nulla congue nisi quis mollis consectetur. Vivamus lobortis ornare pellentesque. Etiam ultricies, nulla sed consectetur dapibus, leo sapien lobortis quam, ac luctus neque lorem varius risus. Proin aliquet purus in erat consectetur lacinia. Maecenas egestas vehicula neque, sed cursus libero fringilla et. Vivamus ac neque at turpis scelerisque faucibus. Praesent in efficitur felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu lacinia justo, sed placerat risus. Morbi leo ante, tincidunt at orci vel, ultricies rhoncus felis. Aliquam tristique mi sit amet est gravida, ac venenatis ante auctor. Integer faucibus justo non ante rutrum, non pulvinar massa dignissim.</p>
  75.                 </div>
  76.                 <div class="row no-gutters mt-3">
  77.                     <div class="col-12 col-lg-6">
  78. <!-------------------- PREFERENCES --------------------->
  79.                         <ul class="fa-ul mb-2 text-monospace text-muted" style="font-weight:500;">
  80.                             <li class="mb-1"><i class="far fa-question fa-fw fa-li"></i>
  81.                             interests</li>
  82.                             <li class="mb-1"><i class="far fa-mailbox fa-fw fa-li"></i>
  83.                             contact methods</li>
  84.                             <li class="mb-1"><i class="far fa-globe fa-fw fa-li"></i>
  85.                             timezone/country</li>
  86.                         </ul>
  87.                     </div>
  88.                     <div class="col-12 col-lg-6 p-3 mt-2 ml-lg-4 mr-lg-n4 mb-lg-n5" style="background:#ff4b96;color:#fff;font-weight:400;">
  89. <!-------------------- NOTICES (this does not scroll) --------------------->
  90.                         <h5><i class="fad fa-message-exclamation"></i> NOTICE</h5>
  91.                         <hr class="m-0 mb-1" style="border-top: 1px solid rgba(255,255,255,0.5);">
  92.                         <p>wow this does not scroll don't go too crazy</p>
  93.                         <ul class="mb-0">
  94.                             <li>bulletpoint</li>
  95.                         </ul>
  96.                     </div>
  97.                 </div>
  98.             </div>
  99.             <hr class="hidden-lg-down mb-4" style="border-top: 2px dashed rgba(0,0,0,.1);">
  100.             <div class="row no-gutters mb-4">
  101. <!-------------------- FEATURED --------------------->
  102.                 <div class="hidden-lg-down col-3 card rounded-0 border-0 p-2 text-center justify-content-center" style="background:#ff4b96;color:#fff;">
  103.                     <h1 class="col-12 col-lg-auto text-uppercase my-2 p-0" style="font-size:25px;font-weight:700;font-family:georgia;">featured</h1>
  104.                     <hr class="m-2" style="border-top: 1px solid rgba(255,255,255,0.5);width:50px">
  105.                 </div>
  106.                 <div class="col-12 col-lg-9 pl-lg-2 text-center">
  107.                     <div class="row no-gutters justify-content-between">
  108. <!-------------------- CHARACTERS (keep it to 4 or under) --------------------->
  109.                         <div class="col-6 col-md-3 px-2">
  110.                             <a href="LINK_HERE" style="color:#ff4b96;">
  111.                             <img src="IMG_URL">
  112.                             <p class="btn w-100 rounded-0 pb-0 px-0">character</p></a>
  113.                         </div>
  114.                         <div class="col-6 col-md-3 px-2">
  115.                             <a href="LINK_HERE" style="color:#ff4b96;">
  116.                             <img src="IMG_URL">
  117.                             <p class="btn w-100 rounded-0 pb-0 px-0">character</p></a>
  118.                         </div>
  119.                         <div class="col-6 col-md-3 px-2">
  120.                             <a href="LINK_HERE" style="color:#ff4b96;">
  121.                             <img src="IMG_URL">
  122.                             <p class="btn w-100 rounded-0 pb-0 px-0">character</p></a>
  123.                         </div>
  124.                         <div class="col-6 col-md-3 px-2">
  125.                             <a href="LINK_HERE" style="color:#ff4b96;">
  126.                             <img src="IMG_URL">
  127.                             <p class="btn w-100 rounded-0 pb-0 px-0">character</p></a>
  128.                         </div>
  129. <!-------------------- CHARACTERS END --------------------->
  130.                     </div>
  131.                 </div>
  132.             </div>
  133.             <div class="row no-gutters mx-auto justify-content-between" style="max-width:600px;">
  134. <!-------------------- LINKS (remember to edit TITLES too) --------------------->
  135.                 <a href="LINK_HERE" TITLE="carrd" class="btn rounded-circle p-2 border-0 tooltipster" style="font-size:1.5rem;background:#ff4b96;color:#fff;"><i class="fas fa-id-card fa-fw"></i></a>
  136.                 <a href="LINK_HERE" TITLE="twitter" class="bg-white btn rounded-circle p-2 border-0 tooltipster" style="box-shadow:rgba(0,0,0,0.2) 0 0 6px;font-size:1.5rem;color:#ff4b96;"><i class="fab fa-twitter fa-fw"></i></a>
  137.                 <a href="LINK_HERE" TITLE="deviantart" class="btn rounded-circle p-2 border-0 tooltipster" style="font-size:1.5rem;background:#ff4b96;color:#fff;"><i class="fab fa-deviantart fa-fw"></i></a>
  138.                 <a href="LINK_HERE" TITLE="tumblr" class="bg-white btn rounded-circle p-2 border-0 tooltipster" style="box-shadow:rgba(0,0,0,0.2) 0 0 6px;font-size:1.5rem;color:#ff4b96;"><i class="fab fa-tumblr fa-fw"></i></a>
  139.                 <a TITLE="discord" class="btn rounded-circle p-2 border-0 tooltipster" style="font-size:1.5rem;background:#ff4b96;color:#fff;"><i class="fab fa-discord fa-fw"></i></a>
  140.                 <a href="LINK_HERE" TITLE="commissions" class="bg-white btn rounded-circle p-2 border-0 tooltipster" style="box-shadow:rgba(0,0,0,0.2) 0 0 6px;font-size:1.5rem;color:#ff4b96;"><i class="fas fa-dollar-sign fa-fw"></i></a>
  141. <!-------------------- ADD MORE LINKS UNDER HERE --------------------->
  142.                
  143. <!-------------------- LINKS END --------------------->
  144.             </div>
  145.         </div>
  146.     </div>
  147. <!-------------------- CREDIT - DO NOT REMOVE --------------------->
  148. <div class="card flex-row rounded-0 border-0 mt-4 p-2 px-3" style="box-shadow:rgba(0,0,0,0.2) 0 0 6px;">
  149.     <hr class="my-0"><span style="font-size:10pt"><i>art by <a href="LINK_HERE" style="color:#ff4b96;">artist</a> · code by <a href="https://toyhou.se/22751023" style="color:#ff4b96;">@/sardiine</a></i></span>
  150. </div>
  151. </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!