Post by EmmaxPlay

Made by

@EmmaxPlay

Theme:

Dark

#card

#212121

9.2K views

CSSAdd prefixes

1.card {
2 width: 190px;
3 height: 254px;
4 margin: 0 auto;
5 background-color: #F8FBFE;
6 border-radius: 8px;
7 z-index: 1;
8}
9
10.tools {
11 display: flex;
12 align-items: center;
13 padding: 9px;
14}
15
16.circle {
17 padding: 0 4px;
18}
19
20.box {
21 display: inline-block;
22 align-items: center;
23 width: 10px;
24 height: 10px;
25 padding: 1px;
26 border-radius: 50%;
27}
28
29.red {
30 background-color: #ff605c;
31}
32
33.yellow {
34 background-color: #ffbd44;
35}
36
37.green {
38 background-color: #00ca4e;
39}
40

.card {
 width: 190px;
 height: 254px;
 margin: 0 auto;
 background-color: #F8FBFE;
 border-radius: 8px;
 z-index: 1;
}

.tools {
 display: flex;
 align-items: center;
 padding: 9px;
}

.circle {
 padding: 0 4px;
}

.box {
 display: inline-block;
 align-items: center;
 width: 10px;
 height: 10px;
 padding: 1px;
 border-radius: 50%;
}

.red {
 background-color: #ff605c;
}

.yellow {
 background-color: #ffbd44;
}

.green {
 background-color: #00ca4e;
}

HTML

1<div class="card">
2  <div class="tools">
3    <div class="circle">
4      <span class="red box"></span>
5    </div>
6    <div class="circle">
7      <span class="yellow box"></span>
8    </div>
9    <div class="circle">
10      <span class="green box"></span>
11    </div>
12  </div>
13  <div class="card__content">
14  </div>
15</div>

<div class="card">
  <div class="tools">
    <div class="circle">
      <span class="red box"></span>
    </div>
    <div class="circle">
      <span class="yellow box"></span>
    </div>
    <div class="circle">
      <span class="green box"></span>
    </div>
  </div>
  <div class="card__content">
  </div>
</div>