crypteex.github.io/index.html at master · zaaaach/crypteex.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
	<!-- style sheet for page -->
	<link rel="stylesheet" type="text/css" href="mainpage.css" media="screen" />
	<!-- fonts -->
	<link href='http://fonts.googleapis.com/css?family=Raleway:800,700,300' rel='stylesheet' type='text/css'>
	<title>Zachary Calman</title>
</head>
<body>
	<!-- Header bar. Will span length of page. -->
	<div class="header">
		<!-- Left aligned name as title -->
		<div class="title">
			<h1>Zach</h1>
		</div>
		<!-- All nav elements will be stacked horizontally and left aligned -->
		<div class="navigation">
			<ul>
				<li>Bio</li>
				<li>Projects</li>
				<li>Resume</li>
				<li>Contact</li>
			</ul>
		</div>
	</div>

	<!-- Bio section. Text right aligned, images left aligned. -->
	<div class="container" id="bio-section">
		<div class="entry">
			<div class="image" id="bio-image">
				<img src="http://placehold.it/300x300" alt="My Face">
			</div>
			<div class="text" id="bio-text">
				<h1>A visionary, kind of.</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>

	<div class="section-spacer" id="bio-project-section-spacer">
		<h1>Projects</h1>
		<p>A selection of my previous work, a mix of personal and business projects.</p>
	</div>

	<!-- this container will hold the entirety of the project section. should be 3 projects-ish -->
	<div class="container" id="project-section">
			<ul class="project-list">
				<li class="project-selection"><a id="link" href="iheartpaint.html">A</a></li>
				<li class="project-selection">B</li>
				<li class="project-selection">C</li>
			</ul>
			<div class="content">
				<p>Hey look at me I'm a computer</p>
			</div>

			<!--<div class="image">
				<img src="http://placehold.it/300x300" alt="Project Picture">
			</div>
			<div class="text">
				<h1>iHeartPaint</h1>
				<p>Paint swatches, upgraded.</p>
			</div>-->
	</div>

	<!-- jquery source -->
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

	<script>
		$('body').on('click', '.project-selection', function(event) {
			event.preventDefault();

			$('.content').fadeOut(400, function() {
				$('.content').load("iheartpaint.html #text", function() {
					$('content').fadeIn(400);
				});
			});
		});
	</script>
</body>
</html>