├── README.md ├── facebook-clone ├── index.html └── style.css ├── gmail-clone ├── index.html └── styles.css ├── google-clone ├── index.html └── styles.css ├── hulu-clone ├── images │ ├── logo.png │ ├── movie1.jpg │ ├── movie10.jpg │ ├── movie11.jpg │ ├── movie12.jpg │ ├── movie13.jpg │ ├── movie14.jpg │ ├── movie15.jpg │ ├── movie16.jpg │ ├── movie17.jpg │ ├── movie18.jpg │ ├── movie19.jpg │ ├── movie2.jpg │ ├── movie20.jpg │ ├── movie3.jpg │ ├── movie4.jpg │ ├── movie5.jpg │ ├── movie6.jpg │ ├── movie7.jpg │ ├── movie8.jpg │ └── movie9.jpg ├── index.html └── styles.css ├── igreels-clone ├── index.html ├── style.css └── videos source.txt ├── linkedin-clone ├── index.html └── styles.css ├── netflix-clone ├── images │ ├── banner.jpg │ ├── large-movie1.jpg │ ├── large-movie2.jpg │ ├── large-movie3.jpg │ ├── large-movie4.jpg │ ├── large-movie5.jpg │ ├── large-movie6.jpg │ ├── large-movie7.jpg │ ├── large-movie8.jpg │ ├── netflix-avatar.png │ ├── netflix-logo.png │ ├── small-movie1.jpg │ ├── small-movie2.jpg │ ├── small-movie3.jpg │ ├── small-movie4.jpg │ ├── small-movie5.jpg │ ├── small-movie6.jpg │ ├── small-movie7.jpg │ └── small-movie8.jpg ├── index.html └── style.css ├── tiktok-clone ├── index.html ├── style.css └── videos source.txt ├── twitter-clone ├── images │ ├── car.jpg │ └── profile.png ├── index.html └── styles.css └── youtube-clone ├── index.html ├── index.js ├── profile.png └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # CLONES With HTML and CSS 2 | 3 | Best Viewd in Desktop 4 | 5 | #### Hulu Clone - Demo | Watch Tutorial 6 | #### Twitter Clone - Demo | Watch Tutorial 7 | #### Netflix Clone - Demo | Watch Tutorial 8 | #### Facebook Clone - Demo | Watch Tutorial 9 | #### GMAIL Clone - Demo | Watch Tutorial 10 | #### Google Clone - Demo | Watch Tutorial 11 | #### LinkedIn Clone - Demo | Watch Tutorial 12 | #### Youtube Clone - Demo | Watch Tutorial 13 | -------------------------------------------------------------------------------- /facebook-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Facebook Clone 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 19 |
20 | search 21 | 22 |
23 |
24 | 25 |
26 |
27 | home 28 |
29 |
30 | flag 31 |
32 |
33 | subscriptions 34 |
35 |
36 | storefront 37 |
38 |
39 | supervised_user_circle 40 |
41 |
42 | 43 |
44 |
45 | 50 |

Somanath Goudar

51 |
52 | add 53 | forum 54 | notifications_active 55 | expand_more 56 |
57 |
58 | 59 | 60 | 61 |
62 | 63 |
64 |
65 | 70 |

Somanath Goudar

71 |
72 | 73 |
74 | local_hospital 75 |

Covid - 19 Information Center

76 |
77 | 78 |
79 | emoji_flags 80 |

Pages

81 |
82 | 83 |
84 | people 85 |

People

86 |
87 | 88 |
89 | chat 90 |

Messenger

91 |
92 | 93 |
94 | storefront 95 |

Marketplace

96 |
97 | 98 |
99 | video_library 100 |

Videos

101 |
102 | 103 |
104 | expand_more 105 |

More

106 |
107 |
108 | 109 | 110 | 111 |
112 |
113 | 114 |
120 | 125 |

Somanath Goudar

126 |
127 | 128 | 129 | 130 |
136 | 141 |

Somanath Goudar

142 |
143 | 144 | 145 | 146 |
152 | 157 |

Somanath Goudar

158 |
159 | 160 | 161 | 162 |
168 | 173 |

Somanath Goudar

174 |
175 | 176 | 177 | 178 |
184 | 189 |

Somanath Goudar

190 |
191 | 192 | 193 | 194 |
200 | 205 |

Somanath Goudar

206 |
207 | 208 |
209 | 210 | 211 |
212 |
213 | 218 |
219 | 220 |
221 |
222 | 223 |
224 |
225 | videocam 226 |

Live

227 |
228 | 229 |
230 | photo_library 231 |

Photo

232 |
233 | 234 |
235 | insert_emoticon 236 |

Feeling

237 |
238 |
239 |
240 | 241 | 242 | 243 |
244 |
245 | 250 |
251 |

Somanath Goudar

252 |

25 April at 20:30

253 |
254 |
255 | 256 |
257 |

Message

258 |
259 | 260 |
261 | 265 |
266 | 267 |
268 |
269 | thumb_up 270 |

Like

271 |
272 | 273 |
274 | chat_bubble_outline 275 |

Comment

276 |
277 | 278 |
279 | near_me 280 |

Share

281 |
282 |
283 |
284 | 285 | 286 | 287 |
288 |
289 | 294 |
295 |

Somanath Goudar

296 |

25 April at 20:30

297 |
298 |
299 | 300 |
301 |

Post Without Image

302 |
303 | 304 |
305 |
306 | thumb_up 307 |

Like

308 |
309 | 310 |
311 | chat_bubble_outline 312 |

Comment

313 |
314 | 315 |
316 | near_me 317 |

Share

318 |
319 |
320 |
321 | 322 | 323 | 324 |
325 |
326 | 331 |
332 |

Somanath Goudar

333 |

25 April at 20:30

334 |
335 |
336 | 337 |
338 |

Message

339 |
340 | 341 |
342 | 343 |
344 | 345 |
346 |
347 | thumb_up 348 |

Like

349 |
350 | 351 |
352 | chat_bubble_outline 353 |

Comment

354 |
355 | 356 |
357 | near_me 358 |

Share

359 |
360 |
361 |
362 | 363 |
364 | 365 | 366 |
367 |
378 |
379 | Facebook 380 |
381 |
382 |
383 |
384 | 385 | 386 |
387 | 394 | 395 | 396 | -------------------------------------------------------------------------------- /facebook-clone/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | .header__left img { 7 | height: 40px; 8 | } 9 | 10 | .user__avatar { 11 | border-radius: 50%; 12 | width: 45px; 13 | } 14 | 15 | .header { 16 | padding: 15px 20px; 17 | display: flex; 18 | justify-content: space-between; 19 | position: sticky; 20 | background-color: white; 21 | z-index: 100; 22 | top: 0; 23 | box-shadow: 0 5px 8px -9px rgba(0, 0, 0, 0.75); 24 | } 25 | 26 | .header__left { 27 | display: flex; 28 | align-items: center; 29 | justify-content: space-evenly; 30 | } 31 | 32 | .header__input { 33 | display: flex; 34 | align-items: center; 35 | background-color: #eff2f5; 36 | padding: 10px; 37 | margin-left: 10px; 38 | border-radius: 999px; 39 | } 40 | 41 | .header__input input { 42 | border: none; 43 | background-color: transparent; 44 | outline-width: 0; 45 | } 46 | 47 | .header__middle { 48 | display: flex; 49 | flex: 1; 50 | justify-content: center; 51 | } 52 | 53 | .header__option .material-icons { 54 | font-size: xx-large; 55 | color: gray; 56 | } 57 | 58 | .header__option:hover .material-icons { 59 | color: #2e81f4; 60 | } 61 | 62 | .header__option { 63 | display: flex; 64 | align-items: center; 65 | padding: 0 30px; 66 | cursor: pointer; 67 | } 68 | 69 | .header__option.active .material-icons { 70 | color: #2e81f4; 71 | } 72 | 73 | .header__option.active { 74 | border-bottom: 4px solid #2e81f4; 75 | } 76 | 77 | .header__option:hover { 78 | background-color: #eff2f5; 79 | border-radius: 10px; 80 | align-items: center; 81 | padding: 0 30px; 82 | border-bottom: none; 83 | } 84 | 85 | .header__info { 86 | display: flex; 87 | align-items: center; 88 | } 89 | 90 | .header__info h4 { 91 | margin-left: 10px; 92 | } 93 | 94 | .header__right { 95 | display: flex; 96 | align-items: center; 97 | } 98 | 99 | .header__right .material-icons { 100 | color: gray; 101 | margin: 0 10px; 102 | } 103 | 104 | .header__right .material-icons:hover { 105 | cursor: pointer; 106 | } 107 | 108 | /* sidebar */ 109 | 110 | .sidebarRow { 111 | display: flex; 112 | align-items: center; 113 | padding: 10px; 114 | cursor: pointer; 115 | } 116 | 117 | .sidebarRow:hover { 118 | background-color: lightgray; 119 | border-radius: 10px; 120 | } 121 | 122 | .sidebarRow h4 { 123 | margin-left: 20px; 124 | font-weight: 600; 125 | } 126 | 127 | .sidebarRow .material-icons { 128 | font-size: xx-large; 129 | color: #2e81f4; 130 | } 131 | 132 | /* story */ 133 | .story { 134 | position: relative; 135 | background-repeat: no-repeat; 136 | background-size: cover; 137 | width: 120px; 138 | height: 200px; 139 | box-shadow: 0px 5px 17px -7px rgba(0, 0, 0, 0.75); 140 | border-radius: 10px; 141 | margin-right: 10px; 142 | transition: transform 100ms ease-in; 143 | cursor: pointer; 144 | } 145 | 146 | .story:hover { 147 | transform: scale(1.07); 148 | } 149 | 150 | .story__avatar { 151 | margin: 10px; 152 | color: blue; 153 | } 154 | 155 | .story h4 { 156 | position: absolute; 157 | bottom: 20px; 158 | left: 20px; 159 | color: white; 160 | } 161 | 162 | .storyReel { 163 | padding: 10px 0; 164 | display: flex; 165 | } 166 | 167 | .main__body { 168 | display: flex; 169 | } 170 | 171 | body { 172 | background-color: #f1f2f5; 173 | } 174 | 175 | .feed { 176 | flex: 1; 177 | padding: 30px 100px; 178 | display: flex; 179 | flex-direction: column; 180 | justify-content: center; 181 | align-items: center; 182 | } 183 | 184 | .sidebar { 185 | padding: 25px 10px; 186 | flex: 0.33; 187 | } 188 | 189 | /* message sender */ 190 | 191 | .messageSender { 192 | display: flex; 193 | margin-top: 30px; 194 | flex-direction: column; 195 | background-color: white; 196 | border-radius: 15px; 197 | box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.75); 198 | width: 100%; 199 | } 200 | 201 | .messageSender__top { 202 | display: flex; 203 | align-items: center; 204 | border-bottom: 1px solid #eff2f5; 205 | padding: 15px; 206 | } 207 | 208 | .messageSender__top form { 209 | flex: 1; 210 | display: flex; 211 | } 212 | 213 | .messageSender__top form input { 214 | flex: 1; 215 | outline-width: 0; 216 | border: none; 217 | padding: 15px 20px; 218 | margin: 0 10px; 219 | border-radius: 999px; 220 | background-color: #eff2f5; 221 | } 222 | 223 | .messageSender__bottom { 224 | display: flex; 225 | justify-content: space-evenly; 226 | } 227 | 228 | .messageSender__option { 229 | padding: 8px; 230 | display: flex; 231 | align-items: center; 232 | color: gray; 233 | margin: 5px; 234 | } 235 | 236 | .messageSender__option h3 { 237 | font-size: medium; 238 | margin-left: 10px; 239 | } 240 | 241 | .messageSender__option:hover { 242 | cursor: pointer; 243 | background-color: #eff2f5; 244 | border-radius: 20px; 245 | } 246 | 247 | /* post */ 248 | 249 | .post { 250 | width: 100%; 251 | margin-top: 15px; 252 | border-radius: 15px; 253 | background-color: white; 254 | box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.75); 255 | } 256 | 257 | .post__image img { 258 | width: 100%; 259 | } 260 | 261 | .post__top { 262 | display: flex; 263 | position: relative; 264 | align-items: center; 265 | padding: 15px; 266 | } 267 | 268 | .post__avatar { 269 | margin-right: 10px; 270 | } 271 | 272 | .post__topInfo h3 { 273 | font-size: medium; 274 | } 275 | 276 | .post__topInfo p { 277 | font-size: small; 278 | color: gray; 279 | } 280 | 281 | .post__bottom { 282 | margin-top: 10px; 283 | margin-bottom: 10px; 284 | padding: 15px 25px; 285 | } 286 | 287 | .post__options { 288 | padding-top: 10px; 289 | border-top: 1px solid lightgray; 290 | display: flex; 291 | justify-content: space-evenly; 292 | font-size: medium; 293 | color: gray; 294 | cursor: pointer; 295 | padding: 15px; 296 | } 297 | 298 | .post__option { 299 | display: flex; 300 | align-items: center; 301 | justify-content: center; 302 | padding: 5px; 303 | flex: 1; 304 | } 305 | 306 | .post__option p { 307 | margin-left: 10px; 308 | } 309 | 310 | .post__option:hover { 311 | background-color: #eff2f5; 312 | border-radius: 10px; 313 | } 314 | 315 | @media (max-width: 768px) { 316 | .sidebar { 317 | display: none; 318 | } 319 | 320 | .header__input input { 321 | display: none; 322 | } 323 | 324 | .header__middle { 325 | display: none; 326 | } 327 | 328 | .header__info { 329 | display: none; 330 | } 331 | 332 | .widgets { 333 | display: none; 334 | } 335 | 336 | .feed { 337 | margin-top: 20px; 338 | width: 100%; 339 | padding: 0; 340 | } 341 | 342 | .story h4 { 343 | font-size: 10px; 344 | } 345 | 346 | .story img { 347 | width: 40px; 348 | } 349 | } 350 | 351 | @media (min-width: 320px) { 352 | .storyReel { 353 | width: 100%; 354 | overflow-x: scroll; 355 | } 356 | } 357 | 358 | @media (min-width: 769px) and (max-width: 1440px) { 359 | /* CSS To Target 767 px width of screen */ 360 | 361 | .feed { 362 | width: 50%; 363 | padding: 10px 50px; 364 | } 365 | } 366 | -------------------------------------------------------------------------------- /gmail-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Final - Gmail Clone 10 | 11 | 12 | 13 |
14 |
15 | menu 16 | 20 |
21 | 22 |
23 | search 24 | 25 | arrow_drop_down 26 |
27 | 28 |
29 | apps 30 | notifications 31 | account_circle 32 |
33 |
34 | 35 | 36 | 37 |
38 | 39 |
40 | 41 |
42 | inbox 43 |

Inbox

44 |
45 | 46 |
47 | star 48 |

Starred

49 |
50 | 51 |
52 | access_time 53 |

Snoozed

54 |
55 | 56 |
57 | label_important 58 |

Important

59 |
60 | 61 |
62 | near_me 63 |

Sent

64 |
65 | 66 |
67 | note 68 |

Drafts

69 |
70 | 71 |
72 | expand_more 73 |

More

74 |
75 | 76 |
77 |
78 | person 79 | duo 80 | phone 81 |
82 |
83 |
84 | 85 | 86 | 87 |
88 | 89 |
90 |
91 | 92 | arrow_drop_down 93 | redo 94 | more_vert 95 |
96 |
97 | chevron_left 98 | chevron_right 99 | keyboard_hide 100 | settings 101 |
102 |
103 | 104 | 105 | 106 |
107 |
108 | inbox 109 |

Primary

110 |
111 | 112 |
113 | people 114 |

Social

115 |
116 | 117 |
118 | local_offer 119 |

Promotions

120 |
121 |
122 | 123 | 124 | 125 |
126 | 127 |
128 |
129 | 130 | star_border 131 | label_important 132 |
133 | 134 |

YouTube

135 | 136 |
137 |

138 | You Got a New Subscriber 139 | - on Your Channel Future Coders 140 |

141 |
142 | 143 |

10pm

144 |
145 | 146 | 147 | 148 |
149 |
150 | 151 | star_border 152 | label_important 153 |
154 | 155 |

YouTube

156 | 157 |
158 |

159 | You Got a New Subscriber 160 | - on Your Channel Future Coders 161 |

162 |
163 | 164 |

10pm

165 |
166 | 167 | 168 | 169 |
170 |
171 | 172 | star_border 173 | label_important 174 |
175 | 176 |

YouTube

177 | 178 |
179 |

180 | You Got a New Subscriber 181 | - on Your Channel Future Coders 182 | 183 |

184 |
185 | 186 |

10pm

187 |
188 | 189 | 190 | 191 |
192 |
193 | 194 | star_border 195 | label_important 196 |
197 | 198 |

Google

199 | 200 |
201 |

202 | Login on New Device 203 | - is this your Device ? 204 | 205 |

206 |
207 | 208 |

2am

209 |
210 | 211 | 212 | 213 |
214 |
215 | 216 | star_border 217 | label_important 218 |
219 | 220 |

YouTube

221 | 222 |
223 |

224 | You Got a New Subscriber 225 | - on Your Channel Future Coders 226 |

227 |
228 | 229 |

10pm

230 |
231 | 232 | 233 | 234 |
235 |
236 | 237 | star_border 238 | label_important 239 |
240 | 241 |

YouTube

242 | 243 |
244 |

245 | You Got a New Subscriber 246 | - on Your Channel Future Coders 247 |

248 |
249 | 250 |

10pm

251 |
252 | 253 | 254 | 255 |
256 |
257 | 258 | star_border 259 | label_important 260 |
261 | 262 |

YouTube

263 | 264 |
265 |

266 | You Got a New Subscriber 267 | - on Your Channel Future Coders 268 | 269 |

270 |
271 | 272 |

10pm

273 |
274 | 275 | 276 | 277 |
278 |
279 | 280 | star_border 281 | label_important 282 |
283 | 284 |

Google

285 | 286 |
287 |

288 | Login on New Device 289 | - is this your Device ? 290 | 291 |

292 |
293 | 294 |

2am

295 |
296 | 297 | 298 | 299 |
300 |
301 | 302 | star_border 303 | label_important 304 |
305 | 306 |

YouTube

307 | 308 |
309 |

310 | You Got a New Subscriber 311 | - on Your Channel Future Coders 312 |

313 |
314 | 315 |

10pm

316 |
317 | 318 | 319 | 320 |
321 |
322 | 323 | star_border 324 | label_important 325 |
326 | 327 |

YouTube

328 | 329 |
330 |

331 | You Got a New Subscriber 332 | - on Your Channel Future Coders 333 |

334 |
335 | 336 |

10pm

337 |
338 | 339 | 340 | 341 |
342 |
343 | 344 | star_border 345 | label_important 346 |
347 | 348 |

YouTube

349 | 350 |
351 |

352 | You Got a New Subscriber 353 | - on Your Channel Future Coders 354 | 355 |

356 |
357 | 358 |

10pm

359 |
360 | 361 | 362 | 363 |
364 |
365 | 366 | star_border 367 | label_important 368 |
369 | 370 |

Google

371 | 372 |
373 |

374 | Login on New Device 375 | - is this your Device ? 376 | 377 |

378 |
379 | 380 |

2am

381 |
382 | 383 | 384 | 385 |
386 |
387 | 388 | star_border 389 | label_important 390 |
391 | 392 |

YouTube

393 | 394 |
395 |

396 | You Got a New Subscriber 397 | - on Your Channel Future Coders 398 |

399 |
400 | 401 |

10pm

402 |
403 | 404 | 405 | 406 |
407 |
408 | 409 | star_border 410 | label_important 411 |
412 | 413 |

YouTube

414 | 415 |
416 |

417 | You Got a New Subscriber 418 | - on Your Channel Future Coders 419 |

420 |
421 | 422 |

10pm

423 |
424 | 425 | 426 | 427 |
428 |
429 | 430 | star_border 431 | label_important 432 |
433 | 434 |

YouTube

435 | 436 |
437 |

438 | You Got a New Subscriber 439 | - on Your Channel Future Coders 440 | 441 |

442 |
443 | 444 |

10pm

445 |
446 | 447 | 448 | 449 |
450 |
451 | 452 | star_border 453 | label_important 454 |
455 | 456 |

Google

457 | 458 |
459 |

460 | Login on New Device 461 | - is this your Device ? 462 | 463 |

464 |
465 | 466 |

2am

467 |
468 | 469 | 470 | 471 |
472 |
473 | 474 | star_border 475 | label_important 476 |
477 | 478 |

YouTube

479 | 480 |
481 |

482 | You Got a New Subscriber 483 | - on Your Channel Future Coders 484 |

485 |
486 | 487 |

10pm

488 |
489 | 490 | 491 | 492 |
493 |
494 | 495 | star_border 496 | label_important 497 |
498 | 499 |

YouTube

500 | 501 |
502 |

503 | You Got a New Subscriber 504 | - on Your Channel Future Coders 505 |

506 |
507 | 508 |

10pm

509 |
510 | 511 | 512 | 513 |
514 |
515 | 516 | star_border 517 | label_important 518 |
519 | 520 |

YouTube

521 | 522 |
523 |

524 | You Got a New Subscriber 525 | - on Your Channel Future Coders 526 | 527 |

528 |
529 | 530 |

10pm

531 |
532 | 533 | 534 | 535 |
536 |
537 | 538 | star_border 539 | label_important 540 |
541 | 542 |

Google

543 | 544 |
545 |

546 | Login on New Device 547 | - is this your Device ? 548 | 549 |

550 |
551 | 552 |

2am

553 |
554 | 555 |
556 | 557 |
558 | 559 |
560 | 561 | 562 | 563 | -------------------------------------------------------------------------------- /gmail-clone/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | /* Header */ 7 | .header__left img { 8 | object-fit: contain; 9 | height: 80px; 10 | margin-left: 5px; 11 | } 12 | 13 | .header { 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-between; 17 | border-bottom: 1px solid whitesmoke; 18 | } 19 | 20 | .header__left { 21 | display: flex; 22 | align-items: center; 23 | } 24 | 25 | .header__left span { 26 | padding: 10px; 27 | cursor: pointer; 28 | } 29 | 30 | .header__middle { 31 | display: flex; 32 | flex: 0.7; 33 | align-items: center; 34 | background-color: whitesmoke; 35 | padding: 10px; 36 | border-radius: 5px; 37 | } 38 | 39 | .material-icons { 40 | color: gray; 41 | } 42 | 43 | .header__middle input { 44 | border: none; 45 | width: 100%; 46 | padding: 10px; 47 | outline: none; 48 | font-size: medium; 49 | background-color: transparent; 50 | } 51 | 52 | .header__right { 53 | display: flex; 54 | padding-right: 20px; 55 | } 56 | 57 | .header__right span { 58 | padding: 10px; 59 | cursor: pointer; 60 | } 61 | 62 | /* Sidebar */ 63 | .sidebar { 64 | flex: 0.3; 65 | max-width: 300px; 66 | padding-right: 20px; 67 | } 68 | 69 | .sidebar__compose { 70 | margin-top: 15px; 71 | margin-left: 10px; 72 | margin-bottom: 15px; 73 | text-transform: capitalize; 74 | color: gray; 75 | padding: 15px; 76 | border-radius: 30px; 77 | background-color: white; 78 | display: flex; 79 | align-items: center; 80 | cursor: pointer; 81 | outline: none; 82 | border: none; 83 | box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75); 84 | } 85 | 86 | .sidebar__compose span { 87 | margin-right: 5px; 88 | } 89 | 90 | .sidebarOption { 91 | display: flex; 92 | align-items: center; 93 | height: 40px; 94 | padding: 0 10px; 95 | border-top-right-radius: 20px; 96 | border-bottom-right-radius: 20px; 97 | cursor: pointer; 98 | color: #818181; 99 | } 100 | 101 | .sidebarOption .material-icons { 102 | padding: 5px; 103 | } 104 | 105 | .sidebarOption h3 { 106 | flex: 1; 107 | margin-left: 10px; 108 | font-size: 14px; 109 | font-weight: 400; 110 | } 111 | 112 | .sidebarOption:hover, 113 | .sidebarOption:hover h3, 114 | .sidebarOption:hover .material-icons, 115 | .sidebarOption__active, 116 | .sidebarOption__active h3, 117 | .sidebarOption__active .material-icons { 118 | background-color: #fcecec; 119 | color: #c04b37; 120 | font-weight: 800; 121 | } 122 | 123 | .sidebar__footer { 124 | display: flex; 125 | justify-content: center; 126 | } 127 | 128 | .sidebar__footerIcons .material-icons { 129 | margin: 7px; 130 | cursor: pointer; 131 | } 132 | 133 | /* main body */ 134 | .main__body { 135 | display: flex; 136 | height: 100vh; 137 | } 138 | 139 | body { 140 | height: 100vh; 141 | overflow-y: hidden; 142 | } 143 | 144 | /* email list */ 145 | .emailList { 146 | flex: 1; 147 | overflow: scroll; 148 | } 149 | 150 | .emailList__settings { 151 | position: sticky; 152 | top: 0; 153 | display: flex; 154 | justify-content: space-between; 155 | border-bottom: 1px solid whitesmoke; 156 | background-color: white; 157 | z-index: 999; 158 | padding: 8px; 159 | } 160 | 161 | .emailList__settingsLeft { 162 | display: flex; 163 | align-items: center; 164 | } 165 | 166 | .emailList__settings .material-icons { 167 | margin: 5px; 168 | cursor: pointer; 169 | } 170 | 171 | .section { 172 | display: flex; 173 | align-items: center; 174 | border-bottom-width: 2px; 175 | padding: 15px; 176 | min-width: 200px; 177 | cursor: pointer; 178 | color: grey; 179 | border-width: 0; 180 | } 181 | 182 | .emailList__sections { 183 | position: sticky; 184 | top: 0; 185 | display: flex; 186 | background-color: white; 187 | border-bottom: 1px solid whitesmoke; 188 | z-index: 999; 189 | } 190 | 191 | .section__selected { 192 | background-color: whitesmoke; 193 | border-width: 3px; 194 | color: red; 195 | border-bottom: 3px solid red; 196 | } 197 | 198 | .section__selected .material-icons { 199 | color: red; 200 | } 201 | 202 | .section:hover { 203 | background-color: whitesmoke; 204 | border-width: 3px; 205 | } 206 | 207 | .section h4 { 208 | font-size: 14px; 209 | margin-left: 15px; 210 | } 211 | 212 | .emailRow__options { 213 | display: flex; 214 | align-items: center; 215 | } 216 | 217 | .emailRow__options .material-icons, 218 | input { 219 | margin: 5px; 220 | } 221 | 222 | .emailRow { 223 | display: flex; 224 | align-items: center; 225 | height: 50px; 226 | border-bottom: 1px solid whitesmoke; 227 | cursor: pointer; 228 | z-index: 999; 229 | } 230 | 231 | .emailRow:hover { 232 | border-top: 1px solid whitesmoke; 233 | box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.24); 234 | } 235 | 236 | .emailRow__message { 237 | display: flex; 238 | flex: 0.8; 239 | align-items: center; 240 | font-size: 13px; 241 | } 242 | 243 | .emailRow__message h4 { 244 | width: 400px; 245 | white-space: nowrap; 246 | overflow: hidden; 247 | text-overflow: ellipsis; 248 | padding-left: 5px; 249 | padding-right: 5px; 250 | } 251 | 252 | .emailRow__title { 253 | font-size: 13px; 254 | flex: 0.3; 255 | } 256 | 257 | .emailRow__time { 258 | padding-right: 15px; 259 | font-size: 10px; 260 | font-weight: bold; 261 | } 262 | 263 | .emailRow__description { 264 | font-weight: 400; 265 | color: gray; 266 | } 267 | -------------------------------------------------------------------------------- /google-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Final - Google Clone 10 | 11 | 12 | 13 |
14 |
15 | About 16 | Store 17 |
18 |
19 | Gmail 20 | Images 21 | apps 22 | account_circle 23 |
24 |
25 | 26 | 27 | 28 |
29 | Google Logo 33 | 34 | 35 |
36 |
37 | search 38 | 39 | mic 40 |
41 | 42 |
43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /google-clone/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | body { 6 | display: flex; 7 | flex-direction: column; 8 | height: 100vh; 9 | } 10 | 11 | /* Header */ 12 | .header { 13 | display: flex; 14 | justify-content: space-between; 15 | padding: 20px 30px; 16 | align-items: center; 17 | } 18 | 19 | .header a { 20 | margin-right: 20px; 21 | text-decoration: inherit; 22 | color: rgba(0, 0, 0, 0.87); 23 | font-size: 15px; 24 | } 25 | 26 | .header a:hover { 27 | text-decoration: underline; 28 | } 29 | 30 | .header__right { 31 | display: flex; 32 | align-items: center; 33 | min-width: 13vw; 34 | justify-content: space-between; 35 | } 36 | 37 | .header__right .header__apps { 38 | margin-right: 10px; 39 | } 40 | 41 | /* Main Body */ 42 | 43 | .mainBody { 44 | flex: 1; 45 | display: flex; 46 | margin-top: 12%; 47 | flex-direction: column; 48 | } 49 | 50 | .mainBody img { 51 | object-fit: contain; 52 | height: 100px; 53 | } 54 | 55 | /* search */ 56 | .search__input { 57 | display: flex; 58 | align-items: center; 59 | border: 1px solid lightgray; 60 | height: 30px; 61 | padding: 10px 20px; 62 | border-radius: 999px; 63 | width: 75vw; 64 | margin: 0 auto; 65 | margin-top: 40px; 66 | max-width: 560px; 67 | } 68 | 69 | .search__input input { 70 | flex: 1; 71 | padding: 10px 20px; 72 | border: none; 73 | outline: none; 74 | } 75 | 76 | .search__input .material-icons { 77 | color: gray; 78 | } 79 | 80 | .search__buttons { 81 | margin-top: 30px; 82 | display: flex; 83 | justify-content: center; 84 | } 85 | 86 | .search__buttons button { 87 | margin: 5px; 88 | padding: 10px 15px; 89 | background-color: #f8f8f8; 90 | outline: none; 91 | border: none; 92 | cursor: pointer; 93 | } 94 | -------------------------------------------------------------------------------- /hulu-clone/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/logo.png -------------------------------------------------------------------------------- /hulu-clone/images/movie1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie1.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie10.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie11.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie12.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie13.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie14.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie15.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie16.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie17.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie18.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie19.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie2.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie20.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie3.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie4.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie5.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie6.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie7.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie8.jpg -------------------------------------------------------------------------------- /hulu-clone/images/movie9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/hulu-clone/images/movie9.jpg -------------------------------------------------------------------------------- /hulu-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hulu Clone 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | home 17 |

Home

18 |
19 | 20 |
21 | flash_on 22 |

Trending

23 |
24 | 25 |
26 | live_tv 27 |

Verified

28 |
29 | 30 |
31 | video_library 32 |

Collections

33 |
34 | 35 |
36 | search 37 |

Search

38 |
39 | 40 |
41 | person_outline 42 |

Account

43 |
44 |
45 | 46 |
47 | 48 | 49 | 50 |
51 |

Trending

52 |

Top Rated

53 |

Action

54 |

Comedy

55 |

Horror

56 |

Romance

57 |

Mystrey

58 |

Sci-fi

59 |

Western

60 |

Animation

61 |

TV Movie

62 |
63 | 64 | 65 | 66 |
67 |
68 | 69 |

Washed-up MMA fighter Cole Young, unaware of his heritage, and...

70 |

Mortal Kombat

71 |
72 | 73 |
74 | 75 |

An elite Navy SEAL uncovers an international conspiracy while...

76 |

Tom Clancy's Without Remorse

77 |
78 | 79 |
80 | 81 |

When the world's first generation of superheroes received their...

82 |

Jupiter's Legacy

83 |
84 | 85 |
86 | 87 |

A quirky, dysfunctional family's road trip is upended when they find...

88 |

The Mitchells vs. The Machines

89 |
90 | 91 |
92 | 93 |

In a time when monsters walk the Earth, humanity’s fight for its...

94 |

Godzilla vs. Kong

95 |
96 | 97 |
98 | 99 |

A woman wakes in a cryogenic chamber with no recollection of how...

100 |

Oxygen

101 |
102 | 103 |
104 | 105 |

Follow the elite and experimental Clones of the Bad Batch as they...

106 |

The Bad Batch

107 |
108 | 109 |
110 | 111 |

An agoraphobic woman living alone in New York begins spying on...

112 |

The Woman in the Window

113 |
114 | 115 |
116 | 117 |

A teenage murder witness finds himself pursued by twin assassins in...

118 |

Those Who Wish Me Dead

119 |
120 | 121 |
122 | 123 |

Following the events of “Avengers: Endgame”, the Falcon, Sam...

124 |

The Falcon and the Winter Soldier

125 |
126 | 127 |
128 | 129 |

Terrifying creatures, wicked surprises and dark comedy converge in...

130 |

Love, Death & Robots

131 |
132 | 133 |
134 | 135 |

Hutch Mansell, a suburban dad, overlooked husband, nothing...

136 |

Nobody

137 |
138 | 139 |
140 | 141 |

When the world's first generation of superheroes received their...

142 |

Jupiter's Legacy

143 |
144 | 145 |
146 | 147 |

A quirky, dysfunctional family's road trip is upended when they find...

148 |

The Mitchells vs. The Machines

149 |
150 | 151 |
152 | 153 |

In a time when monsters walk the Earth, humanity’s fight for its...

154 |

Godzilla vs. Kong

155 |
156 | 157 |
158 | 159 |

A woman wakes in a cryogenic chamber with no recollection of how...

160 |

Oxygen

161 |
162 | 163 |
164 | 165 |

Follow the elite and experimental Clones of the Bad Batch as they...

166 |

The Bad Batch

167 |
168 | 169 |
170 | 171 |

An agoraphobic woman living alone in New York begins spying on...

172 |

The Woman in the Window

173 |
174 | 175 |
176 | 177 |

A teenage murder witness finds himself pursued by twin assassins in...

178 |

Those Who Wish Me Dead

179 |
180 | 181 |
182 | 183 |

Following the events of “Avengers: Endgame”, the Falcon, Sam...

184 |

The Falcon and the Winter Soldier

185 |
186 |
187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /hulu-clone/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-image: linear-gradient(to right, #051427, #042727); 9 | } 10 | 11 | /* header */ 12 | .header { 13 | color: white; 14 | display: flex; 15 | padding: 20px; 16 | align-items: center; 17 | justify-content: space-between; 18 | overflow-x: scroll; 19 | } 20 | 21 | .header::-webkit-scrollbar { 22 | display: none; 23 | } 24 | 25 | .header { 26 | -ms-overflow-style: none; 27 | scrollbar-width: none; 28 | } 29 | 30 | .header > img { 31 | object-fit: contain; 32 | height: 80px; 33 | } 34 | 35 | .header__icons { 36 | display: flex; 37 | align-items: center; 38 | text-align: center; 39 | } 40 | 41 | .header__icon { 42 | display: flex; 43 | flex-direction: column; 44 | width: 100px; 45 | cursor: pointer; 46 | } 47 | 48 | .header__icon p { 49 | text-transform: uppercase; 50 | letter-spacing: 3px; 51 | margin-left: auto; 52 | margin-right: auto; 53 | font-size: small; 54 | display: none; 55 | } 56 | 57 | .header__icon:hover p { 58 | display: inline-flex; 59 | } 60 | 61 | .header__icon .material-icons { 62 | font-size: 30px; 63 | margin-left: auto; 64 | margin-right: auto; 65 | } 66 | 67 | .active > p { 68 | display: inline-flex; 69 | } 70 | 71 | /* nav */ 72 | .nav { 73 | display: flex; 74 | color: white; 75 | overflow-x: scroll; 76 | padding: 10px; 77 | padding-left: 40px; 78 | } 79 | 80 | .nav::-webkit-scrollbar { 81 | display: none; 82 | } 83 | 84 | .nav { 85 | -ms-overflow-style: none; 86 | scrollbar-width: none; 87 | } 88 | 89 | .nav h2 { 90 | cursor: pointer; 91 | margin-left: 20px; 92 | margin-right: 20px; 93 | font-weight: 500; 94 | opacity: 0.7; 95 | transition: transform 50ms ease-out; 96 | } 97 | 98 | .nav h2:hover { 99 | opacity: 1; 100 | transform: scale(1.2); 101 | } 102 | 103 | /* movies */ 104 | .movies { 105 | display: flex; 106 | flex-wrap: wrap; 107 | justify-content: center; 108 | } 109 | .movie { 110 | color: white; 111 | width: 500px; 112 | height: 400px; 113 | padding: 20px; 114 | transition: transform 100ms; 115 | } 116 | 117 | .movie img { 118 | height: 300px; 119 | object-fit: contain; 120 | width: 460px; 121 | } 122 | 123 | .movie:hover { 124 | transform: scale(1.09); 125 | } 126 | 127 | .movie h2 { 128 | padding-top: 10px; 129 | } 130 | -------------------------------------------------------------------------------- /igreels-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Instagram Reels Clone 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 | arrow_back 17 |

Reels

18 | camera_alt 19 |
20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | 28 |

Somanath Goudar •

29 |
30 | 31 |
32 | music_note 33 | Song Name 34 |
35 | 36 |
37 |
38 | favorite 39 | mode_comment 40 | send 41 | more_horiz 42 |
43 |
44 |
45 | favorite 46 |

12

47 |
48 |
49 | mode_comment 50 |

20

51 |
52 |
53 |
54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | arrow_back 62 |

Reels

63 | camera_alt 64 |
65 | 66 | 67 | 68 | 69 | 70 |
71 |
72 | 73 |

Somanath Goudar •

74 |
75 | 76 |
77 | music_note 78 | Song Name 79 |
80 | 81 |
82 |
83 | favorite 84 | mode_comment 85 | send 86 | more_horiz 87 |
88 |
89 |
90 | favorite 91 |

12

92 |
93 |
94 | mode_comment 95 |

20

96 |
97 |
98 |
99 |
100 | 101 |
102 |
103 | 104 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /igreels-clone/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | scroll-snap-type: y mandatory; 8 | } 9 | 10 | body { 11 | color: white; 12 | background-color: black; 13 | height: 100vh; 14 | display: grid; 15 | place-items: center; 16 | } 17 | 18 | .app__videos { 19 | position: relative; 20 | height: 750px; 21 | background-color: white; 22 | overflow: scroll; 23 | width: 100%; 24 | max-width: 400px; 25 | scroll-snap-type: y mandatory; 26 | border-radius: 20px; 27 | } 28 | 29 | .app__videos::-webkit-scrollbar { 30 | display: none; 31 | } 32 | 33 | .app__videos { 34 | -ms-overflow-style: none; 35 | scrollbar-width: none; 36 | } 37 | 38 | .video { 39 | position: relative; 40 | height: 100%; 41 | width: 100%; 42 | background-color: white; 43 | scroll-snap-align: start; 44 | } 45 | 46 | .video__player { 47 | object-fit: cover; 48 | width: 100%; 49 | height: 100%; 50 | } 51 | 52 | @media (max-width: 425px) { 53 | .app__videos { 54 | width: 100%; 55 | height: 100%; 56 | max-width: 100%; 57 | border-radius: 0; 58 | } 59 | } 60 | 61 | /* video header */ 62 | 63 | .videoHeader { 64 | position: absolute; 65 | width: 100%; 66 | display: flex; 67 | justify-content: space-between; 68 | align-items: center; 69 | } 70 | 71 | .videoHeader * { 72 | padding: 20px; 73 | } 74 | 75 | /* video footer */ 76 | 77 | .videoFooter { 78 | position: relative; 79 | bottom: 100px; 80 | margin-left: 20px; 81 | } 82 | 83 | .videoFooter__text { 84 | position: absolute; 85 | bottom: 0; 86 | color: white; 87 | display: flex; 88 | align-items: center; 89 | margin-bottom: 45px; 90 | } 91 | 92 | .user__avatar { 93 | border-radius: 50%; 94 | width: 50px; 95 | height: 50px; 96 | } 97 | 98 | .videoFooter__text h3 { 99 | margin-left: 10px; 100 | } 101 | 102 | .videoFooter__text h3 button { 103 | color: white; 104 | font-weight: 900; 105 | text-transform: inherit; 106 | background: rgba(0, 0, 0, 0.5); 107 | border: none; 108 | padding: 5px; 109 | } 110 | 111 | .videoFooter__ticker { 112 | width: 60%; 113 | margin-left: 30px; 114 | margin-bottom: 20px; 115 | height: fit-content; 116 | } 117 | 118 | .videoFooter__ticker marquee { 119 | font-size: 12px; 120 | padding-top: 7px; 121 | color: white; 122 | } 123 | 124 | .videoFooter__ticker .material-icons { 125 | position: absolute; 126 | left: 5px; 127 | color: white; 128 | } 129 | 130 | .videoFooter__actions { 131 | display: flex; 132 | position: absolute; 133 | width: 95%; 134 | justify-content: space-between; 135 | color: white; 136 | } 137 | 138 | .videoFooter__actionsLeft .material-icons { 139 | padding: 0 7px; 140 | font-size: 1.6em; 141 | } 142 | 143 | .videoFooter__actionsRight .material-icons { 144 | font-size: 25px; 145 | } 146 | 147 | .videoFooter__actionsRight { 148 | display: flex; 149 | } 150 | 151 | .videoFooter__stat { 152 | display: flex; 153 | align-items: center; 154 | margin-right: 10px; 155 | } 156 | 157 | .videoFooter__stat p { 158 | margin-left: 3px; 159 | } 160 | -------------------------------------------------------------------------------- /igreels-clone/videos source.txt: -------------------------------------------------------------------------------- 1 | Video Credits 2 | 3 | video 1: https://www.pexels.com/video/cherry-flowers-blooming-during-spring-season-4040354/ 4 | video 2: https://www.pexels.com/video/cloudy-day-in-the-river-4448895/ 5 | -------------------------------------------------------------------------------- /linkedin-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Final - LinkedIn UI Clone 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 | search 19 | 20 |
21 |
22 | 23 |
24 |
25 | home 26 |

Home

27 |
28 |
29 | supervisor_account 30 |

My Network

31 |
32 |
33 | business_center 34 |

Jobs

35 |
36 |
37 | chat 38 |

Messaging

39 |
40 |
41 | notifications 42 |

Notifications

43 |
44 |
45 | account_circle 46 |

Me

47 |
48 |
49 |
50 | 51 | 52 | 53 |
54 | 55 |
56 |
57 | 58 | account_circle 59 |

Somanath Goudar

60 |

somugowda8050@gmail.com

61 |
62 | 63 |
64 |
65 |

Who Viewed You

66 |

2,453

67 |
68 |
69 |

Views on post

70 |

2,650

71 |
72 |
73 | 74 |
75 |

Recent

76 |
77 | # 78 |

reactjs

79 |
80 |
81 | # 82 |

programming

83 |
84 |
85 | # 86 |

softwareengineering

87 |
88 |
89 | # 90 |

design

91 |
92 |
93 | # 94 |

developer

95 |
96 |
97 |
98 | 99 | 100 | 101 |
102 |
103 |
104 | create 105 |
106 | 107 | 108 |
109 |
110 | 111 |
112 |
113 | insert_photo 114 |

Photo

115 |
116 |
117 | subscriptions 118 |

Video

119 |
120 |
121 | event_note 122 |

Event

123 |
124 |
125 | calendar_view_day 126 |

Write Article

127 |
128 |
129 |
130 | 131 | 132 |
133 |
134 | account_circle 135 |
136 |

Somanath Goudar

137 |

Job Description

138 |
139 |
140 | 141 |
142 |

Message here

143 |
144 | 145 |
146 |
147 | thumb_up 148 |

Like

149 |
150 |
151 | comment 152 |

Comment

153 |
154 |
155 | share 156 |

Share

157 |
158 |
159 | send 160 |

Send

161 |
162 |
163 |
164 | 165 | 166 | 167 |
168 |
169 | account_circle 170 |
171 |

Somanath Goudar

172 |

Job Description

173 |
174 |
175 | 176 |
177 |

Message here

178 |
179 | 180 |
181 |
182 | thumb_up 183 |

Like

184 |
185 |
186 | comment 187 |

Comment

188 |
189 |
190 | share 191 |

Share

192 |
193 |
194 | send 195 |

Send

196 |
197 |
198 |
199 | 200 | 201 | 202 |
203 |
204 | account_circle 205 |
206 |

Somanath Goudar

207 |

Job Description

208 |
209 |
210 | 211 |
212 |

Message here

213 |
214 | 215 |
216 |
217 | thumb_up 218 |

Like

219 |
220 |
221 | comment 222 |

Comment

223 |
224 |
225 | share 226 |

Share

227 |
228 |
229 | send 230 |

Send

231 |
232 |
233 |
234 | 235 | 236 | 237 |
238 |
239 | account_circle 240 |
241 |

Somanath Goudar

242 |

Job Description

243 |
244 |
245 | 246 |
247 |

Message here

248 |
249 | 250 |
251 |
252 | thumb_up 253 |

Like

254 |
255 |
256 | comment 257 |

Comment

258 |
259 |
260 | share 261 |

Share

262 |
263 |
264 | send 265 |

Send

266 |
267 |
268 |
269 | 270 | 271 | 272 |
273 |
274 | account_circle 275 |
276 |

Somanath Goudar

277 |

Job Description

278 |
279 |
280 | 281 |
282 |

Message here

283 |
284 | 285 |
286 |
287 | thumb_up 288 |

Like

289 |
290 |
291 | comment 292 |

Comment

293 |
294 |
295 | share 296 |

Share

297 |
298 |
299 | send 300 |

Send

301 |
302 |
303 |
304 | 305 | 306 | 307 |
308 |
309 | account_circle 310 |
311 |

Somanath Goudar

312 |

Job Description

313 |
314 |
315 | 316 |
317 |

Message here

318 |
319 | 320 |
321 |
322 | thumb_up 323 |

Like

324 |
325 |
326 | comment 327 |

Comment

328 |
329 |
330 | share 331 |

Share

332 |
333 |
334 | send 335 |

Send

336 |
337 |
338 |
339 | 340 | 341 | 342 |
343 |
344 | account_circle 345 |
346 |

Somanath Goudar

347 |

Job Description

348 |
349 |
350 | 351 |
352 |

Message here

353 |
354 | 355 |
356 |
357 | thumb_up 358 |

Like

359 |
360 |
361 | comment 362 |

Comment

363 |
364 |
365 | share 366 |

Share

367 |
368 |
369 | send 370 |

Send

371 |
372 |
373 |
374 | 375 |
376 | 377 | 378 | 379 |
380 |
381 |

LinkedIn Clone

382 | info 383 |
384 |
385 |
386 | fiber_manual_record 387 |
388 |
389 |

Coding LinkedIn Clone

390 |

Top news - 4500 readers

391 |
392 |
393 | 394 |
395 |
396 | fiber_manual_record 397 |
398 |
399 |

Coding LinkedIn Clone

400 |

Top news - 4500 readers

401 |
402 |
403 | 404 |
405 |
406 | fiber_manual_record 407 |
408 |
409 |

Coding LinkedIn Clone

410 |

Top news - 4500 readers

411 |
412 |
413 |
414 | 415 | 416 |
417 | 418 | 419 | 420 | -------------------------------------------------------------------------------- /linkedin-clone/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background-color: #f3f2ef; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | } 12 | 13 | .header__left img { 14 | object-fit: contain; 15 | height: 40px; 16 | margin-right: 10px; 17 | } 18 | 19 | .header { 20 | width: 100%; 21 | display: flex; 22 | position: sticky; 23 | top: 0; 24 | z-index: 999; 25 | justify-content: space-evenly; 26 | border-bottom: 0.1px solid lightgray; 27 | padding-top: 10px; 28 | padding-bottom: 10px; 29 | width: 100%; 30 | background-color: white; 31 | } 32 | 33 | .header__left { 34 | display: flex; 35 | } 36 | 37 | .header__right { 38 | display: flex; 39 | } 40 | 41 | .header__search { 42 | padding: 10px; 43 | display: flex; 44 | align-items: center; 45 | border-radius: 5px; 46 | height: 22px; 47 | color: gray; 48 | background-color: #eef3f8; 49 | } 50 | 51 | .header__search > input { 52 | outline: none; 53 | border: none; 54 | background: none; 55 | } 56 | 57 | .headerOption { 58 | display: flex; 59 | flex-direction: column; 60 | align-items: center; 61 | margin-right: 20px; 62 | color: gray; 63 | cursor: pointer; 64 | } 65 | 66 | .headerOption:hover { 67 | color: black; 68 | } 69 | 70 | .headerOption h3 { 71 | font-size: 12px; 72 | margin-top: 10px; 73 | font-weight: 400; 74 | } 75 | 76 | .headerOption__icon { 77 | margin-right: 5px; 78 | height: 20px; 79 | width: 20px; 80 | } 81 | 82 | /* Main Body */ 83 | .body__main { 84 | display: flex; 85 | margin-top: 35px; 86 | max-width: 1200px; 87 | margin-left: 20px; 88 | margin-right: 20px; 89 | } 90 | /* Sidebar */ 91 | .sidebar { 92 | position: sticky; 93 | top: 80px; 94 | flex: 0.2; 95 | border-radius: 10px; 96 | text-align: center; 97 | height: fit-content; 98 | } 99 | 100 | .sidebar__top > img { 101 | margin-bottom: -20px; 102 | width: 100%; 103 | height: 60px; 104 | border-top-left-radius: 10px; 105 | border-top-right-radius: 10px; 106 | object-fit: cover; 107 | } 108 | 109 | .sidebar__top { 110 | display: flex; 111 | flex-direction: column; 112 | align-items: center; 113 | border: 1px solid lightgray; 114 | border-bottom: 0; 115 | border-top-left-radius: 10px; 116 | border-top-right-radius: 10px; 117 | background-color: white; 118 | padding-bottom: 10px; 119 | } 120 | 121 | .sidebar__topAvatar { 122 | font-size: 40px; 123 | } 124 | 125 | .sidebar__stats { 126 | padding: 10px; 127 | margin-bottom: 10px; 128 | border: 1px solid lightgray; 129 | background-color: white; 130 | border-bottom-left-radius: 10px; 131 | border-bottom-right-radius: 10px; 132 | } 133 | 134 | .sidebar__stat { 135 | margin-top: 10px; 136 | display: flex; 137 | justify-content: space-between; 138 | } 139 | 140 | .sidebar__stat > p { 141 | color: gray; 142 | font-size: 13px; 143 | font-weight: 600; 144 | } 145 | 146 | .sidebar__statNumber { 147 | font-weight: bold; 148 | color: #0a66c2 !important; 149 | } 150 | 151 | .sidebar__top > h4 { 152 | color: gray; 153 | font-size: 12px; 154 | margin-top: 5px; 155 | } 156 | 157 | .sidebar__top > h2 { 158 | font-size: 18px; 159 | } 160 | 161 | .sidebar__bottom { 162 | text-align: left; 163 | padding: 10px; 164 | border: 1px solid lightgray; 165 | background-color: white; 166 | border-radius: 10px; 167 | margin-top: 10px; 168 | } 169 | 170 | .sidebar__recentItem { 171 | display: flex; 172 | font-size: 13px; 173 | color: gray; 174 | font-weight: bolder; 175 | cursor: pointer; 176 | margin-bottom: 5px; 177 | padding: 5px; 178 | } 179 | 180 | .sidebar__recentItem:hover { 181 | background-color: whitesmoke; 182 | border-radius: 10px; 183 | cursor: pointer; 184 | color: black; 185 | } 186 | 187 | .sidebar__hash { 188 | margin-right: 10px; 189 | margin-left: 10px; 190 | } 191 | 192 | .sidebar__bottom > p { 193 | font-size: 14px; 194 | padding-bottom: 10px; 195 | } 196 | 197 | /* Feed */ 198 | .feed { 199 | flex: 0.6; 200 | margin: 0 20px; 201 | } 202 | 203 | .feed__inputContainer { 204 | background-color: white; 205 | padding: 10px; 206 | padding-bottom: 20px; 207 | border-radius: 10px; 208 | margin-bottom: 20px; 209 | } 210 | 211 | .feed__input { 212 | border: 1px solid lightgray; 213 | border-radius: 30px; 214 | display: flex; 215 | padding: 10px; 216 | color: gray; 217 | padding-left: 15px; 218 | } 219 | 220 | .feed__input > form { 221 | display: flex; 222 | width: 100%; 223 | } 224 | 225 | .feed__input > form > input { 226 | border: none; 227 | flex: 1; 228 | margin-left: 10px; 229 | outline-width: 0; 230 | font-weight: 600; 231 | } 232 | 233 | .feed__input > form > button { 234 | display: none; 235 | } 236 | 237 | .feed__inputOptions { 238 | display: flex; 239 | justify-content: space-evenly; 240 | } 241 | 242 | .inputOption { 243 | display: flex; 244 | align-items: center; 245 | margin-top: 15px; 246 | color: gray; 247 | padding: 10px; 248 | cursor: pointer; 249 | } 250 | 251 | .inputOption:hover { 252 | background-color: whitesmoke; 253 | border-radius: 10px; 254 | } 255 | 256 | .inputOption > h4 { 257 | margin-left: 5px; 258 | } 259 | 260 | /* Post */ 261 | .post { 262 | background-color: white; 263 | padding: 15px; 264 | margin-bottom: 10px; 265 | border-radius: 10px; 266 | } 267 | 268 | .post__header { 269 | display: flex; 270 | margin-bottom: 10px; 271 | } 272 | 273 | .post__info { 274 | margin-left: 10px; 275 | } 276 | 277 | .post__info > p { 278 | font-size: 12px; 279 | color: gray; 280 | } 281 | 282 | .post__info > h2 { 283 | font-size: 15px; 284 | } 285 | 286 | /* widgets */ 287 | .widgets { 288 | position: sticky; 289 | top: 80px; 290 | flex: 0.2; 291 | background-color: white; 292 | border-radius: 10px; 293 | border: 1px solid lightgray; 294 | height: fit-content; 295 | padding-bottom: 10px; 296 | } 297 | 298 | .widgets__header { 299 | display: flex; 300 | align-items: center; 301 | justify-content: space-between; 302 | padding: 10px; 303 | } 304 | 305 | .widgets__header > h2 { 306 | font-size: 16px; 307 | font-weight: 400; 308 | } 309 | 310 | .widgets__article { 311 | display: flex; 312 | padding: 10px; 313 | cursor: pointer; 314 | } 315 | 316 | .widgets__article:hover { 317 | background-color: whitesmoke; 318 | } 319 | 320 | .widgets__articleLeft { 321 | color: #0177b7; 322 | margin-right: 5px; 323 | } 324 | 325 | .widgets__articleLeft .material-icons { 326 | font-size: 15px; 327 | } 328 | 329 | .widgets__articleRight { 330 | flex: 1; 331 | } 332 | 333 | .widgets__articleRight > h4 { 334 | font-size: 14px; 335 | } 336 | 337 | .widgets__articleRight > p { 338 | font-size: 12px; 339 | color: gray; 340 | } 341 | -------------------------------------------------------------------------------- /netflix-clone/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/banner.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie1.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie2.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie3.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie4.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie5.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie6.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie7.jpg -------------------------------------------------------------------------------- /netflix-clone/images/large-movie8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/large-movie8.jpg -------------------------------------------------------------------------------- /netflix-clone/images/netflix-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/netflix-avatar.png -------------------------------------------------------------------------------- /netflix-clone/images/netflix-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/netflix-logo.png -------------------------------------------------------------------------------- /netflix-clone/images/small-movie1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie1.jpg -------------------------------------------------------------------------------- /netflix-clone/images/small-movie2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie2.jpg -------------------------------------------------------------------------------- /netflix-clone/images/small-movie3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie3.jpg -------------------------------------------------------------------------------- /netflix-clone/images/small-movie4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie4.jpg -------------------------------------------------------------------------------- /netflix-clone/images/small-movie5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie5.jpg -------------------------------------------------------------------------------- /netflix-clone/images/small-movie6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie6.jpg -------------------------------------------------------------------------------- /netflix-clone/images/small-movie7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie7.jpg -------------------------------------------------------------------------------- /netflix-clone/images/small-movie8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/netflix-clone/images/small-movie8.jpg -------------------------------------------------------------------------------- /netflix-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Netflix Clone 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 32 | 33 | 34 |
35 |

NETFLIX ORIGINALS

36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |
53 |
54 | 55 | 56 |
57 |

Trending Now

58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |
75 |
76 | 77 | 78 |
79 |

Top Rated

80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
97 |
98 | 99 | 100 |
101 |

Action Movies

102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 |
119 |
120 | 121 | 122 |
123 |

Comedy Movies

124 |
125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
141 |
142 | 143 | 144 |
145 |

Horror Movies

146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
163 |
164 | 165 | 166 |
167 |

Romance Movies

168 |
169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 |
185 |
186 | 187 | 188 |
189 |

Documentaries

190 |
191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 |
207 |
208 | 209 | 219 | 220 | 221 | -------------------------------------------------------------------------------- /netflix-clone/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-family: Arial, Helvetica, sans-serif; 8 | background-color: #111; 9 | } 10 | 11 | .row__poster { 12 | width: 100%; 13 | object-fit: contain; 14 | max-height: 100px; 15 | margin-right: 10px; 16 | transition: transform 450ms; 17 | } 18 | 19 | .row__posters { 20 | display: flex; 21 | overflow-y: hidden; 22 | overflow-x: scroll; 23 | padding: 20px; 24 | } 25 | 26 | .row__poster:hover { 27 | transform: scale(1.08); 28 | } 29 | 30 | .row__posters::-webkit-scrollbar { 31 | display: none; 32 | } 33 | 34 | .row__posterLarge { 35 | max-height: 250px; 36 | } 37 | 38 | .row__posterLarge:hover { 39 | transform: scale(1.09); 40 | } 41 | 42 | .row { 43 | color: white; 44 | margin-left: 20px; 45 | } 46 | 47 | /* banner */ 48 | .banner { 49 | background-image: url('images/banner.jpg'); 50 | background-size: cover; 51 | background-position: center center; 52 | color: white; 53 | object-fit: contain; 54 | height: 448px; 55 | } 56 | 57 | .banner__contents { 58 | margin-left: 30px; 59 | padding-top: 140px; 60 | height: 190px; 61 | } 62 | 63 | .banner__title { 64 | font-size: 3rem; 65 | font-weight: 800; 66 | padding-bottom: 0.3rem; 67 | } 68 | 69 | .banner__description { 70 | width: 45rem; 71 | line-height: 1.3; 72 | padding-top: 1rem; 73 | font-size: 0.8rem; 74 | max-width: 360px; 75 | height: 180px; 76 | } 77 | 78 | .banner__button { 79 | cursor: pointer; 80 | color: #fff; 81 | outline: none; 82 | border: none; 83 | font-weight: 700; 84 | border-radius: 0.2vw; 85 | padding-left: 2rem; 86 | padding-right: 2rem; 87 | margin-right: 1rem; 88 | padding-top: 0.5rem; 89 | padding-bottom: 0.5rem; 90 | background-color: rgba(51, 51, 51, 0.5); 91 | } 92 | 93 | .banner__button:hover { 94 | color: #000; 95 | background-color: #e6e6e6; 96 | transition: all 0.2s; 97 | } 98 | 99 | .banner--fadeBottom { 100 | margin-top: 145px; 101 | height: 7.4rem; 102 | background-image: linear-gradient(180deg, transparent, rgba(37, 37, 37, 0.61), #111); 103 | } 104 | 105 | /* nav */ 106 | 107 | .nav__logo { 108 | width: 80px; 109 | object-fit: contain; 110 | } 111 | 112 | .nav__avatar { 113 | width: 30px; 114 | object-fit: contain; 115 | } 116 | 117 | .nav { 118 | position: fixed; 119 | top: 0; 120 | width: 100%; 121 | display: flex; 122 | justify-content: space-between; 123 | padding: 20px; 124 | /* background-color: #111; */ 125 | z-index: 1; 126 | transition-timing-function: ease-in; 127 | transition: all 0.5s; 128 | } 129 | 130 | .nav__black { 131 | background-color: #111; 132 | } 133 | -------------------------------------------------------------------------------- /tiktok-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TikTok Clone 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | favorite_border 21 |

12

22 |
23 | 24 |
25 | message 26 |

23

27 |
28 | 29 |
30 | share 31 |

75

32 |
33 |
34 | 35 | 36 |
37 |
38 |

Somanath Goudar

39 |

Best Video Ever

40 | 41 |
42 | music_note 43 | Song name 44 |
45 |
46 | 51 |
52 |
53 | 54 | 55 | 56 |
57 | 58 | 59 | 60 |
61 |
62 | favorite_border 63 |

12

64 |
65 | 66 |
67 | message 68 |

23

69 |
70 | 71 |
72 | share 73 |

75

74 |
75 |
76 | 77 | 78 |
79 |
80 |

Somanath Goudar

81 |

Best Video Ever

82 | 83 |
84 | music_note 85 | Song name 86 |
87 |
88 | 93 |
94 |
95 | 96 |
97 | 98 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /tiktok-clone/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | box-sizing: border-box; 4 | } 5 | 6 | html { 7 | scroll-snap-type: y mandatory; 8 | } 9 | 10 | body { 11 | color: white; 12 | background-color: black; 13 | height: 100vh; 14 | display: grid; 15 | place-items: center; 16 | } 17 | 18 | .app__videos { 19 | position: relative; 20 | height: 750px; 21 | background-color: white; 22 | overflow: scroll; 23 | width: 100%; 24 | max-width: 400px; 25 | scroll-snap-type: y mandatory; 26 | border-radius: 20px; 27 | } 28 | 29 | .app__videos::-webkit-scrollbar { 30 | display: none; 31 | } 32 | 33 | .app__videos { 34 | -ms-overflow-style: none; 35 | scrollbar-width: none; 36 | } 37 | 38 | .video { 39 | position: relative; 40 | height: 100%; 41 | width: 100%; 42 | background-color: white; 43 | scroll-snap-align: start; 44 | } 45 | 46 | .video__player { 47 | object-fit: cover; 48 | width: 100%; 49 | height: 100%; 50 | } 51 | 52 | .videoSidebar { 53 | position: absolute; 54 | top: 48%; 55 | right: 10px; 56 | } 57 | 58 | .videoSidebar .material-icons { 59 | font-size: 28px; 60 | cursor: pointer; 61 | } 62 | 63 | .videoSidebar__button { 64 | padding: 20px; 65 | text-align: center; 66 | } 67 | 68 | .videoFooter { 69 | position: relative; 70 | bottom: 150px; 71 | margin-left: 20px; 72 | color: white; 73 | display: flex; 74 | } 75 | 76 | @keyframes spinTheRecord { 77 | from { 78 | transform: rotate(0deg); 79 | } 80 | to { 81 | transform: rotate(360deg); 82 | } 83 | } 84 | 85 | .videoFooter__record { 86 | animation: spinTheRecord infinite 5s linear; 87 | height: 50px; 88 | filter: invert(1); 89 | position: absolute; 90 | bottom: 0; 91 | right: 20px; 92 | } 93 | 94 | .videoFooter__text { 95 | flex: 1; 96 | } 97 | 98 | .videoFooter__text h3 { 99 | padding-bottom: 20px; 100 | } 101 | 102 | .videoFooter__icon { 103 | position: absolute; 104 | } 105 | 106 | .videoFooter__ticker { 107 | width: 400px; 108 | display: flex; 109 | align-items: center; 110 | } 111 | 112 | .videoFooter__ticker marquee { 113 | height: fit-content; 114 | margin-left: 30px; 115 | width: 60%; 116 | } 117 | 118 | .videoFooter__description { 119 | padding-bottom: 20px; 120 | } 121 | 122 | @media (max-width: 425px) { 123 | .app__videos { 124 | width: 100%; 125 | height: 100%; 126 | max-width: 100%; 127 | border-radius: 0; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /tiktok-clone/videos source.txt: -------------------------------------------------------------------------------- 1 | Video Credits 2 | 3 | video 1: https://www.pexels.com/video/cherry-flowers-blooming-during-spring-season-4040354/ 4 | video 2: https://www.pexels.com/video/cloudy-day-in-the-river-4448895/ 5 | -------------------------------------------------------------------------------- /twitter-clone/images/car.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/twitter-clone/images/car.jpg -------------------------------------------------------------------------------- /twitter-clone/images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/twitter-clone/images/profile.png -------------------------------------------------------------------------------- /twitter-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Twitter Clone - Final 8 | 9 | 10 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | home 23 |

Home

24 |
25 | 26 |
27 | search 28 |

Explore

29 |
30 | 31 |
32 | notifications_none 33 |

Notifications

34 |
35 | 36 |
37 | mail_outline 38 |

Messages

39 |
40 | 41 |
42 | bookmark_border 43 |

Bookmarks

44 |
45 | 46 |
47 | list_alt 48 |

Lists

49 |
50 | 51 |
52 | perm_identity 53 |

Profile

54 |
55 | 56 |
57 | more_horiz 58 |

More

59 |
60 | 61 |
62 | 63 | 64 | 65 |
66 |
67 |

Home

68 |
69 | 70 | 71 |
72 |
73 |
74 | 78 | 79 |
80 | 81 |
82 |
83 | 84 | 85 | 86 |
87 |
88 | 92 |
93 | 94 |
95 |
96 |
97 |

98 | Somanath Goudar 99 | verified @somanathg 102 |

103 |
104 |
105 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

106 |
107 |
108 | 112 |
113 | repeat 114 | favorite_border 115 | publish 116 |
117 |
118 |
119 | 120 | 121 | 122 |
123 |
124 | 128 |
129 | 130 |
131 |
132 |
133 |

134 | Somanath Goudar 135 | verified @somanathg 138 |

139 |
140 |
141 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

142 |
143 |
144 | 148 |
149 | repeat 150 | favorite_border 151 | publish 152 |
153 |
154 |
155 | 156 |
157 | 158 | 159 | 160 |
161 |
162 | search 163 | 164 |
165 | 166 |
167 |

What's happening?

168 | 185 | 186 |
187 |
188 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /twitter-clone/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | --twitter-color: #50b7f5; 9 | --twitter-background: #e6ecf0; 10 | } 11 | 12 | .sidebarOption { 13 | display: flex; 14 | align-items: center; 15 | cursor: pointer; 16 | } 17 | 18 | .sidebarOption .material-icons, 19 | .fa-twitter { 20 | padding: 20px; 21 | } 22 | 23 | .sidebarOption h2 { 24 | font-weight: 800; 25 | font-size: 20px; 26 | margin-right: 20px; 27 | } 28 | 29 | .sidebarOption:hover { 30 | background-color: var(--twitter-background); 31 | border-radius: 30px; 32 | color: var(--twitter-color); 33 | transition: color 100ms ease-out; 34 | } 35 | 36 | .sidebarOption.active { 37 | color: var(--twitter-color); 38 | } 39 | 40 | .sidebar__tweet { 41 | width: 100%; 42 | background-color: var(--twitter-color); 43 | border: none; 44 | color: white; 45 | font-weight: 900; 46 | border-radius: 30px; 47 | height: 50px; 48 | margin-top: 20px; 49 | } 50 | 51 | body { 52 | display: flex; 53 | height: 100vh; 54 | max-width: 1300px; 55 | margin-left: auto; 56 | margin-right: auto; 57 | padding: 0 10px; 58 | } 59 | 60 | .sidebar { 61 | border-right: 1px solid var(--twitter-background); 62 | flex: 0.2; 63 | 64 | min-width: 250px; 65 | margin-top: 20px; 66 | padding-left: 20px; 67 | padding-right: 20px; 68 | } 69 | 70 | .fa-twitter { 71 | color: var(--twitter-color); 72 | font-size: 30px; 73 | } 74 | 75 | /* feed */ 76 | .feed { 77 | flex: 0.5; 78 | border-right: 1px solid var(--twitter-background); 79 | min-width: fit-content; 80 | overflow-y: scroll; 81 | } 82 | 83 | .feed__header { 84 | position: sticky; 85 | top: 0; 86 | background-color: white; 87 | z-index: 100; 88 | border: 1px solid var(--twitter-background); 89 | padding: 15px 20px; 90 | } 91 | 92 | .feed__header h2 { 93 | font-size: 20px; 94 | font-weight: 800; 95 | } 96 | 97 | .feed::-webkit-scrollbar { 98 | display: none; 99 | } 100 | 101 | .feed { 102 | -ms-overflow-style: none; 103 | scrollbar-width: none; 104 | } 105 | 106 | /* tweet box */ 107 | .tweetbox__input img { 108 | border-radius: 50%; 109 | height: 40px; 110 | } 111 | 112 | .tweetBox { 113 | padding-bottom: 10px; 114 | border-bottom: 8px solid var(--twitter-background); 115 | padding-right: 10px; 116 | } 117 | 118 | .tweetBox form { 119 | display: flex; 120 | flex-direction: column; 121 | } 122 | 123 | .tweetbox__input { 124 | display: flex; 125 | padding: 20px; 126 | } 127 | 128 | .tweetbox__input input { 129 | flex: 1; 130 | margin-left: 20px; 131 | font-size: 20px; 132 | border: none; 133 | outline: none; 134 | } 135 | 136 | .tweetBox__tweetButton { 137 | background-color: var(--twitter-color); 138 | border: none; 139 | color: white; 140 | font-weight: 900; 141 | 142 | border-radius: 30px; 143 | width: 80px; 144 | height: 40px; 145 | margin-top: 20px; 146 | margin-left: auto; 147 | } 148 | 149 | /* post */ 150 | .post__avatar img { 151 | border-radius: 50%; 152 | height: 40px; 153 | } 154 | 155 | .post { 156 | display: flex; 157 | align-items: flex-start; 158 | border-bottom: 1px solid var(--twitter-background); 159 | padding-bottom: 10px; 160 | } 161 | 162 | .post__body img { 163 | width: 450px; 164 | object-fit: contain; 165 | border-radius: 20px; 166 | } 167 | 168 | .post__footer { 169 | display: flex; 170 | justify-content: space-between; 171 | margin-top: 10px; 172 | } 173 | 174 | .post__badge { 175 | font-size: 14px !important; 176 | color: var(--twitter-color); 177 | margin-right: 5px; 178 | } 179 | 180 | .post__headerSpecial { 181 | font-weight: 600; 182 | font-size: 12px; 183 | color: gray; 184 | } 185 | 186 | .post__headerText h3 { 187 | font-size: 15px; 188 | margin-bottom: 5px; 189 | } 190 | 191 | .post__headerDescription { 192 | margin-bottom: 10px; 193 | font-size: 15px; 194 | } 195 | 196 | .post__body { 197 | flex: 1; 198 | padding: 10px; 199 | } 200 | 201 | .post__avatar { 202 | padding: 20px; 203 | } 204 | 205 | /* widgets */ 206 | .widgets { 207 | flex: 0.3; 208 | } 209 | 210 | .widgets__input { 211 | display: flex; 212 | align-items: center; 213 | background-color: var(--twitter-background); 214 | padding: 10px; 215 | border-radius: 20px; 216 | margin-top: 10px; 217 | margin-left: 20px; 218 | } 219 | 220 | .widgets__input input { 221 | border: none; 222 | background-color: var(--twitter-background); 223 | } 224 | 225 | .widgets__searchIcon { 226 | color: gray; 227 | } 228 | 229 | .widgets__widgetContainer { 230 | margin-top: 15px; 231 | margin-left: 20px; 232 | padding: 20px; 233 | background-color: #f5f8fa; 234 | border-radius: 20px; 235 | } 236 | 237 | .widgets__widgetContainer h2 { 238 | font-size: 18px; 239 | font-weight: 800; 240 | } 241 | -------------------------------------------------------------------------------- /youtube-clone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Youtube UI Clone 13 | 14 | 15 | 16 |
17 |
18 | menu 19 | 23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 |
33 | search 34 | videocam 35 | apps 36 | notifications 37 | account_circle 38 |
39 |
40 | 41 | 42 | 43 |
44 | 45 | 46 |
47 |
48 |
49 | home 50 | Home 51 |
52 |
53 | local_fire_department 54 | Trending 55 |
56 |
57 | subscriptions 58 | Subcriptions 59 |
60 |
61 |
62 |
63 |
64 | library_add_check 65 | Library 66 |
67 |
68 | history 69 | History 70 |
71 |
72 | play_arrow 73 | Your Videos 74 |
75 |
76 | watch_later 77 | Watch Later 78 |
79 |
80 | thumb_up 81 | Liked Videos 82 |
83 |
84 |
85 |
86 | 87 | 88 | 89 |
90 |

Recommended

91 | 92 |
93 | 94 |
95 |
96 | 97 |
98 |
99 |
100 | 101 |
102 |
103 |

104 | Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn 105 |

106 | FutureCoders 107 | 10M Views • 3 Months Ago 108 |
109 |
110 |
111 | 112 | 113 | 114 |
115 |
116 | 117 |
118 |
119 |
120 | 121 |
122 |
123 |

Build A Password Generator with React JS - Beginners Tutorial

124 | FutureCoders 125 | 10M Views • 3 Months Ago 126 |
127 |
128 |
129 | 130 | 131 |
132 |
133 | 134 |
135 |
136 |
137 | 141 |
142 |
143 |

Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India

144 | Netflix 145 | 10M Views • 11 Months Ago 146 |
147 |
148 |
149 | 150 |
151 |
152 | 153 |
154 |
155 |
156 | 160 |
161 |
162 |

DON'T EVER GIVE UP - Elon Musk (Motivational Video)

163 | Chispa Motivation 164 | 10M Views • 1 Month Ago 165 |
166 |
167 |
168 | 169 |
170 |
171 | 172 |
173 |
174 |
175 | 179 |
180 |
181 |

Javascript Fundamentals

182 | Coding Addict 183 | 179K • 8 Months Ago 184 |
185 |
186 |
187 | 188 |
189 |
190 | 191 |
192 |
193 |
194 | 198 |
199 |
200 |

Build 15 JavaScript Projects - Vanilla JavaScript Course

201 | freeCodeCamp.org 202 | 470K Views • 8 Months Ago 203 |
204 |
205 |
206 | 207 |
208 |
209 | 210 |
211 |
212 |
213 | 217 |
218 |
219 |

Build Real Time Face Detection With JavaScript

220 | Web Dev Simplified 221 | 875K Views • 1 Year Ago 222 |
223 |
224 |
225 | 226 |
227 |
228 | 229 |
230 |
231 |
232 | 236 |
237 |
238 |

AWS Basics for Beginners - Full Course

239 | freeCodeCamp.org 240 | 36K Views • 1 Day Ago 241 |
242 |
243 |
244 | 245 |
246 |
247 | 248 |
249 |
250 |
251 | 252 |
253 |
254 |

255 | Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn 256 |

257 | FutureCoders 258 | 10M Views • 3 Months Ago 259 |
260 |
261 |
262 | 263 |
264 |
265 | 266 |
267 |
268 |
269 | 270 |
271 |
272 |

Build A Password Generator with React JS - Beginners Tutorial

273 | FutureCoders 274 | 10M Views • 3 Months Ago 275 |
276 |
277 |
278 | 279 |
280 |
281 | 282 |
283 |
284 |
285 | 289 |
290 |
291 |

Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India

292 | Netflix 293 | 10M Views • 11 Months Ago 294 |
295 |
296 |
297 | 298 |
299 |
300 | 301 |
302 |
303 |
304 | 308 |
309 |
310 |

DON'T EVER GIVE UP - Elon Musk (Motivational Video)

311 | Chispa Motivation 312 | 10M Views • 1 Month Ago 313 |
314 |
315 |
316 | 317 |
318 |
319 | 320 |
321 |
322 |
323 | 327 |
328 |
329 |

Javascript Fundamentals

330 | Coding Addict 331 | 179K • 8 Months Ago 332 |
333 |
334 |
335 | 336 |
337 |
338 | 339 |
340 |
341 |
342 | 346 |
347 |
348 |

Build 15 JavaScript Projects - Vanilla JavaScript Course

349 | freeCodeCamp.org 350 | 470K Views • 8 Months Ago 351 |
352 |
353 |
354 | 355 |
356 |
357 | 358 |
359 |
360 |
361 | 365 |
366 |
367 |

Build Real Time Face Detection With JavaScript

368 | Web Dev Simplified 369 | 875K Views • 1 Year Ago 370 |
371 |
372 |
373 | 374 |
375 |
376 | 377 |
378 |
379 |
380 | 384 |
385 |
386 |

AWS Basics for Beginners - Full Course

387 | freeCodeCamp.org 388 | 36K Views • 1 Day Ago 389 |
390 |
391 |
392 | 393 |
394 |
395 | 396 |
397 |
398 |
399 | 400 |
401 |
402 |

403 | Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn 404 |

405 | FutureCoders 406 | 10M Views • 3 Months Ago 407 |
408 |
409 |
410 | 411 |
412 |
413 | 414 |
415 |
416 |
417 | 418 |
419 |
420 |

Build A Password Generator with React JS - Beginners Tutorial

421 | FutureCoders 422 | 10M Views • 3 Months Ago 423 |
424 |
425 |
426 | 427 |
428 |
429 | 430 |
431 |
432 |
433 | 437 |
438 |
439 |

Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India

440 | Netflix 441 | 10M Views • 11 Months Ago 442 |
443 |
444 |
445 | 446 |
447 |
448 | 449 |
450 |
451 |
452 | 456 |
457 |
458 |

DON'T EVER GIVE UP - Elon Musk (Motivational Video)

459 | Chispa Motivation 460 | 10M Views • 1 Month Ago 461 |
462 |
463 |
464 | 465 |
466 |
467 | 468 |
469 |
470 |
471 | 475 |
476 |
477 |

Javascript Fundamentals

478 | Coding Addict 479 | 179K • 8 Months Ago 480 |
481 |
482 |
483 | 484 |
485 |
486 | 487 |
488 |
489 |
490 | 494 |
495 |
496 |

Build 15 JavaScript Projects - Vanilla JavaScript Course

497 | freeCodeCamp.org 498 | 470K Views • 8 Months Ago 499 |
500 |
501 |
502 | 503 |
504 |
505 | 506 |
507 |
508 |
509 | 513 |
514 |
515 |

Build Real Time Face Detection With JavaScript

516 | Web Dev Simplified 517 | 875K Views • 1 Year Ago 518 |
519 |
520 |
521 | 522 |
523 |
524 | 525 |
526 |
527 |
528 | 532 |
533 |
534 |

AWS Basics for Beginners - Full Course

535 | freeCodeCamp.org 536 | 36K Views • 1 Day Ago 537 |
538 |
539 |
540 |
541 |
542 |
543 | 544 | 545 | 546 | 547 | -------------------------------------------------------------------------------- /youtube-clone/index.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector('#menu'); 2 | console.log(menu); 3 | 4 | const sidebar = document.querySelector('.sidebar'); 5 | 6 | menu.addEventListener('click', function () { 7 | sidebar.classList.toggle('show-sidebar'); 8 | }); 9 | -------------------------------------------------------------------------------- /youtube-clone/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/somanath-goudar/html-css-projects/d0365197c68755a8799987bfa9303bc328e71c25/youtube-clone/profile.png -------------------------------------------------------------------------------- /youtube-clone/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Roboto', sans-serif; 11 | } 12 | 13 | /* header */ 14 | 15 | .material-icons { 16 | color: rgb(96, 96, 96); 17 | } 18 | 19 | .header { 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | height: 70px; 24 | padding: 15px; 25 | } 26 | 27 | .header__left { 28 | display: flex; 29 | align-items: center; 30 | } 31 | 32 | .header__left img { 33 | width: 100px; 34 | margin-left: 0.5rem; /* Changed */ 35 | } 36 | 37 | .header i { 38 | padding: 0 7px; 39 | cursor: pointer; 40 | } 41 | 42 | .header__search form { 43 | border: 1px solid #ddd; 44 | height: 35px; 45 | margin: 0; 46 | padding: 0; 47 | display: flex; 48 | } 49 | 50 | .header__search input { 51 | width: 500px; 52 | padding: 10px; 53 | margin: 0; 54 | border-radius: 0; 55 | border: none; 56 | height: 100%; 57 | } 58 | 59 | .header__search button { 60 | padding: 0; 61 | margin: 0; 62 | height: 100%; 63 | border: none; 64 | border-radius: 0; 65 | } 66 | 67 | /* Sidebar */ 68 | .mainBody { 69 | height: calc(100vh - 70px); 70 | display: flex; 71 | overflow: hidden; 72 | } 73 | 74 | .sidebar { 75 | height: 100%; 76 | width: 230px; 77 | background-color: white; 78 | overflow-y: scroll; 79 | } 80 | 81 | .sidebar__categories { 82 | width: 100%; 83 | display: flex; 84 | flex-direction: column; 85 | margin-bottom: 15px; 86 | margin-top: 15px; 87 | } 88 | 89 | .sidebar__category { 90 | display: flex; 91 | align-items: center; 92 | padding: 12px 25px; 93 | } 94 | 95 | .sidebar__category span { 96 | margin-left: 15px; 97 | } 98 | 99 | .sidebar__category:hover { 100 | background: #e5e5e5; 101 | cursor: pointer; 102 | } 103 | 104 | .sidebar::-webkit-scrollbar { 105 | display: none; 106 | } 107 | 108 | hr { 109 | height: 1px; 110 | background-color: #e5e5e5; 111 | border: none; 112 | } 113 | 114 | /* videos */ 115 | 116 | .videos { 117 | background-color: #f9f9f9; 118 | width: 100%; 119 | height: 100%; 120 | padding: 15px 15px; 121 | border-top: 1px solid #ddd; 122 | overflow-y: scroll; 123 | } 124 | 125 | .videos__container { 126 | display: flex; 127 | 128 | flex-direction: row; 129 | justify-content: space-around; 130 | flex-wrap: wrap; 131 | } 132 | 133 | .video { 134 | width: 310px; 135 | margin-left: 5px; 136 | margin-right: 5px; 137 | margin-bottom: 30px; 138 | } 139 | 140 | .video__thumbnail { 141 | width: 100%; 142 | height: 170px; 143 | } 144 | 145 | .video__thumbnail img { 146 | object-fit: cover; 147 | height: 100%; 148 | width: 100%; 149 | } 150 | 151 | .author img { 152 | object-fit: cover; 153 | border-radius: 50%; 154 | height: 40px; 155 | width: 40px; 156 | margin-right: 10px; 157 | } 158 | 159 | .video__details { 160 | display: flex; 161 | margin-top: 10px; 162 | } 163 | 164 | .title { 165 | display: flex; 166 | flex-direction: column; 167 | } 168 | 169 | .title h3 { 170 | color: rgb(3, 3, 3); 171 | line-height: 18px; 172 | font-size: 14px; 173 | margin-bottom: 6px; 174 | } 175 | 176 | .title a, 177 | span { 178 | text-decoration: none; 179 | color: rgb(96, 96, 96); 180 | font-size: 14px; 181 | } 182 | 183 | h1 { 184 | font-size: 20px; 185 | margin-bottom: 10px; 186 | color: rgb(3, 3, 3); 187 | } 188 | 189 | @media (max-width: 425px) { 190 | .header__search { 191 | display: none; 192 | } 193 | 194 | .header__icons .material-icons { 195 | display: none; 196 | } 197 | 198 | .header__icons .display-this { 199 | display: inline; 200 | } 201 | 202 | .sidebar { 203 | display: none; 204 | } 205 | } 206 | 207 | @media (max-width: 768px) { 208 | .header__search { 209 | display: none; 210 | } 211 | 212 | .sidebar { 213 | display: none; 214 | } 215 | 216 | .show-sidebar { 217 | display: inline; 218 | position: fixed; 219 | top: 4.4rem; 220 | height: auto; 221 | } 222 | } 223 | 224 | @media (max-width: 941px) { 225 | .header__search input { 226 | width: 300px; 227 | } 228 | } 229 | --------------------------------------------------------------------------------