Advertisement
e-law-ise

HTML7

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