├── css ├── owl.carousel.min.css ├── owl.theme.default.css └── style.css ├── img ├── avatar │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ └── hero.png ├── icons │ ├── arrow-down.svg │ ├── arrow-right.svg │ ├── arrow.svg │ ├── bell.svg │ ├── calendar.svg │ ├── camera.svg │ ├── colored-flag.svg │ ├── colored-messenger.svg │ ├── colored-people.svg │ ├── comment.svg │ ├── edit.svg │ ├── facebook.svg │ ├── flag.svg │ ├── gift.svg │ ├── home.svg │ ├── image.svg │ ├── messenger.svg │ ├── photos.svg │ ├── plus.svg │ ├── search.svg │ ├── share.svg │ ├── shield.svg │ ├── smile-2.svg │ ├── smile.svg │ ├── thumbs-up.svg │ ├── tv.svg │ ├── users.svg │ ├── video-live.svg │ └── video-room.svg ├── posts │ └── 1.jpg └── stories │ ├── page-1.jpg │ ├── page-2.jpg │ ├── page-3.jpeg │ ├── st-1.jpeg │ ├── st-2.jpeg │ ├── st-3.jpeg │ └── st-4.jpg ├── index.html └── js ├── index.js ├── jquery.min.js └── owl.carousel.min.js /css/owl.carousel.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} 7 | .owl-theme .owl-dots .owl-dot span { 8 | outline: none; 9 | } -------------------------------------------------------------------------------- /css/owl.theme.default.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Owl Carousel v2.3.4 3 | * Copyright 2013-2018 David Deutsch 4 | * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE 5 | */ 6 | /* 7 | * Default theme - Owl Carousel CSS File 8 | */ 9 | .owl-theme .owl-nav { 10 | margin-top: 10px; 11 | text-align: center; 12 | -webkit-tap-highlight-color: transparent; } 13 | .owl-theme .owl-nav [class*='owl-'] { 14 | color: #FFF; 15 | font-size: 14px; 16 | margin: 5px; 17 | padding: 4px 7px; 18 | background: #D6D6D6; 19 | display: inline-block; 20 | cursor: pointer; 21 | border-radius: 3px; } 22 | .owl-theme .owl-nav [class*='owl-']:hover { 23 | background: #869791; 24 | color: #FFF; 25 | text-decoration: none; } 26 | .owl-theme .owl-nav .disabled { 27 | opacity: 0.5; 28 | cursor: default; } 29 | 30 | .owl-theme .owl-nav.disabled + .owl-dots { 31 | margin-top: 10px; 32 | outline: none;} 33 | 34 | .owl-theme .owl-dots { 35 | text-align: center; 36 | -webkit-tap-highlight-color: transparent; 37 | outline: none; 38 | } 39 | .owl-theme .owl-dots .owl-dot { 40 | display: inline-block; 41 | zoom: 1; 42 | *display: inline; 43 | outline: none; } 44 | .owl-theme .owl-dots .owl-dot span { 45 | width: 10px; 46 | height: 10px; 47 | margin: 5px 7px; 48 | background: #D6D6D6; 49 | display: block; 50 | -webkit-backface-visibility: visible; 51 | transition: opacity 200ms ease; 52 | border-radius: 30px; } 53 | .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { 54 | background: #869791; } 55 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* import font */ 2 | @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap"); 3 | 4 | 5 | /* variables and defaul css */ 6 | :root { 7 | --primary: rgb(3, 29, 46); 8 | --accent: rgb(7, 42, 65); 9 | --lighter: rgb(26, 68, 100); 10 | --blue: rgb(29, 63, 214); 11 | --font: rgb(206, 206, 206); 12 | --placeholder: rgb(219, 219, 219); 13 | --notification: #ff4d4d; 14 | --green: rgb(19, 209, 19); 15 | --border: #5AA1FF; 16 | --border-bottom: #043474; 17 | --white: #fff; 18 | } 19 | 20 | body, 21 | html { 22 | font-family: "Poppins"; 23 | overflow-x: hidden; 24 | background-color: var(--primary); 25 | } 26 | 27 | * { 28 | margin: 0; 29 | padding: 0; 30 | -webkit-box-sizing: border-box; 31 | box-sizing: border-box; 32 | } 33 | 34 | button, 35 | input { 36 | outline: none !important; 37 | } 38 | 39 | a { 40 | text-decoration: none !important; 41 | } 42 | 43 | ::-webkit-input-placeholder { 44 | /* WebKit, Blink, Edge */ 45 | color: var(--placeholder); 46 | } 47 | 48 | :-moz-placeholder { 49 | /* Mozilla Firefox 4 to 18 */ 50 | color: var(--placeholder); 51 | opacity: 1; 52 | } 53 | 54 | ::-moz-placeholder { 55 | /* Mozilla Firefox 19+ */ 56 | color: var(--placeholder); 57 | opacity: 1; 58 | } 59 | 60 | :-ms-input-placeholder { 61 | /* Internet Explorer 10-11 */ 62 | color: var(--placeholder); 63 | 64 | } 65 | 66 | ::-ms-input-placeholder { 67 | /* Microsoft Edge */ 68 | color: var(--placeholder); 69 | } 70 | 71 | ::placeholder { 72 | /* Most modern browsers support this now. */ 73 | color: var(--placeholder); 74 | } 75 | 76 | 77 | /* commonly used widgets */ 78 | 79 | .user, 80 | .item-row { 81 | display: flex; 82 | justify-content: flex-start; 83 | align-content: center; 84 | margin-top: 6px; 85 | position: relative; 86 | flex-shrink: 0; 87 | } 88 | 89 | .item-row { 90 | margin-top: 15px; 91 | } 92 | 93 | .user .profile, 94 | .item-row .icon { 95 | height: 40px; 96 | width: 40px; 97 | border-radius: 50%; 98 | overflow: hidden; 99 | } 100 | 101 | .item-row .icon { 102 | border-radius: 0; 103 | display: flex; 104 | justify-content: flex-start; 105 | align-content: flex-start; 106 | } 107 | 108 | .user .profile img { 109 | height: 100%; 110 | width: 100%; 111 | object-fit: cover; 112 | } 113 | 114 | .item-row .icon img { 115 | height: 70%; 116 | width: 70%; 117 | object-fit: contain; 118 | } 119 | 120 | .user h4, 121 | .item-row h4 { 122 | color: var(--white); 123 | font-weight: 400; 124 | font-size: 0.88rem; 125 | margin: 10px; 126 | text-transform: capitalize; 127 | } 128 | 129 | h6.title { 130 | font-weight: 500; 131 | font-size: 1em; 132 | color: var(--font); 133 | text-transform: capitalize; 134 | } 135 | 136 | /* layout & content */ 137 | 138 | /* nav */ 139 | nav { 140 | display: flex; 141 | justify-content: space-between; 142 | align-items: center; 143 | padding: 12px 20px; 144 | position: relative; 145 | background-color: var(--accent); 146 | border-bottom: 2px solid var(--border-bottom); 147 | height: auto; 148 | } 149 | 150 | nav .left-side { 151 | display: flex; 152 | justify-content: flex-start; 153 | align-items: center; 154 | } 155 | 156 | nav .left-side .logo { 157 | height: 45px; 158 | width: 45px; 159 | border-radius: 50%; 160 | } 161 | 162 | nav .left-side .logo img { 163 | height: 100%; 164 | width: 100%; 165 | object-fit: cover; 166 | } 167 | 168 | nav .left-side .search { 169 | border-radius: 100px; 170 | width: 250px; 171 | position: relative; 172 | background-color: var(--lighter); 173 | margin-left: 10px; 174 | padding-left: 22px; 175 | } 176 | 177 | nav .left-side .search input { 178 | width: 100%; 179 | border: none; 180 | padding: 14px; 181 | background-color: transparent; 182 | color: var(--placeholder); 183 | font-size: 0.80rem; 184 | font-family: Poppins; 185 | } 186 | 187 | nav .left-side .search::before { 188 | content: ''; 189 | height: 12px; 190 | width: 12px; 191 | padding: 2px; 192 | background-image: url('../img/icons/search.svg'); 193 | background-size: contain; 194 | position: absolute; 195 | left: 12px; 196 | top: 14px; 197 | } 198 | 199 | 200 | /* nav tabs */ 201 | nav .tabs { 202 | display: flex; 203 | align-items: center; 204 | justify-content: flex-start; 205 | } 206 | 207 | nav .tabs .tab-icon { 208 | height: 100%; 209 | margin: 0; 210 | margin-top: 5px; 211 | width: 100px; 212 | text-align: center; 213 | position: relative; 214 | } 215 | 216 | nav .tabs .tab-icon .icon { 217 | margin-bottom: 10px; 218 | height: 25px; 219 | width: 25px; 220 | margin: auto; 221 | cursor: pointer; 222 | position: relative; 223 | } 224 | 225 | nav .tabs .tab-icon .icon img { 226 | height: 100%; 227 | width: 100%; 228 | object-fit: contain; 229 | } 230 | 231 | nav .tabs .tab-icon.active::after { 232 | content: ''; 233 | position: absolute; 234 | bottom: -22px; 235 | left: 0; 236 | width: 100%; 237 | border-bottom: 3px solid var(--border); 238 | } 239 | 240 | nav .tabs .tab-icon .icon.has-notification::after { 241 | content: '6'; 242 | position: absolute; 243 | top: -10px; 244 | right: -12px; 245 | border-radius: 50%; 246 | font-size: 0.77rem; 247 | color: var(--white); 248 | height: 20px; 249 | width: 20px; 250 | text-align: center; 251 | background-color: var(--notification); 252 | } 253 | 254 | nav .tabs .tab-icon:last-child .icon.has-notification::after { 255 | content: '4'; 256 | } 257 | 258 | /* user side -right side */ 259 | nav .right-side { 260 | display: flex; 261 | justify-content: center; 262 | align-items: center; 263 | height: 100%; 264 | } 265 | 266 | nav .right-side .user-icons { 267 | display: flex; 268 | justify-content: center; 269 | align-items: center; 270 | margin-left: 15px; 271 | } 272 | 273 | nav .right-side .user-icons .icon { 274 | margin: 0 3px; 275 | height: 45px; 276 | width: 45px; 277 | border-radius: 50%; 278 | position: relative; 279 | display: flex; 280 | justify-content: center; 281 | align-items: center; 282 | background-color: var(--lighter); 283 | cursor: pointer; 284 | } 285 | 286 | nav .right-side .user-icons .icon img { 287 | height: 40%; 288 | width: 40%; 289 | } 290 | 291 | nav .right-side .user-icons .icon.has-notification::after { 292 | content: '12'; 293 | position: absolute; 294 | top: -5px; 295 | right: 0; 296 | border-radius: 20px; 297 | font-size: 0.77rem; 298 | color: var(--white); 299 | padding: 2px 8px; 300 | text-align: center; 301 | background-color: var(--notification); 302 | } 303 | 304 | /* content -shortcuts and content- */ 305 | .wrapper { 306 | display: flex; 307 | justify-content: space-between; 308 | align-items: flex-start; 309 | height: auto; 310 | padding: 20px 25px; 311 | flex-wrap: nowrap; 312 | width: 100%; 313 | } 314 | 315 | .wrapper .shortcuts { 316 | display: flex; 317 | justify-content: flex-start; 318 | align-items: flex-start; 319 | flex-direction: column; 320 | } 321 | 322 | 323 | .wrapper .shortcuts .menu-item { 324 | width: 100%; 325 | margin-left: 0; 326 | } 327 | 328 | .wrapper .shortcuts .menu-item .user .profile { 329 | height: 35px; 330 | width: 35px; 331 | } 332 | 333 | .wrapper .shortcuts .menu-item .item-row h4 { 334 | margin: 5px; 335 | } 336 | 337 | .wrapper .shortcuts .first-col .menu-item:last-of-type .item-row .icon { 338 | background-color: var(--lighter); 339 | border-radius: 50%; 340 | justify-content: center; 341 | align-items: center; 342 | margin-right: 5px; 343 | } 344 | 345 | .wrapper .shortcuts .first-col .menu-item:last-of-type .item-row { 346 | border-bottom: 1px solid var(--border-bottom); 347 | padding-bottom: 20px; 348 | margin-bottom: 20px; 349 | width: 250px 350 | } 351 | 352 | .wrapper .shortcuts .first-col .menu-item:last-of-type .item-row .icon img { 353 | height: 40%; 354 | width: 40%; 355 | } 356 | 357 | .wrapper .shortcuts .first-col .menu-item:last-of-type .item-row h4 { 358 | margin-top: 8px; 359 | } 360 | 361 | .wrapper .shortcuts .second-col .menu-item { 362 | margin-bottom: 18px; 363 | } 364 | 365 | .wrapper .shortcuts .second-col .menu-item .item-row .icon { 366 | height: 35px; 367 | width: 35px; 368 | margin-right: 5px; 369 | border-radius: 10px; 370 | } 371 | 372 | .wrapper .shortcuts .second-col .menu-item .item-row .icon img { 373 | height: 100%; 374 | width: 100%; 375 | object-fit: cover; 376 | } 377 | 378 | 379 | /* strories and events */ 380 | .posts { 381 | width: 50%; 382 | padding: 0 30px; 383 | position: relative; 384 | } 385 | 386 | .posts .stories { 387 | position: relative; 388 | } 389 | 390 | .posts .stories .item { 391 | height: 32vh; 392 | position: relative; 393 | border-radius: 10px; 394 | overflow: hidden; 395 | } 396 | 397 | .posts .stories .item .story-image { 398 | height: 100%; 399 | width: 100%; 400 | position: relative; 401 | } 402 | 403 | .posts .stories .item .story-image img { 404 | height: 100%; 405 | width: 100%; 406 | object-fit: cover; 407 | position: relative; 408 | } 409 | 410 | .posts .stories .item .overlay { 411 | position: absolute; 412 | height: 100%; 413 | width: 100%; 414 | left: 0; 415 | top: 0; 416 | background-color: rgba(0, 0, 0, 0.473); 417 | z-index: 1; 418 | display: flex; 419 | padding: 10px; 420 | justify-content: space-between; 421 | align-items: flex-start; 422 | flex-direction: column; 423 | } 424 | 425 | .posts .stories .item .overlay .person .profile { 426 | height: 40px; 427 | width: 40px; 428 | border-radius: 50%; 429 | overflow: hidden; 430 | border: 3px solid var(--border); 431 | } 432 | 433 | .posts .stories .item .overlay h4 { 434 | color: var(--white); 435 | font-weight: 500; 436 | font-size: 0.88rem; 437 | width: 80%; 438 | margin-left: 5px; 439 | } 440 | 441 | .posts .stories .item .overlay .person .profile img { 442 | height: 100%; 443 | width: 100%; 444 | object-fit: cover; 445 | } 446 | 447 | .posts .stories .item .overlay.first { 448 | padding: 0; 449 | } 450 | 451 | .posts .stories .item .overlay .create { 452 | height: 40%; 453 | width: 100%; 454 | background-color: #164077; 455 | position: absolute; 456 | bottom: 0; 457 | text-align: center; 458 | display: flex; 459 | justify-content: center; 460 | align-items: center; 461 | } 462 | 463 | .posts .stories .item .overlay .create span { 464 | text-align: center; 465 | color: var(--white); 466 | display: block; 467 | height: 100%; 468 | font-size: 0.99rem; 469 | padding-top: 20px; 470 | } 471 | 472 | .posts .stories .item .overlay .create .icon { 473 | height: 35px; 474 | width: 35px; 475 | border-radius: 50%; 476 | overflow: hidden; 477 | background-color: var(--border); 478 | position: absolute; 479 | top: -20px; 480 | display: flex; 481 | justify-content: center; 482 | align-items: center; 483 | } 484 | 485 | .posts .stories .item .overlay .create .icon img { 486 | height: 50%; 487 | width: 50%; 488 | margin: auto 489 | } 490 | 491 | .posts .stories .owl-controls { 492 | position: absolute; 493 | width: 100%; 494 | height: 100%; 495 | z-index: 10; 496 | pointer-events: none; 497 | } 498 | 499 | .posts .stories .owl-controls .controllers { 500 | position: absolute; 501 | z-index: 10; 502 | background-color: #164077; 503 | height: 50px; 504 | width: 50px; 505 | border-radius: 50%; 506 | display: flex; 507 | justify-content: center; 508 | right: -25px; 509 | top: 38%; 510 | align-items: center; 511 | pointer-events: visible; 512 | cursor: pointer; 513 | } 514 | 515 | .posts .stories .owl-controls .controllers img { 516 | height: 30%; 517 | width: 30%; 518 | } 519 | 520 | .posts .create-post, 521 | .posts .view { 522 | margin-top: 50px; 523 | background-color: var(--accent); 524 | padding: 20px 20px 0 20px; 525 | border-radius: 10px; 526 | } 527 | 528 | .posts .create-post.smaller-margin, 529 | .posts .view.smaller-margin { 530 | margin-top: 15px; 531 | } 532 | 533 | .posts .create-post .input { 534 | display: flex; 535 | justify-content: flex-start; 536 | align-items: center; 537 | } 538 | 539 | .posts .create-post .input input { 540 | background-color: var(--lighter); 541 | border: none; 542 | border-radius: 100px; 543 | padding: 12px; 544 | width: 100%; 545 | margin-left: 10px; 546 | color: var(--placeholder); 547 | font-size: 0.88rem; 548 | } 549 | 550 | .posts .create-post .media { 551 | border-top: 2px solid var(--border-bottom); 552 | padding: 20px 30px; 553 | margin-top: 20px; 554 | } 555 | 556 | .posts .create-post .media .category, 557 | .posts .create-post .upper .title, 558 | .posts .create-post .media .category .option { 559 | display: flex; 560 | align-items: center; 561 | } 562 | 563 | .posts .create-post .media .category { 564 | justify-content: space-between; 565 | } 566 | 567 | .posts .create-post .media .category .option .icon, 568 | .posts .create-post .upper .title .icon { 569 | height: 25px; 570 | width: 25px; 571 | } 572 | 573 | .posts .create-post .media .category .option:nth-child(2) .icon { 574 | height: 20px; 575 | width: 20px; 576 | } 577 | 578 | .posts .create-post .media .category .option .icon img, 579 | .posts .create-post .upper .title .icon img { 580 | height: 100%; 581 | width: 100%; 582 | } 583 | 584 | .posts .create-post .media .category .option span, 585 | .posts .create-post .upper span { 586 | color: var(--font); 587 | margin-left: 8px; 588 | font-size: 0.88rem; 589 | font-weight: 500; 590 | text-transform: capitalize; 591 | } 592 | 593 | .posts .view .upper { 594 | display: flex; 595 | justify-content: space-between; 596 | align-items: center; 597 | } 598 | 599 | .posts .view .upper .title { 600 | display: flex; 601 | align-items: center; 602 | } 603 | 604 | .posts .view .upper span { 605 | color: var(--white); 606 | } 607 | 608 | .posts .view .upper a { 609 | color: var(--border); 610 | text-decoration: none; 611 | font-size: 0.88rem; 612 | text-transform: capitalize; 613 | } 614 | 615 | .posts .view .rooms .user .profile { 616 | position: relative; 617 | overflow: visible; 618 | } 619 | 620 | .posts .view .rooms .user .profile img { 621 | border-radius: 50%; 622 | } 623 | 624 | .posts .view .rooms { 625 | padding: 20px 0; 626 | } 627 | 628 | .posts .view.view-post-container { 629 | padding-bottom: 20px; 630 | } 631 | 632 | .posts .view .profile::after { 633 | content: ''; 634 | height: 10px; 635 | width: 10px; 636 | border-radius: 50%; 637 | background-color: var(--green); 638 | position: absolute; 639 | bottom: 0px; 640 | right: -5px; 641 | border: 3px solid var(--accent); 642 | } 643 | 644 | .posts .view .view-post .upper .d-flex { 645 | display: flex; 646 | align-items: center; 647 | } 648 | 649 | .posts .view .view-post .upper .d-flex .info { 650 | margin-left: 10px; 651 | } 652 | 653 | .posts .view .view-post .upper .d-flex .info h6 { 654 | color: var(--white); 655 | font-size: 0.99rem; 656 | font-weight: 500; 657 | text-transform: capitalize; 658 | } 659 | 660 | .posts .view .view-post .upper .d-flex .user { 661 | margin-top: -10px; 662 | } 663 | 664 | .posts .view .view-post .upper .info span { 665 | color: var(--font); 666 | font-size: 0.77rem; 667 | } 668 | 669 | .posts .view .upper h6, 670 | .shortcuts .upper h6 { 671 | color: var(--font); 672 | font-size: 0.99rem; 673 | text-transform: capitalize; 674 | font-weight: 500; 675 | } 676 | 677 | .posts .view .upper .dots, 678 | .shortcuts .upper .dots { 679 | position: relative; 680 | } 681 | 682 | .posts .view .upper .dots .dot, 683 | .shortcuts .upper .dots dot { 684 | height: 5px; 685 | width: 5px; 686 | background-color: var(--font); 687 | border-radius: 50%; 688 | cursor: pointer; 689 | position: relative; 690 | margin-right: 10px; 691 | } 692 | 693 | .posts .view .upper .dots .dot::before, 694 | .shortcuts .upper .dots dot::before, 695 | .posts .view .upper .dots .dot::after, 696 | .shortcuts .upper .dots dot::after { 697 | content: ''; 698 | height: 5px; 699 | width: 5px; 700 | background-color: var(--font); 701 | border-radius: 50%; 702 | position: absolute; 703 | } 704 | 705 | .posts .view .upper .dots .dot::before { 706 | left: 8px; 707 | } 708 | 709 | .posts .view .upper .dots .dot::after { 710 | right: 8px; 711 | } 712 | 713 | .posts .view .view-post .desc p { 714 | color: var(--white); 715 | margin: 20px 0 10px 0; 716 | font-size: 00.88rem; 717 | } 718 | 719 | .posts .view .view-post .post-img { 720 | height: 40vh; 721 | width: 100%; 722 | overflow: hidden; 723 | border-radius: 10px; 724 | } 725 | 726 | .posts .view .view-post .post-img img { 727 | height: 100%; 728 | width: 100%; 729 | object-fit: cover; 730 | } 731 | 732 | .posts .view .view-post .actions-container { 733 | display: flex; 734 | justify-content: space-between; 735 | align-items: center; 736 | } 737 | 738 | .posts .view .view-post .actions-container .action { 739 | display: flex; 740 | justify-content: center; 741 | align-items: center; 742 | margin-top: 20px; 743 | flex: 1; 744 | } 745 | 746 | .posts .view .view-post .actions-container .action .icon { 747 | height: 20px; 748 | width: 20px; 749 | } 750 | 751 | .posts .view .view-post .actions-container .action .icon img, 752 | .posts .view .view-post .write-comment .input .media .icon img { 753 | height: 100%; 754 | width: 100%; 755 | object-fit: contain; 756 | } 757 | 758 | .posts .view .view-post .actions-container .action span { 759 | color: var(--font); 760 | margin-left: 10px; 761 | text-transform: capitalize; 762 | font-size: 0.88rem; 763 | } 764 | 765 | .posts .view .view-post .write-comment, 766 | .posts .view .view-post .write-comment .input, 767 | .posts .view .view-post .write-comment .input .media { 768 | display: flex; 769 | justify-content: center; 770 | align-items: center; 771 | } 772 | 773 | .posts .view .view-post .write-comment { 774 | padding: 10px 0 0 0; 775 | border-top: 2px solid var(--border-bottom); 776 | margin: 10px 0 0 0; 777 | } 778 | 779 | .posts .view .view-post .write-comment .input { 780 | width: 100%; 781 | background-color: var(--lighter); 782 | border-radius: 100px; 783 | padding: 12px; 784 | margin: 10px 0 0 10px 785 | } 786 | 787 | .posts .view .view-post .write-comment .input input { 788 | width: 100%; 789 | background-color: transparent; 790 | border: none; 791 | } 792 | 793 | .posts .view .view-post .write-comment .input .media .icon { 794 | height: 18px; 795 | width: 18px; 796 | margin: 0 4px; 797 | cursor: pointer; 798 | } 799 | 800 | /* people you may know */ 801 | .posts .view.friends { 802 | padding-bottom: 10px; 803 | } 804 | 805 | .posts .view .people .item { 806 | height: auto; 807 | border-radius: 10px; 808 | overflow: hidden; 809 | margin-top: 20px; 810 | border: 2px solid var(--border-bottom); 811 | } 812 | 813 | .posts .view .people .item .person-img { 814 | height: 25vh; 815 | width: 100%; 816 | position: relative; 817 | } 818 | 819 | .posts .view .people .item .person-img .icon { 820 | position: absolute; 821 | top: 10px; 822 | right: 10px; 823 | height: 30px; 824 | width: 30px; 825 | border-radius: 50%; 826 | background-color: var(--lighter); 827 | color: var(--white); 828 | font-size: 20px; 829 | cursor: pointer; 830 | text-align: center; 831 | } 832 | 833 | .posts .view .people .item .person-img img { 834 | height: 100%; 835 | width: 100%; 836 | object-fit: cover; 837 | } 838 | 839 | .posts .view .people .item .info { 840 | text-align: center; 841 | padding: 12px 10px 10px 10px; 842 | } 843 | 844 | .posts .view .people .item .info h4 { 845 | font-size: 0.99rem; 846 | color: var(--font); 847 | text-transform: capitalize; 848 | font-weight: 600; 849 | margin: 0; 850 | padding: 0; 851 | } 852 | 853 | .posts .view .people .item .info span { 854 | font-weight: 400; 855 | font-size: 0.77rem; 856 | color: var(--font); 857 | } 858 | 859 | .posts .view .people .item .info button { 860 | width: 100%; 861 | padding: 10px; 862 | background-color: var(--lighter); 863 | text-transform: capitalize; 864 | color: var(--white); 865 | font-weight: 600; 866 | border: none; 867 | border-radius: 8px; 868 | cursor: pointer; 869 | } 870 | 871 | 872 | /* shortcuts 2 */ 873 | .wrapper .shortcuts-2 .first-col .menu-item:last-of-type .item-row .icon, 874 | .wrapper .shortcuts-2 .first-col .menu-item:last-of-type .item-row h4 { 875 | display: none; 876 | } 877 | 878 | .wrapper .shortcuts-2 .menu-item .item-row .icon.not-rounded { 879 | border-radius: 0; 880 | } 881 | 882 | .wrapper .shortcuts-2 .online { 883 | margin-top: 10px; 884 | padding: 10px 0; 885 | border-top: 1px solid var(--border-bottom); 886 | } 887 | 888 | .wrapper .shortcuts-2 .online h6 { 889 | margin-bottom: 20px; 890 | } 891 | 892 | .wrapper .shortcuts-2 .online .user { 893 | margin-bottom: 15px; 894 | } 895 | 896 | .wrapper .shortcuts-2 .profile { 897 | position: relative; 898 | overflow: visible; 899 | } 900 | 901 | .wrapper .shortcuts-2 .profile img { 902 | border-radius: 50%; 903 | } 904 | 905 | .wrapper .shortcuts-2 .profile::after { 906 | content: ''; 907 | height: 10px; 908 | width: 10px; 909 | border-radius: 50%; 910 | background-color: var(--green); 911 | position: absolute; 912 | bottom: 0px; 913 | right: -5px; 914 | border: 3px solid var(--accent); 915 | } 916 | -------------------------------------------------------------------------------- /img/avatar/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/avatar/1.jpg -------------------------------------------------------------------------------- /img/avatar/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/avatar/2.jpg -------------------------------------------------------------------------------- /img/avatar/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/avatar/3.jpg -------------------------------------------------------------------------------- /img/avatar/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/avatar/4.jpg -------------------------------------------------------------------------------- /img/avatar/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/avatar/5.jpg -------------------------------------------------------------------------------- /img/avatar/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/avatar/6.jpg -------------------------------------------------------------------------------- /img/avatar/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/avatar/hero.png -------------------------------------------------------------------------------- /img/icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /img/icons/arrow.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/bell.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /img/icons/camera.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /img/icons/colored-flag.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/colored-messenger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /img/icons/colored-people.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/comment.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/edit.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /img/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /img/icons/flag.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /img/icons/gift.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/home.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/image.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /img/icons/messenger.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/photos.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/plus.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /img/icons/search.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /img/icons/share.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/shield.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /img/icons/smile-2.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /img/icons/smile.svg: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /img/icons/thumbs-up.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/tv.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /img/icons/users.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/video-live.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /img/icons/video-room.svg: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /img/posts/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/posts/1.jpg -------------------------------------------------------------------------------- /img/stories/page-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/stories/page-1.jpg -------------------------------------------------------------------------------- /img/stories/page-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/stories/page-2.jpg -------------------------------------------------------------------------------- /img/stories/page-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/stories/page-3.jpeg -------------------------------------------------------------------------------- /img/stories/st-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/stories/st-1.jpeg -------------------------------------------------------------------------------- /img/stories/st-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/stories/st-2.jpeg -------------------------------------------------------------------------------- /img/stories/st-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/stories/st-3.jpeg -------------------------------------------------------------------------------- /img/stories/st-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devomar24/facebook-clone/5abb64313e4d68ab36b750a67f860b9497d7e2ab/img/stories/st-4.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |Travellimg to the future 🌟 , it's alraedy 2020 🙋♂🌈🌴
456 |