API tools faq
paste
hermionemessi

All-In-One Page: Barcelona

hermionemessi
Oct 18th, 2018 (edited)
1,966
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--ALL-IN-ONE Barcelona by liohnelmessi
  4.  
  5. © 2018 by liohnelmessi (an imprint of antoniosvivaldi / athenathms)
  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 http-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. <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Rosario:400,400i,700,700i" rel="stylesheet">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Tinos:700,700i" rel="stylesheet">
  30.  
  31. <link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
  34.  
  35. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  36.  
  37. <link rel="stylesheet" href="https://static.tumblr.com/hqib8pd/BOypgsxrl/aio_barcelona_main_style.css">
  38.  
  39. <style type="text/css">
  40.  
  41. /*Customisable sections*/
  42.  
  43. .sectstuff:not(.broll) a:hover {
  44. color:#BBD1E5; /*replace the hexcode to a different hexcode if you want*/
  45. border-bottom:1px solid #BBD1E5; /*this as well*/
  46. }
  47.  
  48. nav.soclinks a:hover .svg-icon {
  49. background: #BBD1E5; /*replace the hexcode to a different hexcode if you want*/
  50. }
  51.  
  52. section.infosect.current div.imgs, section.infosect.static div.imgs {
  53. -webkit-transform: translateY(0%);
  54. transform: translateY(0%);
  55. }
  56.  
  57.  
  58.  
  59. /*background images of each page section*/
  60. .abtimg {
  61. /*change the image URL here*/
  62. background-image: url('https://static.tumblr.com/4f2083dfe2681f5747ae38664c29d1e0/qp1dgt3/QL2pgsyjh/tumblr_static_1jxi4ekc2toko4cokgowoscw4.png');
  63.  
  64. /*change the position of the image*/
  65. background-position: 50% 50%;
  66. }
  67.  
  68. .faqimg {
  69. background-image: url('https://static.tumblr.com/fa6214a172394b401132aeb8b927e7e5/qp1dgt3/EQspgsyke/tumblr_static_93f73wyrfocgsksgc04ow40cs.png');
  70. background-position: 50% 50%;
  71. }
  72.  
  73. .naviimg {
  74. background-image: url('https://static.tumblr.com/07a31c1cbf61a84585d7b2594323cd21/qp1dgt3/36Spgsyls/tumblr_static_9rdemgd53qww80ogogko4wg0k.png');
  75. background-position: 50% 50%;
  76. }
  77.  
  78. .brollimg {
  79. background-image: url('https://static.tumblr.com/c605fa1433a59247713063fa8bc12807/qp1dgt3/oqcpgsyn6/tumblr_static_4art831mk6qskgksgook4ckss.png');
  80. background-position: 50% 50%;
  81. }
  82.  
  83.  
  84.  
  85. /*tabbed navi buttons
  86.  
  87. Note: To preserve transparency on the buttons, choose your colour's hexcode and convert it to RGB values under this site
  88.  
  89. https://htmlcolorcodes.com
  90.  
  91. e.g. #000 at 100% opacity -> rgba(0,0,0,1.0)
  92.  
  93. */
  94.  
  95. #fp-nav ul li .fp-tooltip {
  96. color: #fff;
  97. background:rgba(255,255,255,0.3);
  98. }
  99.  
  100. @media screen and (max-width: 960px) {
  101.  
  102. #fp-nav ul li .fp-tooltip {background:rgba(100,100,100,0.3);}
  103. }
  104.  
  105. #fp-nav ul li:hover .fp-tooltip,
  106. #fp-nav a.active + .fp-tooltip {
  107. background: rgba(187, 209, 229, 0.8);
  108.  
  109. }
  110.  
  111. </style>
  112.  
  113. </head>
  114. <body class="animsition">
  115. <!--main container-->
  116. <main>
  117.  
  118. <!--About Me section-->
  119. <section class="infosect current static">
  120.  
  121. <!--abt section image-->
  122. <div class="imgs abtimg"></div>
  123. <!--/abt section image-->
  124.  
  125.  
  126. <!--abt section texts-->
  127. <article class="texts">
  128. <h1>About</h1>
  129.  
  130. <!--About Me main text-->
  131. <div class="sectstuff">
  132.  
  133. <!--basic info box-->
  134. <div class="abtbox">
  135.  
  136. <!--profile picture-->
  137. <div class="profil"><img src="https://i.imgur.com/sBCAxLc.png"></div>
  138. <!--/profile picture-->
  139.  
  140. <!--basic info description-->
  141. <div class="profdesc">
  142.  
  143. <!--Edit subheading here-->
  144. <h2>Name, Age, Country, MBTI</h2>
  145. <!--/to here-->
  146.  
  147. <!--a paragraph of description-->
  148. <p class="qt">
  149. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  150. </p>
  151. <!--to here-->
  152.  
  153.  
  154. <!--about me links-->
  155. <nav class="soclinks">
  156.  
  157. <!--home link-->
  158. <a href="/"class="a-link" title="refresh">
  159. <svg class="svg-icon" viewBox="0 0 20 20">
  160. <path d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"></path>
  161. </svg>
  162. </a>
  163. <!--/home link-->
  164.  
  165. {block:AskEnabled}
  166. <!--ask link-->
  167. <a href="/ask"class="a-link"title="ask">
  168. <svg class="svg-icon" viewBox="0 0 20 20">
  169. <path d="M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z"></path>
  170. </svg>
  171. </a>
  172. <!--/ask link-->
  173. {/block:AskEnabled}
  174.  
  175.  
  176.  
  177. <!--a link: to change the URL just edit the thing inside the "href" attribute-->
  178. <a href="/"class="a-link" title="a link">
  179. <svg class="svg-icon" viewBox="0 0 20 20">
  180. <path d="M16.469,8.924l-2.414,2.413c-0.156,0.156-0.408,0.156-0.564,0c-0.156-0.155-0.156-0.408,0-0.563l2.414-2.414c1.175-1.175,1.175-3.087,0-4.262c-0.57-0.569-1.326-0.883-2.132-0.883s-1.562,0.313-2.132,0.883L9.227,6.511c-1.175,1.175-1.175,3.087,0,4.263c0.288,0.288,0.624,0.511,0.997,0.662c0.204,0.083,0.303,0.315,0.22,0.52c-0.171,0.422-0.643,0.17-0.52,0.22c-0.473-0.191-0.898-0.474-1.262-0.838c-1.487-1.485-1.487-3.904,0-5.391l2.414-2.413c0.72-0.72,1.678-1.117,2.696-1.117s1.976,0.396,2.696,1.117C17.955,5.02,17.955,7.438,16.469,8.924 M10.076,7.825c-0.205-0.083-0.437,0.016-0.52,0.22c-0.083,0.205,0.016,0.437,0.22,0.52c0.374,0.151,0.709,0.374,0.997,0.662c1.176,1.176,1.176,3.088,0,4.263l-2.414,2.413c-0.569,0.569-1.326,0.883-2.131,0.883s-1.562-0.313-2.132-0.883c-1.175-1.175-1.175-3.087,0-4.262L6.51,9.227c0.156-0.155,0.156-0.408,0-0.564c-0.156-0.156-0.408-0.156-0.564,0l-2.414,2.414c-1.487,1.485-1.487,3.904,0,5.391c0.72,0.72,1.678,1.116,2.696,1.116s1.976-0.396,2.696-1.116l2.414-2.413c1.487-1.486,1.487-3.905,0-5.392C10.974,8.298,10.55,8.017,10.076,7.825"></path>
  181. </svg>
  182. </a>
  183. <!--/a link-->
  184.  
  185. <!--a link: to change the URL just edit the thing inside the "href" attribute-->
  186. <a href="/"class="a-link" title="a link">
  187. <svg class="svg-icon" viewBox="0 0 20 20">
  188. <path d="M14.68,12.621c-0.9,0-1.702,0.43-2.216,1.09l-4.549-2.637c0.284-0.691,0.284-1.457,0-2.146l4.549-2.638c0.514,0.661,1.315,1.09,2.216,1.09c1.549,0,2.809-1.26,2.809-2.808c0-1.548-1.26-2.809-2.809-2.809c-1.548,0-2.808,1.26-2.808,2.809c0,0.38,0.076,0.741,0.214,1.073l-4.55,2.638c-0.515-0.661-1.316-1.09-2.217-1.09c-1.548,0-2.808,1.26-2.808,2.809s1.26,2.808,2.808,2.808c0.9,0,1.702-0.43,2.217-1.09l4.55,2.637c-0.138,0.332-0.214,0.693-0.214,1.074c0,1.549,1.26,2.809,2.808,2.809c1.549,0,2.809-1.26,2.809-2.809S16.229,12.621,14.68,12.621M14.68,2.512c1.136,0,2.06,0.923,2.06,2.06S15.815,6.63,14.68,6.63s-2.059-0.923-2.059-2.059S13.544,2.512,14.68,2.512M5.319,12.061c-1.136,0-2.06-0.924-2.06-2.06s0.923-2.059,2.06-2.059c1.135,0,2.06,0.923,2.06,2.059S6.454,12.061,5.319,12.061M14.68,17.488c-1.136,0-2.059-0.922-2.059-2.059s0.923-2.061,2.059-2.061s2.06,0.924,2.06,2.061S15.815,17.488,14.68,17.488"></path>
  189. </svg>
  190. </a>
  191. <!--/a link-->
  192. </nav>
  193. <!--/about me links-->
  194. </div>
  195. <!--/basic info description-->
  196. </div>
  197. <!--/basic info box-->
  198.  
  199. <!--Write your longer About Me here-->
  200.  
  201. <!--subheading-->
  202. <h2>Section 1</h2>
  203. <!--/subheading-->
  204.  
  205. <!--regular paragraph-->
  206. <p>
  207. 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.
  208. </p>
  209. <!--/regular paragraph-->
  210.  
  211. <!--for quotes-->
  212. <p class="maintxt qt">
  213. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  214. </p>
  215. <!--/for quotes-->
  216.  
  217. <!--subheading-->
  218. <h2>Section 2</h2>
  219. <!--/subheading-->
  220.  
  221. <!--regular paragraph-->
  222. <p>
  223. 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.
  224. </p>
  225. <!--/regular paragraph-->
  226.  
  227. <!--for quotes-->
  228. <p class="maintxt qt">
  229. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  230. </p>
  231. <!--/for quotes-->
  232.  
  233. <!--End of longer about me-->
  234. </div>
  235. <!--/About Me main text-->
  236. </article>
  237. <!--/abt section texts-->
  238. </section>
  239. <!--/About Me section-->
  240.  
  241.  
  242. <!--FAQ section-->
  243. <section class="infosect">
  244.  
  245. <!--FAQ section image-->
  246. <div class="imgs faqimg"></div>
  247. <!--/FAQ section image-->
  248.  
  249. <!--faq section texts-->
  250. <article class="texts">
  251. <h1>FAQ</h1>
  252.  
  253.  
  254. <!--FAQ section main text-->
  255. <div class="sectstuff">
  256.  
  257. <!--Q+A-->
  258. <!--Question-->
  259. <p class="faq_q">This is a question?</p>
  260. <!--/Question-->
  261.  
  262. <!--Answer-->
  263. <p class="faq_a">This is an answer.</p>
  264. <!--/Answer-->
  265. <!--/Q+A-->
  266.  
  267.  
  268. <!--Q+A-->
  269. <!--Question-->
  270. <p class="faq_q">This is a question?</p>
  271. <!--/Question-->
  272.  
  273. <!--Answer-->
  274. <p class="faq_a">This is an answer.</p>
  275. <!--/Answer-->
  276. <!--/Q+A-->
  277.  
  278. <!--Q+A-->
  279. <!--Question-->
  280. <p class="faq_q">This is a question?</p>
  281. <!--/Question-->
  282.  
  283. <!--Answer-->
  284. <p class="faq_a">This is an answer.</p>
  285. <!--/Answer-->
  286. <!--/Q+A-->
  287.  
  288.  
  289. <!--add more Q+As here if necessarily-->
  290.  
  291.  
  292. {block:askenabled}
  293. <!--Askbox-->
  294. <iframe frameborder="0" scrolling="no" width="100%" height="190px" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>
  295. <!--/Askbox-->
  296. {/block:askenabled}
  297.  
  298.  
  299. </div>
  300. <!--/FAQ section main text-->
  301. </article>
  302. <!--/faq section texts-->
  303. </section>
  304. <!--/FAQ section-->
  305.  
  306.  
  307. <!--Navigation Section-->
  308. <section class="infosect">
  309.  
  310. <!--Navigation Section image-->
  311. <div class="imgs naviimg"></div>
  312. <!--/Navigation Section image-->
  313.  
  314.  
  315. <article class="texts">
  316. <h1>Navigation</h1>
  317.  
  318. <div class="sectstuff navisect">
  319.  
  320. <!--navi block-->
  321. <div class="navi-tag-box">
  322. <!--navi block heading-->
  323. <h6>Heading</h6>
  324. <!--/navi block heading-->
  325.  
  326. <!--Tags-->
  327. <ul>
  328. <!--tag link: for links inside your blog, e.g just add "page" so that the href attribute reads "/page". For links OUTSIDE of your blog, you need the full HTML URL.-->
  329. <li><a href="/">Link</a></li>
  330. <!--/tag link-->
  331.  
  332. <li><a href="/">Link</a></li>
  333. <li><a href="/">Link</a></li>
  334. <li><a href="/">Link</a></li>
  335. <li><a href="/">Link</a></li>
  336. <li><a href="/">Link</a></li>
  337.  
  338. <!--To add more tags just add more <li></liL> -->
  339. </ul>
  340. <!--/Tags-->
  341. </div>
  342. <!--/navi block-->
  343.  
  344.  
  345. <!--navi block-->
  346. <div class="navi-tag-box">
  347. <!--navi block heading-->
  348. <h6>Heading</h6>
  349. <!--/navi block heading-->
  350.  
  351. <!--Tags-->
  352. <ul>
  353. <!--tag link-->
  354. <li><a href="#">Link</a></li>
  355. <!--/tag link-->
  356.  
  357. <li><a href="#">Link</a></li>
  358. <li><a href="#">Link</a></li>
  359. <li><a href="#">Link</a></li>
  360. <li><a href="#">Link</a></li>
  361. <li><a href="#">Link</a></li>
  362.  
  363. <!--To add more tags just add more <li></liL> -->
  364. </ul>
  365. <!--/Tags-->
  366. </div>
  367. <!--/navi block-->
  368.  
  369.  
  370. <!--navi block-->
  371. <div class="navi-tag-box">
  372. <!--navi block heading-->
  373. <h6>Heading</h6>
  374. <!--/navi block heading-->
  375.  
  376. <!--Tags-->
  377. <ul>
  378. <!--tag link-->
  379. <li><a href="#">Link</a></li>
  380. <!--/tag link-->
  381.  
  382. <li><a href="#">Link</a></li>
  383. <li><a href="#">Link</a></li>
  384. <li><a href="#">Link</a></li>
  385. <li><a href="#">Link</a></li>
  386. <li><a href="#">Link</a></li>
  387.  
  388. <!--To add more tags just add more <li></liL> -->
  389. </ul>
  390. <!--/Tags-->
  391. </div>
  392. <!--/navi block-->
  393.  
  394.  
  395. <!--navi block-->
  396. <div class="navi-tag-box">
  397. <!--navi block heading-->
  398. <h6>Heading</h6>
  399. <!--/navi block heading-->
  400.  
  401. <!--Tags-->
  402. <ul>
  403. <!--tag link-->
  404. <li><a href="#">Link</a></li>
  405. <!--/tag link-->
  406.  
  407. <li><a href="#">Link</a></li>
  408. <li><a href="#">Link</a></li>
  409. <li><a href="#">Link</a></li>
  410. <li><a href="#">Link</a></li>
  411. <li><a href="#">Link</a></li>
  412.  
  413. <!--To add more tags just add more <li></liL> -->
  414. </ul>
  415. <!--/Tags-->
  416. </div>
  417. <!--/navi block-->
  418.  
  419. <!--navi block-->
  420. <div class="navi-tag-box">
  421. <!--navi block heading-->
  422. <h6>Heading</h6>
  423. <!--/navi block heading-->
  424.  
  425. <!--Tags-->
  426. <ul>
  427. <!--tag link-->
  428. <li><a href="#">Link</a></li>
  429. <!--/tag link-->
  430.  
  431. <li><a href="#">Link</a></li>
  432. <li><a href="#">Link</a></li>
  433. <li><a href="#">Link</a></li>
  434. <li><a href="#">Link</a></li>
  435. <li><a href="#">Link</a></li>
  436.  
  437. <!--To add more tags just add more <li></liL> -->
  438. </ul>
  439. <!--/Tags-->
  440. </div>
  441. <!--/navi block-->
  442.  
  443. <!--navi block-->
  444. <div class="navi-tag-box">
  445. <!--navi block heading-->
  446. <h6>Heading</h6>
  447. <!--/navi block heading-->
  448.  
  449. <!--Tags-->
  450. <ul>
  451. <!--tag link-->
  452. <li><a href="#">Link</a></li>
  453. <!--/tag link-->
  454.  
  455. <li><a href="#">Link</a></li>
  456. <li><a href="#">Link</a></li>
  457. <li><a href="#">Link</a></li>
  458. <li><a href="#">Link</a></li>
  459. <li><a href="#">Link</a></li>
  460.  
  461. <!--To add more tags just add more <li></liL> -->
  462. </ul>
  463. <!--/Tags-->
  464. </div>
  465. <!--/navi block-->
  466.  
  467.  
  468.  
  469. </div>
  470. </article>
  471. </section>
  472. <!--/Navigation Section-->
  473.  
  474.  
  475. {block:following}
  476. <!--Blogroll Section-->
  477. <section class="infosect">
  478. <!--Blogroll Section image-->
  479. <div class="imgs brollimg"></div>
  480. <!--/Blogroll section image-->
  481.  
  482. <!--blogroll section contents-->
  483. <article class="texts">
  484. <h1>Blogroll</h1>
  485. <!--blogroll container-->
  486. <div class="broll sectstuff">
  487. {block:followed}
  488. <div class="followed">
  489. <a href="{FollowedURL}"title="{FollowedName}">
  490. <img src="{FollowedPortraitURL-128}">
  491. </a>
  492. </div>
  493. {/block:followed}
  494. </div>
  495. <!--/blogroll container-->
  496. </article>
  497. <!--/blogroll section contents-->
  498.  
  499. </section>
  500. <!--/Blogroll Section-->
  501. {/block:following}
  502.  
  503. </main>
  504. <!--/main container-->
  505.  
  506. <!--Don't mess with the credit-->
  507. <div class="creds">
  508. <figure>
  509. <figcaption>
  510. <p>
  511. <a href="https://liohnelmessi.tumblr.com" title="liohnelmessi">
  512. <span>T</span>
  513. <span>H</span>
  514. <span>M</span>
  515. </a>
  516. </p>
  517. </figcaption>
  518. </figure>
  519. </div>
  520. <!--Don't mess with the credit-->
  521.  
  522. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  523.  
  524. <script>
  525. var elems = document.querySelectorAll('.fp-tableCell');
  526. window.addEventListener('resize', function(e) {
  527. elems.forEach(function(elem){
  528. elem.clientHeight = window.innerHeight;
  529. });
  530. });
  531. </script>
  532.  
  533.  
  534. <!-- animsition.css -->
  535. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">
  536.  
  537. <!-- animsition.js -->
  538. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  539.  
  540.  
  541.  
  542. <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.js"></script>
  543.  
  544. <script>
  545. $(document).ready(function() {
  546.  
  547. $(".animsition").animsition({
  548. inClass: 'fade-in',
  549. outClass: 'fade-out',
  550. inDuration: 1500,
  551. outDuration: 800,
  552. linkElement: '.a-link',
  553. loading: true,
  554. loadingParentElement: 'body',
  555. loadingClass: 'animsition-loading',
  556. loadingInner: '',
  557. timeout: true,
  558. timeoutCountdown: 1800,
  559. onLoadEvent: true,
  560. browser: [ 'animation-duration', '-webkit-animation-duration'],
  561. overlay : false,
  562. overlayClass : 'animsition-overlay-slide',
  563. overlayParentElement : 'body',
  564. transition: function(url){ window.location.href = url; }
  565. });
  566.  
  567. $('main').fullpage({
  568. navigation: true,
  569. navigationPosition: 'left',
  570. navigationTooltips: ['About', 'FAQ', 'Links'{block:following} , 'Blogroll'{/block:following}],
  571. showActiveTooltip: true,
  572. slidesNavigation:true,
  573. autoScrolling: false,
  574. controlArrows:false,
  575. sectionSelector: '.infosect',
  576. showActiveTooltip: false
  577. });
  578.  
  579. });
  580.  
  581. </script>
  582.  
  583. <script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js'></script>
  584. <script>$(function () {
  585. $('section.infosect').viewportChecker({
  586. classToAdd: 'current',
  587. repeat: true,
  588. offset: '50%'
  589. });
  590. });
  591. </script>
  592.  
  593. <script src="https://static.tumblr.com/p0knose/nRYp3ktqo/jquery.style-my-tooltips.js"></script>
  594.  
  595. <script>
  596. $(document).ready(function(){
  597.  
  598. $("a[title],img[title],[title]").style_my_tooltips({
  599.  
  600. tip_follows_cursor:true,
  601.  
  602. tip_delay_time:30,
  603.  
  604. tip_fade_speed:300,
  605.  
  606. attribute:"title"
  607.  
  608. });
  609.  
  610. });
  611.  
  612. </script>
  613.  
  614. </body>
  615. </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!