-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
307 lines (275 loc) · 16.9 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simran | Twitter Clone</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<div class="homePage">
<div class="sideNav">
<div class="brand">
<i class="fab fa-twitter"></i></a>
</div>
<div class="menu">
<ul class="menuList">
<li class="items item1 active"><i class="menu-icon fas fa-home"></i>Home</li>
<li class="items item2"><i class="menu-icon fas fa-hashtag"></i>Explore</li>
<li class="items item3"><i class="menu-icon far fa-bell"></i>Notfications</li>
<li class="items item4"><i class="menu-icon far fa-envelope"></i>Messages</li>
<li class="items item5"><i class="menu-icon far fa-bookmark"></i>Bookmarks</li>
<li class="items item6"><i class="menu-icon far fa-list-alt"></i>Lists</li>
<li class="items item7"><i class="menu-icon far fa-user"></i>Profile</li>
<li class="items item8"><i class="menu-icon fas fa-ellipsis-h more-icon"></i>More</li>
</ul>
<button class="btn btn-tweet">Tweet</button>
</div>
<div class="user-profile">
<img src="profile.jpeg" alt="" class="profilePic">
<div class="user-details">
<h4>Simran Gangwani</h4>
<p>@SimranGangwani3</p>
</div>
<a class="profile-icon" href="#"><i class="fas fa-ellipsis-h"></i></a>
</div>
</div>
<div class="main">
<div class="nav-bar">
<h3 class="nav-heading">Home</h3>
<i class="fal fa-sparkles"></i>
</div>
<div class="compose-tweet">
<div class="compose1">
<img class="profilePic" src="profile.jpeg" alt="">
<textarea class="write" name="" placeholder="What's happening?" id="" cols="40" rows="1"></textarea>
</div>
<div class="compose2">
<div class="icon-options">
<i class="tweet-icons far fa-image"></i>
<i class="tweet-icons far fa-caret-square-right"></i>
<i class="tweet-icons far fa-chart-bar"></i>
<i class="tweet-icons far fa-smile"></i>
<i class="tweet-icons far fa-calendar-alt"></i>
<i class="tweet-icons far fa-map-marker-alt"></i>
</div>
<button class="btn input-btn">Tweet</button>
</div>
</div>
<div class="all-tweets">
<!-- TWEET 1 -->
<div class="single-tweet tweet1">
<div class="retweeter greyText"><i class="singleTweet-icon fas fa-retweet"></i><span class="greyText">Tanay Pratap Retweeted</span></div>
<div class="uploader">
<img class="profilePic" src="neog.jpg" alt="">
<div class="udpoader-details">
neog.camp <span class="greyText nameTime">@neogcamp • Dec 30, 2021</span>
</div>
<a class="profile-icon singleTweetDots" href="#"><i class="fas fa-ellipsis-h"></i></a>
</div>
<div class="tweetContent">
There's something magical about Programming Languages, everytime you go back to basics - you find something new and unexplored waiting to be explored. and then "whoa I didn't know that... 😮"Moment <br> happens ✨<br><br>
<div class="hashtag">#neogcamp #programming</div>
</div>
<div class="singleTweetIcons">
<a class="singleTweetIcon" href="#"><i class="marginRight far fa-comment"></i>4</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-retweet"></i>17</a>
<a class="" style="text-decoration: none; color: rgb(248, 19, 134);" href="#"><i style="color: rgb(248, 19, 134);" class="marginRight fas fa-heart"></i>231</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-arrow-to-top"></i></a>
</div>
</div>
<!-- TWEET 2 -->
<div class="single-tweet tweet2">
<div class="retweeter greyText"><i class="singleTweet-icon fas fa-retweet"></i><span class="greyText">Simran Gangwani Retweeted</span></div>
<div class="uploader">
<img class="profilePic" src="tanay.jpg" alt="">
<div class="udpoader-details">
Tanay Pratap <span class="greyText nameTime">@tanaypratap • Jan 13</span>
</div>
<a class="profile-icon singleTweetDots" href="#"><i class="fas fa-ellipsis-h"></i></a>
</div>
<div class="tweetContent">
My students when someone ask them to go through DSA heavy rounds.
<!-- <div class="hashtag">#neogcamp #100DaysOfCode #100daysofcodechallenge #HTML5 #CSS3 #javascript #netflix</div> -->
<img class="tweetImg" src="tanayMeme.jpg" alt="">
</div>
<div class="singleTweetIcons">
<a class="singleTweetIcon" href="#"><i class="marginRight far fa-comment"></i>12</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-retweet"></i>19</a>
<a class="singleTweetIcon" href="#"><i class="marginRight far fa-heart"></i>631</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-arrow-to-top"></i></a>
</div>
</div>
<!-- TWEET 3 -->
<div class="single-tweet tweet3">
<div class="retweeter greyText"><i class="singleTweet-icon fas fa-retweet"></i><span class="greyText">Simran Gangwani Retweeted</span></div>
<div class="uploader">
<img class="profilePic" src="vikram.jpg" alt="">
<div class="udpoader-details">
Vikram Santhalia <span class="greyText nameTime">@VikramSanthalia • Jan 11</span>
</div>
<a class="profile-icon singleTweetDots" href="#"><i class="fas fa-ellipsis-h"></i></a>
</div>
<div class="tweetContent">
Responsive design is fundamental to Web, than 10 years old now!😮<br><br>Important to start thinking about it early in development! 😮<br><br>
- Fluid layouts <br>
- Media queries <br>
- Responsive images <br>
- Relative units <br>
- Mobile first vs Desktop first <br>
- Logical breakpoints <br><br>
<div class="hashtag">#RockStarDev 🌟🌟🌟</div>
</div>
<div class="singleTweetIcons">
<a class="singleTweetIcon" href="#"><i class="marginRight far fa-comment"></i>1</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-retweet"></i>7</a>
<a class="singleTweetIcon" href="#"><i class="marginRight far fa-heart"></i>73</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-arrow-to-top"></i></a>
</div>
</div>
<!-- TWEET 4 -->
<div class="single-tweet tweet4">
<div class="retweeter greyText"><i class="singleTweet-icon fas fa-retweet"></i><span class="greyText">neogcamp Retweeted</span></div>
<div class="uploader">
<img class="profilePic" src="profile.jpeg" alt="">
<div class="udpoader-details">
Simran Gangwani <span class="greyText nameTime">@SimranGangwani3 • 2h</span>
</div>
<a class="profile-icon singleTweetDots" href="#"><i class="fas fa-ellipsis-h"></i></a>
</div>
<div class="tweetContent">
Day 81 of <span class="hashtag">#151daysofcode</span><br>
- Attended first class of <span class="hashtag">@neogcamp</span> by <span class="hashtag">@tanaypratap</span><div class="br"></div>
-Didn't realised how that four hours passed. Super excited for the next classes🔥🔥<br>
-Made a UI clone of the Netflix landing page using HTML & CSS <br>
- Live link: <span class="hashtag">https://netflix-simran.netlify.app <br></span> <br>
<div class="hashtag">#neogcamp #100DaysOfCode #100daysofcodechallenge #HTML5 #CSS3 #javascript #netflix</div>
<!-- <video class="tweetImg" src="netflix tweet.mp4"></video> -->
<video autoplay="" loop="" muted="" class="tweetImg">
<source src="netflix tweet.mp4" type="video/mp4"/>
</video>
</div>
<div class="singleTweetIcons">
<a class="singleTweetIcon" href="#"><i class="marginRight far fa-comment"></i>12</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-retweet"></i>10</a>
<a class="" style="text-decoration: none; color: rgb(248, 19, 134);" href="#"><i style="color: rgb(248, 19, 134);" class="marginRight fas fa-heart"></i>117</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-arrow-to-top"></i></a>
</div>
</div>
<!-- TWEET 5 -->
<div class="single-tweet tweet5">
<div class="retweeter greyText"><i class="singleTweet-icon fas fa-retweet"></i><span class="greyText">Tanay Pratap Retweeted</span></div>
<div class="uploader">
<img class="profilePic" src="tanay.jpg" alt="">
<div class="udpoader-details">
Tanay Pratap <span class="greyText nameTime">@tanaypratap • Jan 13</span>
</div>
<a class="profile-icon singleTweetDots" href="#"><i class="fas fa-ellipsis-h"></i></a>
</div>
<div class="tweetContent">
Biggest mistake new entrepreneurs make: wait for the perfect product to launch.
Launch on Google forms, on whatsapp, on Twitter DMs. Start small. Move w/ your users.
<!-- <div class="hashtag">#neogcamp #100DaysOfCode #100daysofcodechallenge #HTML5 #CSS3 #javascript #netflix</div> -->
<!-- <img class="tweetImg" src="tanayMeme.jpg" alt=""> -->
</div>
<div class="singleTweetIcons">
<a class="singleTweetIcon" href="#"><i class="marginRight far fa-comment"></i>15</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-retweet"></i>15</a>
<a class="" style="text-decoration: none; color: rgb(248, 19, 134);" href="#"><i style="color: rgb(248, 19, 134);" class="marginRight fas fa-heart"></i>449</a>
<a class="singleTweetIcon" href="#"><i class="marginRight fas fa-arrow-to-top"></i></a>
</div>
</div>
</div>
</div>
<div class="know-more">
<div class="search">
<i class="greyText fas fa-search"></i>
<input class="search-input" placeholder="Search Twitter" type="text">
</div>
<div class="whatsHappening">
<h3 class="sideHeading">What's Happening</h3>
<div class="happening happening1">
<div class="info">
<p class="subText greyText">Politics • LIVE</p>
<p class="mainText">Parties release first list of candidates for Assembly Elections 2022</p>
<p class="subText greyText">Trending with <span class="hashtag">Amritsar</span>, <span class="hashtag">#UPElections</span></p>
</div>
<img class="profilePic sideImg" src="main1.jpg" alt="">
</div>
<div class="happening happening2">
<div class="info">
<p class="subText greyText">Entertainment • Trending</p>
<p class="mainText">KARAN IS AN EMOTION</p>
<p class="subText greyText">699k Tweets</p>
</div>
<a class="profile-icon" href="#"><i class="greyText fas fa-ellipsis-h"></i></a>
</div>
<div class="happening happening3">
<div class="info">
<p class="subText greyText">Trending in India</p>
<p class="mainText">#RRBNTPC</p>
<p class="subText greyText">277K Tweets</span></p>
</div>
<a class="profile-icon" href="#"><i class="greyText fas fa-ellipsis-h"></i></a>
</div>
<div class="happening happening4">
<div class="info">
<p class="subText greyText">Los Angeles Times <i class="fas fa-check-circle"></i> • Last Night</p>
<p class="mainText">Christina Ricci tried — and failed — to fit Hollywood’s mold. Lucky us</p>
<!-- <p class="subText greyText">Trending with <span class="hashtag">#MCICHE</span></span></p> -->
</div>
<img class="profilePic sideImg" src="happening3.jpg" alt="">
</div>
<div class="happening happening5">
<div class="info">
<p class="subText greyText">World news • 5 hours ago</p>
<p class="mainText">Tsunami warning issued for Tonga following underwater volcanic eruption</p>
<p class="subText greyText">Trending with <span class="hashtag">#Tonga</span></p>
</div>
<img class="profilePic sideImg" src="happening4.jpg" alt="">
</div>
<span class="hashtag showMore">Show more</span>
</div>
<div class="whatsHappening">
<h3 class="sideHeading">Who to follow</h3>
<div class="user-profile followDiv">
<img src="neog.jpg" alt="" class="profilePic">
<div class="user-details">
<h4>neog.camp</h4>
<p>@neocamp</p>
<p class="promoted"><i class="greyText fas fa-external-link-square-alt"></i> <span class="greyText promoted">Promoted</span></p>
</div>
<button class="btn-follow follow1">Follow</button>
</div>
<div class="user-profile followDiv">
<img src="tanay.jpg" alt="" class="profilePic">
<div class="user-details">
<h4>Tanay Pratap</h4>
<p>@tanaypratap</p>
</div>
<button class="btn-follow follow2">Follow</button>
</div>
<div class="user-profile followDiv marginBottom">
<img src="vikram.jpg" alt="" class="profilePic">
<div class="user-details">
<h4>Vikram Santhalia</h4>
<p>@VikramSanthalia</p>
</div>
<button class="btn-follow follow3">Follow</button>
</div>
<span class="hashtag showMore">Show more</span>
</div>
<p class="greyText nameTime terms">Terms of Service
Privacy Policy
Cookie Policy
Accessibility
Ads info
More ••• <br>
© 2022 Twitter, Inc.</p>
</div>
</div>
</body>
</html>