API tools faq
paste
ooter

[F] Spectrumble

ooter
Oct 10th, 2017
1,634
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.91 KB | None | 0 0
raw download clone embed print report
  1. <!---------
  2.  
  3. Hello Beans~
  4.  
  5. Big thank you to @Spider for their
  6. idea and help with making this layout,
  7. the entire design is theirs. ♥
  8.  
  9. You get to enjoy it for free thanks to all of them ~
  10.  
  11.  
  12. ---------->
  13.  
  14. <div class="container-fluid">
  15.     <div class="row">
  16.         <div class="col-md-12">
  17.             <div class="card card-block rounded-0 display-4" style='background-image: url("https://i.imgur.com/EKjv1kw.gif"); margin-bottom:15px; text-align: center; font-size: 72px;text-transform:uppercase; letter-spacing:1px; color:#fff;'>- SPECTRUMBLE -</div>
  18.         </div>
  19.     </div>
  20. </div>
  21. <div class="container-fluid">
  22.     <div class="row">
  23.         <div class="col-md-5" style="margin-bottom:15px;">
  24.             <div class="ui-accordion card bg-faded rounded-0" style="border:8px solid #ff4434; border-top:0px;">
  25.                 <!-------
  26. ---------------------------------------------------------
  27.  
  28. BASICS
  29.  
  30. ------------------------------------------------------------------------------------------->
  31.  
  32.                 <h2 class="card-inverse card-header display-4" style="background:#ff4434; text-transform:uppercase; color:#fff;"><i class="fa fa-id-card-o"></i> squiddie tiddie</h2>
  33.                 <div class="ui-accordion-content card-block " style="height:330px;">
  34.  
  35.                     <table style="width: 100%; border:none;">
  36.                         <tbody>
  37.                             <tr>
  38.                                 <td style="width: 49.9133%; text-align: right;"><strong>FULL NAME</strong></td>
  39.                                 <td style="width: 50.0000%;">Inkling</td>
  40.                             </tr>
  41.                             <tr>
  42.                                 <td style="width: 49.9133%; text-align: right;"><strong>NICKNAME(S)</strong></td>
  43.                                 <td style="width: 50.0000%;">Squiddy Tiddy</td>
  44.                             </tr>
  45.                             <tr>
  46.                                 <td style="width: 49.9133%; text-align: right;"><strong>AGE</strong></td>
  47.                                 <td style="width: 50.0000%;">Unknown</td>
  48.                             </tr>
  49.                             <tr>
  50.                                 <td style="width: 49.9133%; text-align: right;"><strong>BIRTHDAY</strong></td>
  51.                                 <td style="width: 50.0000%;">Unknown</td>
  52.                             </tr>
  53.                             <tr>
  54.                                 <td style="width: 49.9133%; text-align: right;"><strong>STAR SIGN</strong></td>
  55.                                 <td style="width: 50.0000%;">Leo</td>
  56.                             </tr>
  57.                             <tr>
  58.                                 <td style="width: 49.9133%; text-align: right;"><strong>BIRTHPLACE</strong></td>
  59.                                 <td style="width: 50.0000%;">Lorem</td>
  60.                             </tr>
  61.                             <tr>
  62.                                 <td style="width: 49.9133%; text-align: right;"><strong>GENDER</strong></td>
  63.                                 <td style="width: 50.0000%;">Lorem</td>
  64.                             </tr>
  65.                             <tr>
  66.                                 <td style="width: 49.9133%; text-align: right;"><strong>SEXUALITY</strong></td>
  67.                                 <td style="width: 50.0000%;">Lorem</td>
  68.                             </tr>
  69.                         </tbody>
  70.                     </table>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.         <!-------
  75. ---------------------------------------------------------
  76.  
  77. IMAGE
  78.  
  79. ------------------------------------------------------------------------------------------->
  80.         <div class="col-md-2" style="margin-bottom:15px;">
  81.             <div class="card card-block rounded-0" style="background-image:url('https://image.prntscr.com/image/DkeJQlKpQCufWYoPdgh0fQ.png'); background-position:center top; height:400px; border:8px solid #f39a03;">
  82.                 <br>
  83.             </div>
  84.         </div>
  85.         <div class="col-md-5" style="margin-bottom:15px;">
  86.             <div class="ui-accordion card bg-faded rounded-0" style="border:8px solid #e4e41d; border-top:0px;">
  87.                 <!-------
  88. ---------------------------------------------------------
  89.  
  90. STORY
  91.  
  92. ------------------------------------------------------------------------------------------->
  93.  
  94.                 <h2 class="card-inverse card-header display-4" style="background:#e4e41d; text-transform:uppercase; color:#fff;"><i class="fa fa-pencil"></i> story</h2>
  95.                 <div class="ui-accordion-content card-block " style="height:330px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis. Etiam dictum vel tortor quis lacinia. Morbi porttitor convallis enim, a auctor elit gravida ac. Phasellus eget arcu eu urna mollis finibus vitae quis ex. Curabitur gravida mi orci, ac feugiat quam accumsan nec. Aenean lacinia vehicula leo sed pellentesque. Ut vestibulum porta diam non gravida. Nulla consequat eu urna ut commodo. Nulla in augue ut ipsum tempus egestas. Mauris porta sapien facilisis turpis vehicula, eu convallis purus rutrum.
  96.                     <br>
  97.                     <br>Aliquam varius accumsan lectus id molestie. Pellentesque dolor sem, molestie at sodales nec, feugiat sit amet tellus. Nullam pellentesque felis id justo pulvinar euismod. Donec in lacinia metus. Etiam orci nibh, cursus vitae fringilla dapibus, tincidunt ut orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla commodo massa vitae convallis congue. Aenean purus urna, dictum vitae quam sit amet, accumsan ullamcorper libero. Donec sed lorem semper, volutpat felis id, efficitur elit. Nunc congue et dui sed hendrerit. Mauris varius augue ut lacus condimentum fermentum.</div>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </div>
  102. <div class="container-fluid">
  103.     <div class="row">
  104.         <div class="col-md-4" style="margin-bottom:15px;">
  105.             <!-------
  106. ---------------------------------------------------------
  107.  
  108. IMG LEFT
  109.  
  110. ------------------------------------------------------------------------------------------->
  111.             <div class="ui-accordion card bg-faded rounded-0" style="background-image:url('https://image.prntscr.com/image/OAquAmLwSuGH97LC9v1vKw.png'); background-position:center center; border:8px solid #8cdc31;">
  112.                 <div class="ui-accordion-content card-block " style="height:252px;">&nbsp;</div>
  113.             </div>
  114.         </div>
  115.         <div class="col-md-8" style="margin-bottom:15px;">
  116.             <!-------
  117. ---------------------------------------------------------
  118.  
  119. PLAYLIST
  120.  
  121. ------------------------------------------------------------------------------------------->
  122.             <div class="ui-accordion card bg-faded rounded-0" style="border:8px solid #8cdc31; border-top:0px;">
  123.  
  124.                 <h2 class="card-inverse card-header display-4" style="background:#8cdc31; text-transform:uppercase; color:#fff;"><i class="fa fa-refresh fa-spin fa-fw" style="font-size:22pt;"></i> PLAYLIST</h2>
  125.                 <div class="ui-accordion-content card-block " style="height:200px;">
  126.  
  127.                     <p><span style="color: #AAA; font-size: 20pt; padding-left: 20px;"><a href="/YOUTUBE_PLAYLIST_LINK" style="color: #AAA;"><em class="fi-play">&nbsp;</em><strong>P L A Y&nbsp;</strong></a></span></p>
  128.                     <hr>
  129.  
  130.                     <table style="width: 100%; border:none;">
  131.                         <tbody>
  132.                             <tr>
  133.                                 <td style="width: 50.0000%;">
  134.  
  135.                                     <ul style="list-style-type: square;">
  136.                                         <li><span style="font-size: 8pt;">SONG</span></li>
  137.                                         <li><span style="font-size: 8pt;">SONG</span></li>
  138.                                         <li><span style="font-size: 8pt;">SONG</span></li>
  139.                                     </ul>
  140.                                 </td>
  141.                                 <td style="width: 50.0000%;">
  142.  
  143.                                     <ul style="list-style-type: square;">
  144.                                         <li><span style="font-size: 8pt;">SONG</span></li>
  145.                                         <li><span style="font-size: 8pt;">SONG</span></li>
  146.                                         <li><span style="font-size: 8pt;">SONG</span></li>
  147.                                     </ul>
  148.                                 </td>
  149.                             </tr>
  150.                         </tbody>
  151.                     </table>
  152.                     <!-----END OF PLAYLIST------------------------------------------------------------------------------------>
  153.                 </div>
  154.             </div>
  155.         </div>
  156.     </div>
  157. </div>
  158. <div class="container-fluid">
  159.     <div class="row">
  160.         <div class="col-md-6" style="margin-bottom:15px;">
  161.             <!-------
  162. ---------------------------------------------------------
  163.  
  164. TRIVIA
  165.  
  166. ------------------------------------------------------------------------------------------->
  167.             <div class="ui-accordion card bg-faded rounded-0" style="border:8px solid #1fc4ff; border-top:0px;">
  168.  
  169.                 <h2 class="card-inverse card-header display-4" style="background:#1fc4ff; text-transform:uppercase; color:#fff;"><i class="fa fa-bomb"></i> TRIVIA</h2>
  170.                 <div class="ui-accordion-content card-block " style="height:413px;">
  171.  
  172.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec. Donec at dictum arcu. Sed pharetra urna augue, eget facilisis magna malesuada in. &nbsp;Sed in turpis vel sem pretium dapibus ullamcorper nec lorem. Phasellus fringilla turpis et accumsan facilisis. Etiam dictum vel tortor quis lacinia. Morbi porttitor convallis enim, a auctor elit gravida ac. Phasellus eget arcu eu urna mollis finibus vitae quis ex. Curabitur gravida mi orci, ac feugiat quam accumsan nec.</p>
  173.                     <br>
  174.  
  175.                     <ul style="list-style-type: square;">
  176.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo.</li>
  177.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo.</li>
  178.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo.</li>
  179.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo.</li>
  180.                         <li>More trivia.</li>
  181.                         <li>Etc</li>
  182.                     </ul>
  183.                 </div>
  184.             </div>
  185.             <br>
  186.             <!-------
  187. ---------------------------------------------------------
  188.  
  189. CREDITS - DO NOT REMOVE
  190.  
  191. ------------------------------------------------------------------------------------------->
  192.             <div class="ui-accordion card bg-faded rounded-0" style="border:8px solid #ea67ff;">
  193.                 <div class="ui-accordion-content card-block" style="height: 80px; text-align: center;">Character belongs to @Unknown &nbsp;&bull; &nbsp; &nbsp;Designed by @Unknown
  194.                     <br>Art by @Unknown &nbsp;&bull; &nbsp; &nbsp;HTML by @Jayden &nbsp; &bull; &nbsp; &nbsp;Layout Design by @Spider</div>
  195.             </div>
  196.         </div>
  197.         <!-------
  198. ---------------------------------------------------------
  199.  
  200. RELATIONSHIPS
  201.  
  202. ------------------------------------------------------------------------------------------->
  203.         <div class="col-md-6" style="margin-bottom:15px;">
  204.             <div class="ui-accordion card bg-faded rounded-0" style="border:8px solid #fc5bb9; border-top:0px;">
  205.  
  206.                 <h2 class="card-inverse card-header display-4" style="background:#fc5bb9; text-transform:uppercase; color:#fff;"><i class="fa fa-heart-o"></i> FELLOW SQUIDdies</h2>
  207.                 <div class="ui-accordion-content card-block " style="height:530px;">
  208.  
  209.                     <table style="width: 100%; border:none;">
  210.                         <tbody>
  211.                             <!--
  212. ------------------------------------------------------------ FOR MORE RELATIONSHIPS COPY FROM HERE -------------------------------------------------------->
  213.                             <tr>
  214.                                 <td style="width: 38.6602%;"><img src="https://i.paigeeworld.com/user-media/1489536000000/51129861cbbdcfcb3b02a619_58c93451509173c40e56416b_320.jpg" class="fr-fic fr-dib rounded" width="178" height="179"></td>
  215.                                 <td style="width: 61.3398%;"><strong>CHARACTER</strong>
  216.                                     <br>
  217.                                     <hr><em>relationship &bull; song</em>
  218.                                     <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec.
  219.                                     <br>
  220.                                 </td>
  221.                             </tr>
  222.                             <!-------------------------------------------------------------TO HERE AND PASTE IT BEFORE </tbody>---------------------------------------------------------->
  223.                             <tr>
  224.                                 <td style="width: 38.6602%;"><img src="https://i.paigeeworld.com/user-media/1489536000000/51129861cbbdcfcb3b02a619_58c93451509173c40e56416b_320.jpg" class="fr-fic fr-dib rounded" width="178" height="179"></td>
  225.                                 <td style="width: 61.3398%;"><strong>CHARACTER</strong>
  226.                                     <br>
  227.                                     <hr><em>relationship &bull; song</em>
  228.                                     <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec.
  229.                                     <br>
  230.                                 </td>
  231.                             </tr>
  232.                             <tr>
  233.                                 <td style="width: 38.6602%;"><img src="https://i.paigeeworld.com/user-media/1489536000000/51129861cbbdcfcb3b02a619_58c93451509173c40e56416b_320.jpg" class="fr-fic fr-dib rounded" width="178" height="179"></td>
  234.                                 <td style="width: 61.3398%;"><strong>CHARACTER</strong>
  235.                                     <br>
  236.                                     <hr><em>relationship &bull; song</em>
  237.                                     <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id orci sit amet arcu posuere ultrices vel pulvinar justo. Suspendisse placerat augue vitae massa consectetur tincidunt. Duis interdum arcu nibh, nec efficitur neque blandit nec.
  238.                                     <br>
  239.                                 </td>
  240.                             </tr>
  241.                         </tbody>
  242.                     </table>
  243.                 </div>
  244.             </div>
  245.         </div>
  246.     </div>
  247. </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!