API tools faq
paste
Advertisement
lullahbye

canary (tabs)

lullahbye
Nov 12th, 2020 (edited)
954
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.72 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3.  ========================================================
  4.  
  5.  code by Lullah
  6.  colors used:
  7.    > primary (bootstrap)
  8.    > #fff (whites; title text and box background)
  9.    > #474243 (very dark grey; text)
  10.  
  11.  You may...
  12.    > Edit this code to oblivion!
  13.    > Recycle parts for your own use!
  14.  
  15.  You may not...
  16.    > Remove my watermark!
  17.    
  18.  ========================================================
  19.  
  20. --->
  21.  
  22. <div class="container" style="max-width:850px;">
  23.   <ul class="nav" style=";">
  24.     <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#BASICS"><i class="fas fa-id-card"></i></a></li>
  25.     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#DETAILS"><i class="fas fa-list"></i></a></li>
  26.     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#RELATIONSHIPS"><i class="fas fa-heart"></i></a></li>
  27.   </ul>
  28.  
  29.   <div class="rounded-top bg-primary px-3 py-2" style="color:#fff;">
  30.     <!-- Name, quote, or trait / trait / trait-->
  31.     <i class="fas fa-dove mr-2"></i><span style="font-size:13px;letter-spacing:2px;">
  32.       NAME
  33.     </span></div>
  34.  
  35. <div class="tab-content">  
  36.     <!---------------- BASICS ------------------>
  37.   <div class="tab-pane fade active show" id="BASICS">
  38.   <div class="row no-gutters" style="background-color:#fff;color:#474243">  
  39.     <!---- BASICS focal image ---->
  40.   <div class="col-md-3"
  41.         style="background-image:url(https://images.unsplash.com/photo-1506079478915-3f458c5077a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);background-size:cover;">
  42.     </div>
  43.        
  44.   <div class="col-md-9 px-4 py-3" style="height:400px;overflow:auto;">
  45.     <div class="">
  46.       <span class="text-primary" style="letter-spacing:1px">BASICS</span><hr class="m-auto bg-primary">
  47.     </div>
  48.   <div class="row mt-2" style="font-size:13px;">
  49.     <!---------- BASIC PROFILE (left row) ------------>
  50.     <!---if any of these breaks, change the <hr class="w-75"> 75 value to either 25 or 50!--->
  51.     <div class="col-md-6">
  52.       <div class="justify-content-between">
  53.         <span>Name</span><hr class="w-75 mb-2 bg-primary">
  54.         <span>Info</span>
  55.       </div>
  56.       <div class="justify-content-between">
  57.         <span>Nickname</span><hr class="w-75 mb-2 bg-primary">
  58.         <span>Info</span>
  59.       </div>
  60.       <div class="justify-content-between">
  61.         <span>Age</span><hr class="w-75 mb-2 bg-primary">
  62.         <span>Info</span>
  63.       </div>
  64.       <div class="justify-content-between">
  65.         <span>Pronouns</span><hr class="w-75 mb-2 bg-primary">
  66.         <span>Info</span>
  67.       </div>
  68.       <div class="justify-content-between">
  69.         <span>Height</span><hr class="w-75 mb-2 bg-primary">
  70.         <span>Info</span>
  71.       </div>
  72.     </div>
  73.       <!---------- BASIC PROFILE (right row) ------------>
  74.     <div class="col-md-6">
  75.       <div class="justify-content-between">
  76.         <span>Species</span><!--alt: ethnicity--><hr class="w-75 mb-2 bg-primary">
  77.         <span>Info</span>
  78.       </div>
  79.       <div class="justify-content-between">
  80.         <span>Sexuality</span><!--alt: bday or zodiac or mbti--><hr class="w-75 mb-2 bg-primary">
  81.         <span>Info</span>
  82.       </div>
  83.       <div class="justify-content-between">
  84.         <span>Occupation</span><hr class="w-75 mb-2 bg-primary">
  85.         <span>Info</span>
  86.       </div>
  87.       <div class="justify-content-between">
  88.         <span>Theme</span><hr class="w-75 mb-2 bg-primary">
  89.         <span><a href="" class="text-primary">click!</a></span></span>
  90.       </div>
  91.       <div class="justify-content-between">
  92.         <span>Voice</span><hr class="w-75 mb-2 bg-primary">
  93.         <span><a href="" class="text-primary">click!</a></span></span>
  94.       </div>
  95.     </div>
  96.    
  97.   </div>
  98.          
  99.     <div class="mt-2">
  100.       <span class="text-primary" style="letter-spacing:1px">SUMMARY</span><hr class="m-auto bg-primary">
  101.       <!---------- SUMMARY ------------>
  102.       <p class="pt-2" style="font-size:13px;">"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."</p>
  103.     </div>
  104.     <div class="p-1"></div>
  105.     </div>
  106.     </div>
  107.     </div>
  108.    
  109.     <!---------------- DETAILS ------------------>
  110.   <div class="tab-pane fade" id="DETAILS">
  111.   <div class="row no-gutters" style="background-color:#fff;color:#474243">
  112.  
  113.   <div class="col-md-9 px-4 py-3" style="height:400px;overflow:auto;">
  114.     <div class="mb-2 px-2">
  115.     <!---------- DESIGN NOTES ------------>
  116.     <span class="text-primary" style="letter-spacing:1px">DESIGN NOTES</span><hr class="m-auto bg-primary">
  117.     <p class="pt-2" style="font-size:13px;">Please pay attention to the following details!</p>
  118.     <!--add class="pt-2" to the <ul> if you want to delete the above text-->
  119.       <ul style="font-size:13px;">
  120.         <li>one...</li>
  121.         <li>two...</li>
  122.         <li>three...</li>
  123.       </ul>
  124.     </div>
  125.          
  126.     <div class="mb-2">
  127.     <!---------- KEY ITEMS ------------>
  128.     <span class="text-primary" style="letter-spacing:1px">KEY ITEMS</span><hr class="m-auto bg-primary">
  129.     <p class="pt-2" style="font-size:13px;">Feel free to draw them with these items!</p>
  130.     <!--add class="pt-2" to the <ul> if you want to delete the above text-->
  131.       <ul style="font-size:13px;">
  132.         <li>one...</li>
  133.         <li>two...</li>
  134.         <li>three...</li>
  135.       </ul>
  136.     </div>
  137.          
  138.   </div>
  139.  
  140.   <div class="col-md-3" style="background-image:url(https://images.unsplash.com/photo-1506079478915-3f458c5077a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);background-size:cover;">
  141.   </div>
  142.  
  143.   </div>
  144.   </div>  
  145.    
  146.     <!---------------- RELATIONS ------------------>
  147.   <div class="tab-pane fade" id="RELATIONSHIPS">
  148.   <div class="row no-gutters" style="background-color:#fff;color:#474243">  
  149.  
  150.   <div class="col-md-12 px-4 py-3" style="height:400px;overflow:auto;">
  151.     <div class="m-auto px-3">
  152.      
  153.       <!--- char 1--->
  154.       <div class="row" style="font-size:13px;">
  155.         <div class="col-md-4 pb-2">
  156.           <div style="background-image:url(https://images.unsplash.com/photo-1506079478915-3f458c5077a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);background-size:cover;height:150px;"></div>
  157.         </div>
  158.         <div class="col-md-8 pb-2">
  159.           <span>NAME</span>
  160.           <div class="justify-content-between">
  161.             <span>RELATIONSHIP</span>
  162.             <span><i class="fas fa-heart"></i>
  163.                   <i class="fas fa-heart"></i>
  164.                   <i class="fas fa-heart"></i>
  165.                   <i class="far fa-heart"></i>
  166.                   <i class="far fa-heart"></i></span></div>
  167.           <hr class="m-auto bg-primary">
  168.           <p class="pt-1">"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."</p>
  169.         </div>
  170.       </div>
  171.      
  172.       <!--- char 2--->
  173.       <div class="row" style="font-size:13px;">
  174.         <div class="col-md-4 pb-2">
  175.           <div style="background-image:url(https://images.unsplash.com/photo-1506079478915-3f458c5077a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);background-size:cover;height:150px;"></div>
  176.         </div>
  177.         <div class="col-md-8 pb-2">
  178.           <span>NAME</span>
  179.           <div class="justify-content-between">
  180.             <span>RELATIONSHIP</span>
  181.             <span><i class="fas fa-heart"></i>
  182.                   <i class="fas fa-heart"></i>
  183.                   <i class="fas fa-heart"></i>
  184.                   <i class="far fa-heart"></i>
  185.                   <i class="far fa-heart"></i></span></div>
  186.           <hr class="m-auto bg-primary">
  187.           <p class="pt-1">"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."</p>
  188.         </div>
  189.       </div>
  190.      
  191.       <!--- char 3--->
  192.       <div class="row" style="font-size:13px;">
  193.         <div class="col-md-4 pb-2">
  194.           <div style="background-image:url(https://images.unsplash.com/photo-1506079478915-3f458c5077a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);background-size:cover;height:150px;"></div>
  195.         </div>
  196.         <div class="col-md-8 pb-2">
  197.           <span>NAME</span>
  198.           <div class="justify-content-between">
  199.             <span>RELATIONSHIP</span>
  200.             <span><i class="fas fa-heart"></i>
  201.                   <i class="fas fa-heart"></i>
  202.                   <i class="fas fa-heart"></i>
  203.                   <i class="far fa-heart"></i>
  204.                   <i class="far fa-heart"></i></span></div>
  205.           <hr class="m-auto bg-primary">
  206.           <p class="pt-1">"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."</p>
  207.         </div>
  208.       </div>
  209.      
  210.       <!--- char 4--->
  211.       <div class="row" style="font-size:13px;">
  212.         <div class="col-md-4 pb-2">
  213.           <div style="background-image:url(https://images.unsplash.com/photo-1506079478915-3f458c5077a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);background-size:cover;height:150px;"></div>
  214.         </div>
  215.         <div class="col-md-8 pb-2">
  216.           <span>NAME</span>
  217.           <div class="justify-content-between">
  218.             <span>RELATIONSHIP</span>
  219.             <span><i class="fas fa-heart"></i>
  220.                   <i class="fas fa-heart"></i>
  221.                   <i class="fas fa-heart"></i>
  222.                   <i class="far fa-heart"></i>
  223.                   <i class="far fa-heart"></i></span></div>
  224.           <hr class="m-auto bg-primary">
  225.           <p class="pt-1">"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."</p>
  226.         </div>
  227.       </div>
  228.    
  229.     <!--add more above this-->
  230.     <div class="p-1"></div></div>
  231.   </div>
  232.        
  233.   </div>
  234.   </div>  
  235.    
  236.   </div>
  237.  
  238. <div class="text-right"> <!--do not remove-->
  239.   <p class="small text-primary"><a class="tooltipster" title="code by Lullah" href="lullah"><i class="fas fa-paw"></i></a></p>
  240. </div>
  241. </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!