API tools faq
paste
drcomalfoy

NAVIGATION THEME 1

drcomalfoy
Dec 11th, 2017
4,860
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>{Title}</title>  
  5.        
  6. <!----------
  7.    
  8.    NAVIGATION PAGE : INSIDE & OUT
  9.    created by merc / badwolf
  10.    
  11. ---------->
  12.  
  13. <script type='text/javascript' src='http://files.b1.jcink.com/html/jquery-1.7.2.min.js'></script>
  14. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
  15. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  16.  
  17. <!----------
  18.    
  19.    IF YOU ARE USING THESE ON A DIFFERENT THEME
  20.    PLEASE REHOST THEM ELSEWHERE FIRST!!!
  21.    
  22. ---------->
  23.  
  24.     <link rel="stylesheet" href="http://wildest.b1.jcink.com/uploads/wildest/2c9becc7-simple_line_icons.css">
  25.    
  26.     <style type="text/css">
  27. ::-webkit-scrollbar-thumb:vertical {
  28.     background-color: #efefef;
  29.     height: 10px;
  30.     border: 3px solid #fbfbfb;
  31.     width: 5px;
  32. }
  33. ::-webkit-scrollbar {
  34.     width: 9px;
  35.     border: 4px solid #fbfbfb;
  36.     background-color: #efefef;
  37. }
  38.        
  39. body {
  40.     margin: 0px;
  41.     background-color: #fbfbfb;
  42. }
  43. #navbox {
  44.     width: 400px;
  45.   height: 400px;
  46.   /* CSS Absolute Center */
  47.   position: absolute;
  48.   margin: auto;
  49.   left: 0;
  50.   right: 0;
  51.   bottom: 0;
  52.   top: 0;
  53.   /* CSS Absolute Center end */
  54.   color: #FFF;
  55.   background: #fff;
  56.   border: 1px solid #e5e5e5;
  57.   -webkit-border-radius: 5px;
  58.     -moz-border-radius: 5px;
  59.     border-radius: 5px;
  60.     padding: 50px;
  61. }
  62. #navbox h1 {
  63.     font-family: playfair display;
  64.     font-style: italic;
  65.     font-size: 35px;
  66.     text-align: right;
  67.     margin-bottom:0px;
  68.     line-height: 100%;
  69.     color: #191919;
  70. }
  71. #navbox h2 {
  72.     font-family: montserrat;
  73.     font-size: 7px;
  74.     text-transform: uppercase;
  75.     letter-spacing: 1px;
  76.     margin-top: 5px;
  77.     text-align: right;
  78.     line-height: 100%;
  79.     font-weight:normal;
  80.     color: #191919;
  81. }
  82. #navbox .mfor2 {
  83.   position: absolute;
  84.   top: 115px;
  85.   left: 40px;
  86.   color: #191919;
  87.   width: 400px;
  88.   height: 10px;
  89.   padding: 10px;
  90.   line-height: 10px;
  91.   letter-spacing: 2px;
  92.   font-size: 10px;
  93.   margin: auto;
  94.   display: inline-block;
  95.   text-align: center;
  96.   margin: auto;
  97. }
  98. #navbox a {
  99.     text-decoration: none;
  100. }
  101. #navbox .mfor2 a {
  102.     color: #191919;
  103. }
  104. #navbox .mfor2:before {
  105.   content: "";
  106.   width: 30%;
  107.   height: 1px;
  108.   position: absolute;
  109.   top: 50%;
  110.   left: 0px;  
  111.   background-color: #efefef;
  112.   display: block;
  113. }
  114. #navbox .mfor2:after {
  115.   content: "";
  116.   width: 30%;
  117.   height: 1px;
  118.   position: absolute;
  119.   top: 50%;
  120.   right: 0px;
  121.   background-color: #efefef;
  122.   display: block;
  123. }
  124.  
  125. #navbox .navnav {
  126.     width: 380px;
  127.     margin: auto;
  128.     margin-top: 40px;
  129.   -webkit-border-radius: 5px;
  130.     -moz-border-radius: 5px;
  131.     border-radius: 5px;
  132.     height: 260px;
  133. }
  134. #navbox .navnav .nav2 {
  135.     padding-right: 2px;
  136.     height: 260px;
  137.     overflow: auto;
  138.     font-family: montserrat;
  139. }
  140. #navbox .navnav .nav2 .nav3 {
  141.  width: 110px;  
  142.  height: 120px;
  143.  overflow: auto;
  144.  margin-left: 10px;
  145. }
  146. #navbox .navnav .nav2 .nav3 h1 {
  147.     display: block;
  148.     margin: 0px;
  149.     border-bottom: 1px solid #efefef;
  150.     text-align: left;
  151.     font-family: montserrat;
  152.     color: #191919;
  153.     font-weight: bold;
  154.     font-size: 7px;
  155.     letter-spacing: 1px;
  156.     text-transform: uppercase;
  157.     font-style: normal;
  158.     padding: 5px;
  159. }
  160. #navbox .navnav .nav2 .nav3 a {
  161.     color: #797979;
  162.     display: block;
  163.     padding: 4px;
  164.     font-family: montserrat;
  165.     font-size: 7px;
  166.     letter-spacing: 0.5px;
  167.     text-transform: uppercase;
  168.     text-decoration: none;
  169.     text-align: right;
  170.     transition:0.5s ease;
  171.     -o-transition:0.5s ease;
  172.     -moz-transition:0.5s ease;
  173.     -webkit-transition:0.5s ease;
  174.  
  175. }
  176. #navbox .navnav .nav2 .nav3 a:hover {
  177.     padding-right: 10px;
  178. }
  179. /***************
  180.     TOOLTIPS
  181. ***************/
  182. .tooltip{
  183.     display: inline;
  184.     position: relative;
  185. }
  186. #s-m-t-tooltip {
  187.     max-width:300px;
  188.     border-radius: 0px;
  189.     padding:3px 4px 3px 4px;
  190.     margin:20px 7px -2px 20px;
  191.     background-color: #000;
  192.     font-family: montserrat;
  193.     font-size: 7px;
  194.     font-weight: bold;
  195.     letter-spacing: 1px;
  196.     text-transform: uppercase;
  197.     color: #fff;
  198.     z-index:999999999999999999999999999999999999;
  199. }
  200.  
  201.  
  202.      
  203. #credit {
  204.     float: right;
  205.     position: fixed;
  206.     bottom: 40px;
  207.     right: 30px;
  208.     font-weight: bold;
  209.     letter-spacing: 1px;
  210.     background-color: #fff;
  211.     font-family: montserrat;
  212.     text-transform: uppercase;
  213.     font-size: 7px;
  214.     -webkit-transition-duration:.8s;
  215.     -moz-transition-duration:.8s;
  216.     -o-transition-duration:.8s;
  217.     -ms-transition-duration:.8s;
  218. }
  219.  
  220. #credit a {
  221.     color: #191919;
  222.     padding: 5px;
  223.     text-decoration:none;
  224.     outline: 1px solid #ffffff;
  225.     outline-offset: 3px;
  226. }
  227.  
  228.  
  229.        
  230.     </style>
  231.     <!--- TOOLTIPS --->
  232. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  233.  
  234. <script>
  235.  
  236. (function($){
  237.  
  238. $(document).ready(function(){
  239.  
  240. $("a[title]").style_my_tooltips({
  241.  
  242. tip_follows_cursor:true,
  243.  
  244. tip_delay_time:130,
  245.  
  246. tip_fade_speed:130,
  247.  
  248. attribute:"title"
  249.  
  250. });
  251.  
  252. });
  253.  
  254. })(jQuery);
  255.  
  256. </script>
  257.  
  258.  
  259.     </head>
  260.    
  261. <body><div id="credit"><a href="http://dransy.co.vu/">merc</a></div>
  262.  
  263.  
  264. <div id="navbox">
  265.     <h1>navigation</h1>
  266.     <h2>looking for something?</h2>
  267.    
  268.     <div class="mfor2">
  269.         <a href="/" title="home"><span aria-hidden="true" data-icon="&#xe069;"></span></a>
  270. </div>
  271.    
  272.     <div class="navnav"><div class="nav2">
  273.        
  274.         <table><tr valign="top"><td>
  275.        
  276.             <div class="nav3">
  277.                 <h1>general</h1>
  278.                 <a href="http://badwolf.tumblr.com">rp blog</a>
  279.                 <a href="http://badwolf.tumblr.com">soc blog</a>
  280.                 <a href="http://twitter.com/mersaydez_">twitter</a>
  281.                 <a href="http://instagram.com/mersaydez_">instagram</a>
  282.                 <a href="http://dransy.co.vu/comms">code commissions</a>
  283.             </div>
  284.            
  285.         </td><td>
  286.        
  287.             <div class="nav3">
  288.                 <h1>creations</h1>
  289.                 <a href="http://dransy.co.vu/tagged/%5E*">edits</a>
  290.                 <a href="http://dransy.co.vu/tagged/theme">themes</a>
  291.                 <a href="http://dransy.co.vu/tagged/codes">all codes</a>
  292.                 <a href="http://dransy.co.vu/tagged/jcink*">jcink codes</a>
  293.                 <a href="http://dransy.co.vu/tagged/%5E*">all creations</a>
  294.                 <a href="http://dransy.co.vu/tagged/mine*">old graphics</a>
  295.                 <a href="http://dransy.co.vu/tagged/mine">ancient graphics</a>
  296.             </div>
  297.            
  298.         </td><td>
  299.        
  300.             <div class="nav3">
  301.                 <h1>harry potter</h1>
  302.                 <a href="http://dransy.co.vu/tagged/pansy parkinson">pansy parkinson</a>
  303.                 <a href="http://dransy.co.vu/tagged/draco malfoy">draco malfoy</a>
  304.                 <a href="http://dransy.co.vu/tagged/theodore nott">theodore nott</a>
  305.                 <a href="http://dransy.co.vu/tagged/blaise zabini">blaise zabini</a>
  306.                 <a href="http://dransy.co.vu/tagged/daphne greengrass">daphne greengrass</a>
  307.                 <a href="http://dransy.co.vu/tagged/squad">snake squad</a>
  308.                 <a href="http://dransy.co.vu/tagged/hansy">harry x pansy</a>
  309.                 <a href="http://dransy.co.vu/tagged/dransy">draco x pansy</a>
  310.                 <a href="http://dransy.co.vu/tagged/slytherin">slytherin</a>
  311.                 <a href="http://dransy.co.vu/tagged/ravenclaw">ravenclaw</a>
  312.                 <a href="http://dransy.co.vu/tagged/hufflepuff">hufflepuff</a>
  313.                 <a href="http://dransy.co.vu/tagged/gryffindor">gryffindor</a>
  314.                 <a href="http://dransy.co.vu/tagged/harry potter">harry potter</a>
  315.                 <a href="http://dransy.co.vu/tagged/ron weasley">ron weasley</a>
  316.                 <a href="http://dransy.co.vu/tagged/hermione granger">hermione granger</a>
  317.             </div>
  318.            
  319.         </td></tr><tr valign="top" style="margin-top: 10px;"><td>
  320.        
  321.         <!--- ROW 2 NAVS --->
  322.        
  323.             <div class="nav3">
  324.                 <h1>fandoms</h1>
  325.                 <a href="http://dransy.co.vu/tagged/hp">harry potter</a>
  326.                 <a href="http://dransy.co.vu/tagged/soc">six of crows</a>
  327.                 <a href="http://dransy.co.vu/tagged/fablehaven">fablehaven</a>
  328.                 <a href="http://dransy.co.vu/tagged/atla">avatar: the last airbender</a>
  329.                 <a href="http://dransy.co.vu/tagged/lok">legend of korra</a>
  330.                 <a href="http://dransy.co.vu/tagged/pokemon">pokemon</a>
  331.                 <a href="http://dransy.co.vu/tagged/asoiaf">asoif/game of thrones</a>
  332.             </div>
  333.            
  334.         </td><td>
  335.        
  336.             <div class="nav3">
  337.                 <h1>resources</h1>
  338.                 <a href="http://dransy.co.vu/tagged/psd">psds</a>
  339.                 <a href="http://dransy.co.vu/tagged/themes">themes</a>
  340.                 <a href="http://dransy.co.vu/tagged/texture">textures</a>
  341.                 <a href="http://dransy.co.vu/tagged/code help">code help</a>
  342.                 <a href="http://dransy.co.vu/tagged/resource">all resources</a>
  343.             </div>
  344.            
  345.         </td><td>
  346.        
  347.             <div class="nav3">
  348.                 <h1>misc. tags</h1>
  349.                 <a href="http://dransy.co.vu/tagged/models">models</a>
  350.                 <a href="http://dransy.co.vu/tagged/model!hp">model!hp</a>
  351.                 <a href="http://dransy.co.vu/tagged/rp ad">rp adverts</a>
  352.                 <a href="http://dransy.co.vu/tagged/merc rps">rp tag 1</a>
  353.                 <a href="http://dransy.co.vu/tagged/mercrps">rp tag 2</a>
  354.                 <a href="http://dransy.co.vu/tagged/lucky blue smith">lucky blue smith</a>
  355.                 <a href="http://dransy.co.vu/tagged/fernanda ly">fernanda ly</a>
  356.                 <a href="http://dransy.co.vu/tagged/frida gustavsson">frida gustavsson</a>
  357.                 <a href="http://dransy.co.vu/tagged/bryden jenkins">bryden jenkins</a>
  358.                 <a href="http://dransy.co.vu/tagged/ben jarvis">bejnamin jarvis</a>
  359.             </div>
  360.            
  361.         </td></tr></table>
  362.        
  363.     </div></div>
  364.    
  365. </div>
  366.  
  367. </body>
  368. </html>
Advertisement
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!