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

Page: PORTFOLIO (dark)

b0rn-to-be-wild
Aug 7th, 2018
2,176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!----
  5.  
  6. © borntobewildcodes.tumblr.com | PORTFOLIO (dark)
  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. ---->
  21.  
  22. <html>
  23.  
  24. <head>
  25.  
  26. <!--- Change the title of the page here --->
  27.  
  28. <title>{title}</title>
  29.  
  30. <link rel="shortcut icon" href="{Favicon}">
  31.  
  32. <!--- Google fonts --->
  33.  
  34. <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  36. <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
  37.  
  38. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  39.  
  40.  
  41. <style type="text/css">
  42.  
  43. /* -------- BASICS ------- */
  44.  
  45. body {
  46. margin:0;
  47. width:100%;
  48. height:100%;
  49. font-family:Avalon, Arial;
  50. font-size:12px;
  51. color:#eee;
  52. background: #000;
  53. }
  54.  
  55. /* Links */
  56.  
  57. a {
  58. text-decoration:none;
  59. outline:none;
  60. }
  61.  
  62. a:hover {
  63. -webkit-transition: all 0.5s ease-in-out;
  64. -moz-transition: all 0.5s ease-in-out;
  65. -o-transition: all 0.5s ease-in-out;
  66. }
  67.  
  68. /* Webkit scrollbar */
  69.  
  70. ::-webkit-scrollbar {
  71. width: 9px;
  72. height: 0px;
  73. }
  74.  
  75. ::-webkit-scrollbar-button:start:decrement,
  76. ::-webkit-scrollbar-button:end:increment {
  77. height: 0px;
  78. display: block;
  79. background-color: #000000;
  80. }
  81.  
  82. ::-webkit-scrollbar-track-piece {
  83. background-color: #000000;
  84. }
  85.  
  86. ::-webkit-scrollbar-thumb:vertical {
  87. height: 0px;
  88. background-color: #eeeeee;
  89. border: 4px solid #000000;
  90. }
  91.  
  92. /* Tumblr controls */
  93.  
  94. iframe.tmblr-iframe {
  95. bottom:-7px!important;
  96. margin-top:auto;
  97. right:40px!important;
  98. padding:0px;
  99. opacity:0.8;
  100. transform:scale(0.6);
  101. transform-origin:100% 0;
  102. -webkit-transform:scale(0.8);
  103. -webkit-transform-origin:100% 0;
  104. -o-transform:scale(0.8);
  105. -o-transform-origin:100% 0;
  106. -moz-transform:scale(0.8);
  107. -moz-transform-origin:100% 0;
  108. -ms-transform:scale(0.8);
  109. -ms-transform-origin:100% 0;
  110. z-index:100000!important;
  111. }
  112.  
  113. iframe.tmblr-iframe:hover {
  114. opacity:1!important;
  115. }
  116.  
  117. /* -------- MENU ------- */
  118.  
  119. #menu {
  120. margin-top:60;
  121. margin-left:0;
  122. width:calc(100% - 60px);
  123. height:57px;
  124. padding:0 30px;
  125. background:#000000;
  126. border-bottom:1px solid #222222;
  127. z-index:10;
  128. }
  129.  
  130. /* Blog title */
  131.  
  132. #blogtitle {
  133. float:left;
  134. margin-top:0px;
  135. font-size:30px;
  136. line-height:57px;
  137. height:57px;
  138. width:360px;
  139. font-family: 'Philosopher', sans-serif;
  140. letter-spacing:1px;
  141. color:#ffffff;
  142. }
  143.  
  144. #blogtitle:after {
  145. content: "";
  146. display: inline-block;
  147. vertical-align: middle;
  148. margin-left: 10px;
  149. width: 40px;
  150. height: 1px;
  151. background-color:#222222;
  152. }
  153.  
  154. /* Main links */
  155.  
  156. #mainlinks {
  157. float:right;
  158. margin-top:0px;
  159. height:50px;
  160. line-height:50px;
  161. }
  162.  
  163. #mainlinks a {
  164. margin-right:5px;
  165. padding:4px 8px;
  166. color:#ffffff;
  167. font-size:14px;
  168. border:1px solid #222222;
  169. border-radius:2px;
  170. }
  171.  
  172. #mainlinks a:hover {
  173. color:#000;
  174. background:#fff;
  175. }
  176.  
  177. /* -------- HEADER ------- */
  178.  
  179. #header {
  180. margin-top:0;
  181. margin-left:0;
  182. width:100%;
  183. height:425px;
  184. background:#000000;
  185. /* Replace header background image */
  186. background-image:url('https://images.unsplash.com/photo-1503437313881-503a91226402?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bca2bcbec1d66e31fb38da5681cf83d9&auto=format&fit=crop&w=889&q=80');
  187. background-size:cover;
  188. background-position:center;
  189. border-bottom:1px solid #222222;
  190. z-index:10;
  191. }
  192.  
  193. /* -------- DESCRIPTION ------- */
  194.  
  195. #description {
  196. margin-top:0;
  197. margin-left:0;
  198. width:calc(100% - 60px);
  199. height:auto;
  200. padding:30px;
  201. color:#bbbbbb;
  202. background:#000000;
  203. border-bottom:1px solid #222222;
  204. font-size:14px;
  205. line-height:22px;
  206. text-align:center;
  207. z-index:10;
  208. }
  209.  
  210. /* -------- STICKY ------- */
  211.  
  212. #sticky {
  213. margin-top:0;
  214. margin-left:0;
  215. width:100%;
  216. height:1px;
  217. z-index:10;
  218. }
  219.  
  220. /* -------- CONTAINER ------- */
  221.  
  222. #maincontainer {
  223. margin:0;
  224. width:100%;
  225. height:auto;
  226. overflow:hidden;
  227. min-height:100vh;
  228. }
  229.  
  230. /* -------- SORTING CONTENT ------- */
  231.  
  232. /* Sort box style */
  233.  
  234. #sort {
  235. position:absolute;
  236. left:15px;
  237. margin-top:70px;
  238. width:200px;
  239. height:auto;
  240. height:calc(100vh - 60px);
  241. padding:10px 15px;
  242. /* Change background color of sorting container */
  243. background:#000;
  244. overflow-y:auto;
  245. z-index:10000;
  246. }
  247.  
  248. #sort ul {
  249. list-style: none;
  250. margin-top:0px;
  251. margin-left:0px;
  252. width:195px;
  253. padding:0px;
  254. }
  255.  
  256. /* Sort title */
  257.  
  258. #sort h2 {
  259. margin:5px 0;
  260. padding:5px;
  261. font-size:18px;
  262. color:#ffffff;
  263. border-bottom:1px solid #222222;
  264. cursor:pointer;
  265. font-family: 'Philosopher', sans-serif;
  266. }
  267.  
  268. /* Sort link style */
  269.  
  270. #sort a {
  271. display:block;
  272. margin-left:15px;
  273. width:170px;
  274. padding:3px 5px;
  275. font-size:15px;
  276. color:#bbbbbb;
  277. }
  278.  
  279. #sort a:hover {
  280. color:#7CB15B;
  281. }
  282.  
  283. #sort li {
  284. list-style:none;
  285. }
  286.  
  287. #sort li a.selected {
  288. color:#7CB15B;
  289. }
  290.  
  291. .stickysort {
  292. top:-50px;
  293. position:fixed!important;
  294. }
  295.  
  296. /* -------- CONTENT CONTAINER ------- */
  297.  
  298. .grid {
  299. margin-left:265px;
  300. margin-top:58px;
  301. width:calc(100vw - 296px);
  302. padding-bottom:30px;
  303. z-index:100;
  304. }
  305.  
  306. /* Item (content container) */
  307.  
  308. .grid .item {
  309. display: block;
  310. float: left;
  311. margin: 1%;
  312. width: 23%;
  313. padding:20px;
  314. /* Change background color of content container */
  315. background: #000;
  316. box-sizing: border-box;
  317. -moz-transition-duration:1s;
  318. -webkit-transition-duration:1s;
  319. -o-transition-duration:1s;
  320. }
  321.  
  322. /* Image style */
  323.  
  324. .grid img {
  325. width:100%;
  326. height:auto;
  327. -webkit-transition: opacity 0.8s linear;
  328. -moz-transition: opacity 0.8s linear;
  329. -o-transition: opacity 0.8s linear;
  330. -ms-transition: opacity 0.8s linear;
  331. opacity: 0.8;
  332. }
  333.  
  334. .grid img:hover {
  335. -webkit-transition: opacity 0.8s linear;
  336. -moz-transition: opacity 0.8s linear;
  337. -o-transition: opacity 0.8s linear;
  338. -ms-transition: opacity 0.8s linear;
  339. opacity: 1;
  340. }
  341.  
  342. /* Content container info */
  343.  
  344. .info {
  345. margin-top:15px;
  346. margin-left:-1px;
  347. width:100%;
  348. }
  349.  
  350. /* Info heading */
  351.  
  352. .info h2 {
  353. margin:0;
  354. color:#ffffff;
  355. padding-bottom:5px;
  356. font-size:18px;
  357. font-family: 'Philosopher', sans-serif;
  358. }
  359.  
  360. .info h2:after {
  361. content: "";
  362. display: inline-block;
  363. vertical-align: middle;
  364. margin-left: 10px;
  365. width: 40px;
  366. height: 1px;
  367. background-color:#222222;
  368. }
  369.  
  370. /* Info description */
  371.  
  372. .infodesc {
  373. margin:10px 0;
  374. color:#bbbbbb;
  375. font-size:12px;
  376. line-height:18px;
  377. }
  378.  
  379. /* Info links */
  380.  
  381. .infolinks a {
  382. display:inline-block;
  383. margin:5px;
  384. margin-left:0;
  385. padding:4px 8px;
  386. font-size:12px;
  387. border-radius:2px;
  388. z-index:100;
  389. }
  390.  
  391. /* First info link style */
  392.  
  393. .styleone {
  394. color:#ffffff;
  395. border:1px solid #7CB15B;
  396. }
  397.  
  398. .styleone:hover {
  399. background:#7CB15B;
  400. }
  401.  
  402. /* Second info link style */
  403.  
  404. .styletwo {
  405. color:#ffffff;
  406. border:1px solid #D1675A;
  407. }
  408.  
  409. .styletwo:hover {
  410. background:#D1675A;
  411. }
  412.  
  413. /* First label */
  414.  
  415. .labelone {
  416. position:absolute;
  417. top:10px;
  418. right:0px;
  419. width:60px;
  420. padding:4px 8px;
  421. text-align:center;
  422. color:#ffffff;
  423. font-size:14px;
  424. z-index:100;
  425. background:#7CB15B;
  426. }
  427.  
  428. /* Second label */
  429.  
  430. .labeltwo {
  431. position:absolute;
  432. top:10px;
  433. right:0px;
  434. width:60px;
  435. padding:4px 8px;
  436. text-align:center;
  437. color:#ffffff;
  438. font-size:14px;
  439. z-index:100;
  440. background:#D1675A;
  441. }
  442.  
  443. #item:hover {
  444. -moz-transition-duration:1s;
  445. -webkit-transition-duration:1s;
  446. -o-transition-duration:1s;
  447. }
  448.  
  449. .selected {
  450. color: #fff;
  451. border-bottom-color: #97c5e0;
  452. font-weight: bold;
  453. }
  454.  
  455. /* ----------------------- CREDITS ----------------------------- */
  456.  
  457. #credit {
  458. position:fixed;
  459. right:10px;
  460. bottom:10px;
  461. z-index:100000;
  462. }
  463.  
  464. #credit img{
  465. border:1px solid #222222;
  466. max-width:25px;
  467. }
  468.  
  469. </style>
  470.  
  471. <!-------------------------------- SCRIPTS -------------------------------->
  472.  
  473. <!-- Jquery -->
  474.  
  475. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  476.  
  477. <!-- Sticky -->
  478.  
  479. <script type="text/javascript">
  480. $(function(){
  481. var stickyRibbonTop = $('#sticky').offset().top;
  482. $(window).scroll(function(){
  483. if( $(window).scrollTop() > stickyRibbonTop ) {
  484.  
  485. $('#sort').addClass("stickysort");
  486. } else {
  487. $('#sort').removeClass("stickysort");
  488. }
  489. });
  490.  
  491. });
  492. </script>
  493.  
  494. <!-- Filter scripts -->
  495.  
  496. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  497.  
  498. <script>
  499. $(document).ready(function() {
  500. var $container = $(".grid"); // the container with all the elements to filter inside
  501. var filters = {}; //should be outside the scope of the filtering function
  502.  
  503. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  504. var $grid = $container.isotope({
  505. itemSelector: ".item", // the elements to filter
  506. percentPosition: true // true if you use percentage widths
  507. });
  508.  
  509. // save some classes for later usage
  510. /* ---
  511. activeClass: adds this class to filters that are selected (active)
  512. comboClass: the class that indicates that the filter group is a chain filter, i.e. if you select two filters, only items with BOTH filters will be shown
  513. exclClass: the class that indicates that the filter group is an exclusion filter, i.e. you can only select one filter from that group at a time
  514. resetClass: the class for the overall reset button
  515. --- */
  516. var activeClass = "selected",
  517. comboClass = "combine",
  518. exclClass = "exclusive",
  519. resetClass = "reset";
  520.  
  521. var $defaults = $("a." + activeClass + '[data-filter-value=""]');
  522. $(".option-set a").click(function(e) {
  523. // insert your link selector where it says '.option-set a'
  524. var $this = $(this); // cache the clicked link
  525. var comboFilter,
  526. filterAttr = "data-filter-value";
  527. if (resetClass && !$this.hasClass(resetClass)) {
  528. // defining variables
  529. var filterValue = $this.attr(filterAttr); // cache the filter
  530. var $optionSet = $this.parents(".option-set"); // cache the parent element
  531. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  532. var filterGroup = filters[group]; // make new variable for the property being filtered
  533. if (!filterGroup) {
  534. // if the property doesn't exist
  535. filterGroup = filters[group] = []; // make a new empty array
  536. }
  537. var $selectAll = $optionSet.find("a[" + filterAttr + '=""]'); // cache the 'select all' button in the current group
  538. $("." + resetClass).removeClass(activeClass);
  539. comboFiltering(
  540. $this,
  541. filters,
  542. filterAttr,
  543. filterValue,
  544. $optionSet,
  545. group,
  546. $selectAll,
  547. activeClass,
  548. comboClass,
  549. exclClass
  550. );
  551. comboFilter = getComboFilter(filters); // join all the filters
  552. if (!comboFilter.length) $("a." + resetClass).addClass(activeClass);
  553. $this.toggleClass(activeClass);
  554. } else {
  555. filters = {};
  556. comboFilter = "";
  557. $(".option-set a").removeClass(activeClass);
  558. $(this).addClass(activeClass);
  559. $defaults.addClass(activeClass);
  560. }
  561. $grid.isotope({
  562. filter: comboFilter
  563. });
  564. e.preventDefault();
  565. });
  566. });
  567. function comboFiltering(
  568. $this,
  569. filters,
  570. filterAttr,
  571. filterValue,
  572. $optionSet,
  573. group,
  574. $selectAll,
  575. activeClass,
  576. comboClass,
  577. exclClass
  578. ) {
  579. // for non-exclusive groups of filters
  580. if (!$optionSet.hasClass(exclClass)) {
  581. // replace 'exclusive' with the class of your exclusive filter groups
  582. // if link is a filter that isn't selected
  583. if (!$this.hasClass(activeClass) && filterValue.length) {
  584. filters[group].push(filterValue); // add filter to array
  585. $selectAll.removeClass(activeClass); // remove the selected class from the 'select all' button
  586. } else if (filterValue.length) {
  587. // if link is a selected filter
  588. // remove filter from array
  589. // check if the filter group we're concerned with is a combination filter (.one.two instead of .one,.two)
  590. if ($optionSet.hasClass(comboClass)) {
  591. filters[group][0] = filters[group][0].replace(filterValue, ""); // delete the filter from the combined string
  592. if (!filters[group][0].length)
  593. // check if there is anything left in the string after deletion
  594. filters[group].splice(0, 1); // if no, remove the empty string
  595. } else {
  596. // if filter group is not a combo filter
  597. var curIndex = filters[group].indexOf(filterValue); // get index of filter string in array
  598. if (curIndex > -1) filters[group].splice(curIndex, 1); // remove the filter
  599. }
  600. if (!$optionSet.find("a." + activeClass).not($this).length)
  601. // if there are no remaining filters
  602. $selectAll.addClass(activeClass); // add the active class to the 'select all' button
  603. } else {
  604. // if link is the show all button for that group
  605. $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other buttons
  606. filters[group] = []; // clear the array of all filters
  607. }
  608. // join everything to a single string for the combined filtering groups
  609. if ($optionSet.hasClass(comboClass) && filters[group].length)
  610. filters[group] = [filters[group].join("")];
  611. } else {
  612. // for exclusive groups
  613. // if link is a filter that isn't selected
  614. if (!$this.hasClass(activeClass) && filterValue.length) {
  615. // run a loop for all active filters
  616. $optionSet.find("a." + activeClass).each(function(k, filterLink) {
  617. // remove all active filters in the same group from the array
  618. var removeFilter = $(filterLink).attr(filterAttr);
  619. var removeIndex = filters[group].indexOf(removeFilter);
  620. filters[group].splice(removeIndex, 1);
  621. });
  622. filters[group].push(filterValue); // add selected filter to array
  623. $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other links in the group
  624. } else if (filterValue.length) {
  625. // if link is a selected filter
  626. // remove filter from array
  627. var curIndex = filters[group].indexOf(filterValue);
  628. if (curIndex > -1) filters[group].splice(curIndex, 1);
  629. if (!$optionSet.find("a." + activeClass).not($this).length)
  630. // if there are no remaining filters
  631. $selectAll.addClass(activeClass); // add active class to 'select all' button
  632. } else {
  633. // if link is the show all button for that group
  634. $optionSet.find("a." + activeClass).removeClass(activeClass); // remove active class from all other buttons
  635. filters[group] = []; // reset all filters for this group
  636. }
  637. }
  638. }
  639. /* --- concat filters --- */
  640. function getComboFilter(filters) {
  641. // pass the entire array of filters to the function
  642. var i = 0; // set counter variable as zero
  643. var comboFilters = []; // make a new array to save the string of filters
  644.  
  645. for (var prop in filters) {
  646. // loop through all the properties in the filter array passed to the function
  647. var filterGroup = filters[prop]; // define variable
  648. // skip to next filter group if it doesn't have any values
  649. if (!filterGroup.length) {
  650. continue; // exit loop and move on with next iteration
  651. }
  652. if (i === 0) {
  653. // copy to new array
  654. comboFilters = filterGroup.slice(0);
  655. } else {
  656. var filterSelectors = [];
  657. // copy to fresh array
  658. var groupCombo = comboFilters.slice(0);
  659. // merge filter Groups
  660. for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
  661. for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
  662. filterSelectors.push(groupCombo[j] + filterGroup[k]);
  663. }
  664. }
  665. // apply filter selectors to combo filters for next group
  666. comboFilters = filterSelectors;
  667. }
  668. i++; // increment
  669. }
  670.  
  671. var comboFilter = comboFilters.join(", ");
  672. return comboFilter;
  673. }
  674.  
  675. </script>
  676.  
  677. <!--end filter scripts-->
  678.  
  679. <script>
  680. $(document).ready(function(){
  681.  
  682. $("#title1").click(function(){
  683. $("#box1").slideToggle(500);
  684. });
  685.  
  686. $("#title2").click(function(){
  687. $("#box2").slideToggle(500);
  688. });
  689.  
  690. $("#title3").click(function(){
  691. $("#box3").slideToggle(500);
  692. });
  693.  
  694. });
  695. </script>
  696.  
  697.  
  698. <meta charset="utf-8">
  699. <title>{Title}</title>
  700. <link rel="shortcut icon" href="{Favicon}">
  701. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  702.  
  703. </head>
  704.  
  705. <body>
  706.  
  707. <div id="menu">
  708.  
  709. <div id="blogtitle"> Blog title </div>
  710.  
  711. <div id="mainlinks">
  712. <a href="/"> Index </a>
  713. <a href="/ask"> Ask</a>
  714. <a href="/submit"> Submit</a>
  715. <a href="/archive"> Archive</a>
  716. </div>
  717. <!-- End mainlinks-->
  718.  
  719. </div>
  720. <!-- End menu -->
  721.  
  722. <div id="header"></div>
  723.  
  724. <div id="description">
  725.  
  726. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris semper quam nec lobortis blandit. Nam a enim rutrum, volutpat nibh sed, rutrum odio. Mauris pellentesque erat at feugiat porta. Suspendisse sit amet neque blandit massa molestie malesuada eget sit amet nulla. Suspendisse sed orci eros. Morbi eu nibh eget velit vulputate lacinia. Sed eu urna neque. Pellentesque eleifend sed magna nec tincidunt. Curabitur quis euismod purus. Duis dui lacus, auctor sit amet blandit sit amet, ullamcorper ac magna. Donec risus tortor, tempus eu gravida ut, pretium sed turpis. Nunc venenatis est libero, molestie dignissim libero venenatis ac.
  727.  
  728. </div>
  729. <!-- End description -->
  730.  
  731. <div id="sticky"></div>
  732.  
  733. <div id="maincontainer">
  734.  
  735. <div id="sort">
  736.  
  737. <div class="filters">
  738.  
  739. <!---------- Filter links. Here you add tags as ".theme", ".sidebar", ".onecolumn" etc. Replace labelone, labeltwo and labelthree with your own labels ---------->
  740.  
  741. <li class="option-set"><a href="#" data-filter-value="" class="reset selected">All</a></li>
  742. <li class="option-set"><a href="#" data-filter-value=".favorite">Favorites</a></li>
  743.  
  744. <ul class="filter option-set exclusive" data-filter-group="labelone">
  745. <li> <h2>Title one</h2> </li>
  746. <li><a href="#" data-filter-value="" class="selected">All</a></li>
  747. <li><a href="#" data-filter-value=".tagone">Tag one</a></li>
  748. <li><a href="#" data-filter-value=".tagtwo">Tag two</a></li>
  749. </ul>
  750.  
  751. <ul class="filter option-set" data-filter-group="labeltwo">
  752. <li> <h2>Title two</h2> </li>
  753. <li><a href="#" data-filter-value="" class="selected">All</a></li>
  754. <li><a href="#" data-filter-value=".tagthree">Tag three</a></li>
  755. <li><a href="#" data-filter-value=".tagfour">Tag four</a></li>
  756. <li><a href="#" data-filter-value=".tagfive">Tag five</a></li>
  757. <li><a href="#" data-filter-value=".tagsix">Tag six</a></li>
  758. </ul>
  759.  
  760. <ul class="filter option-set combine" data-filter-group="labelthree">
  761. <li> <h2>Title three</h2> </li>
  762. <li><a href="#" data-filter-value="" class="selected">All</a></li>
  763. <li><a href="#" data-filter-value=".tagseven">Tag seven</a></li>
  764. <li><a href="#" data-filter-value=".tageight">Tag eight</a></li>
  765. <li><a href="#" data-filter-value=".tagnine">Tag nine</a></li>
  766. <li><a href="#" data-filter-value=".tagten">Tag ten</a></li>
  767. </ul>
  768.  
  769. </div>
  770. <!-- End filters-->
  771.  
  772. </div>
  773. <!-- End sort -->
  774.  
  775.  
  776. <div class="grid">
  777.  
  778. <!---------- Content containers
  779.  
  780. in class="item tagone" "tagone" is actually a tag you can add, to add more tags for the same tv show simply put "tagone tagtwo tagthree" for example: class="item theme sidebar onecolumn". I suggest you writing two word tags as one word.
  781.  
  782. ---------->
  783.  
  784.  
  785. <!-- Item -->
  786.  
  787. <div class="item tagone tagfive ">
  788.  
  789. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  790. <div class="labeltwo"> label </div>
  791.  
  792. <!-- Image -->
  793. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  794.  
  795. <div class="info">
  796.  
  797. <h2> Title </h2>
  798.  
  799. <div class="infodesc">
  800.  
  801. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  802.  
  803. </div>
  804. <!-- End infodesc -->
  805.  
  806. <div class="infolinks">
  807.  
  808. <a href="http://" class="styleone"> link </a>
  809. <a href="http://" class="styleone"> link </a>
  810. <a href="http://" class="styletwo"> link </a>
  811.  
  812. </div>
  813. <!-- End infolinks -->
  814.  
  815. </div>
  816. <!-- End info -->
  817.  
  818. </div>
  819. <!-- End item -->
  820.  
  821.  
  822. <!-- Item -->
  823.  
  824. <div class="item tagone tagsix favorite">
  825.  
  826. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  827. <div class="labelone"> label </div>
  828.  
  829. <!-- Image -->
  830. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  831.  
  832. <div class="info">
  833.  
  834. <h2> Title </h2>
  835.  
  836. <div class="infodesc">
  837.  
  838. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  839.  
  840. </div>
  841. <!-- End infodesc -->
  842.  
  843. <div class="infolinks">
  844.  
  845. <a href="http://" class="styleone"> link </a>
  846. <a href="http://" class="styleone"> link </a>
  847. <a href="http://" class="styletwo"> link </a>
  848.  
  849. </div>
  850. <!-- End infolinks -->
  851.  
  852. </div>
  853. <!-- End info -->
  854.  
  855. </div>
  856. <!-- End item -->
  857.  
  858.  
  859. <!-- Item -->
  860.  
  861. <div class="item tagtwo tagfive favorite">
  862.  
  863. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  864. <div class="labelone"> label </div>
  865.  
  866. <!-- Image -->
  867. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  868.  
  869. <div class="info">
  870.  
  871. <h2> Title </h2>
  872.  
  873. <div class="infodesc">
  874.  
  875. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  876.  
  877. </div>
  878. <!-- End infodesc -->
  879.  
  880. <div class="infolinks">
  881.  
  882. <a href="http://" class="styleone"> link </a>
  883. <a href="http://" class="styleone"> link </a>
  884. <a href="http://" class="styletwo"> link </a>
  885.  
  886. </div>
  887. <!-- End infolinks -->
  888.  
  889. </div>
  890. <!-- End info -->
  891.  
  892. </div>
  893. <!-- End item -->
  894.  
  895.  
  896. <!-- Item -->
  897.  
  898. <div class="item tagthree tagfour ">
  899.  
  900. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  901. <div class="labeltwo"> label </div>
  902.  
  903. <!-- Image -->
  904. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  905.  
  906. <div class="info">
  907.  
  908. <h2> Title </h2>
  909.  
  910. <div class="infodesc">
  911.  
  912. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  913.  
  914. </div>
  915. <!-- End infodesc -->
  916.  
  917. <div class="infolinks">
  918.  
  919. <a href="http://" class="styleone"> link </a>
  920. <a href="http://" class="styleone"> link </a>
  921. <a href="http://" class="styletwo"> link </a>
  922.  
  923. </div>
  924. <!-- End infolinks -->
  925.  
  926. </div>
  927. <!-- End info -->
  928.  
  929. </div>
  930. <!-- End item -->
  931.  
  932.  
  933. <!-- Item -->
  934.  
  935. <div class="item tagtwo tagfive ">
  936.  
  937. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  938. <div class="labeltwo"> label </div>
  939.  
  940. <!-- Image -->
  941. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  942.  
  943. <div class="info">
  944.  
  945. <h2> Title </h2>
  946.  
  947. <div class="infodesc">
  948.  
  949. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  950.  
  951. </div>
  952. <!-- End infodesc -->
  953.  
  954. <div class="infolinks">
  955.  
  956. <a href="http://" class="styleone"> link </a>
  957. <a href="http://" class="styleone"> link </a>
  958. <a href="http://" class="styletwo"> link </a>
  959.  
  960. </div>
  961. <!-- End infolinks -->
  962.  
  963. </div>
  964. <!-- End info -->
  965.  
  966. </div>
  967. <!-- End item -->
  968.  
  969.  
  970. <!-- Item -->
  971.  
  972. <div class="item tagthree tagsix tageight ">
  973.  
  974. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  975. <div class="labelone"> label </div>
  976.  
  977. <!-- Image -->
  978. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  979.  
  980. <div class="info">
  981.  
  982. <h2> Title </h2>
  983.  
  984. <div class="infodesc">
  985.  
  986. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  987.  
  988. </div>
  989. <!-- End infodesc -->
  990.  
  991. <div class="infolinks">
  992.  
  993. <a href="http://" class="styleone"> link </a>
  994. <a href="http://" class="styleone"> link </a>
  995. <a href="http://" class="styletwo"> link </a>
  996.  
  997. </div>
  998. <!-- End infolinks -->
  999.  
  1000. </div>
  1001. <!-- End info -->
  1002.  
  1003. </div>
  1004. <!-- End item -->
  1005.  
  1006.  
  1007. <!-- Item -->
  1008.  
  1009. <div class="item tagthree tagfour ">
  1010.  
  1011. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  1012. <div class="labeltwo"> label </div>
  1013.  
  1014. <!-- Image -->
  1015. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1016.  
  1017. <div class="info">
  1018.  
  1019. <h2> Title </h2>
  1020.  
  1021. <div class="infodesc">
  1022.  
  1023. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1024.  
  1025. </div>
  1026. <!-- End infodesc -->
  1027.  
  1028. <div class="infolinks">
  1029.  
  1030. <a href="http://" class="styleone"> link </a>
  1031. <a href="http://" class="styleone"> link </a>
  1032. <a href="http://" class="styletwo"> link </a>
  1033.  
  1034. </div>
  1035. <!-- End infolinks -->
  1036.  
  1037. </div>
  1038. <!-- End info -->
  1039.  
  1040. </div>
  1041. <!-- End item -->
  1042.  
  1043.  
  1044. <!-- Item -->
  1045.  
  1046. <div class="item tagtwo tagfive ">
  1047.  
  1048. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  1049. <div class="labelone"> label </div>
  1050.  
  1051. <!-- Image -->
  1052. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1053.  
  1054. <div class="info">
  1055.  
  1056. <h2> Title </h2>
  1057.  
  1058. <div class="infodesc">
  1059.  
  1060. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1061.  
  1062. </div>
  1063. <!-- End infodesc -->
  1064.  
  1065. <div class="infolinks">
  1066.  
  1067. <a href="http://" class="styleone"> link </a>
  1068. <a href="http://" class="styleone"> link </a>
  1069. <a href="http://" class="styletwo"> link </a>
  1070.  
  1071. </div>
  1072. <!-- End infolinks -->
  1073.  
  1074. </div>
  1075. <!-- End info -->
  1076.  
  1077. </div>
  1078. <!-- End item -->
  1079.  
  1080.  
  1081. <!-- Item -->
  1082.  
  1083. <div class="item tagfour tagsix tagnine ">
  1084.  
  1085. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  1086. <div class="labelone"> label </div>
  1087.  
  1088. <!-- Image -->
  1089. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1090.  
  1091. <div class="info">
  1092.  
  1093. <h2> Title </h2>
  1094.  
  1095. <div class="infodesc">
  1096.  
  1097. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1098.  
  1099. </div>
  1100. <!-- End infodesc -->
  1101.  
  1102. <div class="infolinks">
  1103.  
  1104. <a href="http://" class="styleone"> link </a>
  1105. <a href="http://" class="styleone"> link </a>
  1106. <a href="http://" class="styletwo"> link </a>
  1107.  
  1108. </div>
  1109. <!-- End infolinks -->
  1110.  
  1111. </div>
  1112. <!-- End info -->
  1113.  
  1114. </div>
  1115. <!-- End item -->
  1116.  
  1117.  
  1118.  
  1119. <!---------- Item (content containers) end here. To add more copy
  1120.  
  1121.  
  1122. <div class="item tagfour tagsix tagnine ">
  1123.  
  1124. <div class="labelone"> label </div>
  1125.  
  1126. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1127.  
  1128. <div class="info">
  1129.  
  1130. <h2> Title </h2>
  1131.  
  1132. <div class="infodesc">
  1133.  
  1134. Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Nam at tortor quis ipsum tempor aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1135.  
  1136. </div>
  1137.  
  1138.  
  1139. <div class="infolinks">
  1140.  
  1141. <a href="http://" class="styleone"> link </a>
  1142. <a href="http://" class="styleone"> link </a>
  1143. <a href="http://" class="styletwo"> link </a>
  1144.  
  1145. </div>
  1146.  
  1147. </div>
  1148.  
  1149. </div>
  1150.  
  1151.  
  1152. and paste it above or below this comment. -------->
  1153.  
  1154.  
  1155. </div>
  1156. <!-- End grid -->
  1157.  
  1158. </div>
  1159. <!--End maincontainer-->
  1160.  
  1161. <!--CREDIT (DO NOT REMOVE)-->
  1162. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page PORTFOLIO by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>
  1163.  
  1164. </body>
  1165.  
  1166.  
  1167. </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!