API tools faq
paste
Advertisement
SparklyLightus

Aurum

SparklyLightus
Jan 20th, 2022
1,933
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.72 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    rgba(0,0,0,.7) >> BACKGROUND COLOR
  3.    D0AB33 >> ACCENT
  4. -->
  5. <div style="background-image: url('IMGLINK');
  6. background-position: center; background-size: cover; border-radius: 5px" class="m-3 p-2 p-lg-3 row no-gutters text-white">
  7.     <!-- ........................................... LEFT -->
  8.     <div class="p-1 col-lg-3 row no-gutters">
  9.         <div style="background-image: url('IMGLINK');
  10.        background-position: center; background-size: cover; border-radius: 5px; height: 190px;" class="mr-2 mr-lg-0 mb-2 col-lg-12 col"> </div>
  11.        
  12.         <div style="background-image: url('IMGLINK');
  13.        background-position: center; background-size: cover; border-radius: 5px; height: 190px;" class="mr-2 mr-lg-0 mb-2 col-lg-12 col"> </div>
  14.        
  15.         <div style="background-image: url('IMGLINK');
  16.        background-position: center; background-size: cover; border-radius: 5px; height: 190px;" class="mr-2 mr-lg-0 col-lg-12 col"> </div>
  17.     </div>
  18.     <!-- ........................................... RIGHT -->
  19.     <div class="col-lg-9 row no-gutters">
  20.         <!-- ........................................... COLUMN -->
  21.         <div class="p-1 col-sm-6">
  22.             <!-- NAME -->
  23.             <div class="mb-2 p-2 text-center" style="border-radius: 5px; background: rgba(0,0,0,.7);">
  24.                 <h1 class="mb-0 text-uppercase font-weight-light display-4" style="color: #D0AB33;">Name Surname</h1>
  25.                 <p>Adjective . Adjective . Adjective</p>
  26.             </div>
  27.             <!-- BASICS -->
  28.             <div class="p-2 col-md-9 overflow-auto" style="border-radius: 5px; height: 307px; background: rgba(0,0,0,.7);">
  29.                 <!--TITLE -->
  30.                 <h1 class="mb-0 text-uppercase font-weight-light" style="color: #D0AB33;">Basics</h1>
  31.                
  32.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Name</span> Information</p>
  33.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Called</span> Information</p>
  34.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Age</span> Information</p>
  35.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Gender</span> Information</p>
  36.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Race</span> Information</p>
  37.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Occupation</span> Information</p>
  38.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Orientation</span> Information</p>
  39.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">Birthday</span> Information</p>
  40.                 <p class="mb-2"><span class="px-1 float-right" style="background: #D0AB33; color: inherit; border-radius: 5px;">MBTI</span> Information</p>
  41.             </div>
  42.         </div>
  43.         <!-- ........................................... COLUMN -->
  44.         <div class="col-sm-6">
  45.             <!-- NAV BUTTONS -->
  46.             <ul class="py-1 nav nav-pills row no-gutters text-center">
  47.                 <li class="px-1 col-4 nav-item"><a style="background: #D0AB33; color: inherit; border-radius: 5px;" data-toggle="tab" class="p-1 nav-link active" href="#I">
  48.                     <i class="fa-solid fa-lg fa-comment"></i> </a></li>
  49.                 <li class="px-1 col-4 nav-item"><a style="background: #D0AB33; color: inherit; border-radius: 5px;" data-toggle="tab" class="p-1 nav-link" href="#II">
  50.                     <i class="fa-solid fa-lg fa-books"></i> </a></li>
  51.                 <li class="px-1 col-4 nav-item"><a style="background: #D0AB33; color: inherit; border-radius: 5px;" data-toggle="tab" class="p-1 nav-link" href="#III">
  52.                     <i class="fa-solid fa-lg fa-user-friends"></i> </a></li>
  53.             </ul>
  54.             <!-- NAV CONTENT -->
  55.             <div class="mx-1 mt-1 tab-content overflow-auto" style="height: 351px; border-radius: 5px; background: rgba(0,0,0,.7);">
  56.                 <!-- ONE -->
  57.                 <div class="p-2 tab-pane fade show active" id="I">
  58.                     <!--TITLE -->
  59.                     <h1 class="mb-0 text-uppercase font-weight-light" style="color: #D0AB33;">About</h1>
  60.                    
  61.                     <p class="mb-1">Vivamus tincidunt nisl ornare purus efficitur, et tempor lorem commodo. Proin vitae eros id ipsum vestibulum ornare. Phasellus euismod enim vulputate ante eleifend rutrum. Donec sit amet vestibulum orci, sed eleifend eros. Integer faucibus gravida massa in mattis.</p>
  62.                    
  63.                     <h6 class="mt-2 m-0 ml-3 text-uppercase font-weight-bold" style="color: #D0AB33;">PERSONALITY</h6>
  64.                     <p class="mb-1">Donec condimentum, felis quis molestie aliquet, libero mauris tristique mi, eget ullamcorper enim felis vel diam. Nullam sed porta sem. Duis pulvinar, dui et vulputate egestas, orci metus tempor lectus, et congue turpis mi nec nulla. Donec euismod diam in neque cursus, et interdum arcu iaculis. Pellentesque est tortor, ultricies ut pulvinar in, commodo eget justo.</p>
  65.                     <p class="mb-1">Maecenas tristique dolor odio, in dignissim augue porta cursus. Aenean dolor leo, hendrerit et volutpat et, bibendum ut quam. Integer sagittis orci nisl, et euismod urna porta vulputate. Ut scelerisque velit sed semper maximus.</p>
  66.                 </div>
  67.                 <!-- TWO -->
  68.                 <div class="p-2 tab-pane fade" id="II">
  69.                     <!--TITLE -->
  70.                     <h1 class="mb-0 text-uppercase font-weight-light" style="color: #D0AB33;">Story</h1>
  71.                    
  72.                     <h6 class="mt-2 m-0 ml-3 text-uppercase font-weight-bold" style="color: #D0AB33;">HEADER</h6>
  73.                     <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet neque porta, vestibulum erat quis, finibus diam. Morbi id leo et felis mollis tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean tempor, velit volutpat ultrices ultricies, enim leo blandit sapien, nec varius nisi eros quis est. Mauris aliquam tellus et diam laoreet, in faucibus erat cursus.</p>
  74.                     <p class="mb-1">In ut libero iaculis, finibus urna pharetra, elementum ex. Integer a lobortis felis. Sed sed ante eu urna egestas ultrices nec eu quam. Sed ornare felis eu semper faucibus. Morbi congue ultrices felis, congue porttitor erat elementum sed.</p>
  75.                    
  76.                     <h6 class="mt-2 m-0 ml-3 text-uppercase font-weight-bold" style="color: #D0AB33;">HEADER</h6>
  77.                     <p class="mb-1">Nulla id molestie ex, eu vulputate felis. Ut consequat facilisis vulputate. Etiam lectus sapien, placerat non tempor vel, elementum sed sem. In sit amet sem pellentesque, convallis sem eu, consequat risus. Nam ac consectetur leo. Cras non orci nec dui auctor ultricies eget vitae sapien.</p>
  78.                     <p class="mb-1">Mauris sagittis dui nec metus vestibulum pulvinar. Aenean bibendum ultrices dolor vitae euismod. Nullam consequat, massa id tempus facilisis, erat est bibendum ante, sit amet auctor lacus ante in mauris. Donec eu orci in libero suscipit vestibulum. Nam ipsum ipsum, pretium at urna nec, aliquet semper mauris. Quisque volutpat mollis orci. Aenean sit amet porttitor orci. Nullam lobortis enim in laoreet ultrices. Donec vitae diam erat. </p>
  79.                 </div>
  80.                 <!-- THREE -->
  81.                 <div class="p-2 tab-pane fade" id="III"> <div class="row no-gutters text-justify">
  82.                     <!--TITLE -->
  83.                     <h1 class="mb-0 col-12 text-uppercase font-weight-light" style="color: #D0AB33;">Relationships</h1>
  84.                    
  85.                     <!-- PERSON -->
  86.                     <div class="py-1 col-12 row no-gutters">
  87.                         <img src="IMGLINK"
  88.                            style="height: 120px; width: 120px; object-fit: cover; border-radius: 5px" class="mr-2 float-left col-auto">
  89.                         <div class="col">
  90.                             <h4 class="mb-0 mt-1"><a class="p-1 d-block" style="background: #D0AB33; color: inherit; border-radius: 5px;"
  91.                            href="LINK">Name</a></h4>
  92.                             <p>Nam interdum velit sed magna iaculis, eu gravida massa venenatis. Donec commodo elementum eros sit amet porta. Fusce in dui libero. Proin rutrum arcu aliquam ex fermentum, ac venenatis justo viverra. </p>
  93.                         </div>
  94.                     </div>
  95.                     <!-- PERSON -->
  96.                     <div class="py-1 col-12 row no-gutters">
  97.                         <div class="col">
  98.                             <h4 class="mb-0 mt-1"><a class="p-1 d-block" style="background: #D0AB33; color: inherit; border-radius: 5px;"
  99.                            href="LINK">Name</a></h4>
  100.                             <p>Nam interdum velit sed magna iaculis, eu gravida massa venenatis. Donec commodo elementum eros sit amet porta. Fusce in dui libero. Proin rutrum arcu aliquam ex fermentum, ac venenatis justo viverra. </p>
  101.                         </div>
  102.                         <img src="IMGLINK"
  103.                            style="height: 120px; width: 120px; object-fit: cover; border-radius: 5px" class="ml-2 float-left col-auto">
  104.                     </div>
  105.                     <!-- PERSON -->
  106.                     <div class="py-1 col-12 row no-gutters">
  107.                         <img src="IMGLINK"
  108.                            style="height: 120px; width: 120px; object-fit: cover; border-radius: 5px" class="mr-2 float-left col-auto">
  109.                         <div class="col">
  110.                             <h4 class="mb-0 mt-1"><a class="p-1 d-block" style="background: #D0AB33; color: inherit; border-radius: 5px;"
  111.                            href="LINK">Name</a></h4>
  112.                             <p>Nam interdum velit sed magna iaculis, eu gravida massa venenatis. Donec commodo elementum eros sit amet porta. Fusce in dui libero. Proin rutrum arcu aliquam ex fermentum, ac venenatis justo viverra. </p>
  113.                         </div>
  114.                     </div>
  115.                     <!-- PERSON -->
  116.                     <div class="py-1 col-12 row no-gutters">
  117.                         <div class="col">
  118.                             <h4 class="mb-0 mt-1"><a class="p-1 d-block" style="background: #D0AB33; color: inherit; border-radius: 5px;"
  119.                            href="LINK">Name</a></h4>
  120.                             <p>Nam interdum velit sed magna iaculis, eu gravida massa venenatis. Donec commodo elementum eros sit amet porta. Fusce in dui libero. Proin rutrum arcu aliquam ex fermentum, ac venenatis justo viverra. </p>
  121.                         </div>
  122.                         <img src="IMGLINK"
  123.                            style="height: 120px; width: 120px; object-fit: cover; border-radius: 5px" class="ml-2 float-left col-auto">
  124.                     </div>
  125.                     <!-- add more above here / copy last TWO links for a better effect -->
  126.                 </div> </div>
  127.             </div>
  128.             <!-- end nav content -->
  129.         </div>
  130.         <!-- ........................................... TRIVIA -->
  131.         <div class="p-1 col-12">
  132.             <div class="p-2 overflow-auto" style="height: 190px; border-radius: 5px; background: rgba(0,0,0,.7);">
  133.                 <!--TITLE -->
  134.                 <h1 class="mb-0 text-uppercase font-weight-light" style="color: #D0AB33;">Trivia</h1>
  135.                
  136.                 <ul class="pl-4">
  137.                     <li>Integer id bibendum tellus, ac tincidunt mauris.</li>
  138.                     <li>Nullam quis purus finibus dolor malesuada dictum vel non mauris.</li>
  139.                     <li>Nulla porta, orci sed mollis volutpat, massa tortor varius tortor, tincidunt pellentesque nisl massa eget risus.</li>
  140.                     <li>Nunc nunc dolor, pulvinar quis pulvinar sed, blandit ac urna.</li>
  141.                     <li>Donec facilisis lectus vel tincidunt dictum.</li>
  142.                 </ul>
  143.             </div>
  144.         </div>
  145.     </div>
  146.     <!-- ........................................... CREDITS -->
  147.     <div class="p-1 col-12">
  148.         <div class="p-2 text-center" style="border-radius: 5px; background: rgba(0,0,0,.7);">
  149.             <p class="m-0"><a href="/SparklyCodes" class="tooltipster" title="HTML by SparklyCodes" style="color: #D0AB33"><i class="fa-solid fa-code"></i></a></p>
  150.         </div>
  151.     </div>
  152. </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!