API tools faq
paste
Advertisement
hermionemessi

Network 01

hermionemessi
May 27th, 2015
3,713
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <!--NETWORK 01 Otherness by hermionegrangcr (hermionejean.co.vu)
  5.  
  6. THEME BLOG: grangersdesigns (granger.cf)
  7.  
  8.  
  9. ♛ ♛ ♛
  10. ♛♛♛ ♛♛♛ ♛♛♛
  11. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  12. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  14. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr (hermionejean.co.vu)
  15.  
  16.  
  17. TERMS OF USE:
  18.  
  19. ♚ BASIC RULES (see http://hermionejean.co.vu/rules) APPLY
  20.  
  21. ♚ PLEASE RESPECT THEM IF USING! ANY FORMS OF THEFTS WILL BE HUNTED DOWN.
  22.  
  23. ♚ PLEASE DO NOT ALTER OR COVER THE CREDIT
  24.  
  25. ♚ FAILURE TO ABIDE TO THE RULES WILL LEAD TO AN IMMEDIATE BLOCK & REPORT & A PERMANENT PLACE ON HTTP://HERMIONEJEAN.CO.VU/WOS
  26.  
  27. NOTE: DO NOT RE-DISTRIBUTE THE SAMPLE PHOTOS IN THIS CODE!
  28.  
  29. THAT'S IT! ENJOY USING MY CODE AND DON'T BE AFRAID TO ASK ME IF YOU ENCOUNTER ANY PROBLEMS c:
  30.  
  31. -->
  32.  
  33. <title>{Title}</title>
  34.  
  35.  
  36. <link rel="shortcut icon" href="{Favicon}"/>
  37. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
  38. <link href='http://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
  39.  
  40. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  41.  
  42. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43.  
  44. <script>
  45.  
  46. (function($){
  47.  
  48. $(document).ready(function(){
  49.  
  50. $("a[title]").style_my_tooltips({
  51.  
  52. tip_follows_cursor:true,
  53.  
  54. tip_delay_time:30,
  55.  
  56. tip_fade_speed:300,
  57.  
  58. attribute:"title"
  59.  
  60. });
  61.  
  62. });
  63.  
  64. })(jQuery);
  65.  
  66. </script>
  67.  
  68.  
  69. <style type="text/css">
  70.  
  71. /*Scrollbar*/
  72. ::-webkit-scrollbar {width: 5px; height: 3px; background: #FFFFFF; }
  73.  
  74. ::-webkit-scrollbar-thumb { background-color: #000; }
  75.  
  76. /*Tooltip*/
  77. #s-m-t-tooltip{
  78. position:absolute;
  79. margin-top: 10px;
  80. z-index:9999999999;
  81. padding:5px;
  82. color:#fff;
  83. background:#000000;
  84. font-size:12px;
  85.  
  86. }
  87.  
  88. *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
  89. .clearfix:before, .clearfix:after { display: table; content: ''; }
  90. .clearfix:after { clear: both; }
  91.  
  92. body {
  93. background:#fff;
  94. color:#000;
  95. font-size:12px;
  96. font-family:'Lato', Arial, Sans-Serif;
  97. font-weight:normal;
  98. }
  99.  
  100. a {
  101. text-decoration:none;
  102. }
  103.  
  104. /*header*/
  105. .tete {
  106. width:100%;
  107. top: 0;
  108. left: 0;
  109. height:180px;
  110. z-index: 10000;
  111. position:fixed;
  112. color:#fff;
  113. background:#000; /*Colour of the header*/
  114. text-align:center;
  115. overflow: hidden;
  116. -webkit-transition: height 0.3s;
  117. -moz-transition: height 0.3s;
  118. transition: height 0.3s;
  119. }
  120.  
  121. .tete h1 {
  122. font-family:'Lato', Arial, Sans-Serif;
  123. position: relative;
  124. text-align:center;
  125. z-index: 1;
  126. font-size:3em;
  127. margin-top:50px;
  128. }
  129.  
  130. .tete.cheveux {
  131. height: 50px;
  132. }
  133.  
  134. .cheveux .blaugrana {
  135. margin-top:-115px;
  136. -webkit-transition: all 0.3s;
  137. -moz-transition: all 0.3s;
  138. transition: all 0.3s;
  139. }
  140.  
  141. /*hlinks*/
  142. nav a {
  143. position: relative;
  144. display: inline-block;
  145. margin: 35px auto 15px auto;
  146. outline: none;
  147. color: {color:accent1};
  148. text-decoration: none;
  149. text-transform: uppercase;
  150. letter-spacing: 1px;
  151. font-weight: 400;
  152. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  153. font-size: 2.5em;
  154. }
  155.  
  156. nav a:hover,
  157. nav a:focus {
  158. outline: none;
  159. }
  160.  
  161. .blaugrana {
  162. font-family:'Lato', Arial, Sans-Serif;
  163. font-weight:400;
  164. text-align:center;
  165. position: relative;
  166. margin: 5px auto;
  167. width: 560px;
  168. -webkit-transition: all 0.3s;
  169. -moz-transition: all 0.3s;
  170. transition: all 0.3s;
  171. }
  172.  
  173. .blaugrana a {
  174. color:#fff;
  175. font-size:16px;
  176. margin:15px;
  177. display:inline-block;
  178. }
  179.  
  180. .blaugrana a::after {
  181. position: absolute;
  182. top: 100%;
  183. left: 0;
  184. width: 100%;
  185. height: 1px;
  186. background: #fff;
  187. content: '';
  188. opacity: 0;
  189. -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  190. -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
  191. transition: height 0.3s, opacity 0.3s, transform 0.3s;
  192. -webkit-transform: translateY(-10px);
  193. -moz-transform: translateY(-10px);
  194. transform: translateY(-10px);
  195. }
  196.  
  197. .blaugrana a:hover::after,
  198. .blaugrana a:focus::after {
  199. height: 5px;
  200. opacity: 1;
  201. -webkit-transform: translateY(0px);
  202. -moz-transform: translateY(0px);
  203. transform: translateY(0px);
  204. }
  205.  
  206. /*Container*/
  207. #box {
  208. width:1000px;
  209. margin:200px auto;
  210. padding:10px;
  211. }
  212.  
  213. .grid {
  214. position: relative;
  215. margin: 0 auto;
  216. padding: 1em 0 4em;
  217. max-width: 1000px;
  218. list-style: none;
  219. text-align: center;
  220. }
  221.  
  222. /* Common style */
  223. .grid figure {
  224. position: relative;
  225. float: left;
  226. overflow: hidden;
  227. margin: 10px 1%;
  228. min-width: 320px;
  229. max-width: 480px;
  230. max-height: 400px;
  231. width: 48%;
  232. background: #000;
  233. text-align: center;
  234.  
  235. }
  236.  
  237. .grid figure img {
  238. position: relative;
  239. display: block;
  240. max-height: 100%;
  241. min-width: 100%;
  242. opacity: 1;
  243. }
  244.  
  245. .grid figure figcaption {
  246. padding: 2em;
  247. color: #fff;
  248. text-transform: uppercase;
  249. font-size: 1.25em;
  250. -webkit-backface-visibility: hidden;
  251. backface-visibility: hidden;
  252. }
  253.  
  254. .grid figure figcaption::before,
  255. .grid figure figcaption::after {
  256. pointer-events: none;
  257. }
  258.  
  259. .grid figure figcaption,
  260. .grid figure figcaption > a {
  261. position: absolute;
  262. top: 0;
  263. left: 0;
  264. width: 100%;
  265. height: 100%;
  266. }
  267.  
  268. /* Anchor will cover the whole item by default */
  269. /* For some effects it will show as a button */
  270. .grid figure figcaption > a {
  271. z-index: 1000;
  272. text-indent: 200%;
  273. white-space: nowrap;
  274. font-size: 0;
  275. opacity: 0;
  276. }
  277.  
  278. .grid figure h2 {
  279. word-spacing: -0.15em;
  280. font-weight: 300;
  281. }
  282.  
  283. .grid figure h2 span {
  284. font-weight: 800;
  285. }
  286.  
  287. .grid figure h2,
  288. .grid figure p {
  289. margin: 0;
  290. }
  291.  
  292. .grid figure p {
  293. letter-spacing: 1px;
  294. font-size: 68.5%;
  295. margin-top:10px;
  296. }
  297.  
  298. figure.profile {
  299. background: #000;
  300. }
  301.  
  302. figure.profile img {
  303. height: 480px;
  304. }
  305.  
  306. figure.profile figcaption {
  307. padding: 3em;
  308. }
  309.  
  310. figure.profile figcaption::before,
  311. figure.profile figcaption::after {
  312. position: absolute;
  313. content: '';
  314. opacity: 0;
  315. }
  316.  
  317. figure.profile figcaption::before {
  318. top: 50px;
  319. right: 30px;
  320. bottom: 50px;
  321. left: 30px;
  322. border-top: 1px solid #fff;
  323. border-bottom: 1px solid #fff;
  324. -webkit-transform: scale(0,1);
  325. transform: scale(0,1);
  326. -webkit-transform-origin: 0 0;
  327. transform-origin: 0 0;
  328. }
  329.  
  330. figure.profile figcaption::after {
  331. top: 30px;
  332. right: 50px;
  333. bottom: 30px;
  334. left: 50px;
  335. border-right: 1px solid #fff;
  336. border-left: 1px solid #fff;
  337. -webkit-transform: scale(1,0);
  338. transform: scale(1,0);
  339. -webkit-transform-origin: 100% 0;
  340. transform-origin: 100% 0;
  341. }
  342.  
  343. figure.profile h2 {
  344. padding-top: 26%;
  345. opacity:0;
  346. -webkit-transition: -webkit-transform 0.35s;
  347. transition: all 0.35s ease-in-out;
  348. }
  349.  
  350. figure.profile p {
  351. padding: 0.5em 2em;
  352. text-transform: none;
  353. opacity: 0;
  354. -webkit-transform: translate3d(0,-10px,0);
  355. transform: translate3d(0,-10px,0);
  356. }
  357.  
  358. figure.profile img,
  359. figure.profile h2 {
  360. -webkit-transform: translate3d(0,-30px,0);
  361. transform: translate3d(0,-30px,0);
  362. }
  363.  
  364. figure.profile img,
  365. figure.profile figcaption::before,
  366. figure.profile figcaption::after,
  367. figure.profile p {
  368. -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  369. transition: opacity 0.35s, transform 0.35s;
  370. }
  371.  
  372. figure.profile:hover img {
  373. opacity: 0.4;
  374. -webkit-transform: translate3d(0,0,0);
  375. transform: translate3d(0,0,0);
  376. }
  377.  
  378. figure.profile:hover figcaption::before,
  379. figure.profile:hover figcaption::after {
  380. opacity: 1;
  381. -webkit-transform: scale(1);
  382. transform: scale(1);
  383. }
  384.  
  385. figure.profile:hover h2,
  386. figure.profile:hover p {
  387. opacity: 1;
  388. -webkit-transform: translate3d(0,0,0);
  389. transform: translate3d(0,0,0);
  390. }
  391.  
  392. figure.profile:hover figcaption::after,
  393. figure.profile:hover h2,
  394. figure.profile:hover p,
  395. figure.profile:hover img {
  396. -webkit-transition-delay: 0.15s;
  397. transition-delay: 0.15s;
  398. }
  399.  
  400.  
  401. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  402. #leo {
  403.  
  404. font-family: Arial, Sans-Serif;
  405. text-transform:uppercase;
  406. text-align:center;
  407. z-index:999999999;
  408. box-sizing:content-box;
  409. -webkit-box-sizing:content-box;
  410. -moz-box-sizing:content-box;
  411.  
  412. }
  413.  
  414. #leo a {
  415. z-index:999999999;
  416. position:fixed;
  417. font-size:12px;
  418. line-height:16px;
  419. width:18px;
  420. height:18px;
  421. font-weight:300;
  422. bottom:10px;
  423. right:10px;
  424. color:#000;
  425. background:rgba(255,255,255,0.4);
  426. padding:5px;
  427. transition: all 1s ease-in-out;
  428. -webkit-transition: all 1s ease-in-out;
  429. -o-transition: all 1s ease-in-out;
  430. -moz-transition: all 1s ease-in-out;
  431. box-sizing:content-box;
  432. -webkit-box-sizing:content-box;
  433. -moz-box-sizing:content-box;
  434. }
  435.  
  436. #leo a:hover {
  437. background-color:rgba(0,0,0,1);
  438. color:#fff;
  439. border-radius:50%;
  440. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  441. -moz-animation: hermione 1s;
  442. -o-animation: hermione 1s;
  443. animation: hermione 1s;
  444. animation-timing-function: ease-in-out;
  445. -webkit-animation-timing-function: ease-in-out;
  446. -moz-animation-timing-function: ease-in-out;
  447. -o-animation-timing-function: ease-in-out;
  448.  
  449. -moz-transform: rotate(720deg); /* IE 9 */
  450. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  451. transform: rotate(720deg);
  452.  
  453. transition: all 1s ease-in-out;
  454. -webkit-transition: all 1s ease-in-out;
  455. -o-transition: all 1s ease-in-out;
  456. -moz-transition: all 1s ease-in-out;
  457.  
  458.  
  459. }
  460.  
  461. @-webkit-keyframes hermione {
  462. 0% {color:#000;}
  463. 25% {color:#ACE4EA;}
  464. 50% {color:#FFFBDD;}
  465. 75% {color:#ACE4EA;}
  466. 100% {color:#fff;}
  467. }
  468. @-moz-keyframes hermione {
  469. 0% {color:#000;}
  470. 25% {color:#ACE4EA;}
  471. 50% {color:#FFFBDD;}
  472. 75% {color:#ACE4EA;}
  473. 100% {color:#fff;}
  474. }
  475. @-o-keyframes hermione {
  476. 0% {color:#000;}
  477. 25% {color:#ACE4EA;}
  478. 50% {color:#FFFBDD;}
  479. 75% {color:#ACE4EA;}
  480. 100% {color:#fff;}
  481. }
  482.  
  483. @keyframes hermione {
  484. 0% {color:#000;}
  485. 25% {color:#ACE4EA;}
  486. 50% {color:#FFFBDD;}
  487. 75% {color:#ACE4EA;}
  488. 100% {color:#fff;}
  489. }
  490. /*END OF CREDIT*/
  491.  
  492. /*Media Queries*/
  493.  
  494. @media screen and (max-width: 1280px) {
  495.  
  496.  
  497. .grid figure {
  498.  
  499. min-width: 200px;
  500. max-width: 300px;
  501. max-height: 250px;
  502.  
  503.  
  504. }
  505.  
  506. figure.profile h2 {
  507. padding-top: 15%;
  508. font-size:14px;
  509.  
  510. }
  511.  
  512. figure.profile img {
  513. max-height:300px;
  514. height:auto;
  515. width:auto;
  516. }
  517.  
  518. figure.profile figcaption {
  519. padding: 1em;
  520. }
  521.  
  522. .grid figure figcaption {
  523. padding: 0.8em;
  524.  
  525. }
  526.  
  527. figure.profile figcaption::before {
  528. top: 30px;
  529. right: 18px;
  530. bottom: 30px;
  531. left: 18px;
  532.  
  533. }
  534.  
  535. figure.profile figcaption::after {
  536. top: 18px;
  537. right: 30px;
  538. bottom: 18px;
  539. left: 30px;
  540.  
  541. }
  542.  
  543. }
  544.  
  545.  
  546. @media screen and (max-width:900px) {
  547. #box {
  548. width:100%;
  549. }
  550.  
  551. .grid {
  552. max-width:100%;
  553.  
  554. }
  555.  
  556. .grid figure {
  557. display: inline-block;
  558. float: none;
  559. margin: 10px auto;
  560. width: 100%;
  561. }
  562. }
  563.  
  564.  
  565.  
  566. </style></head>
  567.  
  568. <body>
  569. <div class="tete">
  570.  
  571. <h1>
  572. <!--Header Title-->
  573. Our Members
  574. <!--End of Header Title-->
  575.  
  576. </h1>
  577.  
  578. <nav class="blaugrana">
  579.  
  580. <!--Header Links-->
  581. <a href="/">Back</a>
  582. <a href="/ask">FAQ</a>
  583. <a href="http://www.tumblr.com">Dash</a>
  584. <!--End of Header Links-->
  585.  
  586. </nav>
  587.  
  588. </div>
  589.  
  590.  
  591. <div id="box">
  592. <div class="grid">
  593.  
  594.  
  595. <!--Profile One-->
  596. <figure class="profile">
  597.  
  598. <!--Image URL-->
  599. <img src="http://static.tumblr.com/57cf9f3e66362f07dfdbcb819a922db7/xbvpdcx/kfFnos9i3/tumblr_static_8i5k7k2mm1og0kos48owkkgss.jpg">
  600. <!--End of Image URL-->
  601.  
  602. <figcaption>
  603. <h2> <span><!--Name--> Name <!--To here--></span>
  604. <!--Any extra info; Keep Short--> <!--To here--></h2>
  605.  
  606. <!--Anchored paragraph with description-->
  607. <p>
  608.  
  609. Description here. <br>
  610. <b>bold</b>, <i>italic</i>, <u>underline</u>, <strike>strike</strike>
  611.  
  612. </p>
  613. <!--End of description-->
  614.  
  615.  
  616. <!--URL-->
  617. <a href="http://url.tumblr.com">Visit</a>
  618. <!--End of URL-->
  619.  
  620. </figcaption>
  621. </figure>
  622. <!--End of Profile One-->
  623.  
  624.  
  625.  
  626. <!--Profile Two-->
  627. <figure class="profile">
  628.  
  629. <!--Image URL-->
  630. <img src="http://static.tumblr.com/ea74bbc6e5fe579b60a078043b5949a4/xbvpdcx/uuinos9i3/tumblr_static_c5rxvbquh7cccwgs8k8go4kss.jpg">
  631. <!--End of Image URL-->
  632.  
  633. <figcaption>
  634. <h2> <span><!--Name--> Name <!--To here--></span>
  635. <!--Any extra info; Keep Short--> <!--To here--></h2>
  636.  
  637. <!--Anchored paragraph with description-->
  638. <p>
  639.  
  640. Description here. <br>
  641. <b>bold</b>, <i>italic</i>, <u>underline</u>, <strike>strike</strike>
  642.  
  643. </p>
  644. <!--End of description-->
  645.  
  646.  
  647. <!--URL-->
  648. <a href="http://url.tumblr.com">Visit</a>
  649. <!--End of URL-->
  650.  
  651. </figcaption>
  652. </figure>
  653. <!--End of Profile Two-->
  654.  
  655.  
  656. <!--Profile Three-->
  657. <figure class="profile">
  658.  
  659. <!--Image URL-->
  660. <img src="http://static.tumblr.com/f91c37ec0b3e662d0cff5e93e104b7f6/xbvpdcx/Z1Znos9i4/tumblr_static_ep199821ug8ogkckswcocg00.jpg">
  661. <!--End of Image URL-->
  662.  
  663. <figcaption>
  664. <h2> <span><!--Name--> Name <!--To here--></span>
  665. <!--Any extra info; Keep Short--> <!--To here--></h2>
  666.  
  667. <!--Anchored paragraph with description-->
  668. <p>
  669.  
  670. Description here. <br>
  671. <b>bold</b>, <i>italic</i>, <u>underline</u>, <strike>strike</strike>
  672.  
  673. </p>
  674. <!--End of description-->
  675.  
  676.  
  677. <!--URL-->
  678. <a href="http://url.tumblr.com">Visit</a>
  679. <!--End of URL-->
  680.  
  681. </figcaption>
  682. </figure>
  683. <!--End of Profile Three-->
  684.  
  685.  
  686. <!--Profile Four-->
  687. <figure class="profile">
  688.  
  689. <!--Image URL-->
  690. <img src="http://static.tumblr.com/0697af804f7c309c539feefd0e10a68f/xbvpdcx/pSRnosa2z/tumblr_static_cqh3kwfworkgcsso8080wc40o.jpg">
  691. <!--End of Image URL-->
  692.  
  693. <figcaption>
  694. <h2> <span><!--Name--> Name <!--To here--></span>
  695. <!--Any extra info; Keep Short--> <!--To here--></h2>
  696.  
  697. <!--Anchored paragraph with description-->
  698. <p>
  699.  
  700. Description here. <br>
  701. <b>bold</b>, <i>italic</i>, <u>underline</u>, <strike>strike</strike>
  702.  
  703. </p>
  704. <!--End of description-->
  705.  
  706.  
  707. <!--URL-->
  708. <a href="http://url.tumblr.com">Visit</a>
  709. <!--End of URL-->
  710.  
  711. </figcaption>
  712. </figure>
  713. <!--End of Profile Four-->
  714.  
  715.  
  716.  
  717. <!--Profile Five-->
  718. <figure class="profile">
  719.  
  720. <!--Image URL-->
  721. <img src="http://static.tumblr.com/dc9ac560b9897170d4dd214767d9be0b/xbvpdcx/8hOnosa30/tumblr_static_2n4mrcwf1204co00skks4koso.jpg">
  722. <!--End of Image URL-->
  723.  
  724. <figcaption>
  725. <h2> <span><!--Name--> Name <!--To here--></span>
  726. <!--Any extra info; Keep Short--> <!--To here--></h2>
  727.  
  728. <!--Anchored paragraph with description-->
  729. <p>
  730.  
  731. Description here. <br>
  732. <b>bold</b>, <i>italic</i>, <u>underline</u>, <strike>strike</strike>
  733.  
  734. </p>
  735. <!--End of description-->
  736.  
  737.  
  738. <!--URL-->
  739. <a href="http://url.tumblr.com">Visit</a>
  740. <!--End of URL-->
  741.  
  742. </figcaption>
  743. </figure>
  744. <!--End of Profile Five-->
  745.  
  746.  
  747. <!--Profile Six-->
  748. <figure class="profile">
  749.  
  750. <!--Image URL-->
  751. <img src="http://static.tumblr.com/45837f227a0d2b8ecb7a8df8907d1ff7/xbvpdcx/zConosa30/tumblr_static_8qo51z3hipkwgcgow0s0skssc.jpg">
  752. <!--End of Image URL-->
  753.  
  754. <figcaption>
  755. <h2> <span><!--Name--> Name <!--To here--></span>
  756. <!--Any extra info; Keep Short--> <!--To here--></h2>
  757.  
  758. <!--Anchored paragraph with description-->
  759. <p>
  760.  
  761. Description here. <br>
  762. <b>bold</b>, <i>italic</i>, <u>underline</u>, <strike>strike</strike>
  763.  
  764. </p>
  765. <!--End of description-->
  766.  
  767.  
  768. <!--URL-->
  769. <a href="http://url.tumblr.com">Visit</a>
  770. <!--End of URL-->
  771.  
  772. </figcaption>
  773. </figure>
  774. <!--End of Profile Six-->
  775.  
  776.  
  777. <!--To add another profile, copy and paste the code for a full profile below this line-->
  778.  
  779.  
  780.  
  781. <!--And above this line-->
  782. </div>
  783.  
  784. </div>
  785.  
  786.  
  787.  
  788. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  789. <div id="leo">
  790. <a href="http://hermionejean.co.vu">♚</a>
  791. </div>
  792. <!--END OF CREDIT-->
  793.  
  794. <script src="http://static.tumblr.com/xbvpdcx/8a7nkqvai/classie.js" ></script>
  795. <script>
  796. /**
  797. * cbpAnimatedHeader.min.js v1.0.0
  798. * http://www.codrops.com
  799. *
  800. * Licensed under the MIT license.
  801. * http://www.opensource.org/licenses/mit-license.php
  802. *
  803. * Copyright 2013, Codrops
  804. * http://www.codrops.com
  805. */
  806. var cbpAnimatedHeader=(function(){
  807.  
  808. var b=document.documentElement,g=document.querySelector(".tete"),
  809. e=false,a=100;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cheveux")}else{classie.remove(g,"cheveux")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();
  810. </script>
  811.  
  812. </body>
  813. </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!