Add a menu kind of sorts

index.html

@@ -19,6 +19,12 @@ body {
 	margin: 0 auto;
 }
 
+.tabs {
+	float: left;
+	margin-right: 20px;
+	height: 100%;
+}
+
 .tabs a {
 	color: #ff9800;
 	border-bottom: 1px solid #ff2e88;
@@ -27,6 +33,11 @@ body {
 
 .tabs .active {
 	background-color: #ff2e88;
+	color: #ccc;
+}
+
+.hidden {
+	display: none;
 }
 		</style>
 	</head>
@@ -43,9 +54,29 @@ body {
 			This page is intentionally badly designed, 'cause the real content resides on the subdomains.
 		</h3>
 
-		<div class="tabs">
-			<!-- <a href="#blog">Blog</a> -->
-			<a href="https://git.juliobiason.me">Git</a>
+		<div>
+			<div class="tabs">
+				<!-- <a href="#blog">Blog</a> -->
+				<a href="#git">Git</a>
+			</div>
+			
+			<div class="panels">
+				<div id="git" class="hidden">
+					I keep my own code repository on <a href="https://git.juliobiason.me">https://git.juliobiason.me</a>.
+				</div>
+			</div>
 		</div>
 	</body>
+
+	<script src="zepto.min.js" charset="utf-8"></script>
+	<script charset="utf-8">
+		$('.tabs a').on('click', function (ev) {
+			ev.preventDefault();
+			$('.tabs a').removeClass('active');
+			$('.panels div').addClass('hidden');
+			$(ev.target).addClass('active');
+			var target = $(ev.target).attr('href');
+			$(target).removeClass('hidden');
+		});
+	</script>
 </html>