API tools faq
paste
Advertisement
lullahbye

chunk (tabs)

lullahbye
Nov 23rd, 2020 (edited)
1,676
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.16 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3.  ========================================================
  4.  
  5.  code by Lullah
  6.  colors used:
  7.    > bg-primary (bootstrap; buttons, divider lines, bottom deco bar)
  8.    > bg-white (bootstrap; box background)
  9.    > text-white (bootstrap; header links)
  10.    > text-dark (bootstrap; box text)
  11.    > text-muted (bootstrap; credit link)
  12.  
  13.  You may...
  14.    > Edit this code to oblivion!
  15.    > Recycle parts for your own use!
  16.  
  17.  You may not...
  18.    > Remove my watermark!
  19.    
  20.  ========================================================
  21.  
  22. --->
  23.  
  24. <div class="container" style="max-width:800px">
  25.   <!-------------------------------NAVIGATION------------------------------------->
  26.   <!----I don't reccommend messing w these unless u know what ur doing---->
  27.     <div class="row no-gutters" style=";">
  28.     <div class="col-md-5"><ul class="nav nav-pills nav-justified" style="color:#837396;">
  29.    
  30.       <li class="nav-item">
  31.         <a class="rounded bg-primary text-white p-2 nav-link active mr-1 mb-2" data-toggle="tab"
  32.           href="#BASICS"><i class="fas fa-user fa-xs"></i></a></li>
  33.       <li class="nav-item">
  34.         <a class="rounded bg-primary text-white p-2 nav-link mx-1 mb-2" data-toggle="tab"
  35.           href="#BIOGRAPHY"><i class="fas fa-book-open fa-xs"></i></a></li>  
  36.       <li class="nav-item">
  37.         <a class="rounded bg-primary text-white p-2 nav-link mx-1 mb-2" data-toggle="tab"
  38.           href="#DETAILS"><i class="fas fa-list fa-xs"></i></a></li>
  39.       <li class="nav-item">
  40.         <a class="rounded bg-primary text-white p-2 nav-link mx-1 mb-2" data-toggle="tab"
  41.           href="#RELATIONSHIPS"><i class="fas fa-heart fa-xs"></i></a></li>
  42.       <li class="nav-item">
  43.         <a class="rounded bg-primary text-white p-2 nav-link ml-1 mb-2" data-toggle="tab"
  44.           href="#MOODBOARD"><i class="fas fa-camera fa-xs"></i></a></li>
  45.        
  46.     </ul></div>
  47.    
  48.     <!-------------------------------SONG QUOTE or just quote------------------------------------>
  49.     <!----if you want to leave this blank then ur gonna have to set the height of the div to 37px---->
  50.     <div class="col-md-7 pl-md-2 mb-2"><div class="w-100 rounded bg-primary p-2 text-center" style="height:;"><a class="text-white" style="font-size:0.9em;letter-spacing:0.5px;font-style:italic;"
  51.    
  52.    href="">
  53.         Cool lyrics or cool quotes here <i class="fas fa-music fa-xs"></i>
  54.        
  55.        
  56.     </a></div></div>
  57.    
  58.     </div>
  59.    
  60.     <!-------------------------------PROFILE CONTENT START------------------------------------->
  61.     <!----the sidebar image is a bit far down!!---->
  62.     <div class="row no-gutters">
  63.     <div class="col-md-7 mb-2">
  64.       <div class="tab-content rounded bg-white text-dark mr-md-2" style="height:400px; overflow:auto;">
  65.        
  66.       <!-------------------------------BASIC PROFILE------------------------------------->
  67.       <div class="tab-pane fade active show px-3 py-2" id="BASICS">
  68.            
  69.           <div class="text-uppercase" style="font-size:1.2em;letter-spacing:1px;font-weight:lighter;">Basics</div><hr class="mt-0 mb-1 bg-primary" style="background-color:#;">
  70.           <div class="px-2" style="font-size:0.85em;">
  71.               <div class="justify-content-between mb-1">
  72.                   <span>Name</span>
  73.                   <span>Info</span></div>
  74.               <div class="justify-content-between mb-1">
  75.                   <span>Nickname</span>
  76.                   <span>Info</span></div>
  77.               <div class="justify-content-between mb-1">
  78.                   <span>Age</span>
  79.                   <span>Info</span></div>
  80.               <div class="justify-content-between mb-1">
  81.                   <span>Pronouns</span>
  82.                   <span>Info</span></div>
  83.               <div class="justify-content-between mb-1">
  84.                   <span>Species</span>
  85.                   <span>Info</span></div>
  86.               <div class="justify-content-between mb-1">
  87.                   <span>Height</span>
  88.                   <span>Info</span></div>
  89.               <div class="justify-content-between mb-1">
  90.                   <span>Occupation</span>
  91.                   <span>Info</span></div>
  92.               <div class="justify-content-between mb-1">
  93.                   <span>Voice</span>
  94.                   <span><a href="" class="text-primary" style="color:;">Info</a></span></div>
  95.           </div>
  96.            
  97.           <div class="text-uppercase mt-1" style="font-size:1.2em;letter-spacing:1px;font-weight:lighter;">Summary</div><hr class="mt-0 mb-1 bg-primary" style="background-color:#;">
  98.           <div class="px-2" style="font-size:0.85em;">
  99.                 <div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  100.             </div>
  101.            
  102.       </div>
  103.       <!-------------------------------BIOGRAPHY------------------------------------->
  104.       <div class="tab-pane fade px-3 py-2" id="BIOGRAPHY">
  105.            
  106.           <div class="text-uppercase" style="font-size:1.2em;letter-spacing:1px;font-weight:lighter;">Personality Overview</div><hr class="mt-0 mb-1 bg-primary" style="background-color:#;">
  107.             <div class="px-2" style="font-size:0.85em;">
  108.             <div class="row">
  109.               <!----------------- PERSONALITY OVERVIEW (LEFT) ------------------>
  110.               <div class="col-md-6">
  111.                 <div class="justify-content-between mb-1">
  112.                   <span>Fitness</span>
  113.                   <span><i class="fas fa-circle fa-xs"></i>
  114.                         <i class="fas fa-circle fa-xs"></i>
  115.                         <i class="fas fa-circle fa-xs"></i>
  116.                         <i class="far fa-circle fa-xs"></i>
  117.                         <i class="far fa-circle fa-xs"></i></span></div>
  118.                 <div class="justify-content-between mb-1">
  119.                   <span>Patience</span>
  120.                   <span><i class="fas fa-circle fa-xs"></i>
  121.                         <i class="fas fa-circle fa-xs"></i>
  122.                         <i class="fas fa-circle fa-xs"></i>
  123.                         <i class="far fa-circle fa-xs"></i>
  124.                         <i class="far fa-circle fa-xs"></i></span></div>
  125.                 <div class="justify-content-between mb-1">
  126.                   <span>Moral</span>
  127.                   <span><i class="fas fa-circle fa-xs"></i>
  128.                         <i class="fas fa-circle fa-xs"></i>
  129.                         <i class="fas fa-circle fa-xs"></i>
  130.                         <i class="far fa-circle fa-xs"></i>
  131.                         <i class="far fa-circle fa-xs"></i></span></div>
  132.               </div>
  133.                 <!----------------- PERSONALITY OVERVIEW (RIGHT) ------------------>
  134.               <div class="col-md-6">
  135.                 <div class="justify-content-between mb-1">
  136.                   <span>Intelligence</span>
  137.                   <span><i class="fas fa-circle fa-xs"></i>
  138.                         <i class="fas fa-circle fa-xs"></i>
  139.                         <i class="fas fa-circle fa-xs"></i>
  140.                         <i class="far fa-circle fa-xs"></i>
  141.                         <i class="far fa-circle fa-xs"></i></span></div>
  142.                 <div class="justify-content-between mb-1">
  143.                   <span>Perception</span>
  144.                   <span><i class="fas fa-circle fa-xs"></i>
  145.                         <i class="fas fa-circle fa-xs"></i>
  146.                         <i class="fas fa-circle fa-xs"></i>
  147.                         <i class="far fa-circle fa-xs"></i>
  148.                         <i class="far fa-circle fa-xs"></i></span></div>
  149.                 <div class="justify-content-between mb-1">
  150.                   <span>Charisma</span>
  151.                   <span><i class="fas fa-circle fa-xs"></i>
  152.                         <i class="fas fa-circle fa-xs"></i>
  153.                         <i class="fas fa-circle fa-xs"></i>
  154.                         <i class="far fa-circle fa-xs"></i>
  155.                         <i class="far fa-circle fa-xs"></i></span></div>
  156.               </div>
  157.               </div>
  158.             </div>
  159.            
  160.           <div class="text-uppercase mt-1" style="font-size:1.2em;letter-spacing:1px;font-weight:lighter;">Preferences</div><hr class="mt-0 mb-1 bg-primary" style="background-color:#;">
  161.             <div class="px-2" style="font-size:0.85em;">
  162.             <div class="row">
  163.               <!----------------- LIKES (LEFT) ------------------>
  164.               <div class="col-md-6">
  165.                 <ul class="fa-ul mb-1">
  166.                   <li><span class="fa-li"><i class="fas fa-check-square"></i></span>one</li>
  167.                   <li><span class="fa-li"><i class="fas fa-check-square"></i></span>one</li>
  168.                   <li><span class="fa-li"><i class="fas fa-check-square"></i></span>one</li>
  169.                 </ul>
  170.               </div>
  171.               <!----------------- DISLIKES (RIGHT) ------------------>
  172.               <div class="col-md-6">
  173.                 <ul class="fa-ul mb-1">
  174.                   <li><span class="fa-li"><i class="fas fa-times-square"></i></span>one</li>
  175.                   <li><span class="fa-li"><i class="fas fa-times-square"></i></span>one</li>
  176.                   <li><span class="fa-li"><i class="fas fa-times-square"></i></span>one</li>
  177.                 </ul>
  178.               </div>
  179.                
  180.             </div>
  181.             </div>
  182.            
  183.           <div class="text-uppercase mt-1" style="font-size:1.2em;letter-spacing:1px;font-weight:lighter;">Trivia</div><hr class="mt-0 mb-1 bg-primary" style="background-color:#;">
  184.             <div class="px-2" style="font-size:0.85em;">
  185.               <!----------------- TRIVIA ------------------>
  186.               <ul class="mb-1 pl-3">
  187.                 <li>one</li>
  188.                 <li>one</li>
  189.                 <li>one</li>
  190.               </ul>
  191.             </div>
  192.            
  193.       </div>
  194.       <!-------------------------------CHARACTER NOTES/DETAILS------------------------------------->
  195.       <div class="tab-pane fade px-3 py-2" id="DETAILS">
  196.            
  197.           <div class="text-uppercase" style="font-size:1.2em;letter-spacing:1px;font-weight:lighter;">Design Notes</div><hr class="mt-0 mb-1 bg-primary" style="background-color:#;">
  198.             <div class="px-2" style="font-size:0.85em;">
  199.               <span style="0.9em">Please play attention to these details!</span>
  200.               <ul class="mb-1 pl-4">
  201.                 <li>one</li>
  202.                 <li>one</li>
  203.                 <li>one</li>
  204.               </ul>
  205.             </div>
  206.            
  207.           <div class="text-uppercase mt-1" style="font-size:1.2em;letter-spacing:1px;font-weight:lighter;">Key Items</div><hr class="mt-0 mb-1 bg-primary" style="background-color:#;">
  208.             <div class="px-2" style="font-size:0.85em;">
  209.               <span style="0.9em">Feel free to draw them with these items!</span>
  210.               <ul class="mb-1 pl-4">
  211.                 <li>one</li>
  212.                 <li>one</li>
  213.                 <li>one</li>
  214.               </ul>
  215.             </div>
  216.            
  217.       </div>
  218.       <!-------------------------------RELATIONSHIPS------------------------------------->
  219.       <!--- note that the descriptions will scroll but imo it looks better if it's not scrolled --->
  220.       <div class="tab-pane fade px-3 py-2" id="RELATIONSHIPS">
  221.        
  222.         <div class="row no-gutters">
  223.        
  224.         <!-------------- CHAR #1 (IMAGE) ---------------->
  225.         <div class="col-md-4 pr-md-2">
  226.           <div style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  227.                      background-size:cover;
  228.                      background-position:center;
  229.                      height:180px;"></div></div>
  230.         <!-------------- CHAR #1 (DESC) ---------------->      
  231.         <div class="col-md-8" style="height:180px;overflow:auto;"><div class="text-uppercase" style="letter-spacing:1px;font-weight:lighter;">
  232.           <!----name---->
  233.           <a href="" class="text-primary" style="color:#;">
  234.             Name</a></div><hr class="my-0 bg-primary" style="background-color:#;">
  235.           <!----status + hearts---->
  236.           <div class="justify-content-between text-uppercase mb-1" style="font-size:0.9em;letter-spacing:1px;font-weight:lighter;">
  237.             <span>Relationship</span>
  238.             <span><i class="fas fa-heart"></i>
  239.                   <i class="fas fa-heart"></i>
  240.                   <i class="fas fa-heart"></i>
  241.                   <i class="far fa-heart"></i>
  242.                   <i class="far fa-heart"></i></span></div>
  243.           <!----description---->
  244.           <div style="font-size:0.85em;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate."</div>
  245.         </div>  
  246.        
  247.         <!-------------- CHAR #2 (IMAGE) ---------------->
  248.         <div class="col-md-4 pr-md-2 mt-2">
  249.           <div style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  250.                      background-size:cover;
  251.                      background-position:center;
  252.                      height:180px;"></div></div>
  253.         <!-------------- CHAR #2 (DESC) ---------------->      
  254.         <div class="col-md-8 mt-2" style="height:180px;overflow:auto;">
  255.           <div class="text-uppercase" style="letter-spacing:1px;font-weight:lighter;">
  256.             <!----name---->
  257.             <a href="" class="text-primary" style="color:#;">
  258.             Name</a></div><hr class="my-0 bg-primary" style="background-color:#;">
  259.           <div class="justify-content-between text-uppercase mb-1" style="font-size:0.9em;letter-spacing:1px;font-weight:lighter;">
  260.             <!----status + hearts---->
  261.             <span>Relationship</span>
  262.             <span><i class="fas fa-heart"></i>
  263.                   <i class="fas fa-heart"></i>
  264.                   <i class="fas fa-heart"></i>
  265.                   <i class="far fa-heart"></i>
  266.                   <i class="far fa-heart"></i></span></div>
  267.           <!----description---->
  268.           <div style="font-size:0.85em;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</div>
  269.         </div>
  270.        
  271.         <!-------------- CHAR #3 (IMAGE) ---------------->
  272.         <div class="col-md-4 pr-md-2 mt-2">
  273.           <div style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  274.                      background-size:cover;
  275.                      background-position:center;
  276.                      height:180px;"></div></div>
  277.         <!-------------- CHAR #3 (DESC) ---------------->      
  278.         <div class="col-md-8 mt-2" style="height:180px;overflow:auto;">
  279.           <div class="text-uppercase" style="letter-spacing:1px;font-weight:lighter;">
  280.           <!----name---->
  281.           <a href="" class="text-primary" style="color:#;">
  282.             Name</a></div><hr class="my-0 bg-primary" style="background-color:#;">
  283.           <div class="justify-content-between text-uppercase mb-1" style="font-size:0.9em;letter-spacing:1px;font-weight:lighter;">
  284.             <!----status + hearts---->
  285.             <span>Relationship</span>
  286.             <span><i class="fas fa-heart"></i>
  287.                   <i class="fas fa-heart"></i>
  288.                   <i class="fas fa-heart"></i>
  289.                   <i class="far fa-heart"></i>
  290.                   <i class="far fa-heart"></i></span></div>
  291.           <!----description---->
  292.           <div style="font-size:0.85em;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.</div>
  293.         </div>
  294.        
  295.        
  296.         <!---add more above here!--->
  297.         </div>
  298.        
  299.       </div>
  300.       <!-------------------------------MOODBOARD------------------------------------->
  301.       <div class="tab-pane fade px-3 py-2" id="MOODBOARD">
  302.        
  303.         <div class="px-2" style=";">
  304.         <div class="row">
  305.           <div class="col-md-4"
  306.               style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80jpg);
  307.                      background-size:cover;
  308.                      background-position:center;
  309.                      height:192px;"></div>
  310.           <div class="col-md-4"
  311.               style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  312.                      background-size:cover;
  313.                      background-position:center;
  314.                      height:192px;"></div>
  315.           <div class="col-md-4"
  316.               style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  317.                      background-size:cover;
  318.                      background-position:center;
  319.                      height:192px;"></div>
  320.           <div class="col-md-4"
  321.               style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  322.                      background-size:cover;
  323.                      background-position:center;
  324.                      height:192px;"></div>
  325.           <div class="col-md-4"
  326.               style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  327.                      background-size:cover;
  328.                      background-position:center;
  329.                      height:192px;"></div>
  330.           <div class="col-md-4"
  331.               style="background-image:url(https://images.unsplash.com/photo-1529420705456-5c7e04dd043d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80);
  332.                      background-size:cover;
  333.                      background-position:center;
  334.                      height:192px;"></div>
  335.         </div>
  336.         </div>
  337.            
  338.       </div>
  339.        
  340.       </div>
  341.     </div>
  342.    
  343.     <!-------------------------------SIDE IMAGE------------------------------------->
  344.     <div class="col-md-5 mb-2 rounded"
  345.         style="background-image:url(https://images.unsplash.com/photo-1496737018672-b1a6be2e949c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1191&q=80);
  346.                background-position:center;
  347.                background-size:cover;
  348.                height:400px;">
  349.                    
  350.     </div>
  351.     </div>
  352.    
  353.      <!-------------------------------BOTTOM BAR (decoration)------------------------------------->
  354.      <!----if you know how to do bootstrap grids u can alter this to whatever!------>
  355.      <!----if you want to remove this then ur gonna have to adjust the 2 divs above (remove the mb-2) so my credit doesn't float off---->
  356.     <div class="row no-gutters">
  357.       <div class="col-md-12 rounded bg-primary" style="background-color:#;height:37px;"></div>
  358.     </div>
  359.    
  360.     <!-------------------------------CREDIT------------------------------------->
  361.     <div class="text-right">
  362.       <a class="tooltipster text-muted" title="code by Lullah" href="lullah"><i class="fas fa-paw fa-xs"></i></a>
  363.     </div>
  364. </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!