-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
133 lines (120 loc) · 9.8 KB
/
index.html
File metadata and controls
133 lines (120 loc) · 9.8 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Facebook</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="top">
<header id="header">
<ul class="nav">
<li> <img src="Images/fb-logo.png" height="26" width="27" id="logo"/></li>
<div><li> <input type="text" placeholder=" Search" name="search" id="searchbox"/> </li>
<li><input type="image" src="Images/search-icon.png" width="14px" height="15px" id="search-button"value="search" /></li> </div>
<div id="nav-items">
<span id="dp">
<li><a href="#my-profile"> <img src="Images/dp.png" height="23" width="23" align="center" />
Muhammad</a></li></span> |
<li><a href="#home">Home</a></li> |
<li><a href="#create">Create</a></li> |
<li><a href="#friend-request"> <img src="Images/friend-req.png" height="20" width="20" align="center" /> </a> </li>
<li><a href="#messages"> <img src="Images/messenger-logo.png" height="20" width="20" align="center" /> </a></li>
<li><a href="#notifications"> <img src="Images/notification-bell.png" height="20" width="20" align="center" /> </a></li>|
<li><a href="#account-switcher" id="account-switcher"> <img src="Images/account-switcher.png" height="20.99" width="20.99" align="center" /></a></li>
<li><a href="#help" > <img src="Images/help.png" height="20" width="20" align="center" /> </a></li>
<li><a href="#settings"> <img src="Images/arrow.png" height="10.99" width="10.99" align="center" /> </a></li>
</div>
</ul>
</header>
</div>
<aside>
<div id="aside">
<ul id="side-list">
<li id="my-profile">
<a href="#my-profile"> <img src="Images/dp.png" height="19.99" width="19.99" align="center" /> Muhammad Talha </a>
</li> <br />
<li id="newsfeed"><a href="#news-feed"> <img src="Images/newsfeed.png" height="18.5" width="18.5" align="center" /> News Feed</a></li>
<li ><a href="#messenger"> <img src="Images/messenger.png" height="18.5" width="18.5" align="center" /> Messenger</a></li>
<li><a href="#media"> <img src="Images/media.png" height="18.5" width="18.5" align="center" /> Watch</a></li>
<h6 class="heading">Explore</h6>
<li><a href="#saved"> <img src="Images/saved.png" height="18.5" width="18.5" align="center" /> Saved</a></li>
<li><a href="#groups"> <img src="Images/groups.png" height="18.5" width="18.5" align="center" /> Groups</a></li>
<li><a href="#pages"> <img src="Images/pages.png" height="18.5" width="18.5" align="center" /> Pages</a></li>
<li><a href="#events"> <img src="Images/events.png" height="18.5" width="18.5" align="center" /> Events</a></li>
<li><a href="#friend-list"> <img src="Images/friend-list.png" height="18.5" width="18.5" align="center" /> Friend Lists</a></li>
<li id="seemore"><a href="#others"> <img src="Images/arrowsilver.png" height="8" width="10" align="center" /> See More...</a></li>
</ul>
</div>
</aside>
<div id="chat-section">
<ul id="chat-list">
<h6 class="heading">YOUR PAGES<a href="#pages" class="see-all">SEE ALL</a></h6>
<li><a href="#pages"> <img src="Images/page-3.png" height="32" width="32" align="center" /> Oyay</a></li>
<li><a href="#pages"> <img src="Images/page-1.png" height="32" width="32" align="center" /> Axiom Certified Web</a></li>
<li><a href="#pages"> <img src="Images/page-2.png" height="32" width="32" align="center" /> Zia Khan</a></li>
<h6 class="heading">CONTACTS</h6>
<li><a href="#contacts"> <img src="Images/contact-1.png" height="32" width="32" align="center" /> Abhinandan Varthaman</a></li>
<h6 class="heading">GROUP CONVERSATIONS</h6>
<li><a href="#creategroups"> <img src="Images/group-convo.png" height="32" width="32" align="center" /> Create New Group</a></li>
<h6 class="heading">MORE CONTACTS</h6>
<li><a href="#contacts"> <img src="Images/contact-2.png" height="32" width="32" align="center" /> Nawaz Sharif</a></li>
<li><a href="#contacts"> <img src="Images/contact-3.png" height="32" width="32" align="center" /> Bilawal Bhutto</a></li>
<li><a href="#contacts"> <img src="Images/contact-4.png" height="32" width="32" align="center" /> Imran Khan</a></li>
<li><a href="#contacts"> <img src="Images/contact-5.png" height="32" width="32" align="center" /> Mark Zuckerberg</a></li>
<div id="bottom-search">
<input type="image" src="Images/search-icon.png" width="11px" height="12px" id="search-button1"value="search" />
<input type="text" placeholder=" Search" name="search" id="search-contacts"/>
<li id="setting"><a href="#pages"> <img src="Images/setting.png" height="15" width="17" align="center" /></a></li>
<li id="new-message"><a href="#pages"> <img src="Images/new-message.png" height="15" width="17" align="center" /></a></li>
<li id="new-group"><a href="#pages"> <img src="Images/new-group.png" height="15" width="17" align="center" /></a></li></div>
</ul>
</div>
<div id="stories">
<ul id="story-list">
<h6 class="heading"><a href="#stories" id="story-heading">Stories</a></h6>
<a href="#archive" id="archive"> <img src="Images/archive.png" height="12.5" width="12.5" align="center" /> Archive</a>
<a href="#settings" id="see-all">Settings</a>
<li ><a href="#addstories" id="addtostory" class="li1"><span class="shape1"><img src="Images/add-stories.png" height="52" width="52" align="top" /></span > Add To Your Story</a><small id="description1">Share a photo, video or write something</small></li>
<li ><a href="#contacts" id="addtostory" class="li2"> <span class="shape1"><img src="Images/contact-1.png" height="52" width="52" align="top" /></span> Abhinandan Varthaman</a><small id="description2">2 hours ago</small></li>
<li ><a href="#contacts" id="addtostory" class="li3"> <span class="shape1"><img src="Images/contact-2.png" height="52" width="52" align="top" /></span> Nawaz Sharif</a><small id="description3">3 hours</small></li>
<li ><a href="#contacts" id="addtostory" class="li4"> <span class="shape1"><img src="Images/contact-4.png" height="52" width="52" align="top" /></span> Imran Khan</a><small id="description4">14 hours ago</small></li>
<li id="seemore1"><a href="#others"> <img src="Images/arrowsilver.png" height="8" width="11" align="center" /> See More</a></li>
</ul>
</div>
<div id="createpost">
<div id="createpost-heading">
<h6><a href="#createpost" id="post-heading">Create Post</a></h6>
</div>
<div id="post-area">
<a href="#my-profile"> <img src="Images/dp.png" height="40" width="40" align="center" /></a>
<input type="text" placeholder="What's on your mind, Muhammad?" name="search" id="write-area"/>
<span id="photo1"><a href="#photo"> <img src="Images/photo.png" height="18" width="18" align="center" /> Photo/Video</a></span>
<span id="photo2"><a href="#photo"> <img src="Images/tag.png" height="20" width="20" align="center" /> Tag Friends</a></span>
<span id="photo3"><a href="#photo"> <img src="Images/Feeling.png" height="20" width="20" align="center" /> Feeling/Activ...</a></span>
<span id="photo4"><a href="#photo"> <img src="Images/dots.png" height="6" width="18" align="center" /></a></span>
</div>
</div>
<div class="posts">
<span id="post1"><a href="#posts" ><img src="Images/contact-1.png" height="40" width="40" align="top" /> Abhinandan Varthaman</a><small id="updated-time">28 mins - <img src="Images/friends.png" height="11" width="13" align="top" /></small></span>
<img src="Images/meme.jpg" height="495" width="500" id="memes" />
<img src="Images/reacts.png" height="16" width="70" id="reacts" /><a href="#comments" id="comments"> 10 Comments</a> <a href="#shares" id="shares">80 Shares</a>
<hr id="hr1" />
<span class="like"><img src="Images/like.png" height="17px" width="17px" align="center"/> <a href="#like" >Like</a></span>
<span class="comment"><img src="Images/comment.png" height="17px" width="17px" align="center"/> <a href="#like" >Comment</a></span>
<span class="share"><img src="Images/share.png" height="17px" width="17px" align="center"/> <a href="#like" >Share</a></span>
<span class="short-profile"><a href="#account" ><img src="Images/dp.png" height="16" width="16" align="center"/> <img src="Images/arrowsilver.png" height="8" width="11" /></a></span>
<hr id="hr2" />
</div>
<div id="post-2">
<span id="post2"><a href="#posts" id="dp2"><img src="Images/page-3.png" height="40" width="40" align="top" /> Oyay</a><span id="updated-time1">20 hours - <img src="Images/friends.png" height="11" width="13" align="top" /></span></span>
<video src="C:/Users/Arsalan/Downloads/Video/oyay.mp4" controls height="306" width="500" id="oyay-video" > </video>
<img src="Images/reacts.png" height="16" width="70" id="reacts-1" /><a href="#comments" id="comments-1"> 276 Comments</a> <a href="#shares" id="shares-1">180 Shares</a>
<hr id="hr-1" />
<span class="like2"><img src="Images/like.png" height="17px" width="17px" align="center"/> <a href="#like" >Like</a></span>
<span class="comment2"><img src="Images/comment.png" height="17px" width="17px" align="center"/> <a href="#like" >Comment</a></span>
<span class="share2"><img src="Images/share.png" height="17px" width="17px" align="center"/> <a href="#like" >Share</a></span>
<span class="short-profile2"><a href="#account" ><img src="Images/dp.png" height="16" width="16" align="center"/> <img src="Images/arrowsilver.png" height="8" width="11" /></a></span>
<hr id="hr-2" />
</div>
</body>
</html>