├── README.md ├── image ├── img-1.png ├── img-2.png ├── img-3.png ├── img-4.png └── img-5.png ├── LICENSE ├── js └── Portfolio.js ├── css └── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Project-Management 2 | 项目管理仪表板 UI 3 | -------------------------------------------------------------------------------- /image/img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/Project-Management/master/image/img-1.png -------------------------------------------------------------------------------- /image/img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/Project-Management/master/image/img-2.png -------------------------------------------------------------------------------- /image/img-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/Project-Management/master/image/img-3.png -------------------------------------------------------------------------------- /image/img-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/Project-Management/master/image/img-4.png -------------------------------------------------------------------------------- /image/img-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/Project-Management/master/image/img-5.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Semporia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/Portfolio.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 | }); -------------------------------------------------------------------------------- /css/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 | --main-color: #fff; 30 | --secondary-color: rgba(255,255,255,.8); 31 | --projects-section: #252836; 32 | --link-color: rgba(255,255,255,.8); 33 | --link-color-hover: rgba(195, 207, 244, 0.1); 34 | --link-color-active-bg: rgba(195, 207, 244, 0.2); 35 | --button-bg: #2f3142; 36 | --search-area-bg: #2f3142; 37 | --message-box-hover: #303446; 38 | --message-box-border: rgba(255,255,255,.1); 39 | --star: #ffd92c; 40 | --light-font: rgba(255,255,255,.8); 41 | --more-list-bg: #2f3142; 42 | --more-list-bg-hover: rgba(195, 207, 244, 0.1); 43 | --more-list-shadow: rgba(195, 207, 244, 0.1); 44 | --message-btn: rgba(195, 207, 244, 0.1); 45 | } 46 | 47 | html, body { 48 | width: 100%; 49 | height: 100vh; 50 | margin: 0; 51 | } 52 | 53 | body { 54 | font-family: 'DM Sans', sans-serif; 55 | overflow: hidden; 56 | } 57 | 58 | button, a { 59 | cursor: pointer; 60 | } 61 | 62 | .app-container { 63 | width: 100%; 64 | display: -webkit-box; 65 | display: flex; 66 | -webkit-box-orient: vertical; 67 | -webkit-box-direction: normal; 68 | flex-direction: column; 69 | height: 100%; 70 | background-color: var(--app-container); 71 | -webkit-transition: .2s; 72 | transition: .2s; 73 | } 74 | .app-content { 75 | display: -webkit-box; 76 | display: flex; 77 | height: 100%; 78 | overflow: hidden; 79 | padding: 16px 24px 24px 0; 80 | } 81 | .app-header { 82 | display: -webkit-box; 83 | display: flex; 84 | -webkit-box-pack: justify; 85 | justify-content: space-between; 86 | -webkit-box-align: center; 87 | align-items: center; 88 | width: 100%; 89 | padding: 16px 24px; 90 | position: relative; 91 | } 92 | .app-header-left, .app-header-right { 93 | display: -webkit-box; 94 | display: flex; 95 | -webkit-box-align: center; 96 | align-items: center; 97 | } 98 | .app-header-left { 99 | -webkit-box-flex: 1; 100 | flex-grow: 1; 101 | } 102 | .app-header-right button { 103 | margin-left: 10px; 104 | } 105 | .app-icon { 106 | width: 26px; 107 | height: 2px; 108 | border-radius: 4px; 109 | background-color: var(--main-color); 110 | position: relative; 111 | } 112 | .app-icon:before, .app-icon:after { 113 | content: ''; 114 | position: absolute; 115 | width: 12px; 116 | height: 2px; 117 | border-radius: 4px; 118 | background-color: var(--main-color); 119 | left: 50%; 120 | -webkit-transform: translatex(-50%); 121 | transform: translatex(-50%); 122 | } 123 | .app-icon:before { 124 | top: -6px; 125 | } 126 | .app-icon:after { 127 | bottom: -6px; 128 | } 129 | .app-name { 130 | color: var(--main-color); 131 | margin: 0; 132 | font-size: 20px; 133 | line-height: 24px; 134 | font-weight: 700; 135 | margin: 0 32px; 136 | } 137 | 138 | .mode-switch { 139 | background-color: transparent; 140 | border: none; 141 | padding: 0; 142 | color: var(--main-color); 143 | display: -webkit-box; 144 | display: flex; 145 | -webkit-box-pack: center; 146 | justify-content: center; 147 | -webkit-box-align: center; 148 | align-items: center; 149 | } 150 | 151 | .search-wrapper { 152 | border-radius: 20px; 153 | background-color: var(--search-area-bg); 154 | padding-right: 12px; 155 | height: 40px; 156 | display: -webkit-box; 157 | display: flex; 158 | -webkit-box-pack: justify; 159 | justify-content: space-between; 160 | -webkit-box-align: center; 161 | align-items: center; 162 | width: 100%; 163 | max-width: 480px; 164 | color: var(--light-font); 165 | box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1); 166 | overflow: hidden; 167 | } 168 | .dark .search-wrapper { 169 | box-shadow: none; 170 | } 171 | 172 | .search-input { 173 | border: none; 174 | -webkit-box-flex: 1; 175 | flex: 1; 176 | outline: none; 177 | height: 100%; 178 | padding: 0 20px; 179 | font-size: 16px; 180 | background-color: var(--search-area-bg); 181 | color: var(--main-color); 182 | } 183 | .search-input:placeholder { 184 | color: var(--main-color); 185 | opacity: .6; 186 | } 187 | 188 | .add-btn { 189 | color: #fff; 190 | background-color: var(--button-bg); 191 | padding: 0; 192 | border: 0; 193 | border-radius: 50%; 194 | width: 32px; 195 | height: 32px; 196 | display: -webkit-box; 197 | display: flex; 198 | -webkit-box-align: center; 199 | align-items: center; 200 | -webkit-box-pack: center; 201 | justify-content: center; 202 | } 203 | 204 | .notification-btn { 205 | color: var(--main-color); 206 | padding: 0; 207 | border: 0; 208 | background-color: transparent; 209 | height: 32px; 210 | display: -webkit-box; 211 | display: flex; 212 | -webkit-box-pack: center; 213 | justify-content: center; 214 | -webkit-box-align: center; 215 | align-items: center; 216 | } 217 | 218 | .profile-btn { 219 | padding: 0; 220 | border: 0; 221 | background-color: transparent; 222 | display: -webkit-box; 223 | display: flex; 224 | -webkit-box-align: center; 225 | align-items: center; 226 | padding-left: 12px; 227 | border-left: 2px solid #ddd; 228 | } 229 | .profile-btn img { 230 | width: 32px; 231 | height: 32px; 232 | -o-object-fit: cover; 233 | object-fit: cover; 234 | border-radius: 50%; 235 | margin-right: 4px; 236 | } 237 | .profile-btn span { 238 | color: var(--main-color); 239 | font-size: 16px; 240 | line-height: 24px; 241 | font-weight: 700; 242 | } 243 | 244 | .page-content? { 245 | -webkit-box-flex: 1; 246 | flex: 1; 247 | width: 100%; 248 | } 249 | 250 | .app-sidebar { 251 | padding: 40px 16px; 252 | display: -webkit-box; 253 | display: flex; 254 | -webkit-box-orient: vertical; 255 | -webkit-box-direction: normal; 256 | flex-direction: column; 257 | -webkit-box-align: center; 258 | align-items: center; 259 | } 260 | .app-sidebar-link { 261 | color: var(--main-color); 262 | color: var(--link-color); 263 | margin: 16px 0; 264 | -webkit-transition: .2s; 265 | transition: .2s; 266 | border-radius: 50%; 267 | flex-shrink: 0; 268 | width: 40px; 269 | height: 40px; 270 | display: -webkit-box; 271 | display: flex; 272 | -webkit-box-pack: center; 273 | justify-content: center; 274 | -webkit-box-align: center; 275 | align-items: center; 276 | } 277 | .app-sidebar-link:hover { 278 | background-color: var(--link-color-hover); 279 | color: var(--link-color-active); 280 | } 281 | .app-sidebar-link.active { 282 | background-color: var(--link-color-active-bg); 283 | color: var(--link-color-active); 284 | } 285 | 286 | .projects-section { 287 | -webkit-box-flex: 2; 288 | flex: 2; 289 | background-color: var(--projects-section); 290 | border-radius: 32px; 291 | padding: 32px 32px 0 32px; 292 | overflow: hidden; 293 | height: 100%; 294 | display: -webkit-box; 295 | display: flex; 296 | -webkit-box-orient: vertical; 297 | -webkit-box-direction: normal; 298 | flex-direction: column; 299 | } 300 | .projects-section-line { 301 | display: -webkit-box; 302 | display: flex; 303 | -webkit-box-pack: justify; 304 | justify-content: space-between; 305 | -webkit-box-align: center; 306 | align-items: center; 307 | padding-bottom: 32px; 308 | } 309 | .projects-section-header { 310 | display: -webkit-box; 311 | display: flex; 312 | -webkit-box-pack: justify; 313 | justify-content: space-between; 314 | -webkit-box-align: center; 315 | align-items: center; 316 | margin-bottom: 24px; 317 | color: var(--main-color); 318 | } 319 | .projects-section-header p { 320 | font-size: 24px; 321 | line-height: 32px; 322 | font-weight: 700; 323 | opacity: .9; 324 | margin: 0; 325 | color: var(--main-color); 326 | } 327 | .projects-section-header .time { 328 | font-size: 20px; 329 | } 330 | 331 | .projects-status { 332 | display: -webkit-box; 333 | display: flex; 334 | } 335 | 336 | .item-status { 337 | display: -webkit-box; 338 | display: flex; 339 | -webkit-box-orient: vertical; 340 | -webkit-box-direction: normal; 341 | flex-direction: column; 342 | margin-right: 16px; 343 | } 344 | .item-status:not(:last-child) .status-type:after { 345 | content: ''; 346 | position: absolute; 347 | right: 8px; 348 | top: 50%; 349 | -webkit-transform: translatey(-50%); 350 | transform: translatey(-50%); 351 | width: 6px; 352 | height: 6px; 353 | border-radius: 50%; 354 | border: 1px solid var(--secondary-color); 355 | } 356 | 357 | .status-number { 358 | font-size: 24px; 359 | line-height: 32px; 360 | font-weight: 700; 361 | color: var(--main-color); 362 | } 363 | 364 | .status-type { 365 | position: relative; 366 | padding-right: 24px; 367 | color: var(--secondary-color); 368 | } 369 | 370 | .view-actions { 371 | display: -webkit-box; 372 | display: flex; 373 | -webkit-box-align: center; 374 | align-items: center; 375 | } 376 | 377 | .view-btn { 378 | width: 36px; 379 | height: 36px; 380 | display: -webkit-box; 381 | display: flex; 382 | -webkit-box-pack: center; 383 | justify-content: center; 384 | -webkit-box-align: center; 385 | align-items: center; 386 | padding: 6px; 387 | border-radius: 4px; 388 | background-color: transparent; 389 | border: none; 390 | color: var(--main-color); 391 | margin-left: 8px; 392 | -webkit-transition: .2s; 393 | transition: .2s; 394 | } 395 | .view-btn.active { 396 | background-color: var(--link-color-active-bg); 397 | color: var(--link-color-active); 398 | } 399 | .view-btn:not(.active):hover { 400 | background-color: var(--link-color-hover); 401 | color: var(--link-color-active); 402 | } 403 | 404 | .messages-section { 405 | flex-shrink: 0; 406 | padding-bottom: 32px; 407 | background-color: var(--projects-section); 408 | margin-left: 24px; 409 | -webkit-box-flex: 1; 410 | flex: 1; 411 | width: 100%; 412 | border-radius: 30px; 413 | position: relative; 414 | overflow: auto; 415 | -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1); 416 | transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1); 417 | } 418 | .messages-section .messages-close { 419 | position: absolute; 420 | top: 12px; 421 | right: 12px; 422 | z-index: 3; 423 | border: none; 424 | background-color: transparent; 425 | color: var(--main-color); 426 | display: none; 427 | } 428 | .messages-section.show { 429 | -webkit-transform: translateX(0); 430 | transform: translateX(0); 431 | opacity: 1; 432 | margin-left: 0; 433 | } 434 | .messages-section .projects-section-header { 435 | position: -webkit-sticky; 436 | position: sticky; 437 | top: 0; 438 | z-index: 1; 439 | padding: 32px 24px 0 24px; 440 | background-color: var(--projects-section); 441 | } 442 | 443 | .message-box { 444 | border-top: 1px solid var(--message-box-border); 445 | padding: 16px; 446 | display: -webkit-box; 447 | display: flex; 448 | -webkit-box-align: start; 449 | align-items: flex-start; 450 | width: 100%; 451 | } 452 | .message-box:hover { 453 | background-color: var(--message-box-hover); 454 | border-top-color: var(--link-color-hover); 455 | } 456 | .message-box:hover + .message-box { 457 | border-top-color: var(--link-color-hover); 458 | } 459 | .message-box img { 460 | border-radius: 50%; 461 | -o-object-fit: cover; 462 | object-fit: cover; 463 | width: 40px; 464 | height: 40px; 465 | } 466 | 467 | .message-header { 468 | display: -webkit-box; 469 | display: flex; 470 | -webkit-box-align: center; 471 | align-items: center; 472 | -webkit-box-pack: justify; 473 | justify-content: space-between; 474 | width: 100%; 475 | } 476 | .message-header .name { 477 | font-size: 16px; 478 | line-height: 24px; 479 | font-weight: 700; 480 | color: var(--main-color); 481 | margin: 0; 482 | } 483 | 484 | .message-content { 485 | padding-left: 16px; 486 | width: 100%; 487 | } 488 | 489 | .star-checkbox input { 490 | opacity: 0; 491 | position: absolute; 492 | width: 0; 493 | height: 0; 494 | } 495 | .star-checkbox label { 496 | width: 24px; 497 | height: 24px; 498 | display: -webkit-box; 499 | display: flex; 500 | -webkit-box-pack: center; 501 | justify-content: center; 502 | -webkit-box-align: center; 503 | align-items: center; 504 | cursor: pointer; 505 | } 506 | .dark .star-checkbox { 507 | color: var(--secondary-color); 508 | } 509 | .dark .star-checkbox input:checked + label { 510 | color: var(--star); 511 | } 512 | .star-checkbox input:checked + label svg { 513 | fill: var(--star); 514 | -webkit-transition: .2s; 515 | transition: .2s; 516 | } 517 | 518 | .message-line { 519 | font-size: 14px; 520 | line-height: 20px; 521 | margin: 8px 0; 522 | color: var(--secondary-color); 523 | opacity: .7; 524 | } 525 | .message-line.time { 526 | text-align: right; 527 | margin-bottom: 0; 528 | } 529 | 530 | .project-boxes { 531 | margin: 0 -8px; 532 | overflow-y: auto; 533 | } 534 | .project-boxes.jsGridView { 535 | display: -webkit-box; 536 | display: flex; 537 | flex-wrap: wrap; 538 | } 539 | .project-boxes.jsGridView .project-box-wrapper { 540 | width: 33.3%; 541 | } 542 | .project-boxes.jsListView .project-box { 543 | display: -webkit-box; 544 | display: flex; 545 | border-radius: 10px; 546 | position: relative; 547 | } 548 | .project-boxes.jsListView .project-box > * { 549 | margin-right: 24px; 550 | } 551 | .project-boxes.jsListView .more-wrapper { 552 | position: absolute; 553 | right: 16px; 554 | top: 16px; 555 | } 556 | .project-boxes.jsListView .project-box-content-header { 557 | -webkit-box-ordinal-group: 2; 558 | order: 1; 559 | max-width: 120px; 560 | } 561 | .project-boxes.jsListView .project-box-header { 562 | -webkit-box-ordinal-group: 3; 563 | order: 2; 564 | } 565 | .project-boxes.jsListView .project-box-footer { 566 | -webkit-box-ordinal-group: 4; 567 | order: 3; 568 | padding-top: 0; 569 | -webkit-box-orient: vertical; 570 | -webkit-box-direction: normal; 571 | flex-direction: column; 572 | -webkit-box-pack: start; 573 | justify-content: flex-start; 574 | } 575 | .project-boxes.jsListView .project-box-footer:after { 576 | display: none; 577 | } 578 | .project-boxes.jsListView .participants { 579 | margin-bottom: 8px; 580 | } 581 | .project-boxes.jsListView .project-box-content-header p { 582 | text-align: left; 583 | overflow: hidden; 584 | white-space: nowrap; 585 | text-overflow: ellipsis; 586 | } 587 | .project-boxes.jsListView .project-box-header > span { 588 | position: absolute; 589 | bottom: 16px; 590 | left: 16px; 591 | font-size: 12px; 592 | } 593 | .project-boxes.jsListView .box-progress-wrapper { 594 | -webkit-box-ordinal-group: 4; 595 | order: 3; 596 | -webkit-box-flex: 1; 597 | flex: 1; 598 | } 599 | 600 | .project-box { 601 | --main-color-card: #dbf6fd; 602 | border-radius: 30px; 603 | padding: 16px; 604 | background-color: var(--main-color-card); 605 | } 606 | .project-box-header { 607 | display: -webkit-box; 608 | display: flex; 609 | -webkit-box-align: center; 610 | align-items: center; 611 | -webkit-box-pack: justify; 612 | justify-content: space-between; 613 | margin-bottom: 16px; 614 | color: var(--main-color); 615 | } 616 | .project-box-header span { 617 | color: #4A4A4A; 618 | opacity: .7; 619 | font-size: 14px; 620 | line-height: 16px; 621 | } 622 | .project-box-content-header { 623 | text-align: center; 624 | margin-bottom: 16px; 625 | } 626 | .project-box-content-header p { 627 | margin: 0; 628 | } 629 | .project-box-wrapper { 630 | padding: 8px; 631 | -webkit-transition: .2s; 632 | transition: .2s; 633 | } 634 | 635 | .project-btn-more { 636 | padding: 0; 637 | height: 14px; 638 | width: 24px; 639 | height: 24px; 640 | position: relative; 641 | background-color: transparent; 642 | border: none; 643 | flex-shrink: 0; 644 | /*&:after, &:before { 645 | content: ''; 646 | position: absolute; 647 | width: 6px; 648 | height: 6px; 649 | border-radius: 50%; 650 | background-color: var(--main-color); 651 | opacity: .8; 652 | left: 50%; 653 | transform: translatex(-50%); 654 | } 655 | 656 | &:before { top: 0;} 657 | &:after { bottom: 0; }*/ 658 | } 659 | 660 | .more-wrapper { 661 | position: relative; 662 | } 663 | 664 | .box-content-header { 665 | font-size: 16px; 666 | line-height: 24px; 667 | font-weight: 700; 668 | opacity: .7; 669 | } 670 | 671 | .box-content-subheader { 672 | font-size: 14px; 673 | line-height: 24px; 674 | opacity: .7; 675 | } 676 | 677 | .box-progress { 678 | display: block; 679 | height: 4px; 680 | border-radius: 6px; 681 | } 682 | .box-progress-bar { 683 | width: 100%; 684 | height: 4px; 685 | border-radius: 6px; 686 | overflow: hidden; 687 | background-color: #fff; 688 | margin: 8px 0; 689 | } 690 | .box-progress-header { 691 | font-size: 14px; 692 | font-weight: 700; 693 | line-height: 16px; 694 | margin: 0; 695 | } 696 | .box-progress-percentage { 697 | text-align: right; 698 | margin: 0; 699 | font-size: 14px; 700 | font-weight: 700; 701 | line-height: 16px; 702 | } 703 | 704 | .project-box-footer { 705 | display: -webkit-box; 706 | display: flex; 707 | -webkit-box-pack: justify; 708 | justify-content: space-between; 709 | padding-top: 16px; 710 | position: relative; 711 | } 712 | .project-box-footer:after { 713 | content: ''; 714 | position: absolute; 715 | background-color: rgba(255, 255, 255, 0.6); 716 | width: calc(100% + 32px); 717 | top: 0; 718 | left: -16px; 719 | height: 1px; 720 | } 721 | 722 | .participants { 723 | display: -webkit-box; 724 | display: flex; 725 | -webkit-box-align: center; 726 | align-items: center; 727 | } 728 | .participants img { 729 | width: 20px; 730 | height: 20px; 731 | border-radius: 50%; 732 | overflow: hidden; 733 | -o-object-fit: cover; 734 | object-fit: cover; 735 | } 736 | .participants img:not(:first-child) { 737 | margin-left: -8px; 738 | } 739 | 740 | .add-participant { 741 | width: 20px; 742 | height: 20px; 743 | border-radius: 50%; 744 | border: none; 745 | background-color: rgba(255, 255, 255, 0.6); 746 | margin-left: 6px; 747 | display: -webkit-box; 748 | display: flex; 749 | -webkit-box-pack: center; 750 | justify-content: center; 751 | -webkit-box-align: center; 752 | align-items: center; 753 | padding: 0; 754 | } 755 | 756 | .days-left { 757 | background-color: rgba(255, 255, 255, 0.6); 758 | font-size: 12px; 759 | border-radius: 20px; 760 | flex-shrink: 0; 761 | padding: 6px 16px; 762 | font-weight: 700; 763 | } 764 | 765 | .mode-switch.active .moon { 766 | fill: var(--main-color); 767 | } 768 | 769 | .messages-btn { 770 | border-radius: 4px 0 0 4px; 771 | position: absolute; 772 | right: 0; 773 | top: 58px; 774 | background-color: var(--message-btn); 775 | border: none; 776 | color: var(--main-color); 777 | display: -webkit-box; 778 | display: flex; 779 | -webkit-box-pack: center; 780 | justify-content: center; 781 | -webkit-box-align: center; 782 | align-items: center; 783 | padding: 4px; 784 | display: none; 785 | } 786 | 787 | @media screen and (max-width: 980px) { 788 | .project-boxes.jsGridView .project-box-wrapper { 789 | width: 50%; 790 | } 791 | 792 | .status-number, .status-type { 793 | font-size: 14px; 794 | } 795 | 796 | .status-type:after { 797 | width: 4px; 798 | height: 4px; 799 | } 800 | 801 | .item-status { 802 | margin-right: 0; 803 | } 804 | } 805 | @media screen and (max-width: 880px) { 806 | .messages-section { 807 | -webkit-transform: translateX(100%); 808 | transform: translateX(100%); 809 | position: absolute; 810 | opacity: 0; 811 | top: 0; 812 | z-index: 2; 813 | height: 100%; 814 | width: 100%; 815 | } 816 | .messages-section .messages-close { 817 | display: block; 818 | } 819 | 820 | .messages-btn { 821 | display: -webkit-box; 822 | display: flex; 823 | } 824 | } 825 | @media screen and (max-width: 720px) { 826 | .app-name, .profile-btn span { 827 | display: none; 828 | } 829 | 830 | .add-btn, .notification-btn, .mode-switch { 831 | width: 20px; 832 | height: 20px; 833 | } 834 | .add-btn svg, .notification-btn svg, .mode-switch svg { 835 | width: 16px; 836 | height: 16px; 837 | } 838 | 839 | .app-header-right button { 840 | margin-left: 4px; 841 | } 842 | } 843 | @media screen and (max-width: 520px) { 844 | .projects-section { 845 | overflow: auto; 846 | } 847 | 848 | .project-boxes { 849 | overflow-y: visible; 850 | } 851 | 852 | .app-sidebar, .app-icon { 853 | display: none; 854 | } 855 | 856 | .app-content { 857 | padding: 16px 12px 24px 12px; 858 | } 859 | 860 | .status-number, .status-type { 861 | font-size: 10px; 862 | } 863 | 864 | .view-btn { 865 | width: 24px; 866 | height: 24px; 867 | } 868 | 869 | .app-header { 870 | padding: 16px 10px; 871 | } 872 | 873 | .search-input { 874 | max-width: 120px; 875 | } 876 | 877 | .project-boxes.jsGridView .project-box-wrapper { 878 | width: 100%; 879 | } 880 | 881 | .projects-section { 882 | padding: 24px 16px 0 16px; 883 | } 884 | 885 | .profile-btn img { 886 | width: 24px; 887 | height: 24px; 888 | } 889 | 890 | .app-header { 891 | padding: 10px; 892 | } 893 | 894 | .projects-section-header p, 895 | .projects-section-header .time { 896 | font-size: 18px; 897 | } 898 | 899 | .status-type { 900 | padding-right: 4px; 901 | } 902 | .status-type:after { 903 | display: none; 904 | } 905 | 906 | .search-input { 907 | font-size: 14px; 908 | } 909 | 910 | .messages-btn { 911 | top: 48px; 912 | } 913 | 914 | .box-content-header { 915 | font-size: 12px; 916 | line-height: 16px; 917 | } 918 | 919 | .box-content-subheader { 920 | font-size: 10px; 921 | line-height: 16px; 922 | } 923 | 924 | .project-boxes.jsListView .project-box-header > span { 925 | font-size: 10px; 926 | } 927 | 928 | .box-progress-header { 929 | font-size: 12px; 930 | } 931 | 932 | .box-progress-percentage { 933 | font-size: 10px; 934 | } 935 | 936 | .days-left { 937 | font-size: 8px; 938 | padding: 6px 6px; 939 | text-align: center; 940 | } 941 | 942 | .project-boxes.jsListView .project-box > * { 943 | margin-right: 10px; 944 | } 945 | 946 | .project-boxes.jsListView .more-wrapper { 947 | right: 2px; 948 | top: 10px; 949 | } 950 | } 951 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Portfolio 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 | 21 |

Portfolio

22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
31 |
32 | 38 | 43 | 48 | 52 |
53 | 57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 |
86 |
87 |
88 |

Projects

89 |

December, 12

90 |
91 |
92 |
93 |
94 | 45 95 | In Progress 96 |
97 |
98 | 24 99 | Upcoming 100 |
101 |
102 | 62 103 | Total Projects 104 |
105 |
106 |
107 | 116 | 123 |
124 |
125 |
126 |
127 |
128 |
129 | December 10, 2020 130 |
131 | 137 |
138 |
139 |
140 |

Web Designing

141 |

Prototyping

142 |
143 |
144 |

Progress

145 |
146 | 147 |
148 |

60%

149 |
150 |
151 |
152 | participant 153 | participant 154 | 159 |
160 |
161 | 2 Days Left 162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 | December 10, 2020 170 |
171 | 177 |
178 |
179 |
180 |

Testing

181 |

Prototyping

182 |
183 |
184 |

Progress

185 |
186 | 187 |
188 |

50%

189 |
190 |
191 |
192 | participant 193 | participant 194 | 199 |
200 |
201 | 2 Days Left 202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 | December 10, 2020 210 |
211 | 217 |
218 |
219 |
220 |

Svg Animations

221 |

Prototyping

222 |
223 |
224 |

Progress

225 |
226 | 227 |
228 |

80%

229 |
230 |
231 |
232 | participant 233 | participant 234 | 239 |
240 |
241 | 2 Days Left 242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 | December 10, 2020 250 |
251 | 257 |
258 |
259 |
260 |

UI Development

261 |

Prototyping

262 |
263 |
264 |

Progress

265 |
266 | 267 |
268 |

20%

269 |
270 |
271 |
272 | participant 273 | participant 274 | 279 |
280 |
281 | 2 Days Left 282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 | December 10, 2020 290 |
291 | 297 |
298 |
299 |
300 |

Data Analysis

301 |

Prototyping

302 |
303 |
304 |

Progress

305 |
306 | 307 |
308 |

60%

309 |
310 |
311 |
312 | participant 313 | participant 314 | 319 |
320 |
321 | 2 Days Left 322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 | December 10, 2020 330 |
331 | 337 |
338 |
339 |
340 |

Web Designing

341 |

Prototyping

342 |
343 |
344 |

Progress

345 |
346 | 347 |
348 |

40%

349 |
350 |
351 |
352 | participant 353 | participant 354 | 359 |
360 |
361 | 2 Days Left 362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 | 375 |
376 |

Client Messages

377 |
378 |
379 |
380 | participant 381 |
382 |
383 |
Stephanie
384 |
385 | 386 | 390 |
391 |
392 |

393 | I got your first assignment. It was quite good. ?? We can continue with the next assignment. 394 |

395 |

396 | Dec, 12 397 |

398 |
399 |
400 |
401 | participant 402 |
403 |
404 |
Mark
405 |
406 | 407 | 411 |
412 |
413 |

414 | Hey, can tell me about progress of project? I'm waiting for your response. 415 |

416 |

417 | Dec, 12 418 |

419 |
420 |
421 |
422 | participant 423 |
424 |
425 |
David
426 |
427 | 428 | 432 |
433 |
434 |

435 | Awesome! ?? I like it. We can schedule a meeting for the next one. 436 |

437 |

438 | Dec, 12 439 |

440 |
441 |
442 |
443 | participant 444 |
445 |
446 |
Jessica
447 |
448 | 449 | 453 |
454 |
455 |

456 | I am really impressed! Can't wait to see the final result. 457 |

458 |

459 | Dec, 11 460 |

461 |
462 |
463 |
464 |
465 |
466 |
467 | 468 | 469 | --------------------------------------------------------------------------------