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

Page: FOLIO (monochrome)

b0rn-to-be-wild
Nov 2nd, 2016
1,662
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "https:////www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https:////www.w3.org/1999/xhtml">
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | FOLIO (monochrome)
  7.  
  8. + Do not redistribute this page or remove the credits.
  9. + Edit as long as you keep the credits intact.
  10. + Contact me if you have any questions or concerns.
  11. + If you want a custom theme/page you can commission me.
  12. + Thanks for using my page, I hope that you enjoy it.
  13.  
  14. Other credits:
  15.  
  16. - Jquery
  17. - Google fonts
  18. - Isotope Combination Filtering by Bev (@magnusthemes)
  19.  
  20. <html>
  21.  
  22. <head>
  23.  
  24.  
  25. <!--- Change the title of the page here --->
  26.  
  27. <title>{title}</title>
  28.  
  29. <link rel="shortcut icon" href="{Favicon}">
  30.  
  31. <!--- Google fonts --->
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
  34. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
  36.  
  37. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  38.  
  39.  
  40. <style type="text/css">
  41.  
  42. /* -------- BASICS ------- */
  43.  
  44. body {
  45. background: #fefefe;
  46. /* background image */
  47. background-image: url('https://66.media.tumblr.com/0ca9f297c19d3de8e23757c797c2df6f/tumblr_og0kjd8m7L1secvrho9_250.png');
  48. margin:0;
  49. width:100%;
  50. height:100%;
  51. font:14px Open Sans;
  52. padding: 0;
  53. position:absolute;
  54. }
  55.  
  56. /* Links */
  57.  
  58. a {
  59. text-decoration:none;
  60. outline:none;
  61. -webkit-transition: all 0.5s ease-in-out;
  62. -moz-transition: all 0.5s ease-in-out;
  63. -o-transition: all 0.5s ease-in-out;
  64. }
  65.  
  66. a:hover {
  67. color:#eee;
  68. -webkit-transition: all 0.5s ease-in-out;
  69. -moz-transition: all 0.5s ease-in-out;
  70. -o-transition: all 0.5s ease-in-out;
  71. }
  72.  
  73. /* Webkit scrollbar */
  74.  
  75. ::-webkit-scrollbar {
  76. background-color:#000;
  77. border:2px solid #fff;
  78. height:5px;
  79. width:5px;
  80. }
  81.  
  82. ::-webkit-scrollbar-thumb:vertical {
  83. background-color:#000;
  84. border:1px solid #fff;
  85. height:40px;
  86. }
  87.  
  88. ::-webkit-scrollbar-thumb:horizontal {
  89. background-color:#000;
  90. border:1px solid #fff;
  91. height:8px!important
  92. }
  93.  
  94. /* Tumblr controls */
  95.  
  96. iframe.tmblr-iframe {
  97. top:10px!important;
  98. right:40px!important;
  99. padding:0px;
  100. opacity:0.8;
  101. transform:scale(0.6);
  102. transform-origin:100% 0;
  103. -webkit-transform:scale(0.8);
  104. -webkit-transform-origin:100% 0;
  105. -o-transform:scale(0.8);
  106. -o-transform-origin:100% 0;
  107. -moz-transform:scale(0.8);
  108. -moz-transform-origin:100% 0;
  109. -ms-transform:scale(0.8);
  110. -ms-transform-origin:100% 0;
  111. z-index:100000!important;
  112. }
  113.  
  114. iframe.tmblr-iframe:hover {
  115. opacity:1!important;
  116. }
  117.  
  118. /* -------- SIDEBAR ------- */
  119.  
  120. #sidebar{
  121. position:fixed;
  122. background:#fff;
  123. /* background image */
  124. background-image: url(' ');
  125. top:0px;
  126. left:0px;
  127. height:100%;
  128. width:285px;
  129. border-right: 1px solid #eee;
  130. z-index:10000;
  131. }
  132.  
  133.  
  134. /*-- MENU --*/
  135.  
  136. #menu {
  137. position:fixed;
  138. top:0;
  139. left:0;
  140. width:60px;
  141. height:100%;
  142. background:#000;
  143. /* background image */
  144. background-image: url(' ');
  145. z-index:1000;
  146. }
  147.  
  148. /* Click 1 */
  149.  
  150. #click1{
  151. position:absolute;
  152. margin-left:12px;
  153. margin-top:12px;
  154. width:33px;
  155. height:33px;
  156. line-height:33px;
  157. border:2px solid #fff;
  158. text-align:center;
  159. z-index:1000;
  160. cursor:pointer;
  161. }
  162.  
  163. #click1 i {
  164. line-height:33px;
  165. color:#fff;
  166. font-size:15px;
  167. }
  168.  
  169. #click1:hover {
  170. border:2px solid #bbb;
  171. }
  172.  
  173. #click1:hover i {
  174. color:#bbb;
  175. }
  176.  
  177. /* Main icons */
  178.  
  179. #mainicons{
  180. position:fixed;
  181. left:6px;
  182. top:60px;
  183. width:60px;
  184. z-index:1000;
  185. display:none;
  186. }
  187.  
  188. #mainicons i{
  189. display:inline-block;
  190. margin-left:6px;
  191. width:33px;
  192. height:33px;
  193. line-height:33px;
  194. border:2px solid #fff;
  195. text-align:center;
  196. background:#fff;
  197. color:#333;
  198. font-size:15px;
  199. border-bottom:1px solid #eee;
  200. }
  201.  
  202. #mainicons i:hover{
  203. background:#fff;
  204. color:#ccc;
  205. }
  206.  
  207. /*-- Sidebar in --*/
  208.  
  209. #sidebarin{
  210. position:absolute;
  211. bottom:0px;
  212. left:60px;
  213. width:calc(100% - 100px);
  214. padding:20px;
  215. }
  216.  
  217. /* Blog title */
  218.  
  219. #blogtitle{
  220. font-size:35px;
  221. line-height:35px;
  222. height:35px;
  223. width:40px;
  224. padding-bottom:15px;
  225. font-family:Philosopher;
  226. color:#000;
  227. z-index:10000;
  228. border-bottom:2px solid #ccc;
  229. }
  230.  
  231. /* Description */
  232.  
  233. #description{
  234. margin:15px 0;
  235. width:100%;
  236. padding-bottom:15px;
  237. font-size:14px;
  238. line-height:22px;
  239. color:#333;
  240. z-index:1000;
  241. text-align:justify;
  242. border-bottom:2px solid #ccc;
  243. }
  244.  
  245. /* -------- SORTING CONTENT ------- */
  246.  
  247. #click2{
  248. margin-top:15px;
  249. width:100%;
  250. height:20px;
  251. line-height:20px;
  252. font-size:14px;
  253. background:#000;
  254. color:#fff;
  255. padding:5px 0;
  256. text-align:center;
  257. cursor:pointer;
  258. }
  259.  
  260. #click2:hover{
  261. color:#333;
  262. background:#ccc;
  263. }
  264.  
  265. #sort{
  266. width:100%;
  267. height:auto;
  268. bottom:0;
  269. text-align:left;
  270. display:none;
  271. }
  272.  
  273. #sort ul {
  274. line-height:20px;
  275. font-family:Open Sans;
  276. }
  277.  
  278. /* Sort links */
  279.  
  280. #sort li {
  281. display:inline-block;
  282. }
  283.  
  284. #sort a {
  285. display:inline-block;
  286. color:#222;
  287. font-size:14px;
  288. margin:3px;
  289. padding:3px 5px;
  290. text-transform:uppercase;
  291. border-bottom:1px solid transparent;
  292. }
  293.  
  294. #sort a:hover , #sort li a.selected {
  295. color:#000;
  296. border-bottom:1px solid #000;
  297. }
  298.  
  299. /* -------- CONTENT ------- */
  300.  
  301. #container{
  302. position:relative;
  303. margin-left:320px;
  304. padding-top:60px;
  305. width:calc(100vw - 370px);
  306. height:auto;
  307. padding-left:5px;
  308. }
  309.  
  310. .story{
  311. width:calc((100% / 3) - 62px);
  312. margin-left:40px;
  313. margin-bottom:40px;
  314. padding:20px;
  315. transition-duration:1s;
  316. -moz-transition-duration:1s;
  317. -webkit-transition-duration:1s;
  318. -o-transition-duration:1s;
  319. }
  320.  
  321. /* Image container */
  322.  
  323. #themecontainer{
  324. width:calc((100% / 3) - 62px);
  325. margin-left:40px;
  326. margin-bottom:40px;
  327. height:300px;
  328. background:#fff;
  329. border:1px solid #eee;
  330. padding:0px;
  331. }
  332.  
  333. #themecontainer img{
  334. width:100%;
  335. height:auto;
  336. }
  337.  
  338. /* Information */
  339.  
  340. .info{
  341. position:fixed;
  342. width:calc(100% - 40px);
  343. top:140px;
  344. left:0px;
  345. padding:0 20px;
  346. color:#333;
  347. font-size:14px;
  348. border-top:1px solid #eee;
  349. }
  350.  
  351. /* Style of the title in information part */
  352.  
  353. #themecontainer h1{
  354. margin-top:15px;
  355. padding-bottom:5px;
  356. font-family:Philosopher;
  357. font-size:22px;
  358. width:20px;
  359. color:#000;
  360. border-bottom:2px solid #ccc;
  361. }
  362.  
  363. /* Style of the links in information part */
  364.  
  365. .info a{
  366. background:#ccc;
  367. color:#fff;
  368. padding:2px 4px;
  369. }
  370.  
  371. .info a:hover{
  372. background:#000;
  373. color:#fff;
  374. border:1px solid #eee;
  375. }
  376.  
  377. /* ----------------------- CREDITS ----------------------------- */
  378.  
  379. #credit {
  380. position:fixed;
  381. right:10px;
  382. top:18px;
  383. z-index:100000;
  384. }
  385.  
  386. #credit img{
  387. border:1px solid #000000;
  388. max-width:25px;
  389. }
  390.  
  391. /*--------------------------- RESPONSIVE DESIGN ---------------------------*/
  392.  
  393. @media only screen and (max-width:900px) {
  394.  
  395. .story{
  396. width:calc((100% / 2) - 62px);
  397. }
  398.  
  399. /* Image container */
  400.  
  401. #themecontainer{
  402. width:calc((100% / 2) - 62px);
  403. }
  404.  
  405. }
  406.  
  407. @media only screen and (max-width:700px) {
  408.  
  409. #sidebar{
  410. position:relative;
  411. width:100vw;
  412. height:auto;
  413. }
  414.  
  415. #menu {
  416. width:100vw;
  417. height:60px;
  418. }
  419.  
  420. #mainicons{
  421. position:relative;
  422. margin-left:-20px;
  423. left:auto;
  424. margin-top:-20px;
  425. top:auto;
  426. margin-bottom:20px;
  427. width:100vw;
  428. height:60px;
  429. line-height:60px;
  430. background:#000;
  431. padding-left:6px;
  432. display:none;
  433. }
  434.  
  435. #sidebarin{
  436. position:relative;
  437. margin-top:60px;
  438. margin-left:0;
  439. left:0;
  440. margin-bottom:auto;
  441. width:calc(100% - 40px);
  442. padding:20px;
  443. }
  444.  
  445. #container {
  446. position:relative;
  447. margin-left:0;
  448. padding-top:50px;
  449. width:calc(100vw - 15px);
  450. height:auto;
  451. }
  452.  
  453. }
  454.  
  455. </style>
  456.  
  457. <!--Jquery script-->
  458.  
  459. <script src="https:////ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  460.  
  461. <!--Open/close scripts-->
  462.  
  463. <script>
  464. $(document).ready(function(){
  465. $("#click1").click(function(){
  466. $("#mainicons").slideToggle(0);
  467. });
  468. });
  469. </script>
  470.  
  471. <script>
  472. $(document).ready(function(){
  473. $("#click2").click(function(){
  474. $("#sort").slideToggle(0);
  475. });
  476. });
  477. </script>
  478.  
  479. <script>
  480. $(document).ready(function () {
  481. $.localScroll();
  482. });
  483. </script>
  484.  
  485. <!------- filter scripts -------->
  486. <script src="https:////static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  487. <script src="https:////static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  488. <script>
  489. $(function(){
  490.  
  491. var $container = $('#container');
  492.  
  493. $container.isotope({
  494. itemSelector : '.story'
  495. });
  496.  
  497.  
  498. var $optionSets = $('#sort .option-set'),
  499. $optionLinks = $optionSets.find('a');
  500.  
  501. $optionLinks.click(function(){
  502. var $this = $(this);
  503. // don't proceed if already selected
  504. if ( $this.hasClass('selected') ) {
  505. return false;
  506. }
  507. var $optionSet = $this.parents('.option-set');
  508. $optionSet.find('.selected').removeClass('selected');
  509. $this.addClass('selected');
  510.  
  511. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  512. var options = {},
  513. key = $optionSet.attr('data-option-key'),
  514. value = $this.attr('data-option-filter');
  515. // parse 'false' as false boolean
  516. value = value === 'false' ? false : value;
  517. options[ key ] = value;
  518. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  519. // changes in layout modes need extra logic
  520. changeLayoutMode( $this, options )
  521. } else {
  522. // otherwise, apply new options
  523. $container.isotope( options );
  524. }
  525.  
  526. return false;
  527. });
  528.  
  529.  
  530. });
  531. </script>
  532.  
  533. <!-----end filter scripts------>
  534.  
  535.  
  536. <meta charset="utf-8">
  537. <title>{Title}</title>
  538. <link rel="shortcut icon" href="{Favicon}">
  539. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  540.  
  541. </head>
  542.  
  543. <body>
  544.  
  545. <div id="sidebar">
  546.  
  547. <div id="menu">
  548.  
  549. <div id="click1"><i class="fa fa-bars"></i></div>
  550.  
  551. </div>
  552. <!--End menu-->
  553.  
  554. <div id="sidebarin">
  555.  
  556. <div id="mainicons">
  557. <a href="/"><i class="fa fa-home"></i></a>
  558. <a href="/ask"><i class="fa fa-envelope"></i></a>
  559. <a href="/archive"><i class="fa fa-clock-o"></i></a>
  560. <a href="https://"><i class="fa fa-linkedin"></i></a>
  561. <a href="https://"><i class="fa fa-facebook"></i></a>
  562. <a href="https://"><i class="fa fa-twitter"></i></a>
  563. <a href="https://"><i class="fa fa-instagram"></i></a>
  564. <a href="https://"><i class="fa fa-pinterest"></i></a>
  565. </div>
  566. <!--End mainicons-->
  567.  
  568. <div id="blogtitle">Portfolio</div>
  569. <!--End blogtitle-->
  570.  
  571. <div id="description">
  572.  
  573. 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.
  574.  
  575. </div>
  576. <!--End description-->
  577.  
  578. <div id="click2"> FILTER </div>
  579.  
  580. <div id="sort">
  581.  
  582. <!----- Filter links (here you add tags as ".sidebar", ".sidebar", ".infinitescroll" etc. Do not change ".story" tag, it refreshes the page) ------>
  583.  
  584. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  585.  
  586. <li><a href="#filter" data-option-filter=".story">refresh</a></li>
  587. <li><a href="#filter" data-option-filter=".tag1">tag1</a></li>
  588. <li><a href="#filter" data-option-filter=".tag2">tag2</a></li>
  589. <li><a href="#filter" data-option-filter=".tag3">tag3</a></li>
  590. <li><a href="#filter" data-option-filter=".tag4">tag4</a></li>
  591. <li><a href="#filter" data-option-filter=".tag5">tag5</a></li>
  592. <li><a href="#filter" data-option-filter=".tag6">tag6</a></li>
  593.  
  594. </ul>
  595. </div>
  596. <!--End sort-->
  597.  
  598. </div>
  599. <!--End sidebarin-->
  600.  
  601. </div>
  602. <!--End sidebar-->
  603.  
  604. <div id="container" class="clearfix">
  605.  
  606. <!---- theme containers
  607.  
  608. 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 sidebar infinitescroll pagination" I suggest you writing two word tags as one word tag
  609.  
  610. ----->
  611.  
  612. <!--1st container-->
  613.  
  614. <div id="themecontainer" class="story tag1">
  615. <img src="https://67.media.tumblr.com/aa22d809ceb2cf1f2133bf3f082e4a68/tumblr_og0lo8xbAl1secvrho1_250.jpg"></a>
  616. <div class="info">
  617.  
  618. <h1>Title</h1>
  619.  
  620. Information goes here<br><br>
  621.  
  622. <a href="/">link</a>
  623. <a href="/">link</a>
  624.  
  625. </div>
  626. </div>
  627.  
  628. <!--2nd container-->
  629.  
  630. <div id="themecontainer" class="story tag2">
  631. <img src="https://66.media.tumblr.com/4b05f2c637dc764082fd74793ab06c7f/tumblr_og0lo8xbAl1secvrho2_250.jpg"></a>
  632. <div class="info">
  633.  
  634. <h1>Title</h1>
  635.  
  636. Information goes here<br><br>
  637.  
  638. <a href="/">link</a>
  639. <a href="/">link</a>
  640.  
  641. </div>
  642. </div>
  643.  
  644. <!--3rd container-->
  645.  
  646. <div id="themecontainer" class="story tag3">
  647. <img src="https://66.media.tumblr.com/cef898ffb7f307f77fabdf83a7946ddc/tumblr_og0lo8xbAl1secvrho3_250.jpg"></a>
  648. <div class="info">
  649.  
  650. <h1>Title</h1>
  651.  
  652. Information goes here<br><br>
  653.  
  654. <a href="/">link</a>
  655. <a href="/">link</a>
  656.  
  657. </div>
  658. </div>
  659.  
  660. <!--4th container-->
  661.  
  662. <div id="themecontainer" class="story tag4">
  663. <img src="https://67.media.tumblr.com/6eda5ae3788349713dda930d94f3890f/tumblr_og0lo8xbAl1secvrho4_250.jpg"></a>
  664. <div class="info">
  665.  
  666. <h1>Title</h1>
  667.  
  668. Information goes here<br><br>
  669.  
  670. <a href="/">link</a>
  671. <a href="/">link</a>
  672.  
  673. </div>
  674. </div>
  675.  
  676. <!--5th container-->
  677.  
  678. <div id="themecontainer" class="story tag5">
  679. <img src="https://67.media.tumblr.com/288da2e86229513ed2efe2f7ff2642bd/tumblr_og0lo8xbAl1secvrho5_250.jpg"></a>
  680. <div class="info">
  681.  
  682. <h1>Title</h1>
  683.  
  684. Information goes here<br><br>
  685.  
  686. <a href="/">link</a>
  687. <a href="/">link</a>
  688.  
  689. </div>
  690. </div>
  691.  
  692. <!--6th container-->
  693.  
  694. <div id="themecontainer" class="story tag6">
  695. <img src="https://67.media.tumblr.com/8ef37199e977799680643e502373a7d6/tumblr_og0lo8xbAl1secvrho6_250.jpg"></a>
  696. <div class="info">
  697.  
  698. <h1>Title</h1>
  699.  
  700. Information goes here<br><br>
  701.  
  702. <a href="/">link</a>
  703. <a href="/">link</a>
  704.  
  705. </div>
  706. </div>
  707.  
  708. <!--7th container-->
  709.  
  710. <div id="themecontainer" class="story tag1 tag2">
  711. <img src="https://67.media.tumblr.com/48f7b733611efe473d9a15cbad4f0b33/tumblr_og0lo8xbAl1secvrho7_250.jpg"></a>
  712. <div class="info">
  713.  
  714. <h1>Title</h1>
  715.  
  716. Information goes here<br><br>
  717.  
  718. <a href="/">link</a>
  719. <a href="/">link</a>
  720.  
  721. </div>
  722. </div>
  723.  
  724. <!--8th container-->
  725.  
  726. <div id="themecontainer" class="story tag3 tag4">
  727. <img src="https://65.media.tumblr.com/d123432a3493e216b52791d70ef7c008/tumblr_og0lo8xbAl1secvrho8_250.jpg"></a>
  728. <div class="info">
  729.  
  730. <h1>Title</h1>
  731.  
  732. Information goes here<br><br>
  733.  
  734. <a href="/">link</a>
  735. <a href="/">link</a>
  736.  
  737. </div>
  738. </div>
  739.  
  740. <!--9th container-->
  741.  
  742. <div id="themecontainer" class="story tag5 tag6">
  743. <img src="https://66.media.tumblr.com/5f2f669e0aa80a1e8bfd33b81eaba57f/tumblr_og0lo8xbAl1secvrho9_250.jpg"></a>
  744. <div class="info">
  745.  
  746. <h1>Title</h1>
  747.  
  748. Information goes here<br><br>
  749.  
  750. <a href="/">link</a>
  751. <a href="/">link</a>
  752.  
  753. </div>
  754. </div>
  755.  
  756.  
  757. <!---- Containers end, to add more containers just copy/paste:
  758.  
  759. <div id="themecontainer" class="story tag5 tag6">
  760. <img src="https://66.media.tumblr.com/5f2f669e0aa80a1e8bfd33b81eaba57f/tumblr_og0lo8xbAl1secvrho9_250.jpg"></a>
  761. <div class="info">
  762.  
  763. <h1>Title</h1>
  764.  
  765. Information goes here<br><br>
  766.  
  767. <a href="/">link</a>
  768. <a href="/">link</a>
  769.  
  770. </div>
  771. </div>
  772.  
  773. ---->
  774. </div>
  775.  
  776. <!--CREDIT (DO NOT REMOVE)-->
  777. <div id="credit"><a href="https:////borntobewildcodes.tumblr.com" title="page FOLIO by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>
  778.  
  779. </body>
  780.  
  781.  
  782. </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!