API tools faq
paste
wuunderstruckthemes

PAGE THEME #2 - COMEBACK

wuunderstruckthemes
Jun 29th, 2019 (edited)
2,756
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.95 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=ABeeZee|IBM+Plex+Mono|IBM+Plex+Sans|Questrial|Karla|Rubik" rel="stylesheet">
  29.  
  30. <style type="text/css">
  31.  
  32. @font-face { font-family: "dalmatins"; src: url('https://dl.dropboxusercontent.com/s/vt2bux883emjhf3/Dalmatins.otf') ;}
  33.  
  34.  
  35. /*------tooltips-----*/
  36.  
  37. #s-m-t-tooltip {
  38. max-width:300px;
  39. margin:15px;
  40. padding:5px;
  41. background:#b87a69;
  42. color:#fff;
  43. z-index:999999999999999999999999;
  44. font-size:8px;
  45. font-style:none;
  46. letter-spacing:4px;
  47. font-family:'abeezee';
  48. text-transform:lowercase;
  49. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  50. border-radius:5px;
  51. }
  52.  
  53. /*------scrollbar-----*/
  54.  
  55. ::-webkit-scrollbar-thumb {
  56. height:auto;
  57. background-color:transparent;
  58. border-radius:0px;
  59. }
  60. ::-webkit-scrollbar {
  61. height:0px;
  62. width:0px;
  63. background-color: transparent;
  64. border-radius:50px;
  65. }
  66.  
  67. /*------basics-----*/
  68.  
  69. /*---- to change the two accent colors, search for #b87a69 (the pink) and #546b6b (the teal)----*/
  70.  
  71. /*---- body fonts available: questrial, abeezee, & ibm plex sans, ibm plex mono, karla, & rubik ----*/
  72.  
  73. body {
  74. background:#182020 url('https://image.ibb.co/hXE3gm/hl3.png') repeat right top fixed; /*----change your background color and image here----*/
  75. background-size:cover;
  76. color:#666; /*---- change the text color here ----*/
  77. font-family:'rubik';
  78. line-height:15px;
  79. font-size:11px;
  80. margin:0;
  81. text-align:left;
  82. }
  83.  
  84. a {
  85. color:#546b6b;
  86. text-decoration:none;
  87. }
  88.  
  89. a:hover {
  90. text-decoration:none;
  91. color:#b87a69;
  92. -webkit-transition:all 0.5s;
  93. -moz-transition:all 0.5s;
  94. -ms-transition:all 0.5s;
  95. -o-transition:all 0.5s;
  96. transition:all 0.5s;
  97. }
  98.  
  99. b, strong {
  100. color:#b87a69;
  101. text-transform:uppercase;
  102. letter-spacing:3px;
  103. }
  104.  
  105. i, em {
  106. color:#546b6b;
  107. font-family:'dalmatins';
  108. font-style:normal;
  109. font-weight:bold;
  110. }
  111.  
  112. #content {
  113. width:100%;
  114. }
  115.  
  116. #container {
  117. left:50%;
  118. margin-left:-350px;
  119. width:700px;
  120. top:50%;
  121. margin-top:-210px;
  122. height:460px;
  123. background:#eee;
  124. position:fixed;
  125. padding-left:15px;
  126. padding-right:0px;
  127. border-radius:10px;
  128. }
  129.  
  130. .sidepic {
  131. width:250px;
  132. height:460px;
  133. display:inline-block;
  134. position:fixed;
  135. margin-left:450px;
  136. }
  137.  
  138. .sidepic img {
  139. border-radius:0px 5px 5px 0px;
  140. width:250px;
  141. height:460px;
  142. opacity:0.8;
  143. -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  144. filter: grayscale(100%);
  145. }
  146.  
  147. h1 {
  148. font-family:'dalmatins';
  149. font-size:24px;
  150. color:#b87a69;
  151. text-transform:lowercase;
  152. text-align:left;
  153. margin-left:10px;
  154. margin-top:30px;
  155. z-index:99;
  156. display:inline-block;
  157. width:260px;
  158. }
  159.  
  160. h2 {
  161. letter-spacing:3px;
  162. font-weight:bold;
  163. font-size:12px;
  164. text-align:center;
  165. text-transform:uppercase;
  166. width:430px;
  167. margin-top:20px;
  168. color:#546b6b;
  169. }
  170.  
  171. .links {
  172. width:130px;
  173. display:inline-block;
  174. margin-left:5px;
  175. background-color:#546b6b;
  176. border-radius:200px;
  177. padding:5px 10px 5px 10px;
  178. font-family:'ibm plex sans'; /*---- you can change the font everywhere except here, otherwise the links won't look right ----*/
  179. }
  180.  
  181. .links a {
  182. color:#eee;
  183. margin-right:4px;
  184. margin-left:4px;
  185. }
  186.  
  187. .links a:hover {
  188. color:#b87a69;
  189. }
  190.  
  191. .instapic {
  192. width:100%;
  193. margin-top:30px;
  194. margin-bottom:20px;
  195. }
  196.  
  197. .instapic img {
  198. width:75px;
  199. height:75px;
  200. border-radius:7px;
  201. margin-right:5px;
  202. margin-left:5px;
  203. z-index:9999999999999999;
  204. }
  205.  
  206. .credit {
  207. font-size:15px;
  208. position:fixed;
  209. font-weight:normal;
  210. bottom:10px;
  211. right:15px;
  212. z-index:10;
  213. text-align:right;
  214. }
  215.  
  216. .longdesc {
  217. background-color:#fff;
  218. width:220px;
  219. height:180px;
  220. border-radius:5px;
  221. display:inline-block;
  222. margin-left:10px;
  223. margin-top:10px;
  224. padding:10px;
  225. overflow-y:scroll;
  226. text-align:justify;
  227. text-transform:lowercase;
  228. line-height:200%;
  229. }
  230.  
  231. .shortdesc {
  232. width:120px;
  233. height:180px;
  234. overflow-y:scroll;
  235. text-transform:lowercase;
  236. text-align:center;
  237. display:inline-block;
  238. background-color:#fff;
  239. border-radius:5px;
  240. padding:10px;
  241. margin-left:30px;
  242. line-height:200%;
  243. }
  244.  
  245. .navlinks {
  246. width:400px;
  247. height:35px;
  248. border-radius:0px 0px 10px 10px;
  249. background-color:#546b6b;
  250. margin:auto;
  251. text-align:center;
  252. }
  253.  
  254. .navlinks a {
  255. font-weight:bold;
  256. font-size:12px;
  257. color:#eee;
  258. display:inline-block;
  259. margin-top:9px;
  260. margin-left:6px;
  261. margin-right:6px;
  262. }
  263.  
  264. .navlinks a:hover {
  265. color:#b87a69;
  266. }
  267.  
  268. .credit a {
  269. background-color:#b87a69;
  270. color:#fff;
  271. padding-top:6px;
  272. padding-bottom:3px;
  273. padding-right:7px;
  274. padding-left:6px;
  275. border-radius:5px;
  276. }
  277.  
  278. .credit a:hover {
  279. background-color:#fff;
  280. color:#b87a69;
  281. -moz-transition-duration:0.5s;
  282. -webkit-transition-duration:0.5s;
  283. -o-transition-duration:0.5s;
  284. }
  285.  
  286. </style>
  287. </head>
  288.  
  289. <body>
  290. <div id="content">
  291.  
  292. <div id="container">
  293.  
  294. <!---- change your sidebar picture here by replacing "https://via.placeholder.com/250x460" with your image. the dimensions are 250x460! --->
  295.  
  296. <div class="sidepic"><img src="https://via.placeholder.com/250x460"></div>
  297.  
  298. <!--- change your muse name here, don't delete the <h1> </h1> !! --->
  299.  
  300. <h1>muse name.</h1>
  301.  
  302. <!--- to change your link font icons, you can find more options at http://www.honeybee.suiomi.com, and follow the instructions there to replace your icons with whatever you want them to be --->
  303.  
  304. <div class="links">
  305. <a title="musings" href="/"><span class="th th-key-o"></span></a>
  306. <a title="interactions" href="/"><span class="th th-pencil-o"></span></a>
  307. <a title="crushes" href="/"><span class="th th-heart-1-o"></span></a>
  308. <a title="playlist" href="/"><span class="th th-music-o"></span></a>
  309. <a title="pinterest" href="/"><span class="th th-push-pin-o"></span></a>
  310. <a title="extra" href="/"><span class="th th-app-o"></span></a>
  311. </div>
  312.  
  313. <!---- here you can add the instagram-esque icons; the dimensions are 75x75! --->
  314.  
  315. <div class="instapic">
  316. <img src="https://via.placeholder.com/75x75">
  317. <img src="https://via.placeholder.com/75x75">
  318. <img src="https://via.placeholder.com/75x75">
  319. <img src="https://via.placeholder.com/75x75">
  320. <img src="https://via.placeholder.com/75x75">
  321. </div>
  322.  
  323. <!---here you can add a one line of text, maybe a quote or lyric! it looks best as one line but you CAN do two lines, just don't do more than that!--->
  324.  
  325. <h2>come back to me, baby, i'll come back to you</h2>
  326.  
  327. <!----here you can put a longer bit of text, maybe a character biography or whatever you want. it scrolls so you can put as much text as you'd like!---->
  328.  
  329. <div class="longdesc">
  330. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas pharetra convallis posuere morbi leo urna molestie at elementum. Sapien nec sagittis aliquam malesuada. Dictumst vestibulum rhoncus est pellentesque elit. Nunc vel risus commodo viverra. Tellus molestie nunc non blandit massa enim nec dui. Ut sem viverra aliquet eget sit amet tellus cras. Augue neque gravida in fermentum et sollicitudin ac orci. Cras semper auctor neque vitae tempus. Faucibus in ornare quam viverra orci sagittis eu. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Eros donec ac odio tempor orci dapibus. Velit aliquet sagittis id consectetur. Et pharetra pharetra massa massa ultricies. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Consequat semper viverra nam libero justo laoreet sit amet. Cursus euismod quis viverra nibh cras.
  331. <br><br>
  332. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Pellentesque nec nam aliquam sem et tortor consequat id. Faucibus vitae aliquet nec ullamcorper. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Consequat ac felis donec et odio. Dignissim cras tincidunt lobortis feugiat vivamus at augue. Ut tortor pretium viverra suspendisse. Ornare quam viverra orci sagittis eu. Aenean et tortor at risus viverra adipiscing at. Vel turpis nunc eget lorem. Iaculis at erat pellentesque adipiscing commodo elit. Quis commodo odio aenean sed adipiscing diam donec. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Morbi tristique senectus et netus et malesuada. Dictum varius duis at consectetur lorem.
  333. <br><br>
  334. Massa tempor nec feugiat nisl pretium fusce id velit. Metus aliquam eleifend mi in nulla posuere sollicitudin. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus. Dictum varius duis at consectetur lorem. Eros in cursus turpis massa tincidunt dui ut ornare. Tempor orci dapibus ultrices in iaculis nunc sed. Cras semper auctor neque vitae tempus quam pellentesque. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Massa eget egestas purus viverra accumsan in nisl. Auctor neque vitae tempus quam pellentesque nec. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Aliquam malesuada bibendum arcu vitae. Tellus mauris a diam maecenas sed enim ut sem viverra. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Egestas tellus rutrum tellus pellentesque eu. Ut faucibus pulvinar elementum integer enim neque. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti.
  335.  
  336. </div>
  337.  
  338. <!----here you can put a shorter bit of text, maybe stats or aesthetics or whatever you want, really. it scrolls so you can put as much text as you want! NOTE: to get the more bold font, highlight your text with <b></b>, and to get the more scripty font, highlight your text with <i></i> !--->
  339.  
  340. <div class="shortdesc">
  341.  
  342. <b>rainy days</b> and <i>starry nights</i>, carousel lights and <i>twinkling stars</i>, <b>crop tops</b>, knitting needles, lazy rivers, lit up <b>laptop keys</b>, <i>insomnia</i>, late night <u><b>drives</b></u>, <i>points on a map</i>, finding your place, <b>septum piercings</b>, <i>flower petals</i>, wood grain, soft velvet, <i>a warm breeze.</i>
  343.  
  344.  
  345. </div>
  346.  
  347. </div>
  348.  
  349. </div>
  350.  
  351. <!----here's the navigation part of the page where you can change the two links to link back to whatever pages you would like!--->
  352.  
  353. <div class="navlinks">
  354. <a href="/">home</a>
  355. <a href="/ask">message</a>
  356. <a href="/">link</a>
  357. <a href="/">link</a>
  358. </div>
  359.  
  360. <!---- please do NOT touch this---->
  361.  
  362. <div class="credit">
  363. <a title="skyofrp" href="http://skyofrp.tumblr.com/"><span class="th th-avocado-o"></span></a></div>
  364.  
  365. </body>
  366. </html>
Advertisement
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!