Don't like ads? PRO users don't see any ads ;-)
Public Pastes

Family {2}

By: Donniert on Aug 20th, 2012  |  syntax: None  |  size: 11.09 KB  |  hits: 4,264  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!-- FAMILY 2 by Carlotta
  2.  http://donthemes.tumblr.com/
  3.  don't remove credits -->
  4.  
  5. <!------ RULES ------>
  6.  
  7. <!--
  8. 1. DO NOT REMOVE CREDITS
  9. 2. DO NOT REPOST THE CODE
  10. 3. DO NOT CLAIM AS YOURS
  11. 4. DO NOT USE IT AS A BASE
  12. -->
  13.  
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16. <head>
  17.  
  18. <!------ YOU CAN CHANGE THE TITLE. REPLACE "FAMILY" ------>
  19. <title>Family</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <style type="text/css">
  24.  
  25. /* -- BACKGROUND -- */
  26.  
  27. body {
  28. background-color: #f8f8f8;
  29. background-image: url('http://i48.tinypic.com/2dhwt4m.png');
  30. background-repeat: repeat;
  31. background-attachment: fixed;
  32.  
  33. <! --- HERE YOU CAN CHANGE THE SCROLLBAR FOR INTERNET EXPLORER. PAY ATTENTION WHEN YOU CHANGE THE BACKGROUND. IF YOU WILL NEED THIS AFTER I CHANGED THE CODE ---->
  34. scrollbar-face-color: #fff;
  35. scrollbar-highlight-color: #fff;
  36. scrollbar-shadow-color: #fff;
  37. scrollbar-3dlight-color: #fff;
  38. scrollbar-arrow-color: #fff;
  39. scrollbar-track-color: #fff;
  40. scrollbar-darkshadow-color: #fff;}
  41.  
  42. /* CHROME SCROLLBAR */
  43.  
  44. ::-webkit-scrollbar-thumb:vertical {
  45. background:transparent;
  46. height:100px; }
  47.  
  48. ::-webkit-scrollbar {
  49. height:10px;
  50. width:8px;
  51. background:transparent; }
  52.  
  53. /* -- SIDEBAR BACKGROUND -- */
  54.  
  55. #header {
  56. position:fixed;
  57. top: 0px;
  58. left: 260px;
  59. z-index:1;
  60. background-color: #464646;
  61. background-image: url('IMAGEURL');
  62. border-left: 4px #464646 solid;
  63. border-right: 4px #464646 solid;
  64. width: 250px;
  65. height: 100%; }
  66.  
  67. /* ---- SIDEBAR ---- */
  68.  
  69. #side {
  70. position: fixed;
  71. width: 200px;
  72. top: 90px;
  73. padding:25px;
  74. left: 260px;
  75. font-family: helvetica;
  76. font-size:10px;
  77. height:auto;
  78. text-align: center;
  79. color: #c3c3c3;
  80. background:transparent;
  81. z-index:3;}
  82.  
  83. #side a {
  84. letter-spacing:1px;
  85. color: #f7c7e5;
  86. text-decoration: none;
  87. -webkit-transition: all 0.7s ease;
  88. -moz-transition: all 0.7s ease;
  89. -o-transition: all 0.7s ease;}
  90.  
  91. #side a:hover {
  92. color: #fff;}
  93.  
  94. #side img {
  95. width: 200px;
  96. height: 200px;
  97. border:#f8f8f8 2px solid;
  98. padding-left:-2px;}
  99.  
  100. /* -- NAVIGATION BAR -- */
  101.  
  102. #nav {
  103. position:fixed;
  104. top: 115px;
  105. left:140px;
  106. font-size: 9px;}
  107.  
  108. /* -- NAVIGATION LINKS -- */
  109.  
  110. #nav a {
  111. display:inline-block;
  112. font-family:helvetica;
  113. margin-bottom: 4px;
  114. width:100px;
  115. text-align: right;
  116. padding: 3px;
  117. letter-spacing: 2px;
  118. color:#353535;
  119. border-right: 3px solid #464646;
  120. text-decoration:none;
  121. text-transform:uppercase;
  122. -webkit-transition: all 0.3s ease;
  123. -moz-transition: all 0.3s ease;
  124. -o-transition: all 0.3s ease;}
  125.  
  126. #nav a:hover {
  127. color: #c27491;
  128. margin-left:3px;
  129. border-right: 1px solid #464646;
  130. -webkit-transition: all 0.3s ease;
  131. -moz-transition: all 0.3s ease;
  132. -o-transition: all 0.3s ease;}
  133.  
  134. /* -- CONTAINER -- */
  135.  
  136. #content {
  137. position: absolute;
  138. width: 500px;
  139. top: 0px;
  140. margin-left: 700px;
  141. margin-bottom:-10px;}
  142.  
  143. /* -- EVERY BOX -- */
  144.  
  145. .container {
  146. position: relative;
  147. font-size: 10px;
  148. font-family: arial;
  149. padding: 4px;
  150. width: 400px;
  151. margin-top:20px;
  152. margin-bottom:15px;
  153. text-decoration:none;}
  154.  
  155. /* -- DESCRIPTION LINKS -- */
  156.  
  157. .container a {
  158. color: #db777a;
  159. text-decoration: none;
  160. -webkit-transition: all 0.7s ease;
  161. -moz-transition: all 0.7s ease;
  162. -o-transition: all 0.7s ease;}
  163.  
  164. .container a:hover {
  165. color: #000;}
  166.  
  167. /* -- EVERY TITLE -- */
  168.  
  169. .title{
  170. position:relative;
  171. margin-top:0px;}
  172.  
  173. .title a {
  174. display:block;
  175. font-size:12px;
  176. color: #353535;
  177. background: #fff;
  178. border-bottom: 1px solid #fff;
  179. font-family:helvetica;
  180. text-align: left;
  181. line-height:110%;
  182. text-transform:uppercase;
  183. text-decoration: none;}
  184.  
  185. .title a:hover {
  186. color: #f1f1f1;
  187. background: #c27491;
  188. -webkit-transition: all 0.9s ease;
  189. -moz-transition: all 0.9s ease;
  190. -o-transition: all 0.9s ease;}
  191.  
  192. /* -- EVERY IMAGE -- */
  193.  
  194. .descr img {
  195. position:relative;
  196. float:left;
  197. margin-top:-20px;
  198. margin-left: -80px;
  199. width: 70px;
  200. height:70px;}
  201.  
  202. /* -- EVERY DESCRIPTION -- */
  203.  
  204. .descr {
  205. position: relative;
  206. background-color: #f4f4f4;
  207. font-family: helvetica;
  208. font-size: 10px;
  209. padding:5px;
  210. text-align: justify;
  211. color: #353535;
  212. text-trasformation: lowercase;}
  213.  
  214. </style>
  215. </head>
  216. <body>
  217.  
  218. <div id="header"></div><div id="side">
  219.  
  220. <!-- SIDEBAR IMAGE . CHANGE THE IMAGE BY CHANGING THE URL -->
  221. <img src="http://i47.tinypic.com/efp47r.jpg"><br><br>
  222.  
  223. <!-- SIDEBAR DESCRIPTION -->
  224. put here your description. text text text text text text text text text text text text text text text text and so on and on<br><br>sibebar gif <a href="http://wesleypaul.tumblr.com/">credit</a><br><br>pay attention: this is a preview so i used the anon icon, when you will add your family/follow forever you just need to replace the link of every image with the icon of that person or well, you can do whatever you want, just don't delete the credit
  225. <br></div>
  226.  
  227. <! -- NAV LINKS . ADD OTHER LINKS AFTER ASK, COPY AN ENTIRE LINE AND CHANGE THE URL AND THE NAME OF THE URL -->
  228. <div id="nav">
  229. <a href="/">home</a><br>
  230. <a href="/ask">askbox</a><br>
  231.  
  232. <a href="http://donthemes.tumblr.com">theme</a>
  233. </div>
  234.  
  235. <!-- DON'T DELETE THIS OR REPLACE IT OR CHANGE IT -->
  236. <div id="content">
  237. <div class="container">
  238.  
  239. <!-- HERE THE BOXS. TO ADD A NEW BOX COPY ALL THE TEXT FROM START TO END. TO REMOVE AN ENTIRE BOX DELETE FROM START TO END. CHANGE THE ANON ICON WITH YOUR IMAGE URL -->
  240.  
  241. <!--START-->
  242.  
  243. <div class="title"><a href="LINK">» here title name</a></div>
  244. <div class="descr">
  245. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  246. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  247. <br><br><br><br>
  248.  
  249. <!--END-->
  250.  
  251. <!--START-->
  252.  
  253. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  254. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  255. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  256. <br><br><br><br>
  257.  
  258. <!--END-->
  259.  
  260. <!--START-->
  261.  
  262. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  263. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  264. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  265. <br><br><br><br>
  266.  
  267. <!--END-->
  268.  
  269. <!--START-->
  270.  
  271. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  272. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  273. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  274. <br><br><br><br>
  275.  
  276. <!--END-->
  277.  
  278. <!--START-->
  279.  
  280. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  281. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  282. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  283. <br><br><br><br>
  284.  
  285. <!--END-->
  286.  
  287. <!--START-->
  288.  
  289. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  290. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  291. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  292. <br><br><br><br>
  293.  
  294. <!--END-->
  295.  
  296. <!--START-->
  297.  
  298. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  299. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  300. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  301. <br><br><br><br>
  302.  
  303. <!--END-->
  304.  
  305. <!--START-->
  306.  
  307. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  308. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  309. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  310. <br><br><br><br>
  311.  
  312. <!--END-->
  313.  
  314. <!--START-->
  315.  
  316. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  317. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  318. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  319. <br><br><br><br>
  320.  
  321. <!--END-->
  322.  
  323. <!--START-->
  324.  
  325. <div class="title"><a href="LINK">» here title name</a></div><div class="descr">
  326. <img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif">
  327. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="/">example of link</a> text text text text text text text text text text text text text text text text text text text text text text text  text text text text text text text text text text text text text text text text</div>
  328. <br><br><br><br>
  329.  
  330. <!--END-->
  331.  
  332.  
  333. </body></html>
create a new version of this paste RAW Paste Data