API tools faq
paste
SparklyLightus

Live it up - Day

SparklyLightus
Oct 6th, 2021 (edited)
533
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.12 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    5B69FE >> ACCENT
  3.    0E062D >> BORDER COLORS
  4.    fa-sparkles >> FONT AWESOME ICON ONE
  5.    fa-money-bill-wave >> FONT AWESOME ICON TWO
  6. -->
  7. <div class="m-4 mx-auto bg-light" style="max-width: 800px; border-radius: 10px; border: 1px solid #0E062D; overflow: hidden;">
  8.     <div class="p-3 row no-gutters text-dark" style="background: linear-gradient(to bottom, #5B69FE, rgba(0,0,0,0))">
  9.         <!-- BANNER -->
  10.         <div class="p-1 col-12">
  11.             <div style="background: url('//via.placeholder.com/1000') center;
  12.            background-size: cover; height: 150px; border-radius: 10px; border: 1px solid #0E062D">
  13.                
  14.                 <i class="fas fa-money-bill-wave fa-flip-horizontal fa-3x" style="position: absolute; bottom: -10px; right: -10px; z-index: 9999"></i>
  15.                
  16.             </div>
  17.         </div>
  18.        
  19.         <!-- DIVIDER --> <div class="my-1 col-12" style="border-top: 5px dotted #5B69FE"></div>
  20.        
  21.         <!-- IMAGE -->
  22.         <div class="p-1 col-sm-3 col-8 mx-auto">
  23.             <div style="background: url('//via.placeholder.com/200') center;
  24.            background-size: cover; height: 205px; border-radius: 10px; border: 1px solid #0E062D">
  25.                
  26.                 <i class="ml-n2 mt-n2 fas fa-sparkles fa-flip-horizontal fa-3x"></i>
  27.                
  28.             </div>
  29.         </div>
  30.         <!-- BASICS -->
  31.         <div class="p-1 col-sm-9">
  32.             <div class="bg-light card" style="border-radius: 10px; overflow: hidden; border-color: #0E062D"> <div class="p-2 overflow-auto" style="height: 205px">
  33.                 <h1 class="m-0 text-center" style="letter-spacing: 2px">
  34.                     <i class="mr-n3 faded fas fa-sparkles" style="color: #5B69FE"></i> NAME
  35.                 </h1>
  36.                 <!-- BASICS -->
  37.                 <div class="row no-gutters text-right">
  38.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  39.                         <i class="mr-1 my-auto fal fa-signature"></i> Name</span> Information
  40.                     </div>
  41.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  42.                         <i class="mr-1 my-auto fal fa-birthday-cake"></i> Age</span> Information
  43.                     </div>
  44.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  45.                         <i class="mr-1 my-auto fal fa-venus-mars"></i> Gender</span> Information
  46.                     </div>
  47.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  48.                         <i class="mr-1 my-auto fal fa-heart"></i> Orientation</span> Information
  49.                     </div>
  50.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  51.                         <i class="mr-1 my-auto fal fa-cog"></i> Occupation</span> Information
  52.                     </div>
  53.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  54.                         <i class="mr-1 my-auto fal fa-dna"></i> Race</span> Information
  55.                     </div>
  56.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  57.                         <i class="mr-1 my-auto fal fa-atlas"></i> Origin</span> Information
  58.                     </div>
  59.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  60.                         <i class="mr-1 my-auto fal fa-home"></i> Residence</span> Information
  61.                     </div>
  62.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  63.                         <i class="mr-1 my-auto fal fa-ruler"></i> Height</span> Information
  64.                     </div>
  65.                     <div class="p-1 col-sm-6"> <span class="card float-left flex-row" style="color: #5B69FE; border-color: #0E062D; padding: 0px 4px;">
  66.                         <i class="mr-1 my-auto fal fa-dollar-sign"></i> Status</span> Information
  67.                     </div>
  68.                 </div>
  69.             </div> </div>
  70.         </div>
  71.        
  72.         <!-- DIVIDER --> <div class="my-1 col-12" style="border-top: 5px dotted #5B69FE"></div>
  73.        
  74.         <!-- ABOUT -->
  75.         <div class="p-1 col-sm-5">
  76.             <div class="bg-light card" style="border-radius: 10px; overflow: hidden; border-color: #0E062D"> <div class="p-2 overflow-auto" style="height: 300px">
  77.                 <h1 class="m-0 text-center" style="letter-spacing: 2px">
  78.                     <i class="mr-n3 faded fas fa-money-bill-wave" style="color: #5B69FE"></i> ABOUT
  79.                 </h1>
  80.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et justo quis nibh interdum molestie in eget nisi. Nunc et venenatis risus. Donec venenatis ipsum a libero tincidunt, et facilisis elit iaculis. Quisque convallis, lectus at congue hendrerit, elit ligula imperdiet massa, in ultrices sem leo nec nunc. Nulla et eleifend enim. Aenean vitae convallis risus. Nulla consectetur auctor odio, a rhoncus dui sodales porttitor. Sed cursus eros non justo maximus porttitor. Fusce aliquet posuere metus, a vehicula leo tempus in. Cras id lorem magna. Cras ut sodales leo. Praesent ullamcorper dignissim ipsum. Maecenas ultricies est nec blandit vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris quis ex mi. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  81.             </div> </div>
  82.         </div>
  83.         <!-- STORY -->
  84.         <div class="p-1 col-sm-7">
  85.             <div class="bg-light card" style="border-radius: 10px; overflow: hidden; border-color: #0E062D"> <div class="p-2 overflow-auto" style="height: 300px">
  86.                 <h1 class="m-0 text-center" style="letter-spacing: 2px">
  87.                     <i class="mr-n3 faded fas fa-money-bill-wave" style="color: #5B69FE"></i> STORY
  88.                 </h1>
  89.                 <!-- HEADER -->
  90.                 <div>
  91.                     <p class="m-0 font-weight-bold" style="color: #5B69FE; letter-spacing: 2px">HEADER</p>
  92.                     <p>Nullam eu felis maximus, hendrerit est vel, tempus sapien. Curabitur sodales felis erat, quis ultricies lacus vestibulum eget. Curabitur non turpis aliquam, lacinia lorem ac, sollicitudin ante. Nullam porttitor est non velit cursus eleifend. Vestibulum lacus sem, eleifend in risus sed, ornare condimentum lacus.  </p>
  93.                     <p>Donec lacinia felis lectus, quis laoreet enim rhoncus id. Vestibulum fermentum malesuada libero vel sollicitudin.</p>
  94.                 </div>
  95.                 <!-- HEADER -->
  96.                 <div>
  97.                     <p class="m-0 font-weight-bold" style="color: #5B69FE; letter-spacing: 2px">HEADER</p>
  98.                     <p>Sed viverra laoreet erat, sit amet sodales turpis pretium at. Ut et placerat leo. Sed convallis quam sed nisl condimentum volutpat. Aenean placerat erat ornare nunc dictum lacinia. Cras consequat risus ac ultricies consequat. Fusce tempus dapibus libero et blandit. Vestibulum vitae euismod est. Nulla facilisi.</p>
  99.                     <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sed sodales nisl. Quisque mollis ac magna at aliquam. Fusce purus mi, venenatis quis leo nec, ultrices aliquet neque. Donec sit amet blandit ex.</p>
  100.                 </div>
  101.                 <!-- ADD MORE ABOVE HERE -->
  102.             </div> </div>
  103.         </div>
  104.        
  105.         <!-- DIVIDER --> <div class="my-1 col-12" style="border-top: 5px dotted #5B69FE"></div>
  106.        
  107.         <!-- TRIVIA -->
  108.         <div class="p-1 col-sm-4">
  109.             <div class="bg-light card" style="border-radius: 10px; overflow: hidden; border-color: #0E062D"> <div class="p-2 overflow-auto" style="height: 248px">
  110.                 <h1 class="m-0 text-center" style="letter-spacing: 2px">
  111.                     <i class="mr-n3 faded fas fa-sparkles" style="color: #5B69FE"></i> TRIVIA
  112.                 </h1>
  113.                 <ul class="m-0 pl-3">
  114.                     <li>Duis et tortor et elit condimentum hendrerit. Nullam hendrerit at dui non pulvinar.</li>
  115.                     <li>Integer sed ex eleifend, efficitur quam non, laoreet lacus.</li>
  116.                     <li>Pellentesque in ultrices magna, sed ullamcorper nulla.</li>
  117.                     <li>Praesent feugiat, enim ac laoreet bibendum, velit leo dapibus sem, in lacinia ex diam a neque.</li>
  118.                     <li>Nulla sed orci et tortor consectetur egestas.</li>
  119.                 </ul>
  120.             </div> </div>
  121.         </div>
  122.         <!-- IMAGE -->
  123.         <div class="p-1 col-sm-8"><div style="background: url('//via.placeholder.com/1000') center;
  124.            background-size: cover; height: 250px; border-radius: 10px; border: 1px solid #0E062D">
  125.                
  126.                 <i class="fas fa-sparkles fa-3x" style="position: absolute; bottom: -10px; left: -10px; z-index: 9999"></i>
  127.                
  128.             </div>
  129.         </div>
  130.        
  131.         <!-- DIVIDER --> <div class="my-1 col-12" style="border-top: 5px dotted #5B69FE"></div>
  132.        
  133.         <!-- RELATIONSHIPS -->
  134.         <div class="p-1 col-12">
  135.             <div class="bg-light card" style="border-radius: 10px; overflow: hidden; border-color: #0E062D"> <div class="p-2 overflow-auto" style="height: 400px">
  136.                 <h1 class="m-0 text-center" style="letter-spacing: 2px">
  137.                     <i class="mr-n3 faded fas fa-money-bill-wave" style="color: #5B69FE"></i> RELATIONSHIPS
  138.                 </h1>
  139.                 <div class="row no-gutters text-justify">
  140.                     <!-- PERSON -->
  141.                     <div class="p-1 col-md-6"> <div class="p-2" style="border-radius: 10px; border: 2px dotted #5B69FE">
  142.                         <img src="//via.placeholder.com/200" style="border-radius: 10px; height: 130px; width: 130px" class="mr-2 float-left">
  143.                        
  144.                         <h5 class="m-0 mt-1 font-weight-bold">
  145.                             <a style="color: #5B69FE; letter-spacing: 2px" href="PERSON_LINK">NAME</a>
  146.                             <i class="fa-sm faded fas fa-money-bill-wave"></i> relationship</h5>
  147.                         <p>Sed aliquet turpis nulla, at venenatis lectus volutpat quis. Phasellus non purus vel dui eleifend commodo nec a erat. Sed dolor tellus, fringilla a velit ac, interdum dictum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et tristique odio.</p>
  148.                     </div> </div>
  149.                     <!-- PERSON -->
  150.                     <div class="p-1 col-md-6"> <div class="p-2" style="border-radius: 10px; border: 2px dotted #5B69FE">
  151.                         <img src="//via.placeholder.com/200" style="border-radius: 10px; height: 130px; width: 130px" class="mr-2 float-left">
  152.                        
  153.                         <h5 class="m-0 mt-1 font-weight-bold">
  154.                             <a style="color: #5B69FE; letter-spacing: 2px" href="PERSON_LINK">NAME</a>
  155.                             <i class="fa-sm faded fas fa-money-bill-wave"></i> relationship</h5>
  156.                         <p>Sed aliquet turpis nulla, at venenatis lectus volutpat quis. Phasellus non purus vel dui eleifend commodo nec a erat. Sed dolor tellus, fringilla a velit ac, interdum dictum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et tristique odio.</p>
  157.                     </div> </div>
  158.                     <!-- PERSON -->
  159.                     <div class="p-1 col-md-6"> <div class="p-2" style="border-radius: 10px; border: 2px dotted #5B69FE">
  160.                         <img src="//via.placeholder.com/200" style="border-radius: 10px; height: 130px; width: 130px" class="mr-2 float-left">
  161.                        
  162.                         <h5 class="m-0 mt-1 font-weight-bold">
  163.                             <a style="color: #5B69FE; letter-spacing: 2px" href="PERSON_LINK">NAME</a>
  164.                             <i class="fa-sm faded fas fa-sparkles"></i> relationship</h5>
  165.                         <p>Sed aliquet turpis nulla, at venenatis lectus volutpat quis. Phasellus non purus vel dui eleifend commodo nec a erat. Sed dolor tellus, fringilla a velit ac, interdum dictum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et tristique odio.</p>
  166.                     </div> </div>
  167.                     <!-- PERSON -->
  168.                     <div class="p-1 col-md-6"> <div class="p-2" style="border-radius: 10px; border: 2px dotted #5B69FE">
  169.                         <img src="//via.placeholder.com/200" style="border-radius: 10px; height: 130px; width: 130px" class="mr-2 float-left">
  170.                        
  171.                         <h5 class="m-0 mt-1 font-weight-bold">
  172.                             <a style="color: #5B69FE; letter-spacing: 2px" href="PERSON_LINK">NAME</a>
  173.                             <i class="fa-sm faded fas fa-sparkles"></i> relationship</h5>
  174.                         <p>Sed aliquet turpis nulla, at venenatis lectus volutpat quis. Phasellus non purus vel dui eleifend commodo nec a erat. Sed dolor tellus, fringilla a velit ac, interdum dictum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce et tristique odio.</p>
  175.                     </div> </div>
  176.                 </div>
  177.             </div> </div>
  178.         </div>
  179.        
  180.         <!-- CREDITS -->
  181.         <div class="mt-1 mb-n2 col-12 text-center">
  182.             <a data-toggle="tooltip" title="HTML by SparlyCodes" href="/SparklyCodes" style="color: #5B69FE"> <i class="fas fa-code"></i></a>
  183.         </div>
  184.     </div>
  185. </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!