API tools faq
paste
Advertisement
ooter

[F] The Monster Mash!

ooter
Sep 22nd, 2017
3,649
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.18 KB | None | 0 0
raw download clone embed print report
  1. <!---------
  2.  
  3. Happy Halloweeeeeeeeeen !
  4.  
  5. Big thank you to @Wonderland and @Valentine
  6. for their input on this theme ♥
  7.  
  8. You get to enjoy it for free thanks to the pair of them ~
  9.  
  10.  
  11. ---------->
  12. <div class="container-fluid">
  13.     <div class="row">
  14.         <div class="col-sm-5">
  15.             <!--
  16.  
  17.  
  18. ---
  19.  
  20. COLUMN 1
  21.  
  22. ---------->
  23.             <div class="card" style="background-color:#60656b; border:1px solid #c7e77a; hieght:380px; margin-bottom:10px;">
  24.  
  25.                 <h2 class="card-inverse card-header display-5" style="background-color:#c7e77a; text-transform:uppercase; color:#fff;"><i class="fa fa-id-card-o"></i>&nbsp; &nbsp;Smol bean</h2>
  26.                 <div class="card-block">
  27.                     <div class="container-fluid">
  28.                         <div class="row">
  29.                             <div class="col-sm-6">
  30.                                 <!--
  31.  
  32.  
  33. ---
  34.  
  35. IMAGE
  36.  
  37. ---------->
  38.                                 <div class="card d-inline-block" style="border: 1px solid #c7e77a;background-color: #aaa;background-image:url('https://image.prntscr.com/image/KHX3VRu2SsuYzBsPKbUxVg.png');width:100%;height:260px; margin-bottom:10px;">
  39.                                     <div class="card-block" style="padding:0;"><img class="fr-fic fr-dii"></div>
  40.                                 </div>
  41.                                 <!---
  42. ---
  43.  
  44. END IMG
  45.  
  46. -------->
  47.                             </div>
  48.                             <!---
  49. ---
  50.  
  51. QUICK BIO
  52.  
  53. -------->
  54.                             <div class="col-sm-6">
  55.                                 <div class="btn btn-default" style="width:100%; margin-bottom:5px; text-transform:uppercase;font-size:9pt;">Name</div>
  56.                                 <div class="btn btn-default" style="width:100%; margin-bottom:5px; text-transform:uppercase;font-size:9pt;">Age</div>
  57.                                 <div class="btn btn-default" style="width:100%; margin-bottom:5px; text-transform:uppercase;font-size:9pt;">gender</div>
  58.                                 <div class="btn btn-default" style="width:100%; margin-bottom:5px; text-transform:uppercase;font-size:9pt;">species</div>
  59.                                 <div class="btn btn-default" style="width:100%; margin-bottom:5px; text-transform:uppercase;font-size:9pt;">orientation</div>
  60.                                 <div class="btn btn-default" style="width:100%; margin-bottom:5px; text-transform:uppercase;font-size:9pt;">zodiac</div>
  61.                                 <div class="btn btn-default" style="width:100%; margin-bottom:5px; text-transform:uppercase;font-size:9pt;">theme</div>
  62.                             </div>
  63.                         </div>
  64.                     </div>
  65.                 </div>
  66.             </div>
  67.             <div class="card ui-accordion" style="background-color:#60656b; height:200px; border:1px solid #c7e77a; color:#fff; margin-bottom:10px;">
  68.  
  69.                 <h2 class="card-inverse card-header display-5" style="background-color:#c7e77a; text-transform:uppercase; color:#fff;"><i class="fa fa-diamond"></i>&nbsp; &nbsp;Trivia</h2>
  70.                 <div class="card-block ui-accordion-content">&bull; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  71.                     <br>&bull; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  72.                     <br>&bull; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  73.                     <br>&bull; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  74.                     <br>&bull; Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  75.             </div>
  76.         </div>
  77.         <div class="col-sm-7">
  78.             <!--
  79.  
  80.  
  81. ---
  82.  
  83. STORY
  84.  
  85. ---------->
  86.             <div class="card ui-accordion" style="background-color:#60656b; border:1px solid #c7e77a; height:570px; color:#fff; margin-bottom:10px;">
  87.  
  88.                 <h2 class="card-inverse card-header display-5" style="background-color:#c7e77a; text-transform:uppercase; color:#fff;"><i class="fa fa-bars"></i> Story</h2>
  89.                 <div class="card-block ui-accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ultrices mauris, vitae efficitur eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent gravida vestibulum venenatis. Vivamus semper justo ipsum, quis aliquet arcu gravida a. Pellentesque at ipsum efficitur, mattis ex eu, imperdiet metus. Sed facilisis lacus nec justo luctus accumsan. Ut feugiat arcu eget lacus viverra, vitae vulputate risus faucibus. Cras euismod, felis a lacinia hendrerit, arcu sem ullamcorper felis, eget tempus turpis nisl ac eros. Vivamus eu tempor leo. Vestibulum iaculis enim at augue vehicula convallis. Aliquam at dolor lacus. Nulla facilisi. Integer metus quam, aliquet vel semper eget, scelerisque sed augue. Etiam blandit tristique ex, sed luctus mauris vulputate at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis dignissim ipsum. Praesent iaculis accumsan nisl sed porta. Sed non felis in risus bibendum blandit ac a diam. Fusce ut orci est. Proin finibus volutpat nibh. Curabitur ac faucibus dolor, quis finibus felis. Donec rhoncus est id dui mattis scelerisque. Mauris vitae volutpat ex, id fermentum elit. Vivamus sollicitudin sagittis bibendum. Proin velit velit, dignissim et neque at, ultricies lobortis leo. Nullam lacus mi, posuere eu libero sed, vulputate tristique nunc. Sed at congue tortor, id pharetra sem. Fusce lobortis est non fringilla tincidunt. Proin ipsum urna, mollis a elementum et, commodo vitae magna. Integer at mauris et augue luctus pharetra sit amet vel augue. Curabitur commodo, velit eget mattis varius, libero dolor sodales ex, feugiat consectetur urna nunc vitae neque. Suspendisse potenti. Vivamus porta sapien gravida ex mattis scelerisque. Sed vitae dapibus arcu. Aliquam lacinia, felis sed scelerisque convallis, sapien eros dignissim leo, quis vestibulum metus nunc a elit. Nunc eu imperdiet dolor. Aenean pharetra leo eu neque sodales, ut iaculis dui maximus. Etiam at est sit amet nisi consectetur euismod ultrices vel ligula. Donec dictum lacus eros, ut ultricies nisi ultrices eu. Donec interdum pretium dui nec dictum. Mauris nunc magna, ullamcorper vel sagittis at, rutrum sed felis. Vestibulum viverra, magna et pharetra egestas, est nunc tristique sapien, id gravida nisl metus vel neque. Fusce massa tortor, maximus sollicitudin est sit amet, fringilla vestibulum lorem. Sed sed nulla molestie, luctus lectus at, mollis ipsum. Quisque nec rutrum eros. In hac habitasse platea dictumst. In viverra, arcu et bibendum maximus, enim purus pharetra ex, ut aliquet arcu neque sit amet eros. Maecenas vitae turpis mollis, pharetra ex non, tincidunt ligula. Nam tristique ullamcorper laoreet. Vivamus ullamcorper, lorem non feugiat cursus, lorem enim semper neque, ac porta tellus diam eu nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent pulvinar augue vitae iaculis varius.</div>
  90.             </div>
  91.         </div>
  92.     </div>
  93. </div>
  94. <!---
  95. ---------------------------
  96.  
  97. RELATIONSHIPS
  98.  
  99. --------------------------->
  100. <div class="container-fluid">
  101.     <div class="row">
  102.         <div class="col-sm-8">
  103.             <div class="card ui-accordion" style="background-color:#60656b; border:1px solid #c7e77a; height:450px; color:#fff; margin-bottom:10px;">
  104.  
  105.                 <h2 class="card-inverse card-header display-5" style="background-color:#c7e77a; text-transform:uppercase; color:#fff;"><i class="fa fa-heart"></i>&nbsp;relationships</h2>
  106.                 <div class="card-block ui-accordion-content">
  107.  
  108.                     <table style="width: 100%; border:none;">
  109.                         <tbody>
  110.                             <tr>
  111.                                 <td style="width: 21.7185%;"><img src="http://www.pi-cube.com/wp-content/uploads/2015/04/team-placeholder.jpg" class="fr-fic fr-dii fr-rounded fr-fil" width="124" height="126"></td>
  112.                                 <td style="width: 78.2815%;">
  113.  
  114.                                     <h2 style="color: #c7e77a;">NAME</h2><em style="color:#273646;">relationship &bull; song</em><br>Lorem<strong>&nbsp;</strong>ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ultrices mauris, vitae efficitur eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent gravida vestibulum venenatis. Vivamus semper justo ipsum, quis aliquet arcu gravida a. Pellentesque at ipsum efficitur, mattis ex eu, imperdiet metus. Sed facilisis lacus nec justo luctus accumsan. Ut feugiat arcu eget lacus viverra, vitae vulputate risus faucibus.</td>
  115.                             </tr>
  116.                             <tr>
  117.                                 <td style="width: 21.7185%;"><img src="http://www.pi-cube.com/wp-content/uploads/2015/04/team-placeholder.jpg" class="fr-fic fr-dii fr-rounded fr-fil" width="124" height="126"></td>
  118.                                 <td style="width: 78.2815%;">
  119.  
  120.                                     <h2 style="color: #c7e77a;">NAME</h2><em style="color:#273646;">relationship &bull; song</em><br>Lorem<strong>&nbsp;</strong>ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ultrices mauris, vitae efficitur eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent gravida vestibulum venenatis. Vivamus semper justo ipsum, quis aliquet arcu gravida a. Pellentesque at ipsum efficitur, mattis ex eu, imperdiet metus. Sed facilisis lacus nec justo luctus accumsan. Ut feugiat arcu eget lacus viverra, vitae vulputate risus faucibus.</td>
  121.                             </tr>
  122.                             <tr>
  123.                                 <td style="width: 21.7185%;"><img src="http://www.pi-cube.com/wp-content/uploads/2015/04/team-placeholder.jpg" class="fr-fic fr-dii fr-rounded fr-fil" width="124" height="126"></td>
  124.                                 <!---
  125. ------ TO ADD ANOTHER RELATIONSHIP COPY FROM HERE------------>
  126.                                 <td style="width: 78.2815%;">
  127.  
  128.                                     <h2 style="color: #c7e77a;">NAME</h2><em style="color:#273646;">relationship &bull; song</em><br>Lorem<strong>&nbsp;</strong>ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu ultrices mauris, vitae efficitur eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent gravida vestibulum venenatis. Vivamus semper justo ipsum, quis aliquet arcu gravida a. Pellentesque at ipsum efficitur, mattis ex eu, imperdiet metus. Sed facilisis lacus nec justo luctus accumsan. Ut feugiat arcu eget lacus viverra, vitae vulputate risus faucibus.</td>
  129.                             </tr>
  130.                             <!---
  131.  
  132. ------ TO HERE AND PASTE IT BEFORE </tbody>----------->
  133.                         </tbody>
  134.                     </table>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.         <div class="col-sm-4"><!----
  139.  
  140. BOTTOM RIGHT IMAGE
  141.  
  142. ------------------>
  143.             <div class="card d-inline-block" style="border: 1px solid #c7e77a;background-color: #aaa;background-image:url('https://orig00.deviantart.net/eca4/f/2017/265/b/2/00000000000_by_jaydenth-dbo81q2.png');width:100%;height:450px;">
  144.                 <div class="card-block" style="padding:0;"><img class="fr-fic fr-dii"></div>
  145.             </div>
  146.         </div>
  147.     </div>
  148. </div>
  149. <!--------- CREDIT - DO NOT REMOVE ----------->
  150. <p style="text-align: right;font-size: 9px; margin-right:17px;">LAYOUT BY @JAYDEN</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!