API tools faq
paste
elisabeththemes

AFFINITE THEMES - PAGE 02 (NAVIGATION)

elisabeththemes
Nov 22nd, 2014
1,186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.46 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  5.  
  6. <!-- NAVIGATION THEME BY ELISABETHTHEMES-->
  7. <!-- please enjoy and feel free to message me with any questions!-->
  8. <!-- do NOT under any circumstances remove the credit-->
  9.  
  10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  11.  
  12.  
  13. <head>
  14.  
  15. <!-- start of script tooltip -->
  16. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  17.  
  18. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  19.  
  20. <script>
  21.  
  22. (function($){
  23.  
  24. $(document).ready(function(){
  25.  
  26. $("a[title]").style_my_tooltips({
  27.  
  28. tip_follows_cursor:true,
  29.  
  30. tip_delay_time:90,
  31.  
  32. tip_fade_speed:600,
  33.  
  34. attribute:"title"
  35.  
  36. });
  37.  
  38. });
  39.  
  40. })(jQuery);
  41.  
  42. </script>
  43.  
  44. <!-- end of script tooltip -->
  45.  
  46. <!--change tab title here-->
  47.  
  48. <title>et: page 02</title>
  49.  
  50. <link rel="shortcut icon" href="{Favicon}" />
  51. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  52.  
  53. <style type="text/css">
  54.  
  55.  
  56. /*--scrollbar--*/
  57.  
  58. ::-webkit-scrollbar-thumb:vertical {border:3px solid #fff;height:12px; background-color:{color:scrollbar};}
  59. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
  60. ::-webkit-scrollbar {background-color:{color:scrollbar};height:7px;width:12px;border:5px solid #fff;}
  61. ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{background-color:{color:scrollbar};display:block;height:8px;border-right:2px solid #fff;border-left:2px solid #fff;
  62. }
  63. /*--body--*/
  64.  
  65.  
  66. body {
  67. font-style:none;
  68. background-color:#fff; /*CHANGE BACKGROUND COLOR HERE*/
  69. font-family:calibri;
  70. font-size:9px;
  71. overflow:hidden;
  72. }
  73.  
  74.  
  75. a {
  76. text-decoration:none;
  77. -webkit-transition: all 0.5s ease-out;
  78. -moz-transition: all 0.5s ease-out;
  79. transition: all 0.5s ease-out;
  80. }
  81.  
  82. a:hover {
  83. text-decoration:none;
  84. -webkit-transition: all 0.8s ease-out;
  85. -moz-transition: all 0.8s ease-out;
  86. transition: all 0.8s ease-out;
  87. }
  88.  
  89. img {
  90. border:none;
  91. }
  92.  
  93. blockquote {
  94. padding-left:5px;
  95. border-left:2px solid;
  96. }
  97.  
  98. h1 {
  99. font-size:10px;
  100. }
  101.  
  102. /*--Cursor--*/
  103.  
  104.  
  105. *, body, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto }
  106.  
  107. /*everything*/
  108.  
  109. #everything {
  110. margin-left:220px;
  111. margin-top:300px;
  112. }
  113.  
  114. #sidebar {
  115. width: 100px;
  116. height: 670px;
  117. display: block;
  118. margin-top:-130px;
  119. margin-left: -110px;
  120. }
  121.  
  122. .wow {
  123. position: relative;
  124. width: 500px;
  125. top: -25px;
  126. left: 320px;
  127. z-index: 1;
  128. }
  129. .overlay {
  130. position: absolute;
  131. text-align: center;
  132. top: 0;
  133. left: 0;
  134. z-index: 2;
  135. opacity: 0;
  136. padding: 100px;
  137. display: block;
  138. bottom: 0;
  139. right: 0;
  140. font-size: 40px;
  141. color: #fff;
  142. -webkit-transition: all 0.8s ease-out;
  143. -moz-transition: all 0.8s ease-out;
  144. transition: all 0.8s ease-out;
  145. }
  146.  
  147. #prop {
  148. font-size: 40px;
  149. color: #fff;
  150. border-bottom: 1px #fff solid;
  151. -webkit-transition: all 0.8s ease-out;
  152. -moz-transition: all 0.8s ease-out;
  153. transition: all 0.8s ease-out;
  154. }
  155. .wow:hover > .overlay {
  156. opacity: 1;
  157. display: block;
  158. background: rgba(255, 255, 255, 0.4)
  159. }
  160. .wow img:hover {
  161. opacity: 1.5;
  162. -webkit-transition: all 0.5s ease-out;
  163. -moz-transition: all 0.5s ease-out;
  164. transition: all 0.5s ease-out;
  165. }
  166.  
  167. #links1 {
  168. font: 10px;
  169. position: relative;
  170. top:-330px;
  171. left:220px;
  172. background-color:#fff; /* CHANGE BOX 1 BACKGROUND COLOR HERE */
  173. border:1px solid #000; /* CHANGE BOX 1 COLOR HERE */
  174. padding:0px 2px 0px 2px;
  175. z-index: 10;
  176. width: 10px;
  177. text-align:center;
  178. overflow:hidden;
  179. -webkit-transition:all 0.7s ease-in-out;
  180. -moz-transition:all 0.7s ease-in-out;
  181. transition:all 0.7s ease-in-out;
  182. }
  183.  
  184. #links2 {
  185. font: 10px;
  186. position: relative;
  187. width:10px;
  188. top:-345px;
  189. left:240px;
  190. background-color:#fff; /* CHANGE BOX 2 BACKGROUND COLOR HERE */
  191. border:1px solid #000; /* CHANGE BOX 2 COLOR HERE */
  192. padding:0px 2px 0px 2px;
  193. z-index: 10;
  194. text-align:center;
  195. overflow:hidden;
  196. -webkit-transition:all 0.7s ease-in-out;
  197. -moz-transition:all 0.7s ease-in-out;
  198. transition:all 0.7s ease-in-out;
  199. }
  200.  
  201. #links3 {
  202. font: 10px;
  203. width:10px;
  204. position: relative;
  205. top:-360px;
  206. left:260px;
  207. background-color:#fff; /* CHANGE BOX 3 BACKGROUND COLOR HERE */
  208. border:1px solid #000; /* CHANGE BOX 3 COLOR HERE */
  209. padding:0px 2px 0px 2px;
  210. z-index: 10;
  211. text-align:center;
  212. overflow:hidden;
  213. -webkit-transition:all 0.7s ease-in-out;
  214. -moz-transition:all 0.7s ease-in-out;
  215. transition:all 0.7s ease-in-out;
  216. }
  217.  
  218. #links1 a, #links2 a, #links3 a {
  219. color:#fff;
  220. font-size:10px;
  221. font-weight:bold;
  222. text-decoration: none;
  223. }
  224.  
  225. #links1:hover {
  226. width:90px;
  227. z-index: 100;
  228. background:#F2F2F2; /* CHANGE BOX 1 BACKGROUND COLOR WHEN HOVERED HERE */
  229. -webkit-transition:all 0.7s ease-in-out;
  230. -moz-transition:all 0.7s ease-in-out;
  231. transition:all 0.7s ease-in-out;
  232. }
  233.  
  234. #links2:hover {
  235. width:70px;
  236. z-index: 100;
  237. background:#F2F2F2; /* CHANGE BOX 2 BACKGROUND COLOR WHEN HOVERED HERE */
  238. -webkit-transition:all 0.7s ease-in-out;
  239. -moz-transition:all 0.7s ease-in-out;
  240. transition:all 0.7s ease-in-out;
  241. }
  242.  
  243. #links3:hover {
  244. width:50px;
  245. z-index: 100;
  246. background:#F2F2F2; /* CHANGE BOX 3 BACKGROUND COLOR WHEN HOVERED HERE */
  247. -webkit-transition:all 0.7s ease-in-out;
  248. -moz-transition:all 0.7s ease-in-out;
  249. transition:all 0.7s ease-in-out;
  250. }
  251.  
  252. #links1:hover a, #links2:hover a, #links3:hover a {
  253. color:#000;
  254. }
  255.  
  256.  
  257.  
  258. #alllinks {
  259. width:100px;
  260. position: relative;
  261. top:-350px;
  262. left:200px;
  263. }
  264.  
  265.  
  266. #alllinks a {
  267. font-family:'calibri';
  268. display:block;
  269. color:#000; /* CHANGE LINKS TEXT COLOR HERE */
  270. margin-top: 5px;
  271. font-size:10px;
  272. padding:5px;
  273. text-align:center;
  274. letter-spacing:1px;
  275. text-transform:uppercase;
  276. margin-bottom:5px;
  277. -webkit-transition: all 0.4s ease-in-out;
  278. -moz-transition: all 0.4s ease-in-out;
  279. -o-transition: all 0.4s ease-in-out;
  280. -ms-transition: all 0.4s ease-in-out;
  281. transition: all 0.4s ease-in-out;
  282. }
  283.  
  284. #alllinks a:hover {
  285. background:#F2F2F2; /* CHANGE BACKGROUND OF LINKS WHEN HOVERED HERE */
  286. letter-spacing: 4px;
  287. color:#000;
  288. -webkit-transition: all 0.7s ease-in-out;
  289. -moz-transition: all 0.7s ease-in-out;
  290. -o-transition: all 0.7s ease-in-out;
  291. -ms-transition: all 0.7s ease-in-out;
  292. transition: all 0.7s ease-in-out;
  293. }
  294.  
  295. /* DO NOT REMOVE THIS PLEASE */
  296.  
  297. #credit {
  298. position:fixed;
  299. font-family:calibri;
  300. font-size:10px;
  301. font-style:normal;
  302. line-height:110%;
  303. right:10px;
  304. bottom:15px;
  305. text-transform:uppercase;
  306. text-align:center;
  307. }
  308. #credit a {
  309. padding:1px 3px 1px 3px;
  310. -moz-transition-duration:0.5s;
  311. -webkit-transition-duration:0.5s;
  312. -o-transition-duration:0.5s;
  313. color:#000;
  314. background-color:#ffffff;
  315. border: solid #888 1px;
  316. }
  317. #credit a:hover {
  318. -moz-transition-duration:0.5s;
  319. -webkit-transition-duration:0.5s;
  320. -o-transition-duration:0.5s;
  321. color:#ffffff;
  322. background-color:#888;
  323. border: solid white 1px;
  324. }
  325.  
  326.  
  327.  
  328. {CustomCSS}
  329.  
  330. </style></head>
  331.  
  332.  
  333. <body>
  334.  
  335. <div id="everything">
  336.  
  337.  
  338. <div id="sidebar">
  339. <!------change image here------>
  340.  
  341.  
  342. <div class="wow">
  343. <img src="http://33.media.tumblr.com/dc03b20b03684639bc21d036f727583c/tumblr_ncvxpmmS0B1tj78m5o1_500.gif" width="500" height="270" alt="" />
  344. <div class="overlay"><div id="prop">NAVIGATION</div></div>
  345.  
  346. <!--CHANGE TITLE THAT APPEARS ON HOVER HERE ^-->
  347. </div>
  348.  
  349. <!--EDIT NAVIGATION LINKS HERE-->
  350.  
  351. <div id="links1">
  352. <a href="/">HOME</a>
  353. </div>
  354.  
  355. <div id="links2">
  356. <a href="/">LINK</a>
  357. </div>
  358.  
  359. <div id="links3">
  360. <a href="/">LINK</a>
  361. </div>
  362.  
  363. <table id="all" border="0" cellpadding="0" cellspacing="0">
  364.  
  365. <div id="alllinks">
  366. <a href="/tagged/">link</a>
  367. <a href="/tagged/">link</a>
  368. <a href="/tagged/">link</a>
  369. <a href="/tagged/">link</a>
  370. <a href="/tagged/">link</a>
  371. <a href="/tagged/">link</a>
  372. <a href="/tagged/">link</a>
  373. <a href="/tagged/">link</a>
  374. <a href="/tagged/">link</a>
  375. <a href="/tagged/">link</a>
  376.  
  377. </div></td>
  378.  
  379.  
  380.  
  381.  
  382. </table>
  383.  
  384. </div>
  385. <div id="credit"><a href="http://affinitethemes.tumblr.com/">AT</a></div>
  386. </body>
  387. </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!