├── README.md ├── script.js ├── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Project-Management-Dashboard-UI 2 | 3 | Project Management Dashboard UI. 4 | 5 | ## Technologies used 6 | 7 | * HTML 8 | * CSS 9 | * JavaScript 10 | 11 | ## View live site 12 | 13 | https://peter-kimanzi.github.io/Project-Management-Dashboard-UI/ 14 | 15 | ## star this repo 16 | 17 | ## Screenshots 18 | 19 | ![bl](https://user-images.githubusercontent.com/71552773/172792437-70516c0f-9ce1-412f-b407-dec9a13a5c97.PNG) 20 | 21 | ![wh](https://user-images.githubusercontent.com/71552773/172792526-7a70ef95-e224-49e2-82b8-fba6ef00d6e8.PNG) 22 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function () { 2 | var modeSwitch = document.querySelector('.mode-switch'); 3 | 4 | modeSwitch.addEventListener('click', function () { document.documentElement.classList.toggle('dark'); 5 | modeSwitch.classList.toggle('active'); 6 | }); 7 | 8 | var listView = document.querySelector('.list-view'); 9 | var gridView = document.querySelector('.grid-view'); 10 | var projectsList = document.querySelector('.project-boxes'); 11 | 12 | listView.addEventListener('click', function () { 13 | gridView.classList.remove('active'); 14 | listView.classList.add('active'); 15 | projectsList.classList.remove('jsGridView'); 16 | projectsList.classList.add('jsListView'); 17 | }); 18 | 19 | gridView.addEventListener('click', function () { 20 | gridView.classList.add('active'); 21 | listView.classList.remove('active'); 22 | projectsList.classList.remove('jsListView'); 23 | projectsList.classList.add('jsGridView'); 24 | }); 25 | 26 | document.querySelector('.messages-btn').addEventListener('click', function () { 27 | document.querySelector('.messages-section').classList.add('show'); 28 | }); 29 | 30 | document.querySelector('.messages-close').addEventListener('click', function() { 31 | document.querySelector('.messages-section').classList.remove('show'); 32 | }); 33 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap"); 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --app-container: #f3f6fd; 9 | --main-color: #1f1c2e; 10 | --secondary-color: #4A4A4A; 11 | --link-color: #1f1c2e; 12 | --link-color-hover: #c3cff4; 13 | --link-color-active: #fff; 14 | --link-color-active-bg: #1f1c2e; 15 | --projects-section: #fff; 16 | --message-box-hover: #fafcff; 17 | --message-box-border: #e9ebf0; 18 | --more-list-bg: #fff; 19 | --more-list-bg-hover: #f6fbff; 20 | --more-list-shadow: rgba(209, 209, 209, 0.4); 21 | --button-bg: #1f1c24; 22 | --search-area-bg: #fff; 23 | --star: #1ff1c2e; 24 | --message-btn: #fff; 25 | } 26 | 27 | .dark:root { 28 | --app-container: #1f1d2b; 29 | --app-container: #111827; 30 | --main-color: #fff; 31 | --secondary-color: rgba(255,255,255,.8); 32 | --projects-section: #1f2937; 33 | --link-color: rgba(255,255,255,.8); 34 | --link-color-hover: rgba(195, 207, 244, 0.1); 35 | --link-color-active-bg: rgba(195, 207, 244, 0.2); 36 | --button-bg: #1f2937; 37 | --search-area-bg: #1f2937; 38 | --message-box-hover: #243244; 39 | --message-box-border: rgba(255,255,255,.1); 40 | --star: #ffd92c; 41 | --light-font: rgba(255,255,255,.8); 42 | --more-list-bg: #2f3142; 43 | --more-list-bg-hover: rgba(195, 207, 244, 0.1); 44 | --more-list-shadow: rgba(195, 207, 244, 0.1); 45 | --message-btn: rgba(195, 207, 244, 0.1); 46 | } 47 | 48 | html, body { 49 | width: 100%; 50 | height: 100vh; 51 | margin: 0; 52 | } 53 | 54 | body { 55 | font-family: "DM Sans", sans-serif; 56 | overflow: hidden; 57 | display: flex; 58 | justify-content: center; 59 | background-color: var(--app-container); 60 | } 61 | 62 | button, a { 63 | cursor: pointer; 64 | } 65 | 66 | .app-container { 67 | width: 100%; 68 | display: flex; 69 | flex-direction: column; 70 | height: 100%; 71 | background-color: var(--app-container); 72 | transition: 0.2s; 73 | max-width: 1800px; 74 | } 75 | .app-container button, .app-container input, .app-container optgroup, .app-container select, .app-container textarea { 76 | font-family: "DM Sans", sans-serif; 77 | } 78 | .app-content { 79 | display: flex; 80 | height: 100%; 81 | overflow: hidden; 82 | padding: 16px 24px 24px 0; 83 | } 84 | .app-header { 85 | display: flex; 86 | justify-content: space-between; 87 | align-items: center; 88 | width: 100%; 89 | padding: 16px 24px; 90 | position: relative; 91 | } 92 | .app-header-left, .app-header-right { 93 | display: flex; 94 | align-items: center; 95 | } 96 | .app-header-left { 97 | flex-grow: 1; 98 | } 99 | .app-header-right button { 100 | margin-left: 10px; 101 | } 102 | .app-icon { 103 | width: 26px; 104 | height: 2px; 105 | border-radius: 4px; 106 | background-color: var(--main-color); 107 | position: relative; 108 | } 109 | .app-icon:before, .app-icon:after { 110 | content: ""; 111 | position: absolute; 112 | width: 12px; 113 | height: 2px; 114 | border-radius: 4px; 115 | background-color: var(--main-color); 116 | left: 50%; 117 | transform: translatex(-50%); 118 | } 119 | .app-icon:before { 120 | top: -6px; 121 | } 122 | .app-icon:after { 123 | bottom: -6px; 124 | } 125 | .app-name { 126 | color: var(--main-color); 127 | margin: 0; 128 | font-size: 20px; 129 | line-height: 24px; 130 | font-weight: 700; 131 | margin: 0 32px; 132 | } 133 | 134 | .mode-switch { 135 | background-color: transparent; 136 | border: none; 137 | padding: 0; 138 | color: var(--main-color); 139 | display: flex; 140 | justify-content: center; 141 | align-items: center; 142 | } 143 | 144 | .search-wrapper { 145 | border-radius: 20px; 146 | background-color: var(--search-area-bg); 147 | padding-right: 12px; 148 | height: 40px; 149 | display: flex; 150 | justify-content: space-between; 151 | align-items: center; 152 | width: 100%; 153 | max-width: 480px; 154 | color: var(--light-font); 155 | box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1); 156 | overflow: hidden; 157 | } 158 | .dark .search-wrapper { 159 | box-shadow: none; 160 | } 161 | 162 | .search-input { 163 | border: none; 164 | flex: 1; 165 | outline: none; 166 | height: 100%; 167 | padding: 0 20px; 168 | font-size: 16px; 169 | background-color: var(--search-area-bg); 170 | color: var(--main-color); 171 | } 172 | .search-input:placeholder { 173 | color: var(--main-color); 174 | opacity: 0.6; 175 | } 176 | 177 | .add-btn { 178 | color: #fff; 179 | background-color: var(--button-bg); 180 | padding: 0; 181 | border: 0; 182 | border-radius: 50%; 183 | width: 32px; 184 | height: 32px; 185 | display: flex; 186 | align-items: center; 187 | justify-content: center; 188 | } 189 | 190 | .notification-btn { 191 | color: var(--main-color); 192 | padding: 0; 193 | border: 0; 194 | background-color: transparent; 195 | height: 32px; 196 | display: flex; 197 | justify-content: center; 198 | align-items: center; 199 | } 200 | 201 | .profile-btn { 202 | padding: 0; 203 | border: 0; 204 | background-color: transparent; 205 | display: flex; 206 | align-items: center; 207 | padding-left: 12px; 208 | border-left: 2px solid #ddd; 209 | } 210 | .profile-btn img { 211 | width: 32px; 212 | height: 32px; 213 | -o-object-fit: cover; 214 | object-fit: cover; 215 | border-radius: 50%; 216 | margin-right: 4px; 217 | } 218 | .profile-btn span { 219 | color: var(--main-color); 220 | font-size: 16px; 221 | line-height: 24px; 222 | font-weight: 700; 223 | } 224 | 225 | .page-content  { 226 | flex: 1; 227 | width: 100%; 228 | } 229 | 230 | .app-sidebar { 231 | padding: 40px 16px; 232 | display: flex; 233 | flex-direction: column; 234 | align-items: center; 235 | } 236 | .app-sidebar-link { 237 | color: var(--main-color); 238 | color: var(--link-color); 239 | margin: 16px 0; 240 | transition: 0.2s; 241 | border-radius: 50%; 242 | flex-shrink: 0; 243 | width: 40px; 244 | height: 40px; 245 | display: flex; 246 | justify-content: center; 247 | align-items: center; 248 | } 249 | .app-sidebar-link:hover { 250 | background-color: var(--link-color-hover); 251 | color: var(--link-color-active); 252 | } 253 | .app-sidebar-link.active { 254 | background-color: var(--link-color-active-bg); 255 | color: var(--link-color-active); 256 | } 257 | 258 | .projects-section { 259 | flex: 2; 260 | background-color: var(--projects-section); 261 | border-radius: 32px; 262 | padding: 32px 32px 0 32px; 263 | overflow: hidden; 264 | height: 100%; 265 | display: flex; 266 | flex-direction: column; 267 | } 268 | .projects-section-line { 269 | display: flex; 270 | justify-content: space-between; 271 | align-items: center; 272 | padding-bottom: 32px; 273 | } 274 | .projects-section-header { 275 | display: flex; 276 | justify-content: space-between; 277 | align-items: center; 278 | margin-bottom: 24px; 279 | color: var(--main-color); 280 | } 281 | .projects-section-header p { 282 | font-size: 24px; 283 | line-height: 32px; 284 | font-weight: 700; 285 | opacity: 0.9; 286 | margin: 0; 287 | color: var(--main-color); 288 | } 289 | .projects-section-header .time { 290 | font-size: 20px; 291 | } 292 | 293 | .projects-status { 294 | display: flex; 295 | } 296 | 297 | .item-status { 298 | display: flex; 299 | flex-direction: column; 300 | margin-right: 16px; 301 | } 302 | .item-status:not(:last-child) .status-type:after { 303 | content: ""; 304 | position: absolute; 305 | right: 8px; 306 | top: 50%; 307 | transform: translatey(-50%); 308 | width: 6px; 309 | height: 6px; 310 | border-radius: 50%; 311 | border: 1px solid var(--secondary-color); 312 | } 313 | 314 | .status-number { 315 | font-size: 24px; 316 | line-height: 32px; 317 | font-weight: 700; 318 | color: var(--main-color); 319 | } 320 | 321 | .status-type { 322 | position: relative; 323 | padding-right: 24px; 324 | color: var(--secondary-color); 325 | } 326 | 327 | .view-actions { 328 | display: flex; 329 | align-items: center; 330 | } 331 | 332 | .view-btn { 333 | width: 36px; 334 | height: 36px; 335 | display: flex; 336 | justify-content: center; 337 | align-items: center; 338 | padding: 6px; 339 | border-radius: 4px; 340 | background-color: transparent; 341 | border: none; 342 | color: var(--main-color); 343 | margin-left: 8px; 344 | transition: 0.2s; 345 | } 346 | .view-btn.active { 347 | background-color: var(--link-color-active-bg); 348 | color: var(--link-color-active); 349 | } 350 | .view-btn:not(.active):hover { 351 | background-color: var(--link-color-hover); 352 | color: var(--link-color-active); 353 | } 354 | 355 | .messages-section { 356 | flex-shrink: 0; 357 | padding-bottom: 32px; 358 | background-color: var(--projects-section); 359 | margin-left: 24px; 360 | flex: 1; 361 | width: 100%; 362 | border-radius: 30px; 363 | position: relative; 364 | overflow: auto; 365 | transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1); 366 | } 367 | .messages-section .messages-close { 368 | position: absolute; 369 | top: 12px; 370 | right: 12px; 371 | z-index: 3; 372 | border: none; 373 | background-color: transparent; 374 | color: var(--main-color); 375 | display: none; 376 | } 377 | .messages-section.show { 378 | transform: translateX(0); 379 | opacity: 1; 380 | margin-left: 0; 381 | } 382 | .messages-section .projects-section-header { 383 | position: sticky; 384 | top: 0; 385 | z-index: 1; 386 | padding: 32px 24px 0 24px; 387 | background-color: var(--projects-section); 388 | } 389 | 390 | .message-box { 391 | border-top: 1px solid var(--message-box-border); 392 | padding: 16px; 393 | display: flex; 394 | align-items: flex-start; 395 | width: 100%; 396 | } 397 | .message-box:hover { 398 | background-color: var(--message-box-hover); 399 | border-top-color: var(--link-color-hover); 400 | } 401 | .message-box:hover + .message-box { 402 | border-top-color: var(--link-color-hover); 403 | } 404 | .message-box img { 405 | border-radius: 50%; 406 | -o-object-fit: cover; 407 | object-fit: cover; 408 | width: 40px; 409 | height: 40px; 410 | } 411 | 412 | .message-header { 413 | display: flex; 414 | align-items: center; 415 | justify-content: space-between; 416 | width: 100%; 417 | } 418 | .message-header .name { 419 | font-size: 16px; 420 | line-height: 24px; 421 | font-weight: 700; 422 | color: var(--main-color); 423 | margin: 0; 424 | } 425 | 426 | .message-content { 427 | padding-left: 16px; 428 | width: 100%; 429 | } 430 | 431 | .star-checkbox input { 432 | opacity: 0; 433 | position: absolute; 434 | width: 0; 435 | height: 0; 436 | } 437 | .star-checkbox label { 438 | width: 24px; 439 | height: 24px; 440 | display: flex; 441 | justify-content: center; 442 | align-items: center; 443 | cursor: pointer; 444 | } 445 | .dark .star-checkbox { 446 | color: var(--secondary-color); 447 | } 448 | .dark .star-checkbox input:checked + label { 449 | color: var(--star); 450 | } 451 | .star-checkbox input:checked + label svg { 452 | fill: var(--star); 453 | transition: 0.2s; 454 | } 455 | 456 | .message-line { 457 | font-size: 14px; 458 | line-height: 20px; 459 | margin: 8px 0; 460 | color: var(--secondary-color); 461 | opacity: 0.7; 462 | } 463 | .message-line.time { 464 | text-align: right; 465 | margin-bottom: 0; 466 | } 467 | 468 | .project-boxes { 469 | margin: 0 -8px; 470 | overflow-y: auto; 471 | } 472 | .project-boxes.jsGridView { 473 | display: flex; 474 | flex-wrap: wrap; 475 | } 476 | .project-boxes.jsGridView .project-box-wrapper { 477 | width: 33.3%; 478 | } 479 | .project-boxes.jsListView .project-box { 480 | display: flex; 481 | border-radius: 10px; 482 | position: relative; 483 | } 484 | .project-boxes.jsListView .project-box > * { 485 | margin-right: 24px; 486 | } 487 | .project-boxes.jsListView .more-wrapper { 488 | position: absolute; 489 | right: 16px; 490 | top: 16px; 491 | } 492 | .project-boxes.jsListView .project-box-content-header { 493 | order: 1; 494 | max-width: 120px; 495 | } 496 | .project-boxes.jsListView .project-box-header { 497 | order: 2; 498 | } 499 | .project-boxes.jsListView .project-box-footer { 500 | order: 3; 501 | padding-top: 0; 502 | flex-direction: column; 503 | justify-content: flex-start; 504 | } 505 | .project-boxes.jsListView .project-box-footer:after { 506 | display: none; 507 | } 508 | .project-boxes.jsListView .participants { 509 | margin-bottom: 8px; 510 | } 511 | .project-boxes.jsListView .project-box-content-header p { 512 | text-align: left; 513 | overflow: hidden; 514 | white-space: nowrap; 515 | text-overflow: ellipsis; 516 | } 517 | .project-boxes.jsListView .project-box-header > span { 518 | position: absolute; 519 | bottom: 16px; 520 | left: 16px; 521 | font-size: 12px; 522 | } 523 | .project-boxes.jsListView .box-progress-wrapper { 524 | order: 3; 525 | flex: 1; 526 | } 527 | 528 | .project-box { 529 | --main-color-card: #dbf6fd; 530 | border-radius: 30px; 531 | padding: 16px; 532 | background-color: var(--main-color-card); 533 | } 534 | .project-box-header { 535 | display: flex; 536 | align-items: center; 537 | justify-content: space-between; 538 | margin-bottom: 16px; 539 | color: var(--main-color); 540 | } 541 | .project-box-header span { 542 | color: #4A4A4A; 543 | opacity: 0.7; 544 | font-size: 14px; 545 | line-height: 16px; 546 | } 547 | .project-box-content-header { 548 | text-align: center; 549 | margin-bottom: 16px; 550 | } 551 | .project-box-content-header p { 552 | margin: 0; 553 | } 554 | .project-box-wrapper { 555 | padding: 8px; 556 | transition: 0.2s; 557 | } 558 | 559 | .project-btn-more { 560 | padding: 0; 561 | height: 14px; 562 | width: 24px; 563 | height: 24px; 564 | position: relative; 565 | background-color: transparent; 566 | border: none; 567 | flex-shrink: 0; 568 | /*&:after, &:before { 569 | content: ''; 570 | position: absolute; 571 | width: 6px; 572 | height: 6px; 573 | border-radius: 50%; 574 | background-color: var(--main-color); 575 | opacity: .8; 576 | left: 50%; 577 | transform: translatex(-50%); 578 | } 579 | 580 | &:before { top: 0;} 581 | &:after { bottom: 0; }*/ 582 | } 583 | 584 | .more-wrapper { 585 | position: relative; 586 | } 587 | 588 | .box-content-header { 589 | font-size: 16px; 590 | line-height: 24px; 591 | font-weight: 700; 592 | opacity: 0.7; 593 | } 594 | 595 | .box-content-subheader { 596 | font-size: 14px; 597 | line-height: 24px; 598 | opacity: 0.7; 599 | } 600 | 601 | .box-progress { 602 | display: block; 603 | height: 4px; 604 | border-radius: 6px; 605 | } 606 | .box-progress-bar { 607 | width: 100%; 608 | height: 4px; 609 | border-radius: 6px; 610 | overflow: hidden; 611 | background-color: #fff; 612 | margin: 8px 0; 613 | } 614 | .box-progress-header { 615 | font-size: 14px; 616 | font-weight: 700; 617 | line-height: 16px; 618 | margin: 0; 619 | } 620 | .box-progress-percentage { 621 | text-align: right; 622 | margin: 0; 623 | font-size: 14px; 624 | font-weight: 700; 625 | line-height: 16px; 626 | } 627 | 628 | .project-box-footer { 629 | display: flex; 630 | justify-content: space-between; 631 | padding-top: 16px; 632 | position: relative; 633 | } 634 | .project-box-footer:after { 635 | content: ""; 636 | position: absolute; 637 | background-color: rgba(255, 255, 255, 0.6); 638 | width: calc(100% + 32px); 639 | top: 0; 640 | left: -16px; 641 | height: 1px; 642 | } 643 | 644 | .participants { 645 | display: flex; 646 | align-items: center; 647 | } 648 | .participants img { 649 | width: 20px; 650 | height: 20px; 651 | border-radius: 50%; 652 | overflow: hidden; 653 | -o-object-fit: cover; 654 | object-fit: cover; 655 | } 656 | .participants img:not(:first-child) { 657 | margin-left: -8px; 658 | } 659 | 660 | .add-participant { 661 | width: 20px; 662 | height: 20px; 663 | border-radius: 50%; 664 | border: none; 665 | background-color: rgba(255, 255, 255, 0.6); 666 | margin-left: 6px; 667 | display: flex; 668 | justify-content: center; 669 | align-items: center; 670 | padding: 0; 671 | } 672 | 673 | .days-left { 674 | background-color: rgba(255, 255, 255, 0.6); 675 | font-size: 12px; 676 | border-radius: 20px; 677 | flex-shrink: 0; 678 | padding: 6px 16px; 679 | font-weight: 700; 680 | } 681 | 682 | .mode-switch.active .moon { 683 | fill: var(--main-color); 684 | } 685 | 686 | .messages-btn { 687 | border-radius: 4px 0 0 4px; 688 | position: absolute; 689 | right: 0; 690 | top: 58px; 691 | background-color: var(--message-btn); 692 | border: none; 693 | color: var(--main-color); 694 | display: flex; 695 | justify-content: center; 696 | align-items: center; 697 | padding: 4px; 698 | display: none; 699 | } 700 | 701 | @media screen and (max-width: 980px) { 702 | .project-boxes.jsGridView .project-box-wrapper { 703 | width: 50%; 704 | } 705 | 706 | .status-number, .status-type { 707 | font-size: 14px; 708 | } 709 | 710 | .status-type:after { 711 | width: 4px; 712 | height: 4px; 713 | } 714 | 715 | .item-status { 716 | margin-right: 0; 717 | } 718 | } 719 | @media screen and (max-width: 880px) { 720 | .messages-section { 721 | transform: translateX(100%); 722 | position: absolute; 723 | opacity: 0; 724 | top: 0; 725 | z-index: 2; 726 | height: 100%; 727 | width: 100%; 728 | } 729 | .messages-section .messages-close { 730 | display: block; 731 | } 732 | 733 | .messages-btn { 734 | display: flex; 735 | } 736 | } 737 | @media screen and (max-width: 720px) { 738 | .app-name, .profile-btn span { 739 | display: none; 740 | } 741 | 742 | .add-btn, .notification-btn, .mode-switch { 743 | width: 20px; 744 | height: 20px; 745 | } 746 | .add-btn svg, .notification-btn svg, .mode-switch svg { 747 | width: 16px; 748 | height: 16px; 749 | } 750 | 751 | .app-header-right button { 752 | margin-left: 4px; 753 | } 754 | } 755 | @media screen and (max-width: 520px) { 756 | .projects-section { 757 | overflow: auto; 758 | } 759 | 760 | .project-boxes { 761 | overflow-y: visible; 762 | } 763 | 764 | .app-sidebar, .app-icon { 765 | display: none; 766 | } 767 | 768 | .app-content { 769 | padding: 16px 12px 24px 12px; 770 | } 771 | 772 | .status-number, .status-type { 773 | font-size: 10px; 774 | } 775 | 776 | .view-btn { 777 | width: 24px; 778 | height: 24px; 779 | } 780 | 781 | .app-header { 782 | padding: 16px 10px; 783 | } 784 | 785 | .search-input { 786 | max-width: 120px; 787 | } 788 | 789 | .project-boxes.jsGridView .project-box-wrapper { 790 | width: 100%; 791 | } 792 | 793 | .projects-section { 794 | padding: 24px 16px 0 16px; 795 | } 796 | 797 | .profile-btn img { 798 | width: 24px; 799 | height: 24px; 800 | } 801 | 802 | .app-header { 803 | padding: 10px; 804 | } 805 | 806 | .projects-section-header p, 807 | .projects-section-header .time { 808 | font-size: 18px; 809 | } 810 | 811 | .status-type { 812 | padding-right: 4px; 813 | } 814 | .status-type:after { 815 | display: none; 816 | } 817 | 818 | .search-input { 819 | font-size: 14px; 820 | } 821 | 822 | .messages-btn { 823 | top: 48px; 824 | } 825 | 826 | .box-content-header { 827 | font-size: 12px; 828 | line-height: 16px; 829 | } 830 | 831 | .box-content-subheader { 832 | font-size: 12px; 833 | line-height: 16px; 834 | } 835 | 836 | .project-boxes.jsListView .project-box-header > span { 837 | font-size: 10px; 838 | } 839 | 840 | .box-progress-header { 841 | font-size: 12px; 842 | } 843 | 844 | .box-progress-percentage { 845 | font-size: 10px; 846 | } 847 | 848 | .days-left { 849 | font-size: 8px; 850 | padding: 6px 6px; 851 | text-align: center; 852 | } 853 | 854 | .project-boxes.jsListView .project-box > * { 855 | margin-right: 10px; 856 | } 857 | 858 | .project-boxes.jsListView .more-wrapper { 859 | right: 2px; 860 | top: 10px; 861 | } 862 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Project Management Dashboard UI 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |

Portfolio

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 | 33 | 38 | 43 | 47 |
48 | 52 |
53 |
54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
81 |
82 |
83 |

Projects

84 |

December, 12

85 |
86 |
87 |
88 |
89 | 45 90 | In Progress 91 |
92 |
93 | 24 94 | Upcoming 95 |
96 |
97 | 62 98 | Total Projects 99 |
100 |
101 |
102 | 111 | 118 |
119 |
120 |
121 |
122 |
123 |
124 | December 10, 2020 125 |
126 | 132 |
133 |
134 |
135 |

Web Designing

136 |

Prototyping

137 |
138 |
139 |

Progress

140 |
141 | 142 |
143 |

60%

144 |
145 |
146 |
147 | participant 148 | participant 149 | 154 |
155 |
156 | 2 Days Left 157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 | December 10, 2020 165 |
166 | 172 |
173 |
174 |
175 |

Testing

176 |

Prototyping

177 |
178 |
179 |

Progress

180 |
181 | 182 |
183 |

50%

184 |
185 |
186 |
187 | participant 188 | participant 189 | 194 |
195 |
196 | 2 Days Left 197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 | December 10, 2020 205 |
206 | 212 |
213 |
214 |
215 |

Svg Animations

216 |

Prototyping

217 |
218 |
219 |

Progress

220 |
221 | 222 |
223 |

80%

224 |
225 |
226 |
227 | participant 228 | participant 229 | 234 |
235 |
236 | 2 Days Left 237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 | December 10, 2020 245 |
246 | 252 |
253 |
254 |
255 |

UI Development

256 |

Prototyping

257 |
258 |
259 |

Progress

260 |
261 | 262 |
263 |

20%

264 |
265 |
266 |
267 | participant 268 | participant 269 | 274 |
275 |
276 | 2 Days Left 277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 | December 10, 2020 285 |
286 | 292 |
293 |
294 |
295 |

Data Analysis

296 |

Prototyping

297 |
298 |
299 |

Progress

300 |
301 | 302 |
303 |

60%

304 |
305 |
306 |
307 | participant 308 | participant 309 | 314 |
315 |
316 | 2 Days Left 317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 | December 10, 2020 325 |
326 | 332 |
333 |
334 |
335 |

Web Designing

336 |

Prototyping

337 |
338 |
339 |

Progress

340 |
341 | 342 |
343 |

40%

344 |
345 |
346 |
347 | participant 348 | participant 349 | 354 |
355 |
356 | 2 Days Left 357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 | 370 |
371 |

Client Messages

372 |
373 |
374 |
375 | profile image 376 |
377 |
378 |
mary
379 |
380 | 381 | 385 |
386 |
387 |

388 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, distinctio? 389 |

390 |

391 | Dec, 12 392 |

393 |
394 |
395 |
396 | profile image 397 |
398 |
399 |
Mark
400 |
401 | 402 | 406 |
407 |
408 |

409 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, natus. 410 |

411 |

412 | Dec, 12 413 |

414 |
415 |
416 |
417 | profile image 418 |
419 |
420 |
kim
421 |
422 | 423 | 427 |
428 |
429 |

430 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, dignissimos. 431 |

432 |

433 | Dec, 12 434 |

435 |
436 |
437 |
438 | profile image 439 |
440 |
441 |
Jessica
442 |
443 | 444 | 448 |
449 |
450 |

451 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, nisi. 452 |

453 |

454 | Dec, 11 455 |

456 |
457 |
458 |
459 |
460 |
461 |
462 | 463 | 464 | 465 | 466 | 467 | --------------------------------------------------------------------------------