Post by satyamchaudharydev

Made by

@satyamchaudharydev

Play

32hrs

Last Week-36hrs

Theme:

Light

#card

#e8e8e8

6.4K views

CSSAdd prefixes

1.card {
2 --primary-clr: #1C204B;
3 --dot-clr: #BBC0FF;
4 --play: hsl(195, 74%, 62%);
5 width: 200px;
6 height: 170px;
7 border-radius: 10px;
8}
9
10.card {
11 font-family: "Arial";
12 color: #fff;
13 display: grid;
14 cursor: pointer;
15 grid-template-rows: 50px 1fr;
16}
17
18.card:hover .img-section {
19 transform: translateY(1em);
20}
21
22.card-desc {
23 border-radius: 10px;
24 padding: 15px;
25 position: relative;
26 top: -10px;
27 display: grid;
28 gap: 10px;
29 background: var(--primary-clr);
30}
31
32.card-time {
33 font-size: 1.7em;
34 font-weight: 500;
35}
36
37.img-section {
38 transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
39 border-top-left-radius: 10px;
40 border-top-right-radius: 10px;
41 background: hsl(195, 74%, 62%);
42}
43
44.card-header {
45 display: flex;
46 align-items: center;
47 width: 100%;
48}
49
50.card-title {
51 flex: 1;
52 font-size: 0.9em;
53 font-weight: 500;
54}
55
56.card-menu {
57 display: flex;
58 gap: 4px;
59 margin-inline: auto;
60}
61
62.card svg {
63 float: right;
64 max-width: 100%;
65 max-height: 100%;
66}
67
68.card .dot {
69 width: 5px;
70 height: 5px;
71 border-radius: 50%;
72 background: var(--dot-clr);
73}
74
75.card .recent {
76 line-height: 0;
77 font-size: 0.8em;
78}

.card {
 --primary-clr: #1C204B;
 --dot-clr: #BBC0FF;
 --play: hsl(195, 74%, 62%);
 width: 200px;
 height: 170px;
 border-radius: 10px;
}

.card {
 font-family: "Arial";
 color: #fff;
 display: grid;
 cursor: pointer;
 grid-template-rows: 50px 1fr;
}

.card:hover .img-section {
 transform: translateY(1em);
}

.card-desc {
 border-radius: 10px;
 padding: 15px;
 position: relative;
 top: -10px;
 display: grid;
 gap: 10px;
 background: var(--primary-clr);
}

.card-time {
 font-size: 1.7em;
 font-weight: 500;
}

.img-section {
 transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 background: hsl(195, 74%, 62%);
}

.card-header {
 display: flex;
 align-items: center;
 width: 100%;
}

.card-title {
 flex: 1;
 font-size: 0.9em;
 font-weight: 500;
}

.card-menu {
 display: flex;
 gap: 4px;
 margin-inline: auto;
}

.card svg {
 float: right;
 max-width: 100%;
 max-height: 100%;
}

.card .dot {
 width: 5px;
 height: 5px;
 border-radius: 50%;
 background: var(--dot-clr);
}

.card .recent {
 line-height: 0;
 font-size: 0.8em;
}

HTML

1  <div class="card work">
2  <div class="img-section">
3  <svg xmlns="http://www.w3.org/2000/svg" height="77" width="76"><path fill-rule="nonzero" fill="#3F9CBB" d="m60.91 71.846 12.314-19.892c3.317-5.36 3.78-13.818-2.31-19.908l-26.36-26.36c-4.457-4.457-12.586-6.843-19.908-2.31L4.753 15.69c-5.4 3.343-6.275 10.854-1.779 15.35a7.773 7.773 0 0 0 7.346 2.035l7.783-1.945a3.947 3.947 0 0 1 3.731 1.033l22.602 22.602c.97.97 1.367 2.4 1.033 3.732l-1.945 7.782a7.775 7.775 0 0 0 2.037 7.349c4.49 4.49 12.003 3.624 15.349-1.782Zm-24.227-46.12-1.891-1.892-1.892 1.892a2.342 2.342 0 0 1-3.312-3.312l1.892-1.892-1.892-1.891a2.342 2.342 0 0 1 3.312-3.312l1.892 1.891 1.891-1.891a2.342 2.342 0 0 1 3.312 3.312l-1.891 1.891 1.891 1.892a2.342 2.342 0 0 1-3.312 3.312Zm14.19 14.19a2.343 2.343 0 1 1 3.315-3.312 2.343 2.343 0 0 1-3.314 3.312Zm0 7.096a2.343 2.343 0 0 1 3.313-3.312 2.343 2.343 0 0 1-3.312 3.312Zm7.096-7.095a2.343 2.343 0 1 1 3.312 0 2.343 2.343 0 0 1-3.312 0Zm0 7.095a2.343 2.343 0 0 1 3.312-3.312 2.343 2.343 0 0 1-3.312 3.312Z"></path></svg>                </div>
4  <div class="card-desc">
5  <div class="card-header">
6  <div class="card-title">Play</div>
7  <div class="card-menu">
8  <div class="dot"></div>
9  <div class="dot"></div>
10    <div class="dot"></div>
11    </div>
12  </div>
13  <div class="card-time">32hrs</div>
14  <p class="recent">Last Week-36hrs</p>
15</div></div>

  <div class="card work">
  <div class="img-section">
  <svg xmlns="http://www.w3.org/2000/svg" height="77" width="76"><path fill-rule="nonzero" fill="#3F9CBB" d="m60.91 71.846 12.314-19.892c3.317-5.36 3.78-13.818-2.31-19.908l-26.36-26.36c-4.457-4.457-12.586-6.843-19.908-2.31L4.753 15.69c-5.4 3.343-6.275 10.854-1.779 15.35a7.773 7.773 0 0 0 7.346 2.035l7.783-1.945a3.947 3.947 0 0 1 3.731 1.033l22.602 22.602c.97.97 1.367 2.4 1.033 3.732l-1.945 7.782a7.775 7.775 0 0 0 2.037 7.349c4.49 4.49 12.003 3.624 15.349-1.782Zm-24.227-46.12-1.891-1.892-1.892 1.892a2.342 2.342 0 0 1-3.312-3.312l1.892-1.892-1.892-1.891a2.342 2.342 0 0 1 3.312-3.312l1.892 1.891 1.891-1.891a2.342 2.342 0 0 1 3.312 3.312l-1.891 1.891 1.891 1.892a2.342 2.342 0 0 1-3.312 3.312Zm14.19 14.19a2.343 2.343 0 1 1 3.315-3.312 2.343 2.343 0 0 1-3.314 3.312Zm0 7.096a2.343 2.343 0 0 1 3.313-3.312 2.343 2.343 0 0 1-3.312 3.312Zm7.096-7.095a2.343 2.343 0 1 1 3.312 0 2.343 2.343 0 0 1-3.312 0Zm0 7.095a2.343 2.343 0 0 1 3.312-3.312 2.343 2.343 0 0 1-3.312 3.312Z"></path></svg>                </div>
  <div class="card-desc">
  <div class="card-header">
  <div class="card-title">Play</div>
  <div class="card-menu">
  <div class="dot"></div>
  <div class="dot"></div>
    <div class="dot"></div>
    </div>
  </div>
  <div class="card-time">32hrs</div>
  <p class="recent">Last Week-36hrs</p>
</div></div>