Card by zanina-yassine

Posted by

@zanina-yassine

Theme:

Light

#card

#e8e8e8

1.2K views

Add prefixes

1.card {
2  width: 450px;
3  background: #FFFFFF;
4  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
5  border-radius: 11px;
6}
7
8.search-container {
9  display: flex;
10  align-items: center;
11  justify-content: flex-start;
12  gap: 10px;
13  padding: 0 20px;
14}
15
16.search-container input {
17  width: 100%;
18  height: 50px;
19  border: 0;
20  outline: none;
21  font-size: 13px;
22}
23
24.categories {
25  display: flex;
26  align-items: center;
27  justify-content: flex-start;
28  gap: 5px;
29  padding: 0px 20px 20px 20px;
30}
31
32.categories button {
33  display: flex;
34  justify-content: center;
35  align-items: center;
36  padding: 8px 15px;
37  background: #FFFFFF;
38  border: 1px solid #E5E5E5;
39  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
40  border-radius: 20px;
41  font-weight: 600;
42  color: #171718;
43  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
44}
45
46.categories button:hover {
47  transform: scale(1.05) translateY(-3px);
48}
49
50.results {
51  display: flex;
52  flex-direction: column;
53  gap: 10px;
54}
55
56.results hr {
57  width: 100%;
58  height: 1px;
59  border: 0;
60  background-color: #ECECEC;
61}
62
63.results p {
64  padding: 0 20px;
65}
66
67p.label {
68  font-weight: 600;
69  font-size: 11px;
70  line-height: 13px;
71  color: #5F6368;
72}
73
74.results .entry {
75  display: grid;
76  grid-template-columns: 40px 1fr 40px;
77  gap: 12px;
78  padding: 5px 20px;
79  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
80}
81
82.results .entry:hover {
83  background-color: #F5F8FE;
84}
85
86.results .results-list .entry:hover .icon {
87  background-color: #1763fa;
88}
89
90.results .results-list .entry:hover .icon svg path,
91.results .results-list .entry:hover .icon svg circle {
92  stroke: #ffffff;
93}
94
95.results .results-list .entry:hover label {
96  color: #1763fa;
97}
98
99.results .results-list .entry:hover span {
100  color: #7ba0eb;
101}
102
103.results .results-list {
104  display: flex;
105  flex-direction: column;
106}
107
108.results .entry .icon {
109  width: 40px;
110  height: 40px;
111  display: flex;
112  align-items: center;
113  justify-content: center;
114  background-color: #ECECEC;
115  border-radius: 7px;
116  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
117}
118
119.results .entry .desc {
120  display: flex;
121  flex-direction: column;
122  justify-content: center;
123  gap: 5px;
124}
125
126.results .entry .desc label {
127  display: block;
128  font-weight: 600;
129  font-size: 12px;
130  line-height: 15px;
131  color: #171718;
132}
133
134.results .entry .desc span {
135  font-weight: 600;
136  font-size: 10px;
137  line-height: 12px;
138  color: #72767c;
139}
140
141.results .entry .badge {
142  width: 40px;
143  height: 24px;
144  display: flex;
145  align-items: center;
146  justify-content: center;
147  margin: auto;
148  background: #DDFFDE;
149  border: 1px solid #08581d0e;
150  border-radius: 7px;
151  font-weight: 700;
152  font-size: 11px;
153  line-height: 13px;
154  text-align: center;
155  color: #08581D;
156}
157
158.card-footer {
159  height: 40px;
160  display: flex;
161  align-items: center;
162  gap: 25px;
163  margin-top: 10px;
164  padding: 0 7px;
165  background: #F8F8F8;
166}
167
168.card .action {
169  display: flex;
170  align-items: center;
171  gap: 5px;
172}
173
174.card .action p {
175  padding-left: 5px;
176}
177
178.card-footer button {
179  width: 24px;
180  height: 24px;
181  display: flex;
182  align-items: center;
183  justify-content: center;
184  border-radius: 6px;
185  border: 0;
186  background: #ECECEC;
187  outline: none;
188}
189
190.edit-actions {
191  width: 100%;
192  text-align: right;
193  padding-right: 10px;
194  opacity: 0.6;
195}

.card {
  width: 450px;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 20px;
}

.search-container input {
  width: 100%;
  height: 50px;
  border: 0;
  outline: none;
  font-size: 13px;
}

.categories {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0px 20px 20px 20px;
}

.categories button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 15px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 20px;
  font-weight: 600;
  color: #171718;
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.categories button:hover {
  transform: scale(1.05) translateY(-3px);
}

.results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.results hr {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #ECECEC;
}

.results p {
  padding: 0 20px;
}

p.label {
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  color: #5F6368;
}

.results .entry {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 12px;
  padding: 5px 20px;
  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.results .entry:hover {
  background-color: #F5F8FE;
}

.results .results-list .entry:hover .icon {
  background-color: #1763fa;
}

.results .results-list .entry:hover .icon svg path,
.results .results-list .entry:hover .icon svg circle {
  stroke: #ffffff;
}

.results .results-list .entry:hover label {
  color: #1763fa;
}

.results .results-list .entry:hover span {
  color: #7ba0eb;
}

.results .results-list {
  display: flex;
  flex-direction: column;
}

.results .entry .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ECECEC;
  border-radius: 7px;
  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.results .entry .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.results .entry .desc label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #171718;
}

.results .entry .desc span {
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  color: #72767c;
}

.results .entry .badge {
  width: 40px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background: #DDFFDE;
  border: 1px solid #08581d0e;
  border-radius: 7px;
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  color: #08581D;
}

.card-footer {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 10px;
  padding: 0 7px;
  background: #F8F8F8;
}

.card .action {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card .action p {
  padding-left: 5px;
}

.card-footer button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 0;
  background: #ECECEC;
  outline: none;
}

.edit-actions {
  width: 100%;
  text-align: right;
  padding-right: 10px;
  opacity: 0.6;
}

zanina-yassine

Yassine Zanina

I am a Creative Developer, and Digital Product Designer

MIT License

Copyright - 2023 zanina-yassine (Yassine Zanina) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.