API tools faq
paste
wuunderstruckthemes

PAGE THEME #1 - ANNIE (DARK)

wuunderstruckthemes
Jan 27th, 2019 (edited)
2,006
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head><title>{Title}</title>
  3. <link rel="shortcut icon" href="{Favicon}">
  4.  
  5. <!----------TOOLTIPS SCRIPT---------->
  6.  
  7. <link href="https://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  9. <script src="https://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  10. <script>
  11. (function($){
  12. $(document).ready(function(){
  13. $("[title]").style_my_tooltips({
  14. tip_follows_cursor:true,
  15. tip_delay_time:200,
  16. tip_fade_speed:300
  17. });
  18. });
  19. })(jQuery);
  20. </script>
  21.  
  22. <!------FONTS------>
  23.  
  24. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  25.  
  26. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans|Montserrat" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  30.  
  31. <style type="text/css">
  32.  
  33. @font-face { font-family: "gb"; src: url('https://dl.dropboxusercontent.com/s/c5116qfk3l611bw/Gloss_And_Bloom.ttf') ;}
  34.  
  35.  
  36. /*------tooltips-----*/
  37.  
  38. #s-m-t-tooltip {
  39. max-width:300px;
  40. margin:15px;
  41. padding:5px;
  42. background:#bd5432;
  43. color:#fff;
  44. z-index:999999999999999999999999;
  45. font-size:8px;
  46. font-style:none;
  47. letter-spacing:4px;
  48. font-family:'montserrat';
  49. text-transform:lowercase;
  50. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  51. border-radius:5px;
  52. }
  53.  
  54. /*------scrollbar-----*/
  55.  
  56. ::-webkit-scrollbar-thumb {
  57. height:auto;
  58. background-color:transparent;
  59. border-radius:20px;
  60. }
  61. ::-webkit-scrollbar {
  62. height:7px;
  63. width:3px;
  64. background-color: transparent;
  65. border-radius:50px;
  66. }
  67.  
  68. /*------basics-----*/
  69.  
  70. /*---- to change the two accent colors, search for #bd5432 (the red) and #8fbdbd (the blue)----*/
  71.  
  72. body {
  73. background:#759599 url('') repeat right top fixed; /*----change your background color and image here----*/
  74. background-size:cover;
  75. color:#cccccc; /*---- change the text color here ----*/
  76. font-family:'IBM plex sans';
  77. line-height:15px;
  78. font-size:11px;
  79. margin:0;
  80. text-align:left;
  81. }
  82.  
  83. a {
  84. color:#000;
  85. text-decoration:none;
  86. }
  87.  
  88. a:hover {
  89. text-decoration:none;
  90. color:#ccc;
  91. -webkit-transition:all 0.5s;
  92. -moz-transition:all 0.5s;
  93. -ms-transition:all 0.5s;
  94. -o-transition:all 0.5s;
  95. transition:all 0.5s;
  96. }
  97.  
  98. b, strong {
  99. color:#bd5432;
  100. }
  101.  
  102. i, em {
  103. color:#8fbdbd;
  104. }
  105.  
  106. #content {
  107. width:100%;
  108. }
  109.  
  110. #container {
  111. left:50%;
  112. margin-left:-350px;
  113. width:700px;
  114. top:50%;
  115. margin-top:-230px;
  116. height:460px;
  117. max-height:460px;
  118. overflow-y:scroll;
  119. background:rgb(20, 20, 20, 0.4);
  120. position:fixed;
  121. padding-left:15px;
  122. border-radius:5px;
  123. }
  124.  
  125. .muse {
  126. width:180px;
  127. height:180px;
  128. border-radius:10px;
  129. display:inline-block;
  130. margin:25px;
  131. -webkit-transition:all 0.5s;
  132. -moz-transition:all 0.5s;
  133. -ms-transition:all 0.5s;
  134. -o-transition:all 0.5s;
  135. transition:all 0.5s;
  136. background:rgb(20, 20, 20, 0.4);
  137. }
  138.  
  139. .museimg img {
  140. border-radius:10px;
  141. width:60px;
  142. margin-left:10px;
  143. margin-top:10px;
  144. }
  145.  
  146. .museimg img:hover {
  147. -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  148. filter: grayscale(100%);
  149. -webkit-transition:all 1s;
  150. -moz-transition:all 1s;
  151. -ms-transition:all 1s;
  152. -o-transition:all 1s;
  153. transition:all 1s;
  154. box-shadow:1px 1px 5px #666;
  155. }
  156.  
  157. .links {
  158. display:inline-block;
  159. margin-left:10px;
  160. }
  161.  
  162. .links a {
  163. padding:5px;
  164. display:inline-block;
  165. color:#fff;
  166. background-image: linear-gradient(to right, #bd5432, #8fbdbd);
  167. margin-right:2px;
  168. padding:8px;
  169. width:13px;
  170. height:13px;
  171. font-size:13px;
  172. text-transform:uppercase;
  173. font-weight:normal;
  174. border-radius:10px;
  175. }
  176.  
  177. .links a:hover {
  178.  
  179. text-shadow: 2px 2px 8px #bd5432;
  180. }
  181.  
  182. .description {
  183. background:rgb(20, 20, 20, 0.5);
  184. width:80px;
  185. height:80px;
  186. border-radius:10px;
  187. overflow-y:scroll;
  188. float:right;
  189. padding:5px;
  190. font-size:9px;
  191. margin-right:10px;
  192. margin-top:-65px;
  193. text-align:justify;
  194. }
  195.  
  196. #header {
  197. width:1000px;
  198. position:fixed;
  199. top:50%;
  200. margin-top:-258px;
  201. left:50%;
  202. margin-left:-330px;
  203. }
  204.  
  205. h1 {
  206. font-family:'montserrat';
  207. font-size:24px;
  208. background:-webkit-linear-gradient(20deg, #bd5432, #8fbdbd);
  209. -webkit-background-clip: text;
  210. -webkit-text-fill-color: transparent;
  211. line-height:100%;
  212. text-transform:uppercase;
  213. text-align:right;
  214. margin-right:10px;
  215. }
  216.  
  217. .navlinks {
  218. width:100%;
  219. -moz-transition-duration:0.25s;
  220. -webkit-transition-duration:0.25s;
  221. -o-transition-duration:0.25s;
  222. transition-duration:0.25s;
  223. position:relative;
  224. }
  225.  
  226. .navlinks a {
  227. display:inline-block;
  228. background-image: linear-gradient(to right, #bd5432, #8fbdbd);
  229. font-size:10px;
  230. border-radius:5px 5px 0px 0px;
  231. color:#fff;
  232. padding:7px;
  233. width:50px;
  234. height:15px;
  235. margin-right:15px;
  236. text-align:center;
  237. -moz-transition-duration:0.25s;
  238. -webkit-transition-duration:0.25s;
  239. -o-transition-duration:0.25s;
  240. transition-duration:0.25s;
  241. top:0px;
  242. position:relative;
  243. }
  244.  
  245. .navlinks a:hover {
  246. height:20px;
  247. top:-5px;
  248. }
  249.  
  250. .credit {
  251. font-size:15px;
  252. position:fixed;
  253. font-weight:normal;
  254. bottom:10px;
  255. right:15px;
  256. z-index:10;
  257. text-align:right;
  258. }
  259.  
  260. .credit a {
  261. background-color:#bd5432;
  262. color:#fff;
  263. padding-top:6px;
  264. padding-bottom:3px;
  265. padding-right:7px;
  266. padding-left:6px;
  267. border-radius:5px;
  268. }
  269.  
  270. .credit a:hover {
  271. background-color:#fff;
  272. color:#bd5432;
  273. -moz-transition-duration:0.5s;
  274. -webkit-transition-duration:0.5s;
  275. -o-transition-duration:0.5s;
  276. }
  277.  
  278. </style>
  279. </head>
  280.  
  281. <body>
  282. <div id="content">
  283.  
  284. <div id="header"><div class="navlinks"><a href="/">home</a> <a href="/ask">message</a> <a href="/">link</a> <a href="/">link</a> </div></div>
  285.  
  286. <div id="container">
  287.  
  288. <!----BEGIN MUSES---->
  289.  
  290. <!----muse 1---->
  291.  
  292. <div class="muse">
  293. <div class="museimg">
  294. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  295.  
  296. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  297. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  298. </div>
  299.  
  300. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  301.  
  302. <h1>&mdash; muse<br>name.</h1>
  303. </div>
  304.  
  305. <!---end muse 1---->
  306.  
  307. <!----muse 2---->
  308.  
  309. <div class="muse">
  310. <div class="museimg">
  311. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  312.  
  313. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  314. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  315. </div>
  316.  
  317. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  318.  
  319. <h1>&mdash; muse<br>name.</h1>
  320. </div>
  321.  
  322. <!---end muse 2---->
  323.  
  324. <!----muse 3---->
  325.  
  326. <div class="muse">
  327. <div class="museimg">
  328. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  329.  
  330. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  331. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  332. </div>
  333.  
  334. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  335.  
  336. <h1>&mdash; muse<br>name.</h1>
  337. </div>
  338.  
  339. <!---end muse 3---->
  340.  
  341. <!----muse 4---->
  342.  
  343. <div class="muse">
  344. <div class="museimg">
  345. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  346.  
  347. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  348. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  349. </div>
  350.  
  351. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  352.  
  353. <h1>&mdash; muse<br>name.</h1>
  354. </div>
  355.  
  356. <!---end muse 4---->
  357.  
  358. <!----muse 5---->
  359.  
  360. <div class="muse">
  361. <div class="museimg">
  362. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  363.  
  364. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  365. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  366. </div>
  367.  
  368. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  369.  
  370. <h1>&mdash; muse<br>name.</h1>
  371. </div>
  372.  
  373. <!---end muse 5---->
  374.  
  375. <!----muse 6---->
  376.  
  377. <div class="muse">
  378. <div class="museimg">
  379. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  380.  
  381. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  382. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  383. </div>
  384.  
  385. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  386.  
  387. <h1>&mdash; muse<br>name.</h1>
  388. </div>
  389.  
  390. <!---end muse 6---->
  391.  
  392. <!----muse 7--->
  393.  
  394. <div class="muse">
  395. <div class="museimg">
  396. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  397.  
  398. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  399. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  400. </div>
  401.  
  402. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  403.  
  404. <h1>&mdash; muse<br>name.</h1>
  405. </div>
  406.  
  407. <!---end muse 7---->
  408.  
  409. <!----muse 8---->
  410.  
  411. <div class="muse">
  412. <div class="museimg">
  413. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  414.  
  415. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  416. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  417. </div>
  418.  
  419. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  420.  
  421. <h1>&mdash; muse<br>name.</h1>
  422. </div>
  423.  
  424. <!---end muse 8---->
  425.  
  426. <!----muse 9---->
  427.  
  428. <div class="muse">
  429. <div class="museimg">
  430. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  431.  
  432. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  433. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  434. </div>
  435.  
  436. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  437.  
  438. <h1>&mdash; muse<br>name.</h1>
  439. </div>
  440.  
  441. <!---end muse 9---->
  442.  
  443. <!----muse 10---->
  444.  
  445. <div class="muse">
  446. <div class="museimg">
  447. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  448.  
  449. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  450. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  451. </div>
  452.  
  453. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  454.  
  455. <h1>&mdash; muse<br>name.</h1>
  456. </div>
  457.  
  458. <!---end muse 10---->
  459.  
  460. <!----muse 11---->
  461.  
  462. <div class="muse">
  463. <div class="museimg">
  464. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  465.  
  466. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  467. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  468. </div>
  469.  
  470. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  471.  
  472. <h1>&mdash; muse<br>name.</h1>
  473. </div>
  474.  
  475. <!---end muse 11---->
  476.  
  477. <!----muse 12---->
  478.  
  479. <div class="muse">
  480. <div class="museimg">
  481. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  482.  
  483. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  484. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  485. </div>
  486.  
  487. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  488.  
  489. <h1>&mdash; muse<br>name.</h1>
  490. </div>
  491.  
  492. <!---end muse 12---->
  493.  
  494. <!----muse 13---->
  495.  
  496. <div class="muse">
  497. <div class="museimg">
  498. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  499.  
  500. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  501. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  502. </div>
  503.  
  504. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  505.  
  506. <h1>&mdash; muse<br>name.</h1>
  507. </div>
  508.  
  509. <!---end muse 13---->
  510.  
  511. <!----muse 14---->
  512.  
  513. <div class="muse">
  514. <div class="museimg">
  515. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  516.  
  517. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  518. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  519. </div>
  520.  
  521. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  522.  
  523. <h1>&mdash; muse<br>name.</h1>
  524. </div>
  525.  
  526. <!---end muse 14---->
  527.  
  528. <!----muse 14---->
  529.  
  530. <div class="muse">
  531. <div class="museimg">
  532. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  533.  
  534. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  535. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  536. </div>
  537.  
  538. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  539.  
  540. <h1>&mdash; muse<br>name.</h1>
  541. </div>
  542.  
  543. <!---end muse 15---->
  544.  
  545. <!----to add another muse, copy the code below:
  546.  
  547. <div class="muse">
  548. <div class="museimg">
  549. <a title="muse name" href="#"><img src="https://i.imgur.com/VUpCA5a.png"></a></div>
  550.  
  551. <div class="links"><a title="link one" href="/"><span class="th th-earth-o"></span></a>
  552. <a title="link two" href="/"><span class="th th-stars-o"></span></a>
  553. </div>
  554.  
  555. <div class="description"><b>age. faceclaim. label. etc.</b> &mdash; put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! put whatever u want here, it scrolls! </div>
  556.  
  557. <h1>&mdash; muse<br>name.</h1>
  558. </div>
  559.  
  560. ---->
  561.  
  562. <!----END MUSES---->
  563.  
  564.  
  565. </div>
  566. </div>
  567.  
  568. <div class="credit">
  569. <a title="skyofrp" href="http://skyofrp.tumblr.com/"><span class="th th-avocado-o"></span></a></div>
  570.  
  571. </body>
  572. </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!