API tools faq
paste
Advertisement
SparklyLightus

Dagger

SparklyLightus
Aug 27th, 2021
1,375
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.41 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. fal fa-dagger >> ICON USED
  3.    >> ICON IS ROTATED BY 45 DEGREES, TO REMOVE THE ROTATION DELETE ANY style="transform: rotate(45deg)" YOU COME ACROSS! there's 8 of them!
  4. #999999 >> SAMPLE COLOR
  5. -->
  6. <div class="mx-3 p-0 mx-auto row no-gutters bg-faded" style="margin-top: 60px; max-width: 950px;">
  7.     <!-- LEFT -->
  8.     <div class="col-lg-3">
  9.         <!-- IMAGE -->
  10.         <div class="pt-2 px-2 bg-faded" style="margin-top: -40px;">
  11.             <div style="background: #999999 url('IMG_LINK') top center; background-size: cover;
  12.                height: 350px;"></div>
  13.         </div>
  14.         <!-- BASICS -->
  15.         <div class="p-2">
  16.             <!-- name -->
  17.             <h1 class="m-0 text-center text-primary font-weight-light display-4">
  18.                 <i class="fal fa-dagger" style="transform: rotate(45deg)"></i> Name <i class="fal fa-dagger" style="transform: rotate(45deg)"></i></h1>
  19.             <!-- info -->
  20.             <div class="m-1 row no-gutters">
  21.                 <b class="col-auto text-muted">NAME</b>
  22.                 <div class="col mx-2 mb-2 text-muted" style="border-bottom: 1px dotted;"></div>
  23.                 content</div>
  24.             <div class="m-1 row no-gutters">
  25.                 <b class="col-auto text-muted">AGE</b>
  26.                 <div class="col mx-2 mb-2 text-muted" style="border-bottom: 1px dotted;"></div>
  27.                 content</div>
  28.             <div class="m-1 row no-gutters">
  29.                 <b class="col-auto text-muted">GENDER</b>
  30.                 <div class="col mx-2 mb-2 text-muted" style="border-bottom: 1px dotted;"></div>
  31.                 content</div>
  32.             <div class="m-1 row no-gutters">
  33.                 <b class="col-auto text-muted">HEIGHT</b>
  34.                 <div class="col mx-2 mb-2 text-muted" style="border-bottom: 1px dotted;"></div>
  35.                 content</div>
  36.             <div class="m-1 row no-gutters">
  37.                 <b class="col-auto text-muted">RACE</b>
  38.                 <div class="col mx-2 mb-2 text-muted" style="border-bottom: 1px dotted;"></div>
  39.                 content</div>
  40.             <div class="m-1 row no-gutters">
  41.                 <b class="col-auto text-muted">ORIENTATION</b>
  42.                 <div class="col mx-2 mb-2 text-muted" style="border-bottom: 1px dotted;"></div>
  43.                 content</div>
  44.             <div class="m-1 row no-gutters">
  45.                 <b class="col-auto text-muted">JOB</b>
  46.                 <div class="col mx-2 mb-2 text-muted" style="border-bottom: 1px dotted;"></div>
  47.                 content</div>
  48.         </div>
  49.         <!-- COLORS -->
  50.         <div class="pb-2 text-center">
  51.             <!-- PALETTE - change the #999999 for the color u want -->
  52.             <i class="fas fa-star fa-2x" style="color: #999999;"></i>
  53.             <i class="fas fa-star fa-2x" style="color: #999999;"></i>
  54.             <i class="fas fa-star fa-2x" style="color: #999999;"></i>
  55.             <i class="fas fa-star fa-2x" style="color: #999999;"></i>
  56.             <i class="fas fa-star fa-2x" style="color: #999999;"></i>
  57.         </div>
  58.     </div>
  59.     <!-- RIGHT -->
  60.     <div class="col-lg-9" style="height: 590px; overflow: auto;">
  61.         <div class="m-1 row no-gutters">
  62.             <!-- PARAGRAPHS -->
  63.             <div class="p-1 col-lg-12">
  64.                 <!-- FLOATING IMAGE -->
  65.                 <div class="m-2 float-right justify-content-center">
  66.                     <img class="rounded" src="IMG_LINK" style="max-width: 220px; max-height: 220px;">
  67.                 </div>
  68.                
  69.                 <!-- ----------- ABOUT -->
  70.                 <!-- TITLE -->
  71.                 <div class="p-1 card rounded-0 border-0"><div class="row no-gutters text-primary">
  72.                     <h1 class="m-0 col-auto font-weight-light"> About </h1>
  73.                         <div class="col mx-1 my-2" style="border-bottom: 1px dotted;"></div>
  74.                     <i class="m-1 fal fa-dagger fa-lg" style="transform: rotate(45deg)"></i></div>
  75.                 </div>
  76.                 <p class="m-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin finibus volutpat elit, nec consequat lectus aliquam et. Ut at consequat tortor, ut viverra leo. Phasellus quis ligula condimentum, feugiat ligula a, viverra erat. Fusce vitae odio eget elit cursus volutpat. Ut luctus nisi magna, ut porta nisi scelerisque sed. Nulla tincidunt ipsum a odio porttitor faucibus. Vivamus ullamcorper neque non lorem faucibus, eu viverra turpis accumsan. </p>
  77.                
  78.                 <!-- ----------- BACKGROUND -->
  79.                 <!-- TITLE -->
  80.                 <div class="p-1 card rounded-0 border-0"><div class="row no-gutters text-primary">
  81.                     <h1 class="m-0 col-auto font-weight-light"> Background </h1>
  82.                         <div class="col mx-1 my-2" style="border-bottom: 1px dotted;"></div>
  83.                     <i class="m-1 fal fa-dagger fa-lg" style="transform: rotate(45deg)"></i></div>
  84.                 </div>
  85.                 <p class="m-1">Mauris id nisl nec odio ultrices ultricies quis nec tortor. Etiam convallis sem orci, ut ullamcorper purus rhoncus eu. Quisque euismod eros neque, id euismod ex commodo vel. Etiam a massa et magna porttitor vulputate. Donec pulvinar dolor sit amet tortor tincidunt, sed consectetur velit fringilla. Mauris at risus et ante luctus malesuada in rutrum neque.</p>
  86.                 <p class="m-1">Maecenas suscipit elementum sem ut aliquet. Pellentesque hendrerit ex ut ex placerat, vitae mollis metus pharetra. Aenean varius, eros sed tincidunt hendrerit, sem massa maximus neque, sollicitudin molestie metus sem at justo. Donec in dui maximus, semper lorem eget, blandit dui. Quisque sagittis ante sit amet odio sodales, in pretium ipsum tempor. Curabitur ac euismod sem. Donec iaculis nunc at ex commodo, tempor tincidunt lorem pretium. Cras metus ante, posuere ac diam et, lacinia bibendum metus. Quisque quis tellus a odio laoreet accumsan.</p>
  87.             </div>
  88.             <!-- LIKES -->
  89.             <div class="p-1 col-lg-6">
  90.                 <!-- TITLE -->
  91.                 <div class="p-1 card rounded-0 border-0"><div class="row no-gutters text-primary">
  92.                     <h1 class="m-0 col-auto font-weight-light"> Likes </h1>
  93.                         <div class="col mx-1 my-2" style="border-bottom: 1px dotted;"></div>
  94.                     <i class="m-1 fal fa-dagger fa-lg" style="transform: rotate(45deg)"></i></div>
  95.                 </div>
  96.                 <ul class="m-0">
  97.                     <li>Lorem.</li>
  98.                     <li>Lorem.</li>
  99.                     <li>Lorem.</li>
  100.                     <li>Lorem.</li>
  101.                 </ul>
  102.             </div>
  103.             <!-- DISLIKES -->
  104.             <div class="p-1 col-lg-6">
  105.                 <!-- TITLE -->
  106.                 <div class="p-1 card rounded-0 border-0"><div class="row no-gutters text-primary">
  107.                     <h1 class="m-0 col-auto font-weight-light"> Dislikes </h1>
  108.                         <div class="col mx-1 my-2" style="border-bottom: 1px dotted;"></div>
  109.                     <i class="m-1 fal fa-dagger fa-lg" style="transform: rotate(45deg)"></i></div>
  110.                 </div>
  111.                 <ul class="m-0">
  112.                     <li>Lorem.</li>
  113.                     <li>Lorem.</li>
  114.                     <li>Lorem.</li>
  115.                     <li>Lorem.</li>
  116.                 </ul>
  117.             </div>
  118.             <!-- TRIVIA -->
  119.             <div class="p-1 col-lg-12">
  120.                 <!-- TITLE -->
  121.                 <div class="p-1 card rounded-0 border-0"><div class="row no-gutters text-primary">
  122.                     <h1 class="m-0 col-auto font-weight-light"> Trivia </h1>
  123.                         <div class="col mx-1 my-2" style="border-bottom: 1px dotted;"></div>
  124.                     <i class="m-1 fal fa-dagger fa-lg" style="transform: rotate(45deg)"></i></div>
  125.                 </div>
  126.                 <ul class="m-0">
  127.                     <li>Lorem.</li>
  128.                     <li>Lorem.</li>
  129.                     <li>Lorem.</li>
  130.                     <li>Lorem.</li>
  131.                 </ul>
  132.             </div>
  133.             <!-- RELATIONSHIPS -->
  134.             <div class="p-1 col-lg-12">
  135.                 <!-- TITLE -->
  136.                 <div class="p-1 card rounded-0 border-0"><div class="row no-gutters text-primary">
  137.                     <h1 class="m-0 col-auto font-weight-light"> Relationships </h1>
  138.                         <div class="col mx-1 my-2" style="border-bottom: 1px dotted;"></div>
  139.                     <i class="m-1 fal fa-dagger fa-lg" style="transform: rotate(45deg)"></i></div>
  140.                 </div>
  141.                 <div class="m-1 mt-2 row no-gutters text-center">
  142.                     <!-- PERSON -->
  143.                     <div class="px-2 col-lg-4">
  144.                         <div class="justify-content-center">
  145.                             <!-- IMAGE --> <div class="rounded-circle" style="background: url('IMG_LINK'); background-size: cover; height: 150px; width: 150px;">
  146.                                 <!-- LINK --> <a href="LINK" class="btn btn-outline-secondary rounded-circle h-100 w-100" style="border: 3px solid; opacity: 0.6;"></a>
  147.                             </div>
  148.                         </div>
  149.                         <h1 class="m-0 col-auto font-weight-light">Name</h1>
  150.                         <p class="m-0 text-secondary">RELATIONSHIP</p>
  151.                         <p>Maecenas suscipit elementum sem ut aliquet. Pellentesque hendrerit ex ut ex placerat, vitae mollis metus pharetra. Aenean varius, eros sed tincidunt hendrerit, sem massa maximus neque, sollicitudin molestie metus sem at justo.</p>
  152.                     </div>
  153.                     <!-- PERSON -->
  154.                     <div class="px-2 col-lg-4">
  155.                         <div class="justify-content-center">
  156.                             <!-- IMAGE --> <div class="rounded-circle" style="background: url('IMG_LINK'); background-size: cover; height: 150px; width: 150px;">
  157.                                 <!-- LINK --> <a href="LINK" class="btn btn-outline-secondary rounded-circle h-100 w-100" style="border: 3px solid; opacity: 0.6;"></a>
  158.                             </div>
  159.                         </div>
  160.                         <h1 class="m-0 col-auto font-weight-light">Name</h1>
  161.                         <p class="m-0 text-secondary">RELATIONSHIP</p>
  162.                         <p>Maecenas suscipit elementum sem ut aliquet. Pellentesque hendrerit ex ut ex placerat, vitae mollis metus pharetra. Aenean varius, eros sed tincidunt hendrerit, sem massa maximus neque, sollicitudin molestie metus sem at justo.</p>
  163.                     </div>
  164.                     <!-- PERSON -->
  165.                     <div class="px-2 col-lg-4">
  166.                         <div class="justify-content-center">
  167.                             <!-- IMAGE --> <div class="rounded-circle" style="background: url('IMG_LINK'); background-size: cover; height: 150px; width: 150px;">
  168.                                 <!-- LINK --> <a href="LINK" class="btn btn-outline-secondary rounded-circle h-100 w-100" style="border: 3px solid; opacity: 0.6;"></a>
  169.                             </div>
  170.                         </div>
  171.                         <h1 class="m-0 col-auto font-weight-light">Name</h1>
  172.                         <p class="m-0 text-secondary">RELATIONSHIP</p>
  173.                         <p>Maecenas suscipit elementum sem ut aliquet. Pellentesque hendrerit ex ut ex placerat, vitae mollis metus pharetra. Aenean varius, eros sed tincidunt hendrerit, sem massa maximus neque, sollicitudin molestie metus sem at justo.</p>
  174.                     </div>
  175.                    
  176.                     <!-- feel free to add more -->
  177.                 </div>
  178.             </div>
  179.         </div>
  180.     </div>
  181.     <!-- MOODBOARD -->
  182.     <div class="py-2 pl-2 col-3">
  183.         <div style="background: url('IMG_LINK'); background-size: cover; height: 200px; width: 100%;"></div></div>
  184.     <div class="py-2 col-3">
  185.         <div style="background: url('IMG_LINK'); background-size: cover; height: 200px; width: 100%;"></div></div>
  186.     <div class="py-2 col-3">
  187.         <div style="background: url('IMG_LINK'); background-size: cover; height: 200px; width: 100%;"></div></div>
  188.     <div class="py-2 pr-2 col-3">
  189.         <div style="background: url('IMG_LINK'); background-size: cover; height: 200px; width: 100%;"></div></div>
  190. </div>
  191. <!-- .......................... CREDITS -->
  192. <p class="text-right mx-auto" style="max-width: 950px;">
  193.     <a data-toggle="tooltip" title="HTML by SparklyCodes" href="/SparklyCodes"> <i class="fal fa-code"></i> </a>
  194. </p>
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!