API tools faq
paste
hermionemessi

All In One 03 (static blogroll)

hermionemessi
Sep 9th, 2021 (edited)
1,018
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Eudamia Page Pack: All In One 03 Hessa (Custom Blogroll version) by antoniosvivaldi / athenathms
  4.  
  5. antoniosvivaldi Β© 2021
  6.  
  7. Note:
  8.  
  9. - Optimised for modern browsers e.g. Google Chrome / Opera
  10. - Optimised for computer monitor sizes 13in. ~ 15in.
  11. - Common terms of use apply
  12. - Feel free to tweak the layout as long as the credit stays intact
  13.  
  14. -->
  15. <head>
  16.  
  17. <meta charset="UTF-8" />
  18. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <title>{Title}</title>
  23.  
  24.  
  25.  
  26.  
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  30. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  31. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet">
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700" rel="stylesheet">
  34. <link href="https://fonts.googleapis.com/css?family=Elsie:900" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css?family=Unna:700" rel="stylesheet">
  36. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700" rel="stylesheet">
  37.  
  38. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  39.  
  40. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  41.  
  42. <style type="text/css">
  43.  
  44. /*Customise stuff here*/
  45.  
  46. :root {
  47.  
  48. /*font size*/
  49. --fontsize:18px;
  50.  
  51. /*accent colours*/
  52. --accent: #53759b;
  53. --highlight: #cfe9f6;
  54.  
  55. /*accent colours with opacity*/
  56.  
  57. /*
  58. convert the accent & highlight hex codes to RGB values using the following website:
  59.  
  60. https://www.rapidtables.com/convert/color/hex-to-rgb.html
  61.  
  62. */
  63.  
  64. --accentalpha: 83, 117, 155;
  65. --highlightalpha: 207, 233, 246;
  66.  
  67. /* available blend modes:
  68.  
  69. - Normal
  70. - Multiply
  71. - Scren
  72. - Color Burn
  73. - Color Dodge
  74. - Overlay
  75. - Soft Light
  76. - Hard Light
  77. - Hue
  78. - Color
  79.  
  80.  
  81. */
  82.  
  83. --abtblend:multiply;
  84. --faqblend:multiply;
  85.  
  86.  
  87.  
  88. }
  89.  
  90. /*Available body fonts:
  91.  
  92. - Fira Sans
  93. - Open Sans
  94. - Karla
  95. - Source Sans Pro
  96.  
  97. */
  98.  
  99. body {
  100. font-family:'Fira Sans',sans-serif;
  101. }
  102.  
  103. /*Available heading fonts:
  104.  
  105. - Playfair Display
  106. - Elsie
  107. - Unna
  108. - Libre Baskerville
  109.  
  110. */
  111.  
  112. h1, h2, .tilter__title {font-family:'Playfair Display',serif;}
  113.  
  114. /*FAQ background*/
  115. article.faqbg {
  116. background-image: url('https://64.media.tumblr.com/7c29a2e824b9521c05054c115361f86f/4e8a6883106985ad-1d/s2048x3072/7a35f4e0e60ed72f6bdc469df7a3dfc53d9db1d0.jpg');
  117. }
  118.  
  119.  
  120.  
  121. </style>
  122.  
  123. <!--the rest of the CSS stylesheet-->
  124. <link rel="stylesheet" href="https://static.tumblr.com/hqib8pd/orEr5hqe4/eudamia-main-v2.css">
  125.  
  126. </head>
  127.  
  128. <!--How to use different theme modes: in the body tag below
  129.  
  130. Light theme: day-mode
  131. Dark theme: night-mode
  132. Alternating theme: remove day-mode / night-mode from the classname and uncomment the script at the end of the HTML
  133.  
  134. -->
  135. <body class="animsition day-mode">
  136.  
  137. <div class="topbar">
  138. <div class="topbar__inner">
  139.  
  140. <!--If you want to change the title, just replace the 3 "{Title}" below to your desired heading title-->
  141. <h1><a class="a-link tbrefresh" href="/">{Title}
  142. <span class="tbletters" data-letters="{Title}"></span>
  143. <span class="tbletters" data-letters="{Title}"></span>
  144. </a></h1>
  145.  
  146. <nav class="tbnav">
  147. <a data-tabs="tab1" class="active">About</a>
  148. <a data-tabs="tab2">FAQ</a>
  149. <a data-tabs="tab3">Navi</a>
  150. <a data-tabs="tab4">Blogroll</a>
  151. </nav>
  152. </div>
  153. </div>
  154.  
  155.  
  156. <main class="smooth">
  157. <div id="wrapper">
  158. <!--Posts and hero image-->
  159. <section class="tabs" id="tab1">
  160.  
  161. <div class="abt_cont">
  162. <article class="abtstuff hoverbox">
  163.  
  164. <a class="tilter tilter--4">
  165. <figure class="tilter__figure">
  166. <div class="abtimg">
  167.  
  168.  
  169.  
  170. <!--About Me section image-->
  171. <img class="tilter__image" src="https://64.media.tumblr.com/e97a64470998fd16b116b17f67fbab4c/4e8a6883106985ad-75/s2048x3072/38b3b295a1dde5bff3c30e2896ef1f2d847147ed.png"data-focus-x=".5" data-focus-y="0" />
  172. <!--/About Me section image-->
  173.  
  174.  
  175. </div>
  176. <div class="tilter__deco tilter__deco--shine"><div></div></div>
  177. <div class="tilter__deco tilter__deco--overlay"></div>
  178. <figcaption class="tilter__caption">
  179. <!--Name-->
  180. <h3 class="tilter__title">Name</h3>
  181. <!--/Name-->
  182.  
  183. <!--Short info-->
  184. <p class="tilter__description">some info here</p>
  185. <!--/Short info-->
  186.  
  187. </figcaption>
  188. <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
  189. <path d="M20.5,20.5h260v375h-260V20.5z" />
  190. </svg>
  191. </figure>
  192. </a>
  193.  
  194.  
  195.  
  196.  
  197. </article>
  198.  
  199. <article class="abtstuff biography">
  200. <h1>About Me</h1>
  201.  
  202. <!--Write your bio here-->
  203. <p>
  204. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  205. </p>
  206.  
  207.  
  208. <!--Add bio quote if you want-->
  209. <p class="abtqt">
  210. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  211. </p>
  212.  
  213. <!--to add more paragraphs: add one more set of <p></p> to add one moreline of quote <p class="abtqt"></p> -->
  214.  
  215. <!--/to here -->
  216.  
  217. <nav class="abtlinks">
  218.  
  219. <!--About Me Link-->
  220. <a href="/" title="Link">
  221. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M15 1c-.38 0-.692.184-.963.416-.27.232-.518.534-.766.883-.493.697-.98 1.596-1.456 2.518-.475.923-.94 1.868-1.357 2.625-.418.758-.85 1.338-.998 1.444-.15.105-.853.328-1.722.482-.868.153-1.93.292-2.976.448-1.046.157-2.072.33-2.903.573-.416.122-.783.258-1.092.438-.31.18-.59.413-.71.776-.122.362-.035.717.108 1.042.143.326.36.648.623.985.526.675 1.25 1.407 2.003 2.134.752.726 1.53 1.446 2.14 2.068.608.622 1.042 1.21 1.096 1.37.053.163.055.883-.063 1.735-.118.853-.314 1.88-.485 2.9-.17 1.02-.317 2.028-.337 2.878-.01.425.01.81.09 1.156.08.347.224.683.535.903.31.22.67.247 1.03.215.356-.032.734-.13 1.143-.27.82-.282 1.754-.73 2.694-1.204.94-.473 1.883-.97 2.677-1.344.795-.374 1.497-.6 1.686-.6.19 0 .89.226 1.686.6.794.374 1.737.87 2.677 1.344.94.473 1.875.922 2.694 1.203.41.14.787.24 1.144.27.36.033.72.006 1.03-.214.31-.22.455-.556.536-.902.08-.345.1-.73.09-1.155-.02-.85-.168-1.858-.338-2.877-.17-1.02-.367-2.048-.485-2.9-.118-.853-.116-1.573-.062-1.735.055-.162.49-.75 1.098-1.37.61-.623 1.387-1.343 2.14-2.07.75-.726 1.476-1.458 2.003-2.132.265-.336.48-.658.624-.984.143-.325.23-.68.11-1.042-.12-.363-.402-.596-.712-.776-.31-.18-.676-.316-1.09-.437-.832-.242-1.858-.415-2.904-.572-1.045-.156-2.108-.295-2.976-.45-.87-.153-1.572-.376-1.72-.48-.15-.107-.58-.687-1-1.445-.417-.757-.88-1.702-1.356-2.625-.476-.922-.963-1.82-1.457-2.52-.25-.348-.496-.65-.767-.882C15.693 1.184 15.38 1 15 1zm.313 1.176c.17.146.38.39.6.7.436.617.914 1.49 1.384 2.4.47.91.933 1.858 1.37 2.65.435.79.786 1.417 1.294 1.777.51.36 1.223.49 2.128.65.905.16 1.97.3 3.002.454 1.032.154 2.032.33 2.77.545.37.107.674.227.87.34.31.138.27.384.188.552-.09.203-.26.473-.494.772-.467.597-1.17 1.312-1.912 2.03-.742.716-1.523 1.438-2.158 2.087-.636.65-1.136 1.162-1.333 1.754-.196.592-.1 1.298.023 2.19.124.89.32 1.922.488 2.927.17 1.005.307 1.987.325 2.736.01.375-.012.692-.062.906-.083.354-.293.354-.502.346-.228-.02-.545-.096-.91-.22-.727-.25-1.64-.684-2.567-1.15-.928-.468-1.873-.97-2.702-1.358-.827-.39-1.487-.694-2.11-.694-.623 0-1.283.304-2.11.694-.83.39-1.775.89-2.703 1.357-.927.468-1.84.902-2.568 1.15-.365.126-.682.202-.91.222-.315.008-.433-.11-.503-.346-.05-.214-.072-.53-.062-.906.018-.75.156-1.73.324-2.736.167-1.005.363-2.037.487-2.928.124-.89.22-1.597.022-2.19-.198-.59-.698-1.104-1.334-1.753-.635-.65-1.416-1.37-2.158-2.088-.74-.717-1.445-1.432-1.912-2.03-.233-.298-.405-.568-.494-.77-.127-.245.017-.453.188-.552.196-.114.5-.234.87-.34.738-.217 1.738-.392 2.77-.546 1.032-.155 2.097-.293 3.002-.453.905-.16 1.62-.29 2.127-.65.507-.36.858-.987 1.294-1.778.436-.792.9-1.74 1.37-2.65.47-.91.947-1.783 1.384-2.4.22-.31.428-.554.6-.7.312-.26.452-.176.624 0z"/></svg>
  222. </a>
  223. <!--/About Me Link-->
  224.  
  225. <!--About Me Link-->
  226. <a href="/" title="Link">
  227. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 7c-.657 0-.657 1 0 1H22c3.887 0 7 3.113 7 7s-3.113 7-7 7h-2c-3.887 0-7-3.113-7-7v-.5c0-.672-1-.648-1 0v.5c0 4.423 3.577 8 8 8h2c4.423 0 8-3.577 8-8s-3.577-8-8-8zM8 7c-4.423 0-8 3.577-8 8s3.577 8 8 8h2.5c.665 0 .66-1 0-1H8c-3.887 0-7-3.113-7-7s3.113-7 7-7h2c3.887 0 7 3.113 7 7v.5c0 .676 1 .656 1 0V15c0-4.423-3.577-8-8-8z"/></svg>
  228. </a>
  229. <!--/About Me Link-->
  230.  
  231. <!--About Me Link-->
  232. <a href="/" title="Link">
  233. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M7.975 2c-2.235.116-4.365 1.203-5.82 2.89C.7 6.57 0 8.786 0 11c0 1.938.697 3.816 1.646 5.46.95 1.644 2.19 3.077 3.5 4.394 2.824 2.833 6.08 5.232 9.622 7.09.145.076.32.076.464 0 3.543-1.858 6.798-4.257 9.622-7.09 1.31-1.317 2.55-2.75 3.5-4.393C29.304 14.817 30 12.94 30 11c0-2.22-.7-4.428-2.154-6.11C26.39 3.202 24.26 2.115 22.026 2c-1.516-.078-3.045.286-4.362 1.04-1.097.626-1.975 1.558-2.664 2.614-.69-1.056-1.567-1.988-2.664-2.615C11.02 2.285 9.49 1.92 7.976 2zm.05 1c1.32-.068 2.665.25 3.813.906 1.148.656 2.107 1.652 2.72 2.824.186.36.698.36.885 0 .612-1.172 1.57-2.168 2.72-2.824 1.147-.656 2.49-.974 3.812-.906 1.942.1 3.837 1.062 5.115 2.54C28.37 7.023 29 9 29 11c0 1.73-.628 3.43-1.512 4.96-.885 1.535-2.064 2.904-3.342 4.186-2.686 2.697-5.788 4.975-9.146 6.766-3.358-1.79-6.46-4.07-9.146-6.766-1.278-1.282-2.457-2.65-3.342-4.185C1.628 14.43 1 12.73 1 11c0-2 .63-3.978 1.91-5.46C4.188 4.063 6.083 3.1 8.025 3z"/></svg>
  234. </a>
  235. <!--/About Me Link-->
  236.  
  237. </nav>
  238.  
  239. </article>
  240. </div>
  241.  
  242. <footer>
  243. <div>Theme by <a href="https://antoniosvivaldi.tumblr.com" class="a-link">antoniosvivaldi</a></div>
  244. </footer>
  245.  
  246. </section>
  247. <!--/Posts and hero image-->
  248.  
  249. <!--FAQ + Info-->
  250. <section class="tabs"id="tab2">
  251.  
  252.  
  253. <div class="faq_cont">
  254. <article class="faqstuff fask">
  255. <h1>FAQ</h1>
  256.  
  257. <div>
  258.  
  259. <!--Question + Answer 1-->
  260. <p class="tabq">This is a question?</p>
  261.  
  262. <p class="taba">This is an answer.</p>
  263.  
  264. <!--Question + Answer 2-->
  265. <p class="tabq">This is a question?</p>
  266.  
  267. <p class="taba">This is an answer.</p>
  268.  
  269. <!--Question + Answer 3-->
  270. <p class="tabq">This is a question?</p>
  271.  
  272. <p class="taba">This is an answer.</p>
  273.  
  274. <h2>{AskLabel}</h2>
  275. <p>
  276.  
  277. <iframe frameborder="0" scrolling="no" width="100%" height="320px" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>
  278.  
  279. </p>
  280. </div>
  281.  
  282. </article>
  283. <article class="faqstuff faqbg"></article>
  284. </div>
  285.  
  286. </section>
  287. <!--/FAQ + Info-->
  288.  
  289. <!--Navi-->
  290. <section class="tabs"id="tab3">
  291. <h1>Navigation</h1>
  292.  
  293. <div class="navi_cont">
  294.  
  295. <!--Navigation category-->
  296. <div class="navi_box">
  297. <!--Rename category if you want-->
  298. <h2>Category 1</h2>
  299. <ul>
  300. <!--links-->
  301. <li><a class="a-link"href="/">link</a></li>
  302. <li><a class="a-link"href="/">link</a></li>
  303. <li><a class="a-link"href="/">link</a></li>
  304. <li><a class="a-link"href="/">link</a></li>
  305. </ul>
  306. </div>
  307. <!--/Navigation category-->
  308.  
  309.  
  310. <!--Navigation category-->
  311. <div class="navi_box">
  312. <!--Rename category if you want-->
  313. <h2>Category 2</h2>
  314. <ul>
  315. <!--links-->
  316. <li><a class="a-link"href="/">link</a></li>
  317. <li><a class="a-link"href="/">link</a></li>
  318. <li><a class="a-link"href="/">link</a></li>
  319. <li><a class="a-link"href="/">link</a></li>
  320. </ul>
  321. </div>
  322. <!--/Navigation category-->
  323.  
  324. <!--Navigation category-->
  325. <div class="navi_box">
  326. <!--Rename category if you want-->
  327. <h2>Category 3</h2>
  328. <ul>
  329. <!--links-->
  330. <li><a class="a-link"href="/">link</a></li>
  331. <li><a class="a-link"href="/">link</a></li>
  332. <li><a class="a-link"href="/">link</a></li>
  333. <li><a class="a-link"href="/">link</a></li>
  334. </ul>
  335. </div>
  336. <!--/Navigation category-->
  337.  
  338. <!--Navigation category-->
  339. <div class="navi_box">
  340. <!--Rename category if you want-->
  341. <h2>Category 4</h2>
  342. <ul>
  343. <!--links-->
  344. <li><a class="a-link"href="/">link</a></li>
  345. <li><a class="a-link"href="/">link</a></li>
  346. <li><a class="a-link"href="/">link</a></li>
  347. <li><a class="a-link"href="/">link</a></li>
  348. </ul>
  349. </div>
  350. <!--/Navigation category-->
  351.  
  352. <!--Navigation category-->
  353. <div class="navi_box">
  354. <!--Rename category if you want-->
  355. <h2>Category 5</h2>
  356. <ul>
  357. <!--links-->
  358. <li><a class="a-link"href="/">link</a></li>
  359. <li><a class="a-link"href="/">link</a></li>
  360. <li><a class="a-link"href="/">link</a></li>
  361. <li><a class="a-link"href="/">link</a></li>
  362. </ul>
  363. </div>
  364. <!--/Navigation category-->
  365.  
  366. <!--Navigation category-->
  367. <div class="navi_box">
  368. <!--Rename category if you want-->
  369. <h2>Category 6</h2>
  370. <ul>
  371. <!--links-->
  372. <li><a class="a-link"href="/">link</a></li>
  373. <li><a class="a-link"href="/">link</a></li>
  374. <li><a class="a-link"href="/">link</a></li>
  375. <li><a class="a-link"href="/">link</a></li>
  376. </ul>
  377. </div>
  378. <!--/Navigation category-->
  379.  
  380. </div>
  381.  
  382. </section>
  383. <!--/Navi-->
  384.  
  385.  
  386.  
  387. <!--Blogroll-->
  388. <section class="tabs"id="tab4">
  389. <h1>Blogroll</h1>
  390.  
  391. <div class="broll_cont">
  392.  
  393.  
  394. <!--Static blogroll: copy / paste the following div to add more users. Texts to add in include link to a blog and etc.-->
  395.  
  396. <!--one user-->
  397. <div class="followed_user">
  398. <div class="followed_img">
  399. <div>
  400. <img src="https://64.media.tumblr.com/e2da596a623fa7093789bbba06585057/f5a516df81d7d77b-58/s128x128u_c1/e0950fadc15b3ca1052540c8c4ace900597acbb7.png">
  401. </div>
  402. </div>
  403. <div class="followed_txt">
  404. <span>
  405. <b><a class="a-link" href="#">Blog URL</a></b><br>
  406. Blog Title
  407. </span>
  408. </div>
  409. </div>
  410. <!--/one user-->
  411.  
  412.  
  413.  
  414.  
  415. <!--to here-->
  416.  
  417.  
  418.  
  419.  
  420. </div>
  421.  
  422. </section>
  423. <!--/Blogroll-->
  424.  
  425.  
  426.  
  427.  
  428. </div>
  429. </main>
  430.  
  431.  
  432. <!--Please do not alter the credit!-->
  433. <div id="athena_wrapper">
  434. <a class="a-link" href="https://antoniosvivaldi.tumblr.com"><span>thm</span></a>
  435. </div>
  436. <!--/credit-->
  437.  
  438. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  439. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
  440. <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  441.  
  442. <script>
  443. /**
  444. * main.js
  445. * http://www.codrops.com
  446. *
  447. * Licensed under the MIT license.
  448. * http://www.opensource.org/licenses/mit-license.php
  449. *
  450. * Copyright 2016, Codrops
  451. * http://www.codrops.com
  452. */
  453. ;(function(window) {
  454.  
  455. 'use strict';
  456.  
  457. // Helper vars and functions.
  458. function extend( a, b ) {
  459. for( var key in b ) {
  460. if( b.hasOwnProperty( key ) ) {
  461. a[key] = b[key];
  462. }
  463. }
  464. return a;
  465. }
  466.  
  467. // from http://www.quirksmode.org/js/events_properties.html#position
  468. function getMousePos(e) {
  469. var posx = 0, posy = 0;
  470. if (!e) var e = window.event;
  471. if (e.pageX || e.pageY) {
  472. posx = e.pageX;
  473. posy = e.pageY;
  474. }
  475. else if (e.clientX || e.clientY) {
  476. posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  477. posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  478. }
  479. return { x : posx, y : posy }
  480. }
  481.  
  482. /**
  483. * TiltFx obj.
  484. */
  485. function TiltFx(el, options) {
  486. this.DOM = {};
  487. this.DOM.el = el;
  488. this.options = extend({}, this.options);
  489. extend(this.options, options);
  490. this._init();
  491. }
  492.  
  493. TiltFx.prototype.options = {
  494. movement: {
  495. imgWrapper : {
  496. translation : {x: 0, y: 0, z: 0},
  497. rotation : {x: -5, y: 5, z: 0},
  498. reverseAnimation : {
  499. duration : 1200,
  500. easing : 'easeOutElastic',
  501. elasticity : 600
  502. }
  503. },
  504. lines : {
  505. translation : {x: 10, y: 10, z: [0,10]},
  506. reverseAnimation : {
  507. duration : 1000,
  508. easing : 'easeOutExpo',
  509. elasticity : 600
  510. }
  511. },
  512. caption : {
  513. translation : {x: 20, y: 20, z: 0},
  514. rotation : {x: 0, y: 0, z: 0},
  515. reverseAnimation : {
  516. duration : 1500,
  517. easing : 'easeOutElastic',
  518. elasticity : 600
  519. }
  520. },
  521. /*
  522. overlay : {
  523. translation : {x: 10, y: 10, z: [0,50]},
  524. reverseAnimation : {
  525. duration : 500,
  526. easing : 'easeOutExpo'
  527. }
  528. },
  529. */
  530. shine : {
  531. translation : {x: 50, y: 50, z: 0},
  532. reverseAnimation : {
  533. duration : 1200,
  534. easing : 'easeOutElastic',
  535. elasticity: 600
  536. }
  537. }
  538. }
  539. };
  540.  
  541. /**
  542. * Init.
  543. */
  544. TiltFx.prototype._init = function() {
  545. this.DOM.animatable = {};
  546. this.DOM.animatable.imgWrapper = this.DOM.el.querySelector('.tilter__figure');
  547. this.DOM.animatable.lines = this.DOM.el.querySelector('.tilter__deco--lines');
  548. this.DOM.animatable.caption = this.DOM.el.querySelector('.tilter__caption');
  549. this.DOM.animatable.overlay = this.DOM.el.querySelector('.tilter__deco--overlay');
  550. this.DOM.animatable.shine = this.DOM.el.querySelector('.tilter__deco--shine > div');
  551. this._initEvents();
  552. };
  553.  
  554. /**
  555. * Init/Bind events.
  556. */
  557. TiltFx.prototype._initEvents = function() {
  558. var self = this;
  559.  
  560. this.mouseenterFn = function() {
  561. for(var key in self.DOM.animatable) {
  562. anime.remove(self.DOM.animatable[key]);
  563. }
  564. };
  565.  
  566. this.mousemoveFn = function(ev) {
  567. requestAnimationFrame(function() { self._layout(ev); });
  568. };
  569.  
  570. this.mouseleaveFn = function(ev) {
  571. requestAnimationFrame(function() {
  572. for(var key in self.DOM.animatable) {
  573. if( self.options.movement[key] == undefined ) {continue;}
  574. anime({
  575. targets: self.DOM.animatable[key],
  576. duration: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.duration || 0 : 1,
  577. easing: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.easing || 'linear' : 'linear',
  578. elasticity: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.elasticity || null : null,
  579. scaleX: 1,
  580. scaleY: 1,
  581. scaleZ: 1,
  582. translateX: 0,
  583. translateY: 0,
  584. translateZ: 0,
  585. rotateX: 0,
  586. rotateY: 0,
  587. rotateZ: 0
  588. });
  589. }
  590. });
  591. };
  592.  
  593. this.DOM.el.addEventListener('mousemove', this.mousemoveFn);
  594. this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
  595. this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
  596. };
  597.  
  598. TiltFx.prototype._layout = function(ev) {
  599. // Mouse position relative to the document.
  600. var mousepos = getMousePos(ev),
  601. // Document scrolls.
  602. docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop},
  603. bounds = this.DOM.el.getBoundingClientRect(),
  604. // Mouse position relative to the main element (this.DOM.el).
  605. relmousepos = { x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top };
  606.  
  607. // Movement settings for the animatable elements.
  608. for(var key in this.DOM.animatable) {
  609. if( this.DOM.animatable[key] == undefined || this.options.movement[key] == undefined ) {
  610. continue;
  611. }
  612. var t = this.options.movement[key] != undefined ? this.options.movement[key].translation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  613. r = this.options.movement[key] != undefined ? this.options.movement[key].rotation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  614. setRange = function (obj) {
  615. for(var k in obj) {
  616. if( obj[k] == undefined ) {
  617. obj[k] = [0,0];
  618. }
  619. else if( typeof obj[k] === 'number' ) {
  620. obj[k] = [-1*obj[k],obj[k]];
  621. }
  622. }
  623. };
  624.  
  625. setRange(t);
  626. setRange(r);
  627.  
  628. var transforms = {
  629. translation : {
  630. x: (t.x[1]-t.x[0])/bounds.width*relmousepos.x + t.x[0],
  631. y: (t.y[1]-t.y[0])/bounds.height*relmousepos.y + t.y[0],
  632. z: (t.z[1]-t.z[0])/bounds.height*relmousepos.y + t.z[0],
  633. },
  634. rotation : {
  635. x: (r.x[1]-r.x[0])/bounds.height*relmousepos.y + r.x[0],
  636. y: (r.y[1]-r.y[0])/bounds.width*relmousepos.x + r.y[0],
  637. z: (r.z[1]-r.z[0])/bounds.width*relmousepos.x + r.z[0]
  638. }
  639. };
  640.  
  641. this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[key].style.transform = 'translateX(' + transforms.translation.x + 'px) translateY(' + transforms.translation.y + 'px) translateZ(' + transforms.translation.z + 'px) rotateX(' + transforms.rotation.x + 'deg) rotateY(' + transforms.rotation.y + 'deg) rotateZ(' + transforms.rotation.z + 'deg)';
  642. }
  643. };
  644.  
  645. window.TiltFx = TiltFx;
  646.  
  647. })(window);
  648. </script>
  649. <script>
  650. (function() {
  651. var tiltSettings = [
  652. {
  653. movement: {
  654. imgWrapper : {
  655. rotation : {x: -5, y: 10, z: 0},
  656. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  657. },
  658. caption : {
  659. translation : {x: 20, y: 20, z: 0},
  660. reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
  661. },
  662. overlay : {
  663. translation : {x: 5, y: -5, z: 0},
  664. rotation : {x: 0, y: 0, z: 6},
  665. reverseAnimation : {duration : 1000, easing : 'easeOutQuad'}
  666. },
  667. shine : {
  668. translation : {x: 50, y: 50, z: 0},
  669. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  670. }
  671. }
  672. },{}];
  673.  
  674. function init() {
  675. var idx = 0;
  676. [].slice.call(document.querySelectorAll('a.tilter')).forEach(function(el, pos) {
  677. idx = pos%2 === 0 ? idx+1 : idx;
  678. new TiltFx(el, tiltSettings[idx-1]);
  679. });
  680. }
  681.  
  682. // Preload all images.
  683. imagesLoaded(document.querySelector('main'), function() {
  684. document.body.classList.remove('loading');
  685. init();
  686. });
  687.  
  688.  
  689. })();
  690. </script>
  691.  
  692.  
  693.  
  694. <!-- animsition.js -->
  695. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  696.  
  697.  
  698. <script>
  699. $(document).ready(function() {
  700.  
  701. $(".animsition").animsition({
  702. inClass: 'fade-in',
  703. outClass: 'fade-out',
  704. inDuration: 1500,
  705. outDuration: 800,
  706. linkElement: '.a-link',
  707. loading: true,
  708. loadingParentElement: 'body',
  709. loadingClass: 'animsition-loading',
  710. loadingInner: '',
  711. timeout: true,
  712. timeoutCountdown: 3000,
  713. onLoadEvent: true,
  714. browser: [ 'animation-duration', '-webkit-animation-duration'],
  715. overlay : false,
  716. overlayClass : 'animsition-overlay-slide',
  717. overlayParentElement : 'body',
  718. transition: function(url){ window.location.href = url; }
  719. });
  720.  
  721.  
  722. });
  723.  
  724. </script>
  725.  
  726.  
  727. <script>
  728. (function ( $ ) {
  729. $.fn.responsify = function() {
  730. return this.each(function() {
  731. var owdith, oheight,
  732. twidth, theight,
  733. fx, fy,
  734. width, height, top, left;
  735.  
  736. owidth = $('img', this).width();
  737. oheight = $('img', this).height();
  738. twidth = $(this).width();
  739. theight = $(this).height();
  740. fx = $('img', this).attr('data-focus-x');
  741. fy = $('img', this).attr('data-focus-y');
  742.  
  743. if( owidth/oheight > twidth/theight ) {
  744. height = theight;
  745. width = theight*owidth/oheight;
  746. var fleft = Number(fx) * width;
  747. var fright = width - Number(fx) * width;
  748. if (fleft < twidth/2) {
  749. left = 0;
  750. }
  751. else if (fleft >= twidth/2 && fright >= twidth/2) {
  752. left = twidth/2 - fleft;
  753. }
  754. else if (fleft >= twidth/2 && fright < twidth/2) {
  755. left = twidth - width;
  756. }
  757. top = 0;
  758. }
  759. else if( owidth/oheight <= twidth/theight ) {
  760. width = twidth;
  761. height = twidth*oheight/owidth;
  762. var ftop = Number(fy) * height;
  763. var fbottom = height - Number(fy) * height;
  764. if (ftop < theight/2) {
  765. top = 0;
  766. }
  767. else if (ftop >= theight/2 && fbottom >= theight/2) {
  768. top = theight/2 - ftop;
  769. }
  770. else if (ftop >= theight/2 && fbottom < theight/2) {
  771. top = theight - height;
  772. }
  773. left = 0;
  774. }
  775. $(this).css({
  776. "overflow": "hidden"
  777. })
  778. $('img', this).css({
  779. "position": "relative",
  780. "height": height,
  781. "width": width,
  782. "left": left,
  783. "top": top
  784. })
  785. });
  786. };
  787. }( jQuery ));
  788.  
  789.  
  790. $(window).resize(function(){
  791. $('.abtimg').responsify();
  792. })
  793.  
  794. $(document).ready(function(){
  795. $(window).load(function() {
  796. $('.abtimg').responsify();
  797. });
  798. });
  799.  
  800.  
  801. </script>
  802.  
  803.  
  804. <script>
  805. // TABS SHORTCODE
  806.  
  807. $(function(e) {
  808.  
  809. $('.tabs').hide().filter(':first').show();
  810.  
  811. $('.tbnav a[data-tabs]').on('click', function () {
  812.  
  813. $(this).siblings().removeClass('active');
  814. $('.tabs').hide();
  815.  
  816. var tab = $(this).data('tabs');
  817. $(this).addClass('active');
  818. $('#' + tab).fadeIn().show()
  819. $(window).trigger('resize'); ;
  820. });
  821.  
  822.  
  823.  
  824.  
  825. $(".tbnav a").click(function(){
  826. var cur =$(".tbnav a").index(this);
  827. var elm = $('.tb:eq('+cur+')');
  828. elm.addClass("fadeIn");
  829. setTimeout(function() {
  830. elm.removeClass("fadeIn");
  831. $(window).trigger('resize');
  832. }, 220);
  833. });
  834.  
  835. });
  836.  
  837. </script>
  838.  
  839.  
  840.  
  841.  
  842. <!-- Uncomment this if you want to use alternating theme colours
  843.  
  844. <script>
  845.  
  846. (function($) {
  847.  
  848. var url, hour = new Date().getHours();
  849. if (hour > 18 || hour < 8) {
  850. jQuery('body').addClass('night-mode');
  851. } else {
  852. jQuery('body').addClass('day-mode');
  853. }
  854.  
  855. }(jQuery));
  856.  
  857.  
  858. </script>
  859.  
  860. -->
  861.  
  862. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  863.  
  864. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  865. jQuery.noConflict();
  866. (function($){
  867.  
  868. $(document).ready(function(){
  869.  
  870. $("a[title],img[title],[title]").style_my_tooltips({
  871.  
  872. tip_follows_cursor:true,
  873.  
  874. tip_delay_time:30,
  875.  
  876. tip_fade_speed:300,
  877.  
  878. attribute:"title"
  879.  
  880. });
  881.  
  882. });
  883.  
  884. })(jQuery);
  885. </script>
  886.  
  887. </body>
  888. </html>
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!