API tools faq
paste
Advertisement
hermionemessi

Navi 01 v2

hermionemessi
May 27th, 2015
1,133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--NAVI 01 Coexist v2 by hermionegrangcr (hermionejean.co.vu)
  4.  
  5. THEME BLOG: grangersdesigns (granger.cf)
  6.  
  7.  
  8. ♛ ♛ ♛
  9. ♛♛♛ ♛♛♛ ♛♛♛
  10. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  11. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  12. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hrmionegrangcr (hermionejean.co.vu)
  14.  
  15.  
  16. TERMS OF USE:
  17.  
  18. ♚ BASIC RULES (see http://hermionejean.co.vu/rules) APPLY
  19.  
  20. ♚ PLEASE RESPECT THEM IF USING! ANY FORMS OF THEFTS WILL BE HUNTED DOWN.
  21.  
  22. ♚ PLEASE DO NOT ALTER OR COVER THE CREDIT
  23.  
  24. ♚ FAILURE TO ABIDE TO THE RULES WILL LEAD TO AN IMMEDIATE BLOCK & REPORT & A PERMANENT PLACE ON HTTP://HERMIONEJEAN.CO.VU/WOS
  25.  
  26. THAT'S IT! ENJOY USING MY CODE AND DON'T BE AFRAID TO ASK ME IF YOU ENCOUNTER ANY PROBLEMS c:
  27.  
  28. Notes: Detailed instructions to Customize this theme is included in the CSS/ HTML
  29.  
  30. -->
  31.  
  32.  
  33. <title>{Title}</title>
  34.  
  35. <link rel="shortcut icon" href="{Favicon}"/>
  36.  
  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.  
  41. <!--Tooltip-->
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  43.  
  44. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  45.  
  46. <script>
  47.  
  48. (function($){
  49.  
  50. $(document).ready(function(){
  51.  
  52. $("a[title]").style_my_tooltips({
  53.  
  54. tip_follows_cursor:true,
  55.  
  56. tip_delay_time:30,
  57.  
  58. tip_fade_speed:300,
  59.  
  60. attribute:"title"
  61.  
  62. });
  63.  
  64. });
  65.  
  66. })(jQuery);
  67.  
  68. </script>
  69.  
  70. <style type="text/css">
  71.  
  72. ::selection {background:#fff; color:#000000;}
  73. ::-moz-selection {background:#fff;color:#000000;}
  74. ::-webkit-selection {background:#fff;color:#000000;}
  75.  
  76.  
  77. ::-webkit-scrollbar {width: 5px; height: 3px; background: #FFFFFF; }
  78.  
  79. ::-webkit-scrollbar-thumb { background-color: #000; }
  80.  
  81.  
  82. *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  83. body, html { font-size: 100%; padding: 0; margin: 0; }
  84.  
  85. /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  86. .clearfix:before, .clearfix:after { content: " "; display: table; }
  87. .clearfix:after { clear: both; }
  88.  
  89. #s-m-t-tooltip{
  90. position:absolute;
  91. margin-top: 10px;
  92. z-index:9999999999;
  93. padding:5px;
  94. color:#fff;
  95. background:#000000;
  96. font-size:12px;
  97.  
  98. }
  99.  
  100. body {
  101. background:#fff;
  102. color:#000;
  103. font-size:12px;
  104. line-height:140%;
  105. font-family:'Lato', Arial, Sans-Serif;
  106. font-weight:normal;
  107. }
  108.  
  109.  
  110. a, button {
  111. outline: none;
  112. }
  113.  
  114. a {
  115. color: #c0392b;
  116. text-decoration: none;
  117. }
  118.  
  119. /*header*/
  120.  
  121. .tete {
  122. width:100%;
  123. top: 0;
  124. left: 0;
  125. height:150px;
  126. z-index: 100;
  127. position:fixed;
  128. color:#fff;
  129. background:#000;
  130. text-align:center;
  131. overflow: hidden;
  132. }
  133.  
  134. .tete h1 {
  135. font-family:'Lato', Arial, Sans-Serif;
  136. position: relative;
  137. text-align:center;
  138. text-transform:uppercase;
  139. z-index: 1;
  140. font-weight:400;
  141. font-size:3em;
  142. margin-top:50px;
  143. line-height:140%;
  144. top:-10px;
  145. transition: all 0.3s ease-in-out;
  146. -webkit-transition: all 0.3s ease-in-out;
  147. -moz-transition: all 0.3s ease-in-out;
  148. -o-transition: all 0.3s ease-in-out;
  149. }
  150.  
  151. /* if you want 'Navigation' to have colourful gradients on hover */
  152.  
  153. /*
  154.  
  155. .tete h1:hover {
  156.  
  157. transition: all 0.3s ease-in-out;
  158. -webkit-transition: all 0.3s ease-in-out;
  159. -moz-transition: all 0.3s ease-in-out;
  160. -o-transition: all 0.3s ease-in-out;
  161. color: #fff;
  162. -webkit-text-fill-color: transparent;
  163. background: linear-gradient(270deg, rgba(147,223,184,0.8), rgba(255,200,186,0.8), rgba(227,170,214,0.8), rgba(181,216,235,0.8), rgba(255,189,216,0.8));
  164. -webkit-background-clip: text;
  165. background-size: 1000% 1000% !important;
  166. -webkit-animation: grad 10s ease infinite !important;
  167. -moz-animation: grad 10s ease infinite !important;
  168. -o-animation: grad 10s ease infinite !important;
  169. animation: grad 10s ease infinite !important;
  170.  
  171. }
  172.  
  173. @-webkit-keyframes grad {
  174. 0%{background-position:0% 50%}
  175. 50%{background-position:100% 50%}
  176. 100%{background-position:0% 50%}
  177. }
  178. @-moz-keyframes grad {
  179. 0%{background-position:0% 50%}
  180. 50%{background-position:100% 50%}
  181. 100%{background-position:0% 50%}
  182. }
  183. @keyframes grad {
  184. 0%{background-position:0% 50%}
  185. 50%{background-position:100% 50%}
  186. 100%{background-position:0% 50%}
  187. }
  188.  
  189. */
  190.  
  191. /*header links*/
  192. nav a {
  193. position: relative;
  194. display: inline-block;
  195. margin: 5px auto 15px auto;
  196. outline: none;
  197. color: #fff;
  198. text-decoration: none;
  199. text-transform: uppercase;
  200. letter-spacing: 1px;
  201. font-weight: 400;
  202. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  203. font-size: 2.5em;
  204. }
  205.  
  206. nav a:hover,
  207. nav a:focus {
  208. outline: none;
  209. }
  210.  
  211. .blaugrana {
  212. font-family:'Lato', Arial, Sans-Serif;
  213. font-weight:400;
  214. text-align:center;
  215. position: relative;
  216. margin: 5px auto;
  217. width: 560px;
  218. -webkit-transition: all 0.3s;
  219. -moz-transition: all 0.3s;
  220. transition: all 0.3s;
  221. top:-30px;
  222. }
  223.  
  224. .blaugrana a {
  225. color:#fff;
  226. font-size:16px;
  227. margin:15px;
  228. display:inline-block;
  229. }
  230.  
  231. .blaugrana a::after {
  232. position: absolute;
  233. top: 100%;
  234. left: 0;
  235. width: 100%;
  236. height: 1px;
  237. background: #fff;
  238. content: '';
  239. opacity: 0;
  240. -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  241. -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
  242. transition: height 0.3s, opacity 0.3s, transform 0.3s;
  243. -webkit-transform: translateY(-10px);
  244. -moz-transform: translateY(-10px);
  245. transform: translateY(-10px);
  246. }
  247.  
  248. .blaugrana a:hover::after,
  249. .blaugrana a:focus::after {
  250. height: 5px;
  251. opacity: 1;
  252. -webkit-transform: translateY(0px);
  253. -moz-transform: translateY(0px);
  254. transform: translateY(0px);
  255. }
  256.  
  257.  
  258. /*button*/
  259.  
  260. button {
  261. border: none;
  262. padding: 0.8em 1.6em;
  263. background: #fafafa; /*You can change the button colour here*/
  264. width:200px; /*Width of the button*/
  265. color: #000; /*You can change the colour of the text in the button*/
  266. font-family: 'Lato', Arial, sans-serif;
  267. font-size: 1.2em; /*Font size of the text*/
  268. margin:5px;
  269. letter-spacing: 1px;
  270. text-transform: uppercase;
  271. cursor: pointer;
  272. display: inline-block;
  273. border-radius: 1px;
  274. transition: all 0.3s ease-in-out;
  275. -webkit-transition: all 0.3s ease-in-out;
  276. -moz-transition: all 0.3s ease-in-out;
  277. -o-transition: all 0.3s ease-in-out;
  278. }
  279.  
  280. button:hover {
  281. background: #000;
  282. color:#fff;
  283. transition: all 0.3s ease-in-out;
  284. -webkit-transition: all 0.3s ease-in-out;
  285. -moz-transition: all 0.3s ease-in-out;
  286. -o-transition: all 0.3s ease-in-out;
  287.  
  288. }
  289.  
  290.  
  291. /*Containers*/
  292.  
  293. #box {
  294. width:900px;
  295. margin:25% auto;
  296. padding-left:75px;
  297. padding-right:75px;
  298. }
  299.  
  300. .cont {
  301. position:fixed;
  302. margin: auto;
  303. width:750px;
  304. top:32%;
  305. height:50vh;
  306. }
  307.  
  308. /*Modal windows*/
  309. .voldemort {
  310. position: fixed;
  311. top: 50%;
  312. left: 50%;
  313. width: 50%;
  314. max-width: 700px;
  315. min-width: 320px;
  316. height: auto;
  317. z-index: 2000;
  318. visibility: hidden;
  319. -webkit-backface-visibility: hidden;
  320. -moz-backface-visibility: hidden;
  321. backface-visibility: hidden;
  322. -webkit-transform: translateX(-50%) translateY(-50%);
  323. -moz-transform: translateX(-50%) translateY(-50%);
  324. -ms-transform: translateX(-50%) translateY(-50%);
  325. transform: translateX(-50%) translateY(-50%);
  326. }
  327.  
  328. .harrypotter {
  329. visibility: visible;
  330. }
  331.  
  332. .md-overlay {
  333. position: fixed;
  334. width: 100%;
  335. height: 100%;
  336. visibility: hidden;
  337. top: 0;
  338. left: 0;
  339. z-index: 1000;
  340. opacity: 0;
  341. background: rgba(245,245,245,0.8); /*Colour of the overlay*/
  342. -webkit-transition: all 0.3s;
  343. -moz-transition: all 0.3s;
  344. transition: all 0.3s;
  345. }
  346.  
  347. .harrypotter ~ .md-overlay {
  348. opacity: 1;
  349. visibility: visible;
  350. }
  351.  
  352. /* Content styles */
  353. .contenu {
  354. color: #000;
  355. background: #fff;
  356. position: relative;
  357. border-radius: 0;
  358. margin: 0 auto;
  359. }
  360.  
  361. .contenu h3 {
  362. margin: 0;
  363. padding: 0.4em;
  364. text-align: center;
  365. font-size: 2.4em;
  366. font-family:'Raleway', Arial, Sans-Serif;
  367. font-weight: 300;
  368. opacity: 0.8;
  369. background: rgba(0,0,0,0.1);
  370. border-radius: 3px 3px 0 0;
  371. }
  372.  
  373. .contenu > div {
  374. padding: 15px 40px 30px;
  375. margin: 0 auto;
  376. font-weight: 300;
  377. font-size: 1.15em;
  378. overflow:auto;
  379. text-align:center;
  380. }
  381.  
  382. /*You can style the links here*/
  383. .contenu > div a {
  384. width:30%;
  385. background:#fafafa;
  386. display:inline-block;
  387. color:#000;
  388. font-size:1.2em;
  389. padding:10px;
  390. text-align:center;
  391. margin:5px;
  392. white-space: nowrap;
  393. overflow:hidden;
  394. text-overflow: ellipsis;
  395. transition: all 0.3s ease-in-out;
  396. -webkit-transition: all 0.3s ease-in-out;
  397. -moz-transition: all 0.3s ease-in-out;
  398. -o-transition: all 0.3s ease-in-out;
  399. }
  400.  
  401. .contenu > div a:hover {
  402. color:#fff;
  403. background:#000;
  404. transition: all 0.3s ease-in-out;
  405. -webkit-transition: all 0.3s ease-in-out;
  406. -moz-transition: all 0.3s ease-in-out;
  407. -o-transition: all 0.3s ease-in-out;
  408. }
  409.  
  410.  
  411. /*other contents*/
  412. .contenu > div p {
  413. margin: 0;
  414. padding: 10px 0;
  415. }
  416.  
  417. .contenu > div ul {
  418. margin: 0;
  419. padding: 0 0 30px 20px;
  420. }
  421.  
  422. .contenu > div ul li {
  423. padding: 5px 0;
  424. }
  425.  
  426. .contenu button {
  427. display: block;
  428. margin: 0 auto;
  429. font-size: 0.8em;
  430. }
  431.  
  432. /*effect*/
  433. .harrypotter.poppy ~ .md-overlay {
  434. background: rgba(0,0,0,0.5);
  435. }
  436.  
  437. .harrypotter.poppy ~ .container {
  438. -webkit-filter: blur(3px);
  439. -moz-filter: blur(3px);
  440. filter: blur(3px);
  441. }
  442.  
  443. .poppy .contenu {
  444. -webkit-transform: translateY(-5%);
  445. -moz-transform: translateY(-5%);
  446. -ms-transform: translateY(-5%);
  447. transform: translateY(-5%);
  448. opacity: 0;
  449. }
  450.  
  451. .harrypotter.poppy ~ .container,
  452. .poppy .contenu {
  453. -webkit-transition: all 0.3s;
  454. -moz-transition: all 0.3s;
  455. transition: all 0.3s;
  456. }
  457.  
  458. .harrypotter.poppy .contenu {
  459. -webkit-transform: translateY(0);
  460. -moz-transform: translateY(0);
  461. -ms-transform: translateY(0);
  462. transform: translateY(0);
  463. opacity: 1;
  464. }
  465.  
  466. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  467. #leo {
  468.  
  469. font-family: Arial, Sans-Serif;
  470. text-transform:uppercase;
  471. text-align:center;
  472. z-index:999999999;
  473. box-sizing:content-box;
  474. -webkit-box-sizing:content-box;
  475. -moz-box-sizing:content-box;
  476.  
  477. }
  478.  
  479. #leo a {
  480. z-index:999999999;
  481. position:fixed;
  482. font-size:12px;
  483. line-height:16px;
  484. width:18px;
  485. height:18px;
  486. font-weight:300;
  487. bottom:10px;
  488. right:10px;
  489. color:#000;
  490. background:rgba(255,255,255,0.4);
  491. padding:5px;
  492. transition: all 1s ease-in-out;
  493. -webkit-transition: all 1s ease-in-out;
  494. -o-transition: all 1s ease-in-out;
  495. -moz-transition: all 1s ease-in-out;
  496. box-sizing:content-box;
  497. -webkit-box-sizing:content-box;
  498. -moz-box-sizing:content-box;
  499. }
  500.  
  501. #leo a:hover {
  502. background-color:rgba(0,0,0,1);
  503. color:#fff;
  504. border-radius:50%;
  505. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  506. -moz-animation: hermione 1s;
  507. -o-animation: hermione 1s;
  508. animation: hermione 1s;
  509. animation-timing-function: ease-in-out;
  510. -webkit-animation-timing-function: ease-in-out;
  511. -moz-animation-timing-function: ease-in-out;
  512. -o-animation-timing-function: ease-in-out;
  513.  
  514. -moz-transform: rotate(720deg); /* IE 9 */
  515. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  516. transform: rotate(720deg);
  517.  
  518. transition: all 1s ease-in-out;
  519. -webkit-transition: all 1s ease-in-out;
  520. -o-transition: all 1s ease-in-out;
  521. -moz-transition: all 1s ease-in-out;
  522.  
  523.  
  524. }
  525.  
  526. @-webkit-keyframes hermione {
  527. 0% {color:#000;}
  528. 25% {color:#ACE4EA;}
  529. 50% {color:#FFFBDD;}
  530. 75% {color:#ACE4EA;}
  531. 100% {color:#fff;}
  532. }
  533. @-moz-keyframes hermione {
  534. 0% {color:#000;}
  535. 25% {color:#ACE4EA;}
  536. 50% {color:#FFFBDD;}
  537. 75% {color:#ACE4EA;}
  538. 100% {color:#fff;}
  539. }
  540. @-o-keyframes hermione {
  541. 0% {color:#000;}
  542. 25% {color:#ACE4EA;}
  543. 50% {color:#FFFBDD;}
  544. 75% {color:#ACE4EA;}
  545. 100% {color:#fff;}
  546. }
  547.  
  548. @keyframes hermione {
  549. 0% {color:#000;}
  550. 25% {color:#ACE4EA;}
  551. 50% {color:#FFFBDD;}
  552. 75% {color:#ACE4EA;}
  553. 100% {color:#fff;}
  554. }
  555. /*END OF CREDIT*/
  556.  
  557. /*Media Queries*/
  558. @media screen and (max-width:1024px) {
  559. .tete {
  560. height:120px;
  561. }
  562. .tete h1 {
  563. margin-top:30px;
  564. }
  565.  
  566. }
  567.  
  568.  
  569. @media screen and (max-width:900px) {
  570. #box {
  571. width:100%;
  572. }
  573.  
  574. .cont {
  575. width:700px;
  576. }
  577.  
  578. button {
  579. width:150px;
  580. }
  581.  
  582. }
  583.  
  584. @media screen and (max-width: 700px) {
  585. button {
  586. font-size:0.8em;
  587. }
  588.  
  589. .cont {
  590. width:500px;
  591. }
  592.  
  593. }
  594.  
  595. @media screen and (max-width: 550px) {
  596. button {
  597. width:25%;
  598. }
  599.  
  600. .cont {
  601. width:100%;
  602. }
  603.  
  604. #box {
  605. padding:0;
  606. }
  607. }
  608.  
  609. </style>
  610.  
  611. </head>
  612. <body>
  613. <!--Buttons-->
  614. <!--Modal Window 1-->
  615. <div class="voldemort poppy" id="modal-1">
  616. <div class="contenu">
  617. <!--Try to keep your Headings short--><h3>Heading One</h3>
  618. <div>
  619. <!--
  620. When you are adding links, please follow the instruction below:
  621.  
  622. 1) If you're linking a page within the same blog
  623. e.g. linking http://hogwartsproject.tumblr.com/ask , you just need to add the 'ask' after the '/'
  624.  
  625. 2) If you're linking to a specific tag e.g. the 'hp' tag on your blog, you need to add 'tagged/hp' after the '/'
  626.  
  627. 3) If you're linking any external links or any pages outside your URL, then you need the full URL, including the 'http://' part.
  628.  
  629. Hope this makes sense!
  630. -->
  631. <a href="/">Link</a>
  632. <a href="/">Link</a>
  633. <a href="/">Link</a>
  634. <a href="/">Link</a>
  635. <a href="/">Link</a>
  636. <a href="/">Link</a>
  637. <a href="/">Link</a>
  638. <a href="/">Link</a>
  639. <a href="/">Link</a>
  640.  
  641. <!--Close button-->
  642. <button class="invisibilitycloak" style="display:none;">Close</button>
  643. <!--End of Close button-->
  644. </div>
  645. </div>
  646. </div>
  647. <!--End of Modal Window 1-->
  648.  
  649. <!--Modal Window 2-->
  650. <div class="voldemort poppy" id="modal-2">
  651. <div class="contenu">
  652. <h3>Heading Two</h3>
  653. <div>
  654.  
  655. <a href="/">Link</a>
  656. <a href="/">Link</a>
  657. <a href="/">Link</a>
  658. <a href="/">Link</a>
  659. <a href="/">Link</a>
  660. <a href="/">Link</a>
  661. <a href="/">Link</a>
  662. <a href="/">Link</a>
  663. <a href="/">Link</a>
  664.  
  665. <!--Close button-->
  666. <button class="invisibilitycloak" style="display:none;">Close</button>
  667. <!--End of Close button-->
  668. </div>
  669. </div>
  670. </div>
  671. <!--End of Modal Window 2-->
  672.  
  673. <!--Modal Window 3-->
  674. <div class="voldemort poppy" id="modal-3">
  675. <div class="contenu">
  676. <h3>Heading Three</h3>
  677. <div>
  678.  
  679. <a href="/">Link</a>
  680. <a href="/">Link</a>
  681. <a href="/">Link</a>
  682. <a href="/">Link</a>
  683. <a href="/">Link</a>
  684. <a href="/">Link</a>
  685. <a href="/">Link</a>
  686. <a href="/">Link</a>
  687. <a href="/">Link</a>
  688.  
  689. <!--Close button-->
  690. <button class="invisibilitycloak" style="display:none;">Close</button>
  691. <!--End of Close button-->
  692. </div>
  693. </div>
  694. </div>
  695. <!--End of Modal Window 3-->
  696.  
  697. <!--Modal Window 4-->
  698. <div class="voldemort poppy" id="modal-4">
  699. <div class="contenu">
  700. <h3>Heading Four</h3>
  701. <div>
  702.  
  703. <a href="/">Link</a>
  704. <a href="/">Link</a>
  705. <a href="/">Link</a>
  706. <a href="/">Link</a>
  707. <a href="/">Link</a>
  708. <a href="/">Link</a>
  709. <a href="/">Link</a>
  710. <a href="/">Link</a>
  711. <a href="/">Link</a>
  712.  
  713. <!--Close button-->
  714. <button class="invisibilitycloak" style="display:none;">Close</button>
  715. <!--End of Close button-->
  716. </div>
  717. </div>
  718. </div>
  719. <!--End of Modal Window 4-->
  720.  
  721.  
  722. <!--Modal Window 5-->
  723. <div class="voldemort poppy" id="modal-5">
  724. <div class="contenu">
  725. <h3>Heading Five</h3>
  726. <div>
  727.  
  728. <a href="/">Link</a>
  729. <a href="/">Link</a>
  730. <a href="/">Link</a>
  731. <a href="/">Link</a>
  732. <a href="/">Link</a>
  733. <a href="/">Link</a>
  734. <a href="/">Link</a>
  735. <a href="/">Link</a>
  736. <a href="/">Link</a>
  737.  
  738. <!--Close button-->
  739. <button class="invisibilitycloak" style="display:none;">Close</button>
  740. <!--End of Close button-->
  741. </div>
  742. </div>
  743. </div>
  744. <!--End of Modal Window 5-->
  745.  
  746. <!--Modal Window 6-->
  747. <div class="voldemort poppy" id="modal-6">
  748. <div class="contenu">
  749. <h3>Heading Six</h3>
  750. <div>
  751.  
  752. <a href="/">Link</a>
  753. <a href="/">Link</a>
  754. <a href="/">Link</a>
  755. <a href="/">Link</a>
  756. <a href="/">Link</a>
  757. <a href="/">Link</a>
  758. <a href="/">Link</a>
  759. <a href="/">Link</a>
  760. <a href="/">Link</a>
  761.  
  762. <!--Close button-->
  763. <button class="invisibilitycloak" style="display:none;">Close</button>
  764. <!--End of Close button-->
  765. </div>
  766. </div>
  767. </div>
  768. <!--End of Modal Window 6-->
  769.  
  770. <!--Modal Window 7-->
  771. <div class="voldemort poppy" id="modal-7">
  772. <div class="contenu">
  773. <h3>Heading Seven</h3>
  774. <div>
  775.  
  776. <a href="/">Link</a>
  777. <a href="/">Link</a>
  778. <a href="/">Link</a>
  779. <a href="/">Link</a>
  780. <a href="/">Link</a>
  781. <a href="/">Link</a>
  782. <a href="/">Link</a>
  783. <a href="/">Link</a>
  784. <a href="/">Link</a>
  785.  
  786. <!--Close button-->
  787. <button class="invisibilitycloak" style="display:none;">Close</button>
  788. <!--End of Close button-->
  789. </div>
  790. </div>
  791. </div>
  792. <!--End of Modal Window 7-->
  793.  
  794. <!--Modal Window 8-->
  795. <div class="voldemort poppy" id="modal-8">
  796. <div class="contenu">
  797. <h3>Heading Eight</h3>
  798. <div>
  799. <a href="/">Link</a>
  800. <a href="/">Link</a>
  801. <a href="/">Link</a>
  802. <a href="/">Link</a>
  803. <a href="/">Link</a>
  804. <a href="/">Link</a>
  805. <a href="/">Link</a>
  806. <a href="/">Link</a>
  807. <a href="/">Link</a>
  808.  
  809. <!--Close button-->
  810. <button class="invisibilitycloak" style="display:none;">Close</button>
  811. <!--End of Close button-->
  812. </div>
  813. </div>
  814. </div>
  815. <!--End of Modal Window 8-->
  816.  
  817. <!--Modal Window 9-->
  818. <div class="voldemort poppy" id="modal-9">
  819. <div class="contenu">
  820. <h3>Heading Nine</h3>
  821. <div>
  822.  
  823. <a href="/">Link</a>
  824. <a href="/">Link</a>
  825. <a href="/">Link</a>
  826. <a href="/">Link</a>
  827. <a href="/">Link</a>
  828. <a href="/">Link</a>
  829. <a href="/">Link</a>
  830. <a href="/">Link</a>
  831. <a href="/">Link</a>
  832.  
  833. <!--Close button-->
  834. <button class="invisibilitycloak" style="display:none;">Close</button>
  835. <!--End of Close button-->
  836. </div>
  837. </div>
  838. </div>
  839. <!--End of Modal Window 9-->
  840.  
  841. <!--If you want to add a new modal window, add them right after this-->
  842.  
  843.  
  844. <!--And before this-->
  845. <div class="container">
  846.  
  847. <!--Header-->
  848. <div class="tete">
  849. <h1>Navigation</h1>
  850.  
  851. <!--header links-->
  852. <nav class="blaugrana">
  853.  
  854. <a href="/">Back</a>
  855. <a href="/ask">Ask</a>
  856. <a href="http://tumblr.com">Dash</a>
  857.  
  858. </nav></div>
  859.  
  860. <div id="box">
  861. <div class="cont">
  862.  
  863. <center>
  864.  
  865. <!--
  866. The '<br>' tags after Three and Six are used to organise the buttons in rows of 3
  867. -->
  868.  
  869. <button class="md-trigger" data-modal="modal-1"> One</button>
  870. <button class="md-trigger" data-modal="modal-2"> Two</button>
  871. <button class="md-trigger" data-modal="modal-3"> Three</button><br>
  872. <button class="md-trigger" data-modal="modal-4"> Four</button>
  873. <button class="md-trigger" data-modal="modal-5"> Five</button>
  874. <button class="md-trigger" data-modal="modal-6"> Six</button><br>
  875. <button class="md-trigger" data-modal="modal-7"> Seven</button>
  876. <button class="md-trigger" data-modal="modal-8"> Eight</button>
  877. <button class="md-trigger" data-modal="modal-9"> Nine</button>
  878.  
  879. <!--
  880. For a new box add the following right after 'Nine</button>':
  881.  
  882. <br><button class="md-trigger" data-modal="modal-10">Ten</button>
  883.  
  884. You also need to add a new modal window before '<div id="box">'
  885. -->
  886. </center>
  887.  
  888. </div>
  889. </div>
  890. </div>
  891.  
  892.  
  893. <div class="md-overlay"></div><!-- the overlay element -->
  894.  
  895.  
  896. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  897. <div id="leo">
  898. <a href="http://hermionejean.co.vu">♚</a>
  899. </div>
  900. <!--END OF CREDIT-->
  901.  
  902.  
  903. <!--Script-->
  904. <script src="http://static.tumblr.com/xbvpdcx/8a7nkqvai/classie.js" ></script>
  905.  
  906. <script>
  907. /**
  908. * modalEffects.js v1.0.0
  909. * http://www.codrops.com
  910. *
  911. * Licensed under the MIT license.
  912. * http://www.opensource.org/licenses/mit-license.php
  913. *
  914. * Copyright 2013, Codrops
  915. * http://www.codrops.com
  916. */
  917. var ModalEffects = (function() {
  918.  
  919. function init() {
  920.  
  921. var overlay = document.querySelector( '.md-overlay' );
  922.  
  923. [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
  924.  
  925. var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
  926. close = modal.querySelector( '.invisibilitycloak' );
  927.  
  928. function removeModal( hasPerspective ) {
  929. classie.remove( modal, 'harrypotter' );
  930.  
  931. if( hasPerspective ) {
  932. classie.remove( document.documentElement, 'md-perspective' );
  933. }
  934. }
  935.  
  936. function removeModalHandler() {
  937. removeModal( classie.has( el, 'md-setperspective' ) );
  938. }
  939.  
  940. el.addEventListener( 'click', function( ev ) {
  941. classie.add( modal, 'harrypotter' );
  942. overlay.removeEventListener( 'click', removeModalHandler );
  943. overlay.addEventListener( 'click', removeModalHandler );
  944.  
  945. if( classie.has( el, 'md-setperspective' ) ) {
  946. setTimeout( function() {
  947. classie.add( document.documentElement, 'md-perspective' );
  948. }, 25 );
  949. }
  950. });
  951.  
  952. close.addEventListener( 'click', function( ev ) {
  953. ev.stopPropagation();
  954. removeModalHandler();
  955. });
  956.  
  957. } );
  958.  
  959. }
  960.  
  961. init();
  962.  
  963. })();
  964. </script>
  965.  
  966. <!-- for the blur effect -->
  967. <!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
  968. <script>
  969. // this is important for IEs
  970. var polyfilter_scriptpath = '/js/';
  971. </script>
  972. <script src="http://tympanus.net/Development/ModalWindowEffects/js/cssParser.js"></script>
  973. <script src="http://tympanus.net/Development/ModalWindowEffects/js/css-filters-polyfill.js"></script>
  974. <!--End of Script-->
  975. </body>
  976. </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!