API tools faq
paste
atlasthemes

plume - page

atlasthemes
Apr 30th, 2019
2,016
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.98 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3. plume
  4. by @atlasthemes
  5. pls do not remove credit thanks!<3
  6.  
  7. - masonry basecode via @cyantists
  8. - pop up tutorial via @octomoosey
  9.  
  10. all credits available at
  11. atlasthemes.tumblr.com/credits
  12.  
  13. ------------------------------------------------------------------------->
  14.  
  15. <html>
  16. <head>
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <!-- text for browser tab -->
  21.  
  22. <title>projects</title>
  23.  
  24.  
  25. <!-- google fonts -->
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
  28.  
  29.  
  30. <!-- scripts -->
  31.  
  32. <script type="text/javascript"
  33. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  34. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  35. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  36. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  37.  
  38. <script>
  39. $(document).ready(function(){
  40. var $grid = $(".container"); $grid.imagesLoaded(function() {
  41. $grid.masonry({
  42. itemSelector: ".project",
  43. columnWidth: 50
  44. });
  45. });
  46. });
  47. </script>
  48.  
  49. <script>
  50. $(document).ready(function() {
  51. //
  52. $('a.poplight[href^=#]').click(function() {
  53. var popID = $(this).attr('rel'); //Get Popup Name
  54. var popURL = $(this).attr('href'); //Get Popup href to define size
  55. var query= popURL.split('?');
  56. var dim= query[1].split('&');
  57. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  58. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  59. var popMargTop = ($('#' + popID).height() + 80) / 2;
  60. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  61. //Apply Margin to Popup
  62. $('#' + popID).css({
  63. 'margin-top' : -popMargTop,
  64. 'margin-left' : -popMargLeft
  65. });
  66. $('body').append('<div id="fade"></div>');
  67. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  68. return false;
  69. });
  70. $('a.close, #fade').live('click', function() {
  71. $('#fade , .popup_block').fadeOut(function() {
  72. $('#fade, a.close').remove(); //fade them both out
  73. });
  74. return false;
  75. });
  76. });
  77. </script>
  78.  
  79.  
  80. </head><style type="text/css">
  81.  
  82. @-webkit-keyframes fadein {
  83. 0% {opacity: 0;}
  84. 100% { opacity: 1; }}
  85.  
  86. @-moz-keyframes fadein {
  87. 0% { opacity: 0; }
  88. 100% { opacity: 1; }}
  89.  
  90. @keyframes fadein {
  91. 0% { opacity: 0; }
  92. 100% { opacity: 1; }}
  93.  
  94. ::-webkit-scrollbar {width:9px;height:9px;}
  95. ::-webkit-scrollbar {background-color:transparent;}
  96. ::-webkit-scrollbar-track {border:4px solid #fff;background-color:#ddd;}
  97. ::-webkit-scrollbar-thumb {border:4px solid #fff;background-color:#aaa;min-height:24px;min-width:24px;}
  98.  
  99. body {
  100. background-color:#ffffff;
  101. font-family:'Open Sans'; /* main font */
  102. color:#444; /* text color */
  103. font-size:10px; /* main font size */
  104. letter-spacing:0px; /* letter spacing */
  105. line-height:18px;
  106. text-align:justify;
  107. -moz-osx-font-smoothing:grayscale;
  108. -webkit-font-smoothing:antialiased;
  109. font-smoothing:antialiased;
  110. -webkit-animation: fadein 1s;
  111. -moz-animation:fadein 1s;
  112. animation:fadein 1s;
  113. }
  114.  
  115. a {
  116. color:#888888; /* link color */
  117. text-decoration:none;
  118. -webkit-transition: all .3s ease-in-out;
  119. -moz-transition: all .3s ease-in-out;
  120. -o-transition: all .3s ease-in-out;
  121. -ms-transition: all .3s ease-in-out;
  122. transition: all .3s ease-in-out;
  123. }
  124.  
  125. a:hover {
  126. color:#222; /* link hover color */
  127. -webkit-transition: all .3s ease-in-out;
  128. -moz-transition: all .3s ease-in-out;
  129. -o-transition: all .3s ease-in-out;
  130. -ms-transition: all .3s ease-in-out;
  131. transition: all .3s ease-in-out;
  132. }
  133.  
  134. h1 {font-family:Times New Roman;font-size:14px;margin:5px 0px;padding:0px;font-weight:400;}
  135. .container {position:relative;right:0;left:0;margin:100px auto;width:1000px;}
  136. .header {display:block;width:925px;margin: 100px auto 50px auto;font-family:Times New Roman;font-size:20px;font-style:italic;}
  137. .header span {font-size:9.5px;float:right;text-transform:uppercase;letter-spacing:1px;font-style:normal;}
  138. .header span a {margin-left:10px;}
  139. .project {width:400px;height:auto;padding:15px;margin:34px;border:1px solid #f1f1f1;border-radius:2px;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
  140. .project:hover {border:1px solid #ccc;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
  141.  
  142. .title {
  143. min-width:100px;
  144. max-width:200px; /* width of project title - adjust for longer titles */
  145. font-family:Times New Roman;
  146. text-transform:uppercase;
  147. letter-spacing:1px;
  148. font-size:11px;
  149. margin: -25px auto 15px auto;
  150. text-align:center;
  151. background-color:#fff;
  152. z-index:1;
  153. }
  154.  
  155. .stats {display:grid;grid-template-columns:auto auto auto auto;margin-bottom:10px;text-align:center;}
  156. .stats span {display:block;}
  157. .stats span b {font-weight:400;font-family:Times New Roman;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;}
  158. .syn {margin:5px 0px;}
  159.  
  160. /* progress bars */
  161.  
  162. .meter {
  163. display:inline-block;
  164. height: 4px;
  165. width: 70%;
  166. position: relative;
  167. background:#f7f7f7; /* progress bar background color */
  168. -moz-border-radius: 25px;
  169. -webkit-border-radius: 25px;
  170. border-radius: 25px;
  171. padding: 2px;
  172. margin:20px 0px 10px 0px;
  173. }
  174.  
  175. .meter > span {
  176. display: block;
  177. height: 100%;
  178. border-top-right-radius: 8px;
  179. border-bottom-right-radius: 8px;
  180. border-top-left-radius: 20px;
  181. border-bottom-left-radius: 20px;
  182. background-color:#ddd; /* progress bar fill color */
  183. position: relative;
  184. overflow: hidden;
  185. }
  186.  
  187. .more {display:block;float:right;text-align:right;height:20px;width:80px;margin-top:14px;}
  188. .more a {font-size:9.5px;text-transform:uppercase;font-family:Times New Roman;letter-spacing:1px;}
  189. .tags {font-family:Times New Roman;font-size:9px;letter-spacing:1px;text-transform:uppercase;margin:5px 0px;}
  190. .tags a {display:inline-block;padding:1px 6px;background-color:#fafafa;border-radius:2px;margin-right:8px;margin-bottom:8px;}
  191. .tags a:hover {background-color:#f1f1f1;}
  192. .links {display:grid;grid-template-columns:33% 33% 33%;margin:5px 0px;}
  193. .links a {display:block;}
  194.  
  195. iframe.tmblr-iframe {z-index:99999999999999!important;top:0!important;right:0!important;opacity:0.4;filter:invert(1) contrast(150%);-webkit-filter:invert(1) contrast(150%);-o-filter:invert(1) contrast(150%);-moz-filter:invert(1) contrast(150%);-ms-filter:invert(1) contrast(150%);transform:scale(0.65);transform-origin:100% 0;-webkit-transform:scale(0.65);-webkit-transform-origin:100% 0;-o-transform:scale(0.65);-o-transform-origin:100% 0;-moz-transform:scale(0.65);-moz-transform-origin:100% 0;-ms-transform:scale(0.65);-ms-transform-origin:100% 0;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
  196. iframe.tmblr-iframe:hover {opacity:0.6!important;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
  197.  
  198. /*-- pop ups --*/
  199.  
  200. .popup_block {
  201. display:none;
  202. background:#fff; /* pop up background color */
  203. padding:20px;
  204. border:1px solid #f1f1f1; /* border width & color */
  205. border-radius:3px;
  206. float:left;
  207. text-align:justify;
  208. position:fixed;
  209. top:50%;left:50%;
  210. z-index: 99999;
  211. -webkit-box-shadow: 2px 2px 5px #eee;
  212. -moz-box-shadow: 2px 2px 5px #eee;
  213. box-shadow: 2px 2px 5px #eee;
  214. }
  215.  
  216. *html #fade {position: absolute;}
  217. *html .popup_block {position: absolute;}
  218. #fade {
  219. display:none;
  220. position:fixed;
  221. left:0px;
  222. top:0px;
  223. width:100%;
  224. height:100%;
  225. z-index:9999;
  226. background:#fff;
  227. opacity:0.8; /* opacity of the screen behind the pop up */
  228. }
  229.  
  230. </style><body>
  231.  
  232. <!------------------------------------------------------------------------->
  233. <!-- editing starts here -->
  234. <!------------------------------------------------------------------------->
  235.  
  236. <div class="header">
  237.  
  238. <!-- page title -->
  239. works in progress
  240.  
  241. <span>
  242. <a href="/">return</a>
  243. <a href="/ask">contact</a>
  244. <a href="http://www.tumblr.com/dashboard">dash</a>
  245. <!-- theme credit - pls don't remove thanks ily!! <33 -->
  246. <a href="http://www.atlasthemes.tumblr.com">theme</a>
  247. </span>
  248. </div>
  249.  
  250. <div class="container">
  251.  
  252.  
  253. <!--- project one --------------------------------------------------------->
  254. <div class="project">
  255.  
  256. <!-- title -->
  257. <div class="title">title one</div>
  258.  
  259. <!-- stats - change to whatever you want -->
  260. <div class="stats">
  261. <span><b>item:</b> content</span>
  262. <span><b>item:</b> content</span>
  263. <span><b>item:</b> content</span>
  264. <span><b>item:</b> content</span>
  265. </div>
  266.  
  267. <!-- description -->
  268. <div class="syn">
  269. project one content goes here.
  270. </div>
  271.  
  272. <!-- progress bar - change percentage -->
  273. <div class="meter">
  274. <span style="width: 30%"></span>
  275. </div>
  276.  
  277. <!-- more info link (you can delete this on any project if you don't want to use a pop up for that project.) the 400 is the width of the pop up. box1 needs to match the number of the corresponding pop up box at the bottom of this code. you only need to edit this part if you want to change the width of the pop up. -->
  278.  
  279. <div class="more">
  280. <a href="#?w=400" rel="box1" class="poplight">[ more info ]</a>
  281. </div>
  282.  
  283. </div><!--- end project one ----------------------------------------------->
  284.  
  285.  
  286.  
  287. <!--- project two --------------------------------------------------------->
  288. <div class="project">
  289.  
  290. <div class="title">title two</div>
  291.  
  292. <div class="stats">
  293. <span><b>item:</b> content</span>
  294. <span><b>item:</b> content</span>
  295. <span><b>item:</b> content</span>
  296. <span><b>item:</b> content</span>
  297. </div>
  298.  
  299. <div class="syn">
  300. project two content goes here.
  301. </div>
  302.  
  303. <div class="meter">
  304. <span style="width: 75%"></span>
  305. </div>
  306.  
  307. <div class="more">
  308. <a href="#?w=400" rel="box2" class="poplight">[ more info ]</a>
  309. </div>
  310.  
  311. </div><!--- end project two ----------------------------------------------->
  312.  
  313.  
  314.  
  315. <!--- project three ------------------------------------------------------->
  316. <div class="project">
  317.  
  318. <div class="title">title three</div>
  319.  
  320. <div class="stats">
  321. <span><b>item:</b> content</span>
  322. <span><b>item:</b> content</span>
  323. <span><b>item:</b> content</span>
  324. <span><b>item:</b> content</span>
  325. </div>
  326.  
  327. <div class="syn">
  328. project three content goes here.
  329. </div>
  330.  
  331. <div class="meter">
  332. <span style="width: 90%"></span>
  333. </div>
  334.  
  335. <div class="more">
  336. <a href="#?w=400" rel="box3" class="poplight">[ more info ]</a>
  337. </div>
  338.  
  339. </div><!--- end project three --------------------------------------------->
  340.  
  341. </div>
  342. </body>
  343.  
  344.  
  345. <!-------------------------------- POP UPS --------------------------------
  346.  
  347. below are the pop up boxes. to create more pop ups, just copy and paste one of the boxes as many times as you need to. just make sure to update "box1" so that it matches the project number and corresponding "more info" link.
  348.  
  349. --------------------------------------------------------------------------->
  350.  
  351.  
  352. <!-- pop up one -->
  353. <div id="box1" class="popup_block">
  354.  
  355. <h1>this is a heading</h1>
  356.  
  357. <p>pop up content goes here. this is <b>bold</b>. this is <i>italic</i>. this is a <a href="/">link</a>. you don't have to use a pop up for every project if you don't want to.
  358.  
  359. </div></div></div></div></div></div></div></div></div></div></div>
  360. <!-- end pop up one -->
  361.  
  362.  
  363.  
  364. <!-- pop up two -->
  365. <div id="box2" class="popup_block">
  366.  
  367. <h1>pop up two</h1>
  368.  
  369. <div class="tags">
  370. <a href="/">you can do</a>
  371. <a href="/">links like this</a>
  372. <a href="/">if you want</a>
  373. <a href="/">to include</a>
  374. <a href="/">some more links</a>
  375. <a href="/">for your project</a>
  376. </div>
  377.  
  378. </div></div></div></div></div></div></div></div></div></div></div>
  379. <!-- end pop up two -->
  380.  
  381.  
  382.  
  383. <!-- pop up three -->
  384. <div id="box3" class="popup_block">
  385.  
  386. <h1>another heading</h1>
  387.  
  388. <div class="links">
  389. <a href="/">orrr you can do</a>
  390. <a href="/">links like this</a>
  391. <a href="/">if you want</a>
  392. <a href="/">something</a>
  393. <a href="/">a little more</a>
  394. <a href="/">organized</a>
  395. </div>
  396.  
  397. </div></div></div></div></div></div></div></div></div></div></div>
  398. <!-- end pop up three -->
  399.  
  400.  
  401.  
  402. <!-- END OF POP UPS ---------------------------------------------------------->
  403. </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!