e-journal-html/profile.htm at master · aacohn84/e-journal-html · 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
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="profile.css">
	</head>
	<div id="content">
			<nav id="header">
				<ul id="nav">
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 1</a></li>
				</ul>
			</nav>
			<div id="profile-picture">
				<h2 class="section-heading">Sixth Grade Student</h2>
				<img src="images/profile_pic.jpg">
			</div>
			<article id="profile-goals">
				<h2 class="section-heading">Goals</h2>
				<div id="progress">
					<span id="percent">30%</span>
					<div id="bar"></div>
				</div>
			</article>
			<article id="profile-writing-feed">
				<h2 class="section-heading">Writing Feed</h2>
				<section>
					<div class="profile-pic-tiny">
						<img src="images/tiny-profile-pic.png">
					</div>
					<div class="comment-area">
						<a href="#">Sixth Grade Student</a><br>
						Lorem ipsum dolor sit amet, consectetur adipisicing 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.
					</div>
				</section>
				<section>
					<div class="profile-pic-tiny">
						<img src="images/tiny-profile-pic.png">
					</div>
					<div class="comment-area">
						<a href="#">Sixth Grade Student</a><br>
						Lorem ipsum dolor sit amet, consectetur adipisicing 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.
					</div>
				</section>
				<section>
					<div class="profile-pic-tiny">
						<img src="images/tiny-profile-pic.png">
					</div>
					<div class="comment-area">
						<a href="#">Sixth Grade Student</a><br>
						Lorem ipsum dolor sit amet, consectetur adipisicing 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.
					</div>
				</section>
				<section>
					<div class="profile-pic-tiny">
						<img src="images/tiny-profile-pic.png">
					</div>
					<div class="comment-area">
						<a href="#">Sixth Grade Student</a><br>
						Lorem ipsum dolor sit amet, consectetur adipisicing 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.
					</div>
				</section>
			</article><!-- ./profile-writing-feed -->
			<aside id="profile-survey">
				<h2 class="section-heading">Survey</h2>
				<p>
					<b>Q: What is your quest?</b><br>
					A: To seek the grail.
				</p>
				<p>
					<b>Q: What is your favorite color?</b><br>
					A: Blue.
				</p>
				<p>
					<b>Q: What is the capital of Assyria?</b><br>
					A: What? I don't know tha- AHHHHHHH!!!
				</p>
			</aside>
			<aside id="profile-feedback">
				<h2 class="section-heading">Notable Feedback</h2>
			</aside>
			<nav id="footer">
				<a href="#">Link 1</a>
				<a href="#">Link 1</a>
				<a href="#">Link 1</a>
				<a href="#">Link 1</a>
			</nav>
		</div>
	</body>
</html>