API tools faq
paste
Advertisement
SparklyLightus

Gift

SparklyLightus
Dec 9th, 2021
412
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.00 KB | None | 0 0
raw download clone embed print report
  1. <div style="background: url('IMG_LINK') center;
  2. max-width: 1000px; border-radius: 10px;" class="m-3 p-2 mx-auto">
  3.     <div class="row no-gutters">
  4.        
  5.         <!-- QUOTE -->
  6.         <div class="col-lg-9 my-auto">
  7.             <!-- CHANGE text-dark TO text-light IF USING A DARK BACKGROUND IMAGE -->
  8.             <h1 class="text-dark display-4 font-weight-bold text-center">"Lorem ipsum, sit dolor amet..."</h1>
  9.         </div>
  10.         <!-- IMAGE -->
  11.         <div class="p-1 px-lg-3 col-lg-3 col-6 mx-auto" style="z-index: 9999">
  12.             <!-- IMAGE LINK -->
  13.             <div style="background: url('IMG_LINK') center;
  14.            
  15.            background-size: cover; padding-top: 100%; border-radius: 30px 30px 10px 10px;" class="mb-md-n4 m-1"></div>
  16.         </div>
  17.        
  18.         <!-- BASICS -->
  19.         <div class="p-2 col-lg-7">
  20.             <div class="bg-faded" style="border-radius: 10px; overflow: hidden"><div class="p-2" style="height: 180px; overflow: auto">
  21.                 <h2 class="m-0 font-weight-bold text-secondary" style="border-bottom: 3px dashed">BASICS</h2>
  22.                 <div class="p-1 row no-gutters text-right">
  23.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">NAME</strong>
  24.                         Information</p>
  25.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">CALLED</strong>
  26.                         Nickname</p>
  27.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">GENDER</strong>
  28.                         Information</p>
  29.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">PRONOUNS</strong>
  30.                         Information</p>
  31.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">AGE</strong>
  32.                         Information</p>
  33.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">BIRTHDAY</strong>
  34.                         Information</p>
  35.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">HEIGHT</strong>
  36.                         Information</p>
  37.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">WEIGHT</strong>
  38.                         Information</p>
  39.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">OCCUPATION</strong>
  40.                         Job</p>
  41.                     <p class="mb-1 px-1 col-sm-6"><strong class="px-2 pull-left bg-secondary text-light" style="border-radius: 10px">THEME</strong>
  42.                         <a href="SONG_LINK">Song_name</a></p>
  43.                 </div>
  44.             </div></div>
  45.         </div>
  46.         <!-- ABOUT -->
  47.         <div class="p-2 col-lg-5">
  48.             <div class="bg-faded" style="border-radius: 10px; overflow: hidden"> <div class="p-2" style="height: 180px; overflow: auto">
  49.                 <h2 class="m-0 font-weight-bold text-secondary" style="border-bottom: 3px dashed">ABOUT</h2>
  50.                 <div class="p-1" style="text-indent: 20px">
  51.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in ultricies velit. Nulla viverra tortor et neque iaculis volutpat. Suspendisse accumsan nibh auctor risus mollis tempus. Integer quis elit id enim interdum aliquam. Pellentesque mattis, mauris ac volutpat vulputate, orci erat scelerisque neque, non tempus justo mauris sed elit. Integer ullamcorper dolor eget ante malesuada, sed suscipit nisl hendrerit.</p>
  52.                     <p>Donec euismod, lectus eget luctus sollicitudin, lacus mauris rhoncus arcu, sed blandit ipsum ex at nisi. Quisque congue scelerisque tristique. Nunc cursus et justo at fringilla. Maecenas ligula lacus, fermentum non venenatis ut, consectetur sit amet nisl. Curabitur faucibus enim quis eros cursus, at pellentesque nibh molestie.</p>
  53.                 </div>
  54.             </div> </div>
  55.         </div>
  56.        
  57.         <!-- IMAGE -->
  58.         <div class="p-1 col-lg-3 col-8 mx-auto">
  59.             <!-- IMAGE LINK -->
  60.             <div style="background: url('IMG_LINK') center;
  61.            
  62.            background-size: cover; height: 350px; border-radius: 10px 30px 30px 10px;" class="m-1"></div>
  63.         </div>
  64.         <!-- STORY -->
  65.         <div class="p-2 col-lg-9">
  66.             <div class="bg-faded" style="border-radius: 10px; overflow: hidden"> <div class="p-2" style="height: 350px; overflow: auto">
  67.                 <h2 class="m-0 font-weight-bold text-secondary" style="border-bottom: 3px dashed">HISTORY</h2>
  68.                 <div class="p-1" style="text-indent: 20px">
  69.                     <h4 class="pb-1 faded" style="text-indent: 0px; border-bottom: 2px dashed">Header</h4>
  70.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed velit ac nisl lobortis vestibulum placerat eu nunc. Fusce aliquam magna eget leo eleifend, ut varius ligula convallis. Nam volutpat commodo ligula. Pellentesque lobortis fermentum purus id pellentesque. Etiam ornare arcu ut nisl ullamcorper volutpat. Phasellus quis ultricies leo, non faucibus felis. Integer blandit nisi eu ipsum tincidunt, sit amet finibus ligula accumsan. Mauris a volutpat magna, et aliquet sapien.</p>
  71.                     <p>Pellentesque nec arcu eget justo dictum mollis tempor at libero. Nam in pellentesque libero, sit amet viverra elit. Quisque dictum lacus vulputate erat molestie, ac accumsan sapien laoreet. Aenean sem mi, tincidunt a molestie eu, maximus ac dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet tortor ex.</p>
  72.                    
  73.                     <h4 class="pb-1 faded" style="text-indent: 0px; border-bottom: 2px dashed">Header</h4>
  74.                     <p>In sit amet ex vehicula, venenatis ligula eget, condimentum dui. Aliquam dapibus volutpat pretium. Maecenas venenatis ultrices ex quis dictum. Duis varius tortor id mi porta, sit amet faucibus magna luctus. Aliquam gravida, augue scelerisque interdum tempus, mi eros elementum sapien, nec commodo risus turpis et nulla. Pellentesque efficitur hendrerit placerat. Donec in ligula leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed blandit tempor libero quis blandit.</p>
  75.                     <p>Fusce lacinia feugiat risus. Aenean non imperdiet ante. Suspendisse nec aliquam ligula. Sed vel risus rhoncus, dapibus quam eget, hendrerit odio. Donec libero purus, viverra sit amet tempor quis, porttitor et sapien.</p>
  76.                 </div>
  77.             </div> </div>
  78.         </div>
  79.        
  80.         <!-- TRIVIA -->
  81.         <div class="p-2 col-lg-8">
  82.             <div class="bg-faded" style="border-radius: 10px; overflow: hidden"> <div class="p-2" style="height: 250px; overflow: auto">
  83.                 <h2 class="m-0 font-weight-bold text-secondary" style="border-bottom: 3px dashed">TRIVIA</h2>
  84.                 <ul class="m-0 pl-4">
  85.                     <li>Aenean feugiat nisl ut pellentesque fringilla. Maecenas vestibulum pharetra iaculis.</li>
  86.                     <li>Maecenas diam turpis, suscipit in neque vitae, ultrices ultricies libero. Maecenas magna nunc, viverra in interdum a, varius ut massa.</li>
  87.                     <li>Cras molestie eget elit id vulputate. Vestibulum pellentesque, mauris non imperdiet tristique, ligula felis consequat tortor, sed porttitor nunc nibh nec metus.</li>
  88.                     <li>In ultricies rutrum enim, non ullamcorper ex mattis non. Quisque ac condimentum ex.</li>
  89.                     <li>In dapibus magna ac lacus rhoncus, vitae mattis nunc sollicitudin. Etiam at nisl a orci iaculis porta vitae sit amet ex. In fringilla urna non pretium commodo.</li>
  90.                 </ul>
  91.             </div> </div>
  92.         </div>
  93.         <!-- PREFERENCES -->
  94.         <div class="p-2 col-lg-4">
  95.             <div class="bg-faded" style="border-radius: 10px; overflow: hidden"> <div class="p-2" style="height: 250px; overflow: auto">
  96.                 <h2 class="m-0 font-weight-bold text-secondary" style="border-bottom: 3px dashed">PREFERENCES</h2>
  97.                 <div class="p-1">
  98.                     <h4 class="pb-1 faded" style="text-indent: 0px; border-bottom: 2px dashed">Likes</h4>
  99.                     <ul class="m-0 pl-4">
  100.                         <li>Quisque lorem nisi, interdum eu tristique in, venenatis sed nunc.</li>
  101.                         <li>Vivamus consectetur ex rutrum magna ultricies aliquet.</li>
  102.                         <li>Nam sit amet finibus velit. Vivamus tristique dui sit amet tincidunt dapibus.</li>
  103.                         <li>Vivamus in magna vel mi ultrices pellentesque non aliquam dui.</li>
  104.                     </ul>
  105.                    
  106.                     <h4 class="pb-1 faded" style="text-indent: 0px; border-bottom: 2px dashed">Dislikes</h4>
  107.                     <ul class="m-0 pl-4">
  108.                         <li>Cras nunc mauris, luctus sit amet metus quis, maximus rutrum ante.</li>
  109.                         <li>Cras bibendum blandit lacus quis blandit.</li>
  110.                         <li>Cras ultricies porta consequat.</li>
  111.                         <li>Donec et mauris ut urna vehicula ultricies.</li>
  112.                     </ul>
  113.                 </div>
  114.             </div> </div>
  115.         </div>
  116.        
  117.         <!-- RELATIONSHIPS -->
  118.         <div class="p-2 col-lg-7">
  119.             <div class="bg-faded" style="border-radius: 10px; overflow: hidden"> <div class="p-2" style="height: 400px; overflow: auto">
  120.                 <h2 class="m-0 font-weight-bold text-secondary" style="border-bottom: 3px dashed">RELATIONSHIPS</h2>
  121.                 <!-- PERSON -->
  122.                 <div class="pt-2">
  123.                     <img src="IMG_LINK"
  124.                        class="mr-2 mb-2 float-left" style="height: 120px; border-radius: 10px 30px 30px 10px;">
  125.                     <h4 class="mb-1 text-secondary"><a href="LINK">Name</a> . relationship</h4>
  126.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius quam. Etiam non est dictum, viverra quam quis, cursus dolor. Nullam sit amet ullamcorper ante, eget condimentum mi. In nec tortor lectus. Curabitur eleifend rutrum neque eget lobortis. Phasellus nec nisl arcu. Proin pulvinar efficitur consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nec arcu in eleifend. Nunc facilisis diam tellus, sit amet molestie lectus tempor fringilla.</p>
  127.                 </div>
  128.                 <!-- PERSON -->
  129.                 <div class="pt-2">
  130.                     <img src="IMG_LINK"
  131.                        class="mr-2 mb-2 float-right" style="height: 120px; border-radius: 30px 10px 10px 30px;">
  132.                     <h4 class="mb-1 text-secondary"><a href="LINK">Name</a> . relationship</h4>
  133.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius quam. Etiam non est dictum, viverra quam quis, cursus dolor. Nullam sit amet ullamcorper ante, eget condimentum mi. In nec tortor lectus. Curabitur eleifend rutrum neque eget lobortis. Phasellus nec nisl arcu. Proin pulvinar efficitur consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nec arcu in eleifend. Nunc facilisis diam tellus, sit amet molestie lectus tempor fringilla.</p>
  134.                 </div>
  135.                 <!-- PERSON -->
  136.                 <div class="pt-2">
  137.                     <img src="IMG_LINK"
  138.                        class="mr-2 mb-2 float-left" style="height: 120px; border-radius: 10px 30px 30px 10px;">
  139.                     <h4 class="mb-1 text-secondary"><a href="LINK">Name</a> . relationship</h4>
  140.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae varius quam. Etiam non est dictum, viverra quam quis, cursus dolor. Nullam sit amet ullamcorper ante, eget condimentum mi. In nec tortor lectus. Curabitur eleifend rutrum neque eget lobortis. Phasellus nec nisl arcu. Proin pulvinar efficitur consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nec arcu in eleifend. Nunc facilisis diam tellus, sit amet molestie lectus tempor fringilla.</p>
  141.                 </div>
  142.                 <!-- ADD MORE ABOVE HERE - copy last two relationships for best effect -->
  143.             </div> </div>
  144.         </div>
  145.         <!-- DESIGN -->
  146.         <div class="p-2 col-lg-5">
  147.             <div class="bg-faded" style="border-radius: 10px; overflow: hidden"> <div class="p-2" style="height: 352px; overflow: auto">
  148.                 <h2 class="m-0 font-weight-bold text-secondary" style="border-bottom: 3px dashed">DESIGN</h2>
  149.                
  150.                 <!-- REFERENCE IMAGE -->
  151.                 <div class="p-2 justify-content-center">
  152.                     <img src="IMG_LINK" style="max-width: 100%; max-height: 250px; border-radius: 10px;">
  153.                 </div>
  154.                
  155.                 <h4 class="pb-1 faded" style="text-indent: 0px; border-bottom: 2px dashed">Notes</h4>
  156.                 <ul class="m-0 pl-4">
  157.                     <li>Aenean feugiat nisl ut pellentesque fringilla. Maecenas vestibulum pharetra iaculis.</li>
  158.                     <li>Maecenas diam turpis, suscipit in neque vitae, ultrices ultricies libero. Maecenas magna nunc, viverra in interdum a, varius ut massa.</li>
  159.                     <li>Cras molestie eget elit id vulputate. Vestibulum pellentesque, mauris non imperdiet tristique, ligula felis consequat tortor, sed porttitor nunc nibh nec metus.</li>
  160.                 </ul>
  161.                
  162.             </div> </div>
  163.             <!-- COLORS -->
  164.             <div class="m-n1 pt-2 row no-gutters">
  165.                 <!-- PALETTE - change background color HEX code -->
  166.                 <div class="p-1 col"> <div style="background-color: #111; height: 40px; border-radius: 10px;"></div> </div>
  167.                 <div class="p-1 col"> <div style="background-color: #333; height: 40px; border-radius: 10px;"></div> </div>
  168.                 <div class="p-1 col"> <div style="background-color: #555; height: 40px; border-radius: 10px;"></div> </div>
  169.                 <div class="p-1 col"> <div style="background-color: #777; height: 40px; border-radius: 10px;"></div> </div>
  170.                 <div class="p-1 col"> <div style="background-color: #999; height: 40px; border-radius: 10px;"></div> </div>
  171.                 <div class="p-1 col"> <div style="background-color: #bbb; height: 40px; border-radius: 10px;"></div> </div>
  172.             </div>
  173.         </div>
  174.        
  175.         <!-- CREDITS - DO NOT REMOVE ........................ -->
  176.         <div class="p-2 col-12">
  177.             <div class="p-2 bg-faded text-center" style="border-radius: 10px;">
  178.                 <a href="/SparklyCodes" data-toggle="tooltip" title="HTML by SparklyCodes"><i class="fas fa-code"></i></a>
  179.             </div>
  180.         </div>
  181.        
  182.     </div>
  183. </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!