Advertisement
e-law-ise

html2

Mar 8th, 2014
248
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.40 KB | None | 0 0
  1. <head>
  2.  
  3. <title>Navigation</title>
  4.  
  5.  
  6. <!--------------------------------------------------------------------------
  7. ------------------------ Adrienne Law's navi page ------------------------------------------------Give credit where credit is due-------------------------------------------------------------------------------------------------->
  8.  
  9.  
  10. <style type="text/css">
  11.  
  12. ::-webkit-scrollbar-thumb:vertical {
  13. background-color: #ccc; /*Change color of scroll bar*/
  14. height:5px;
  15. }
  16. ::-webkit-scrollbar-corner {
  17. background-color: transparent;
  18. }
  19. ::-webkit-scrollbar-thumb:horizontal {
  20. background-color: #ccc; /*Change color of scroll bar*/
  21. height:5px!important;
  22. }
  23.  
  24. ::-webkit-scrollbar {
  25. height:7px;
  26. width:5px;
  27. }
  28.  
  29. iframe#tumblr_controls{
  30. position:fixed !important;
  31. right:0px !important;
  32. z-index:999;
  33. }
  34.  
  35. #title {
  36. width: 400px;
  37. height: 22px;
  38. margin-left:auto;
  39. margin-right:auto;
  40. text-align: right;
  41. font-family:calibri;
  42. font-style:italic;
  43. font-size:22px;
  44. border-bottom:1px solid gray;
  45. padding-top:40px;
  46. }
  47.  
  48. #links {
  49. width:400px;
  50. margin-left:auto;
  51. margin-right:auto;
  52. margin-top:10px;
  53. padding-bottom:0px;
  54. text-align: right;
  55. }
  56.  
  57. #links a {
  58. width:96;
  59. padding:2px 2px 2px 3px;
  60. background-color:#ffffff;
  61. margin:2px;
  62. color:gray;
  63. font-size:10px;
  64. font-family:calibri;
  65. text-align:center;
  66. letter-spacing:1px;
  67. text-transform:uppercase;
  68. text-decoration:none;
  69. border: 1px solid #C3C3DE;
  70. -o-transition: all 0.5s ease-out;
  71. -webkit-transition: all 0.5s ease-out;
  72. -moz-transition: all 0.5s ease-out;
  73. }
  74.  
  75. #links a:hover {
  76. background-color:#C3C3DE;
  77. color:#ffffff;
  78. border: 1px solid #ffffff;
  79. -o-transition: all 0.5s ease-out;
  80. -webkit-transition: all 0.5s ease-out;
  81. -moz-transition: all 0.5s ease-out;
  82. }
  83.  
  84.  
  85. #header {
  86. width:600px;
  87. height:50px;
  88. margin-right:auto;
  89. margin-left:auto;
  90. margin-top:15px;
  91. text-align:center;
  92. }
  93. #header img{
  94. width:600px;
  95. height:50px;
  96. }
  97.  
  98. #description {
  99. width:200px;
  100. height:10px;
  101. padding:3px 0px 8px 0px;
  102. margin-right:auto;
  103. margin-left:auto;
  104. margin-top:-35px;
  105. text-align:center ;
  106. font-family:calibri;
  107. font-size:10px;
  108. text-transform:uppercase;
  109. background-color:#ffffff;
  110. opacity:.7;
  111. }
  112.  
  113.  
  114.  
  115.  
  116.  
  117.  
  118. #display {
  119. width:850px;
  120. height:600px;
  121. margin-top:10px;
  122. margin-bottom:10px;
  123. margin-left:auto;
  124. margin-right:auto;
  125. }
  126.  
  127. #displaycontainer {
  128. display:inline-block;
  129. margin:10px;
  130. width:250px;
  131. height:280px;
  132. padding:5px 5px 5px 5px;
  133. border:1px solid #030352;
  134. background-color:white ;
  135.  
  136. }
  137.  
  138.  
  139. #displaycontainer:hover #displaylinks {
  140. opacity:1;
  141. -o-transition: all 0.5s ease-in-out;
  142. -webkit-transition: all 0.5s ease-in-out;
  143. -moz-transition: all 0.5s ease-in-out;
  144. }
  145.  
  146.  
  147.  
  148.  
  149. #displaylinks {
  150. display:block;
  151. width:250px;
  152. height:210px;
  153. overflow:scroll;
  154. opacity:0;
  155. padding:2px 0px 2px 0px;
  156. background-color:white;
  157. font-family:calibri;
  158. font-size:10px;
  159. letter-spacing:2px;
  160. text-align:center;
  161. text-transform:uppercase;
  162. margin-top:10px;
  163. z-index:100000000000000000000;
  164. -o-transition: all 0.5s ease-out;
  165. -webkit-transition: all 0.5s ease-out;
  166. -moz-transition: all 0.5s ease-out;
  167. }
  168.  
  169. #displaylinks a {
  170. text-decoration:none;
  171. display:block;
  172. color:gray;
  173. padding:0px 1px 0px 2px;
  174. -o-transition: all 0.5s ease-out;
  175. -webkit-transition: all 0.5s ease-out;
  176. -moz-transition: all 0.5s ease-out;
  177. }
  178.  
  179. #displaylinks a:hover {
  180. color:white;
  181. background-color:#C3C3DE;
  182. -o-transition: all 0.5s ease-out;
  183. -webkit-transition: all 0.5s ease-out;
  184. - -moz-transition: all 0.5s ease-out;
  185. }
  186.  
  187. #displaytitle {
  188. background-color: white;
  189. height:14px;
  190. width:250px;
  191. padding:5px 0px 5px 0px;
  192. border:1px solid #C3C3DE;
  193. font-family: calibri;
  194. font-size:12px;
  195. letter-spacing:1px;
  196. color:black;
  197. text-align:center;
  198. text-transform:uppercase;
  199. text-decoration:none;
  200. margin-top:120px;
  201. z-index:1000000000000;
  202. transition: all 0.5s ease-out;
  203. -o-transition: all 0.5s ease-in-out;
  204. -webkit-transition: all 0.5s ease-in-out;
  205. -moz-transition: all 0.5s ease-in-out;
  206. }
  207.  
  208. #displaycontainer:hover #displaytitle {
  209.  
  210. height:14px;
  211. width:250px;
  212. color:black;
  213. margin-top:20px;
  214. transition: all 0.5s ease-out;
  215. -o-transition: all 0.5s ease-in-out;
  216. -webkit-transition: all 0.5s ease-in-out;
  217. -moz-transition: all 0.5s ease-in-out;
  218. }
  219.  
  220.  
  221.  
  222.  
  223.  
  224. #credit a {
  225. display:inline-block;
  226. width:40px;
  227. background-color:#fff;
  228. color:gray;
  229. text-decoration:none;
  230. border-right:1px solid;
  231. border-left: 1px solid;
  232. border-color:#878787;
  233. padding: 2px 0px 2px 0px;
  234. -o-transition: all 1s ease-out;
  235. -webkit-transition: all 1s ease-out;
  236. -moz-transition: all 1s ease-out;
  237. }
  238.  
  239. #credit a:hover {
  240. background-color:#667371;
  241. color:#fff;
  242. border-color:#fff;
  243. -o-transition: all 1s ease-out;
  244. -webkit-transition: all 1s ease-out;
  245. -moz-transition: all 1s ease-out;
  246. }
  247.  
  248. #credit {
  249. display:inline-block;
  250. font-size:10px;
  251. font-family: calibri;
  252. text-align:center;
  253. letter-spacing:1px;
  254. width:40px;
  255. height:15px;
  256. position: fixed;
  257. padding-top:1px;
  258. right:25px;
  259. bottom:10px;
  260.  
  261. }
  262.  
  263.  
  264.  
  265. </style>
  266.  
  267. <body>
  268.  
  269. <!--Title-->
  270.  
  271. <div id="title">Navigation</div>
  272.  
  273.  
  274. <!--Links at Top-->
  275.  
  276. <div id="links"><a href ="/">Home</a><a href ="/ask">Ask</a><a href="/aboutme">About</a><a href ="/submit">Submit</a></div>
  277.  
  278.  
  279. <!--Picture-->
  280.  
  281. <div id="header"><img src="http://adastra.dept.ku.edu/wordpress/wp-content/uploads/2012/06/space4banner.png">
  282.  
  283. <div id="description">
  284. "Show me the stars"
  285. </div>
  286.  
  287. </div>
  288.  
  289. <!--Display/tags/whatever you care to put here I guess-->
  290.  
  291. <!--Category 1-->
  292.  
  293. <div id="display">
  294. <div id="displaycontainer" style="float:left;">
  295. <div id="displaytitle">Category 1</div>
  296. <div id="displaylinks">
  297. <a href="/tagged/1">Tag</a>
  298. <a href="/tagged/1">Tag</a>
  299. <a href="/tagged/1">Tag</a>
  300. <a href="/tagged/1">Tag</a>
  301. <a href="/tagged/1">Tag</a>
  302. <a href="/tagged/1">Tag</a>
  303. <a href="/tagged/1">Tag</a>
  304. <a href="/tagged/1">Tag</a>
  305. <a href="/tagged/1">Tag</a>
  306. <a href="/tagged/1">Tag</a>
  307. <a href="/tagged/1">Tag</a>
  308. <a href="/tagged/1">Tag</a>
  309. <a href="/tagged/1">Tag</a>
  310. <a href="/tagged/1">Tag</a>
  311. <a href="/tagged/1">Tag</a>
  312. <a href="/tagged/1">Tag</a>
  313. <a href="/tagged/1">Tag</a>
  314. <a href="/tagged/1">Tag</a>
  315. <a href="/tagged/1">Tag</a>
  316. <a href="/tagged/1">Tag</a>
  317. <a href="/tagged/1">Tag</a>
  318. <a href="/tagged/1">Tag</a>
  319. <a href="/tagged/1">Tag</a>
  320. <a href="/tagged/1">Tag</a>
  321. <a href="/tagged/1">Tag</a>
  322. <a href="/tagged/1">Tag</a>
  323. <a href="/tagged/1">Tag</a>
  324. </div>
  325. </div>
  326.  
  327.  
  328. <!--Category 2-->
  329.  
  330. <div id="display">
  331. <div id="displaycontainer" style="float:left;">
  332. <div id="displaytitle">Category 2</div>
  333. <div id="displaylinks">
  334. <a href="/tagged/1">Tag</a>
  335. <a href="/tagged/1">Tag</a>
  336. <a href="/tagged/1">Tag</a>
  337. <a href="/tagged/1">Tag</a>
  338. <a href="/tagged/1">Tag</a>
  339. <a href="/tagged/1">Tag</a>
  340. <a href="/tagged/1">Tag</a>
  341. <a href="/tagged/1">Tag</a>
  342. <a href="/tagged/1">Tag</a>
  343. <a href="/tagged/1">Tag</a>
  344. </div>
  345. </div>
  346.  
  347.  
  348. <!--Category 3-->
  349.  
  350. <div id="display">
  351. <div id="displaycontainer" style="float:left;">
  352. <div id="displaytitle">Category 3</div>
  353. <div id="displaylinks">
  354. <a href="/tagged/1">Tag</a>
  355. <a href="/tagged/1">Tag</a>
  356. <a href="/tagged/1">Tag</a>
  357. <a href="/tagged/1">Tag</a>
  358. <a href="/tagged/1">Tag</a>
  359. <a href="/tagged/1">Tag</a>
  360. <a href="/tagged/1">Tag</a>
  361. <a href="/tagged/1">Tag</a>
  362. <a href="/tagged/1">Tag</a>
  363. <a href="/tagged/1">Tag</a>
  364. </div>
  365. </div>
  366.  
  367.  
  368.  
  369. <!--Category 4-->
  370.  
  371. <div id="display">
  372. <div id="displaycontainer" style="float:left;">
  373. <div id="displaytitle">Category 4</div>
  374. <div id="displaylinks">
  375. <a href="/tagged/1">Tag</a>
  376. <a href="/tagged/1">Tag</a>
  377. <a href="/tagged/1">Tag</a>
  378. <a href="/tagged/1">Tag</a>
  379. <a href="/tagged/1">Tag</a>
  380. <a href="/tagged/1">Tag</a>
  381. <a href="/tagged/1">Tag</a>
  382. <a href="/tagged/1">Tag</a>
  383. <a href="/tagged/1">Tag</a>
  384. <a href="/tagged/1">Tag</a>
  385. </div>
  386. </div>
  387.  
  388.  
  389.  
  390. <!--Category 5-->
  391.  
  392. <div id="display">
  393. <div id="displaycontainer" style="float:left;">
  394. <div id="displaytitle">Category 5</div>
  395. <div id="displaylinks">
  396. <a href="/tagged/1">Tag</a>
  397. <a href="/tagged/1">Tag</a>
  398. <a href="/tagged/1">Tag</a>
  399. <a href="/tagged/1">Tag</a>
  400. <a href="/tagged/1">Tag</a>
  401. <a href="/tagged/1">Tag</a>
  402. <a href="/tagged/1">Tag</a>
  403. <a href="/tagged/1">Tag</a>
  404. <a href="/tagged/1">Tag</a>
  405. <a href="/tagged/1">Tag</a>
  406. </div>
  407. </div>
  408.  
  409.  
  410.  
  411. <!--Category 6-->
  412.  
  413. <div id="display">
  414. <div id="displaycontainer" style="float:left;">
  415. <div id="displaytitle">Category 6</div>
  416. <div id="displaylinks">
  417. <a href="/tagged/1">Tag</a>
  418. <a href="/tagged/1">Tag</a>
  419. <a href="/tagged/1">Tag</a>
  420. <a href="/tagged/1">Tag</a>
  421. <a href="/tagged/1">Tag</a>
  422. <a href="/tagged/1">Tag</a>
  423. <a href="/tagged/1">Tag</a>
  424. <a href="/tagged/1">Tag</a>
  425. <a href="/tagged/1">Tag</a>
  426. <a href="/tagged/1">Tag</a>
  427. </div>
  428. </div>
  429.  
  430.  
  431. <!-------------------------------------------------------------------------------- I don't care if you edit, but please for the love of god do not -----
  432. -------------------- remove the credit on my stuff -------------------------
  433. --------------------------------------------------------------------------->
  434.  
  435. <div id="credit">
  436. <div style="font-size:12; font-style:italic; text-align:center; padding-left:2px; padding-right:2px;"><a href="http://theleakycauldron.co.vu"> ---a---</a></div>
  437. </div>
  438.  
  439. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement