sexycullen

muses 17 (css + html)

Feb 18th, 2017
175
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.17 KB | None | 0 0
  1. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $(".hover_body").hide();
  5. $(".hover_head").click(function(){
  6. $(this).next(".hover_body").slideToggle('fast');
  7. }); }); </script>
  8.  
  9.  
  10.  
  11.  
  12. .hover_list { margin-top:0px; padding:0px; width:auto;}
  13. .hover_head { padding-top:5px; padding-bottom:3px; cursor:pointer; position:relative; margin:1px;text-align: ; margin-left: 2px; padding: px; font-size: 8px; font-family: arial; text-transform: uppercase;letter-spacing:1px;
  14. }
  15. .hover_body { display:none; margin-top:10px;
  16. margin-bottom:10px;
  17. font-size: {text:Body Font Size};
  18. font-family: {text:Body Font};
  19. line-height:150%;
  20. line-height:auto;
  21. width:388px;
  22. }
  23.  
  24. .hover_body a {padding:1px;}
  25.  
  26. table img {
  27. webkit-filter: grayscale(0%); filter: grayscale(0%);}
  28.  
  29.  
  30.  
  31.  
  32.  
  33. <table border="0" height="auto" width="400">
  34. <tbody>
  35. <tr>
  36. <td>
  37. <p class="hover_head">erika &emsp; &amp;&amp;. more +</p>
  38. <div class="hover_body">
  39. <div><strong>age:</strong> 18/25 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> energetic, independent, adventurous, determined, ambitious and imprudent &emsp; <strong>faceclaim:</strong> lauren jauregui
  40. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i. <a href="/tagged/erika">chats</a> &emsp; ii. <a href="/tagged/relate.erika">relate</a> &emsp; iii. <a href="/tagged/starter.erika">starter</a></div>
  41. </div>
  42. </div>
  43. <img src="https://68.media.tumblr.com/f7153185c7418ebd65c68312059da254/tumblr_inline_ola55fOHqF1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/f7153185c7418ebd65c68312059da254/tumblr_inline_ola55fOHqF1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/f7153185c7418ebd65c68312059da254/tumblr_inline_ola55fOHqF1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  44. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 245px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  45. <p>the <strong>wanderer</strong></p>
  46. </div>
  47. <br /><br />
  48. <p class="hover_head">aurora &emsp; &amp;&amp;. more +</p>
  49. <div class="hover_body">
  50. <div><strong>age:</strong> 17/23 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> honest, caring, broad-minded, naive, stubborn and insecure &emsp; <strong>faceclaim:</strong> camila cabello
  51. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/aurora">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.aurora">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.aurora">starter</a></div>
  52. </div>
  53. </div>
  54. <img src="https://68.media.tumblr.com/20eb50cd5318164e6fbb4c84817a4c84/tumblr_inline_ola563mpw91usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/20eb50cd5318164e6fbb4c84817a4c84/tumblr_inline_ola563mpw91usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/20eb50cd5318164e6fbb4c84817a4c84/tumblr_inline_ola563mpw91usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  55. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 245px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  56. <p>the <strong>sweetheart</strong></p>
  57. </div>
  58. <br /><br />
  59. <p class="hover_head">selena &emsp; &amp;&amp;. more +</p>
  60. <div class="hover_body">
  61. <div><strong>age:</strong> 18/24 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> brave, captivating, realistic, outrageous, moody and impulsive &emsp; <strong>faceclaim:</strong> maia mitchell
  62. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i. <a href="/tagged/selena">chats</a> &emsp; ii. <a href="/tagged/relate.selena">relate</a> &emsp; iii. <a href="/tagged/starter.selena">starter</a></div>
  63. </div>
  64. </div>
  65. <img src="https://68.media.tumblr.com/051380e291120c07d3e7caa130c08b35/tumblr_inline_ola54m55ru1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/051380e291120c07d3e7caa130c08b35/tumblr_inline_ola54m55ru1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/051380e291120c07d3e7caa130c08b35/tumblr_inline_ola54m55ru1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  66. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 245px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  67. <p>the <strong>delinquent</strong></p>
  68. </div>
  69. <br /><br />
  70. <p class="hover_head">malik &emsp; &amp;&amp;. more +</p>
  71. <div class="hover_body">
  72. <div><strong>age:</strong> 19/26 &emsp; <strong>pronouns:</strong> he/him &emsp; <strong>sexuality:</strong> heterosexual &emsp; <strong>traits:</strong> optimistic, cordial, sociable, flirtatious, egocentric, persuasive, dauntless &emsp; <strong>faceclaim:</strong> avan jogia
  73. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i. <a href="/tagged/malik">chats</a> &emsp; ii. <a href="/tagged/relate.malik">relate</a> &emsp; iii. <a href="/tagged/starter.malik">starter</a></div>
  74. </div>
  75. </div>
  76. <img src="https://68.media.tumblr.com/83e157ef275a5390daa7ffa1cb7d2564/tumblr_inline_ola553ulcC1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/83e157ef275a5390daa7ffa1cb7d2564/tumblr_inline_ola553ulcC1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/83e157ef275a5390daa7ffa1cb7d2564/tumblr_inline_ola553ulcC1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  77. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 245px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  78. <p>the <strong>insurgent</strong></p>
  79. </div>
  80. <br /><br />
  81. <p class="hover_head">arthur &emsp; &amp;&amp;. more +</p>
  82. <div class="hover_body">
  83. <div><strong>age:</strong> 17/24 &emsp; <strong>pronouns:</strong> he/him &emsp; <strong>sexuality:</strong> heterosexual &emsp; <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic &emsp; <strong>faceclaim:</strong> calum hood
  84. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/arthur">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.arthur">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.arthur">starter</a></div>
  85. </div>
  86. </div>
  87. <img src="https://68.media.tumblr.com/f764d717a86ad38f73a599038f7a118d/tumblr_inline_ola56o8xxE1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/f764d717a86ad38f73a599038f7a118d/tumblr_inline_ola56o8xxE1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/f764d717a86ad38f73a599038f7a118d/tumblr_inline_ola56o8xxE1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  88. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 245px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  89. <p>the <strong>trickster</strong></p>
  90. </div>
  91. <br /><br />
  92. <p class="hover_head"><strong>secondary</strong> muses &mdash; (+)</p>
  93. <div class="hover_body">
  94. <p class="hover_head">cassandra &emsp; &amp;&amp;. more +</p>
  95. <div class="hover_body">
  96. <div><strong>age:</strong> 18/26 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> enthusiast, versatile, ruthless, bold, ambitious, persuasive &emsp; <strong>faceclaim:</strong> camila mendes
  97. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/cassandra">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.cassandra">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.cassandra">starter</a></div>
  98. </div>
  99. </div>
  100. <img src="https://68.media.tumblr.com/7b25ca98bcd5218839bccee91841fda4/tumblr_inline_ola85gCA951usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/7b25ca98bcd5218839bccee91841fda4/tumblr_inline_ola85gCA951usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/7b25ca98bcd5218839bccee91841fda4/tumblr_inline_ola85gCA951usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  101. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 240px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  102. <p>the <strong>hopeless</strong></p>
  103. </div>
  104. <br /><br />
  105. <p class="hover_head">bianca &emsp; &amp;&amp;. more +</p>
  106. <div class="hover_body">
  107. <div><strong>age:</strong> 17/25 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> audacious, dauntless, attentive, perky, mischievous, restless, troubled &emsp; <strong>faceclaim:</strong> lili reinhart
  108. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/bianca">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.bianca">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.bianca">starter</a></div>
  109. </div>
  110. </div>
  111. <img src="https://68.media.tumblr.com/0646901301f090965290bda824a4deec/tumblr_inline_ola85rFaQA1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/0646901301f090965290bda824a4deec/tumblr_inline_ola85rFaQA1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/0646901301f090965290bda824a4deec/tumblr_inline_ola85rFaQA1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  112. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 240px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  113. <p>tba</p>
  114. </div>
  115. <br /><br />
  116. <p class="hover_head">lena &emsp; &amp;&amp;. more +</p>
  117. <div class="hover_body">
  118. <div><strong>age:</strong> 18/24 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> clearheaded, outspoken, dominating, realistic, selfish, provocative, insecure &emsp; <strong>faceclaim:</strong> dua lipa
  119. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/lena">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.lena">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.lena">starter</a></div>
  120. </div>
  121. </div>
  122. <img src="https://68.media.tumblr.com/2749b1b0bb5e945c88c6f51011cdf7ca/tumblr_inline_ola5tlcQBY1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/2749b1b0bb5e945c88c6f51011cdf7ca/tumblr_inline_ola5tlcQBY1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/2749b1b0bb5e945c88c6f51011cdf7ca/tumblr_inline_ola5tlcQBY1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  123. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 240px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  124. <p>the <strong>heartbreaker</strong></p>
  125. </div>
  126. <br /><br />
  127. <p class="hover_head">vicky &emsp; &amp;&amp;. more +</p>
  128. <div class="hover_body">
  129. <div><strong>age:</strong> 19/27 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> understanding, sympathetic, mature, challenging, smooth, strong-willed, messy &emsp; <strong>faceclaim:</strong> lidsey morgan
  130. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/vicky">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.vicky">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.vicky">starter</a></div>
  131. </div>
  132. </div>
  133. <img src="https://68.media.tumblr.com/1b131f688cb4d6d3c336c3c2fb99add5/tumblr_inline_ola64pz53r1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/1b131f688cb4d6d3c336c3c2fb99add5/tumblr_inline_ola64pz53r1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/1b131f688cb4d6d3c336c3c2fb99add5/tumblr_inline_ola64pz53r1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  134. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 240px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  135. <p>tba</p>
  136. </div>
  137. <br /><br />
  138. <p class="hover_head">logan &emsp; &amp;&amp;. more +</p>
  139. <div class="hover_body">
  140. <div><strong>age:</strong> 18/25 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> lesbian &emsp; <strong>traits:</strong> grounded, objective, practical, indecisive, easily led &emsp; <strong>faceclaim:</strong> alycia debnam-carey
  141. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/logan">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.logan">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.logan">starter</a></div>
  142. </div>
  143. </div>
  144. <img src="https://68.media.tumblr.com/cc97b22800c980591f9f15eb039fe17e/tumblr_inline_ola56xKE2j1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/cc97b22800c980591f9f15eb039fe17e/tumblr_inline_ola56xKE2j1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/cc97b22800c980591f9f15eb039fe17e/tumblr_inline_ola56xKE2j1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  145. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 240px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  146. <p>the <strong>realist</strong></p>
  147. </div>
  148. <br /><br />
  149. <p class="hover_head">marisol &emsp; &amp;&amp;. more +</p>
  150. <div class="hover_body">
  151. <div><strong>age:</strong> 19/28 &emsp; <strong>pronouns:</strong> she/her &emsp; <strong>sexuality:</strong> bisexual &emsp; <strong>traits:</strong> clearheaded, objective, pacifistic, enthusiastic, harmless, inhibited &emsp; <strong>faceclaim:</strong> emeraude toubia
  152. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/marisol">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.marisol">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.marisol">starter</a></div>
  153. </div>
  154. </div>
  155. <img src="https://68.media.tumblr.com/5018c57c75cbd5b60f66bf530264e56c/tumblr_inline_ola854TDoO1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/5018c57c75cbd5b60f66bf530264e56c/tumblr_inline_ola854TDoO1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/5018c57c75cbd5b60f66bf530264e56c/tumblr_inline_ola854TDoO1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  156. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 240px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  157. <p>tba</p>
  158. </div>
  159. <br /><br />
  160. <p class="hover_head">nathaniel &emsp; &amp;&amp;. more +</p>
  161. <div class="hover_body">
  162. <div><strong>age:</strong> 18/23 &emsp; <strong>pronouns:</strong> he/him &emsp; <strong>sexuality:</strong> heterosexual &emsp; <strong>traits:</strong> good-humored, kindly, extroverted, harmless, patient, respectable, broad-minded &emsp; <strong>faceclaim:</strong> zayn malik
  163. <div style="margin-top: 15px; margin-bottom: px; font-size: 8px; font-family: arial; text-transform: uppercase;">i<strong>.</strong> <a href="/tagged/nathan">chats</a> &emsp; ii<strong>.</strong> <a href="/tagged/relate.nathan">relate</a> &emsp; iii<strong>.</strong> <a href="/tagged/starter.nathan">starter</a></div>
  164. </div>
  165. </div>
  166. <img src="https://68.media.tumblr.com/7b48fcc8afd42f840d80ab6134b5b46a/tumblr_inline_ola57m6fcg1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/7b48fcc8afd42f840d80ab6134b5b46a/tumblr_inline_ola57m6fcg1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px; float: left;" /><img src="https://68.media.tumblr.com/7b48fcc8afd42f840d80ab6134b5b46a/tumblr_inline_ola57m6fcg1usi7me_500.png" title="" style="border-radius: 10%; padding: 2px; width: 43px;" />
  167. <div style="padding-top: 3px; text-align: center; border-radius: 4%; width: 240px; height: 45px; margin-left: 2px; margin-right: 2px; float: left; padding: px; border: 1px solid #eee; font-size: 10px; font-family: hind; text-transform: uppercase;">
  168. <p>tba</p>
  169. </div>
  170. </div>
  171. </td>
  172. </tr>
  173. </tbody>
  174. </table>
Advertisement
Add Comment
Please, Sign In to add comment