API tools faq
paste
Advertisement
mrsmilicevic

stone / network page

mrsmilicevic
Aug 21st, 2016
7,997
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4. <meta charset="utf-8" />
  5.  
  6. <!---
  7.  
  8. stone by mrsthemes@tumblr
  9. network/members page
  10.  
  11. basic html knowledge is preferable but
  12. i've left some comments on where to put what.
  13.  
  14. --->
  15.  
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18.  
  19. <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i" rel="stylesheet">
  20.  
  21. <style type="text/css">
  22.  
  23. /*---general---*/
  24.  
  25. body {
  26. background:#f8f8f8;
  27. color:#7a7a7a;
  28. line-height:20px;
  29. margin:0px;
  30. font:10px 'PT Serif', serif;
  31. -webkit-font-smoothing: antialiased;
  32. -moz-osx-font-smoothing: grayscale;
  33. animation: fadein 1.5s;
  34. -moz-animation: fadein 1.5s;
  35. -webkit-animation: fadein 1.5s;
  36. -o-animation: fadein 1.5s;
  37. }
  38.  
  39. @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  40. @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  41. @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  42. @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  43. @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  44.  
  45. /*---tooltips---*/
  46.  
  47. #s-m-t-tooltip {
  48. max-width:300px;
  49. margin:8px;
  50. padding:3px;
  51. background:transparent;
  52. z-index:99999999;
  53. text-transform:lowercase;
  54. box-shadow:none;
  55. }
  56.  
  57. blockquote, blockquote blockquote {
  58. padding:0px 0px 0px 15px;
  59. border-left:1px solid #eee;
  60. margin:5px;
  61. }
  62.  
  63. pre {
  64. word-wrap:break-word;
  65. white-space:pre-wrap;
  66. white-space:-moz-pre-wrap;
  67. white-space:-pre-wrap;
  68. white-space:-o-pre-wrap;
  69. }
  70.  
  71. a {
  72. color:#9a9a9a;
  73. text-decoration:none;
  74. -webkit-transition: all 0.4s ease;
  75. transition: all 0.4s ease;
  76. }
  77.  
  78. a:hover {
  79. text-decoration:none;
  80. color:#d4d4d4;
  81. -webkit-transition: all 0.4s ease;
  82. transition: all 0.4s ease;
  83. }
  84.  
  85. .all {
  86. position:relative;
  87. margin:0px auto 300px auto;
  88. }
  89.  
  90. /*---tumblr controls---*/
  91.  
  92. #tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  93. top:5px;
  94. right:5px!important;
  95. position:fixed !important;
  96. -webkit-filter: invert(1);
  97. opacity:.4;
  98. filter:alpha(opacity=40);
  99. -moz-opacity:.4;
  100. z-index:999999999!important;
  101. }
  102.  
  103. /*---scrollbar---*/
  104.  
  105. ::-webkit-scrollbar {
  106. width:13px;
  107. height:0px;
  108. }
  109. ::-webkit-scrollbar-thumb {
  110. height:5px;
  111. border:7px solid rgba(0, 0, 0, 0);
  112. background-clip:padding-box;
  113. background-color:rgba(204, 204, 204, .7);
  114. }
  115.  
  116. ::-webkit-scrollbar-corner {
  117. background-color:transparent;
  118. }
  119.  
  120. /*---header---*/
  121.  
  122. header {
  123. position:relative;
  124. top:0;
  125. left:0;
  126. width:100%;
  127. margin:0px auto;
  128. padding:10px;
  129. text-align:center;
  130. border-bottom:1px solid #eee;
  131. background:#fff;
  132. }
  133.  
  134. .title {
  135. margin:30px 0 10px auto;
  136. font-size:18px;
  137. text-transform:uppercase;
  138. letter-spacing:0.3em;
  139. }
  140.  
  141. .desc {
  142. line-height:20px;
  143. }
  144.  
  145. .links ul {
  146. border-top:1px solid #eee;
  147. list-style:none;
  148. padding:25px 10px 0px 10px;
  149. margin:25px 0;
  150. font-size:11px;
  151. }
  152.  
  153. .links ul li {
  154. display:inline;
  155. margin:0 15px 0 0;
  156. font-style:italic;
  157. }
  158.  
  159. .links ul li:before {
  160. content:"›";
  161. padding-right:8px;
  162. color:#9a9a9a;
  163. }
  164.  
  165. /*---box section---*/
  166.  
  167. .container {
  168. margin:30px auto;
  169. max-width:960px;
  170. text-align:center;
  171. }
  172.  
  173. div.box {
  174. background:#ffffff;
  175. display:inline-block;
  176. margin:30px;
  177. max-width:120px; /* change the width of the box here */
  178. padding:5px;
  179. -webkit-perspective:1000;
  180. perspective:1000;
  181. position:relative;
  182. text-align:left;
  183. -webkit-transition:all 0.3s 0s ease-in;
  184. transition:all 0.3s 0s ease-in;
  185. z-index:1;
  186. }
  187.  
  188. div.box img { max-width:120px; } /* change the width of the box here */
  189.  
  190. div.box div.box-title {
  191. background:#ffffff;
  192. padding:15px 15px 10px;
  193. position:relative;
  194. z-index:0;
  195. }
  196.  
  197. div.box div.box-title a.toggle-info {
  198. border-radius:32px;
  199. height:32px;
  200. padding:0;
  201. position:absolute;
  202. right:5px;
  203. top:8px;
  204. width:32px;
  205. }
  206.  
  207. div.box div.box-title a.toggle-info span {
  208. background:#a8a8a8;
  209. display:block;
  210. height:1px;
  211. position:absolute;
  212. top:15px;
  213. width:12px;
  214. -webkit-transition: all 0.15s 0s ease-out;
  215. transition: all 0.15s 0s ease-out;
  216. }
  217.  
  218. div.box div.box-title a.toggle-info span.left {
  219. right:14px;
  220. -webkit-transform:rotate(45deg);
  221. transform:rotate(45deg);
  222. }
  223.  
  224. div.box div.box-title a.toggle-info span.right {
  225. left:14px;
  226. -webkit-transform:rotate(-45deg);
  227. transform:rotate(-45deg);
  228. }
  229.  
  230. div.box div.box-title h2 {
  231. font-size: 14px;
  232. font-weight: 500;
  233. letter-spacing: -0.05em;
  234. margin: 0;
  235. padding: 0;
  236. }
  237.  
  238. div.box div.box-title h2 small {
  239. display: block;
  240. font-size: 10px;
  241. font-weight: 300;
  242. letter-spacing: -0.025em;
  243. margin:5px 0;
  244. }
  245.  
  246. div.box div.box-description {
  247. padding:20px;
  248. position:relative;
  249. line-height:18px;
  250. font-size:10px;
  251. border-top:1px solid #eee;
  252. }
  253.  
  254. div.box div.box-flap {
  255. background: #fff;
  256. position: absolute;
  257. width: 100%;
  258. right:0px;
  259. -webkit-transform-origin: top;
  260. transform-origin: top;
  261. -webkit-transform: rotateX(-90deg);
  262. transform: rotateX(-90deg);
  263. }
  264.  
  265. div.box div.flap1 {
  266. -webkit-transition: all 0.3s 0.3s ease-out;
  267. transition: all 0.3s 0.3s ease-out;
  268. z-index: -1;
  269. }
  270.  
  271. .container.showing div.box {
  272. cursor: pointer;
  273. opacity: 0.6;
  274. -webkit-transform: scale(0.80);
  275. transform: scale(0.80);
  276. }
  277.  
  278. div.box.show {
  279. opacity: 1 !important;
  280. -webkit-transform: scale(1) !important;
  281. transform: scale(1) !important;
  282. }
  283.  
  284. div.box.show div.box-title a.toggle-info { background:#ffffff!important; }
  285. div.box.show div.box-title a.toggle-info span { top:15px; }
  286. div.box.show div.box-title a.toggle-info span.left { right:10px; }
  287. div.box.show div.box-title a.toggle-info span.right { left: 10px; }
  288.  
  289. div.box.show div.box-flap {
  290. background: #ffffff;
  291. -webkit-transform: rotateX(0deg);
  292. transform: rotateX(0deg);
  293. }
  294.  
  295. div.box.show div.flap1 {
  296. -webkit-transition: all 0.3s 0s ease-out;
  297. transition: all 0.3s 0s ease-out;
  298. }
  299.  
  300. /*---cred---*/
  301.  
  302. .credit {
  303. font-size:9px;
  304. position:fixed;
  305. bottom:10px;
  306. right:10px;
  307. z-index:10;
  308. text-align:right;
  309. }
  310.  
  311.  
  312. </style></head>
  313.  
  314. <body class="all">
  315.  
  316.  
  317. <header>
  318. <div class="title">network / members</div> <!--title here-->
  319. <div class="desc">lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><!--description here-->
  320. <nav class="links">
  321. <ul>
  322. <li><a href="/">home</a></li>
  323. <li><a href="/ask">message</a></li>
  324. <li><a href="/">links</a></li>
  325. <li><a href="https://www.tumblr.com/dashboard">dashboard</a></li>
  326. <!--you can add more links here-->
  327. </ul>
  328. </nav>
  329. </header>
  330.  
  331.  
  332. <div class="container">
  333.  
  334. <!--box start-->
  335.  
  336. <div class="box">
  337. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  338. <div class="box-title">
  339. <a href="#" class="toggle-info btn">
  340. <span class="left"></span>
  341. <span class="right"></span>
  342. </a>
  343. <h2>
  344. Name <!--name here-->
  345. <small><a href="/">@url</a></small> <!--blog url here-->
  346. </h2>
  347. </div>
  348. <div class="box-flap flap1">
  349. <div class="box-description">
  350. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  351. </div>
  352. </div>
  353. </div>
  354.  
  355. <!--end of box-->
  356.  
  357.  
  358.  
  359. <!--box start-->
  360.  
  361. <div class="box">
  362. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  363. <div class="box-title">
  364. <a href="#" class="toggle-info btn">
  365. <span class="left"></span>
  366. <span class="right"></span>
  367. </a>
  368. <h2>
  369. Name <!--name here-->
  370. <small><a href="/">@url</a></small> <!--blog url here-->
  371. </h2>
  372. </div>
  373. <div class="box-flap flap1">
  374. <div class="box-description">
  375. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  376. </div>
  377. </div>
  378. </div>
  379.  
  380. <!--end of box-->
  381.  
  382.  
  383. <!--box start-->
  384.  
  385. <div class="box">
  386. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  387. <div class="box-title">
  388. <a href="#" class="toggle-info btn">
  389. <span class="left"></span>
  390. <span class="right"></span>
  391. </a>
  392. <h2>
  393. Name <!--name here-->
  394. <small><a href="/">@url</a></small> <!--blog url here-->
  395. </h2>
  396. </div>
  397. <div class="box-flap flap1">
  398. <div class="box-description">
  399. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  400. </div>
  401. </div>
  402. </div>
  403.  
  404. <!--end of box-->
  405.  
  406.  
  407. <!--box start-->
  408.  
  409. <div class="box">
  410. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  411. <div class="box-title">
  412. <a href="#" class="toggle-info btn">
  413. <span class="left"></span>
  414. <span class="right"></span>
  415. </a>
  416. <h2>
  417. Name <!--name here-->
  418. <small><a href="/">@url</a></small> <!--blog url here-->
  419. </h2>
  420. </div>
  421. <div class="box-flap flap1">
  422. <div class="box-description">
  423. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  424. </div>
  425. </div>
  426. </div>
  427.  
  428. <!--end of box-->
  429.  
  430.  
  431. <!--box start-->
  432.  
  433. <div class="box">
  434. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  435. <div class="box-title">
  436. <a href="#" class="toggle-info btn">
  437. <span class="left"></span>
  438. <span class="right"></span>
  439. </a>
  440. <h2>
  441. Name <!--name here-->
  442. <small><a href="/">@url</a></small> <!--blog url here-->
  443. </h2>
  444. </div>
  445. <div class="box-flap flap1">
  446. <div class="box-description">
  447. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  448. </div>
  449. </div>
  450. </div>
  451.  
  452. <!--end of box-->
  453.  
  454.  
  455. <!--box start-->
  456.  
  457. <div class="box">
  458. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  459. <div class="box-title">
  460. <a href="#" class="toggle-info btn">
  461. <span class="left"></span>
  462. <span class="right"></span>
  463. </a>
  464. <h2>
  465. Name <!--name here-->
  466. <small><a href="/">@url</a></small> <!--blog url here-->
  467. </h2>
  468. </div>
  469. <div class="box-flap flap1">
  470. <div class="box-description">
  471. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  472. </div>
  473. </div>
  474. </div>
  475.  
  476. <!--end of box-->
  477.  
  478.  
  479. <!--box start-->
  480.  
  481. <div class="box">
  482. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  483. <div class="box-title">
  484. <a href="#" class="toggle-info btn">
  485. <span class="left"></span>
  486. <span class="right"></span>
  487. </a>
  488. <h2>
  489. Name <!--name here-->
  490. <small><a href="/">@url</a></small> <!--blog url here-->
  491. </h2>
  492. </div>
  493. <div class="box-flap flap1">
  494. <div class="box-description">
  495. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  496. </div>
  497. </div>
  498. </div>
  499.  
  500. <!--end of box-->
  501.  
  502.  
  503. <!--box start-->
  504.  
  505. <div class="box">
  506. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  507. <div class="box-title">
  508. <a href="#" class="toggle-info btn">
  509. <span class="left"></span>
  510. <span class="right"></span>
  511. </a>
  512. <h2>
  513. Name <!--name here-->
  514. <small><a href="/">@url</a></small> <!--blog url here-->
  515. </h2>
  516. </div>
  517. <div class="box-flap flap1">
  518. <div class="box-description">
  519. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  520. </div>
  521. </div>
  522. </div>
  523.  
  524. <!--end of box-->
  525.  
  526.  
  527. <!--box start-->
  528.  
  529. <div class="box">
  530. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  531. <div class="box-title">
  532. <a href="#" class="toggle-info btn">
  533. <span class="left"></span>
  534. <span class="right"></span>
  535. </a>
  536. <h2>
  537. Name <!--name here-->
  538. <small><a href="/">@url</a></small> <!--blog url here-->
  539. </h2>
  540. </div>
  541. <div class="box-flap flap1">
  542. <div class="box-description">
  543. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  544. </div>
  545. </div>
  546. </div>
  547.  
  548. <!--end of box-->
  549.  
  550.  
  551. <!--box start-->
  552.  
  553. <div class="box">
  554. <img src="http://imgur.com/uIMoiZD.jpg"> <!--image here-->
  555. <div class="box-title">
  556. <a href="#" class="toggle-info btn">
  557. <span class="left"></span>
  558. <span class="right"></span>
  559. </a>
  560. <h2>
  561. Name <!--name here-->
  562. <small><a href="/">@url</a></small> <!--blog url here-->
  563. </h2>
  564. </div>
  565. <div class="box-flap flap1">
  566. <div class="box-description">
  567. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <!--description here-->
  568. </div>
  569. </div>
  570. </div>
  571.  
  572. <!--end of box-->
  573.  
  574.  
  575. </div>
  576.  
  577. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  578. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  579. <script>
  580. $(document).ready(function() {
  581. var zindex = 10;
  582. $("div.box").click(function() {
  583.  
  584. var isShowing = false;
  585. if ($(this).hasClass("show")) {
  586. isShowing = true
  587. }
  588. if ($(".container").hasClass("showing")) {
  589. $("div.box.show")
  590. .removeClass("show");
  591. if (isShowing) {
  592. $(".container")
  593. .removeClass("showing");
  594. return false;
  595. } else {
  596. $(this)
  597. .css({
  598. zIndex: zindex
  599. })
  600. .addClass("show");
  601. }
  602. zindex++;
  603. } else {
  604. $(".container")
  605. .addClass("showing");
  606. $(this)
  607. .css({
  608. zIndex: zindex
  609. })
  610. .addClass("show");
  611. zindex++;
  612. return false;
  613. }
  614. });
  615. });
  616. (function($){
  617. $(document).ready(function(){
  618. $("[title]").style_my_tooltips({
  619. tip_follows_cursor:true,
  620. tip_delay_time:200,
  621. tip_fade_speed:500
  622. });
  623. });
  624. })(jQuery);
  625. </script>
  626.  
  627. <div class="credit">
  628. <a title="theme" href="http://mrsthemes.tumblr.com/" target="_blank">m</a>
  629. </div>
  630. </body>
  631. </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!