3e. Task component-ის გამოყენება
5:27ვიდეო გაკვეთილი
HTML:
`
Title
OL
In Progress
CSS:
1.task {
2 width: 500px;
3 height: 70px;
4 background-color: #C8E6C9;
5 cursor: pointer;
6 border-radius: 10px;
7 display: flex;
8 flex-direction: row;
9 align-items: center;
10 justify-content: space-between;
11}
12
13
14.title {
15 font-size: 20px;
16 font-weight: 600;
17 margin-left: 10px;
18}
19
20
21.assignee {
22 width: 40px;
23 height: 40px;
24 background-color: #FFD600;
25 border-radius: 50%;
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 font-weight: 800;
30}
31
32
33.status {
34 width: 100px;
35 height: 30px;
36 background-color: #0052CC;
37 color: #fff;
38 align-items: center;
39 display: flex;
40 justify-content: center;
41 border-radius: 5px;
42 margin-right: 10px;
43}
44
45main {
46 display: flex;
47 justify-content: center;
48 margin-top: 20px;
49}