e-law-ise

html4

Mar 17th, 2014
526
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.07 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. html, body {
  36. width:100%;
  37. height:100%;
  38. margin:0;
  39. padding:0;
  40. }
  41.  
  42. #top {
  43. width:100%;
  44. height:150px;
  45. margin-right:auto;
  46. margin-left:auto;
  47. top:0px;
  48. text-align:center;
  49. background-color:#E1E1E3;
  50. border-bottom:2px solid #A7A7A8;
  51. padding-bottom:5px;
  52. position:absolute;
  53. }
  54.  
  55. #toppic{
  56. width:100%;
  57. height:20px;
  58. margin-right:auto;
  59. margin-left:auto;
  60. top:0px;
  61. text-align:center;
  62. }
  63. #toppic img{
  64. width:100%;
  65. height:50px;
  66. }
  67.  
  68. #toppicleft{
  69. width:120px;
  70. height:auto;
  71. left:5px;
  72. top:165px;
  73. position:absolute;
  74. }
  75. #toppicleft img{
  76. width:120px;
  77. height:120px;
  78. }
  79. #toppicright{
  80. width:120px;
  81. height:auto;
  82. right:5px;
  83. top:165px;
  84. position:absolute;
  85. }
  86. #toppicright img{
  87. width:120px;
  88. height:120px;
  89. }
  90.  
  91.  
  92. #title {
  93. width:200px;
  94. height:auto;
  95. margin-right:auto;
  96. margin-left:auto;
  97. margin-top:75px;
  98. color:#A7A7A8;
  99. text-align:center;
  100. font-family:calibri;
  101. font-size:25px;
  102. font-style:italic;
  103. text-transform:uppercase;
  104. position:relative;
  105. }
  106.  
  107. #links {
  108. width:400px;
  109. margin-left:auto;
  110. margin-right:auto;
  111. margin-top:5px;
  112. padding-bottom:0px;
  113. position:relative;
  114. }
  115.  
  116. #links a {
  117. display:inline-block;
  118. width:92px;
  119. padding:5px 0px 5px 0px;
  120. background-color:#ffffff;
  121. color:#CCCCCC;
  122. font-size:10px;
  123. font-family:calibri;
  124. text-align:center;
  125. letter-spacing:1px;
  126. margin-left:auto;
  127. margin-right:auto;
  128. text-transform:uppercase;
  129. text-decoration:none;
  130. border: 1px solid #CCCCCC;
  131. -o-transition: all 0.5s ease-out;
  132. -webkit-transition: all 0.5s ease-out;
  133. -moz-transition: all 0.5s ease-out;
  134. }
  135.  
  136. #links a:hover {
  137. background-color:#E1E1E3;
  138. color:#ffffff;
  139. border: 1px solid #ffffff;
  140. -o-transition: all 0.5s ease-out;
  141. -webkit-transition: all 0.5s ease-out;
  142. -moz-transition: all 0.5s ease-out;
  143. }
  144.  
  145. #description {
  146. height:15px;
  147. width:200px;
  148. margin-right:auto;
  149. margin-left:auto;
  150. margin-top:175px;
  151. color:#A7A7A8;
  152. text-align:center;
  153. font-family:calibri;
  154. font-size:10px;
  155. text-transform:uppercase;
  156. position:relative;
  157. }
  158.  
  159. #tags{
  160. width:900px;
  161. height:260px;
  162. margin-left:auto;
  163. margin-right:auto;
  164. margin-top:30px;
  165. text-align:center;
  166. }
  167.  
  168. #tagscontainer{
  169. display:inline-block;
  170. width:200px;
  171. height:200px;
  172. text-align:center;
  173. padding:10px;
  174. }
  175. #tagstitle{
  176. display:inline-block;
  177. width:200px;
  178. height:auto;
  179. color:#A7A7A8;
  180. padding:5px 0px 5px 0px;
  181. background-color:white;
  182. font-size:14px;
  183. font-family:calibri;
  184. text-align:center;
  185. text-transform:uppercase;
  186. font-style:italic;
  187. border-bottom:1px dashed #A7A7A8;
  188. }
  189. #tagslinks{
  190. display:inline-block;
  191. width:200px;
  192. height:200px;
  193. overflow:scroll;
  194. padding:5px 0px 5px 0px;
  195. background-color:white;
  196. font-family:calibri;
  197. font-size:10px;
  198. letter-spacing:2px;
  199. text-align:center;
  200. text-transform:uppercase;
  201. margin-top:10px;
  202. z-index:100000000000000000000;
  203. -o-transition: all 0.5s ease-out;
  204. -webkit-transition: all 0.5s ease-out;
  205. -moz-transition: all 0.5s ease-out;
  206. }
  207. #tagslinks a {
  208. text-decoration:none;
  209. display:block;
  210. color:#A7A7A8;
  211. padding:2px 0px 2px 0px;
  212. -o-transition: all 0.5s ease-out;
  213. -webkit-transition: all 0.5s ease-out;
  214. -moz-transition: all 0.5s ease-out;
  215. }
  216.  
  217. #tagslinks a:hover {
  218. letter-spacing:6px;
  219. -o-transition: all 0.5s ease-out;
  220. -webkit-transition: all 0.5s ease-out;
  221. -moz-transition: all 0.5s ease-out;
  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.  
  270. <!-- Top Stuffs -->
  271.  
  272. <div id="top">
  273. <div id="title">navigation</div>
  274. <div id="links">
  275. <a href="/">HOME</a>
  276. <a href="/navi">NAVIGATION</a>
  277. <a href="/me">About Me</a>
  278. <a href="/inquire">ASK</a>
  279. </div>
  280. </div>
  281.  
  282. <!-- Corner Images -->
  283.  
  284. <div id="toppicright"><img src="http://s23.postimg.org/665502yrf/Untitled.jpg"></div>
  285. <div id="toppicleft"><img src="http://s29.postimg.org/j31szfbbr/Untitled_copy.jpg"></div>
  286.  
  287. <!-- Description -->
  288.  
  289. <div id="description">
  290. "so a kiss is out of the question?"
  291. </div>
  292.  
  293. <!-- First Row of Tags -->
  294.  
  295. <div id="tags">
  296. <div id="tagscontainer">
  297. <div id="tagstitle">Category</div>
  298. <div id="tagslinks">
  299. <a href="/">Test</a>
  300. <a href="/">Test</a>
  301. <a href="/">Test</a>
  302. <a href="/">Test</a>
  303. <a href="/">Test</a>
  304. <a href="/">Test</a>
  305. <a href="/">Test</a>
  306. <a href="/">Test</a>
  307. <a href="/">Test</a>
  308. <a href="/">Test</a>
  309. <a href="/">Test</a>
  310. <a href="/">Test</a>
  311. <a href="/">Test</a>
  312. <a href="/">Test</a>
  313. <a href="/">Test</a>
  314. <a href="/">Test</a>
  315. <a href="/">Test</a>
  316. <a href="/">Test</a>
  317. <a href="/">Test</a>
  318. <a href="/">Test</a>
  319. </div>
  320. </div>
  321. <div id="tagscontainer">
  322. <div id="tagstitle">Category</div>
  323. <div id="tagslinks">
  324. <a href="/">Test</a>
  325. <a href="/">Test</a>
  326. <a href="/">Test</a>
  327. <a href="/">Test</a>
  328. <a href="/">Test</a>
  329. <a href="/">Test</a>
  330. <a href="/">Test</a>
  331. <a href="/">Test</a>
  332. <a href="/">Test</a>
  333. <a href="/">Test</a>
  334. </div>
  335. </div>
  336. <div id="tagscontainer">
  337. <div id="tagstitle">Category</div>
  338. <div id="tagslinks">
  339. <a href="/">Test</a>
  340. <a href="/">Test</a>
  341. <a href="/">Test</a>
  342. <a href="/">Test</a>
  343. <a href="/">Test</a>
  344. <a href="/">Test</a>
  345. <a href="/">Test</a>
  346. <a href="/">Test</a>
  347. <a href="/">Test</a>
  348. <a href="/">Test</a>
  349. </div>
  350. </div>
  351. <div id="tagscontainer">
  352. <div id="tagstitle">Category</div>
  353. <div id="tagslinks">
  354. <a href="/">Test</a>
  355. <a href="/">Test</a>
  356. <a href="/">Test</a>
  357. <a href="/">Test</a>
  358. <a href="/">Test</a>
  359. <a href="/">Test</a>
  360. <a href="/">Test</a>
  361. <a href="/">Test</a>
  362. <a href="/">Test</a>
  363. <a href="/">Test</a>
  364. </div>
  365. </div>
  366. </div>
  367.  
  368.  
  369. <!-- Second Row of Tags -->
  370.  
  371. <div id="tags">
  372. <div id="tagscontainer">
  373. <div id="tagstitle">Category</div>
  374. <div id="tagslinks">
  375. <a href="/">Test</a>
  376. <a href="/">Test</a>
  377. <a href="/">Test</a>
  378. <a href="/">Test</a>
  379. <a href="/">Test</a>
  380. <a href="/">Test</a>
  381. <a href="/">Test</a>
  382. <a href="/">Test</a>
  383. <a href="/">Test</a>
  384. <a href="/">Test</a>
  385. </div>
  386. </div>
  387. <div id="tagscontainer">
  388. <div id="tagstitle">Category</div>
  389. <div id="tagslinks">
  390. <a href="/">Test</a>
  391. <a href="/">Test</a>
  392. <a href="/">Test</a>
  393. <a href="/">Test</a>
  394. <a href="/">Test</a>
  395. <a href="/">Test</a>
  396. <a href="/">Test</a>
  397. <a href="/">Test</a>
  398. <a href="/">Test</a>
  399. <a href="/">Test</a>
  400. </div>
  401. </div>
  402. <div id="tagscontainer">
  403. <div id="tagstitle">Category</div>
  404. <div id="tagslinks">
  405. <a href="/">Test</a>
  406. <a href="/">Test</a>
  407. <a href="/">Test</a>
  408. <a href="/">Test</a>
  409. <a href="/">Test</a>
  410. <a href="/">Test</a>
  411. <a href="/">Test</a>
  412. <a href="/">Test</a>
  413. <a href="/">Test</a>
  414. <a href="/">Test</a>
  415. </div>
  416. </div>
  417. <div id="tagscontainer">
  418. <div id="tagstitle">Category</div>
  419. <div id="tagslinks">
  420. <a href="/">Test</a>
  421. <a href="/">Test</a>
  422. <a href="/">Test</a>
  423. <a href="/">Test</a>
  424. <a href="/">Test</a>
  425. <a href="/">Test</a>
  426. <a href="/">Test</a>
  427. <a href="/">Test</a>
  428. <a href="/">Test</a>
  429. <a href="/">Test</a>
  430. </div>
  431. </div>
  432. </div>
  433.  
  434.  
  435. <!-------------------------------------------------------------------------------- I don't care if you edit, but please for the love of god do not -----
  436. -------------------- remove the credit on my stuff -------------------------
  437. --------------------------------------------------------------------------->
  438.  
  439. <div id="credit">
  440. <div style="font-size:12; font-style:italic; text-align:center; padding-left:2px; padding-right:2px;"><a href="http://ladymirkwoods.tumblr.com"> ---a---</a></div>
  441. </div>
  442.  
  443. </body>
Advertisement
Add Comment
Please, Sign In to add comment