API tools faq
paste
Advertisement
ooter

[F] Simple [Custom Color]

ooter
Jul 3rd, 2017
7,938
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.52 KB | None | 1 0
raw download clone embed print report
  1. <!-------------------------------
  2.  
  3. SIMPLE BY JAYDEN @ TH
  4. HUGE THANKS TO STARLIPOP @ TH FOR THEIR GOLDMINE CODES
  5. WITHOUT THEM THIS LAYOUT WOULDN'T BE POSSIBLE!
  6.  
  7. PLEASE DO NOT SELL, REDISTRIBUTE OR COPY
  8.  
  9. TO CHANGE THE COLOR, LOOK FOR #BFA7DB
  10. AND CHANGE IT USING A HEX COLOR!
  11.  
  12. ---------------------------------
  13.  
  14. SIDE IMAGE MUST BE SQUARE
  15. MAX IS 300 X 300
  16.  
  17. IMAGE----------------------------->
  18. <div class="card bg-faded" style="width:300px; padding:5px; border:1px solid #BFA7DB;">
  19.     <div class="card-block"><img src="https://68.media.tumblr.com/639dcc876c0d38d4694cc69426f80bb3/tumblr_inline_nplhgoPZGt1tpi6el_540.jpg" class="fr-fic fr-dii"></div>
  20. </div>
  21. <!---------------
  22.  
  23.  
  24.  
  25. LEFT INFO------------>
  26. <div class="ui-accordion card bg-faded" style="width:300px; height:280px; margin-top:20px; border:1px solid #BFA7DB;">
  27.  
  28.     <h2 class="card-inverse card-header" style="letter-spacing:3px;text-transform:uppercase;background-color:#BFA7DB;"><i class="fa fa-rocket"></i> status</h2>
  29.     <div class="ui-accordion-content card-block">
  30.  
  31.         <table style="height:100%; border:none;" width="100%">
  32.             <tbody>
  33.                 <tr>
  34.                     <td style="width: 87.1795%; text-align: center;"><strong>Obtained:</strong> Info Here</td>
  35.                 </tr>
  36.                 <tr>
  37.                     <td style="width: 87.1795%; text-align: center;"><strong>Status:</strong> Active; Main</td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td style="width: 87.1795%; text-align: center;"><strong>Worth:</strong>&nbsp;$999</td>
  41.                 </tr>
  42.                 <tr>
  43.                     <td style="text-align: center;"><strong>Notes:</strong> Blue eyes rather than red.</td>
  44.                 </tr>
  45.                 <tr>
  46.                     <td style="text-align: center;"><strong>Creator:</strong> @Jayden</td>
  47.                 </tr>
  48.             </tbody>
  49.         </table>
  50.     </div>
  51. </div>
  52. <!---------------
  53.  
  54.  
  55.  
  56. CREDITS DO NOT REMOVE------------>
  57. <div class="card bg-faded" style="width:300px;margin-top:20px;text-transform:uppercase;">
  58.     <div class="card-block" style="text-align: center;"><span style="font-size: 9px; color: rgb(115, 115, 115);">Layout by @Jayden &nbsp; &bull; &nbsp; Image by @unknown</span></div>
  59. </div>
  60. <!---------------
  61.  
  62.  
  63.  
  64. MAIN PANEL------------>
  65. <div class="ui-accordion card bg-faded" style="width:700px; height:673px; margin-left:318px; margin-top:-673px;border:1px solid #BFA7DB;">
  66.  
  67.     <h2 class="card-inverse card-header" style="letter-spacing:3px;text-transform:uppercase;background-color:#BFA7DB;"><i class="fa fa-id-card-o"></i> character</h2>
  68.     <div class="ui-accordion-content card-block bg-faded" style="height: 210px;"><em>adjective &bull; adjective &bull; adjective</em>
  69.         <hr style="border:dashed #dddddd;border-width:1px 0 0;">
  70.  
  71.         <table class="double table-hover" style="margin-right: calc(0%); width: 100%; margin-left: calc(0%); border:none;">
  72.             <tbody>
  73.                 <tr>
  74.                     <td class="title" style="width: 21.9243%; text-align: right;"><strong>Name</strong></td>
  75.                     <td style="text-align: left; width: 27.4451%;">Mikaela</td>
  76.                     <td class="title" style="width: 25.2363%; text-align: right;"><strong>Birthdate</strong></td>
  77.                     <td style="width: 25.394%; text-align: left;">May 1</td>
  78.                 </tr>
  79.                 <tr>
  80.                     <td class="title" style="width: 21.9243%; text-align: right;"><strong>Age</strong></td>
  81.                     <td style="text-align: left; width: 27.4451%;">Old</td>
  82.                     <td class="title" style="width: 25.2363%; text-align: right;"><strong>Zodiac</strong></td>
  83.                     <td style="width: 25.394%; text-align: left;">Scorpio</td>
  84.                 </tr>
  85.                 <tr>
  86.                     <td class="title" style="width: 21.9243%; text-align: right;"><strong>Gender</strong></td>
  87.                     <td style="text-align: left; width: 27.4451%;">Male</td>
  88.                     <td class="title" style="width: 25.2363%; text-align: right;"><strong>Orientation</strong></td>
  89.                     <td style="width: 25.394%; text-align: left;">Unknown</td>
  90.                 </tr>
  91.                 <tr>
  92.                     <td class="title" style="width: 21.9243%; text-align: right;"><strong>Species</strong></td>
  93.                     <td style="text-align: left; width: 27.4451%;">Vampire</td>
  94.                     <td class="title" style="width: 25.2363%; text-align: right;"><strong>Voice</strong></td>
  95.                     <td style="width: 25.394%; text-align: left;">Kenshō Ono</td>
  96.                 </tr>
  97.                 <tr>
  98.                     <td class="title" style="width: 21.9243%; text-align: right;"><strong>Relationship</strong></td>
  99.                     <td style="text-align: left; width: 27.4451%;">In love</td>
  100.                     <td class="title" style="width: 25.2363%; text-align: right;"><strong>Song</strong></td>
  101.                     <td style="width: 25.394%; text-align: left;">Song Link</td>
  102.                 </tr>
  103.                 <tr>
  104.                     <td class="title" style="width: 21.9243%; text-align: right;"><strong>Alignment</strong></td>
  105.                     <td style="text-align: left; width: 27.4451%;">Neutral Good</td>
  106.                     <td class="title" style="width: 25.2363%; text-align: right;"><strong>MBTI</strong></td>
  107.                     <td style="width: 25.394%; text-align: left;">ENTP</td>
  108.                 </tr>
  109.             </tbody>
  110.         </table>
  111.         <hr style="border:dashed #dddddd;border-width:1px 0 0;">
  112.     </div>
  113.     <div class="ui-accordion-content card-block bg-faded" style="height: 150px;"><em><strong>This panel will scroll!</strong></em>
  114.         <br>
  115.         <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae orci quam. Suspendisse interdum hendrerit lacinia. Sed vel sem consectetur, suscipit nunc a, accumsan arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent varius lorem odio, vel mattis ex consectetur a. Vestibulum consequat fringilla mi, ac cursus lacus sollicitudin non. Sed interdum lectus sit amet aliquam viverra. Morbi mattis semper ipsum nec tincidunt. Suspendisse pharetra, metus sit amet volutpat sagittis, augue massa faucibus metus, non bibendum nibh lectus eget turpis. Donec laoreet porttitor euismod. Integer faucibus eros ex, ut posuere leo elementum eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel tempus lectus, vel sagittis velit. Integer ullamcorper nunc eget turpis consectetur luctus.
  116.         <br>
  117.         <br>ed vel sem consectetur, suscipit nunc a, accumsan arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent varius lorem odio, vel mattis ex consectetur a. Vestibulum consequat fringilla mi, ac cursus lacus sollicitudin non. Sed interdum lectus sit amet aliquam viverra. Morbi mattis semper ipsum nec tincidunt. Suspendisse pharetra, metus sit amet volutpat sagittis, augue massa faucibus metus, non bibendum nibh lectus eget turpis. Donec laoreet porttitor euismod. Integer faucibus eros ex, ut posuere leo elementum eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel tempus lectus, vel sagittis velit. Integer ullamcorper nunc eget turpis consectetur luctus.</div>
  118. </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!