Card by boryanakrasteva

Made by

@boryanakrasteva

Theme:

Dark

#card

#212121

2K views

CSSAdd prefixes

1.card {
2  width: 300px;
3  height: 254px;
4  background: lightgrey;
5  overflow: hidden;
6  display: flex;
7}
8
9.circles,
10.browser {
11  height: 30px;
12  display: flex;
13  align-items: center;
14}
15
16.circles {
17  width: 20%;
18  gap: 8px;
19  padding: 10px;
20}
21
22.c {
23  width: 09px;
24  height: 9px;
25  border-radius: 50%;
26  box-shadow: inset 2px 2px 5px rgba(235, 235, 235, 0.356);
27}
28
29.c:first-child {
30  background-color: red;
31}
32
33.c:nth-child(2) {
34  background-color: rgb(204, 167, 4);
35}
36
37.c:last-child {
38  background-color: green;
39}
40
41.browser {
42  width: 80%;
43  padding: 5px;
44  display: flex;
45  gap: 10px;
46}
47
48.chevrons {
49  display: flex;
50}
51
52.search-bar {
53  position: relative;
54  border: 0.5px solid black;
55  border-radius: 5px;
56  padding: 5px;
57  width: 100%;
58  height: 100%;
59  display: flex;
60  align-items: center;
61  justify-content: center;
62  font-size: 10px;
63  color: rgb(88, 88, 88);
64  box-shadow: inset 2px 2px 2px #05050525;
65}
66
67.search-bar svg {
68  position: absolute;
69  left: 10px;
70}

.card {
  width: 300px;
  height: 254px;
  background: lightgrey;
  overflow: hidden;
  display: flex;
}

.circles,
.browser {
  height: 30px;
  display: flex;
  align-items: center;
}

.circles {
  width: 20%;
  gap: 8px;
  padding: 10px;
}

.c {
  width: 09px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 2px 2px 5px rgba(235, 235, 235, 0.356);
}

.c:first-child {
  background-color: red;
}

.c:nth-child(2) {
  background-color: rgb(204, 167, 4);
}

.c:last-child {
  background-color: green;
}

.browser {
  width: 80%;
  padding: 5px;
  display: flex;
  gap: 10px;
}

.chevrons {
  display: flex;
}

.search-bar {
  position: relative;
  border: 0.5px solid black;
  border-radius: 5px;
  padding: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgb(88, 88, 88);
  box-shadow: inset 2px 2px 2px #05050525;
}

.search-bar svg {
  position: absolute;
  left: 10px;
}

HTML

1<div class="card">
2  <div class="circles"> 
3    <div class="c"></div>
4    <div class="c"></div>
5    <div class="c"></div>
6  </div>
7
8  <div class="browser">
9    <div class="chevrons">
10      <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
11        <path transform="translate(6.25 3.75)" d="M0,6.25,6.25,0l.875.875L1.75,6.25l5.375,5.375L6.25,12.5Z" id="Fill"></path>
12      </svg>
13      <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
14        <path transform="translate(6.625 3.75)" d="M7.125,6.25.875,12.5,0,11.625,5.375,6.25,0,.875.875,0Z" id="Fill"></path>
15      </svg>
16    </div>
17    <div class="search-bar">
18      <svg xmlns="http://www.w3.org/2000/svg" width="7.89" height="7.887" viewBox="0 0 16.89 16.887">
19  <path id="Fill" d="M16.006,16.887h0l-4.743-4.718a6.875,6.875,0,1,1,.906-.906l4.719,4.744-.88.88ZM6.887,1.262a5.625,5.625,0,1,0,5.625,5.625A5.631,5.631,0,0,0,6.887,1.262Z" transform="translate(0.003 0)"></path>
20</svg>
21
22      uiverse.io
23    <div>
24  </div>
25
26</div></div></div>

<div class="card">
  <div class="circles"> 
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
  </div>

  <div class="browser">
    <div class="chevrons">
      <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
        <path transform="translate(6.25 3.75)" d="M0,6.25,6.25,0l.875.875L1.75,6.25l5.375,5.375L6.25,12.5Z" id="Fill"></path>
      </svg>
      <svg viewBox="0 0 20 20" height="16" width="16" xmlns="http://www.w3.org/2000/svg" data-name="20" id="_20">
        <path transform="translate(6.625 3.75)" d="M7.125,6.25.875,12.5,0,11.625,5.375,6.25,0,.875.875,0Z" id="Fill"></path>
      </svg>
    </div>
    <div class="search-bar">
      <svg xmlns="http://www.w3.org/2000/svg" width="7.89" height="7.887" viewBox="0 0 16.89 16.887">
  <path id="Fill" d="M16.006,16.887h0l-4.743-4.718a6.875,6.875,0,1,1,.906-.906l4.719,4.744-.88.88ZM6.887,1.262a5.625,5.625,0,1,0,5.625,5.625A5.631,5.631,0,0,0,6.887,1.262Z" transform="translate(0.003 0)"></path>
</svg>

      uiverse.io
    <div>
  </div>

</div></div></div>