API tools faq
paste
Advertisement
b0rn-to-be-wild

DIAMOND - monochrome (vol.2)

b0rn-to-be-wild
Jun 10th, 2015
466
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.95 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3. ©borntobewildcodes.tumblr.com | DIAMOND - monochrome (vol.2)
  4.  
  5. + Do not redistribute this pag eor remove the credits.
  6. + Edit as long as you keep the credits intact
  7. + Contact us if you have any questions or concerns.
  8. + If you want a custom theme or page you can commission us.
  9. + Thanks for using our page, we hope that you enjoy it.
  10.  
  11.  
  12. Other credits:
  13.  
  14. - Jquery
  15. - Google fonts
  16. - Font Awesome icons
  17. - Hide stuff tutorial by @lmthemes
  18. - How to use the isotope javascript filter tutorial by @themesbyzsu
  19.  
  20. ---->
  21.  
  22. <!DOCTYPE html>
  23. <head>
  24.  
  25. <title>{Title}</title>
  26.  
  27. <link rel="shortcut icon" href="{favicon}">
  28.  
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30.  
  31. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  32.  
  33. <!-- CSS -->
  34.  
  35. <style type="text/css">
  36.  
  37.  
  38. /* ---------------------------- GENERAL ----------------------------- */
  39.  
  40. /* -------- BASICS ------- */
  41.  
  42. body {
  43. margin: 0;
  44. padding: 0;
  45. width: 100%;
  46. height: 100%;
  47. color: #222;
  48. font-family: 'Exo', sans-serif;
  49. font-size: 12px;
  50. line-height: 17px;
  51. background-color: #fff;
  52. background-image:url(http://static.tumblr.com/fd25cf263f97e81a3b403a06dae0013e/in3oyit/4lMnkfchb/tumblr_static_3iyi6asbwrqccogo80cssow4c.png);
  53. background-attachment: fixed;
  54. background-repeat: repeat;
  55. word-wrap:break-word;
  56. }
  57.  
  58. /* Webkit scrollbar */
  59.  
  60. ::-webkit-scrollbar {
  61. width: 9px;
  62. height: 0px;
  63. }
  64.  
  65. ::-webkit-scrollbar-button:start:decrement,
  66. ::-webkit-scrollbar-button:end:increment {
  67. height: 0px;
  68. display: block;
  69. background-color: #fff;
  70. }
  71.  
  72. ::-webkit-scrollbar-track-piece {
  73. background-color: #fff;;
  74. }
  75.  
  76. ::-webkit-scrollbar-thumb:vertical {
  77. height: 0px;
  78. background-color: #000;
  79. border: 4px solid #fff;
  80. }
  81.  
  82. /* Selection */
  83.  
  84. ::-moz-selection {
  85. background: #222;
  86. color: #fff;
  87. }
  88.  
  89. ::selection {
  90. background: #222;
  91. color: #fff;
  92. }
  93.  
  94. /* Tumblr controls */
  95.  
  96. iframe.tmblr-iframe {
  97. top:0!important;
  98. right:35px!important;
  99. opacity:0.8;
  100. filter:invert(1);
  101. -webkit-filter:invert(1);
  102. -o-filter:invert(1);
  103. -moz-filter:invert(1);
  104. -ms-filter:invert(1);
  105. transform:scale(0.8);
  106. transform-origin:100% 0;
  107. -webkit-transform:scale(0.8);
  108. -webkit-transform-origin:100% 0;
  109. -o-transform:scale(0.8);
  110. -o-transform-origin:100% 0;
  111. -moz-transform:scale(0.8);
  112. -moz-transform-origin:100% 0;
  113. -ms-transform:scale(0.8);
  114. -ms-transform-origin:100% 0;
  115. z-index:10000!important;
  116. }
  117.  
  118. iframe.tmblr-iframe:hover {
  119. opacity:0.6!important;
  120. }
  121.  
  122. /* Tooltips */
  123.  
  124. .ui-tooltip {
  125. position:absolute;
  126. z-index:9999;
  127. padding-top:10px;
  128. }
  129.  
  130. .ui-tooltip-content {
  131. background:#fff;
  132. padding:0 4px;
  133. font-style:italic;
  134. color:#000;
  135. text-transform:lowercase;
  136. border:1px solid #ccc;
  137. }
  138.  
  139. img {
  140. opacity:1;
  141. border:0;
  142. text-decoration:none;
  143. max-width:100%;
  144. height:auto;
  145. display:block;
  146. }
  147.  
  148. blockquote {
  149. padding:.25em 0 .25em 15px;
  150. margin:.5em 0;
  151. border-left:1px solid #ccc;
  152. }
  153.  
  154. pre {
  155. padding:0;
  156. margin:0;
  157. line-height:inherit!important;
  158. background:transparent;
  159. font-family:inherit!Important;
  160. font-size:inherit!important;
  161. white-space:pre-wrap;
  162. white-space:-moz-pre-wrap;
  163. white-space:-pre-wrap;
  164. white-space:-o-pre-wrap;
  165. word-wrap:break-word;
  166. }
  167.  
  168. /* Fix */
  169.  
  170. iframe, img, embed, object, video {
  171. max-width: 100%;
  172. border: none;
  173. }
  174.  
  175. input, textarea, select, a { outline: none; }
  176.  
  177. /* Headings */
  178.  
  179. h1, h2, h3, h4 {
  180. margin:1.5em 0;
  181. font-size:1.5em;
  182. padding:0;
  183. color:#222;
  184. font-weight:bold;
  185. }
  186.  
  187. .entry h1:first-child, .entry h2:first-child, .entry h3:first-child, .entry h4:first-child {margin-top:0;}
  188.  
  189. /* Paragraph */
  190.  
  191. p { margin:5px 0px;}
  192.  
  193. p:first-of-type { margin-top:0;}
  194.  
  195. p:last-of-type { margin-bottom:0;}
  196.  
  197. small, big, sub, pre {
  198. font-size:1em!important;
  199. line-height:1.4em!important;
  200. vertical-align:baseline!important;
  201. }
  202.  
  203. /* Bold and italic */
  204.  
  205. b, strong, b a, strong a {
  206. font-weight:bold!important;
  207. color: #000;
  208. }
  209.  
  210. i, em {
  211. color: #ddd;
  212. }
  213.  
  214. /* Links */
  215.  
  216. a {
  217. color: #fff;
  218. text-decoration:none;
  219. transition:all .3s linear;
  220. -webkit-transition:all .3s linear;
  221. -o-transition:all .3s linear;
  222. -moz-transition:all .3s linear;
  223. }
  224.  
  225. a, a img { cursor:pointer;}
  226.  
  227. a:hover {
  228. color: #bbb!important;
  229. text-decoration:none;
  230. }
  231.  
  232. ul, ol, li {
  233. margin: 5px 10px;
  234. padding: 0px;
  235. }
  236.  
  237. /* Line break */
  238.  
  239. hr {
  240. border:none;
  241. box-shadow:0;
  242. margin:2em auto;
  243. width:75px;
  244. border-top:1px solid #ccc;
  245. }
  246.  
  247. /* -------- HEADER ------- */
  248.  
  249. #header{
  250. position:absolute;
  251. top:0px;
  252. left:0px;
  253. width:200px;
  254. background:#ccc;
  255. width:100%;
  256. height:90px;
  257. z-index:10000;
  258. }
  259.  
  260. #headerin{
  261. position:relative;
  262. margin-right:auto;
  263. margin-left:auto;
  264. margin-top:10px;
  265. width:420px;
  266. height:60px;
  267. text-align:left;
  268. }
  269.  
  270. /* Avatar */
  271.  
  272. .avatar{
  273. position:absolute;
  274. margin-left:10px;
  275. margin-top:0px;
  276. width:50px;
  277. height:50px;
  278. padding:4px;
  279. background:#fff;
  280. }
  281.  
  282. .avatar img{
  283. width:100%;
  284. height:100%;
  285. margin-left:-1px;
  286. margin-top:-1px;
  287. border:1px solid #ccc;
  288. }
  289.  
  290. /* Blog title */
  291.  
  292. .blogtitle{
  293. position:absolute;
  294. margin-left:75px;
  295. margin-top:0px;
  296. font-size:34px;
  297. line-height:46px;
  298. height:46px;
  299. width:260px;
  300. padding:5px;
  301. font-family:Voltaire;
  302. color:#000;
  303. border:1px solid #fff;
  304. background:#fff;
  305. text-align:center;
  306. }
  307.  
  308. /* Main icons */
  309.  
  310. .mainicons{
  311. position:absolute;
  312. margin-left:349px;
  313. margin-top:0px;
  314. height:50px;
  315. width:70px;
  316. font-family:Oswald;
  317. color:#ccc;
  318. }
  319.  
  320. .mainicons i{
  321. display:inline-block;
  322. margin-left:5px;
  323. margin-bottom:7px;
  324. background:#000;
  325. color:#fff;
  326. padding:5px;
  327. font-size:15px;
  328. width:14px;
  329. }
  330.  
  331. .mainicons i:hover{
  332. background:#fff;
  333. color:#000;
  334. }
  335.  
  336. /* -------- SORTING CONTENT ------- */
  337.  
  338. #sort{
  339. margin-top:10px;
  340. margin-left:auto;
  341. margin-right:auto;
  342. width:100%;
  343. height:45px;
  344. line-height:40px;
  345. background:#ccc;
  346. border-bottom:4px double #fff;
  347. }
  348.  
  349. #sort ul {
  350. list-style:none;
  351. margin-top:0px;
  352. text-align:center;
  353. }
  354.  
  355. /* Sort links */
  356.  
  357. #sort li {
  358. display:inline-block;
  359. margin:2px;
  360. }
  361.  
  362. #sort a {
  363. display:inline-block;
  364. margin:0px;
  365. margin-bottom:8px;
  366. height:30px;
  367. line-height:30px;
  368. padding:0px 7px;
  369. color:#fff;
  370. background:#000;
  371. text-align:center;
  372. text-transform:uppercase;
  373. font-family:Exo;
  374. font-size:12px;
  375. border:1px solid transparent;
  376. }
  377.  
  378. #sort li a:hover{
  379. color:#000;
  380. }
  381.  
  382. #sort li a.selected {
  383. color:#000;
  384. background:#ccc;
  385. border:1px solid transparent;
  386. }
  387.  
  388. /* -------- CONTENT ------- */
  389.  
  390. #container{
  391. position:relative;
  392. margin-left:auto;
  393. margin-right:auto;
  394. margin-top:150px;
  395. width:647px;
  396. height:auto;
  397. overflow:hidden;
  398. }
  399.  
  400. #contentcontainer{
  401. width:600px;
  402. height:250px;
  403. background:#fff;
  404. border:4px double #ccc;
  405. padding:10px;
  406. overflow:hidden;
  407. }
  408.  
  409. .story{
  410. width:220px;
  411. margin:30px 10px;
  412. padding:20px;
  413. transition-duration:1s;
  414. -moz-transition-duration:1s;
  415. -webkit-transition-duration:1s;
  416. -o-transition-duration:1s;
  417. background:blue;
  418. }
  419.  
  420. /*-- ODD CONTAINER --*/
  421.  
  422. .image1 img{
  423. float:left;
  424. margin:40px;
  425. width:160px;
  426. height:160px;
  427. border:4px double #000;
  428. -ms-transform: rotate(315deg);
  429. -webkit-transform: rotate(315deg);
  430. transform: rotate(315deg);
  431. }
  432.  
  433. /* Information */
  434.  
  435. .info1{
  436. margin-left:280px;
  437. margin-top:0px;
  438. width:310px;
  439. height:250px;
  440. color:#222;
  441. font-family:Helvetica;
  442. font-size:12px;
  443. line-height:19px;
  444. text-align:right;
  445. }
  446.  
  447. /* Style of the title in information part */
  448.  
  449. .info1 h1{
  450. margin:0px;
  451. margin-top:5px;
  452. margin-bottom:10px;
  453. padding:0px;
  454. padding-bottom:5px;
  455. font-size:30px;
  456. line-height:30px;
  457. width:310px;
  458. color:#000;
  459. font-family:Voltaire;
  460. text-align:right;
  461. border-bottom:1px solid #ccc;
  462. }
  463.  
  464. /* Style of the links in information part */
  465.  
  466. .info1 a{
  467. margin:0px 2px;
  468. font-family:Exo;
  469. background:#000;
  470. color:#fff;
  471. padding:2px 6px;
  472. }
  473.  
  474. .info1 a:hover{
  475. background:#fff;
  476. color:#ccc;
  477. border:1px solid #ccc;
  478. }
  479.  
  480. /*-- EVEN CONTAINER --*/
  481.  
  482. .image2 img{
  483. float:right;
  484. margin:40px;
  485. width:160px;
  486. height:160px;
  487. border:4px double #000;
  488. -ms-transform: rotate(315deg);
  489. -webkit-transform: rotate(315deg);
  490. transform: rotate(315deg);
  491. }
  492.  
  493. /* Information */
  494.  
  495. .info2{
  496. margin-left:10px;
  497. margin-top:0px;
  498. width:310px;
  499. height:250px;
  500. color:#222;
  501. font-family:Helvetica;
  502. font-size:12px;
  503. line-height:19px;
  504. text-align:left;
  505. }
  506.  
  507. /* Style of the title in information part */
  508.  
  509. .info2 h1{
  510. margin:0px;
  511. margin-top:5px;
  512. margin-bottom:5px;
  513. padding:0px;
  514. padding-bottom:10px;
  515. font-size:30px;
  516. line-height:30px;
  517. width:310px;
  518. color:#000;
  519. font-family:Voltaire;
  520. text-align:left;
  521. border-bottom:1px solid #ccc;
  522. }
  523.  
  524. /* Style of the links in information part */
  525.  
  526. .info2 a{
  527. margin:0px 2px;
  528. font-family:Exo;
  529. background:#000;
  530. color:#fff;
  531. padding:2px 6px;
  532. }
  533.  
  534. .info2 a:hover{
  535. background:#fff;
  536. color:#ccc;
  537. border:1px solid #ccc;
  538. }
  539.  
  540. /*-- CREDIT --*/
  541.  
  542. #credit {
  543. position:fixed;
  544. top: 9px;
  545. right: 10px;
  546. width:25px;
  547. height:25px;
  548. z-index: 100000;
  549. }
  550.  
  551. #credit img {
  552. border: 1px solid {color:Borders};
  553. }
  554.  
  555. #credit img:hover {
  556. border: 1px solid {color:Hover};
  557. }
  558.  
  559. {CustomCSS}
  560.  
  561. </style>
  562.  
  563. </head>
  564.  
  565. <body>
  566.  
  567. <div id="header">
  568.  
  569. <div id="headerin">
  570.  
  571. <!-- Change the avatar -->
  572. <div class="avatar"><a href="/"><img src="http://i58.tinypic.com/2s6kq2v.png"></a></div>
  573.  
  574. <!-- Change the blog title -->
  575. <div class="blogtitle"> DIAMOND </div>
  576.  
  577. <!-- Main icons -->
  578. <div class="mainicons">
  579. <a href="/"><i class="fa fa-home"></i></a>
  580. <a href="/ask"><i class="fa fa-envelope"></i></a>
  581. <a href="/submit"><i class="fa fa-pencil"></i></a>
  582. <a href="/archive"><i class="fa fa-clock-o"></i></a>
  583. </div>
  584.  
  585. </div>
  586.  
  587. <!----- Filter links (here you add tags as ".header", ".sidebar", ".infinitescroll" etc. Do not change ".story" tag, it refreshes the page) ------>
  588.  
  589. <div id="sort">
  590. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  591.  
  592. <li><a href="#filter" data-option-filter=".story">refresh</a></li>
  593. <li><a href="#filter" data-option-filter=".tag1">tag 1</a></li>
  594. <li><a href="#filter" data-option-filter=".tag2">tag 2</a></li>
  595. <li><a href="#filter" data-option-filter=".tag3">tag 3</a></li>
  596. <li><a href="#filter" data-option-filter=".tag4">tag 4</a></li>
  597. <li><a href="#filter" data-option-filter=".tag5">tag 5</a></li>
  598. <li><a href="#filter" data-option-filter=".tag6">tag 6</a></li>
  599.  
  600. </ul>
  601. </div>
  602. <!-- End sort -->
  603.  
  604. </div>
  605. <!-- End header -->
  606.  
  607. <div id="container" class="clearfix">
  608.  
  609. <!---- Theme containers
  610.  
  611. in class="story tag1" "tag1" is actually a theme tag you can add, to add more tags for the same theme simply put "tag1 tag2 tag3" for example: class="story sidebar header infinitescroll pagination" I suggest you writing two word tags as one word tag
  612.  
  613. ----->
  614.  
  615. <!--1st container-->
  616.  
  617. <div id="contentcontainer" class="story tag1">
  618. <div class="image1"><img src="http://i61.tinypic.com/dg5t3b.png"></a></div>
  619. <div class="info1">
  620.  
  621. <h1>Title</h1>
  622.  
  623. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  624.  
  625. <a href="/">link</a>
  626. <a href="/">link</a>
  627.  
  628. </div>
  629. </div>
  630.  
  631. <!--2nd container-->
  632.  
  633. <div id="contentcontainer" class="story tag2">
  634. <div class="image2"><img src="http://i62.tinypic.com/2rqdl79.png"></a></div>
  635. <div class="info2">
  636.  
  637. <h1>Title</h1>
  638.  
  639. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  640.  
  641. <a href="/">link</a>
  642. <a href="/">link</a>
  643.  
  644. </div>
  645. </div>
  646.  
  647. <!--3rd container-->
  648.  
  649. <div id="contentcontainer" class="story tag3">
  650. <div class="image1"><img src="http://i61.tinypic.com/dg5t3b.png"></a></div>
  651. <div class="info1">
  652.  
  653. <h1>Title</h1>
  654.  
  655. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  656.  
  657. <a href="/">link</a>
  658. <a href="/">link</a>
  659.  
  660. </div>
  661. </div>
  662.  
  663. <!--4th container-->
  664.  
  665. <div id="contentcontainer" class="story tag4">
  666. <div class="image2"><img src="http://i62.tinypic.com/2rqdl79.png"></a></div>
  667. <div class="info2">
  668.  
  669. <h1>Title</h1>
  670.  
  671. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  672.  
  673. <a href="/">link</a>
  674. <a href="/">link</a>
  675.  
  676. </div>
  677. </div>
  678.  
  679. <!--5th container-->
  680.  
  681. <div id="contentcontainer" class="story tag5">
  682. <div class="image1"><img src="http://i61.tinypic.com/dg5t3b.png"></a></div>
  683. <div class="info1">
  684.  
  685. <h1>Title</h1>
  686.  
  687. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  688.  
  689. <a href="/">link</a>
  690. <a href="/">link</a>
  691.  
  692. </div>
  693. </div>
  694.  
  695. <!--6th container-->
  696.  
  697. <div id="contentcontainer" class="story tag6">
  698. <div class="image2"><img src="http://i62.tinypic.com/2rqdl79.png"></a></div>
  699. <div class="info2">
  700.  
  701. <h1>Title</h1>
  702.  
  703. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  704.  
  705. <a href="/">link</a>
  706. <a href="/">link</a>
  707.  
  708. </div>
  709. </div>
  710.  
  711. <!--7th container-->
  712.  
  713. <div id="contentcontainer" class="story tag1 tag2">
  714. <div class="image1"><img src="http://i61.tinypic.com/dg5t3b.png"></a></div>
  715. <div class="info1">
  716.  
  717. <h1>Title</h1>
  718.  
  719. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  720.  
  721. <a href="/">link</a>
  722. <a href="/">link</a>
  723.  
  724. </div>
  725. </div>
  726.  
  727. <!--8th container-->
  728.  
  729. <div id="contentcontainer" class="story tag2 tag3">
  730. <div class="image2"><img src="http://i62.tinypic.com/2rqdl79.png"></a></div>
  731. <div class="info2">
  732.  
  733. <h1>Title</h1>
  734.  
  735. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  736.  
  737. <a href="/">link</a>
  738. <a href="/">link</a>
  739.  
  740. </div>
  741. </div>
  742.  
  743. <!--9th container-->
  744.  
  745. <div id="contentcontainer" class="story tag3 tag4">
  746. <div class="image1"><img src="http://i61.tinypic.com/dg5t3b.png"></a></div>
  747. <div class="info1">
  748.  
  749. <h1>Title</h1>
  750.  
  751. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  752.  
  753. <a href="/">link</a>
  754. <a href="/">link</a>
  755.  
  756. </div>
  757. </div>
  758.  
  759. <!--10th container-->
  760.  
  761. <div id="contentcontainer" class="story tag4 tag5">
  762. <div class="image2"><img src="http://i62.tinypic.com/2rqdl79.png"></a></div>
  763. <div class="info2">
  764.  
  765. <h1>Title</h1>
  766.  
  767. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  768.  
  769. <a href="/">link</a>
  770. <a href="/">link</a>
  771.  
  772. </div>
  773. </div>
  774.  
  775.  
  776. <!---- Containers end, to add more containers just copy/paste:
  777.  
  778. FOR ODD CONTAINERS (PINK)
  779.  
  780. <div id="contentcontainer" class="story tag1">
  781. <div class="image1"><img src="http://i61.tinypic.com/dg5t3b.png"></a></div>
  782. <div class="info1">
  783.  
  784. <h1>Title</h1>
  785.  
  786. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  787.  
  788. <a href="/">link</a>
  789. <a href="/">link</a>
  790.  
  791. </div>
  792. </div>
  793.  
  794. AND FOR EVEN CONTAINERS (BLUE)
  795.  
  796. <div id="contentcontainer" class="story tag2">
  797. <div class="image2"><img src="http://i62.tinypic.com/2rqdl79.png"></a></div>
  798. <div class="info2">
  799.  
  800. <h1>Title</h1>
  801.  
  802. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.<br><br>
  803.  
  804. <a href="/">link</a>
  805. <a href="/">link</a>
  806.  
  807. </div>
  808. </div>
  809.  
  810. ---->
  811.  
  812. </div>
  813.  
  814.  
  815. <!-------------------------------- SCRIPTS -------------------------------->
  816.  
  817.  
  818. <!--Google fonts -->
  819.  
  820. <link href="https://fonts.googleapis.com/css?family=Exo|Voltaire" rel="stylesheet">
  821.  
  822. <!-- Font awesome -->
  823.  
  824. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  825.  
  826. <!--Sticky menu-->
  827.  
  828. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  829. <script type="text/javascript">
  830. $(function(){
  831. var stickyRibbonTop = $('#sort').offset().top;
  832. $(window).scroll(function(){
  833. if( $(window).scrollTop() > stickyRibbonTop ) {
  834. $('#sort').css({position: 'fixed', top: '-10px'});
  835. } else {
  836. $('#sort').css({position: 'static', top: '0px'});
  837. }
  838. });
  839. });
  840. </script>
  841.  
  842.  
  843. <script>
  844. $(document).ready(function () {
  845. $.localScroll();
  846. });
  847. </script>
  848.  
  849. <!------- filter scripts -------->
  850. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  851. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  852. <script>
  853. $(function(){
  854.  
  855. var $container = $('#container');
  856.  
  857. $container.isotope({
  858. itemSelector : '.story'
  859. });
  860.  
  861.  
  862. var $optionSets = $('#sort .option-set'),
  863. $optionLinks = $optionSets.find('a');
  864.  
  865. $optionLinks.click(function(){
  866. var $this = $(this);
  867. // don't proceed if already selected
  868. if ( $this.hasClass('selected') ) {
  869. return false;
  870. }
  871. var $optionSet = $this.parents('.option-set');
  872. $optionSet.find('.selected').removeClass('selected');
  873. $this.addClass('selected');
  874.  
  875. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  876. var options = {},
  877. key = $optionSet.attr('data-option-key'),
  878. value = $this.attr('data-option-filter');
  879. // parse 'false' as false boolean
  880. value = value === 'false' ? false : value;
  881. options[ key ] = value;
  882. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  883. // changes in layout modes need extra logic
  884. changeLayoutMode( $this, options )
  885. } else {
  886. // otherwise, apply new options
  887. $container.isotope( options );
  888. }
  889.  
  890. return false;
  891. });
  892.  
  893.  
  894. });
  895. </script>
  896.  
  897. <!-- End filter scripts -->
  898.  
  899.  
  900. <!-- CREDIT (do not remove) -->
  901.  
  902. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page DIAMOND - monochrome by @borntobewildcodes"><img src="http://i57.tinypic.com/301g6eg.jpg"></a></div>
  903.  
  904. </body>
  905. </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!