SHARE
TWEET

Untitled

a guest Nov 22nd, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--  
  2.   Some helpful info!
  3. content
  4.   BOOTSTRAPS COLORS:
  5.       primary (blue)
  6.       secondary (gray)
  7.       success (green)
  8.       danger (red)
  9.       warning (yellow)
  10.       info (cyan blue)
  11.  
  12.   CHANGING COLORS:
  13.       background: change bg-faded to bg-[color]
  14.       text color: remove text-muted or add/change text-[color] (not advised)
  15.       border color: add card-outline-[color]
  16.       button color: change btn-[color]
  17.  
  18.   BORDER:
  19.       round corners: remove 'rounded-0'
  20.       remove border: add 'border-0'
  21. -->
  22.  
  23. <div class="col-lg-12 p-0">
  24.   <a name="TOPPAGE"></a>
  25.   <div class="row mx-auto">
  26.     <!-- --------------- SIDE COLUMN --------------- -->
  27.     <div class="col-lg-4 push-lg-8 p-0">
  28.       <div class="card bg-faded p-2 m-1 mt-2 rounded-0">
  29.         <!-- allow img to show up even on mobile by removing 'd-none d-md-block' -->
  30.         <div class="card rounded-0 m-1 mb-2">
  31.           <!-- width of image probably needs to be upwards of 800px -->
  32.           <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg" class="w-100 h-auto">
  33.         </div>
  34.         <!-- allow bottom lines in list to touch the edge of the box by removing 'px-2'
  35.              remove lines by putting 'border-0' in each li class
  36.              to change box color on hover, add 'list-group-item-action' to each li class -->    
  37.         <div class="card rounded-0 m-1">
  38.           <ul class="list-group list-group-flush">
  39.              <li class="list-group-item list-group-item-action justify-content-between">
  40.                <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Full Name</span>
  41.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  42.             </li>
  43. <li class="list-group-item list-group-item-action justify-content-between">
  44.                <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Nickname(s)</span>
  45.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  46.             <li class="list-group-item list-group-item-action justify-content-between">
  47.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Age</span>
  48.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  49.             </li>
  50.             <li class="list-group-item list-group-item-action justify-content-between">
  51.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Gender</span>
  52.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  53.             </li>
  54.             <li class="list-group-item list-group-item-action justify-content-between">
  55.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Orientation</span>
  56.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  57.             </li>
  58. <li class="list-group-item list-group-item-action justify-content-between">
  59.                <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Livelihood</span>
  60.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  61.             </li>
  62.             <li class="list-group-item list-group-item-action justify-content-between">
  63.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Nationality</span>
  64.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  65.             </li>
  66.             <li class="list-group-item list-group-item-action justify-content-between">
  67.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Height</span>
  68.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  69.             </li>
  70.             <li class="list-group-item list-group-item-action justify-content-between">
  71.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Build</span>
  72.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  73. <li class="list-group-item list-group-item-action justify-content-between">
  74.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Alignment</span>
  75.               <span class="text-lowercase text-muted" style="letter-spacing:1px;font-size:.75rem;">content</span>
  76.            <li class="list-group-item list-group-item-action justify-content-between">
  77.               <span class="text-uppercase text-muted" style="letter-spacing:2px;font-size:.8rem;">Theme/Playlist</span>
  78.               <a class="text-lowercase text-primary" style="letter-spacing:1px;font-size:.75rem;" href="content">[🎶]</a>
  79.             </li>
  80.           </ul>
  81.         </div>
  82.       </div>
  83.     </div>
  84.     <!-- --------------- MAIN CONTENT --------------- -->
  85.     <div class="card rounded-0 bg-faded col-lg-8 pull-lg-4 p-0">
  86.       <!-- make sure to change the anchor name here and add a link in quicklinks if adding another section! -->
  87.       <a name="BASICINFO"></a>
  88.         <!-- -------- LARGE CARD -------- -->
  89.         <div class="p-3 m-1 align-center">
  90. <div class="card p-2 m-1 rounded-0 bg-muted"> 
  91. <!--------------------------- NAVIGATION BUTTONS -------------------------------------->
  92.          <ul class="nav nav-pills nav-justified">
  93.            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#ONE"
  94. style="text-align:center"></i> Summary</a></li>
  95.             <li class="nav-item"><a class="nav-link rounded-0" data-toggle="tab" href="#TWO"
  96. style="text-align:center"></i> Appearance</a></li>
  97.             <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#THREE"
  98. style="text-align:center"></i> Personality</a></li>
  99.             <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#FOUR"
  100. style="text-align:center"></i> Backstory</a></li>
  101.          </ul>
  102.       <div class="tab-content">
  103. <!--------------------------- SECTION ONE -------------------------------------->
  104.          <div class="tab-pane fade in active show card-block" style="height:800px;" id="ONE">
  105.             <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  106.             <h2 class="text-center"><i class="text-muted">"quote content"</i></h2>
  107.          </div>
  108.  <!--------------------------- SECTION TWO -------------------------------------->
  109.           <div class="tab-pane show card-block" style="height:800px;" id="TWO">
  110.  <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  111.             <h2 class="text-center"><i class="text-muted">
  112. <p> content</p>
  113. <p> content </p>
  114. <p> content</p>
  115. <p>content</p>        
  116.          </div>
  117.  <!--------------------------- SECTION THREE -------------------------------------->
  118.                 <div class="tab-pane show card-block" style="height:800px;" id="THREE">
  119.  <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  120.             <h2 class="text-center"><i class="text-muted">
  121. <p> content</p>
  122. <p>content</p>
  123.          </div>
  124.  
  125.          <!--------------------------- SECTION FOUR -------------------------------------->
  126.              <div class="tab-pane show card-block table-responsive" style="height:800px;" id="FOUR">
  127.  <img src="" style="height:400px;width:200px;" class="float-left mr-2">
  128.             <h2 class="text-center"><i class="text-muted">
  129. <p>content/p>
  130.          </div>
  131. </div>
  132. </div>
  133. </div>
  134.  
  135. <!-- CARD HEADING END -->
  136.         <!-- -------- LARGE CARD END -------- -->
  137.         <!-- -------- CARD ROWS -------- -->
  138.     <div class="card bg-faded rounded-0 p-3 m-1 align-center">
  139.         <div class="row mx-0 d-flex">
  140.           <div class="col-lg-6 p-0 d-flex">
  141.             <div class="card w-100 bg- secondary rounded-0 p-3 m-1 align-self-stretch">
  142.               <!-- CARD HEADING -->
  143.               <div class="d-flex justify-content-between">
  144.                 <p class="text-muted text-center text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  145.                   Skills & Abilities
  146.                 </p>
  147.                 <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  148.                   <i class="fa fa-question-circle"></i>
  149.                 </p>
  150.               </div>  
  151.               <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  152.               <!-- CARD HEADING END -->
  153.               <div class="text-muted p-2" style="font-size:.85rem">
  154.                 <ul class="pl-3 mb-0">
  155. <li>content</li>
  156. <li>content</li>
  157. <li>content</li>
  158. <li>content</li>
  159.                
  160.                 </ul>
  161.               </div>
  162.               <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  163.             </div>
  164.           </div>
  165.           <div class="col-lg-6 p-0 d-flex">
  166.             <div class="card w-100 bg-muted rounded-0 p-3 m-1 align-self-stretch">
  167.               <!-- CARD HEADING -->
  168.               <div class="d-flex justify-content-between">
  169.                 <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  170.                   Trivia
  171.                 </p>
  172.                 <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  173.                   <i class="fa fa-wrench"></i>
  174.                 </p>
  175.               </div>  
  176.               <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  177.               <!-- CARD HEADING END -->
  178.               <div class="text-muted p-2" style="font-size:.85rem">
  179.                 <ul class="pl-3 mb-0">
  180.                   <li>content </li>
  181. <li> content </li>
  182. <li> content</li>
  183.                 </ul>
  184.               </div>
  185.               <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  186.             </div>
  187.           </div>
  188.         </div>
  189.         <!-- -------- CARD ROWS END -------- -->
  190.         <!-- -------- CARD ROWS -------- -->
  191.         <div class="row mx-0 d-flex">
  192.           <div class="col-lg-6 p-0 d-flex">
  193.             <div class="card w-100 bg-muted rounded-0 p-3 m-1 align-self-stretch">
  194.               <!-- CARD HEADING -->
  195.               <div class="d-flex justify-content-between">
  196.                 <p class="text-muted text-uppercase text-center m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  197.                   Likes
  198.                 </p>
  199.                 <p class="text-muted text-uppercase text-center m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  200.                   <i class="fa fa-user-plus"></i>
  201.                 </p>
  202.               </div>  
  203.               <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  204.               <!-- CARD HEADING END -->
  205.               <div class="text-muted p-2" style="font-size:.85rem">
  206.                 <ul class="pl-3 mb-0">
  207.                   <li>content</li>
  208.                   <li>content</li>
  209.                   <li>content</li>
  210.                   <li>content</li>
  211.                   <li>content</li>
  212.                   <li>content</li>
  213.                 </ul>
  214.               </div>
  215.               <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  216.             </div>
  217.           </div>
  218.           <div class="col-lg-6 p-0 d-flex">
  219.             <div class="card w-100 bg-muted rounded-0 p-3 m-1 align-self-stretch">
  220.               <!-- CARD HEADING -->
  221.               <div class="d-flex justify-content-between">
  222.                 <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  223.                   Dislikes
  224.                 </p>
  225.                 <p class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:2px;font-size:1.2rem;">
  226.                   <i class="fa fa-user-times"></i>
  227.                 </p>
  228.               </div>  
  229.               <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  230.               <!-- CARD HEADING END -->
  231.               <div class="text-muted p-2" style="font-size:.85rem">
  232.                 <ul class="pl-3 mb-0">
  233.                   <li>content</li>
  234.                   <li>content</li>
  235.                   <li>content</li>
  236.                   <li>content</li>
  237. <li>content</li>
  238.                 </ul>
  239.               </div>
  240.               <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  241.             </div>
  242.           </div>
  243.         </div>
  244.         <!-- -------- CARD ROWS END -------- -->
  245.       </div>
  246.       <!-- --------------- RELATIONSHIPS --------------- -->
  247.       <div class="card p-2 m-1 mt-2 rounded-0 bg-faded">
  248.         <!-- -------- LARGE CARD -------- -->
  249.         <div class="card bg- secondary rounded-0 p-3 m-1 align-self-stretch">
  250.           <!-- CARD HEADING -->
  251.           <!-- make sure to change the anchor name here and add a link in quicklinks if adding another section! -->
  252.           <div class="d-flex justify-content-between">
  253.             <p class="text-muted text-center text-uppercase m-0" style="letter-spacing:2px;font-size:1.2rem;">
  254.               Relationships
  255.             </p>
  256.             <p class="text-muted text-center text-uppercase m-0" style="letter-spacing:2px;font-size:1.2rem;">
  257.               <i class="fa fa-heartbeat"></i>
  258.             </p>
  259.           </div>  
  260.           <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  261.           <!-- CARD HEADING END -->
  262.           <div class="row mx-0 d-flex">
  263.               <!-- RELATIONSHIP CARD -->
  264.             <div class="col-xl-4 col-lg-6 p-0 d-flex">
  265.               <div class="w-100 m-1 p-2 align-self-stretch">
  266.                 <div class="d-flex justify-content-between">
  267.                   <a href="content" class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:1px;font-size:.85rem;">
  268.                    Name
  269.                   </a>
  270.                   <p class="text-muted text-lowercase m-0 " style="letter-spacing:1px;font-size:.85rem;">
  271.                     <i>ship</i>
  272.                   </p>
  273.                 </div>
  274.                 <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  275.                 <div class="text-muted p-2" style="font-size:.8rem">
  276.                   <p>content
  277. <p> <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg"  style="width:200px;height:200px;">
  278.                   </p>
  279.                 </div>
  280.               </div>
  281.             </div>
  282.             <!-- RELATIONSHIP CARD END-->
  283.  <!-- RELATIONSHIP CARD -->
  284.             <div class="col-xl-4 col-lg-6 p-0 d-flex">
  285.               <div class="w-100 m-1 p-2 align-self-stretch">
  286.                 <div class="d-flex justify-content-between">
  287.                   <a href="content" class="text-muted text-uppercase m-0 text-secondary" style="letter-spacing:1px;font-size:.85rem;">
  288.                     name
  289.                   </a>
  290.                   <p class="text-muted text-lowercase m-0" style="letter-spacing:1px;font-size:.85rem;">
  291.                   <i>ship </i>
  292.                   </p>
  293.                 </div>
  294.                 <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  295.                 <div class="text-muted p-2" style="font-size:.8rem">
  296.                   <p>content
  297.  <p>   <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg"  style="width:200px;height:200px;">
  298.                   </p>
  299.                 </div>
  300.               </div>
  301.             </div>
  302.             <!-- RELATIONSHIP CARD END-->
  303.             <!-- RELATIONSHIP CARD -->
  304.             <div class="col-xl-4 col-lg-6 p-0 d-flex">
  305.               <div class="w-100 m-1 p-2 align-self-stretch">
  306.                 <div class="d-flex justify-content-between">
  307.                   <a href="content" class="text-muted text-uppercase text-secondary m-0" style="letter-spacing:1px;font-size:.85rem;">
  308.                    name
  309.                   </a>
  310.                   <p class="text-muted text-lowercase m-0 " style="letter-spacing:1px;font-size:.85rem;">
  311.                   <i>ship</i>
  312.                   </p>
  313.                 </div>
  314.                 <div class="w-100"><hr class="p-0 m-0 my-1"></div>
  315.                 <div class="text-muted p-2" style="font-size:.8rem">
  316.                   <p> content
  317.                   </p> <p>   <img src="https://orig00.deviantart.net/dd97/f/2018/140/d/0/dhsolifk_by_vengencevinny-dcc35to.jpg"  style="width:200px;height:200px;">
  318.                   </p>
  319.                 </div>
  320.               </div>
  321.             </div>
  322.             <!-- RELATIONSHIP CARD END-->
  323.            
  324.             </div>
  325.               <a href="#TOPPAGE" class="text-muted text-right text-lowercase m-0 mt-1" style="letter-spacing:2px;font-size:.65rem;">Back to Top</a>
  326.             </div>
  327.           </div>
  328.         </div>  
  329.       </div>  
  330.     </div>
  331.   </div>
  332. </div>
RAW Paste Data
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
 
Top