Differences

This shows you the differences between two versions of the page.

--- the_gundersons [2020/01/08 15:58] – andrew
+++ the_gundersons [2020/01/08 16:07] (current) – andrew
@@ Line 1: / Line 1: @@
 ====== The Gundersons ======
-<HTML>
-<style>
-/*Now the CSS*/
-* {margin: 0; padding: 0;}
-.tree ul {
-	padding-top: 20px; position: relative;
-	transition: all 0.5s;
-	-webkit-transition: all 0.5s;
-	-moz-transition: all 0.5s;
-}
-.tree li {
-	float: left; text-align: center;
-	list-style-type: none;
-	position: relative;
-	padding: 20px 5px 0 5px;
-	transition: all 0.5s;
-	-webkit-transition: all 0.5s;
-	-moz-transition: all 0.5s;
-}
-/*We will use ::before and ::after to draw the connectors*/
-.tree li::before, .tree li::after{
-	content: '';
-	position: absolute; top: 0; right: 50%;
-	border-top: 1px solid #ccc;
-	width: 50%; height: 20px;
-}
-.tree li::after{
-	right: auto; left: 50%;
-	border-left: 1px solid #ccc;
-}
-/*We need to remove left-right connectors from elements without
-any siblings*/
-.tree li:only-child::after, .tree li:only-child::before {
-	display: none;
-}
-/*Remove space from the top of single children*/
-.tree li:only-child{ padding-top: 0;}
-/*Remove left connector from first child and
-right connector from last child*/
-.tree li:first-child::before, .tree li:last-child::after{
-	border: 0 none;
-}
-/*Adding back the vertical connector to the last nodes*/
-.tree li:last-child::before{
-	border-right: 1px solid #ccc;
-	border-radius: 0 5px 0 0;
-	-webkit-border-radius: 0 5px 0 0;
-	-moz-border-radius: 0 5px 0 0;
-}
-.tree li:first-child::after{
-	border-radius: 5px 0 0 0;
-	-webkit-border-radius: 5px 0 0 0;
-	-moz-border-radius: 5px 0 0 0;
-}
-/*Time to add downward connectors from parents*/
-.tree ul ul::before{
-	content: '';
-	position: absolute; top: 0; left: 50%;
-	border-left: 1px solid #ccc;
-	width: 0; height: 20px;
-}
-.tree li a{
-	border: 1px solid #ccc;
-	padding: 5px 10px;
-	text-decoration: none;
-	color: #666;
-	font-family: arial, verdana, tahoma;
-	font-size: 11px;
-	display: inline-block;
-	border-radius: 5px;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	transition: all 0.5s;
-	-webkit-transition: all 0.5s;
-	-moz-transition: all 0.5s;
-}
-/*Time for some hover effects*/
-/*We will apply the hover effect the the lineage of the element also*/
-.tree li a:hover, .tree li a:hover+ul li a {
-	background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
-}
-/*Connector styles on hover*/
-.tree li a:hover+ul li::after,
-.tree li a:hover+ul li::before,
-.tree li a:hover+ul::before,
-.tree li a:hover+ul ul::before{
-	border-color:  #94a0b4;
-}
-html {
- max-width:800px;
-}
-/*Thats all. I hope you enjoyed it.
-Thanks :)*/
-</style>
-<div class="tree">
-	<ul>
-		<li>
-			<a href="#">Gunderson Grandparents (&#9794; &#9792;)</a>
-			<ul>
-				<li>
-					<a href="http://lordsofhack.com/infinity/doku.php?id=grampa_backstory">Steve Gunderson&#9794;<br/>Mildred Gunderson (nee Nygma)&#9792;</a>
-					<ul>
-						<li>
-							<a href="#">Sally Proton (nee Gunderson)&#9792;<br/>Professor Hank Proton&#9794;</a>
-						<ul>
-							<li>
-								<a href="http://lordsofhack.com/infinity/doku.php?id=billy_backstory">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Billy (William) Proton&#9794;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
-							</li>
-						</ul>
-						</li>
-					</ul>
-				</li>
-				<li>
-					<a href="#">Frank Gunderson</a>
-					<ul>
-						<li><a href="http://lordsofhack.com/infinity/doku.php?id=felix_backstory">Felix Gunderson&#9794;</a></li>
-						<li>
-							<a href="#">Stanley Gunderson&#9794;</a>
-							<ul>
-								<li>
-									<a href="#">Stanley Gunderson Jr&#9794;</a>
-								</li>
-								<li>
-									<a href="#">Chad Gunderson&#9794;</a>
-								</li>
-								<li>
-									<a href="#">Catherine (Cat) Gunderson&#9792;</a>
-								</li>
-							</ul>
-						</li>
-					</ul>
-				</li>
-			</ul>
-		</li>
-	</ul>
-	<ul>
-	<li>
-		<a href="http://lordsofhack.com/infinity/doku.php?id=ramiel_backstory">Ramiel (Smith)&#9894;</a>
-	</li>
-	</ul>
-</div>
+<HTML>
+<iframe src="http://lordsofhack.com/infinity/gundersonGeneaology.html" style="border:none;width:100%; height:400px;"></iframe>
 </HTML>