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

Page: PORTFOLIO (dark) v2

b0rn-to-be-wild
Nov 13th, 2019
218
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.35 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. © borntobewildthemes.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. position:absolute;
  346. top:20px;
  347. margin-left:0;
  348. width:calc(100% - 40px);
  349. height:calc(100% - 40px);
  350. background:#FCFCFC;
  351. overflow-y:auto;
  352. opacity:0;
  353. -webkit-transition: opacity 0.8s linear;
  354. -moz-transition: opacity 0.8s linear;
  355. -o-transition: opacity 0.8s linear;
  356. -ms-transition: opacity 0.8s linear;
  357. }
  358.  
  359. .item:hover .info {
  360. opacity:1;
  361. }
  362.  
  363. /* Info heading */
  364.  
  365. .info h2 {
  366. margin:0;
  367. color:#ffffff;
  368. padding-bottom:5px;
  369. font-size:18px;
  370. font-family: 'Philosopher', sans-serif;
  371. }
  372.  
  373. .info h2:after {
  374. content: "";
  375. display: inline-block;
  376. vertical-align: middle;
  377. margin-left: 10px;
  378. width: 40px;
  379. height: 1px;
  380. background-color:#222222;
  381. }
  382.  
  383. /* Info description */
  384.  
  385. .infodesc {
  386. margin:10px 0;
  387. color:#bbbbbb;
  388. font-size:12px;
  389. line-height:18px;
  390. }
  391.  
  392. /* Info links */
  393.  
  394. .infolinks a {
  395. display:inline-block;
  396. margin:5px;
  397. margin-left:0;
  398. padding:4px 8px;
  399. font-size:12px;
  400. border-radius:2px;
  401. z-index:100;
  402. }
  403.  
  404. /* First info link style */
  405.  
  406. .styleone {
  407. color:#ffffff;
  408. border:1px solid #7CB15B;
  409. }
  410.  
  411. .styleone:hover {
  412. background:#7CB15B;
  413. }
  414.  
  415. /* Second info link style */
  416.  
  417. .styletwo {
  418. color:#ffffff;
  419. border:1px solid #D1675A;
  420. }
  421.  
  422. .styletwo:hover {
  423. background:#D1675A;
  424. }
  425.  
  426. /* First label */
  427.  
  428. .labelone {
  429. position:absolute;
  430. top:10px;
  431. right:0px;
  432. width:60px;
  433. padding:4px 8px;
  434. text-align:center;
  435. color:#ffffff;
  436. font-size:14px;
  437. z-index:100;
  438. background:#7CB15B;
  439. }
  440.  
  441. /* Second label */
  442.  
  443. .labeltwo {
  444. position:absolute;
  445. top:10px;
  446. right:0px;
  447. width:60px;
  448. padding:4px 8px;
  449. text-align:center;
  450. color:#ffffff;
  451. font-size:14px;
  452. z-index:100;
  453. background:#D1675A;
  454. }
  455.  
  456. #item:hover {
  457. -moz-transition-duration:1s;
  458. -webkit-transition-duration:1s;
  459. -o-transition-duration:1s;
  460. }
  461.  
  462. .selected {
  463. color: #fff;
  464. border-bottom-color: #97c5e0;
  465. font-weight: bold;
  466. }
  467.  
  468. /* ----------------------- CREDITS ----------------------------- */
  469.  
  470. #credit {
  471. position:fixed;
  472. right:10px;
  473. bottom:10px;
  474. z-index:100000;
  475. }
  476.  
  477. #credit img{
  478. border:1px solid #222222;
  479. max-width:25px;
  480. }
  481.  
  482. </style>
  483.  
  484. <!-------------------------------- SCRIPTS -------------------------------->
  485.  
  486. <!-- Jquery -->
  487.  
  488. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  489.  
  490. <!-- Sticky -->
  491.  
  492. <script type="text/javascript">
  493. $(function(){
  494. var stickyRibbonTop = $('#sticky').offset().top;
  495. $(window).scroll(function(){
  496. if( $(window).scrollTop() > stickyRibbonTop ) {
  497.  
  498. $('#sort').addClass("stickysort");
  499. } else {
  500. $('#sort').removeClass("stickysort");
  501. }
  502. });
  503.  
  504. });
  505. </script>
  506.  
  507. <!-- Filter scripts -->
  508.  
  509. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  510.  
  511. <script>
  512. $(document).ready(function() {
  513. var $container = $(".grid"); // the container with all the elements to filter inside
  514. var filters = {}; //should be outside the scope of the filtering function
  515.  
  516. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  517. var $grid = $container.isotope({
  518. itemSelector: ".item", // the elements to filter
  519. percentPosition: true // true if you use percentage widths
  520. });
  521.  
  522. // save some classes for later usage
  523. /* ---
  524. activeClass: adds this class to filters that are selected (active)
  525. 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
  526. 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
  527. resetClass: the class for the overall reset button
  528. --- */
  529. var activeClass = "selected",
  530. comboClass = "combine",
  531. exclClass = "exclusive",
  532. resetClass = "reset";
  533.  
  534. var $defaults = $("a." + activeClass + '[data-filter-value=""]');
  535. $(".option-set a").click(function(e) {
  536. // insert your link selector where it says '.option-set a'
  537. var $this = $(this); // cache the clicked link
  538. var comboFilter,
  539. filterAttr = "data-filter-value";
  540. if (resetClass && !$this.hasClass(resetClass)) {
  541. // defining variables
  542. var filterValue = $this.attr(filterAttr); // cache the filter
  543. var $optionSet = $this.parents(".option-set"); // cache the parent element
  544. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  545. var filterGroup = filters[group]; // make new variable for the property being filtered
  546. if (!filterGroup) {
  547. // if the property doesn't exist
  548. filterGroup = filters[group] = []; // make a new empty array
  549. }
  550. var $selectAll = $optionSet.find("a[" + filterAttr + '=""]'); // cache the 'select all' button in the current group
  551. $("." + resetClass).removeClass(activeClass);
  552. comboFiltering(
  553. $this,
  554. filters,
  555. filterAttr,
  556. filterValue,
  557. $optionSet,
  558. group,
  559. $selectAll,
  560. activeClass,
  561. comboClass,
  562. exclClass
  563. );
  564. comboFilter = getComboFilter(filters); // join all the filters
  565. if (!comboFilter.length) $("a." + resetClass).addClass(activeClass);
  566. $this.toggleClass(activeClass);
  567. } else {
  568. filters = {};
  569. comboFilter = "";
  570. $(".option-set a").removeClass(activeClass);
  571. $(this).addClass(activeClass);
  572. $defaults.addClass(activeClass);
  573. }
  574. $grid.isotope({
  575. filter: comboFilter
  576. });
  577. e.preventDefault();
  578. });
  579. });
  580. function comboFiltering(
  581. $this,
  582. filters,
  583. filterAttr,
  584. filterValue,
  585. $optionSet,
  586. group,
  587. $selectAll,
  588. activeClass,
  589. comboClass,
  590. exclClass
  591. ) {
  592. // for non-exclusive groups of filters
  593. if (!$optionSet.hasClass(exclClass)) {
  594. // replace 'exclusive' with the class of your exclusive filter groups
  595. // if link is a filter that isn't selected
  596. if (!$this.hasClass(activeClass) && filterValue.length) {
  597. filters[group].push(filterValue); // add filter to array
  598. $selectAll.removeClass(activeClass); // remove the selected class from the 'select all' button
  599. } else if (filterValue.length) {
  600. // if link is a selected filter
  601. // remove filter from array
  602. // check if the filter group we're concerned with is a combination filter (.one.two instead of .one,.two)
  603. if ($optionSet.hasClass(comboClass)) {
  604. filters[group][0] = filters[group][0].replace(filterValue, ""); // delete the filter from the combined string
  605. if (!filters[group][0].length)
  606. // check if there is anything left in the string after deletion
  607. filters[group].splice(0, 1); // if no, remove the empty string
  608. } else {
  609. // if filter group is not a combo filter
  610. var curIndex = filters[group].indexOf(filterValue); // get index of filter string in array
  611. if (curIndex > -1) filters[group].splice(curIndex, 1); // remove the filter
  612. }
  613. if (!$optionSet.find("a." + activeClass).not($this).length)
  614. // if there are no remaining filters
  615. $selectAll.addClass(activeClass); // add the active class to the 'select all' button
  616. } else {
  617. // if link is the show all button for that group
  618. $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other buttons
  619. filters[group] = []; // clear the array of all filters
  620. }
  621. // join everything to a single string for the combined filtering groups
  622. if ($optionSet.hasClass(comboClass) && filters[group].length)
  623. filters[group] = [filters[group].join("")];
  624. } else {
  625. // for exclusive groups
  626. // if link is a filter that isn't selected
  627. if (!$this.hasClass(activeClass) && filterValue.length) {
  628. // run a loop for all active filters
  629. $optionSet.find("a." + activeClass).each(function(k, filterLink) {
  630. // remove all active filters in the same group from the array
  631. var removeFilter = $(filterLink).attr(filterAttr);
  632. var removeIndex = filters[group].indexOf(removeFilter);
  633. filters[group].splice(removeIndex, 1);
  634. });
  635. filters[group].push(filterValue); // add selected filter to array
  636. $optionSet.find("a." + activeClass).removeClass(activeClass); // remove the active class from all other links in the group
  637. } else if (filterValue.length) {
  638. // if link is a selected filter
  639. // remove filter from array
  640. var curIndex = filters[group].indexOf(filterValue);
  641. if (curIndex > -1) filters[group].splice(curIndex, 1);
  642. if (!$optionSet.find("a." + activeClass).not($this).length)
  643. // if there are no remaining filters
  644. $selectAll.addClass(activeClass); // add active class to 'select all' button
  645. } else {
  646. // if link is the show all button for that group
  647. $optionSet.find("a." + activeClass).removeClass(activeClass); // remove active class from all other buttons
  648. filters[group] = []; // reset all filters for this group
  649. }
  650. }
  651. }
  652. /* --- concat filters --- */
  653. function getComboFilter(filters) {
  654. // pass the entire array of filters to the function
  655. var i = 0; // set counter variable as zero
  656. var comboFilters = []; // make a new array to save the string of filters
  657.  
  658. for (var prop in filters) {
  659. // loop through all the properties in the filter array passed to the function
  660. var filterGroup = filters[prop]; // define variable
  661. // skip to next filter group if it doesn't have any values
  662. if (!filterGroup.length) {
  663. continue; // exit loop and move on with next iteration
  664. }
  665. if (i === 0) {
  666. // copy to new array
  667. comboFilters = filterGroup.slice(0);
  668. } else {
  669. var filterSelectors = [];
  670. // copy to fresh array
  671. var groupCombo = comboFilters.slice(0);
  672. // merge filter Groups
  673. for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
  674. for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
  675. filterSelectors.push(groupCombo[j] + filterGroup[k]);
  676. }
  677. }
  678. // apply filter selectors to combo filters for next group
  679. comboFilters = filterSelectors;
  680. }
  681. i++; // increment
  682. }
  683.  
  684. var comboFilter = comboFilters.join(", ");
  685. return comboFilter;
  686. }
  687.  
  688. </script>
  689.  
  690. <!--end filter scripts-->
  691.  
  692. <script>
  693. $(document).ready(function(){
  694.  
  695. $("#title1").click(function(){
  696. $("#box1").slideToggle(500);
  697. });
  698.  
  699. $("#title2").click(function(){
  700. $("#box2").slideToggle(500);
  701. });
  702.  
  703. $("#title3").click(function(){
  704. $("#box3").slideToggle(500);
  705. });
  706.  
  707. });
  708. </script>
  709.  
  710.  
  711. <meta charset="utf-8">
  712. <title>{Title}</title>
  713. <link rel="shortcut icon" href="{Favicon}">
  714. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  715.  
  716. </head>
  717.  
  718. <body>
  719.  
  720. <div id="menu">
  721.  
  722. <div id="blogtitle"> Blog title </div>
  723.  
  724. <div id="mainlinks">
  725. <a href="/"> Index </a>
  726. <a href="/ask"> Ask</a>
  727. <a href="/submit"> Submit</a>
  728. <a href="/archive"> Archive</a>
  729. </div>
  730. <!-- End mainlinks-->
  731.  
  732. </div>
  733. <!-- End menu -->
  734.  
  735. <div id="header"></div>
  736.  
  737. <div id="description">
  738.  
  739. 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.
  740.  
  741. </div>
  742. <!-- End description -->
  743.  
  744. <div id="sticky"></div>
  745.  
  746. <div id="maincontainer">
  747.  
  748. <div id="sort">
  749.  
  750. <div class="filters">
  751.  
  752. <!---------- Filter links. Here you add tags as ".theme", ".sidebar", ".onecolumn" etc. Replace labelone, labeltwo and labelthree with your own labels ---------->
  753.  
  754. <li class="option-set"><a href="#" data-filter-value="" class="reset selected">All</a></li>
  755. <li class="option-set"><a href="#" data-filter-value=".favorite">Favorites</a></li>
  756.  
  757. <ul class="filter option-set exclusive" data-filter-group="labelone">
  758. <li> <h2>Title one</h2> </li>
  759. <li><a href="#" data-filter-value="" class="selected">All</a></li>
  760. <li><a href="#" data-filter-value=".tagone">Tag one</a></li>
  761. <li><a href="#" data-filter-value=".tagtwo">Tag two</a></li>
  762. </ul>
  763.  
  764. <ul class="filter option-set" data-filter-group="labeltwo">
  765. <li> <h2>Title two</h2> </li>
  766. <li><a href="#" data-filter-value="" class="selected">All</a></li>
  767. <li><a href="#" data-filter-value=".tagthree">Tag three</a></li>
  768. <li><a href="#" data-filter-value=".tagfour">Tag four</a></li>
  769. <li><a href="#" data-filter-value=".tagfive">Tag five</a></li>
  770. <li><a href="#" data-filter-value=".tagsix">Tag six</a></li>
  771. </ul>
  772.  
  773. <ul class="filter option-set combine" data-filter-group="labelthree">
  774. <li> <h2>Title three</h2> </li>
  775. <li><a href="#" data-filter-value="" class="selected">All</a></li>
  776. <li><a href="#" data-filter-value=".tagseven">Tag seven</a></li>
  777. <li><a href="#" data-filter-value=".tageight">Tag eight</a></li>
  778. <li><a href="#" data-filter-value=".tagnine">Tag nine</a></li>
  779. <li><a href="#" data-filter-value=".tagten">Tag ten</a></li>
  780. </ul>
  781.  
  782. </div>
  783. <!-- End filters-->
  784.  
  785. </div>
  786. <!-- End sort -->
  787.  
  788.  
  789. <div class="grid">
  790.  
  791. <!---------- Content containers
  792.  
  793. 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.
  794.  
  795. ---------->
  796.  
  797.  
  798. <!-- Item -->
  799.  
  800. <div class="item tagone tagfive ">
  801.  
  802. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  803. <div class="labeltwo"> label </div>
  804.  
  805. <!-- Image -->
  806. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  807.  
  808. <div class="info">
  809.  
  810. <h2> Title </h2>
  811.  
  812. <div class="infodesc">
  813.  
  814. 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.
  815.  
  816. </div>
  817. <!-- End infodesc -->
  818.  
  819. <div class="infolinks">
  820.  
  821. <a href="http://" class="styleone"> link </a>
  822. <a href="http://" class="styleone"> link </a>
  823. <a href="http://" class="styletwo"> link </a>
  824.  
  825. </div>
  826. <!-- End infolinks -->
  827.  
  828. </div>
  829. <!-- End info -->
  830.  
  831. </div>
  832. <!-- End item -->
  833.  
  834.  
  835. <!-- Item -->
  836.  
  837. <div class="item tagone tagsix favorite">
  838.  
  839. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  840. <div class="labelone"> label </div>
  841.  
  842. <!-- Image -->
  843. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  844.  
  845. <div class="info">
  846.  
  847. <h2> Title </h2>
  848.  
  849. <div class="infodesc">
  850.  
  851. 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.
  852.  
  853. </div>
  854. <!-- End infodesc -->
  855.  
  856. <div class="infolinks">
  857.  
  858. <a href="http://" class="styleone"> link </a>
  859. <a href="http://" class="styleone"> link </a>
  860. <a href="http://" class="styletwo"> link </a>
  861.  
  862. </div>
  863. <!-- End infolinks -->
  864.  
  865. </div>
  866. <!-- End info -->
  867.  
  868. </div>
  869. <!-- End item -->
  870.  
  871.  
  872. <!-- Item -->
  873.  
  874. <div class="item tagtwo tagfive favorite">
  875.  
  876. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  877. <div class="labelone"> label </div>
  878.  
  879. <!-- Image -->
  880. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  881.  
  882. <div class="info">
  883.  
  884. <h2> Title </h2>
  885.  
  886. <div class="infodesc">
  887.  
  888. 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.
  889.  
  890. </div>
  891. <!-- End infodesc -->
  892.  
  893. <div class="infolinks">
  894.  
  895. <a href="http://" class="styleone"> link </a>
  896. <a href="http://" class="styleone"> link </a>
  897. <a href="http://" class="styletwo"> link </a>
  898.  
  899. </div>
  900. <!-- End infolinks -->
  901.  
  902. </div>
  903. <!-- End info -->
  904.  
  905. </div>
  906. <!-- End item -->
  907.  
  908.  
  909. <!-- Item -->
  910.  
  911. <div class="item tagthree tagfour ">
  912.  
  913. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  914. <div class="labeltwo"> label </div>
  915.  
  916. <!-- Image -->
  917. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  918.  
  919. <div class="info">
  920.  
  921. <h2> Title </h2>
  922.  
  923. <div class="infodesc">
  924.  
  925. 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.
  926.  
  927. </div>
  928. <!-- End infodesc -->
  929.  
  930. <div class="infolinks">
  931.  
  932. <a href="http://" class="styleone"> link </a>
  933. <a href="http://" class="styleone"> link </a>
  934. <a href="http://" class="styletwo"> link </a>
  935.  
  936. </div>
  937. <!-- End infolinks -->
  938.  
  939. </div>
  940. <!-- End info -->
  941.  
  942. </div>
  943. <!-- End item -->
  944.  
  945.  
  946. <!-- Item -->
  947.  
  948. <div class="item tagtwo tagfive ">
  949.  
  950. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  951. <div class="labeltwo"> label </div>
  952.  
  953. <!-- Image -->
  954. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  955.  
  956. <div class="info">
  957.  
  958. <h2> Title </h2>
  959.  
  960. <div class="infodesc">
  961.  
  962. 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.
  963.  
  964. </div>
  965. <!-- End infodesc -->
  966.  
  967. <div class="infolinks">
  968.  
  969. <a href="http://" class="styleone"> link </a>
  970. <a href="http://" class="styleone"> link </a>
  971. <a href="http://" class="styletwo"> link </a>
  972.  
  973. </div>
  974. <!-- End infolinks -->
  975.  
  976. </div>
  977. <!-- End info -->
  978.  
  979. </div>
  980. <!-- End item -->
  981.  
  982.  
  983. <!-- Item -->
  984.  
  985. <div class="item tagthree tagsix tageight ">
  986.  
  987. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  988. <div class="labelone"> label </div>
  989.  
  990. <!-- Image -->
  991. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  992.  
  993. <div class="info">
  994.  
  995. <h2> Title </h2>
  996.  
  997. <div class="infodesc">
  998.  
  999. 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.
  1000.  
  1001. </div>
  1002. <!-- End infodesc -->
  1003.  
  1004. <div class="infolinks">
  1005.  
  1006. <a href="http://" class="styleone"> link </a>
  1007. <a href="http://" class="styleone"> link </a>
  1008. <a href="http://" class="styletwo"> link </a>
  1009.  
  1010. </div>
  1011. <!-- End infolinks -->
  1012.  
  1013. </div>
  1014. <!-- End info -->
  1015.  
  1016. </div>
  1017. <!-- End item -->
  1018.  
  1019.  
  1020. <!-- Item -->
  1021.  
  1022. <div class="item tagthree tagfour ">
  1023.  
  1024. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  1025. <div class="labeltwo"> label </div>
  1026.  
  1027. <!-- Image -->
  1028. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1029.  
  1030. <div class="info">
  1031.  
  1032. <h2> Title </h2>
  1033.  
  1034. <div class="infodesc">
  1035.  
  1036. 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.
  1037.  
  1038. </div>
  1039. <!-- End infodesc -->
  1040.  
  1041. <div class="infolinks">
  1042.  
  1043. <a href="http://" class="styleone"> link </a>
  1044. <a href="http://" class="styleone"> link </a>
  1045. <a href="http://" class="styletwo"> link </a>
  1046.  
  1047. </div>
  1048. <!-- End infolinks -->
  1049.  
  1050. </div>
  1051. <!-- End info -->
  1052.  
  1053. </div>
  1054. <!-- End item -->
  1055.  
  1056.  
  1057. <!-- Item -->
  1058.  
  1059. <div class="item tagtwo tagfive ">
  1060.  
  1061. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  1062. <div class="labelone"> label </div>
  1063.  
  1064. <!-- Image -->
  1065. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1066.  
  1067. <div class="info">
  1068.  
  1069. <h2> Title </h2>
  1070.  
  1071. <div class="infodesc">
  1072.  
  1073. 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.
  1074.  
  1075. </div>
  1076. <!-- End infodesc -->
  1077.  
  1078. <div class="infolinks">
  1079.  
  1080. <a href="http://" class="styleone"> link </a>
  1081. <a href="http://" class="styleone"> link </a>
  1082. <a href="http://" class="styletwo"> link </a>
  1083.  
  1084. </div>
  1085. <!-- End infolinks -->
  1086.  
  1087. </div>
  1088. <!-- End info -->
  1089.  
  1090. </div>
  1091. <!-- End item -->
  1092.  
  1093.  
  1094. <!-- Item -->
  1095.  
  1096. <div class="item tagfour tagsix tagnine ">
  1097.  
  1098. <!-- Label (here you can put the price, "new", "favorite" etc) -->
  1099. <div class="labelone"> label </div>
  1100.  
  1101. <!-- Image -->
  1102. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1103.  
  1104. <div class="info">
  1105.  
  1106. <h2> Title </h2>
  1107.  
  1108. <div class="infodesc">
  1109.  
  1110. 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.
  1111.  
  1112. </div>
  1113. <!-- End infodesc -->
  1114.  
  1115. <div class="infolinks">
  1116.  
  1117. <a href="http://" class="styleone"> link </a>
  1118. <a href="http://" class="styleone"> link </a>
  1119. <a href="http://" class="styletwo"> link </a>
  1120.  
  1121. </div>
  1122. <!-- End infolinks -->
  1123.  
  1124. </div>
  1125. <!-- End info -->
  1126.  
  1127. </div>
  1128. <!-- End item -->
  1129.  
  1130.  
  1131.  
  1132. <!---------- Item (content containers) end here. To add more copy
  1133.  
  1134.  
  1135. <div class="item tagfour tagsix tagnine ">
  1136.  
  1137. <div class="labelone"> label </div>
  1138.  
  1139. <img src="https://uploads-ssl.webflow.com/57e5747bd0ac813956df4e96/5aebae14c6d254621d81f826_placeholder.png"></a>
  1140.  
  1141. <div class="info">
  1142.  
  1143. <h2> Title </h2>
  1144.  
  1145. <div class="infodesc">
  1146.  
  1147. 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.
  1148.  
  1149. </div>
  1150.  
  1151.  
  1152. <div class="infolinks">
  1153.  
  1154. <a href="http://" class="styleone"> link </a>
  1155. <a href="http://" class="styleone"> link </a>
  1156. <a href="http://" class="styletwo"> link </a>
  1157.  
  1158. </div>
  1159.  
  1160. </div>
  1161.  
  1162. </div>
  1163.  
  1164.  
  1165. and paste it above or below this comment. -------->
  1166.  
  1167.  
  1168. </div>
  1169. <!-- End grid -->
  1170.  
  1171. </div>
  1172. <!--End maincontainer-->
  1173.  
  1174. <!--CREDIT (DO NOT REMOVE)-->
  1175. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page PORTFOLIO by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>
  1176.  
  1177. </body>
  1178.  
  1179.  
  1180. </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!