Form by zanina-yassine

Posted by

@zanina-yassine

Theme:

Light

#form

#e8e8e8

1.1K views

Add prefixes

1.card {
2  width: 450px;
3  height: fit-content;
4  background-color: white;
5  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);
6  border-radius: 17px 17px 27px 27px;
7}
8
9.title {
10  width: 100%;
11  height: 50px;
12  position: relative;
13  display: flex;
14  align-items: center;
15  padding-left: 20px;
16  border-bottom: 1px solid #f1f1f1;
17  font-weight: 700;
18  font-size: 13px;
19  color: #47484b;
20}
21
22.title::after {
23  content: '';
24  width: 8ch;
25  height: 1px;
26  position: absolute;
27  bottom: -1px;
28  background-color: #47484b;
29}
30
31.comments {
32  display: grid;
33  grid-template-columns: 35px 1fr;
34  gap: 20px;
35  padding: 20px;
36}
37
38.comment-react {
39  width: 35px;
40  height: fit-content;
41  display: grid;
42  grid-template-columns: auto;
43  margin: 0;
44  background-color: #f1f1f1;
45  border-radius: 5px;
46}
47
48.comment-react button {
49  width: 35px;
50  height: 35px;
51  position: relative;
52  display: flex;
53  align-items: center;
54  justify-content: center;
55  background-color: transparent;
56  border: 0;
57  outline: none;
58}
59
60.comment-react button:after {
61  content: '';
62  width: 40px;
63  height: 40px;
64  position: absolute;
65  left: -2.5px;
66  top: -2.5px;
67  background-color: #f5356e;
68  border-radius: 50%;
69  z-index: 0;
70  transform: scale(0);
71}
72
73.comment-react button svg {
74  position: relative;
75  z-index: 9;
76}
77
78.comment-react button:hover:after {
79  animation: ripple 0.6s ease-in-out forwards;
80}
81
82.comment-react button:hover svg {
83  fill: #f5356e;
84}
85
86.comment-react button:hover svg path {
87  stroke: #f5356e;
88  fill: #f5356e;
89}
90
91.comment-react hr {
92  width: 80%;
93  height: 1px;
94  background-color: #dfe1e6;
95  margin: auto;
96  border: 0;
97}
98
99.comment-react span {
100  height: 35px;
101  display: flex;
102  align-items: center;
103  justify-content: center;
104  margin: auto;
105  font-size: 13px;
106  font-weight: 600;
107  color: #707277;
108}
109
110.comment-container {
111  display: flex;
112  flex-direction: column;
113  gap: 15px;
114  padding: 0;
115  margin: 0;
116}
117
118.comment-container .user {
119  display: grid;
120  grid-template-columns: 40px 1fr;
121  gap: 10px;
122}
123
124.comment-container .user .user-pic {
125  width: 40px;
126  height: 40px;
127  position: relative;
128  display: flex;
129  align-items: center;
130  justify-content: center;
131  background-color: #f1f1f1;
132  border-radius: 50%;
133}
134
135.comment-container .user .user-pic:after {
136  content: '';
137  width: 9px;
138  height: 9px;
139  position: absolute;
140  right: 0px;
141  bottom: 0px;
142  border-radius: 50%;
143  background-color: #0fc45a;
144  border: 2px solid #ffffff;
145}
146
147.comment-container .user .user-info {
148  width: 100%;
149  display: flex;
150  flex-direction: column;
151  align-items: flex-start;
152  justify-content: center;
153  gap: 3px;
154}
155
156.comment-container .user .user-info span {
157  font-weight: 700;
158  font-size: 12px;
159  color: #47484b;
160}
161
162.comment-container .user .user-info p {
163  font-weight: 600;
164  font-size: 10px;
165  color: #acaeb4;
166}
167
168.comment-container .comment-content {
169  font-size: 12px;
170  line-height: 16px;
171  font-weight: 600;
172  color: #5f6064;
173}
174
175.text-box {
176  width: 100%;
177  height: fit-content;
178  background-color: #f1f1f1;
179  padding: 8px;
180}
181
182.text-box .box-container {
183  background-color: #ffffff;
184  border-radius: 8px 8px 21px 21px;
185  padding: 8px;
186}
187
188.text-box textarea {
189  width: 100%;
190  height: 40px;
191  resize: none;
192  border: 0;
193  border-radius: 6px;
194  padding: 12px 12px 10px 12px;
195  font-size: 13px;
196  outline: none;
197  caret-color: #0a84ff;
198}
199
200.text-box .formatting {
201  display: grid;
202  grid-template-columns: auto auto auto auto auto 1fr;
203}
204
205.text-box .formatting button {
206  width: 30px;
207  height: 30px;
208  position: relative;
209  display: flex;
210  align-items: center;
211  justify-content: center;
212  background-color: transparent;
213  border-radius: 50%;
214  border: 0;
215  outline: none;
216}
217
218.text-box .formatting button:hover {
219  background-color: #f1f1f1;
220}
221
222.text-box .formatting .send {
223  width: 30px;
224  height: 30px;
225  background-color: #0a84ff;
226  margin: 0 0 0 auto;
227}
228
229.text-box .formatting .send:hover {
230  background-color: #026eda;
231}
232
233@keyframes ripple {
234  0% {
235    transform: scale(0);
236    opacity: 0.6;
237  }
238
239  100% {
240    transform: scale(1);
241    opacity: 0;
242  }
243}

.card {
  width: 450px;
  height: fit-content;
  background-color: white;
  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: 17px 17px 27px 27px;
}

.title {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid #f1f1f1;
  font-weight: 700;
  font-size: 13px;
  color: #47484b;
}

.title::after {
  content: '';
  width: 8ch;
  height: 1px;
  position: absolute;
  bottom: -1px;
  background-color: #47484b;
}

.comments {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 20px;
  padding: 20px;
}

.comment-react {
  width: 35px;
  height: fit-content;
  display: grid;
  grid-template-columns: auto;
  margin: 0;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.comment-react button {
  width: 35px;
  height: 35px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  outline: none;
}

.comment-react button:after {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  background-color: #f5356e;
  border-radius: 50%;
  z-index: 0;
  transform: scale(0);
}

.comment-react button svg {
  position: relative;
  z-index: 9;
}

.comment-react button:hover:after {
  animation: ripple 0.6s ease-in-out forwards;
}

.comment-react button:hover svg {
  fill: #f5356e;
}

.comment-react button:hover svg path {
  stroke: #f5356e;
  fill: #f5356e;
}

.comment-react hr {
  width: 80%;
  height: 1px;
  background-color: #dfe1e6;
  margin: auto;
  border: 0;
}

.comment-react span {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 13px;
  font-weight: 600;
  color: #707277;
}

.comment-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0;
  margin: 0;
}

.comment-container .user {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
}

.comment-container .user .user-pic {
  width: 40px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  border-radius: 50%;
}

.comment-container .user .user-pic:after {
  content: '';
  width: 9px;
  height: 9px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  border-radius: 50%;
  background-color: #0fc45a;
  border: 2px solid #ffffff;
}

.comment-container .user .user-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.comment-container .user .user-info span {
  font-weight: 700;
  font-size: 12px;
  color: #47484b;
}

.comment-container .user .user-info p {
  font-weight: 600;
  font-size: 10px;
  color: #acaeb4;
}

.comment-container .comment-content {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #5f6064;
}

.text-box {
  width: 100%;
  height: fit-content;
  background-color: #f1f1f1;
  padding: 8px;
}

.text-box .box-container {
  background-color: #ffffff;
  border-radius: 8px 8px 21px 21px;
  padding: 8px;
}

.text-box textarea {
  width: 100%;
  height: 40px;
  resize: none;
  border: 0;
  border-radius: 6px;
  padding: 12px 12px 10px 12px;
  font-size: 13px;
  outline: none;
  caret-color: #0a84ff;
}

.text-box .formatting {
  display: grid;
  grid-template-columns: auto auto auto auto auto 1fr;
}

.text-box .formatting button {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 50%;
  border: 0;
  outline: none;
}

.text-box .formatting button:hover {
  background-color: #f1f1f1;
}

.text-box .formatting .send {
  width: 30px;
  height: 30px;
  background-color: #0a84ff;
  margin: 0 0 0 auto;
}

.text-box .formatting .send:hover {
  background-color: #026eda;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

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.