API tools faq
paste
Advertisement
rollyjogered

page theme three: soft universe

rollyjogered
Apr 5th, 2019 (edited)
7,453
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. page theme three: soft universe by pirateskinned
  7.  
  8. please don't: edit & repost / claim as your own
  9. please don't: delete or move the credit
  10. please don't: steal bits of coding
  11.  
  12. if you need any help, feel free to
  13. message me at pirateskinned.tumblr.com
  14.  
  15. ------
  16.  
  17. tumblr controls styling by cyantists.tumblr.com
  18.  
  19. -->
  20.  
  21. <title>{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. <meta name="description" content="{MetaDescription}" />
  26.  
  27. <!-- scripts -->
  28.  
  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  30.  
  31. <!-- icon font -- http://suiomi.com/font -->
  32.  
  33. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  34.  
  35. <!-- fonts -->
  36.  
  37. <link href="https://fonts.googleapis.com/css?family=Poppins:300,500,700,900" rel="stylesheet">
  38.  
  39. <!-- tooltips -->
  40.  
  41. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  42.  
  43. <script>
  44. (function($){
  45. $(document).ready(function(){
  46. $("a[title]").style_my_tooltips({
  47. tip_follows_cursor:true,
  48. tip_delay_time:30,
  49. tip_fade_speed:300,
  50. attribute:"title"
  51. });
  52. });
  53. })(jQuery);
  54. </script>
  55.  
  56. <style type="text/css">
  57.  
  58. /* --- tumblr controls styling by cyantists
  59. http://cyantists.tumblr.com/tumblr_controls/hover --- */
  60.  
  61. iframe.tmblr-iframe {
  62. z-index:99999999999999!important;
  63. top:-2px!important;
  64. right:0!important;
  65. opacity:0;
  66. padding-right:38px;
  67. /* delete invert(1) from here */
  68. filter:invert(1) contrast(150%);
  69. -webkit-filter:invert(1) contrast(150%);
  70. -o-filter:invert(1) contrast(150%);
  71. -moz-filter:invert(1) contrast(150%);
  72. -ms-filter:invert(1) contrast(150%);
  73. /* to here if your blog has a dark background */
  74. transform:scale(0.65);
  75. transform-origin:100% 0;
  76. -webkit-transform:scale(0.65);
  77. -webkit-transform-origin:100% 0;
  78. -o-transform:scale(0.65);
  79. -o-transform-origin:100% 0;
  80. -moz-transform:scale(0.65);
  81. -moz-transform-origin:100% 0;
  82. -ms-transform:scale(0.65);
  83. -ms-transform-origin:100% 0;}
  84.  
  85. iframe.tmblr-iframe:hover {
  86. opacity:0.6!important;}
  87.  
  88. .hcontrols {
  89. position:fixed;
  90. top:0;
  91. right:0;
  92. z-index:999999999;}
  93.  
  94. .hcontrols svg {
  95. width:14px;
  96. height:14px;
  97. padding:9px;}
  98.  
  99. .hcontrols svg path {
  100. fill:#888888;/* change this to change the color of the icon */}
  101.  
  102.  
  103. /* --- tooltips & scrollbars --- */
  104.  
  105. #s-m-t-tooltip {
  106. position:absolute;
  107. margin-top: 15px;
  108. z-index:9999;
  109. padding:3px 5px;
  110. background:#ffffff;
  111. color:#1d1d1d;
  112. border-radius:3px;
  113. font-size:10px;
  114. -webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  115. -moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  116. box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  117. }
  118.  
  119. ::-webkit-scrollbar-thumb:vertical {background-color:#ccbaa2;}
  120. ::-webkit-scrollbar-button:horizontal {background-color:#ccbaa2;}
  121. ::-webkit-scrollbar {background-color:transparent; width:1px;}
  122.  
  123. /* --- basics --- */
  124.  
  125. body {
  126. position:absolute;
  127. top: 0; bottom: 0; left: 0; right: 0;
  128. height: 100%;
  129. background-color:#f6f6f6; /* if you change the background colour, make sure you also change the borders around the images! */
  130. color:#1d1d1d;
  131. font-family: 'Poppins', sans-serif;
  132. font-size:10px;
  133. line-height:15px;
  134. font-weight:300;
  135. text-align:justify;
  136. margin:0;
  137. }
  138.  
  139. a {
  140. color:#1d1d1d;
  141. text-decoration:none;
  142. transition-duration: 0.5s;
  143. }
  144.  
  145. a:hover {
  146. color:#1d1d1d;
  147. text-decoration:none;
  148. }
  149.  
  150. img {
  151. border:none;
  152. text-decoration:none;
  153. }
  154.  
  155. b, strong, bold {
  156. color:#8c8070;
  157. font-weight:500;
  158. }
  159.  
  160. i, em, italic {
  161. color:#8c8070;
  162. }
  163.  
  164. u {
  165. text-decoration:none;
  166. border-bottom:1px solid #8c8070;
  167. }
  168.  
  169. s, strike {
  170. text-decoration-color:#8c8070;
  171. }
  172.  
  173. /* --- container --- */
  174.  
  175. .container {
  176. position:absolute;
  177. margin-top:-275px;
  178. margin-left:-500px;
  179. top:50%;
  180. left:50%;
  181. width:1000px;
  182. height:550px;
  183. }
  184.  
  185. /* --- navigation --- */
  186.  
  187. .nav {
  188. position:absolute;
  189. z-index:99999;
  190. left:0px;
  191. bottom:30px;
  192. width:250px;
  193. height:40px;
  194. text-align:right;
  195. box-sizing:border-box;
  196. padding:0px;
  197. }
  198.  
  199. .nav a {
  200. display:inline-block;
  201. width:auto;
  202. height:40px;
  203. line-height:40px;
  204. text-align:center;
  205. font-size:14px;
  206. margin:0px 5px;
  207. color:#8c8070;
  208. letter-spacing:1px;
  209. font-weight:500;
  210. }
  211.  
  212. .nav a:hover {
  213. font-style:italic;
  214. }
  215.  
  216. /* --- images --- */
  217.  
  218. .mb-img {
  219. position:absolute;
  220. background-position:center center;
  221. background-repeat:no-repeat;
  222. background-size:cover;
  223. }
  224.  
  225. .img-1 {
  226. z-index:10;
  227. width:270px;
  228. height:170px;
  229. top:20px;
  230. left:20px;
  231. }
  232.  
  233. .img-2 {
  234. z-index:20;
  235. width:200px;
  236. height:290px;
  237. top:50px;
  238. left:240px;
  239. border:10px solid #f6f6f6; /* if you change the background colour, change this to the same colour! */
  240. }
  241.  
  242. .img-3 {
  243. z-index:30;
  244. width:180px;
  245. height:260px;
  246. top:190px;
  247. left:80px;
  248. border:10px solid #f6f6f6; /* if you change the background colour, change this to the same colour! */
  249. }
  250.  
  251. .img-4 {
  252. z-index:40;
  253. width:260px;
  254. height:160px;
  255. top:360px;
  256. left:280px;
  257. }
  258.  
  259. .img-5 {
  260. z-index:50;
  261. width:140px;
  262. height:140px;
  263. top:230px;
  264. left:400px;
  265. border-radius:100px;
  266. border:10px solid #f6f6f6; /* if you change the background colour, change this to the same colour! */
  267. }
  268.  
  269. .img-6 {
  270. z-index:50;
  271. width:380px;
  272. height:140px;
  273. top:10px;
  274. left:600px;
  275. }
  276.  
  277. .img-7 {
  278. z-index:50;
  279. width:140px;
  280. height:290px;
  281. top:160px;
  282. left:840px;
  283. }
  284.  
  285. /* --- extras --- */
  286.  
  287. .colours {
  288. position:absolute;
  289. top:200px;
  290. left:50px;
  291. width:50px;
  292. height:150px;
  293. }
  294.  
  295. .colours span {
  296. display:block;
  297. width:30px;
  298. height:30px;
  299. margin:0px 0px 10px 0px;
  300. }
  301.  
  302. .accent {
  303. position:absolute;
  304. top:460px;
  305. left:840px;
  306. width:40px;
  307. height:40px;
  308. }
  309.  
  310. .tape {
  311. position:absolute;
  312. z-index:99;
  313. width:120px;
  314. height:25px;
  315. top:480px;
  316. left:230px;
  317. background-color:#8c8070; /* change the colour of the tape on the bottom left here */
  318. opacity:0.7;
  319. transform:rotate(35deg);
  320. }
  321.  
  322. .tape-2 {
  323. position:absolute;
  324. z-index:99;
  325. width:110px;
  326. height:30px;
  327. top:140px;
  328. left:790px;
  329. background-color:#8c8070; /* change the colour of the tape on the top right here */
  330. opacity:0.7;
  331. transform:rotate(-30deg);
  332. }
  333.  
  334. @font-face { font-family: "zerocal"; src: url('https://dl.dropbox.com/s/kz5u5dwcjprsg2c/Zerocalcare%20Blackletter%20copy.ttf'); format("truetype");}
  335.  
  336. .quote {
  337. position:absolute;
  338. z-index:99;
  339. width:200px;
  340. height:auto;
  341. top:100px;
  342. left:380px;
  343. transform:rotate(-8deg);
  344. font-family: "zerocal";
  345. font-size:40px;
  346. line-height:30px;
  347. text-align:center;
  348. color:#8c8070; /* change the colour of the quote here */
  349. }
  350.  
  351. /* --- stats --- */
  352.  
  353. .stats {
  354. position:absolute;
  355. z-index:45;
  356. top:160px;
  357. left:550px;
  358. width:280px;
  359. height:360px;
  360. background-color:#fff;
  361. box-sizing:border-box;
  362. border:10px solid #fff;
  363. overflow:auto;
  364. padding:10px;
  365. }
  366.  
  367. .stats b {
  368. font-size:120%;
  369. }
  370.  
  371. /* --- credit --- */
  372.  
  373. .credit a {
  374. position:fixed;
  375. font-size:14px;
  376. right:10px;
  377. bottom:10px;
  378. text-align:center;
  379. width:15px;
  380. height:15px;
  381. line-height:15px;
  382. color:#8c8070;
  383. }
  384.  
  385.  
  386. </style>
  387. </head>
  388. <body>
  389.  
  390. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  391.  
  392.  
  393. <div class="container">
  394.  
  395. <!-- start of navigation -->
  396.  
  397. <div class="nav">
  398. <a href="/">home</a>
  399. <a href="/ask">message</a>
  400. <a href="/">about</a>
  401. </div>
  402.  
  403. <!-- images -->
  404. <!-- change the images here! replace YOUR_URL_HERE with the url of your image. make sure you keep the ' ' around the url! -->
  405.  
  406. <!-- top left -->
  407. <div class="mb-img img-1" style="background-image:url('YOUR_URL_HERE');"></div>
  408.  
  409. <!-- tall left of quote -->
  410. <div class="mb-img img-2" style="background-image:url('YOUR_URL_HERE');"></div>
  411.  
  412. <!-- bottom left -->
  413. <div class="mb-img img-3" style="background-image:url('YOUR_URL_HERE');"></div>
  414.  
  415. <!-- wide bottom -->
  416. <div class="mb-img img-4" style="background-image:url('YOUR_URL_HERE');"></div>
  417.  
  418. <!-- round -->
  419. <div class="mb-img img-5" style="background-image:url('YOUR_URL_HERE');"></div>
  420.  
  421. <!-- wide top right -->
  422. <div class="mb-img img-6" style="background-image:url('YOUR_URL_HERE');"></div>
  423.  
  424. <!-- tall bottom right -->
  425. <div class="mb-img img-7" style="background-image:url('YOUR_URL_HERE');"></div>
  426.  
  427. <!-- extras -->
  428.  
  429. <div class="tape"></div>
  430. <div class="tape-2"></div>
  431.  
  432. <div class="quote">your quote goes in here</div>
  433.  
  434. <!-- change the colour accents here! -->
  435. <div class="colours">
  436. <span style="background-color:#c5b39d;"></span>
  437. <span style="background-color:#8b8e7d;"></span>
  438. <span style="background-color:#ccbaa2;"></span>
  439. <span style="background-color:#dde2dc;"></span>
  440. </div>
  441.  
  442. <div class="accent" style="background-color:#bda799;"></div>
  443.  
  444.  
  445. <div class="stats">
  446. <b>title</b>
  447. <br>
  448. normal text
  449.  
  450. <br><br>
  451.  
  452. <b>title</b>
  453. <br>
  454. normal text
  455.  
  456. <br><br>
  457.  
  458. <b>title</b>
  459. <br>
  460. normal text
  461.  
  462. <br><br>
  463.  
  464. <b>title</b>
  465. <br>
  466. normal text
  467.  
  468. <br><br>
  469.  
  470. <b>title</b>
  471. <br>
  472. normal text
  473.  
  474. <br><br>
  475.  
  476. <b>title</b>
  477. <br>
  478. normal text
  479. </div>
  480.  
  481. </div> <!-- end of .container -->
  482.  
  483.  
  484. <!-- credit -- do not touch this -->
  485. <div class="credit"><a class="sf sf-ship" href="http://pirateskinned.tumblr.com/" title="coded by pirateskinned"></a></div>
  486.  
  487. </body></html>
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!