API tools faq
paste
lollyracket

dex morg - muse page

lollyracket
Oct 18th, 2020 (edited)
922
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.88 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4.  
  5. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  6. <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
  7.  
  8. <style type="text/css">
  9.  
  10. body { font-family:roboto; font-size:10px; background-image:url(https://img.nickpic.host/Fy6M4m.jpg); background-position:center; background-size:cover; }
  11. body a { text-decoration:none; color:#000; }
  12.  
  13. ::-webkit-scrollbar {
  14. width: 1px; }
  15. ::-webkit-scrollbar-thumb {
  16. background-color:#000; }
  17.  
  18. ::-webkit-scrollbar-track {
  19. background-color:transparent;
  20. }
  21.  
  22. #credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
  23. #credit icon { padding:5px; font-size:20px; }
  24. #credit:hover { transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0; }
  25.  
  26. /* --- fonts --- */
  27.  
  28. @font-face {
  29. font-family: 'Tondu';
  30. src: url('https://static.tumblr.com/xab8hqo/Hnpqia0c5/tondu_beta.woff') format('woff');
  31. }
  32.  
  33. /* --- coding begins --- */
  34.  
  35. #morganside { position:fixed; top:90px; left:50px; }
  36.  
  37.  
  38. #morganside .infoside { width:250px; position:fixed; padding:20px; border:1px solid #ccc; background-color:rgba(255,255,255,0.8); }
  39.  
  40. #morganside .sidetext { height:50px; overflow:auto; padding:10px; text-align:justify; }
  41. #morganside .sidetext b { border-bottom:1px dashed #8ebcc9; }
  42. #morganside .morglinks { width:270px; padding:10px; background-color:rgba(255,255,255,0.8); border:1px solid #ccc; margin-top:120px;}
  43.  
  44. #morganside table { border-collapse: collapse; }
  45.  
  46. #morganside table, th, td {
  47. border: 1px solid transparent;
  48. }
  49.  
  50. #morganside table td { width:70px; padding:20px; font-size:9px; text-align:center; text-transform:uppercase; font-weight:800; }
  51.  
  52. #morganside table td:hover { background-color:#8ebcc9; font-style:italic; transition-timing-function:ease-in-out; transition-duration:1s; }
  53.  
  54. #morganmiddle { position:fixed; top:90px; left:370px; border:1px solid #ccc; padding:5px; background-color:rgba(255,255,255,0.6); max-height:500px; }
  55. #morganmiddle .morghold { max-height:455px; padding:10px; overflow:auto; }
  56.  
  57. #morganmiddle .charbox { width:235px; padding:10px; background-color:#fff; border:1px solid #ccc; position:relative; }
  58. #morganmiddle .charname { text-align:left; font-family:tondu; font-size:30px; margin-bottom:5px; margin-top:5px; padding:10px; text-decoration-line:underline; text-decoration-style:wavy; text-decoration-color:#000; }
  59. #morganmiddle .charimg { width:220px; height:220px; border:1px solid #000; padding:5px; }
  60. #morganmiddle .actualimg { width:220px; height:220px; position:relative; }
  61. #morganmiddle .actualimg img { width:220px; height:220px; background-size:cover; }
  62. #morganmiddle .imgoverlay { position:absolute; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.7); overflow:hidden; width:100%; height:0; transition:0.5s ease; }
  63. #morganmiddle .actualimg:hover .imgoverlay { height:100%; }
  64. #morganmiddle .imgchar { height:180px; margin:10px 10px 10px 10px; padding:10px; background-color:#fff; }
  65. #morganmiddle .imginside { height:170px; overflow:auto; text-align:justify; padding:5px; font-size:9px; }
  66. #morganmiddle table { border-spacing:15px; }
  67.  
  68.  
  69. /* --- to change the box colors
  70.  
  71. just replace "taghere" with your desired tag and change the colors
  72.  
  73. i only did three color changes but you can do as many as you want
  74.  
  75.  
  76. only three muse boxes per row --- */
  77.  
  78. #morganmiddle #taghere .charimg { border:1px solid #55d6c2; }
  79. #morganmiddle #taghere .charname { text-decoration-color:#55D6C2; }
  80. #morganmiddle #taghere .imgoverlay { background-color:rgba(85,214,194,0.7); }
  81. #morganmiddle #taghere .imginside b { color:#55D6C2 }
  82.  
  83. #morganmiddle #tag1 .charimg { border:1px solid #f49097; }
  84. #morganmiddle #tag1 .charname { text-decoration-color:#F49097 }
  85. #morganmiddle #tag1 .imgoverlay { background-color:rgba(244,144,151,0.7); }
  86. #morganmiddle #tag1 .imginside b { color:#F49097; }
  87.  
  88.  
  89. #morganmiddle #tag2 .charimg { border:1px solid #dfb2f4; }
  90. #morganmiddle #tag2 .charname { text-decoration-color:#DFB2F4; }
  91. #morganmiddle #tag2 .imgoverlay { background-color:rgba(223,178,244,0.7); }
  92. #morganmiddle #tag2 .imginside b { color:#DFB2F4; }
  93.  
  94. </style>
  95.  
  96.  
  97. </head>
  98.  
  99. <body>
  100. <div id="credit"><a href="https://lollyracketcodes.tumblr.com/"><icon><span class="th th-moon-o" title="page credit to lollyracketcodes"></span></icon></a></div>
  101.  
  102. <div id="morganside">
  103. <div class="infoside"><div class="sidetext">little description here <b>bold bold bold</b> </div></div>
  104. <center>
  105. <div class="morglinks">
  106. <table><tr>
  107. <td><a href="//">link one</a></td>
  108. <td><a href="//">link two</a></td>
  109. <td><a href="//">link three</a></td>
  110. </tr><tr>
  111. <td><a href="//">link four</a></td>
  112. <td><a href="//">link five</a></td>
  113. <td><a href="//">link six</a></td>
  114. </tr> </table> </div>
  115. </center>
  116. </div>
  117.  
  118.  
  119. <div id="morganmiddle">
  120. <div class="morghold">
  121. <table><tr><td>
  122. <div id="taghere">
  123. <div class="charbox">
  124. <div class="charname">name</div>
  125. <div class="charimg">
  126. <div class="actualimg" style="background-image:url(https://placehold.it/220); background-image:cover;"><div class="imgoverlay">
  127. <div class="imgchar"><div class="imginside">here is where you can put a muse or character description <b>bold bold bold</b> </div></div>
  128. </div></div>
  129. </div></td><td>
  130. <div id="tag1">
  131. <div class="charbox">
  132. <div class="charname">name</div>
  133. <div class="charimg">
  134. <div class="actualimg" style="background-image:url(https://placehold.it/220); background-image:cover;"><div class="imgoverlay">
  135. <div class="imgchar"><div class="imginside">here is where you can put a muse or character description <b>bold bold bold</b> </div></div>
  136. </div></div>
  137. </div>
  138. </td><td>
  139. <div id="tag2">
  140. <div class="charbox">
  141. <div class="charname">name</div>
  142. <div class="charimg">
  143. <div class="actualimg" style="background-image:url(https://placehold.it/220); background-image:cover;"><div class="imgoverlay">
  144. <div class="imgchar"><div class="imginside">here is where you can put a muse or character description <b>bold bold bold</b> </div></div>
  145. </div></div>
  146. </div> </td>
  147.  
  148. </tr></table>
  149.  
  150.  
  151.  
  152.  
  153. </div>
  154.  
  155.  
  156. </div>
  157.  
  158. </div>
  159. </div>
  160.  
  161.  
  162.  
  163. </body>
  164.  
  165. </html>
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!