API tools faq
paste
HendrixRPH

Family Tree Theme v1

HendrixRPH
Jun 23rd, 2015
2,771
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.50 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <link rel="shortcut icon" href="{Favicon}" />
  7.  
  8. <!--
  9.  
  10. Family Tree Theme v1, made by hendrixrph. Please don't redistrube, remove the credit, or use as a base. Feel free to change around colors and fonts and things though.
  11.  
  12. Special thanks to Ruby On Tails (I think?) for writing the original CSS3 Family Tree code tutorial that I used as a base.
  13.  
  14. -->
  15.  
  16. <title>Family Tree</title>
  17.  
  18. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  19. <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
  20.  
  21. <link rel="stylesheet" href="css/styles.css?v=1.0">
  22.  
  23. <style>
  24.  
  25. * {margin: 0; padding: 0;}
  26.  
  27. body {
  28. text-align:center;
  29. background:#333;
  30. font-family:"Lato", Helvetica, Arial, sans-serif;
  31. background-image:url(http://subtlepatterns.com/patterns/footer_lodyas.png);
  32. padding-top:70px;
  33. }
  34.  
  35. header {
  36. width:100%;
  37. background-color:#252525;
  38. padding:10px 5px;
  39. position:fixed;
  40. top:0;
  41. z-index:100;
  42. height:65px;
  43. text-align:left;
  44. }
  45.  
  46. header h1 {
  47. text-align:left;
  48. color:#F0FDFF;
  49. font-family:"Oswald", Helvetica, Arial, sans-serif;
  50. font-size:50px;
  51. letter-spacing:2px;
  52. padding-left:10px;
  53. position:absolute;
  54. left:20px;
  55. top:5px;
  56. font-weight:400;
  57. text-transform:uppercase;
  58. }
  59.  
  60. header .nav {
  61. position:absolute;
  62. right:30px;
  63. top:40%;
  64. }
  65.  
  66. header .nav a {
  67. text-decoration:none;
  68. color:#eee;
  69. text-transform:lowercase;
  70. font-family:"Lato", Helvetica, Arial, sans-serif;
  71. padding:0 10px;
  72. letter-spacing:2px;
  73. }
  74.  
  75. .tree {
  76. margin:0px auto;
  77. display:inline-block;
  78. }
  79.  
  80. .tree ul {
  81. padding-top:30px;
  82. position:relative;
  83. }
  84.  
  85. .tree li {
  86. float:left;
  87. text-align:center;
  88. list-style-type:none;
  89. position:relative;
  90. padding:30px 10px 0 10px;
  91. }
  92.  
  93.  
  94. .tree li::before, .tree li::after {
  95. content:'';
  96. position:absolute;
  97. top:0;
  98. right:50%;
  99. width:50%;
  100. height:30px;
  101. border-top: 1px solid #ccc;
  102. z-index:-1;
  103. }
  104.  
  105. .tree li::after {
  106. right:auto;
  107. left:50%;
  108. border-left: 1px solid #ccc;
  109. }
  110.  
  111. .tree li:only-child::after, .tree li:only-child::before {
  112. display:none;
  113. }
  114.  
  115. .tree li:only-child {
  116. padding-top:0;
  117. }
  118.  
  119. .tree li:first-child::before, .tree li:last-child::after {
  120. border:0;
  121. }
  122.  
  123. .tree li:last-child::before {
  124. border-right:1px solid #ccc;
  125. border-radius:0 10px 0 0;
  126. }
  127.  
  128. .tree li:first-child::after {
  129. border-radius: 10px 0 0 0;
  130. }
  131.  
  132. /*.tree li.lspouse::before, .tree li.lspouse::after {
  133. content:'';
  134. position:absolute;
  135. top:60%;
  136. width:30px;
  137. border:0;
  138. border-top:1px solid #ccc;
  139. border-radius:0;
  140. right:0;
  141. left:-20px;
  142. bottom:0;
  143. height:20px;
  144. }*/
  145.  
  146.  
  147. .tree ul ul::before {
  148. position:absolute;
  149. height:35px;
  150. border-left:1px solid #ccc;
  151. top:-5px;
  152. left:50%;
  153. content:'';
  154. }
  155.  
  156.  
  157. .tree li a {
  158. height:100px;
  159. width:100px;
  160. line-height:100px;
  161. border:1px solid #ccc;
  162. display:inline-block;
  163. border-radius:100px;
  164. -webkit-border-radius:100px;
  165. -moz-border-radius:100px;
  166. overflow:hidden;
  167. position:relative;
  168. z-index:5;
  169. }
  170.  
  171. .tree li a span + img {
  172. width:100px;
  173. }
  174.  
  175.  
  176. .tree li a span {
  177. position:absolute;
  178. height:100px;
  179. width:100px;
  180. border-radius:100px;
  181. top:0;
  182. left:0;
  183. padding:0;
  184. margin:0;
  185. opacity:0;
  186. transition:1s all;
  187. /*background-color:rgba(255,255,255,0.85);
  188. color:#222;*/
  189. background-color:rgba(0,0,0,0.65);
  190. color:#eee;
  191. letter-spacing:1px;
  192. font-size:11px;
  193. display:table-cell;
  194. vertical-align:middle;
  195. text-transform:lowercase;
  196. }
  197.  
  198. .tree li a span:hover {
  199. opacity:1;
  200. }
  201.  
  202. .credit {
  203. position:fixed;
  204. bottom:10px;
  205. right:10px;
  206. padding:5px 7px;
  207. background-color:#222;
  208. color:#ccc;
  209. font-size:10px;
  210. font-family:"Lato", Helvetica, Arial, sans-serif;
  211. transition:0.75s all;
  212. }
  213.  
  214. .credit:hover {
  215. color:#fff;
  216. }
  217.  
  218.  
  219. </style>
  220.  
  221. <!--[if lt IE 9]>
  222. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  223. <![endif]-->
  224. </head>
  225.  
  226. <body>
  227.  
  228. <header>
  229. <h1>Family Tree</h1>
  230. <div class="nav">
  231. <a href="#">Link 1</a>
  232. <a href="#">Link 2</a>
  233. <a href="#">Link 3</a>
  234. <a href="#">Link 4</a>
  235. </div>
  236.  
  237. </header>
  238.  
  239.  
  240. <!--
  241.  
  242. I apologize for all of the nested lists, it's messy but it was the only way to do this. I'm assuming that whoever is using this knows how <ul> and <li> tags work. If you don't, google can help you.
  243.  
  244. In order to create a new level in the tree, add a <ul> tag within the <li> tag of whoever you want to be the parent. Within that <ul>, make a <li> for each sibling on that level.
  245.  
  246. For organizational purposes, I recommend adding comments after the </li> that ends each entry with the name of the person in it. I already did that with the examples, feel free to edit those comments to start off.
  247.  
  248. I'm really sorry that you can't add spouses yet. I'm working on that (it's very buggy right now), and will hopefully release a new version someday. Until then, I hope this can work for something.
  249.  
  250. -->
  251.  
  252. <div class="wrapper">
  253. <div class="tree">
  254. <ul>
  255. <li>
  256. <a href="#"><span>Alice</span><img src=""></a>
  257. <ul>
  258. <li>
  259. <a href="#"><span>Bob</span><img src=""></a>
  260. </li> <!-- End Bob -->
  261. <li>
  262. <a href="#"><span>Charlie</span><img src=""></a>
  263. </li> <!-- End Charlie -->
  264. </ul>
  265. </li> <!-- End Alice -->
  266. </ul>
  267. </div>
  268.  
  269. <div class="credit">hendrixrph</div>
  270. </div>
  271.  
  272.  
  273. </body>
  274. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!