├── index.html
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
29 |
30 |
31 |
50 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | .skeleton {
2 | opacity: .7;
3 | animation: skeleton-loading 1s linear infinite alternate;
4 | }
5 |
6 | .skeleton-text {
7 | width: 100%;
8 | height: .5rem;
9 | margin-bottom: .25rem;
10 | border-radius: .125rem;
11 | }
12 |
13 | .skeleton-text:last-child {
14 | margin-bottom: 0;
15 | width: 80%;
16 | }
17 |
18 | @keyframes skeleton-loading {
19 | 0% {
20 | background-color: hsl(200, 20%, 70%);
21 | }
22 |
23 | 100% {
24 | background-color: hsl(200, 20%, 95%);
25 | }
26 | }
27 |
28 |
29 |
30 |
31 |
32 | .grid {
33 | display: grid;
34 | gap: 1rem;
35 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
36 | padding: 1rem;
37 | }
38 |
39 | .card {
40 | background-color: white;
41 | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
42 | padding: 16px;
43 | border-radius: 4px;
44 | }
45 |
46 | .header {
47 | margin-bottom: 1rem;
48 | display: flex;
49 | align-items: center;
50 | }
51 |
52 | .header-img {
53 | width: 50px;
54 | height: 50px;
55 | object-fit: cover;
56 | border-radius: 100%;
57 | margin-right: 1rem;
58 | flex-shrink: 0;
59 | }
60 |
61 | .title {
62 | font-weight: bold;
63 | font-size: 1.25rem;
64 | text-transform: capitalize;
65 | word-wrap: none;
66 | white-space: nowrap;
67 | text-overflow: ellipsis;
68 | overflow: hidden;
69 | flex-grow: 1;
70 | }
--------------------------------------------------------------------------------
17 |