API tools faq
paste
Advertisement
ooter

Shortass

ooter
Dec 18th, 2019
2,503
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.94 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------
  2.  
  3.     shortass by bakuqou
  4.  
  5.      accent: #e44c4c
  6.  
  7.           basics
  8.  - use off wysiwyg
  9.  - pull it apart idc
  10.  - dont profit of it, its free
  11.  - drink water
  12.  
  13. - stats code by ovob - box on rox
  14.  im lazy and it was perf anyway
  15.  
  16. -------------------------------->
  17. <div class="card mx-auto my-auto border-0" style="font-size:12px;max-width:700px;">
  18.  
  19.     <div class="row no-gutters py-2">
  20.  
  21.         <!----- right content ------>
  22.         <div class="col-sm-4 p-1 text-center" style="margin-top:-12px;">
  23.             <i class="fad fa-crown fa-5x pull-left p-0" style="transform: rotate(-25deg);margin-left:-20px;z-index:9;color: #e44c4c;"></i>
  24.             <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5420349?1574484362" class="img-thumbnail rounded-0 w-100" style="margin-top:-25px;">
  25.         </div>
  26.  
  27.         <!----- left content ------>
  28.         <div class="col-sm-6 p-1">
  29.             <div class="card rounded-0 bg-faded mt-lg-4 p-1" style="height:224px;overflow:auto;">
  30.                 <div class="tab-content">
  31.  
  32.                     <!----- tab 1 ----->
  33.                     <div class="tab-pane fade active show" id="tab1">
  34.                         <!---- title ---->
  35.                         <h1 class="text-uppercase p-1 display-4 font-weight-bold mb-1" style="font-size:14px;letter-spacing:2px;background:#e44c4c;border-bottom:2px dashed;">Kai</h1>
  36.  
  37. <!-------------------------------------------------
  38.  
  39.                S T A T S
  40.                
  41.            credit to ovob
  42.            box on the rox
  43.  
  44. -------------------------------------------------->
  45.                         <div class="row no-gutters">
  46.                             <div class="col-sm">
  47.  
  48.                                 <div class="d-flex">
  49.                                     <span class="w-50 p-1 text-uppercase text-muted" style="letter-spacing:1px;">Name</span>
  50.                                     <span class="w-50 p-1 text-right">info</span>
  51.                                 </div>
  52.  
  53.                                 <div class="d-flex">
  54.                                     <span class="w-50 p-1 text-uppercase text-muted" style="letter-spacing:1px;">Species</span>
  55.                                     <span class="w-50 p-1 text-right">info</span>
  56.                                 </div>
  57.  
  58.                                 <div class="d-flex">
  59.                                     <span class="w-50 p-1 text-uppercase text-muted" style="letter-spacing:1px;">Age</span>
  60.                                     <span class="w-50 p-1 text-right">info</span>
  61.                                 </div>
  62.  
  63.                                 <div class="d-flex">
  64.                                     <span class="w-50 p-1 text-uppercase text-muted" style="letter-spacing:1px;">Gender</span>
  65.                                     <span class="w-50 p-1 text-right">info</span>
  66.                                 </div>
  67.  
  68.                                 <div class="d-flex">
  69.                                     <span class="w-50 p-1 text-uppercase text-muted" style="letter-spacing:1px;">Pronouns</span>
  70.                                     <span class="w-50 p-1 text-right">info</span>
  71.                                 </div>
  72.  
  73.                                 <div class="d-flex mb-0">
  74.                                     <span class="w-50 p-1 text-uppercase text-truncate text-muted" style="letter-spacing:1px;">Sexuality</span>
  75.                                     <span class="w-50 p-1 text-right">info</span>
  76.                                 </div>
  77.  
  78.                                 <div class="d-flex">
  79.                                     <span class="w-50 p-1 text-uppercase text-muted" style="letter-spacing:1px;">Theme</span>
  80.                                     <a href="SONG_LINK" class="w-50 p-1 text-right" style="color:#e44c4c">info</a>
  81.                                 </div>
  82.  
  83.                             </div>
  84.                             <div class="col-auto p-2 hidden-xs-down">
  85.                                 <div class="card h-100 rounded-0" style="border-width:0 1px 0 0"></div>
  86.                             </div>
  87.                            
  88.                             <!------------------------
  89.                            
  90.                                    RIGHT SIDE  
  91.                                  change the 50%
  92.                            
  93.                            -------------------------->
  94.                             <div class="col-sm">
  95.  
  96.                                 <hr class="hidden-sm-up" style="margin:14px 4px;">
  97.  
  98.                                 <div class="d-flex">
  99.                                     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Intelligence</span>
  100.                                     <div class="w-50 mx-1 progress my-auto rounded-0" style="height:4px;">
  101.                                         <div class="progress-bar" style="
  103.                                          width: 50%;
  104.                                    
  105.                                          background:#e44c4c;"></div>
  106.                                     </div>
  107.                                 </div>
  108.  
  109.                                 <div class="d-flex">
  110.                                     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Creativity</span>
  111.                                     <div class="w-50 mx-1 progress my-auto rounded-0" style="height:4px">
  112.                                         <div class="progress-bar" style="
  113.                                    
  114.                                          width: 50%;
  115.                                    
  116.                                          background:#e44c4c;"></div>
  117.                                     </div>
  118.                                 </div>
  119.  
  120.                                 <div class="d-flex">
  121.                                     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Creativity</span>
  122.                                     <div class="w-50 mx-1 progress my-auto rounded-0" style="height:4px">
  123.                                         <div class="progress-bar" style="
  124.                                    
  125.                                          width: 50%;
  126.                                    
  127.                                          background:#e44c4c;"></div>
  128.                                     </div>
  129.                                 </div>
  130.  
  131.                                 <div class="d-flex">
  132.                                     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Confidence</span>
  133.                                     <div class="w-50 mx-1 progress my-auto rounded-0" style="height:4px">
  134.                                         <div class="progress-bar" style="
  135.                                        
  136.                                         width: 50%;
  137.                                            
  138.                                                  background:#e44c4c;"></div>
  139.                                     </div>
  140.                                 </div>
  141.  
  142.                                 <div class="d-flex">
  143.                                     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Humor</span>
  144.                                     <div class="w-50 mx-1 progress my-auto rounded-0" style="height:4px">
  145.                                         <div class="progress-bar" style="
  147.                                         width: 50%;
  148.                                    
  149.                                         background:#e44c4c;"></div>
  150.                                     </div>
  151.                                 </div>
  152.  
  153.                                 <div class="d-flex">
  154.                                     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Empathy</span>
  155.                                     <div class="w-50 mx-1 progress my-auto rounded-0" style="height:4px">
  156.                                         <div class="progress-bar" style="
  158.                                         width: 50%;
  159.                                    
  160.                                        background:#e44c4c;"></div>
  161.                                     </div>
  162.                                 </div>
  163.  
  164.                                 <div class="d-flex mb-0">
  165.                                     <span class="w-50 p-1 text-truncate text-uppercase text-muted">Charisma</span>
  166.                                     <div class="w-50 mx-1 progress my-auto rounded-0" style="height:4px">
  167.                                         <div class="progress-bar" style="
  169.                                         width: 50%;
  170.                                    
  171.                                         background:#e44c4c;"></div>
  172.                                     </div>
  173.                                 </div>
  174.  
  175.                             </div>
  176.                         </div>
  177.  
  178.                     </div>
  179.  
  180. <!-------------------------------------------------
  181.  
  182.                S T O R Y
  183.  
  184. -------------------------------------------------->
  185.                     <div class="tab-pane fade text-justify" id="tab2">
  186.                         <!---- title ---->
  187.                         <h1 class="text-uppercase p-1 display-4 font-weight-bold mb-1" style="font-size:14px;letter-spacing:2px;background:#e44c4c;border-bottom:2px dashed;">Story</h1>
  188.  
  189.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper rutrum consequat. Proin at nisl pretium, viverra sapien vel, iaculis tortor. Nulla fringilla lacus nec arcu sagittis facilisis. Nulla luctus vestibulum aliquam. Proin ac gravida ante. Aenean sagittis arcu at nisi posuere, in cursus orci interdum. Vivamus malesuada libero eros, eu sodales lacus consectetur in. Nam accumsan pulvinar elit, non interdum quam rutrum non. Suspendisse aliquet, mi non pellentesque rhoncus, sem erat consectetur erat, ultricies scelerisque magna leo at eros. Suspendisse ac lacus diam. Quisque feugiat malesuada risus a accumsan. Fusce neque orci, efficitur at sagittis quis, cursus et nunc. Aliquam interdum aliquam auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  190.  
  191.                         <!--------- divider ------------>
  192.                         <h3 class="text-lowercase text-right py-2 display-4" style="font-size:15px;letter-spacing:2px; border-bottom:1px solid #aaa;">Present</h3>
  193.  
  194.                         <p>Nunc accumsan, dui a tempus efficitur, nisl quam faucibus nulla, ac ultricies ipsum eros ac lorem. Maecenas mollis et turpis ut interdum. Vestibulum et diam at felis maximus hendrerit et tincidunt elit. Praesent eu lorem at nulla pharetra sagittis sed eu turpis. Integer tincidunt mi ac nulla sagittis ullamcorper. Nam tincidunt libero orci, vel dictum nunc sodales sit amet. Proin nibh orci, suscipit vitae arcu id, fermentum blandit neque. Vestibulum nunc lacus, laoreet quis mauris quis, viverra porta felis. Integer ultrices iaculis venenatis.</p>
  195.  
  196.                     </div>
  197.  
  198. <!-------------------------------------------------
  199.  
  200.            H E A D C A N O N S
  201.  
  202. -------------------------------------------------->
  203.                     <div class="tab-pane fade" id="tab3">
  204.                         <!---- title ---->
  205.                         <h1 class="text-uppercase p-1 display-4 font-weight-bold mb-1" style="font-size:14px;letter-spacing:2px;background:#e44c4c;border-bottom:2px dashed;">Headcanons</h1>
  206.  
  207.                         <ul style="margin-left:-15px;">
  208.                             <li>Item.</li>
  209.                             <li>Item.</li>
  210.                             <li>Headcanon.
  211.  
  212.                                 <ul style="margin-left:-15px;">
  213.                                     <li>Sub-Item.</li>
  214.                                 </ul>
  215.                             </li>
  216.                             <li>Item.</li>
  217.                             <li>Item.</li>
  218.                         </ul>
  219.  
  220.                     </div>
  221.  
  222. <!-------------------------------------------------
  223.  
  224.        R E L A T I O N S H I P S
  225.  
  226. -------------------------------------------------->
  227.                     <div class="tab-pane fade" id="tab4">
  228.                         <!---- title ---->
  229.                         <h1 class="text-uppercase p-1 display-4 font-weight-bold mb-1" style="font-size:14px;letter-spacing:2px;background:#e44c4c;border-bottom:2px dashed;">Relationships</h1>
  230.  
  231.                         <!------- relationship 1 --------->
  232.                         <div class="row no-gutters">
  233.  
  234.                             <div class="col-4 p-1">
  235.  
  236.                                 <!--- img // make it square ---->
  237.                                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5420349?1574484362" class="img-thumbnail rounded-0">
  238.  
  239.                             </div>
  240.  
  241.                             <div class="col-8 p-1 text-muted">
  242.                                 <a href="#" style="color:#e44c4c">Character</a>
  243.                                 <hr class="my-0"> A few words about them.
  244.                             </div>
  245.  
  246.                         </div>
  247.  
  248.                         <!------- relationship 2 --------->
  249.                         <div class="row no-gutters">
  250.  
  251.                             <div class="col-4 p-1">
  252.  
  253.                                 <!--- img // make it square ---->
  254.                                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5420349?1574484362" class="img-thumbnail rounded-0">
  255.  
  256.                             </div>
  257.  
  258.                             <div class="col-8 p-1 text-muted">
  259.                                 <a href="#" style="color:#e44c4c">Character</a>
  260.                                 <hr class="my-0"> A few words about them.
  261.                             </div>
  262.  
  263.                         </div>
  264.  
  265.                         <!------- PASTE ANY MORE RELATIONSHIPS ABOVE HERE --------->
  266.  
  267.                     </div>
  268.  
  269. <!-------------------------------------------------
  270.  
  271.               M U S I C
  272.  
  273. -------------------------------------------------->
  274.                     <div class="tab-pane fade" id="tab5">
  275.                         <!---- title ---->
  276.                         <h1 class="text-uppercase p-1 display-4 font-weight-bold mb-1" style="font-size:14px;letter-spacing:2px;background:#e44c4c;border-bottom:2px dashed;">Music</h1>
  277.                         <div class="row no-gutters">
  278.                             <div class="col-lg-2 hidden-md-down p-1">
  279.                                
  280.                                 <!------- playlist // this hides on mobile -------->
  281.                                 <a class="btn btn-outline-secondary tooltipster rounded-circle mx-auto text-white py-3 melody-embed" style="position:relative;height:65px;width:65px;">
  282.                                    
  283.                                    
  284.                                     <!-------
  285.                                    
  286.                                    the playlist
  287.                                    
  288.                                    change the PLAYLIST_ID to
  289.                                    your own playlist ID
  290.                                    
  291.                                    example: http://prntscr.com/qcfozd
  292.                                    
  293.                                    ------------>
  294.                                       <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100 mb-4" src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID&amp;showinfo=0" frameborder="0"></iframe>
  295.                                       <i class="fas fa-play fa-fw fa-2x" style="margin-top:3px;"></i>
  296.                                       </a>
  297.  
  298.                             </div>
  299.                             <div class="col-lg-10 p-1">
  300.                                 <ul class="text-muted mt-lg-2" style="list-style-type:none;letter-spacing:2px;margin-left:-15px;height:153px;overflow:auto;">
  301.  
  302.                                     <li class="font-weight-bold text-uppercase">Playlist Name</li>
  303.                                     <hr class="p-0 mb-2 mt-0">
  304.  
  305.                                     <!----- playlist songs ----->
  306.                                     <!------>
  307.                                     <li><b>Song</b> - Artist Name</li>
  308.                                     <!------>
  309.                                     <li><b>Song</b> - Artist Name</li>
  310.                                     <!------>
  311.                                     <li><b>Song</b> - Artist Name</li>
  312.                                     <!------>
  313.                                     <li><b>Song</b> - Artist Name</li>
  314.                                     <!------>
  315.                                     <li><b>Song</b> - Artist Name</li>
  316.                                     <!------>
  317.                                     <li><b>Song</b> - Artist Name</li>
  318.                                     <!------>
  319.                                     <li><b>Song</b> - Artist Name</li>
  320.                                     <!------>
  321.                                     <li><b>Song</b> - Artist Name</li>
  322.                                     <!------>
  323.                                     <li><b>Song</b> - Artist Name</li>
  324.  
  325.                                     <!---- add more before this line ---->
  326.                                 </ul>
  327.  
  328.                             </div>
  329.  
  330.                         </div>
  331.  
  332.                     </div>
  333.  
  334. <!-------------------------------------------------
  335.  
  336.                M I S C.
  337.  
  338. -------------------------------------------------->
  339.                     <div class="tab-pane fade" id="tab6">
  340.                         <!---- title ---->
  341.                         <h1 class="text-uppercase p-1 display-4 font-weight-bold mb-1" style="font-size:14px;letter-spacing:2px;background:#e44c4c;border-bottom:2px dashed;">Misc.</h1>
  342.  
  343.                         <ul class="mb-1" style="margin-left:-15px;">
  344.                             <li>Design Note</li>
  345.                             <li>Design Note</li>
  346.                             <li>Design Note
  347.  
  348.                                 <ul style="margin-left:-15px;">
  349.                                     <li>Comment on above design note.</li>
  350.                                 </ul>
  351.                             </li>
  352.                             <li>Item.</li>
  353.                             <li>Item.</li>
  354.                         </ul>
  355.                         <hr class="my-1">
  356.                         <p class="text-justify">I personally use stuff like this to let artists know what outfits to draw the character in, what not to skip, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper rutrum consequat. Proin at nisl pretium, viverra sapien vel, iaculis tortor. Nulla fringilla lacus nec arcu sagittis facilisis. Nulla luctus vestibulum aliquam. Proin ac gravida ante.</p>
  357.  
  358.                     </div>
  359.  
  360.                 </div>
  361.             </div>
  362.         </div>
  363.  
  364. <!-------------------------------------------------
  365.  
  366.            N A V I G A T I O N
  367.  
  368. -------------------------------------------------->
  369.         <div class="col-sm-2 p-1">
  370.             <div class="card rounded-0 border-0 mt-lg-4 text-center" style="height:224px;">
  371.                 <ul class="nav nav-tabs row card-header-tabs">
  372.  
  373.                     <!----- btn 1 ----->
  374.                     <li class="col-12 mb-1">
  375.                         <a data-toggle="tab" href="#tab1" class="btn btn-outline-secondary d-flex rounded-0 text-white border-0" style="background: #e44c4c;">
  376.  
  377.                             <i class="fal fa-bars text-white"></i>
  378.                         </a>
  379.                     </li>
  380.  
  381.                     <!----- btn 2 ----->
  382.                     <li class="col-12 mb-1">
  383.  
  384.                         <a data-toggle="tab" href="#tab2" class="btn btn-outline-secondary d-flex rounded-0 text-white border-0" style="background: #e44c4c;">
  385.  
  386.                             <i class="fal fa-books text-white"></i>
  387.                         </a>
  388.                     </li>
  389.  
  390.                     <!----- btn 3 ----->
  391.                     <li class="col-12 mb-1">
  392.                         <a data-toggle="tab" href="#tab3" class="btn btn-outline-secondary d-flex rounded-0 text-white border-0" style="background: #e44c4c;">
  393.  
  394.                             <i class="fal fa-lightbulb text-white"></i>
  395.                         </a>
  396.  
  397.                     </li>
  398.  
  399.                     <!----- btn 4 ----->
  400.                     <li class="col-12 mb-1">
  401.  
  402.                         <a data-toggle="tab" href="#tab4" class="btn btn-outline-secondary d-flex rounded-0 text-white border-0" style="background: #e44c4c;">
  403.  
  404.                             <i class="fal fa-heart text-white"></i>
  405.                         </a>
  406.  
  407.                     </li>
  408.  
  409.                     <!----- btn 5 ----->
  410.                     <li class="col-12 mb-1">
  411.  
  412.                         <a data-toggle="tab" href="#tab5" class="btn btn-outline-secondary d-flex rounded-0 text-white border-0" style="background: #e44c4c;">
  413.  
  414.                             <i class="fal fa-list-music text-white"></i>
  415.                         </a>
  416.  
  417.                     </li>
  418.  
  419.                     <!----- btn 6 ----->
  420.                     <li class="col-12 mb-1">
  421.  
  422.                         <a data-toggle="tab" href="#tab6" class="btn btn-outline-secondary d-flex rounded-0 text-white border-0" style="background: #e44c4c;">
  423.  
  424.                             <i class="fal fa-star text-white"></i>
  425.                         </a>
  426.  
  427.                     </li>
  428.  
  429.                     <!----- btn 4 ----->
  430.                     <li class="col-12 mb-0">
  431.  
  432.                         <div class="card text-left rounded-0 text-muted text-lowercase px-2" style="padding-top:1px;padding-bottom:2px;font-size:10px;">
  433.                             <a href="https://toyhou.se/5601415.short-ass" class="text-muted">Code</a>
  434.                         </div>
  435.  
  436.                     </li>
  437.  
  438.                 </ul>
  439.  
  440.             </div>
  441.  
  442.         </div>
  443.  
  444.     </div>
  445. </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!