Viragora

for_emberhollow

Dec 4th, 2020 (edited)
830
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="container-fluid px-0" style="max-width: 1350px; letter-spacing: .45px;">
  2.   <div class="row">
  3.     <!---------- left column --------------------------->
  4.     <div class="col-lg-3 pr-lg-0 mb-3">
  5.       <div class="card bg-faded h-100">
  6.         <div class="card-header">
  7.           <!----------- header -------------------------------->
  8.           <h1 class="mb-0 text-uppercase" style="font-weight: 400; letter-spacing:1px;"><i class="fas fa-info-circle pull-right"></i> Basics</h1>
  9.         </div>
  10.         <div class="card-block pb-1">
  11.           <!----------- avatar -- use a 200 x 200 image -------------------------->
  12.  
  13.           <p align="center">
  14.             <img src="https://i.pinimg.com/564x/83/a5/ae/83a5aee0e6c4171306e7a8b1c0f1aa3b.jpg" class="d-block mx-auto mb-4 rounded-circle fr-fic fr-dib" style="max-height: 200px; max-width: 200px;" width="200" height="200">
  15.           </p>
  16.  
  17. <!-------- stats --------------------------------------->
  18.           <div class="row no-gutters"><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Name</strong>
  19.  
  20.             <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">name here</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Age</strong>
  21.            
  22.             <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">age</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Pro.</strong>
  23.            
  24.             <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">she/her</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Height</strong>
  25.            
  26.             <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">height</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Origin</strong>
  27.            
  28.             <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2">place</div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Playlist</strong>
  29.            
  30.             <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2"><a href="SONG%20LINK" target="_BLANK">link ♬</a></div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> Theme</strong>
  31.            
  32.             <i class="fal fa-angle-double-right fa-fw"></i></div><div class="col-6 mb-2"></div><div class="col-6 text-right pr-1" style="letter-spacing: 1px;"><strong> D.O.B.</strong>
  33.            
  34.             <i class="fal fa-angle-double-right fa-fw"></i></div>
  35.         <div class="col-6 mb-2">date</div>
  36.         </div>
  37.         </div>
  38.       </div>
  39.     </div>
  40. <!---------- center column --------------------------->
  41.     <div class="col-lg-6 col-md-8 mb-3">
  42.       <div class="card bg-faded">
  43.         <div>
  44.           <ul class="nav nav-tabs nav-fill" style="border-bottom: none;">
  45.             <li class="nav-item">
  46.               <a href="#one" class="nav-link active card-header text-uppercase" data-toggle="tab" style="font-weight:400;letter-spacing:1px;font-size:1.4rem;line-height:1.1;border-bottom:1px solid;border-color:rgba(250,250,246,0.125);">
  47.                 <i class="fas fa-book pull-right"></i>
  48.                 About
  49.               </a>
  50.             </li>
  51.             <li class="nav-item">
  52.               <a href="#two" class="nav-link card-header text-uppercase" data-toggle="tab" style="font-weight:400;letter-spacing:1px;font-size:1.4rem;line-height:1.1;border-color:rgba(250,250,246,0.125);">
  53.                 <i class="fas fa-book pull-right"></i>
  54.                 About but longer than the first
  55.               </a>
  56.             </li>
  57.           </ul>
  58.         </div>
  59.         <div class="tab-content">
  60.           <div class="tab-pane active card-block" id="one" style="font-size: 10.5pt; height: 540px; overflow:auto;">FIRST TAB CONTENT GOES HERE</div>
  61.           <div class="tab-pane card-block" id="two" style="font-size: 10.5pt; height: 540px; overflow:auto;">SECOND TAB CONTENT GOES HERE</div>
  62.         </div>
  63.       </div>
  64.     </div>
  65. <!---------- right column --------------------------->
  66.     <div class="col-lg-3 col-md-4 pl-md-0 mb-3">
  67.       <div class="card bg-faded h-100">
  68.         <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
  69.         <div class="h-100" style="background-image: url(https://i.pinimg.com/564x/6f/a1/8d/6fa18d2cd6b330d5334321df6f4dfbf3.jpg); background-size: cover; background-position: top center; min-height: 400px;">
  70.           <br>
  71.         </div>
  72.       </div>
  73.     </div>
  74.   </div>
  75. <p class="text-right small">HTML by lowkeywicked</p>
  76. </div>
RAW Paste Data