-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (125 loc) · 9.87 KB
/
index.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Awesome Footer</title>
<link rel="stylesheet" href="footer.css" type="text/css" />
</head>
<body>
<div id="footer">
<ul id="footer_menu">
<li class="homeButton"><a href="#">HOME</a></li>
<li><a href="#">Account</a>
<div class="one_column_layout">
<div class="col_1">
<a class="headerLinks">Stream</a>
<a class="headerLinks">Messages</a>
<a class="listLinks" style="font-weight:bold;color:white;">Inbox (3)</a>
<a class="listLinks">Sent</a>
<a class="listLinks">Trash</a>
<a class="listLinks">Compose</a>
<a class="headerLinks">Pictures</a>
<a class="listLinks">Manage Albums</a>
<a class="listLinks">Manage Photos</a>
<a class="listLinks">View All</a>
<a class="headerLinks">Information</a>
<a class="listLinks">Basic Info</a>
<a class="listLinks">Contact</a>
<a class="listLinks">Education</a>
<a class="listLinks">Employment</a>
<a class="listLinks">Links</a>
<a class="headerLinks">Friends</a>
<a class="listLinks">All</a>
<a class="listLinks" style="font-weight:bold;color:white;">Requested (13)</a>
<a class="listLinks">Pending</a>
</div>
</div>
</li>
<li><a href="#">Profile</a>
<div class="three_column_layout">
<div class="col_3">
<h2>Example of Three Columns</h2>
</div>
<div class="col_1">
<p>This is a three columns example.Check this layout outtt.</p>
</div>
<div class="col_1">
<p>This another section !! What else do you need!!.</p>
</div>
<div class="col_1">
<p>any information goes here.Anything can be hardcoded or computationally given here.whatever you wanna do</p>
</div>
<div class="clear"></div>
<div class="col_1">
<p class="black_box">The numbers '172' can be found on the back of the U.S. $5 dollar bill in the bushes at the base of the Lincoln Memorial..
</p>
</div>
<div class="col_2">
<p>SPresident Kennedy was the fastest random speaker in the world with upwards of 350 words per minute.In the average lifetime, a person will walk the equivalent of 5 times around the equator.Odontophobia is the fear of teeth.The 57 on Heinz ketchup bottles represents the number of varieties of pickles the company once had.In the early days of the telephone, operators would pick up a call and use the phrase, "Well, are you there?". It wasn't until 1895 that someone suggested answering the phone with the phrase "number please?"The surface area of an average-sized brick is 79 cm squared.According to suicide statistics, Monday is the favored day for self-destruction.Cats sleep 16 to 18 hours per day.The most common name in the world is Mohammed.
</p>
</div>
<div class="clear"></div>
<div class="col_3">
<h2>My Profile</h2>
</div>
<div class="col_3"> <!-- Examples of paragraphs with side images -->
<p>
<img src="propic.jpg" class="img_left whiteBorder" alt="Hi!This is me" >
<a style="display:inline;font-weight:bold;color:white;">Aneri Shah</a>
<a href="#">Read more...</a>
</p>
</div>
</div>
</li>
<li><a href="#">Two Columns</a>
<div class="two_column_layout">
<div class="col_2">
<h2>Two Column Layout</h2>
</div>
<div class="col_1">
<p>This is a two columns example.Karaoke means empty orchestra in japanese.</p>
</div>
<div class="col_1">
<p>Rhode Island is the smallest state with the longest name. The official name, used on all state documents, is "Rhode Island and Providence Plantations."</p>
</div>
<div class="clear"></div>
<div class="col_2">
<p>The newspaper serving Frostbite Falls, Minnesota, the home of Rocky and Bullwinkle, is the Picayune Intellegence.Karaoke means empty orchestra in japanese</p>
</div>
</div>
</li>
<li>
<a href="#">Programs</a>
<ul class="dropup">
<li><a href="#">Calculator</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Chats</a></li>
<li><a href="#">Text Editor</a></li>
</ul>
</li>
<li class="right"><a href="#" class="drop">Log Out</a>
</li>
</ul>
<ul id="notifications">
<li><a href="#" class="notificationsIcons"><img src='twitter.png' style="width:36px;height:32px;" alt=""></a></li>
<li><a href="#" class="notificationsIcons"><img src='insta.png' style="width:44px;height:44px;" alt=""></a></li>
<li>
<a href="#" class="notificationsIcons"><img src='fb.png'style="width:48px;height:44px;" alt="" >
<span>
<img src="propic.jpg" style="float:left;width:24px;margin-right:5px;"/>
<div style="display:inline;color:#CC0000;font-weight:bold;">Shawn</div> liked your post ":p"
<hr style="border:none;border-bottom:1px solid #777777;"/>
<img src="propic.jpg" style="float:left;width:24px;margin-right:5px;"/>
<div style="display:inline;color:#CC0000;font-weight:bold;">Shawn</div> liked your post ":)"
<hr style="border:none;border-bottom:1px solid #777777;"/>
<img src="propic.jpg" style="float:left;width:24px;margin-right:5px;"/>
<div style="display:inline;color:#CC0000;font-weight:bold;">Zac</div> commented on your post"
</span>
</a>
</li>
</ul>
</div>
</body>
</html>