-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathviewprofile.html
105 lines (96 loc) · 3.14 KB
/
viewprofile.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/screen.css" media="screen, projection">
<title>{Profile Name}’s Profile</title>
</head>
<body class="view-profile">
<div class="wrapper">
<h1>{Profile Name} <small><a href="editprofile.html">Edit</a></small></h1>
<section class="details">
<img class="profile-photo avatar" src="http://placekitten.com/250">
<h2>Bio</h2>
<dl class="bio">
<div class="dli">
<dt>Native</dt>
<dd>English</dd>
</div>
<div class="dli">
<dt>Learning</dt>
<dd>Spanish</dd>
</div>
<div class="dli">
<dt>Age</dt>
<dd>16</dd>
</div>
<div class="dli">
<dt>Country</dt>
<dd>United States</dd>
</div>
<div class="dli">
<dt>City</dt>
<dd>Philadelphia</dd>
</div>
<div class="dli">
<dt>School</dt>
<dd>Science Leadership Academy</dd>
</div>
<div class="dli">
<dt>Grade</dt>
<dd>10</dd>
</div>
</dl>
<h2>Interests</h2>
<ul class="interests">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
<h2>Activities</h2>
<ul class="activities interests">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
<h2>Favorite Music</h2>
<ul class="music interests">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
</section>
<section class="notebook">
<a class="new-post" href="newnotebook.html">New Post</a>
<h2>Notebook Feed</h2>
<article>
<h3>Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in felis libero. Sed at rhoncus leo. Phasellus tempus imperdiet vulputate. Proin non rhoncus quam. Praesent sit amet velit sem, ac placerat mi. Morbi neque massa, suscipit in fermentum ac, imperdiet sed nulla. Quisque non egestas lectus. Sed at orci mi. Maecenas sed dolor quam.</p>
<footer>
<time pubdate>Posted two weeks ago</time> · <a href="#">Comment</a>
</footer>
</article>
<article>
<h3>Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in felis libero. Sed at rhoncus leo. Phasellus tempus imperdiet vulputate. Proin non rhoncus quam. Praesent sit amet velit sem, ac placerat mi. Morbi neque massa, suscipit in fermentum ac, imperdiet sed nulla. Quisque non egestas lectus. Sed at orci mi. Maecenas sed dolor quam.</p>
<footer>
<time pubdate>Posted two weeks ago</time> · <a href="#">Comment</a>
</footer>
</article>
<article>
<h3>Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in felis libero. Sed at rhoncus leo. Phasellus tempus imperdiet vulputate. Proin non rhoncus quam. Praesent sit amet velit sem, ac placerat mi. Morbi neque massa, suscipit in fermentum ac, imperdiet sed nulla. Quisque non egestas lectus. Sed at orci mi. Maecenas sed dolor quam.</p>
<footer>
<time pubdate>Posted two weeks ago</time> · <a href="#">Comment</a>
</footer>
</article>
</section>
</div>
</body>
</html>