API tools faq
paste
rosiuel

WYTMIPTWTHRHM(simple)

rosiuel
Oct 31st, 2021 (edited)
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.57 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. WYTMIPTWTHRHM(simple)
  4.  
  5. DO NOT USE IF YOU DO NOT OWN A SUCCUBITE! ty :o)
  6.  
  7. keep credit
  8.  
  9. accent: #aa1212
  10.  
  11. -->
  12.  
  13. <div class="container" style="max-width:800px;font-family:times">
  14.    
  15. <div class="row no-gutters">
  16.  
  17. <!-- ICONS -->
  18. <i class="fal fa-bat hidden-sm-down" style="font-size:4.5em; position:absolute; right:0px; top:5px; z-index:3; transform: rotate(15deg);opacity:.7"></i>
  19.  
  20. <i class="far fa-heart hidden-sm-down" style="font-size:2em; position:absolute; right:80px; top:30px; z-index:3; transform: rotate(-25deg);opacity:.7"></i>
  21. <!-- ICONS END -->
  22.  
  23. <!-- TOP BAR -->
  24.     <div class="col-lg-12">
  25.  
  26.         <div class="row no-gutters">
  27.             <div class="col m-3 order-lg-2">
  28.  
  29.                 <!-- CHARACTER NAME -->            
  30.                 <h2 class="text-uppercase p-2" style="font-size:2rem;letter-spacing:3px;background:#aa1212;font-family:times;color:#fff">
  31.                        <span>
  32.                         Character Name</span>
  33.                 </h2>
  34.  
  35.                 <hr class="my-2" style="border-top:#aa1212 3px solid;">
  36.             </div>
  37.  
  38.             <!-- CHARACTER ICON -->            
  39.             <div class="col-auto order-lg-1">
  40.                 <img class="rounded-circle img-thumbnail" style="height:100px;width:100px;border:2px solid #aa1212;"
  41.                src="https://cdn.discordapp.com/attachments/852252391003652117/904262879874805770/image0.png">
  42.             </div>
  43.         </div>
  44.     </div>
  45. <!-- TOP BAR END -->
  46.  
  47. <div class="tab-content">
  48.  
  49. <div class="mt-2" style="height:366px;overflow:auto">
  50. <div class="row no-gutters">
  51. <!-- ABOUT -->
  52.     <div class="col-lg-4 pl-3" style="height:366px;overflow:auto">
  53.         <div class="row no-gutters my-2">
  54.             <div class="col-6">
  55.                 <div class="col-auto"> content </div>
  56.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> alias </div>
  57.             </div>
  58.             <div class="col-6">
  59.                 <div class="col-auto"> content </div>
  60.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> gender </div>
  61.             </div>
  62.             <div class="col-12 card border-0 muted my-3" style="background:#aa1212;height:1px;opacity: 0.25"></div>
  63.             <div class="col-6">
  64.                 <div class="col-auto"> content </div>
  65.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> age </div>
  66.             </div>
  67.             <div class="col-6">
  68.                 <div class="col-auto"> content </div>
  69.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> birthday </div>
  70.             </div>
  71.             <div class="col-12 card border-0 muted my-3" style="background:#aa1212;height:1px;opacity: 0.25"></div>
  72.             <div class="col-6">
  73.                 <div class="col-auto"> content </div>
  74.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> ethnicity </div>
  75.             </div>
  76.             <div class="col-6">
  77.                 <div class="col-auto"> content </div>
  78.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> species </div>
  79.             </div>
  80.             <div class="col-12 card border-0 muted my-3" style="background:#aa1212;height:1px;opacity: 0.25"></div>
  81.             <div class="col-6">
  82.                 <div class="col-auto"> 0'0ft </div>
  83.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> height </div>
  84.             </div>
  85.             <div class="col-6">
  86.                 <div class="col-auto"> 000lbs </div>
  87.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> weight </div>
  88.             </div>
  89.             <div class="col-12 card border-0 muted my-3" style="background:#aa1212;height:1px;opacity: 0.25"></div>
  90.             <div class="col-6">
  91.                 <div class="col-auto"> #000 </div>
  92.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> masterlist </div>
  93.             </div>
  94.             <div class="col-6">
  95.                 <div class="col-auto">
  96.                     <!-- song link. replace 'e3v60CXHnTA' with your link. keep the 'embed' or it wont work -->
  97.                     <iframe allowfullscreen class="m-auto" frameborder="0" style="height:23px;width:30px;opacity:0.001;position:absolute;z-index:1000;" src="
  98.    
  99.             https://www.youtube.com/embed/e3v60CXHnTA
  100.    
  101.                     ">
  102.                  </iframe>
  103.                  <i class="far fa-music-alt"></i><i class="far fa-music-alt"></i>
  104.  
  105.                      </div>
  106.                 <div class="col-auto text-uppercase font-weight-bold" style="color: #aa1212;font-size:13px"> theme </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110. <!-- ABOUT END -->
  111.  
  112.     <div class="col-lg-6 px-3">
  113.         <div class="row no-gutters">
  114.            
  115.         <!-- BLURB -->
  116.         <div class="col-lg-12 text-justify mb-3 pr-2" style="height:200px;overflow:auto;">
  117.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  118.         </div>
  119.        
  120.         <!-- LIKES -->
  121.         <div class="col-6 text-justify pr-1">
  122.             <h2 class="text-uppercase p-1" style="font-size:1rem;letter-spacing:2px;background:#aa1212;color:#fff">
  123.                        <span>
  124.                         Likes</span>
  125.                 </h2>
  126.                 <hr class="my-2" style="border-top:#aa1212 3px solid;">
  127.                
  128.                 <div style="height:105px;overflow:auto;">
  129.                 <ul style="list-style-type:square;margin-left:-20px">
  130.                     <li>one</li>
  131.                     <li>two</li>
  132.                     <li>three</li>
  133.                     <li>four</li>
  134.                 </ul>
  135.                 </div>
  136.         </div>
  137.        
  138.         <!-- DISLIKES -->
  139.         <div class="col-6 text-justify pl-1">
  140.             <h2 class="text-uppercase p-1" style="font-size:1rem;letter-spacing:2px;background:#aa1212;color:#fff;">
  141.                        <span>
  142.                         Dislikes</span>
  143.                 </h2>
  144.                 <hr class="my-2" style="border-top:#aa1212 3px solid;">
  145.                
  146.                 <div style="height:105px;overflow:auto;">
  147.                 <ul style="list-style-type:square;margin-left:-20px">
  148.                     <li>one</li>
  149.                     <li>two</li>
  150.                     <li>three</li>
  151.                     <li>four</li>
  152.                 </ul>
  153.                 </div>
  154.         </div>
  155.        
  156.         </div>
  157.     </div>
  158.    
  159. <!-- MOODBOARD -->
  160.     <div class="col pr-3 hidden-sm-down">
  161.         <div style="height:77px;">
  162.             <!-- IMAGE ONE-->
  163.             <div class="img-thumbnail w-100 h-100 mb-1 rounded-0" style="border:2px solid #aa1212;">
  164.             <div class="w-100 h-100" style="background:url(https://i.scdn.co/image/ab67706c0000bebb67caff9cfcf5325e0d53a820);background-size:cover;background-position:top;"></div>
  165.                         </div>
  166.             <!-- IMAGE TWO-->
  167.             <div class="img-thumbnail w-100 h-100 my-1 rounded-0" style="border:2px solid #aa1212;">
  168.             <div class="w-100 h-100" style="background:url(https://i.scdn.co/image/ab67706c0000bebb67caff9cfcf5325e0d53a820);background-size:cover;background-position:center;"></div>
  169.                         </div>
  170.             <!-- IMAGE THREE-->
  171.             <div class="img-thumbnail w-100 h-100 my-1 rounded-0" style="border:2px solid #aa1212;">
  172.             <div class="w-100 h-100" style="background:url(https://i.scdn.co/image/ab67706c0000bebb67caff9cfcf5325e0d53a820);background-size:cover;background-position:center;"></div>
  173.                         </div>
  174.             <!-- IMAGE FOUR-->
  175.             <div class="img-thumbnail w-100 h-100 mt-1 rounded-0" style="border:2px solid #aa1212;">
  176.             <div class="w-100 h-100" style="background:url(https://i.scdn.co/image/ab67706c0000bebb67caff9cfcf5325e0d53a820);background-size:cover;background-position: center;"></div>
  177.                         </div>
  178.                     </div>
  179.                 </div>
  180. <!-- MOODBOARD END -->
  181. </div>
  182. </div>
  183.  
  184.  
  185.  
  186. <!-- DIVIDER/CREDIT -->
  187. <div class="d-flex px-3" style="margin: auto;">
  188.     <hr class="my-auto w-100" style="border-top: 2px solid #aa1212;">
  189.     <a href="/cherubix" class="tooltipster" title="code by cherubix">
  190.     <i class="far fa-bat px-3" style="color:#aa1212;font-size:1.5em"></i>
  191.     </a>
  192.     <hr class="my-auto w-100" style="border-top: 2px solid #aa1212;">
  193. </div>
  194.  
  195. </div>
  196.  
  197. </div>
  198.  
  199. </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!