API tools faq
paste
Advertisement
rollyjogered

page theme one: higher

rollyjogered
Dec 15th, 2018 (edited)
3,807
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. page theme one: higher 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 odeysseus.tumblr.com
  18.  
  19. -->
  20.  
  21. <title>higher</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. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <!-- masonry -->
  33.  
  34. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  35.  
  36. <script>
  37. $(document).ready(function(){
  38. $('.entries').masonry({
  39. // options
  40. itemSelector : '.muse'
  41. //columnWidth : 550
  42. });
  43. });
  44. </script>
  45.  
  46. <!-- fonts -->
  47.  
  48. <link href="https://fonts.googleapis.com/css?family=ABeeZee:400,400i" rel="stylesheet">
  49.  
  50. <!-- icon font -- http://suiomi.com/font -->
  51.  
  52. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  53.  
  54. <!-- tooltips -->
  55.  
  56. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  57.  
  58. <script>
  59. (function($){
  60. $(document).ready(function(){
  61. $("a[title]").style_my_tooltips({
  62. tip_follows_cursor:true,
  63. tip_delay_time:30,
  64. tip_fade_speed:300,
  65. attribute:"title"
  66. });
  67. });
  68. })(jQuery);
  69. </script>
  70.  
  71. <style type="text/css">
  72.  
  73. /* --- tumblr controls styling by odeysseus
  74. http://odeysseus.tumblr.com/post/163708246967/ --- */
  75.  
  76. .tmblr-iframe {
  77. white-space:nowrap;
  78. -webkit-filter: invert(100%);
  79. -moz-filter: invert(100%);
  80. -o-filter: invert(100%);
  81. -ms-filter: invert(100%);
  82. filter: invert(100%);
  83. opacity:.2;
  84. transition: .4s ease-in-out;
  85. -webkit-transition: .4s ease-in-out;
  86. -moz-transition: .4s ease-in-out;
  87. -o-transition: .4s ease-in-out;
  88. position:fixed!important;
  89. right:-10px!important;
  90. transform:scale(0.7,0.7);
  91. }
  92.  
  93. .tmblr-iframe:hover {
  94. opacity:1;
  95. }
  96.  
  97. /* --- tooltips & scrollbars --- */
  98.  
  99. #s-m-t-tooltip {
  100. position:absolute;
  101. margin-top: 15px;
  102. z-index:9999;
  103. padding:3px 5px;
  104. background:#ffffff;
  105. color:#1d1d1d;
  106. border-radius:3px;
  107. font-size:10px;
  108. -webkit-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  109. -moz-box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  110. box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.8);
  111. }
  112.  
  113. ::-webkit-scrollbar-thumb:vertical {background-color:#5f9cbe;}
  114. ::-webkit-scrollbar-button:horizontal {background-color:#5f9cbe;}
  115. ::-webkit-scrollbar {background-color:transparent; width:3px;}
  116.  
  117. /* --- basics --- */
  118.  
  119. body {
  120. background-color:#FFFFFF;
  121. background-image:url('https://static.tumblr.com/ba4f45b9c0e5b8010315cb61a1f717b7/k9k7gco/9Zbpjeuwg/tumblr_static_a5y2w6hsbpk4wowoc8o84kccw.png');
  122. background-attachment:fixed;
  123. background-position:center center;
  124. background-repeat:repeat;
  125. background-size:auto;
  126. color:#1d1d1d;
  127. font-family: 'ABeeZee', sans-serif;
  128. font-size:10px;
  129. line-height:15px;
  130. font-weight:400;
  131. text-align:justify;
  132. margin:0;
  133. }
  134.  
  135. a {
  136. color:#1d1d1d;
  137. text-decoration:none;
  138. -moz-transition-duration: 0.5s;
  139. -o-transition-duration: 0.5s;
  140. -webkit-transition-duration: 0.5s;
  141. transition-duration: 0.5s;
  142. }
  143.  
  144. a:hover {
  145. color:#1d1d1d;
  146. text-decoration:none;
  147. }
  148.  
  149. p a, .description a {box-shadow:#dcd3d0 0px -5px 0px inset;}
  150. p a:hover, .description a:hover {box-shadow:#dcd3d0 0px -11px 0px inset;}
  151.  
  152. img {
  153. border:none;
  154. text-decoration:none;
  155. }
  156.  
  157. b, strong, bold {
  158. color:#495b65;
  159. font-weight:700;
  160. }
  161.  
  162. i, em, italic {
  163. color:#58707a;
  164. }
  165.  
  166. u {
  167. text-decoration:none;
  168. border-bottom:1px solid #58707a;
  169. }
  170.  
  171. s, strike {
  172. text-decoration-color:#a15548;
  173. }
  174.  
  175. small, sub, sup, big {
  176. font-size:10px;
  177. line-height:14px;
  178. vertical-align:baseline;
  179. }
  180.  
  181. blockquote {
  182. padding:0px 5px 0px 15px;
  183. border-left:1px solid #eeeeee;
  184. margin-left:5px;
  185. margin-right:0px;
  186. }
  187.  
  188. blockquote blockquote {
  189. margin-right:0px;
  190. }
  191.  
  192. pre {
  193. font-family: 'ABeeZee', sans-serif;
  194. font-size:10px;
  195. text-transform:uppercase;
  196. font-weight:700;
  197. padding:10px;
  198. background-color:#a15548;
  199. color:#ffffff;
  200. border-radius:6px;
  201. }
  202.  
  203. pre i, pre em, pre b, pre strong, pre a {
  204. color:#ffffff;
  205. }
  206.  
  207. ul {
  208. padding-left:15px;
  209. }
  210.  
  211. ul li {
  212. list-style-type:none;
  213. }
  214.  
  215. ul li:before {
  216. content: "— ";
  217. text-indent: -5px;
  218. }
  219.  
  220. /* --- header styles --- */
  221.  
  222. h1 {
  223. margin:0px;
  224. font-weight:bold;
  225. color:#495b65;
  226. text-align:left;
  227. }
  228.  
  229. h2 {
  230. font-weight:normal;
  231. color:#a15548;
  232. text-align:left;
  233. text-transform:uppercase;
  234. font-size:12px;
  235. }
  236.  
  237. h2 b, b h2, h2 i, i h2,
  238. h2 strong, strong h2, h2 em, em h2 {
  239. color:#a15548;
  240. }
  241.  
  242.  
  243. /* --- container --- */
  244.  
  245. .container {
  246. position:absolute;
  247. margin-top:-300px;
  248. margin-left:-450px;
  249. top:50%;
  250. left:50%;
  251. width:900px;
  252. height:600px;
  253. overflow:hidden;
  254. border-radius:6px;
  255. background-color:#f6f6f6;
  256. background-image:url('https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2767&q=80');
  257. background-position:center center;
  258. background-repeat:no-repeat;
  259. background-size:cover;
  260. border:1px solid #eeeeee;
  261. box-shadow:rgba(0,0,0,.05) 1px 1px 3px;
  262. }
  263.  
  264. /* --- sidebar --- */
  265.  
  266. .sidebar {
  267. position:absolute;
  268. z-index:7;
  269. top:100px;
  270. left:60px;
  271. width:260px;
  272. height:150px;
  273. background:#f6f6f6;
  274. border-radius:6px;
  275. border:1px solid #eeeeee;
  276. box-shadow:rgba(0,0,0,.05) 1px 1px 3px;
  277. }
  278.  
  279. /* --- description + sidebar icon --- */
  280.  
  281. .sidebar img {
  282. position:absolute;
  283. width:70px;
  284. height:70px;
  285. margin:20px;
  286. border-radius:6px;
  287. }
  288.  
  289. .description {
  290. position:absolute;
  291. z-index:5;
  292. left:90px;
  293. top:0px;
  294. width:170px;
  295. height:112px;
  296. padding:20px;
  297. box-sizing:border-box;
  298. font-size:10px;
  299. line-height:18px;
  300. overflow-x:hidden;
  301. overflow-y:auto;
  302. text-align-last:justify;
  303. }
  304.  
  305. /* --- navigation --- */
  306.  
  307. .nav {
  308. position:absolute;
  309. left:0px;
  310. bottom:0px;
  311. width:260px;
  312. height:40px;
  313. text-align:center;
  314. box-sizing:border-box;
  315. padding:0px;
  316. border-radius:0px 0px 6px 6px;
  317. background-color:#ffffff;
  318. border-top:1px solid #eeeeee;
  319. }
  320.  
  321. .nav a {
  322. -webkit-transition-duration: 0.6s;
  323. transition-duration: 0.6s;
  324. display:inline-block;
  325. width:auto;
  326. height:14px;
  327. line-height:14px;
  328. text-align:center;
  329. font-size:10px;
  330. margin:13px 5px;
  331. color:#1d1d1d;
  332. border-bottom:1px solid transparent;
  333. }
  334.  
  335. .nav a:hover {
  336. border-bottom:1px solid #1d1d1d;
  337. }
  338.  
  339. /* --- museContainer --- */
  340.  
  341. .museContainer {
  342. position:absolute;
  343. z-index:3;
  344. top:0px;
  345. right:0px;
  346. width:547px;
  347. height:600px;
  348. overflow-x:hidden;
  349. overflow-y:auto;
  350. background-color:transparent;
  351. box-sizing:border-box;
  352. padding:50px 20px 50px 20px;
  353. border-radius:6px;
  354. }
  355.  
  356. /* --- muse cards --- */
  357.  
  358. .muse {
  359. width:179px;
  360. padding:20px;
  361. float:left;
  362. overflow:hidden;
  363. margin:10px;
  364. background-color:#ffffff;
  365. border-radius:6px;
  366. border:1px solid #eeeeee;
  367. box-shadow:rgba(0,0,0,.05) 1px 1px 3px;
  368. }
  369. .muse .icons {
  370. position:absolute;
  371. margin:-5px -5px 0px -5px;
  372. }
  373.  
  374. .muse .icons img {
  375. width:90px;
  376. height:90px;
  377. float:left;
  378. border-radius:6px;
  379. }
  380.  
  381. .muse .icons img:nth-of-type(1) {margin:0px 10px 10px 0px;}
  382. .muse .icons img:nth-of-type(2) {margin:0px 0px 10px 0px;}
  383.  
  384. .muse table {
  385. margin-top:100px;
  386. }
  387.  
  388. .muse .links {
  389. margin:10px -20px -20px -20px;
  390. width:219px;
  391. height:auto;
  392. text-align:center;
  393. box-sizing:border-box;
  394. padding:0px;
  395. border-radius:0px 0px 6px 6px;
  396. background-color:#ffffff;
  397. border-top:1px solid #eeeeee;
  398. }
  399.  
  400. .muse .links a {
  401. -webkit-transition-duration: 0.6s;
  402. transition-duration: 0.6s;
  403. display:inline-block;
  404. width:auto;
  405. height:14px;
  406. line-height:14px;
  407. text-align:center;
  408. font-size:10px;
  409. margin:13px 5px;
  410. color:#1d1d1d;
  411. border-bottom:1px solid transparent;
  412. }
  413.  
  414. .muse .links a:hover {
  415. border-bottom:1px solid #1d1d1d;
  416. }
  417.  
  418. /* --- credit --- */
  419.  
  420. .credit a {
  421. position:fixed;
  422. font-size:14px;
  423. right:10px;
  424. bottom:10px;
  425. text-align:center;
  426. width:15px;
  427. height:15px;
  428. line-height:15px;
  429. color:#495b65;
  430. }
  431.  
  432.  
  433. </style>
  434. </head>
  435. <body>
  436.  
  437.  
  438. <div class="container">
  439.  
  440.  
  441. <!-- start of .sidebar -->
  442.  
  443. <div class="sidebar">
  444.  
  445. <img src="http://i.imgur.com/19FZFp9.png">
  446.  
  447. <div class="description">
  448. this is where you can put your lovely muses.
  449. all icons used were created by <a href="http://acuite.tumblr.com/icons">acuite</a>.
  450. </div>
  451.  
  452. <!-- start of navigation -->
  453.  
  454. <div class="nav">
  455. <a href="/">home</a>
  456. <a href="/ask">message</a>
  457. <a href="/">about</a>
  458. <a href="/">navigate</a>
  459. </div>
  460.  
  461. </div>
  462.  
  463. <!-- end of .sidebar -->
  464.  
  465. <!-- start of .museContainer -->
  466.  
  467. <div class="museContainer">
  468.  
  469. <!-- start of .entries -->
  470.  
  471. <div class="entries">
  472.  
  473. <!-- start of .muse / to add more muses, simply copy and paste this entire block -->
  474. <div class="muse">
  475.  
  476. <div class="icons">
  477. <img src="http://i.imgur.com/zIIsYZl.png">
  478. <img src="http://i.imgur.com/GBnnwMs.png">
  479. </div>
  480.  
  481. <table style="width: 100%;">
  482. <tbody>
  483. <!-- want another row? copy from here... -->
  484. <tr>
  485. <td style="width: 20%; font-weight:bold;">name:</td>
  486. <td style="width: 80%;">first last</td>
  487. </tr>
  488. <!-- ...to here! -->
  489. <tr>
  490. <td style="width: 20%; font-weight:bold;">age:</td>
  491. <td style="width: 80%;">twenty-five</td>
  492. </tr>
  493. <tr>
  494. <td style="width: 20%; font-weight:bold;">faceclaim:</td>
  495. <td style="width: 80%;">first last</td>
  496. </tr>
  497. <tr>
  498. <td style="width: 20%; font-weight:bold;">occupation:</td>
  499. <td style="width: 80%;">something</td>
  500. </tr>
  501. <tr>
  502. <td style="width: 20%; font-weight:bold;">status:</td>
  503. <td style="width: 80%;">open / taken</td>
  504. </tr>
  505. </tbody>
  506. </table>
  507.  
  508. <blockquote>this is where you can put a quote or extra information</blockquote>
  509.  
  510. <!-- add as many links as you like, but keep in mind that it looks best with only one line of links! -->
  511. <div class="links">
  512. <a href="/">one</a>
  513. <a href="/">two</a>
  514. <a href="/">three</a>
  515. </div>
  516. </div>
  517. <!-- end of .muse -->
  518.  
  519. <!-- start of .muse / to add more muses, simply copy and paste this entire block -->
  520. <div class="muse">
  521.  
  522. <div class="icons">
  523. <img src="http://i.imgur.com/zIIsYZl.png">
  524. <img src="http://i.imgur.com/GBnnwMs.png">
  525. </div>
  526.  
  527. <table style="width: 100%;">
  528. <tbody>
  529. <!-- want another row? copy from here... -->
  530. <tr>
  531. <td style="width: 20%; font-weight:bold;">name:</td>
  532. <td style="width: 80%;">first last</td>
  533. </tr>
  534. <!-- ...to here! -->
  535. <tr>
  536. <td style="width: 20%; font-weight:bold;">age:</td>
  537. <td style="width: 80%;">twenty-five</td>
  538. </tr>
  539. <tr>
  540. <td style="width: 20%; font-weight:bold;">faceclaim:</td>
  541. <td style="width: 80%;">first last</td>
  542. </tr>
  543. <tr>
  544. <td style="width: 20%; font-weight:bold;">occupation:</td>
  545. <td style="width: 80%;">something</td>
  546. </tr>
  547. <tr>
  548. <td style="width: 20%; font-weight:bold;">status:</td>
  549. <td style="width: 80%;">open / taken</td>
  550. </tr>
  551. </tbody>
  552. </table>
  553.  
  554. <blockquote>this is where you can put a quote or extra information</blockquote>
  555.  
  556. <!-- add as many links as you like, but keep in mind that it looks best with only one line of links! -->
  557. <div class="links">
  558. <a href="/">one</a>
  559. <a href="/">two</a>
  560. <a href="/">three</a>
  561. </div>
  562. </div>
  563. <!-- end of .muse -->
  564.  
  565. <!-- start of .muse / to add more muses, simply copy and paste this entire block -->
  566. <div class="muse">
  567.  
  568. <div class="icons">
  569. <img src="http://i.imgur.com/zIIsYZl.png">
  570. <img src="http://i.imgur.com/GBnnwMs.png">
  571. </div>
  572.  
  573. <table style="width: 100%;">
  574. <tbody>
  575. <!-- want another row? copy from here... -->
  576. <tr>
  577. <td style="width: 20%; font-weight:bold;">name:</td>
  578. <td style="width: 80%;">first last</td>
  579. </tr>
  580. <!-- ...to here! -->
  581. <tr>
  582. <td style="width: 20%; font-weight:bold;">age:</td>
  583. <td style="width: 80%;">twenty-five</td>
  584. </tr>
  585. <tr>
  586. <td style="width: 20%; font-weight:bold;">faceclaim:</td>
  587. <td style="width: 80%;">first last</td>
  588. </tr>
  589. <tr>
  590. <td style="width: 20%; font-weight:bold;">occupation:</td>
  591. <td style="width: 80%;">something</td>
  592. </tr>
  593. <tr>
  594. <td style="width: 20%; font-weight:bold;">status:</td>
  595. <td style="width: 80%;">open / taken</td>
  596. </tr>
  597. </tbody>
  598. </table>
  599.  
  600. <blockquote>this is where you can put a quote or extra information</blockquote>
  601.  
  602. <!-- add as many links as you like, but keep in mind that it looks best with only one line of links! -->
  603. <div class="links">
  604. <a href="/">one</a>
  605. <a href="/">two</a>
  606. <a href="/">three</a>
  607. </div>
  608. </div>
  609. <!-- end of .muse -->
  610.  
  611. <!-- start of .muse / to add more muses, simply copy and paste this entire block -->
  612. <div class="muse">
  613.  
  614. <div class="icons">
  615. <img src="http://i.imgur.com/zIIsYZl.png">
  616. <img src="http://i.imgur.com/GBnnwMs.png">
  617. </div>
  618.  
  619. <table style="width: 100%;">
  620. <tbody>
  621. <!-- want another row? copy from here... -->
  622. <tr>
  623. <td style="width: 20%; font-weight:bold;">name:</td>
  624. <td style="width: 80%;">first last</td>
  625. </tr>
  626. <!-- ...to here! -->
  627. <tr>
  628. <td style="width: 20%; font-weight:bold;">age:</td>
  629. <td style="width: 80%;">twenty-five</td>
  630. </tr>
  631. <tr>
  632. <td style="width: 20%; font-weight:bold;">faceclaim:</td>
  633. <td style="width: 80%;">first last</td>
  634. </tr>
  635. <tr>
  636. <td style="width: 20%; font-weight:bold;">occupation:</td>
  637. <td style="width: 80%;">something</td>
  638. </tr>
  639. <tr>
  640. <td style="width: 20%; font-weight:bold;">status:</td>
  641. <td style="width: 80%;">open / taken</td>
  642. </tr>
  643. </tbody>
  644. </table>
  645.  
  646. <blockquote>this is where you can put a quote or extra information</blockquote>
  647.  
  648. <!-- add as many links as you like, but keep in mind that it looks best with only one line of links! -->
  649. <div class="links">
  650. <a href="/">one</a>
  651. <a href="/">two</a>
  652. <a href="/">three</a>
  653. </div>
  654. </div>
  655. <!-- end of .muse -->
  656.  
  657. </div> <!-- end of .entries -->
  658.  
  659. </div> <!-- end of .museContainer -->
  660.  
  661. </div> <!-- end of .container -->
  662.  
  663. <div class="credit"><a class="sf sf-boat" href="http://pirateskinned.tumblr.com/" title="coded by pirateskinned"></a></div>
  664.  
  665. </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!