API tools faq
paste
Advertisement
SparklyLightus

Five - Custom Colors

SparklyLightus
Jun 11th, 2021
681
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.63 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. OUTLINE: #7BB5E1
  3. BACKGROUND: #E8F5FF
  4. RELATIONSHIP BACKGROUND: #D6EDFF
  5. TEXT: #164466
  6. -->
  7. <div class="m-3 p-1 card border-0 mx-auto" style="max-width: 900px; background-color: #7BB5E1; color: #164466;"><div class="row no-gutters">
  8.     <!-- LEFT -->
  9.     <div class="col-lg-5">
  10.         <!-- IMAGE -->
  11.         <div class="m-1 rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 400px;"></div>
  12.         <!-- INFO -->
  13.         <div class="m-1 p-0 card border-0" style="background-color: #E8F5FF;"><div class="p-2" style="height: 200px; overflow: auto;">
  14.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">NAME</b> Information</p>
  15.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">NICKNAME</b> Information</p>
  16.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">AGE</b> Information</p>
  17.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">GENDER</b> Information</p>
  18.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">ORIENTATION</b> Information</p>
  19.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">RACE</b> Information</p>
  20.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">HEIGHT</b> Information</p>
  21.             <p class="m-0" style="border-bottom: 1px solid;"><b class="pull-right text-secondary">MBTI</b> Information</p>
  22.         </div></div>
  23.         <!-- MOODBOARD -->
  24.         <div class="mx-1 mb-1 row no-gutters">
  25.             <div class="pr-1 col"> <div class="rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
  26.             <div class="pr-1 col"> <div class="rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
  27.             <div class="col"> <div class="rounded" style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
  28.         </div>
  29.     </div>
  30.     <!-- RIGHT -->
  31.     <div class="col-lg-7">
  32.         <!-- BIO -->
  33.         <div class="m-1 p-0 card border-0" style="background-color: #E8F5FF;"><div class="p-2" style="height: 500px; overflow: auto;">
  34.             <p class="m-0 font-italic text-center">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
  35.            
  36.             <h2 class="m-0 text-primary"><i class="far fa-user"></i> ABOUT</h2>
  37.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur metus non auctor viverra. Pellentesque faucibus, nunc a commodo tempus, libero est ullamcorper lectus, a aliquam tellus nulla ut tortor. Proin elementum ut mauris eu ullamcorper. Morbi a dapibus mauris. Mauris mi justo, dignissim eu lacus quis, sodales vestibulum augue. Praesent mattis at nulla vitae fringilla. Morbi pretium, augue vitae viverra vestibulum, nunc est fringilla elit, ut tincidunt nunc neque sit amet nisi. Maecenas gravida magna ac auctor posuere. Etiam semper condimentum nisl, quis molestie neque iaculis a.</p>
  38.            
  39.             <h2 class="m-0 text-primary"><i class="far fa-book-open"></i> STORY</h2>
  40.             <p>Vivamus nec dictum velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam iaculis nisi nec augue lacinia lobortis nec in mauris. Donec bibendum eros id turpis posuere, non sollicitudin est pharetra. Donec commodo turpis nec diam lobortis luctus. Suspendisse in risus vel enim blandit laoreet vitae pulvinar turpis. Duis ut justo pulvinar, tempus felis eget, convallis turpis.</p>
  41.             <p>Nunc gravida, dui eget scelerisque molestie, dolor purus mollis mauris, sed ullamcorper felis metus eu erat. Suspendisse at lacus lectus. Nam porttitor varius tristique. Suspendisse ex arcu, condimentum sed luctus eget, tincidunt eu turpis.</p>
  42.            
  43.             <h2 class="m-0 text-primary"><i class="far fa-star"></i> TRIVIA</h2>
  44.             <ul class="m-0 pb-1 pl-4">
  45.                 <li>Duis nec tortor rutrum, gravida sem in, euismod dui. Vivamus sit amet sapien non dolor dictum vestibulum et vel sapien.</li>
  46.                 <li>Cras ut elit nec nunc posuere varius. Etiam luctus porttitor neque a fermentum.</li>
  47.                 <li>Proin rhoncus sollicitudin turpis, ultrices placerat dolor pulvinar ut. Duis vel elementum ante.</li>
  48.                 <li>Quisque mollis tempus lectus, viverra vulputate massa dapibus ac.</li>
  49.             </ul>
  50.         </div></div>
  51.         <!-- LINKS -->
  52.         <div class="m-1 p-0 card border-0" style="background-color: #E8F5FF;"><div class="p-1" style="height: 254px; overflow: auto;">
  53.             <!-- CHARACTER -->
  54.             <div class="m-0 mb-1 bg-faded rounded" style="min-height: 128px; background-color: #D6EDFF;">
  55.                 <img src="//via.placeholder.com/200" class="m-1 rounded float-left" style="width: 120px; height: 120px;">
  56.                 <p class="m-0 font-weight-bold text-secondary"><a href="LINK">NAME</a> <small>Relationship</small></p>
  57.                 <p class="m-0">Nulla aliquam vel sapien ac vulputate. Proin eleifend nibh nibh, quis porttitor enim bibendum at.</p>
  58.             </div>
  59.             <!-- CHARACTER -->
  60.             <div class="m-0 mb-1 bg-faded rounded" style="min-height: 128px; background-color: #D6EDFF;">
  61.                 <img src="//via.placeholder.com/200" class="m-1 rounded float-left" style="width: 120px; height: 120px;">
  62.                 <p class="m-0 font-weight-bold text-secondary"><a href="LINK">NAME</a> <small>Relationship</small></p>
  63.                 <p class="m-0">Nulla aliquam vel sapien ac vulputate. Proin eleifend nibh nibh, quis porttitor enim bibendum at.</p>
  64.             </div>
  65.             <!-- CHARACTER -->
  66.             <div class="m-0 mb-1 bg-faded rounded" style="min-height: 128px; background-color: #D6EDFF;">
  67.                 <img src="//via.placeholder.com/200" class="m-1 rounded float-left" style="width: 120px; height: 120px;">
  68.                 <p class="m-0 font-weight-bold text-secondary"><a href="LINK">NAME</a> <small>Relationship</small></p>
  69.                 <p class="m-0">Nulla aliquam vel sapien ac vulputate. Proin eleifend nibh nibh, quis porttitor enim bibendum at.</p>
  70.             </div>
  71.         </div></div>
  72.     </div>
  73. </div></div>
  74. <!-- CREDIT, DON'T MOVE -->
  75. <div class="col-12 text-center mt-n3 p-1">
  76.     <a data-toggle="tooltip" title="Profile by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  77. </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!