API tools faq
paste
Advertisement
hermionemessi

Navi 01 v1

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