Advertisement
claraowsins

navigation by selenapastel

Aug 10th, 2016
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.73 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4.  
  5. <!---------------
  6.  
  7. by selenapastel
  8. enjoy it
  9. do not copy <3
  10.  
  11.  
  12. ------------!---->
  13.  
  14.  
  15.  
  16.  
  17. <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  18.  
  19. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  20.  
  21. <link rel="stylesheet" type="text/css" href="http://goo.gl/F6c7pZ">
  22.  
  23.  
  24. <title>{Title}</title>
  25. {block:Description}
  26. <meta name="description" content="{MetaDescription}" />
  27. {/block:Description}
  28. <link rel="shortcut icon" href="{Favicon}" />
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  30.  
  31. <style type="text/css">
  32.  
  33.  
  34. body {background-color: #f4f4f4;
  35. font-family:Open Sans;
  36. font-size:10px;
  37. letter-spacing:0px;
  38. color:#555555;
  39. background-image:url('');
  40. background-attachment: fixed; }
  41.  
  42. a {color: #555555;
  43. text-decoration: none;
  44. outline:none;
  45. -moz-outline-style:none;
  46. transition:all 1s ease;}
  47. a:hover {color:#555555;
  48. background-color: transparent;
  49. text-decoration: none;
  50. }
  51.  
  52. blockquote {margin-left:35px;
  53. padding-left:5px;
  54. border-left:1px solid #cfcfcf;}
  55.  
  56.  
  57. #entry {width: 200px;
  58. height:213px;
  59. padding: 13px;
  60. display:block;
  61. position: relative;
  62. float: left;
  63. border:1px solid #eaeaea;
  64. background:#fff;
  65. overflow: scroll;
  66. margin-top:180px;
  67. margin-left:530px;}
  68.  
  69. #entry img {width:100px;
  70. height:100px;
  71. float:left;
  72. margin:2px;}
  73.  
  74. ::-webkit-scrollbar-thumb:horizontal {background:#999;-webkit-border-top-left-radius: 6px;
  75. -webkit-border-top-right-radius: 6px;
  76. -moz-border-radius-topleft: 6px;
  77. -moz-border-radius-topright: 6px;
  78. border-top-left-radius: 6px;
  79. border-top-right-radius: 6px;}
  80. ::-webkit-scrollbar {background:#fff; width:3px; height: 4px}
  81. ::-webkit-scrollbar-thumb:vertical {background:#a9bdc9;-webkit-border-top-left-radius: 6px;
  82. -webkit-border-bottom-left-radius: 6px;
  83. -moz-border-radius-topleft: 6px;
  84. -moz-border-radius-bottomleft: 6px;
  85. border-top-left-radius: 6px;
  86. border-bottom-left-radius: 6px;}
  87.  
  88. ::-moz-selection {background-color:#fff;}
  89. ::selection {background-color:#fff;color:#bcd33a;}
  90.  
  91. #s-m-t-tooltip {max-width:300px;
  92. padding:4px 5px 5px 5px;
  93. margin:10px 0px 0px 20px;
  94. text-transform:uppercase;
  95. z-index:999999999999999999999999999999999999;
  96. background:#dcecf5;
  97. color:#fff;
  98. font-size:8px;
  99. font-family:calibri;
  100. letter-spacing:1px;}
  101.  
  102. #credits {
  103. position:fixed;
  104. right:10px;
  105. bottom:10px;}
  106. #credits a {letter-spacing:0px;
  107. Text-transform:uppercase;
  108. font-size: 7px;
  109. color:#d4d4d4;}
  110.  
  111. #image {display:inline-block;
  112. margin:0px;}
  113. #image img {width:100px;
  114. border-radius:5px; }
  115. #image img:hover {opacity:0.8;}
  116.  
  117. #title {position:absolute;
  118. font-size:12px;
  119. text-align:center;
  120. margin-top:160px;
  121. letter-spacing:2px;
  122. margin-left:610px;
  123. text-transform:uppercase;
  124. width:200px;
  125. padding:0px;
  126. color:#e5e5e5;
  127. background:;}
  128.  
  129. #links {margin-top:140px;
  130. margin-left:523px;
  131. position:absolute;
  132. padding-top:10px;
  133. width:300px;
  134. text-align:left;}
  135.  
  136. #links a {display:inline-block;
  137. text-transform:lowercase;
  138. font-size:14px;
  139. text-align:left;
  140. Color:#e5e5e5;;
  141. margin:10px;}
  142.  
  143. #links a:hover {background:#f4f4f4;
  144. Color:#999;}
  145.  
  146. #tags {margin-left:0px;
  147. text-align:center;
  148. display:inline-block;}
  149.  
  150. #tags a {margin-bottom:10px;
  151. text-align:10px;
  152. text-align:center;
  153. display:inline-block;
  154. padding:7px;
  155. border-radius:5px;
  156. background:#dcecf5;
  157. color:#fff;
  158. font-size:12px;}
  159.  
  160. #tags a:hover {background:#a9bdc9;
  161. color:#fff;
  162. text-shadow: 1px 1px 0px #8b7c7b;}
  163.  
  164. </style>
  165. </head>
  166.  
  167. <body>
  168.  
  169. <div id="title">navigation</div>
  170. <div id="links">
  171. <a href="/"><i class="fa fa-home" aria-hidden="true" title="back home"></i>
  172. </div>
  173.  
  174. <div id="credits">
  175. <a href="http://selenapastel.tumblr.com/"> @ </a>
  176. </div>
  177.  
  178.  
  179. <div id="entry">
  180.  
  181. <div id="tags">
  182.  
  183. <a href="/"> your link </a>
  184. <a href="/"> your link </a>
  185. <a href="/"> your link </a>
  186. <a href="/"> your link </a>
  187. <a href="/"> your link </a>
  188. <a href="/"> your link </a>
  189. <a href="/"> your link </a>
  190. <a href="/"> your link </a>
  191. <a href="/"> your link </a>
  192. <a href="/"> your link </a>
  193. <a href="/"> your link </a>
  194. <a href="/"> your link </a>
  195. <a href="/"> your link </a>
  196. <a href="/"> your link </a>
  197.  
  198. </div>
  199. </div>
  200.  
  201.  
  202. <!------ don't remove this -------->
  203.  
  204.  
  205. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  206. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  207. <script>
  208. (function($){
  209. $(document).ready(function(){
  210. $("[title]").style_my_tooltips({
  211. tip_follows_cursor:true,
  212. tip_delay_time:20,
  213. tip_fade_speed:400,
  214. attribute:"title"
  215. });
  216. });
  217. })(jQuery);
  218. </script>
  219.  
  220. <!------ don't remove this -------->
  221.  
  222. </body>
  223. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement