API tools faq
paste
Advertisement
rosiuel

WYTMIPTWTHRHM(tabbed)

rosiuel
Oct 31st, 2021
166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.00 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. WYTMIPTWTHRHM(tabbed)
  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 id="page1" class="tab-pane fade active show 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. <div id="page2" class="tab-pane fade mt-2" style="height:366px;overflow:auto">
  185. <div class="row no-gutters">
  186.  
  187. <!-- BACKSTORY -->
  188.     <div class="col-lg-7 text-justify px-3">
  189.             <h2 class="text-uppercase p-2 text-center" style="font-size:1rem;letter-spacing:2px;background:#aa1212;color:#fff;">
  190.                        <span>
  191.                         Backstory</span>
  192.                 </h2>
  193.                 <hr class="my-2" style="border-top:#aa1212 3px solid;">
  194.                
  195.                 <div style="height:300px;overflow:auto;">
  196.                 <p>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.</p>
  197.                 <p>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.</p>
  198.                 <p>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.</p>
  199.                 <p>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.</p>
  200.                 </div>
  201.         </div>
  202. <!-- BACKSTORY END -->
  203.  
  204. <div class="col">
  205. <!-- PERSONALITY -->
  206.     <div class="col-lg text-justify pr-3 pl-1 mb-3">
  207.             <h2 class="text-uppercase p-1 text-center" style="font-size:1rem;letter-spacing:2px;background:#aa1212;color:#fff;">
  208.                        <span>
  209.                         Personality</span>
  210.                 </h2>
  211.                 <hr class="my-2" style="border-top:#aa1212 3px solid;">
  212.                
  213.                 <div class="pr-2" style="height:120px;overflow:auto;">
  214.                 <p>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.</p>
  215.                 </div>
  216.         </div>
  217. <!-- PERSONALITY END -->
  218.  
  219. <!-- TRIVIA -->
  220.     <div class="col-lg text-justify pr-3 pl-1">
  221.             <h2 class="text-uppercase p-1 text-center" style="font-size:1rem;letter-spacing:2px;background:#aa1212;color:#fff;">
  222.                        <span>
  223.                         Trivia</span>
  224.                 </h2>
  225.                 <hr class="my-2" style="border-top:#aa1212 3px solid;">
  226.                
  227.                 <div class="pr-2" style="height:130px;overflow:auto;">
  228.                 <ul style="list-style-type:square;margin-left:-20px">
  229.                     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  230.                     <li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
  231.                     <li> Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
  232.                     <li>Duis porta eros et velit blandit dapibus. </li>
  233.                     <li>Curabitur ac finibus eros.</li>
  234.                     <li>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
  235.                 </ul>
  236.                 </div>
  237.         </div>
  238. <!-- TRIVIA END -->
  239. </div>
  240.  
  241. </div>
  242. </div>
  243.  
  244. <div id="page3" class="tab-pane fade mt-2" style="height:366px;overflow:auto">
  245.     <!-- CHARACTER ONE -->
  246.     <div class="row no-gutters mb-3">
  247.         <div class="col-2 pl-3">
  248.             <!-- CHARACTER ICON -->
  249.                 <img class="rounded-circle img-thumbnail" style="height:110px;width:110px;border:2px solid #aa1212;"
  250.                src="https://cdn.discordapp.com/attachments/852252391003652117/904262879874805770/image0.png">
  251.         </div>
  252.         <div class="col px-3 text-justify">
  253.             <h2 class="text-uppercase p-1 justify-content-between" style="font-size:0.9rem;letter-spacing:2px;background:#aa1212;color:#fff;">
  254.                        <a href="CHAR_LINK" style="color:#fff">
  255.                         Name</a>
  256.                         <span>
  257.                             <!-- far is empty, fas is solid -->
  258.                             <i class="fas fa-heart"></i>
  259.                             <i class="fas fa-heart"></i>
  260.                             <i class="fas fa-heart"></i>
  261.                             <i class="far fa-heart"></i>
  262.                             <i class="far fa-heart"></i>
  263.                         </span>
  264.                 </h2>
  265.                 <hr class="my-1" style="border-top:#aa1212 3px solid;">
  266.             <div class="pr-2" style="height:70px;overflow:auto;">
  267.             <p>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.</p>
  268.             </div>
  269.         </div>
  270.     </div>
  271.     <!-- CHARACTER TWO -->
  272.     <div class="row no-gutters mb-3">
  273.         <div class="col-2 pl-3 order-2">
  274.             <!-- CHARACTER ICON -->
  275.                 <img class="rounded-circle img-thumbnail" style="height:110px;width:110px;border:2px solid #aa1212;"
  276.                src="https://cdn.discordapp.com/attachments/852252391003652117/904262879874805770/image0.png">
  277.         </div>
  278.         <div class="col px-3 text-justify">
  279.             <h2 class="text-uppercase p-1 justify-content-between" style="font-size:0.9rem;letter-spacing:2px;background:#aa1212;color:#fff;">
  280.                        <a href="CHAR_LINK" style="color:#fff">
  281.                         Name</a>
  282.                         <span>
  283.                             <i class="fas fa-heart"></i>
  284.                             <i class="fas fa-heart"></i>
  285.                             <i class="fas fa-heart"></i>
  286.                             <i class="far fa-heart"></i>
  287.                             <i class="far fa-heart"></i>
  288.                         </span>
  289.                 </h2>
  290.                 <hr class="my-1" style="border-top:#aa1212 3px solid;">
  291.             <div class="pr-2" style="height:70px;overflow:auto;">
  292.             <p>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.</p>
  293.             </div>
  294.         </div>
  295.     </div>
  296.     <!-- CHARACTER THREE -->
  297.     <div class="row no-gutters">
  298.         <div class="col-2 pl-3">
  299.             <!-- CHARACTER ICON -->
  300.                 <img class="rounded-circle img-thumbnail" style="height:110px;width:110px;border:2px solid #aa1212;"
  301.                src="https://cdn.discordapp.com/attachments/852252391003652117/904262879874805770/image0.png">
  302.         </div>
  303.         <div class="col px-3 text-justify">
  304.             <h2 class="text-uppercase p-1 justify-content-between" style="font-size:0.9rem;letter-spacing:2px;background:#aa1212;color:#fff;">
  305.                        <a href="CHAR_LINK" style="color:#fff">
  306.                         Name</a>
  307.                         <span>
  308.                             <i class="fas fa-heart"></i>
  309.                             <i class="fas fa-heart"></i>
  310.                             <i class="fas fa-heart"></i>
  311.                             <i class="far fa-heart"></i>
  312.                             <i class="far fa-heart"></i>
  313.                         </span>
  314.                 </h2>
  315.                 <hr class="my-1" style="border-top:#aa1212 3px solid;">
  316.             <div class="pr-2" style="height:70px;overflow:auto;">
  317.             <p>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.</p>
  318.             </div>
  319.         </div>
  320.     </div>
  321. </div>
  322.  
  323. </div>
  324.  
  325. <!-- NAV BUTTONS -->
  326. <div class="container mt-2 mx-3" style="background:#aa1212;">
  327.         <ul class="nav row no-gutters justify-content-around text-center text-uppercase" style="letter-spacing:3px;">
  328.             <li class="nav-item col-lg-auto">
  329.             <a class="nav-link active" style="color:#EEF5F7;" data-toggle="tab" href="#page1"><i class="fal fa-user"></i></a>
  330.             </li>
  331.             <li class="nav-item col-lg-auto">
  332.             <a class="nav-link" style="color:#fff;" data-toggle="tab" href="#page2"><i class="fal fa-book-open"></i></a>
  333.             </li>
  334.             <li class="nav-item col-lg-auto">
  335.             <a class="nav-link" style="color:#fff;" data-toggle="tab" href="#page3"><i class="fal fa-heart"></i></a>
  336.             </li>
  337.             <li class="nav-item col-lg-auto">
  338.             <a class="nav-link tooltipster" title="code by cherubix" style="color:#fff;" href="/cherubix"><i class="fal fa-code"></i></a>
  339.             </li>
  340.         </ul>
  341. </div>
  342. <!-- NAV BUTTONS END -->
  343.  
  344. </div>
  345.  
  346. </div>
  347.  
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!