API tools faq
paste
themesbydoori

Portfolio - Dulcet

themesbydoori
Feb 11th, 2018 (edited)
1,551
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.61 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Portfolio page ⎾DULCET⏌ by sheathemes @ tumblr
  11.  
  12. - TERMS -
  13.  
  14. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  15. II. Do NOT take any part of my code to use for your personal designs
  16. III. Do NOT claim any part of my code as your own
  17. IV. NO redistrubuting of any of my code
  18. V. Editing is allowed. As long as it's NOT being claimed as your own
  19.  
  20. CREDITS
  21.  
  22. > Style-my-Tootips: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  23.  
  24. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  25.  
  26. > Font icons: http://saturnthms.com/font
  27.  
  28. > Isotope filtering script: https://isotope.metafizzy.co/filtering.html
  29.  
  30. !-->
  31.  
  32. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  33. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  34.  
  35. <head>
  36.  
  37. <!--Custom Fonts-->
  38. <link rel="preconnect" href="https://fonts.gstatic.com">
  39. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lato:wght@400;700&family=Merriweather:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Open+Sans:wght@400;700&family=Playfair+Display&family=Poppins:wght@400;700&family=Roboto:wght@400;700&family=Epilogue:wght@400;700&display=swap" rel="stylesheet">
  40. <!--Custom Fonts-->
  41.  
  42. <!--Homelinks Icons-->
  43. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  44. <!--Homelinks Icons-->
  45.  
  46.     <title>{Title}</title>
  47.     <link rel="shortcut icon" href="{Favicon}">
  48.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  49.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  50.     <meta name="viewport" content="width=device-width, initial-scale=1">
  51.  
  52. <link rel="stylesheet" href="portfolio.css">
  53.  
  54. </head>
  55.  
  56. <style type="text/css">
  57. :root {
  58.     --accent: #7D4B30;
  59.     --accented-text: #ffffff;
  60.     --main-background: #f8f8f8;
  61.     --main-font: 14px;
  62.     --main-font-color: #444444;
  63.     --header-title: #000000;
  64.     --header-content-background: #ffffff;
  65.     --bolded: #000000;
  66.     --italic: #7D4B30;
  67.     --underline: #7D4B30;
  68.     --main-links: #000000;
  69.     --link-hover: #c1d9cd;
  70.     --scrollbar: #291B16;
  71.     --text-selection-background: #c1d9cd;
  72.     --text-selection: #000000;
  73.     --tooltip: #fff;
  74.     --tooltip-background: #291B16;
  75.     --post-borders: #E6E6E6;
  76.     --portfolio-background: #ffffff;
  77. }
  78.  
  79. /*----------FADE-IN ANIMATION----------*/
  80.  
  81. @keyframes fadein {
  82.     from {opacity:0;}
  83.     to {opacity:1;}
  84. }
  85.  
  86. @-moz-keyframes fadein { /* Firefox */
  87.     from {opacity:0;}
  88.     to {opacity:1;}
  89. }
  90.  
  91. @-webkit-keyframes fadein { /* Safari and Chrome */
  92.     from {opacity:0;}
  93.     to {opacity:1;}
  94. }
  95.  
  96. @-o-keyframes fadein { /* Opera */
  97.     from {opacity:0;}
  98.     to {opacity: 1;}
  99. }
  100.  
  101. /*----------TUMBLR CONTROLS----------*/
  102.  
  103. iframe#tumblr_controls, .iframe-controls--desktop {
  104.     right: 10px !important;
  105.     top: 25px !important;
  106.     position: fixed !important;
  107.     z-index: 99999999999999999999 !important;
  108.     -webkit-filter: invert(100%);
  109.     -moz-filter: invert(100%);
  110.     -o-filter: invert(100%);
  111.     -webkit-transition: opacity 0.4s linear;opacity: 0.4;
  112.     -webkit-transition: all 0.8s ease-out;
  113.     -moz-transition: all 0.8s ease-out;
  114.     transition: all 0.8s ease-out;
  115.     display: none;
  116. }
  117.  
  118. /*----------SCROLLBAR----------*/
  119.  
  120. ::-webkit-scrollbar {
  121.     width: 10px;
  122.     height: 6px;
  123. }
  124. ::-webkit-scrollbar-button {
  125.     width: 0px;
  126.     height: 0px;
  127. }
  128. ::-webkit-scrollbar-thumb {
  129.     background-color: var(--scrollbar);
  130.     border-radius: 20px;
  131.     border: 2px solid var(--main-background);
  132. }
  133.  
  134. ::-webkit-scrollbar-track {
  135.     background: var(--portfolio-background);
  136.     border: 8px solid var(--portfolio-background);
  137.     border-radius: 20px;
  138. }
  139.  
  140. ::-webkit-scrollbar-corner {
  141.     background: transparent;
  142. }
  143.  
  144. /*----------TOOLTIPS----------*/
  145.  
  146. .tippy-tooltip.custom-theme {
  147.     background-color: var(--tooltip-background);
  148.     color: var(--tooltip);
  149.     text-align:center;
  150.     font-size: 12px;
  151. }
  152.  
  153. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  154.   fill: var(--tooltip-background);
  155. }
  156.  
  157. /*----------TEXT SELECTION----------*/
  158. ::selection {
  159.     background: var(--accent);
  160.     color: var(--accented-text);
  161. }
  162.  
  163. ::-moz-selection {
  164.     background: var(--accent);
  165.     color: var(--accented-text);
  166. }
  167.  
  168. ::-webkit-selection {
  169.     background: var(--accent);
  170.     color: var(--accented-text);
  171. }
  172.  
  173. /*----------THEME BASICS----------*/
  174.  
  175. body {
  176.     color: var(--text);
  177.     font-family: 'Poppins', sans-serif;
  178.     font-weight: 400;
  179.     font-size: var(--main-font);
  180.     line-height: 180%;
  181.     margin: 0;
  182.     text-align: left;
  183.     background: var(--main-background) url("") center;
  184.     background-attachment: fixed;
  185.     background-repeat: repeat;
  186.     -webkit-font-smoothing: antialiased;
  187.     -moz-osx-font-smoothing: grayscale;
  188.     animation: fadein 2.5s;
  189.     -moz-animation: fadein 2.5s; /* Firefox */
  190.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  191.     -o-animation: fadein  2.5s; /* Opera */
  192. }
  193.  
  194. b,strong {
  195.     color:var(--bolded);
  196.     font-weight: 700;
  197. }
  198.  
  199. i,em {
  200.     color:var(--italic);
  201. }
  202.  
  203. u {
  204.     color:var(--underline);
  205. }
  206.  
  207. hr {
  208.     width: 30%;
  209.     height: 1px;
  210.     background-color: var(--accent);
  211.     color: var(--accent);
  212.     border: 0px solid transparent;
  213. }
  214.  
  215. h1,h2,h3 {
  216.     font-weight: 700;
  217.     font-size: 1.4em;
  218.     color: var(--bolded);
  219. }
  220.  
  221. h4,h5,h6 {
  222.     font-weight: 700;
  223.     font-size: 1.2em;
  224.     color: var(--bolded);
  225. }
  226.  
  227. small,sub,sup {
  228.     font-size: 10px;
  229. }
  230.  
  231. a {
  232.     color: var(--bolded);
  233.     text-decoration:none;
  234.     -moz-transition-duration: 0.5s;
  235.     -o-transition-duration: 0.5s;
  236.     -webkit-transition-duration: 0.5s;
  237.     transition-duration: 0.5s;
  238. }
  239.  
  240. a:hover {
  241.     color: var(--accent);
  242.     -moz-transition-duration: 0.5s;
  243.     -o-transition-duration: 0.5s;
  244.     -webkit-transition-duration: 0.5s;
  245.     transition-duration: 0.5s;
  246. }
  247.  
  248. /*----------HEADER----------*/
  249.  
  250. header {
  251.     width: 100%;
  252.     height: 200px;
  253.     position: relative;
  254.     top: 0;
  255.     overflow-x: hidden;
  256.     background: var(--accent) url("") center no-repeat;
  257. }
  258.  
  259. /*----------CONTAINER---------*/
  260.  
  261. #container {
  262.     width: 80%;
  263.     position: relative;
  264.     margin: auto;
  265. }
  266.  
  267. /*----------HEADER DESCRIPTION----------*/
  268.  
  269. .desc-cont {
  270.     width: 800px;
  271.     background-color: var(--portfolio-background);
  272.     position: relative;
  273.     padding: 20px;
  274.     box-sizing: border-box;
  275.     left: 0;
  276.     right: 0;
  277.     margin: auto;
  278.     top: -80px;
  279.     z-index: 400;
  280.     display: flex;
  281.     flex-direction: column;
  282.     justify-content: center;
  283.     align-items: center;
  284. }
  285.  
  286. /*----------TUMBLR LINKS----------*/
  287.  
  288. .homelinks {
  289.     margin-top: 5px;
  290. }
  291.  
  292. .homelinks a {
  293.     display: inline-block;
  294.     margin: 0 10px;
  295. }
  296.  
  297. .sf-home-o, .sf-envelope-3-o, .sf-share-o, .sf-save-o, .sf-cat-o, .sf-clubs-o, .sf-flower-1-o {
  298.     background-color: var(--accent);
  299.     color: var(--accented-text);
  300.     font-size: 20px;
  301.     height: 20px;
  302.     display: inline-block;
  303.     border-radius: 50%;
  304.     padding: 10px;
  305.     line-height: 10px;
  306.     -webkit-transition: all 0.6s ease-in-out;
  307.     -moz-transition: all 0.6s ease-in-out;
  308.     -o-transition: all 0.6s ease-in-out;
  309.     transition: all 0.6s ease-in-out;
  310. }
  311.  
  312. .sf-home-o:hover, .sf-envelope-3-o:hover, .sf-share-o:hover, .sf-save-o:hover, .sf-cat-o:hover, .sf-clubs-o:hover, .sf-flower-1-o:hover {
  313.     background: transparent;
  314.     color: var(--main-links);
  315.     -webkit-transition: all 0.6s ease-in-out;
  316.     -moz-transition: all 0.6s ease-in-out;
  317.     -o-transition: all 0.6s ease-in-out;
  318.     transition: all 0.6s ease-in-out;
  319. }
  320.  
  321. #title {
  322.     text-align: center;
  323.     font-family: 'Merriweather', serif;
  324.     font-size: 1.8em;
  325.     color: var(--header-title);
  326.     text-transform: uppercase;
  327.     border-bottom: 1px solid var(--post-borders);
  328.     padding: 0 20px 20px;
  329. }
  330.  
  331. .description {
  332.     padding: 10px;
  333.     text-align: center;
  334.     margin-top: 10px;
  335. }
  336.  
  337. /*----------CATEGORY LINKS----------*/
  338.  
  339. #sort {
  340.     text-align: center;
  341. }
  342.  
  343. #sort li {
  344.     display:inline-block;
  345.     list-style: none;
  346.     margin: 0 10px;
  347. }
  348.  
  349. #sort ul {list-style: none; padding: 0;}
  350.  
  351. #sort a {
  352.     color: var(--main-links);
  353.     display:inline-block;
  354.     background-color: transparent;
  355.     padding: 0 20px;
  356.     font-weight: 700;
  357. }
  358.  
  359. #sort a:hover {
  360.     color: var(--acented-text);
  361.     background-color: var(--accent);
  362. }
  363.  
  364. #sort a:hover, #sort a:active {
  365.     background-color: var(--accent);
  366.     color: var(--accented-text);
  367. }
  368.  
  369. #sort li a.selected {
  370.     background-color: var(--accent);
  371.     color: var(--accented-text);
  372. }
  373.  
  374. #port-content {
  375.     width: 100%;
  376.     margin: -20px auto 30px;
  377.     margin-left: 2%;
  378. }
  379.  
  380. /*----------PORTFOLIO SECTION----------*/
  381.  
  382. .portfolio {
  383.     margin: 30px;
  384.     padding: 10px;
  385.     background-color: var(--portfolio-background);
  386.     position: relative;
  387.     -moz-transition-duration: 1s;
  388.     -webkit-transition-duration: 1s;
  389.     -o-transition-duration: 1s;
  390. }
  391.  
  392. .portfolio .image-cont {
  393.     position: relative;
  394.     width: 400px;
  395.     height: 250px;
  396.     overflow: hidden;
  397.     transition: 1s;
  398. }
  399.  
  400. .portfolio .image-cont img {
  401.     width: 100%;
  402.     height: 100%;
  403.     transition: 1s;
  404. }
  405.  
  406. .portfolio:hover .image-cont img {
  407.     transform: scale(1.3);
  408. }
  409.  
  410. .portfolio .details {
  411.     position: absolute;
  412.     top: 10px;
  413.     left: 10px;
  414.     right: 10px;
  415.     bottom: 10px;
  416.     background-color:rgba(255,255,255, 0.8);
  417.     transform: scale(.5);
  418.     visibility: hidden;
  419.     transition: .5s;
  420. }
  421.  
  422. .portfolio:hover .details {
  423.     transform: scale(1);
  424.     visibility: visible;
  425. }
  426.  
  427. .portfolio .details .info {
  428.     text-align: center;
  429.     position: absolute;
  430.     top: 50%;
  431.     left: 50%;
  432.     transform: translate(-50%,-50%);
  433.     width: 100%;
  434. }
  435.  
  436. .port-title {
  437.     font-size: 1.3em;
  438.     color: var(--bolded);
  439. }
  440.  
  441. .port-link {
  442.     margin-top: 15px;
  443.     opacity: 0;
  444.     transform: translateY(50px);
  445.     transition: .5s;
  446. }
  447.  
  448. .portfolio:hover .port-link {
  449.     opacity: 1;
  450.     transform: translateY(0px);
  451. }
  452.  
  453. .port-link a {
  454.     font-weight: 600;
  455.     color: var(--bolded);
  456. }
  457.  
  458. .port-link a:hover {
  459.     color: var(--accent);
  460. }
  461.  
  462. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  463.  
  464. #bottom {
  465.     bottom: 18px;
  466.     position: fixed;
  467.     right: 30px;
  468.     z-index: 99;
  469. }
  470.  
  471. #bottom a:hover {
  472.     color: var(--link-hover);
  473. }
  474.  
  475. .cred {
  476.     padding: 3px;
  477.     font-size: 18px;
  478.     width: 18px;
  479.     height: 18px;
  480.     display: inline-block;
  481.     background-color: var(--accent);
  482.     color: var(--accented-text);
  483.     line-height: 18px;
  484.     text-align: center;
  485. }
  486.  
  487. .la-arrow-circle-up {
  488.     padding: 3px;
  489.     font-size: 18px;
  490.     width: 18px;
  491.     display: block;
  492.     background-color: var(--accent);
  493.     color: var(--accented-text);
  494. }
  495.  
  496. </style>
  497.  
  498. <body>
  499.  
  500. <header class="header"></header> <!-----------Top Banner----------->
  501. <section id="container"> <!-----------Main Container----------->
  502.     <section class="desc-cont"> <!-----------Header----------->
  503.         <h1 id="title">dulcet</h1> <!-----------Page Title----------->
  504.         <nav class="homelinks"> <!-----------Tumblr Links----------->
  505.             <a href="/" title="home"><span class="sf-home-o"></span></a>  
  506.             <a href="/ask" title="inbox"><span class="sf-envelope-3-o"></span></a>
  507.             <a href="/submit" title="submit"><span class="sf-share-o"></span></a>
  508.             <a href="/archive" title="archive"><span class="sf-save-o"></span></a>
  509.             <a href="/" title="custom link one"><span class="sf-cat-o"></span></a>
  510.             <a href="/" title="custom link two"><span class="sf-clubs-o"></span></a>
  511.             <a href="/" title="custom link three"><span class="sf-flower-1-o"></span></a>
  512.         </nav> <!-----------Tumblr Links----------->
  513.         <div class="description">
  514.        
  515.         <!-----------Change the main description below----------->  
  516.        
  517.             Morbi viverra porta massa ut porta.
  518.             Sed erat orci, maximus in maximus quis, semper eget orci.
  519.             Mauris pulvinar pellentesque mauris in consequat.
  520.             Nulla ac metus pharetra urna tempus hendrerit.
  521.             Sed iaculis sit amet metus sit amet laoreet.
  522.             Donec dignissim arcu at nulla malesuada, a molestie risus mollis.
  523.            
  524.         <!-----------Change the main description below----------->  
  525.        
  526.         </div>
  527.        
  528.             <div id="sort">
  529.                 <ul id="filters" class="option-set clearfix" data-option-key="filter">
  530.  
  531. <!-----------Add another filter category below----------->      
  532.  
  533. <!--------
  534.  
  535. <li><a href="#filter" data-option-filter=".category-whatever the next number is">category name</a></li>
  536.  
  537. ---------->
  538.  
  539. <!-----------Change the name of the filter category below----------->
  540.  
  541. <li><a href="#filter" data-option-filter=".portfolio">all</a></li>
  542. <li><a href="#filter" data-option-filter=".category-one">category one</a></li>
  543. <li><a href="#filter" data-option-filter=".category-two">category two</a></li>
  544. <li><a href="#filter" data-option-filter=".category-three">category three</a></li>
  545. <li><a href="#filter" data-option-filter=".category-four">category four</a></li>
  546.  
  547. <!-----------Change the name of the filter category above----------->                      
  548.                 </ul>
  549.             </div>
  550.     </section> <!-----------Header----------->
  551.  
  552. <div id="port-content" class="clearfix">
  553.  
  554. <!-------This is where you will add/delete/edit the actual content------->
  555.  
  556. <!-------- IF YOU WANT ANOTHER PORTFOLIO POST JUST COPY AND PAST THE CODE BELOW
  557.  
  558.    <section id="category" class="portfolio category-name">
  559.        <section class="image-cont">
  560.            <img src="https://static.tumblr.com/uh2chis/IPvqlac69/placeholder.png">
  561.        </section>
  562.            <div class="details">
  563.                <div class="info">
  564.                    <h1 class="port-title">portfolio title</h1>
  565.                    <div class="port-desc">portfolio description</div>
  566.                    <div class="port-link">
  567.                        <a href="#">link here</a>
  568.                    </div>
  569.                </div>
  570.            </div>
  571.    </section>
  572.        
  573. --------->
  574.  
  575. <!-------------------PORTFOLIO POST START------------------->
  576.         <section id="category" class="portfolio category-one">
  577.             <section class="image-cont">
  578.                 <img src="https://static.tumblr.com/uh2chis/f83qlcr02/placeholder-2.png">
  579.             </section>
  580.             <div class="details">
  581.                 <div class="info">
  582.                     <h1 class="port-title">portfolio title</h1>
  583.                     <div class="port-desc">portfolio description</div>
  584.                     <div class="port-link">
  585.                         <a href="#">link here</a>
  586.                     </div>
  587.                 </div>
  588.             </div>
  589.         </section>
  590. <!-------------------PORTFOLIO POST END------------------->
  591.  
  592. <!-------------------PORTFOLIO POST START------------------->
  593.         <section id="category" class="portfolio category-two">
  594.             <section class="image-cont">
  595.                 <img src="https://static.tumblr.com/uh2chis/f83qlcr02/placeholder-2.png">
  596.             </section>
  597.             <div class="details">
  598.                 <div class="info">
  599.                     <h1 class="port-title">portfolio title</h1>
  600.                     <div class="port-desc">portfolio description</div>
  601.                     <div class="port-link">
  602.                         <a href="#">link here</a>
  603.                         </div>
  604.                 </div>
  605.             </div>
  606.         </section>
  607. <!-------------------PORTFOLIO POST END------------------->
  608.  
  609. <!-------------------PORTFOLIO POST START------------------->
  610.     <section id="category" class="portfolio  category-three">
  611.         <section class="image-cont">
  612.             <img src="https://static.tumblr.com/uh2chis/f83qlcr02/placeholder-2.png">
  613.                 </section>
  614.                 <div class="details">
  615.                     <div class="info">
  616.                         <h1 class="port-title">portfolio title</h1>
  617.                         <div class="port-desc">portfolio description</div>
  618.                         <div class="port-link">
  619.                             <a href="#">link here</a>
  620.                         </div>
  621.                     </div>
  622.                 </div>
  623.     </section>
  624. <!-------------------PORTFOLIO POST END------------------->
  625.  
  626. <!-------------------PORTFOLIO POST START------------------->
  627.     <section id="category" class="portfolio category-four">
  628.         <section class="image-cont">
  629.             <img src="https://static.tumblr.com/uh2chis/f83qlcr02/placeholder-2.png">
  630.         </section>
  631.             <div class="details">
  632.                 <div class="info">
  633.                     <h1 class="port-title">portfolio title</h1>
  634.                     <div class="port-desc">portfolio description</div>
  635.                     <div class="port-link">
  636.                         <a href="#">link here</a>
  637.                     </div>
  638.                 </div>
  639.             </div>
  640.         </section>
  641. <!-------------------PORTFOLIO POST END------------------->
  642.        
  643.        
  644.  </section> <!-----------Main Container----------->      
  645. </div> <!-------------------PORTFOLIO SECTION END------------------->
  646.  
  647. <footer id="bottom">
  648. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  649.  <a href="https://sheathemes.tumblr.com" class="cred" title="theme by sheathemes">&#169;</a>  
  650. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  651. </footer>
  652.  
  653. <!------------Smooth Scroll Script------------>
  654. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  655. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  656. <!------------Smooth Scroll Script------------>
  657.  
  658. <!-----------Isotope Filter Script----------->
  659. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  660. <!-----------Isotope Filter Script----------->
  661.  
  662. <!-----------Tooltips Script----------->
  663. <script src="https://unpkg.com/popper.js@1"></script> <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  664. <!-----------Tooltips Script----------->
  665.  
  666. <script>
  667.  
  668. $(document).ready(function(){
  669.     //isotope filtering
  670.     var $container = $('#port-content');
  671.    
  672.     $container.isotope({
  673.     itemSelector : '.portfolio'
  674.     });
  675.    
  676.    
  677.     var $optionSets = $('#sort .option-set'),
  678.     $optionLinks = $optionSets.find('a');
  679.    
  680.     $optionLinks.click(function(){
  681.     var $this = $(this);
  682.     // don't proceed if already selected
  683.     if ( $this.hasClass('selected') ) {
  684.     return false;
  685.     }
  686.     var $optionSet = $this.parents('.option-set');
  687.     $optionSet.find('.selected').removeClass('selected');
  688.     $this.addClass('selected');
  689.    
  690.     // make option object dynamically, i.e. { filter: '.my-filter-class' }
  691.     var options = {},
  692.     key = $optionSet.attr('data-option-key'),
  693.     value = $this.attr('data-option-filter');
  694.     // parse 'false' as false boolean
  695.     value = value === 'false' ? false : value;
  696.     options[ key ] = value;
  697.     if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  698.    // changes in layout modes need extra logic
  699.    changeLayoutMode( $this, options )
  700.    } else {
  701.    // otherwise, apply new options
  702.    $container.isotope( options );
  703.     }
  704.    
  705.     return false;
  706.     });
  707.         tippy('a[title]', {
  708.             theme: 'custom',
  709.             arrow: tippy.roundArrow,
  710.             zIndex: 9999999999,
  711.             placement: 'auto',
  712.             maxWidth: 300,
  713.             content(reference) {
  714.                 const title = reference.getAttribute('title');
  715.                 reference.removeAttribute('title'); return title; },
  716.            
  717.         });
  718. });
  719.    
  720. </script>
  721.  
  722. </body>
  723. </html> <!---------------------------END--------------------------->
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!