API tools faq
paste
SparklyLightus

Rewind - Custom

SparklyLightus
Sep 15th, 2021 (edited)
504
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.61 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    222222 >> TEXT
  3.    D8E0FF >> BACKGROUND
  4.    4055B1 >> FADED
  5.    2D429E >> BORDERS
  6. -->
  7. <div class="m-3 mx-auto row no-gutters" style="max-width: 1000px; color: #222222;">
  8.    
  9.     <!-- HEADER -->
  10.     <div class="col-12">
  11.         <div class="m-1 p-2 rounded" style="background: #D8E0FF; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15)">
  12.             <h1 class="m-0 text-center font-weight-light" style="color: #4055B1">
  13.                 <i class="fal fa-quote-left"></i>
  14.                     There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
  15.                 <i class="fal fa-quote-right"></i> <br>
  16.                
  17.                 <small><a href="SONGLINK" style="color: #4055B1"> Theme_song <i class="fal fa-music fa-sm"></i></a></small>
  18.             </h1>
  19.         </div>
  20.     </div> <!-- end header -->
  21.    
  22.     <!-- IMAGE -->
  23.     <div class="col-md-4">
  24.         <div class="m-1 rounded" style="background: #4055B1; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); overflow: hidden">
  25.             <!-- IMAGE - FOCUS ON TOP CENTER -->
  26.             <div style="background: url('IMG_LINK') top center; background-size: cover; height: 397px;" class="w-100"></div>
  27.         </div>
  28.     </div> <!-- end image -->
  29.     <!-- CORE -->
  30.     <div class="col-md-8">
  31.         <div class="m-1 p-2 rounded overflow-auto" style="background: #D8E0FF; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); height: 400px;">
  32.             <h1 class="font-weight-light" style="color: #4055B1"><i class="fal fa-info-circle"></i> Core</h1>
  33.             <!-- BASICS -->
  34.             <div class="m-n1 row no-gutters">
  35.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Name</strong>
  36.                 <div class="m-1 p-1 col">Information</div>
  37.             </div>
  38.             <div class="m-n1 row no-gutters">
  39.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Gender</strong>
  40.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  41.                
  42.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Orientation</strong>
  43.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  44.             </div>
  45.             <div class="m-n1 row no-gutters">
  46.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Age</strong>
  47.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  48.                
  49.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Status</strong>
  50.                 <div class="m-1 p-1 col-sm col-8">NFS</div>
  51.             </div>
  52.             <!-- PERSONALITY -->
  53.             <div class="m-n1 row no-gutters">
  54.                 <strong class="m-1 p-1 px-2 col-sm-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Personality</strong>
  55.                 <div class="m-n1 p-1 col">
  56.                     <p class="m-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue lectus, pulvinar in pharetra in, congue eu ligula. Pellentesque sed dapibus dui. Ut volutpat eros ut justo vulputate, ac vehicula erat ornare. Cras ac laoreet odio, sed sodales nibh. Nulla sed luctus dolor, vel convallis magna. Nunc ut quam bibendum, consequat enim in, pharetra urna. Morbi eget turpis suscipit, tincidunt nisl eget, volutpat tellus.</p>
  57.                     <p class="m-1">Aliquam ut neque hendrerit, fringilla ligula at, viverra augue. Nullam ac magna quis ligula scelerisque convallis. Vivamus at leo eu erat aliquet iaculis. Maecenas eget ante ac eros bibendum consequat. Sed et finibus elit. Ut convallis mi libero, nec convallis felis vestibulum ac. Mauris congue nulla vitae elit consequat feugiat. Quisque eu faucibus ligula.</p>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </div> <!-- end core -->
  62.    
  63.     <!-- APPEARANCE -->
  64.     <div class="col-md-6">
  65.         <div class="m-1 p-2 rounded overflow-auto" style="background: #D8E0FF; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); height: 350px;">
  66.             <h1 class="font-weight-light" style="color: #4055B1"><i class="fal fa-eye"></i> Appearance</h1>
  67.             <!-- BASICS -->
  68.             <div class="m-n1 row no-gutters">
  69.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Race</strong>
  70.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  71.                
  72.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Height</strong>
  73.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  74.             </div>
  75.             <div class="m-n1 row no-gutters">
  76.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Body Shape</strong>
  77.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  78.                
  79.                 <strong class="m-1 p-1 px-2 col-3  align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Ethnicity</strong>
  80.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  81.             </div>
  82.             <!-- DESCRIPTION -->
  83.             <div class="m-n1 row no-gutters">
  84.                 <strong class="m-1 p-1 px-2 col-sm-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Description</strong>
  85.                 <div class="m-n1 p-1 col">
  86.                     <p class="m-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque augue lectus, pulvinar in pharetra in, congue eu ligula. Pellentesque sed dapibus dui. Ut volutpat eros ut justo vulputate, ac vehicula erat ornare. Cras ac laoreet odio, sed sodales nibh. Nulla sed luctus dolor, vel convallis magna. Nunc ut quam bibendum, consequat enim in, pharetra urna. Morbi eget turpis suscipit, tincidunt nisl eget, volutpat tellus.</p>
  87.                     <p class="m-1">Aliquam ut neque hendrerit, fringilla ligula at, viverra augue. Nullam ac magna quis ligula scelerisque convallis. Vivamus at leo eu erat aliquet iaculis. Maecenas eget ante ac eros bibendum consequat. Sed et finibus elit. Ut convallis mi libero, nec convallis felis vestibulum ac. Mauris congue nulla vitae elit consequat feugiat. Quisque eu faucibus ligula.</p>
  88.                 </div>
  89.             </div>
  90.         </div>
  91.     </div> <!-- end appearance -->
  92.     <!-- PERSONAL -->
  93.     <div class="col-md-6">
  94.         <div class="m-1 p-2 rounded overflow-auto" style="background: #D8E0FF; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); height: 350px;">
  95.             <h1 class="font-weight-light" style="color: #4055B1"><i class="fal fa-brain"></i> Personal</h1>
  96.             <!-- BASICS -->
  97.             <div class="m-n1 row no-gutters">
  98.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Likes</strong>
  99.                 <div class="m-1 p-1 col-sm col-8">Information, information, information, information</div>
  100.                
  101.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Dislikes</strong>
  102.                 <div class="m-1 p-1 col-sm col-8">Information, information, information, information</div>
  103.             </div>
  104.             <div class="m-n1 row no-gutters">
  105.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Fears</strong>
  106.                 <div class="m-1 p-1 col-sm col-8">Information, information, information, information</div>
  107.                
  108.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Hobbies</strong>
  109.                 <div class="m-1 p-1 col-sm col-8">Information, information, information, information</div>
  110.             </div>
  111.             <div class="m-n1 row no-gutters">
  112.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Talents</strong>
  113.                 <div class="m-1 p-1 col-sm col-8">Information, information, information, information</div>
  114.                
  115.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Skills</strong>
  116.                 <div class="m-1 p-1 col-sm col-8">Information, information, information, information</div>
  117.             </div>
  118.         </div>
  119.     </div> <!-- end personal -->
  120.    
  121.     <!-- SOCIAL -->
  122.     <div class="col-md-8">
  123.         <div class="m-1 p-2 rounded overflow-auto" style="background: #D8E0FF; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); height: 370px;">
  124.             <h1 class="font-weight-light" style="color: #4055B1"><i class="fal fa-handshake"></i> Social</h1>
  125.             <!-- BASICS -->
  126.             <div class="m-n1 row no-gutters">
  127.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Titles/Job</strong>
  128.                 <div class="m-1 p-1 col-sm col-8">Information, information</div>
  129.                
  130.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Relationship Status</strong>
  131.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  132.             </div>
  133.             <!-- LINKS -->
  134.             <div class="m-n1 row no-gutters">
  135.                 <strong class="m-1 p-1 px-2 col-sm-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Relationships</strong>
  136.                 <div class="m-n1 p-1 col">
  137.                     <!-- PERSON -->
  138.                     <div class="p-1">
  139.                         <a class="mx-0 p-1 px-2 btn justify-content-between font-weight-bold" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"
  140.                            href="LINK"> <span>Name</span> Relationship</a>
  141.                         <div class="p-1 float-left justify-content-center">
  142.                             <img src="IMG_LINK" style="height: 100px; width: 100px; border-radius: 15px;"></div>
  143.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  144.                     </div> <hr class="m-0" style="background: #2D429E;">
  145.                     <!-- PERSON -->
  146.                     <div class="p-1">
  147.                         <a class="mx-0 p-1 px-2 btn justify-content-between font-weight-bold" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"
  148.                            href="LINK"> <span>Name</span> Relationship</a>
  149.                         <div class="p-1 float-left justify-content-center">
  150.                             <img src="IMG_LINK" style="height: 100px; width: 100px; border-radius: 15px;"></div>
  151.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  152.                     </div> <hr class="m-0" style="background: #2D429E;">
  153.                     <!-- PERSON -->
  154.                     <div class="p-1">
  155.                         <a class="mx-0 p-1 px-2 btn justify-content-between font-weight-bold" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"
  156.                            href="LINK"> <span>Name</span> Relationship</a>
  157.                         <div class="p-1 float-left justify-content-center">
  158.                             <img src="IMG_LINK" style="height: 100px; width: 100px; border-radius: 15px;"></div>
  159.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  160.                     </div> <hr class="m-0" style="background: #2D429E;">
  161.                     <!-- PERSON -->
  162.                     <div class="p-1">
  163.                         <a class="mx-0 p-1 px-2 btn justify-content-between font-weight-bold" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"
  164.                            href="LINK"> <span>Name</span> Relationship</a>
  165.                         <div class="p-1 float-left justify-content-center">
  166.                             <img src="IMG_LINK" style="height: 100px; width: 100px; border-radius: 15px;"></div>
  167.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</p>
  168.                     </div> <hr class="m-0" style="background: #2D429E;">
  169.                     <!-- ADD MORE ABOVE HERE -->
  170.                 </div>
  171.             </div>
  172.         </div>
  173.     </div> <!-- end social -->
  174.     <!-- MOODBOARD -->
  175.     <div class="col-md-4 row no-gutters">
  176.         <div class="p-1 col-md-6 col-3 h-md-50"> <div class="rounded h-100" style="border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); overflow: hidden">
  177.             <div style="background: url('IMG_LINK') center;
  178.            background-size: cover; min-height: 150px" class="w-100 h-100"></div>
  179.         </div> </div>
  180.         <div class="p-1 col-md-6 col-3 h-md-50"> <div class="rounded h-100" style="border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); overflow: hidden">
  181.             <div style="background: url('IMG_LINK') center;
  182.            background-size: cover; min-height: 150px" class="w-100 h-100"></div>
  183.         </div> </div>
  184.         <div class="p-1 col-md-6 col-3 h-md-50"> <div class="rounded h-100" style="border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); overflow: hidden">
  185.             <div style="background: url('IMG_LINK') center;
  186.            background-size: cover; min-height: 150px" class="w-100 h-100"></div>
  187.         </div> </div>
  188.         <div class="p-1 col-md-6 col-3 h-md-50"> <div class="rounded h-100" style="border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); overflow: hidden">
  189.             <div style="background: url('IMG_LINK') center;
  190.            background-size: cover; min-height: 150px" class="w-100 h-100"></div>
  191.         </div> </div>
  192.     </div> <!-- end moodboard -->
  193.    
  194.     <!-- TRIVIA -->
  195.     <div class="col-md-5">
  196.         <div class="m-1 p-2 rounded overflow-auto" style="background: #D8E0FF; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); height: 300px;">
  197.             <h1 class="font-weight-light" style="color: #4055B1"><i class="fal fa-search"></i> Trivia</h1>
  198.             <ul class="m-0 list-unstyled">
  199.                 <li><i class="mb-1 p-1 fas fa-star" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  200.                 <li><i class="mb-1 p-1 fas fa-star" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  201.                 <li><i class="mb-1 p-1 fas fa-star" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  202.                 <li><i class="mb-1 p-1 fas fa-star" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  203.                 <li><i class="mb-1 p-1 fas fa-star" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  204.             </ul>
  205.         </div>
  206.     </div> <!-- end trivia -->
  207.     <!-- BACKGROUND -->
  208.     <div class="col-md-7">
  209.         <div class="m-1 p-2 rounded overflow-auto" style="background: #D8E0FF; border: 2px solid #2D429E; box-shadow: 7px 7px rgba(0,0,0,.15); height: 300px;">
  210.             <h1 class="font-weight-light" style="color: #4055B1"><i class="fal fa-atlas"></i> Background</h1>
  211.             <!-- BASICS -->
  212.             <div class="m-n1 row no-gutters">
  213.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Residence</strong>
  214.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  215.                
  216.                 <strong class="m-1 p-1 px-2 col-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Origin</strong>
  217.                 <div class="m-1 p-1 col-sm col-8">Information</div>
  218.             </div>
  219.             <!-- LINKS -->
  220.             <div class="m-n1 row no-gutters">
  221.                 <strong class="m-1 p-1 px-2 col-sm-3 align-items-center justify-content-center" style="background: #4055B1; color: #D8E0FF; border-radius: 15px;">Story</strong>
  222.                 <div class="m-n1 p-1 col">
  223.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id egestas ligula, quis tincidunt felis. Pellentesque auctor nisi vel diam pharetra, a pretium odio porttitor. Nunc mattis et libero in maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque mauris lacus, aliquam a venenatis a, sodales eu orci. In hac habitasse platea dictumst.</p>
  224.                     <p>In vel magna sed enim semper egestas vitae sit amet orci. In pellentesque nunc at eros placerat facilisis. Pellentesque nec hendrerit diam, quis semper risus. Suspendisse posuere iaculis turpis non venenatis.</p>
  225.                     <p>Aliquam congue eros commodo pellentesque egestas. Phasellus ipsum nisi, maximus vel cursus vel, dictum in tortor. Vivamus in risus orci. Nulla facilisi. In commodo at libero eget iaculis. Suspendisse porttitor erat non nisl ornare, suscipit facilisis quam suscipit. Ut dictum nisl non diam convallis efficitur. Fusce facilisis suscipit risus sit amet vestibulum. Fusce aliquam, ipsum ac hendrerit imperdiet, elit nisi mattis dui, eget convallis justo est eu lacus.</p>
  226.                     <p>Vivamus non tellus eget odio scelerisque ultrices non ac arcu. Maecenas a tempor ante. Donec egestas tellus id felis rutrum fringilla. Aliquam ut ligula quam. Praesent sagittis sapien aliquam metus viverra, a finibus felis hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  227.                 </div>
  228.             </div>
  229.         </div>
  230.     </div> <!-- end background -->
  231.    
  232.     <!-- CREDIT -->
  233.     <a data-toggle="tooltip" title="HTML by SparklyCodes" href="/SparklyCodes"> <i class="fal fa-code"></i> </a>
  234. </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!