SparklyLightus

Heart

Sep 22nd, 2021
1,254
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.    92A6EB >> ACCENT COLOR
  3.    fa-heart >> ICON
  4. -->
  5. <div class="m-2 col-lg-10 mx-auto row no-gutters">
  6.     <!-- TOP BAR -->
  7.     <div class="col-lg-12" style="margin-top: 40px;">
  8.         <!-- CIRCLE -->
  9.         <div style="position: absolute; margin-top: -35px; z-index: 100;">
  10.             <div class="justify-content-center rounded-circle text-white" style="background: #92A6EB; height: 120px; width: 120px; border: 4px solid;">
  11.                 <h1 class="mx-auto my-auto" style="text-shadow: 0px 0px 10px #6A6A6A;">
  12.                     <!-- ICON - look up fontawesome to get one that fits your character best! -->
  13.                     <i class="fad fa-heart fa-2x"></i>
  14.                 </h1>
  15.             </div>
  16.         </div>
  17.         <!-- NAME / NAVIGATION -->
  18.         <div class="m-1 p-2 row no-gutters bg-faded rounded text-right justify-content-end">
  19.             <!-- PADDING --><div class="col-auto" style="width: 110px;"></div>
  20.             <h4 class="col-auto my-auto mx-1 m-0 font-weight-light text-secondary">
  21.                 adjective <i class="fad fa-heart fa-sm" style="color: #92A6EB;"></i>
  22.                 adjective <i class="fad fa-heart fa-sm" style="color: #92A6EB;"></i>
  23.                 adjective</h4>
  24.             <h1 class="col-auto my-auto mx-1 m-0 font-weight-light text-secondary">
  25.                 -
  26.                 Name <i class="fad fa-heart fa-lg" style="color: #92A6EB;"></i></h1>
  27.         </div>
  28.     </div>
  29.     <!-- TRIVIA -->
  30.     <div class="col-lg-4 order-lg-1">
  31.         <div class="m-1 bg-faded rounded">
  32.             <h1 class="m-0 mb-1 pt-1 pr-1 text-right" style="color: #92A6EB; letter-spacing: 1px;"><i class="fad fa-user"></i> TRIVIA</h1>
  33.             <div class="p-2" style="height: 375px; overflow: auto;">
  34.                 <!-- BASICS -->
  35.                 <div class="text-right">
  36.                     <p class="m-0 justify-content-between">
  37.                         <span class="text-secondary">NAME</span> Information</p>
  38.                     <p class="m-0 justify-content-between">
  39.                         <span class="text-secondary">AGE</span> Information</p>
  40.                     <p class="m-0 justify-content-between">
  41.                         <span class="text-secondary">GENDER</span> Information</p>
  42.                     <p class="m-0 justify-content-between">
  43.                         <span class="text-secondary">RACE</span> Information</p>
  44.                     <p class="m-0 justify-content-between">
  45.                         <span class="text-secondary">ROLE</span>
  46.                         <span>Information <i class="fad fa-heart"></i> Information</span></p>
  47.                     <p class="m-0 justify-content-between">
  48.                         <span class="text-secondary">ORIENTATION</span> Information</p>
  49.                     <p class="m-0 justify-content-between">
  50.                         <span class="text-secondary">THEME</span>
  51.                         <span><a href="LINK" target="_BLANK">Information</a> <i class="fad fa-heart"></i>
  52.                             <a href="LINK" target="_BLANK">Playlist</a></span></p>
  53.                 </div>
  54.                 <hr class="m-0 my-1">
  55.                 <!-- LIKES -->
  56.                 <div>
  57.                     <h4 class="m-0 text-secondary font-weight-light" style="letter-spacing: 1px;">LIKES</h4>
  58.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  59.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  60.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  61.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  62.                 </div>
  63.                 <!-- DISLIKES -->
  64.                 <div>
  65.                     <h4 class="m-0 text-secondary font-weight-light" style="letter-spacing: 1px;">DISLIKES</h4>
  66.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  67.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  68.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  69.                     <p class="m-0 ml-2"><i class="fad fa-heart faded"></i> Information</p>
  70.                 </div>
  71.                 <hr class="m-0 my-1">
  72.                 <!-- NOTES -->
  73.                 <div style="text-indent: 4px;">
  74.                     <p class="m-0"><i class="fas fa-heart faded"></i>
  75.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  76.                     <p class="m-0"><i class="fas fa-heart faded"></i>
  77.                         Morbi urna erat, auctor nec mauris ac, auctor sodales nisl.</p>
  78.                     <p class="m-0"><i class="fas fa-heart faded"></i>
  79.                         Integer dignissim aliquam lacus sit amet bibendum.</p>
  80.                     <p class="m-0"><i class="fas fa-heart faded"></i>
  81.                         Ut nisl purus, molestie pellentesque mattis at, suscipit at nulla.</p>
  82.                 </div>
  83.                 <div class="pt-1"></div>
  84.             </div>
  85.         </div>
  86.     </div>
  87.     <!-- ABOUT -->
  88.     <div class="col-lg-5 order-lg-2">
  89.         <div class="m-1 bg-faded rounded text-justify">
  90.             <h1 class="m-0 mb-1 pt-1 pr-1 text-right" style="color: #92A6EB; letter-spacing: 1px;"><i class="fad fa-book fa-swap-opacity"></i> ABOUT</h1>
  91.             <div class="p-2" style="text-indent: 20px; height: 375px; overflow: auto;">
  92.                 <p>This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet blandit ultrices. Ut sed pulvinar risus. Integer sodales, lorem a interdum efficitur, lectus dolor cursus lectus, egestas auctor tortor enim sed lorem. Proin at orci erat. Donec ultricies ex sed velit molestie, nec pellentesque massa consectetur. Mauris nibh metus, congue nec ex sit amet, dictum vehicula sapien. Maecenas nibh sem, lobortis ac mi ut, molestie elementum augue. Aenean ac mi a turpis vestibulum molestie. Nullam lacinia risus ut eros pretium scelerisque. Aliquam ultrices ipsum quis elit porttitor, vel vulputate mi egestas. Donec ac sapien in dolor tincidunt scelerisque sit amet at nunc. </p>
  93.                 <p>Aenean auctor, elit quis iaculis pulvinar, metus ligula euismod ipsum, ut tincidunt turpis sem ac lorem. Maecenas at scelerisque lacus. Duis feugiat, mi sit amet fermentum elementum, ante enim pulvinar libero, id maximus ante urna vitae nisl. Quisque purus lacus, posuere nec nunc in, ullamcorper mattis velit. Duis interdum velit nibh, sit amet scelerisque nisl tincidunt vel. Donec ipsum odio, ornare sollicitudin consectetur ut, aliquam in mauris. Vestibulum aliquam, nisi nec consequat aliquam, nunc neque vestibulum sapien, non varius nunc nisl nec ipsum. Donec interdum, mi vitae elementum lobortis, sapien lacus sagittis nisl, id rutrum quam nulla id nisi.</p>
  94.                 <div class="pt-1"></div>
  95.             </div>
  96.         </div>
  97.     </div>
  98.     <!-- COLORS -->
  99.     <div class="col-lg-12 order-lg-4">
  100.         <div class="m-1 p-1 row no-gutters bg-faded rounded text-justify">
  101.             <div class="mr-1 col rounded" style="background: #111111; height: 20px;"></div>
  102.             <div class="mr-1 col rounded" style="background: #222222; height: 20px;"></div>
  103.             <div class="mr-1 col rounded" style="background: #333333; height: 20px;"></div>
  104.             <div class="mr-1 col rounded" style="background: #444444; height: 20px;"></div>
  105.             <div class="mr-1 col rounded" style="background: #555555; height: 20px;"></div>
  106.             <div class="col rounded" style="background: #666666; height: 20px;"></div>
  107.         </div>
  108.     </div>
  109.     <!-- IMAGE -->
  110.     <div class="col-9 mx-auto col-lg-3 order-lg-3">
  111.         <div class="m-1 p-1 bg-faded rounded text-justify">
  112.             <!-- IMAGE - FOCUS ON TOP CENTER -->
  113.             <div class="rounded" style="background: url('//via.placeholder.com/1000') top center; background-size: cover; height: 400px; width: 100%;"></div>
  114.         </div>
  115.     </div>
  116.    
  117.     <div class="col-12 order-12 text-center">
  118.         <a data-toggle="tooltip" title="HTML by SparlyCodes" href="/SparklyCodes"> <i class="fad fa-code"></i></a>
  119.     </div>
  120. </div>
RAW Paste Data