First commit

The Creation of Justin

css/main.css

@@ -0,0 +1,116 @@
+/*
+Made by Heather Huynh
+Ask before using!
+*/
+
+ html,body { 
+	height: 100%; 
+	margin: 0px; 
+	padding: 0px; 
+	overflow: hidden;
+	text-align: center;
+}
+
+#background {
+	height: 100%;
+	width: 100%;
+	position: absolute; 
+	top: 0; 
+	left: 0;
+	z-index: -9000;
+}
+
+.selected {
+	text-decoration: underline;
+	}
+
+#nav span {
+	padding-right:2em;
+	cursor:pointer;
+}
+
+#background img {
+	height:100%;
+	width: 100%;
+	position:absolute;
+	left:0;
+	-webkit-transition: opacity 1s ease-in-out;
+	-moz-transition: opacity 1s ease-in-out;
+	-o-transition: opacity 1s ease-in-out;
+	transition: opacity 1s ease-in-out;
+	opacity:0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+}
+
+#background img.opaque {
+	height:100%;
+	width: 100%;
+	opacity:1;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=1);
+ }
+
+#main {
+	 background: rgba(255, 255, 255, 0.5);
+}
+
+
+h1 {
+	text-align: center;
+	text-transform: uppercase;
+	font-family: Copperplate, "Copperplate Gothic Light", fantasy;
+	font-weight: bold;
+	font-size: 450%;
+	margin: 20% 0 0 0;
+	color: #393636;
+	vertical-align: middle;
+}
+
+#nav {
+	text-align: center;
+	font-weight: bold;
+	color: #393636;
+	font-family:"Times New Roman", Times, serif;
+	font-size: 235%;
+	margin: 0 0 6px 0;
+}
+
+/* unvisited link */
+a:link {
+	color: #393636;
+	text-decoration: none;
+}
+
+/* visited link */
+a:visited {
+	color: #393636;
+	text-decoration: none;
+}
+
+/* mouse over link */
+a:hover {
+	color: #393636;
+	text-decoration: none;
+}
+
+/* selected link */
+a:active {
+	color: #393636;
+	text-decoration: none;
+}
+
+.index {
+	vertical-align: middle;
+	height: 100%;
+}
+
+.content {
+	margin: 0 10% 0 10%;
+	color: #393636;
+}
+
+.emphasize {
+	font-size: 110%;
+	font-weight: bold;
+}

custom.js

@@ -0,0 +1,65 @@
+$(document).ready(function() {
+	$("#nav").click(function(){
+		$("h1").animate({
+		//opacity: "50%",
+		fontSize: "200%",
+		margin: "45% 0 0 0"
+		}, 1500);
+		$("#nav").animate({
+		//opacity: "50%",
+		fontSize: "100%",
+		}, 1500);
+	});
+	$("#nav").on('click', 'span', function() {
+		$("#background img").removeClass("opaque");
+
+		var newImage = $(this).index();
+
+		$("#background img").eq(newImage).addClass("opaque");
+
+		$("#nav span").removeClass("selected");
+		$(this).addClass("selected");
+	});
+	/*$("a#link1").click(function() {
+			$("#background").css("background", "url(img/image_1.jpg) no-repeat center center fixed");
+			$("#background").css("-webkit-background-size", "cover");
+			$("#background").css("-moz-background-size", "cover");
+			$("#background").css("-o-background-size", "cover");
+			$("#background").css("background-size", "cover");
+		});
+	$("a#link2").click(function() {
+			$("#background").css("background", "url(img/image_2.jpg) no-repeat center center fixed");
+			$("#background").css("-webkit-background-size", "cover");
+			$("#background").css("-moz-background-size", "cover");
+			$("#background").css("-o-background-size", "cover");
+			$("#background").css("background-size", "cover");
+		});
+	$("a#link3").click(function() {
+			$("#background").css("background", "url(img/image_3.jpg) no-repeat center center fixed");
+			$("#background").css("-webkit-background-size", "cover");
+			$("#background").css("-moz-background-size", "cover");
+			$("#background").css("-o-background-size", "cover");
+			$("#background").css("background-size", "cover");
+		});
+	$("a#link4").click(function() {
+			$("#background").css("background", "url(img/image_4.jpg) no-repeat center center fixed");
+			$("#background").css("-webkit-background-size", "cover");
+			$("#background").css("-moz-background-size", "cover");
+			$("#background").css("-o-background-size", "cover");
+			$("#background").css("background-size", "cover");
+		});
+	$("a#link5").click(function() {
+			$("#background").css("background", "url(img/image_5.jpg) no-repeat center center fixed");
+			$("#background").css("-webkit-background-size", "cover");
+			$("#background").css("-moz-background-size", "cover");
+			$("#background").css("-o-background-size", "cover");
+			$("#background").css("background-size", "cover");
+		});
+	$("a#link6").click(function() {
+			$("#background").css("background", "url(img/image_6.jpg) no-repeat center center fixed");
+			$("#background").css("-webkit-background-size", "cover");
+			$("#background").css("-moz-background-size", "cover");
+			$("#background").css("-o-background-size", "cover");
+			$("#background").css("background-size", "cover");
+		});*/
+});

index.html

@@ -0,0 +1,26 @@
+<html>
+<head>
+	<!--Comments look like this-->
+	<title>The Creation of Justin</title>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="css/main.css">
+	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
+	<script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
+	<script type="text/javascript" src="custom.js"></script>
+</head>
+<body>
+<div id="background">
+<img id ="img" src="img/image_1.jpg">
+<img id ="img" src="img/image_2.jpg">
+<img id ="img" src="img/image_3.jpg">
+<img id ="img" src="img/image_4.jpg">
+<img id ="img" src="img/image_5.jpg">
+<img id ="img" src="img/image_6.jpg">
+</div>
+<div id="main"><h1>The Creation of Justin</h1><br>
+<div id="nav"><span>I</span><span>II</span><span>III</span><span>IV</span><span>V</span><span>VI</span></div>
+</div>
+
+
+</body>
+</html>