Card by Yaya12085

Made by

@Yaya12085

Theme:

Dark

#card

#212121

289 views

CSSAdd prefixes

1.post-card {
2  width: 320px;
3  background: lightgrey;
4  background-color: rgb(24 27 32);
5  border: 1px solid rgb(84 90 106);
6  border-radius: 20px;
7  display: flex;
8  flex-direction: column;
9  padding: 10px 20px;
10}
11
12.avatar {
13  height: 35px;
14  width: 35px;
15  border-radius: 50%;
16  background-color: blueviolet;
17  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
18}
19
20.title {
21  font-size: 20px;
22  line-height: 22px;
23  font-weight: 600;
24  margin-top: 10px;
25  color: #fff;
26  text-decoration: none;
27  transition: all .35s ease-in;
28}
29
30.title:hover {
31  text-decoration: underline blueviolet;
32}
33
34.datetime {
35  font-size: 12px;
36  color: rgb(168 179 207);
37  margin: 10px 0;
38}
39
40.image-preview {
41  flex: 1;
42  min-height: 150px;
43  width: 100%;
44  border-radius: 20px;
45  background-color: blueviolet;
46  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
47  margin-bottom: 4px;
48}
49
50.comment-like {
51  display: flex;
52  justify-content: space-around;
53  align-items: center;
54  padding: 2px 0;
55}
56
57.comment-like span {
58  cursor: pointer;
59  height: 40px;
60  width: 50px;
61  padding: 0 3px;
62  display: flex;
63  align-items: center;
64  justify-content: center;
65  font-weight: 900;
66  border-radius: 10px;
67  background-color: transparent;
68  transition: all .15s ease;
69}
70
71.comment-like span:hover {
72  background-color: rgba(137, 43, 226, 0.096);
73}
74
75.comment-like span svg {
76  fill: rgb(255, 255, 255);
77  margin-right: 2px;
78}

.post-card {
  width: 320px;
  background: lightgrey;
  background-color: rgb(24 27 32);
  border: 1px solid rgb(84 90 106);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}

.avatar {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: blueviolet;
  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
}

.title {
  font-size: 20px;
  line-height: 22px;
  font-weight: 600;
  margin-top: 10px;
  color: #fff;
  text-decoration: none;
  transition: all .35s ease-in;
}

.title:hover {
  text-decoration: underline blueviolet;
}

.datetime {
  font-size: 12px;
  color: rgb(168 179 207);
  margin: 10px 0;
}

.image-preview {
  flex: 1;
  min-height: 150px;
  width: 100%;
  border-radius: 20px;
  background-color: blueviolet;
  background-image: linear-gradient(to top left, blueviolet,rgb(73, 31, 112));
  margin-bottom: 4px;
}

.comment-like {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2px 0;
}

.comment-like span {
  cursor: pointer;
  height: 40px;
  width: 50px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border-radius: 10px;
  background-color: transparent;
  transition: all .15s ease;
}

.comment-like span:hover {
  background-color: rgba(137, 43, 226, 0.096);
}

.comment-like span svg {
  fill: rgb(255, 255, 255);
  margin-right: 2px;
}

HTML

1<div class="post-card">
2  <div class="avatar"></div>
3  <a class="title" href="#">7 Tools for Faster Development in React</a>
4  <span class="datetime">3 min to read</span>
5  <div class="image-preview"></div>
6  <div class="comment-like">
7    <span><svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path class="bentblocks_een" d="M21.081,6C23.752,6.031,26,8.766,26,12c0,5.106-6.47,10.969-10.001,13.593 C12.466,22.974,6,17.12,6,12c0-3.234,2.248-5.969,4.918-6C13.586,6.175,13.926,6.801,16,8.879C18.069,6.806,18.418,6.173,21.081,6 M20.911,4.006L20.912,4C18.993,4,17.259,4.785,16,6.048C14.741,4.785,13.007,4,11.088,4l0.001,0.006C7.044,3.936,4,7.719,4,12 c0,8,11.938,16,11.938,16h0.124C16.062,28,28,20,28,12C28,7.713,24.951,3.936,20.911,4.006z"></path> </g></svg>10</span>
8    <span><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.49999 20.25C4.37892 20.2521 4.25915 20.2248 4.1509 20.1705C4.04266 20.1163 3.94916 20.0366 3.87841 19.9383C3.80766 19.8401 3.76175 19.7261 3.74461 19.6063C3.72747 19.4864 3.73961 19.3641 3.77999 19.25L5.37999 14C5.03175 13.0973 4.85539 12.1375 4.85999 11.17C4.8584 10.1057 5.06918 9.0518 5.47999 8.06999C5.88297 7.13047 6.45975 6.27549 7.17999 5.54999C7.90382 4.82306 8.76344 4.24545 9.70999 3.84999C10.6889 3.4344 11.7415 3.22021 12.805 3.22021C13.8685 3.22021 14.9211 3.4344 15.9 3.84999C17.3341 4.46429 18.5573 5.48452 19.4191 6.7851C20.2808 8.08568 20.7434 9.60985 20.75 11.17C20.7437 13.2771 19.9065 15.2966 18.42 16.79C17.6945 17.5102 16.8395 18.087 15.9 18.49C14.0091 19.2819 11.8865 19.3177 9.96999 18.59L4.71999 20.19C4.64977 20.22 4.57574 20.2402 4.49999 20.25ZM12.8 4.74999C11.5334 4.75547 10.2962 5.13143 9.24068 5.83153C8.18519 6.53164 7.35763 7.52528 6.85999 8.68999C6.19883 10.2911 6.19883 12.0889 6.85999 13.69C6.91957 13.8548 6.91957 14.0352 6.85999 14.2L5.62999 18.37L9.77999 17.11C9.94477 17.0504 10.1252 17.0504 10.29 17.11C11.0824 17.439 11.932 17.6083 12.79 17.6083C13.648 17.6083 14.4976 17.439 15.29 17.11C16.0708 16.7813 16.779 16.3018 17.3742 15.6989C17.9693 15.096 18.4397 14.3816 18.7583 13.5967C19.077 12.8118 19.2376 11.9717 19.231 11.1245C19.2244 10.2774 19.0508 9.4399 18.72 8.65999C18.2234 7.50094 17.398 6.51285 16.3459 5.81792C15.2937 5.123 14.0609 4.75171 12.8 4.74999Z" fill=""></path> </g></svg>4</span>
9  </div>
10
11
12</div>

<div class="post-card">
  <div class="avatar"></div>
  <a class="title" href="#">7 Tools for Faster Development in React</a>
  <span class="datetime">3 min to read</span>
  <div class="image-preview"></div>
  <div class="comment-like">
    <span><svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" fill=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path class="bentblocks_een" d="M21.081,6C23.752,6.031,26,8.766,26,12c0,5.106-6.47,10.969-10.001,13.593 C12.466,22.974,6,17.12,6,12c0-3.234,2.248-5.969,4.918-6C13.586,6.175,13.926,6.801,16,8.879C18.069,6.806,18.418,6.173,21.081,6 M20.911,4.006L20.912,4C18.993,4,17.259,4.785,16,6.048C14.741,4.785,13.007,4,11.088,4l0.001,0.006C7.044,3.936,4,7.719,4,12 c0,8,11.938,16,11.938,16h0.124C16.062,28,28,20,28,12C28,7.713,24.951,3.936,20.911,4.006z"></path> </g></svg>10</span>
    <span><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.49999 20.25C4.37892 20.2521 4.25915 20.2248 4.1509 20.1705C4.04266 20.1163 3.94916 20.0366 3.87841 19.9383C3.80766 19.8401 3.76175 19.7261 3.74461 19.6063C3.72747 19.4864 3.73961 19.3641 3.77999 19.25L5.37999 14C5.03175 13.0973 4.85539 12.1375 4.85999 11.17C4.8584 10.1057 5.06918 9.0518 5.47999 8.06999C5.88297 7.13047 6.45975 6.27549 7.17999 5.54999C7.90382 4.82306 8.76344 4.24545 9.70999 3.84999C10.6889 3.4344 11.7415 3.22021 12.805 3.22021C13.8685 3.22021 14.9211 3.4344 15.9 3.84999C17.3341 4.46429 18.5573 5.48452 19.4191 6.7851C20.2808 8.08568 20.7434 9.60985 20.75 11.17C20.7437 13.2771 19.9065 15.2966 18.42 16.79C17.6945 17.5102 16.8395 18.087 15.9 18.49C14.0091 19.2819 11.8865 19.3177 9.96999 18.59L4.71999 20.19C4.64977 20.22 4.57574 20.2402 4.49999 20.25ZM12.8 4.74999C11.5334 4.75547 10.2962 5.13143 9.24068 5.83153C8.18519 6.53164 7.35763 7.52528 6.85999 8.68999C6.19883 10.2911 6.19883 12.0889 6.85999 13.69C6.91957 13.8548 6.91957 14.0352 6.85999 14.2L5.62999 18.37L9.77999 17.11C9.94477 17.0504 10.1252 17.0504 10.29 17.11C11.0824 17.439 11.932 17.6083 12.79 17.6083C13.648 17.6083 14.4976 17.439 15.29 17.11C16.0708 16.7813 16.779 16.3018 17.3742 15.6989C17.9693 15.096 18.4397 14.3816 18.7583 13.5967C19.077 12.8118 19.2376 11.9717 19.231 11.1245C19.2244 10.2774 19.0508 9.4399 18.72 8.65999C18.2234 7.50094 17.398 6.51285 16.3459 5.81792C15.2937 5.123 14.0609 4.75171 12.8 4.74999Z" fill=""></path> </g></svg>4</span>
  </div>


</div>