API tools faq
paste
SparklyLightus

Columns

SparklyLightus
Dec 4th, 2020
1,078
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.38 KB | None | 0 0
raw download clone embed print report
  1. <!-- HEADER -->
  2. <div class="row m-1">
  3.     <div class="col-lg m-1 p-2 card rounded-0 border-0 bg-faded">
  4.         <div class="card m-0 p-2 border-0 rounded-0 text-justify">
  5.             <!-- TEXT -->
  6.             <h3 class="m-0 text-center font-weight-light text-secondary">
  7.                 NAME
  8.                 <i class="fas fa-star"></i>
  9.                 PRONOUNS
  10.                 <i class="fas fa-star"></i>
  11.                 AGE
  12.                 <i class="fas fa-star"></i>
  13.                 MBTI
  14.                 <i class="fas fa-star"></i>
  15.                 COUNTRY
  16.             </h3>
  17.             <!-- SOCIAL MEDIAS -->
  18.             <div class="row m-0 p-1 mx-auto">
  19.                 <a href="//twitter.com" class="btn btn-outline-primary p-1 m-1" data-toggle="tooltip" title="Twitter" style="width: 50px;">
  20.                     <i class="fab fa-twitter"></i></a>
  21.                 <a href="//www.instagram.com" class="btn btn-outline-primary p-1 m-1" data-toggle="tooltip" title="Instagram" style="width: 50px;">
  22.                     <i class="fab fa-instagram"></i></a>
  23.                 <a href="//www.deviantart.com" class="btn btn-outline-primary p-1 m-1" data-toggle="tooltip" title="DeviantArt" style="width: 50px;">
  24.                     <i class="fab fa-deviantart"></i></a>
  25.                 <a href="//tumblr.com/" class="btn btn-outline-primary p-1 m-1" data-toggle="tooltip" title="Tumblr" style="width: 50px;">
  26.                     <i class="fab fa-tumblr"></i></a>
  27.                 <a href="//www.youtube.com" class="btn btn-outline-primary p-1 m-1" data-toggle="tooltip" title="Youtube" style="width: 50px;">
  28.                     <i class="fab fa-youtube"></i></a>
  29.                 <a href="//curiouscat.me" class="btn btn-outline-primary p-1 m-1" data-toggle="tooltip" title="Curious Cat" style="width: 50px;">
  30.                     <i class="fas fa-cat"></i></a>
  31.             </div>
  32.         </div>
  33.     </div>
  34. </div>
  35. <!-- FIRST ROW -->
  36. <div class="row m-1">
  37.     <!-- ABOUT -->
  38.     <div class="col-lg m-1 p-2 card rounded-0 border-0 bg-faded">
  39.         <div class="card m-0 p-2 border-0 rounded-0 text-justify" style="height: 450px; overflow: auto;">
  40.             <h2 class="m-1 font-weight-light text-secondary justify-content-between">About me <i class="fas fa-user"></i></h2>
  41.             <hr class="m-0">
  42.             <!-- TEXT -->
  43.             <p class="m-2">Say a few things about yourself. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et justo nisl. Maecenas commodo sodales dui, eget placerat purus commodo et. Mauris at tellus lacus. Pellentesque placerat, nunc in tincidunt consequat, lectus enim consectetur risus, mattis interdum mi lacus sed est. Curabitur vitae molestie lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget porta enim. Donec at luctus ipsum.</p>
  44.             <p class="m-2">Vivamus in tellus porta, pulvinar nisi a, fermentum felis. Morbi quis finibus odio. Phasellus auctor placerat nisl eget scelerisque. Nullam quis accumsan nisl. Pellentesque at sem ac ex fermentum pretium sed eu felis. Quisque vel leo nunc. Phasellus molestie, mi et iaculis vestibulum, mauris augue consequat justo, in egestas tellus mauris tempor nibh.</p>
  45.            
  46.             <h2 class="m-1 font-weight-light text-secondary justify-content-between">Interests <i class="fas fa-star"></i></h2>
  47.             <hr class="m-0">
  48.             <!-- TEXT -->
  49.             <ul class="m-2 pb-2">
  50.                 <li>Put some things you like here. These can be hobbies, shows, books, so on</li>
  51.                 <li>INFO</li>
  52.                 <li>INFO</li>
  53.                 <li>INFO</li>
  54.             </ul>
  55.         </div>
  56.     </div>
  57.     <!-- IMAGE/LIKES -->
  58.     <div class="col-lg p-0">
  59.         <!-- TOP -->
  60.         <div class="m-1 p-2 card rounded-0 border-0 bg-faded">
  61.             <!-- IMAGE - //via.placeholder.com/1000 -->
  62.             <div class="card m-0 border-0 rounded-0 text-justify text-secondary" style="background-image: url('//via.placeholder.com/1000'); background-size: cover; background-position: center; height: 230px; overflow: auto;"></div>
  63.         </div>
  64.         <!-- BOTTOM -->
  65.         <div class="m-1 p-2 card rounded-0 border-0 bg-faded">
  66.             <div class="card m-0 p-1 border-0 rounded-0 text-justify text-secondary" style="height: 200px; overflow: auto;">
  67.                 <div class="row m-0 p-0">
  68.                     <!-- LIKES -->
  69.                     <div class="col-lg p-0 m-1">
  70.                         <h2 class="m-1 font-weight-light text-success justify-content-between">Likes <i class="fas fa-check"></i></h2>
  71.                         <hr class="m-0">
  72.                         <ul>
  73.                             <li>INFO</li>
  74.                             <li>INFO</li>
  75.                             <li>INFO</li>
  76.                             <li>INFO</li>
  77.                         </ul>
  78.                     </div>
  79.                     <!-- DISLIKES -->
  80.                     <div class="col-lg p-0 m-1">
  81.                         <h2 class="m-1 font-weight-light text-danger justify-content-between">Dislikes <i class="fas fa-times"></i></h2>
  82.                         <hr class="m-0">
  83.                         <ul>
  84.                             <li>INFO</li>
  85.                             <li>INFO</li>
  86.                             <li>INFO</li>
  87.                             <li>INFO</li>
  88.                         </ul>
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.     </div>
  94.     <!-- FRIENDS -->
  95.     <div class="col-lg-3 m-1 p-2 card rounded-0 border-0 bg-faded">
  96.         <div class="card m-0 p-2 border-0 rounded-0 text-justify" style="height: 450px; overflow: auto;">
  97.             <h2 class="m-1 font-weight-light text-secondary justify-content-between">Friends <i class="fas fa-heart"></i></h2>
  98.             <hr class="m-0">
  99.             <!-- ICONS -->
  100.             <div class="row p-0 m-0 justify-content-center">
  101.                 <!-- PERSON -->
  102.                 <div class="col-auto m-1 p-0 text-center">
  103.                     <img src="//via.placeholder.com/200" class="img-thumbnail rounded-circle" style="height: 130px; width: 130px;"><br>
  104.                     <a href="LINK" class="btn btn-secondary p-1 m-1">Name</a>
  105.                 </div>
  106.                 <!-- PERSON -->
  107.                 <div class="col-auto m-1 p-0 text-center">
  108.                     <img src="//via.placeholder.com/200" class="img-thumbnail rounded-circle" style="height: 130px; width: 130px;"><br>
  109.                     <a href="LINK" class="btn btn-secondary p-1 m-1">Name</a>
  110.                 </div>
  111.                 <!-- PERSON -->
  112.                 <div class="col-auto m-1 p-0 text-center">
  113.                     <img src="//via.placeholder.com/200" class="img-thumbnail rounded-circle" style="height: 130px; width: 130px;"><br>
  114.                     <a href="LINK" class="btn btn-secondary p-1 m-1">Name</a>
  115.                 </div>
  116.                 <!-- PERSON -->
  117.                 <div class="col-auto m-1 p-0 text-center">
  118.                     <img src="//via.placeholder.com/200" class="img-thumbnail rounded-circle" style="height: 130px; width: 130px;"><br>
  119.                     <a href="LINK" class="btn btn-secondary p-1 m-1">Name</a>
  120.                 </div>
  121.             </div>
  122.         </div>
  123.     </div>
  124. </div>
  125. <!-- SECOND ROW -->
  126. <div class="row m-1">
  127.     <!-- MUSIC BOX -->
  128.     <div class="col-lg m-1 p-2 card rounded-0 border-0 bg-faded">
  129.         <div class="card m-0 p-2 border-0 rounded-0 text-justify" style="height: 300px; overflow: auto;">
  130.             <h2 class="m-1 font-weight-light text-secondary justify-content-between">Music box <i class="fas fa-music"></i></h2>
  131.             <hr class="m-0">
  132.             <!-- TEXT -->
  133.             <iframe class="m-1" width="auto" height="300" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  134.             <!-- VIDEO ID IS dQw4w9WgXcQ -->
  135.         </div>
  136.     </div>
  137.     <!-- STATUS -->
  138.     <div class="col-lg m-1 p-2 card rounded-0 border-0 bg-faded">
  139.         <div class="card m-0 p-2 border-0 rounded-0 text-justify" style="height: 300px; overflow: auto;">
  140.             <h2 class="m-1 font-weight-light text-secondary justify-content-between">Status <i class="fas fa-pen"></i></h2>
  141.             <hr class="m-0">
  142.             <!-- TEXT -->
  143.             <div class="m-0 pb-2">
  144.                 <!-- COMMISIONS -->
  145.                 <div class="m-1 p-2 card rounded-0 border-0 bg-faded text-center">
  146.                     <h3 class=" text-info font-weight-light"><i class="fas fa-dollar-sign"></i> Commissions</h3>
  147.                     <p class="mb-2">Closed/open</p>
  148.                     <a href="LINK" class="btn btn-secondary p-1">Information</a>
  149.                 </div>
  150.                 <!-- TRADES -->
  151.                 <div class="m-1 p-2 card rounded-0 border-0 bg-faded text-center">
  152.                     <h3 class=" text-info font-weight-light"><i class="fas fa-sync"></i> Trades</h3>
  153.                     <p class="mb-2">Closed/open</p>
  154.                     <a href="LINK" class="btn btn-secondary p-1">Information</a>
  155.                 </div>
  156.             </div>
  157.         </div>
  158.     </div>
  159. </div>
  160. <!-- CREDIT, DON'T MOVE -->
  161. <div class="text-muted text-center">
  162.     <a data-toggle="tooltip" title="Profile by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  163. </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!