API tools faq
paste
elisabeththemes

AFFINITE THEMES - PAGE 03 (NAVIGATION) [updated]

elisabeththemes
Feb 17th, 2015
2,652
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.68 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
  3. <!-- NAVIGATION PAGE BY AFFINITETHEMES /////////
  4. EDITED BY: 1OR /////////////////////////////////
  5. ////////// THANK YOU FOR USING, PLEASE SO NOT CLAIM
  6. AS YOUR OWN, DON'T REMOVE THE CREDIT AND HAVE A GREAT DAY -->
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8.  
  9.  
  10.  
  11.  
  12.  
  13. <!-- start of script tooltip -->
  14. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  15.  
  16. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  17.  
  18. <script>
  19. (function($){
  20. $(document).ready(function(){
  21. $("[title]").style_my_tooltips({
  22. tip_follows_cursor:true,
  23. tip_delay_time:90,
  24. tip_fade_speed:600,
  25. attribute:"title"
  26. });
  27. });
  28. })(jQuery);
  29. </script>
  30.  
  31. <!-- end of script tooltip -->
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38. <head>
  39.  
  40. <title>a themes : page 03</title> <!--CHANGE TAB TITLE HERE-->
  41. <link rel="shortcut icon" href="" /> <!--CHANGE FAVICON HERE-->
  42. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  43. <style type="text/css">
  44. /*Main CSS for the body*/
  45. body {
  46. background: url("https://unsplash.imgix.net/42/pygwO3glRbaBCh2uRyd4_8420_rgb.jpg?q=75&fm=jpg&s=eedc775856e644f9b7aa156930ac5bb8")
  47. no-repeat center center fixed; /*CHANGE BACKGROUND IMAGE HERE*/
  48. -webkit-background-size: cover;
  49. -moz-background-size: cover;
  50. -o-background-size: cover;
  51. background-size: cover;
  52. font-style:none;
  53. font-family:calibri;
  54. color:{color:text};
  55. font-size:9px;}
  56.  
  57. body, a, a:hover {
  58. cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), progress;}
  59.  
  60. html, body { height: 100%; margin: 0; }
  61.  
  62. /*CSS used for box itself*/
  63.  
  64. #transbox {
  65. opacity: 0.7;
  66. filter: alpha(opacity=60);
  67. position: relative;
  68. width: 600px;
  69. background-color: #fff;
  70. border: 1px solid #000;}
  71.  
  72. #transbox a:hover {
  73. opacity: 1.0;
  74. filter: alpha(opacity=100);}
  75.  
  76. #container {
  77. height: 100%;
  78. display: flex;
  79. align-items: center;
  80. justify-content: center;}
  81.  
  82. #s-m-t-tooltip {
  83.  
  84. max-width:300px; /* maximum width */
  85. background-color:#fff; /* background color */
  86. border:1px solid #999; /* color, shape and thickness of the border */
  87. font-family:calibri; /* font of text */
  88. font-size:9px; /* font size */
  89. color:#000; /* font color */
  90. opacity: 0.7;
  91. letter-spacing:1px; /* font spacing */
  92. text-transform:uppercase; /* uppercase, lowercase, none */
  93. padding:2px 3px 2px 3px; /* padding size */
  94. margin:20px 0px 0px 20px; /* margin size */
  95. z-index:999999999999999999999999999999999999;
  96. border-radius: 2px; /* border radius */
  97. }
  98.  
  99. /*CSS used for title*/
  100.  
  101. #title {
  102. font-family: calibri;
  103. font-size:18px;
  104. position: relative;
  105. float:left;
  106. text-transform:uppercase;
  107. top: 8px;
  108. left: 8px;
  109. letter-spacing: 3px;
  110. color:#000;
  111. margin-left:1px;
  112. z-index:1;}
  113.  
  114. #title:hover {
  115. font-style:italic;}
  116.  
  117. /*CSS used for line*/
  118.  
  119. #line {
  120. height:1px;
  121. background-color:#000;
  122. margin-left:140px;
  123. margin-top:20px;
  124. width:65%;
  125. border-bottom:3px #fff solid;}
  126.  
  127. /*CSS used for squares*/
  128.  
  129. #squares {
  130. font-size:10px;
  131. font-family:'calibri';
  132. text-transform:uppercase;
  133. text-align:center;
  134. margin-top:-10px;
  135. margin-left:530px;}
  136.  
  137. #squares a {
  138. padding:3px;
  139. color:#000;
  140. display: inline-block;
  141. margin-left: 2px;
  142. height: 5px;
  143. width: 5px;
  144. border: solid #000 1px;
  145. -webkit-transition: all 0.4s ease-in-out;
  146. -moz-transition: all 0.4s ease-in-out;
  147. -o-transition: all 0.4s ease-in-out;
  148. -ms-transition: all 0.4s ease-in-out;
  149. transition: all 0.4s ease-in-out;}
  150.  
  151. #squares a:hover {
  152. color:#fff;
  153. background-color:#999;
  154. -webkit-transition: all 0.4s ease-in-out;
  155. -moz-transition: all 0.4s ease-in-out;
  156. -o-transition: all 0.4s ease-in-out;
  157. -ms-transition: all 0.4s ease-in-out;
  158. transition: all 0.4s ease-in-out;}
  159.  
  160. /*CSS used for nav links*/
  161.  
  162. #navigation a {
  163. font-family:'calibri';
  164. display:block;
  165. color:#000;
  166. font-size:12px;
  167. margin-top: 22px;
  168. padding:6px;
  169. text-align:center;
  170. letter-spacing:2px;
  171. text-transform:uppercase;
  172. text-decoration:underline;
  173. margin-bottom:5px;
  174. -webkit-transition: all 0.4s ease-in-out;
  175. -moz-transition: all 0.4s ease-in-out;
  176. -o-transition: all 0.4s ease-in-out;
  177. -ms-transition: all 0.4s ease-in-out;
  178. transition: all 0.4s ease-in-out;}
  179.  
  180.  
  181. #navigation a:hover {
  182. background:#999;
  183. color:#fff;
  184. opacity: 1.0;
  185. text-decoration: none;
  186. filter: alpha(opacity=100);}
  187.  
  188. /*CSS used for credit section*/
  189.  
  190. #credit {
  191. font-size:10px;
  192. font-family: calibri;
  193. font-style:italic;
  194. letter-spacing:1px;}
  195.  
  196. #credit a {
  197. background-color:#fff;
  198. padding:3px;
  199. position:fixed;
  200. right:10px;
  201. bottom:10px;
  202. text-decoration:none;
  203. color:#000;}
  204.  
  205. #credit a:hover {
  206. color:#fff;
  207. background-color:#999;
  208. -moz-transition-duration:0.5s;
  209. -webkit-transition-duration:0.5s;
  210. -o-transition-duration:0.5s;}
  211. </style>
  212. </head>
  213. <body>
  214. <div id="container">
  215. <div id="transbox">
  216. <div id="title">navigation</div>
  217. <div id="line"></div>
  218. <div id="squares">
  219. <a href="/" title="home"></a>
  220. <a href="/ask" title="message"></a>
  221. <a href="http://tumblr.com/dashboard" title="dash"></a>
  222. </div>
  223.  
  224.  
  225. <div id="navigation">
  226. <table style="width:100%">
  227. <tr>
  228. <td><a href="/">link</a></td>
  229. <td><a href="/">link</a></td>
  230. <td><a href="/">link</a></td>
  231. </tr>
  232.  
  233. <tr>
  234. <td><a href="/">link</a></td>
  235. <td><a href="/">link</a></td>
  236. <td><a href="/">link</a></td>
  237. </tr>
  238.  
  239. <tr>
  240. <td><a href="/">link</a></td>
  241. <td><a href="/">link</a></td>
  242. <td><a href="/">link</a></td>
  243. </tr>
  244.  
  245. <tr>
  246. <td><a href="/">link</a></td>
  247. <td><a href="/">link</a></td>
  248. <td><a href="/">link</a></td>
  249. </tr>
  250.  
  251. <tr>
  252. <td><a href="/">link</a></td>
  253. <td><a href="/">link</a></td>
  254. <td><a href="/">link</a></td>
  255. </tr>
  256. </table>
  257. </div>
  258. </div>
  259. </div>
  260. <div id="credit"><a href="http://affinitethemes.tumblr.com" title="© affinité themes">AT</a></div>
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!