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

Page: PORTFOLIO (bright) v2

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