API tools faq
paste
Advertisement
SparklyLightus

Design focused

SparklyLightus
Jan 20th, 2022
1,240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.16 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-2 mx-auto row no-gutters" style="max-width: 1000px">
  2.     <!-- ......................... HEADER -->
  3.     <div class="p-1 col-12 order-lg-1">
  4.         <div class="p-2 card rounded-0 align-items-center justify-content-center" style="border-width: 3px; height: 200px;
  5.        background: url('IMGLINK') center; background-size: cover;">
  6.            
  7.             <div class="py-3 px-5 card rounded-0" style="border-width: 2px; background: none">
  8.                 <h1 class="m-0 display-4">Name</h1>
  9.             </div>
  10.            
  11.         </div>
  12.     </div>
  13.     <!-- ......................... CONTENT -->
  14.     <div class="col-lg-11 order-lg-3">
  15.         <div class="row no-gutters">
  16.             <!-- ......................... ABOUT -->
  17.             <div class="p-1 col-lg-9">
  18.                 <div class="card rounded-0 bg-faded" style="border-width: 3px;">
  19.                     <h3 class="mt-n3 ml-n2" style="z-index: 999"><span class="p-1 px-2 bg-primary text-uppercase"><i class="fas fa-search"></i> About</span></h3>
  20.                     <div class="p-2 pt-3 overflow-auto" style="height: 280px; text-indent: 20px; margin-top: -13px">
  21.                         <p>Introduce your character here. It can be as long as you like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum odio accumsan urna sodales, quis porttitor nunc suscipit. Maecenas et feugiat massa. Fusce augue velit, suscipit id finibus in, fermentum nec elit. Nulla vestibulum libero pharetra elementum cursus. Curabitur iaculis nisl sit amet velit sollicitudin interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus cursus magna non porta.</p>
  22.                         <p>Donec volutpat sapien ligula, sit amet lacinia lacus lobortis quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies metus a vestibulum molestie. Cras pulvinar fringilla odio, sed aliquet enim molestie et. Duis dolor tortor, pretium eget dui ut, ullamcorper efficitur dolor. Quisque sodales enim et metus sagittis, ac dictum orci imperdiet. Ut aliquam mauris nec nulla lobortis, at ornare lorem vulputate. Donec imperdiet turpis tellus, vitae convallis metus condimentum sed. Sed non pulvinar ex, et feugiat ipsum. Praesent dignissim tincidunt dolor ac faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce at elementum nulla, et gravida dolor. Aliquam egestas, nibh nec fringilla laoreet, est augue porttitor ipsum, et facilisis arcu augue sit amet arcu. Mauris tristique purus et felis tempor, nec gravida nunc commodo. Nulla nec rhoncus felis, luctus dictum erat. Duis vitae viverra nisl. </p>
  23.                     </div>
  24.                 </div>
  25.             </div>
  26.             <!-- ......................... BASICS -->
  27.             <div class="p-1 col-lg-3">
  28.                 <div class="card rounded-0 bg-faded" style="border-width: 3px;">
  29.                     <h3 class="mt-n3 ml-n2" style="z-index: 999"><span class="p-1 px-2 bg-primary text-uppercase"><i class="fas fa-list-ul"></i> Basics</span></h3>
  30.                     <div class="p-2 pt-3 overflow-auto" style="height: 280px; margin-top: -13px">
  31.                         <div>
  32.                             <div class="ml-2">Information</div>
  33.                             <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">NAME</div> <hr class="m-0 mt-1 w-75">
  34.                         </div>
  35.                         <div>
  36.                             <div class="ml-2">Information</div>
  37.                             <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">AGE</div> <hr class="m-0 mt-1 w-75">
  38.                         </div>
  39.                         <div>
  40.                             <div class="ml-2">Information</div>
  41.                             <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">GENDER</div> <hr class="m-0 mt-1 w-75">
  42.                         </div>
  43.                         <div>
  44.                             <div class="ml-2">Information</div>
  45.                             <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">RACE</div> <hr class="m-0 mt-1 w-75">
  46.                         </div>
  47.                         <div>
  48.                             <div class="ml-2">Information</div>
  49.                             <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">HEIGHT</div> <hr class="m-0 mt-1 w-75">
  50.                         </div>
  51.                         <div>
  52.                             <div class="ml-2">Information</div>
  53.                             <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">WEIGHT</div> <hr class="m-0 mt-1 w-75">
  54.                         </div>
  55.                        
  56.                     </div>
  57.                 </div>
  58.             </div>
  59.            
  60.             <!-- ......................... HEADER -->
  61.             <div class="p-1 col-12">
  62.                 <div class="p-2 card rounded-0 bg-faded text-uppercase text-center" style="border-width: 3px">
  63.                     <h3 class="m-0">Design</h3>
  64.                 </div>
  65.             </div>
  66.            
  67.             <!-- ......................... NOTES -->
  68.             <div class="col-lg-4 row no-gutters">
  69.                 <!-- ......................... ABOUT -->
  70.                 <div class="p-1 col-lg-12 col-sm-6">
  71.                     <div class="card rounded-0 bg-faded" style="border-width: 3px;">
  72.                         <h3 class="mt-n3 ml-n2" style="z-index: 999"><span class="p-1 px-2 bg-primary text-uppercase"><i class="fas fa-pencil"></i> Notes</span></h3>
  73.                         <ul class="mb-0 p-2 pt-3 pl-4 overflow-auto" style="height: 190px; margin-top: -13px">
  74.                             <li>Pellentesque blandit lobortis magna, vitae euismod massa sodales ac.</li>
  75.                             <li>Vivamus sollicitudin luctus est, nec lacinia enim tincidunt sit amet.</li>
  76.                             <li>Sed quis felis sodales lorem facilisis tempus. Donec quis neque sed odio viverra laoreet vulputate at quam.</li>
  77.                             <li>Cras pretium ligula eu porta porttitor. Suspendisse vitae sapien tempus, semper sem et, fermentum lacus.</li>
  78.                             <li>Curabitur sit amet urna diam. Cras cursus orci et tortor viverra finibus.</li>
  79.                         </ul>
  80.                     </div>
  81.                 </div>
  82.                 <!-- ......................... BASICS -->
  83.                 <div class="p-1 col-lg-12 col-sm-6">
  84.                     <div class="card rounded-0 bg-faded" style="border-width: 3px;">
  85.                         <h3 class="mt-n3 ml-n2" style="z-index: 999"><span class="p-1 px-2 bg-primary text-uppercase"><i class="fas fa-gem"></i> Appearance</span></h3>
  86.                         <div class="p-2 pt-3 overflow-auto row no-gutters" style="height: 190px; margin-top: -13px">
  87.                             <div class="col-6">
  88.                                 <div class="ml-2">Information</div>
  89.                                 <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">EYES</div> <hr class="m-0 mt-1 w-75">
  90.                             </div>
  91.                             <div class="col-6">
  92.                                 <div class="ml-2">Information</div>
  93.                                 <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">HAIR</div> <hr class="m-0 mt-1 w-75">
  94.                             </div>
  95.                             <div class="col-6">
  96.                                 <div class="ml-2">Information</div>
  97.                                 <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">SKIN</div> <hr class="m-0 mt-1 w-75">
  98.                             </div>
  99.                             <div class="col-6">
  100.                                 <div class="ml-2">Information</div>
  101.                                 <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">AESTHETIC</div> <hr class="m-0 mt-1 w-75">
  102.                             </div>
  103.                             <div class="col-6">
  104.                                 <div class="ml-2">Information</div>
  105.                                 <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">BUILD</div> <hr class="m-0 mt-1 w-75">
  106.                             </div>
  107.                             <div class="col-6">
  108.                                 <div class="ml-2">Information</div>
  109.                                 <div class="mt-n1 text-secondary text-left" style="font-size: .8em; letter-spacing: 1.5px">DEMEANOR</div> <hr class="m-0 mt-1 w-75">
  110.                             </div>
  111.                         </div>
  112.                     </div>
  113.                 </div>
  114.             </div>
  115.             <!-- ......................... REFERENCE IMAGE -->
  116.             <div class="p-1 col-lg-8">
  117.                 <!-- IMAGE -->
  118.                 <div class="card rounded-0 bg-faded" style="border-width: 3px; height: 400px;
  119.                background: url('IMGLINK') top center; background-size: cover;">
  120.                    
  121.                     <p style="z-index: 999; position: absolute; bottom: -10px; left: -10px">
  122.                         <a class="p-1 px-2 btn btn-primary rounded-0 text-uppercase"
  123.                        href="REFERENCELINK"> <!-- LINK TO REFERENCE -->
  124.                             <i class="fas fa-link"></i> Full resolution
  125.                         </a>
  126.                     </p>
  127.                    
  128.                 </div>
  129.             </div>
  130.            
  131.         </div>
  132.     </div>
  133.     <!-- ......................... SIDEBAR -->
  134.     <div class="p-1 col-lg-1 order-lg-2 d-flex flex-lg-column flex-row">
  135.         <!-- PALETTE -->
  136.         <div style="background-color: #111111; border-width: 3px;" class="mr-1 mr-lg-0 p-3 pt-lg-5 card rounded-0"> </div>
  137.         <div style="background-color: #222222; border-width: 3px;" class="mr-1 mr-lg-0 mt-lg-2 p-3 pt-lg-5 card rounded-0"> </div>
  138.         <div style="background-color: #333333; border-width: 3px;" class="mr-1 mr-lg-0 mt-lg-2 p-3 pt-lg-5 card rounded-0"> </div>
  139.         <div style="background-color: #444444; border-width: 3px;" class="mr-1 mr-lg-0 mt-lg-2 p-3 pt-lg-5 card rounded-0"> </div>
  140.        
  141.         <!-- CREDITS BOX -->
  142.         <div class="mt-lg-2 card rounded-0 bg-faded justify-content-end flex-fill" style="border-width: 3px;">
  143.             <div class="p-2 w-100 text-center row no-gutters">
  144.                 <!-- OWNER CREDIT -->
  145.                 <a href="LINK" class="mb-1 tooltipster col-lg-12 col" title="Owner"> <i class="fas fa-user"></i> </a>
  146.                 <!-- DESIGNER CREDIT -->
  147.                 <a href="LINK" class="mb-1 tooltipster col-lg-12 col" title="Designer"> <i class="fas fa-paint-brush"></i> </a>
  148.                 <!-- CODE CREDIT - DO NOT REMOVE/EDIT -->
  149.                 <a href="/SparklyCodes" class="mb-1 tooltipster col-lg-12 col" title="Code by SparklyCodes"> <i class="fas fa-code"></i> </a>
  150.             </div>
  151.         </div>
  152.     </div>
  153. </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!