API tools faq
paste
SparklyLightus

Fair And Square

SparklyLightus
Apr 1st, 2021 (edited)
419
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.56 KB | None | 0 0
raw download clone embed print report
  1. <div class="p-0 row no-gutters col-md-9 mx-auto">
  2.     <!-- LEFT -->
  3.     <div class="col-lg-5">
  4.         <div class="m-1 card border-0 rounded-0" style="height: 320px;">
  5.             <div class="h-100 w-100" style="background: url('//via.placeholder.com/700') top center; background-size: cover;"></div>
  6.         </div>
  7.     </div>
  8.     <!-- RIGHT -->
  9.     <div class="col-lg-7">
  10.         <!-- NAME/TITLE -->
  11.         <div class="m-1 card rounded-0" style="border-width: 2px;">
  12.             <div class="p-1 card-header border-0">
  13.                 <!-- GO TO fontawesome.com TO CHANGE THE ICONS (star) -->
  14.                 <h1 class="m-0 font-weight-light text-center"><i class="fal fa-star"></i> NAME <i class="fal fa-star"></i></h1>
  15.             </div>
  16.         </div>
  17.         <!-- CONTENT -->
  18.         <div class="m-1 p-2 card rounded-0" style="height: 279px; overflow: auto; border-width: 2px;">
  19.             <div class="row no-gutters text-right">
  20.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">NAME</span> Information</p>
  21.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">AGE</span> Information (bday)</p>
  22.                  <hr class="m-0 p-0 col-12">
  23.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">GENDER</span> Information</p>
  24.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">RACE</span> Information</p>
  25.                  <hr class="m-0 p-0 col-12">
  26.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">ORIENTATION</span> Information</p>
  27.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">STATUS</span> Information</p>
  28.                  <hr class="m-0 p-0 col-12">
  29.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">MBTI</span> Information</p>
  30.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">HEIGHT</span> Information</p>
  31.                  <hr class="m-0 p-0 col-12">
  32.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">OCCUPATION</span> Information</p>
  33.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">RELATIONSHIP</span> Information</p>
  34.                  <hr class="m-0 p-0 col-12">
  35.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">WEAPON</span> Information</p>
  36.                 <p class="m-0 p-1 col-sm-6"><span class="text-secondary font-weight-bold pull-left">ELEMENT</span> Information</p>
  37.                
  38.                 <h1 class="col-12 m-0 mt-2 p-1 text-center font-italic">"Quote..."</h1>
  39.                
  40.                 <h3 class="col-12 m-0 p-1 text-center font-weight-light">
  41.                     <a href="SONGLINK">
  42.                         <i class="fal fa-music-alt"></i> Songname <i class="fal fa-music-alt"></i>
  43.                     </a>
  44.                 </h3>
  45.             </div>
  46.         </div>
  47.     </div>
  48.    
  49.     <!-- COLORS - could be their palette or colors that match their theme / KEEP IT AT 6! -->
  50.     <div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #848484;"></div></div>
  51.     <div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #848484;"></div></div>
  52.     <div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #848484;"></div></div>
  53.     <div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #B1B1B1;"></div></div>
  54.     <div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #B1B1B1;"></div></div>
  55.     <div class="col-2"><div class="m-1 card rounded-0 border-0" style="height: 20px; background: #B1B1B1;"></div></div>
  56.    
  57.    
  58.     <!-- BOTTOM -->
  59.     <div class="col-lg-12">
  60.         <div class="m-1 card rounded-0" style="border-width: 2px;">
  61.             <!-- NAV -->
  62.             <div class="px-2 pb-0 pt-2 card-header border-0">
  63.                 <ul class="nav nav-tabs text-center row no-gutters">
  64.                     <li class="nav-item col-4"><a class="p-1 px-3 nav-link active" style="border-radius: 0px;" data-toggle="tab" href="#ONE"><i class="fas fa-book fa-lg"></i></a></li>
  65.                     <li class="nav-item col-4"><a class="p-1 px-3 nav-link" style="border-radius: 0px;" data-toggle="tab" href="#TWO"><i class="fas fa-hand-paper fa-lg"></i></a></li>
  66.                     <li class="nav-item col-4"><a class="p-1 px-3 nav-link" style="border-radius: 0px;" data-toggle="tab" href="#THREE"><i class="fas fa-link fa-lg"></i></a></li>
  67.                 </ul>
  68.             </div>
  69.             <!-- CONTENT -->
  70.             <div class="p-1 tab-content" style="height: 450px; overflow: auto">
  71.                 <!-- STORY -->
  72.                 <div class="p-1 tab-pane text-justify show active" style="text-indent: 15px;" id="ONE">
  73.                     <!-- SUMMARY -->
  74.                     <div>
  75.                         <h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Summary</h1>
  76.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat rhoncus quam, at tincidunt purus pretium ut. Vestibulum sapien leo, lacinia ultrices ante nec, ultricies vulputate ligula. Donec molestie nisi vitae semper rutrum. In lacinia id turpis quis dapibus. Nam euismod lobortis tellus, at rutrum dui porttitor sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales risus orci, sit amet aliquet sapien accumsan ac. In sem diam, tristique eu velit sed, luctus interdum turpis. Aliquam convallis iaculis augue, a dapibus ipsum porta vitae. Morbi sit amet massa eget purus aliquet pellentesque ut eget ligula. </p>
  77.                     </div>
  78.                     <hr class="m-0 border-0">
  79.                     <!-- STORY -->
  80.                     <div>
  81.                         <h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Story</h1>
  82.                         <!-- IMAGE -->
  83.                         <div class="m-2 float-sm-right justify-content-center">
  84.                             <img src="//via.placeholder.com/700" style="max-height: 350px; max-width: 350px;"></div>
  85.                            
  86.                         <h1 class="m-0 text-secondary" style="text-indent: 0px;">Header</h1>
  87.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat rhoncus quam, at tincidunt purus pretium ut. Vestibulum sapien leo, lacinia ultrices ante nec, ultricies vulputate ligula. Donec molestie nisi vitae semper rutrum. In lacinia id turpis quis dapibus. Nam euismod lobortis tellus, at rutrum dui porttitor sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales risus orci, sit amet aliquet sapien accumsan ac. In sem diam, tristique eu velit sed, luctus interdum turpis. </p>
  88.                        
  89.                         <h1 class="m-0 text-secondary" style="text-indent: 0px;">Header</h1>
  90.                         <p> Aliquam convallis iaculis augue, a dapibus ipsum porta vitae. Morbi sit amet massa eget purus aliquet pellentesque ut eget ligula. Curabitur quis elit fermentum, facilisis erat eu, mattis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae purus et odio efficitur finibus sed sit amet metus. Phasellus est dolor, sagittis eget elit a, rhoncus ornare arcu. Praesent sed arcu metus.</p>
  91.                        
  92.                         <h1 class="m-0 text-secondary" style="text-indent: 0px;">Header</h1>
  93.                         <p>Morbi elementum mauris leo, quis fringilla eros rhoncus id. Nullam eget massa aliquam, porttitor quam eget, rutrum felis. Donec nec neque blandit, volutpat ligula sed, tempus massa. Praesent libero purus, lacinia non tellus nec, tincidunt ornare urna. Sed tempor est quis lectus commodo pretium.</p>
  94.                     </div>
  95.                 </div>
  96.                 <!-- ABOUT -->
  97.                 <div class="p-1 tab-pane text-justify" id="TWO">
  98.                     <!-- PERSONALITY -->
  99.                     <div style="text-indent: 15px;">
  100.                         <h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Personality</h1>
  101.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat rhoncus quam, at tincidunt purus pretium ut. Vestibulum sapien leo, lacinia ultrices ante nec, ultricies vulputate ligula. Donec molestie nisi vitae semper rutrum. In lacinia id turpis quis dapibus. Nam euismod lobortis tellus, at rutrum dui porttitor sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  102.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales risus orci, sit amet aliquet sapien accumsan ac. In sem diam, tristique eu velit sed, luctus interdum turpis. Aliquam convallis iaculis augue, a dapibus ipsum porta vitae. Morbi sit amet massa eget purus aliquet pellentesque ut eget ligula.</p>
  103.                     </div>
  104.                     <!-- MOODBOARD -->
  105.                     <div class="row no-gutters justify-content-center">
  106.                         <div class="col-auto">
  107.                             <div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
  108.                         <div class="col-auto">
  109.                             <div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
  110.                         <div class="col-auto">
  111.                             <div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
  112.                         <div class="col-auto">
  113.                             <div class="m-1" style="background: url('//via.placeholder.com/200') center; background-size: cover; height: 120px; width: 120px;"></div></div>
  114.                     </div>
  115.                     <!-- TRIVIA -->
  116.                     <div>
  117.                         <h1 class="m-0 display-4 text-primary" style="border-bottom: 2px solid;text-indent: 0px;">Trivia</h1>
  118.                         <ul class="m-1 pl-4">
  119.                             <li>In lobortis ipsum et eros volutpat ornare.</li>
  120.                             <li>Quisque molestie ipsum nec odio ornare feugiat.</li>
  121.                             <li>Sed elementum orci id sem dapibus posuere.</li>
  122.                             <li>Nam fermentum urna nec diam laoreet maximus.</li>
  123.                         </ul>
  124.                     </div>
  125.                 </div>
  126.                 <!-- LINKS -->
  127.                 <div class="p-1 tab-pane text-justify" style="text-indent: 15px;" id="THREE">
  128.                     <div class="row no-gutters justify-content-center">
  129.                         <!-- PERSON -->
  130.                         <div class="p-1 col-4">
  131.                             <div class="m-1" style="background: url('//via.placeholder.com/400') center; background-size: cover; height: 200px; width: 100%;"></div>
  132.                             <h1 class="m-0 font-weight-light text-center"><a href="LINK">NAME</a></h1>
  133.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ex a vehicula dictum. Curabitur efficitur vehicula massa, sed placerat nisl rhoncus nec. Praesent ultricies iaculis dolor vitae convallis. Nullam ornare sapien eget est vestibulum convallis et pulvinar arcu.</p>
  134.                         </div>
  135.                         <!-- PERSON -->
  136.                         <div class="p-1 col-4">
  137.                             <div class="m-1" style="background: url('//via.placeholder.com/400') center; background-size: cover; height: 200px; width: 100%;"></div>
  138.                             <h1 class="m-0 font-weight-light text-center"><a href="LINK">NAME</a></h1>
  139.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ex a vehicula dictum. Curabitur efficitur vehicula massa, sed placerat nisl rhoncus nec. Praesent ultricies iaculis dolor vitae convallis. Nullam ornare sapien eget est vestibulum convallis et pulvinar arcu.</p>
  140.                         </div>
  141.                         <!-- PERSON -->
  142.                         <div class="p-1 col-4">
  143.                             <div class="m-1" style="background: url('//via.placeholder.com/400') center; background-size: cover; height: 200px; width: 100%;"></div>
  144.                             <h1 class="m-0 font-weight-light text-center"><a href="LINK">NAME</a></h1>
  145.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ex a vehicula dictum. Curabitur efficitur vehicula massa, sed placerat nisl rhoncus nec. Praesent ultricies iaculis dolor vitae convallis. Nullam ornare sapien eget est vestibulum convallis et pulvinar arcu.</p>
  146.                         </div>
  147.                     </div>
  148.                 </div>
  149.             </div>
  150.         </div>
  151.     </div>
  152.     <!-- ----------------------- CREDIT -->
  153.     <div class="p-0 col-12">
  154.         <div class="text-center">
  155.             <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  156.         </div>
  157.     </div>
  158. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!