Form by zanina-yassine

Posted by

@zanina-yassine

Theme:

Light

#form

#e8e8e8

2.4K views

Add prefixes

1.master-container {
2  display: grid;
3  grid-template-columns: auto;
4  gap: 5px;
5}
6
7.card {
8  width: 400px;
9  background: #FFFFFF;
10  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);
11}
12
13.title {
14  width: 100%;
15  height: 40px;
16  position: relative;
17  display: flex;
18  align-items: center;
19  padding-left: 20px;
20  border-bottom: 1px solid #efeff3;
21  font-weight: 700;
22  font-size: 11px;
23  color: #63656b;
24}
25
26/* cart */
27.cart {
28  border-radius: 19px 19px 7px 7px;
29}
30
31.cart .products {
32  display: flex;
33  flex-direction: column;
34  padding: 10px;
35}
36
37.cart .products .product {
38  display: grid;
39  grid-template-columns: 60px 1fr 80px 1fr;
40  gap: 10px;
41}
42
43.cart .products .product span {
44  font-size: 13px;
45  font-weight: 600;
46  color: #47484b;
47  margin-bottom: 8px;
48  display: block;
49}
50
51.cart .products .product p {
52  font-size: 11px;
53  font-weight: 600;
54  color: #7a7c81;
55}
56
57.cart .quantity {
58  height: 30px;
59  display: grid;
60  grid-template-columns: 1fr 1fr 1fr;
61  margin: auto;
62  background-color: #ffffff;
63  border: 1px solid #e5e5e5;
64  border-radius: 7px;
65  filter: drop-shadow(0px 1px 0px #efefef)
66    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
67}
68
69.cart .quantity label {
70  width: 20px;
71  height: 30px;
72  display: flex;
73  align-items: center;
74  justify-content: center;
75  padding-bottom: 2px;
76  font-size: 15px;
77  font-weight: 700;
78  color: #47484b;
79}
80
81.cart .quantity button {
82  width: 30px;
83  height: 30px;
84  display: flex;
85  align-items: center;
86  justify-content: center;
87  border: 0;
88  outline: none;
89  background-color: transparent;
90  padding-bottom: 2px;
91}
92
93.card .small {
94  font-size: 15px;
95  margin: 0 0 auto auto;
96}
97
98.card .small sup {
99  font-size: px;
100}
101
102/* coupons */
103.coupons {
104  border-radius: 7px;
105}
106
107.coupons form {
108  display: grid;
109  grid-template-columns: 1fr 80px;
110  gap: 10px;
111  padding: 10px;
112}
113
114.input_field {
115  width: auto;
116  height: 36px;
117  padding: 0 0 0 12px;
118  border-radius: 5px;
119  outline: none;
120  border: 1px solid #e5e5e5;
121  filter: drop-shadow(0px 1px 0px #efefef)
122    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
123  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
124}
125
126.input_field:focus {
127  border: 1px solid transparent;
128  box-shadow: 0px 0px 0px 2px #242424;
129  background-color: transparent;
130}
131
132.coupons form button {
133  display: flex;
134  flex-direction: row;
135  justify-content: center;
136  align-items: center;
137  padding: 10px 18px;
138  gap: 10px;
139  width: 100%;
140  height: 36px;
141  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
142  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
143  border-radius: 5px;
144  border: 0;
145  font-style: normal;
146  font-weight: 600;
147  font-size: 12px;
148  line-height: 15px;
149  color: #ffffff;
150}
151
152/* Checkout */
153.checkout {
154  border-radius: 9px 9px 19px 19px;
155}
156
157.checkout .details {
158  display: grid;
159  grid-template-columns: 3fr 1fr;
160  padding: 10px;
161  gap: 5px;
162}
163
164.checkout .details span {
165  font-size: 13px;
166  font-weight: 600;
167}
168
169.checkout .details span:nth-child(odd) {
170  font-size: 11px;
171  font-weight: 700;
172  color: #707175;
173  margin: auto auto auto 0;
174}
175
176.checkout .details span:nth-child(even) {
177  font-size: 13px;
178  font-weight: 600;
179  color: #47484b;
180  margin: auto 0 auto auto;
181}
182
183.checkout .checkout--footer {
184  display: flex;
185  align-items: center;
186  justify-content: space-between;
187  padding: 10px 10px 10px 20px;
188  background-color: #efeff3;
189}
190
191.price {
192  position: relative;
193  font-size: 22px;
194  color: #2B2B2F;
195  font-weight: 900;
196}
197
198.price sup {
199  font-size: 13px;
200}
201
202.price sub {
203  width: fit-content;
204  position: absolute;
205  font-size: 11px;
206  color: #5F5D6B;
207  bottom: 5px;
208  display: inline-block;
209}
210
211.checkout .checkout-btn {
212  display: flex;
213  flex-direction: row;
214  justify-content: center;
215  align-items: center;
216  width: 150px;
217  height: 36px;
218  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
219  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
220  border-radius: 7px;
221  border: 0;
222  outline: none;
223  color: #ffffff;
224  font-size: 13px;
225  font-weight: 600;
226  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
227}

.master-container {
  display: grid;
  grid-template-columns: auto;
  gap: 5px;
}

.card {
  width: 400px;
  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);
}

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

/* cart */
.cart {
  border-radius: 19px 19px 7px 7px;
}

.cart .products {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.cart .products .product {
  display: grid;
  grid-template-columns: 60px 1fr 80px 1fr;
  gap: 10px;
}

.cart .products .product span {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin-bottom: 8px;
  display: block;
}

.cart .products .product p {
  font-size: 11px;
  font-weight: 600;
  color: #7a7c81;
}

.cart .quantity {
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
}

.cart .quantity label {
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
  color: #47484b;
}

.cart .quantity button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: none;
  background-color: transparent;
  padding-bottom: 2px;
}

.card .small {
  font-size: 15px;
  margin: 0 0 auto auto;
}

.card .small sup {
  font-size: px;
}

/* coupons */
.coupons {
  border-radius: 7px;
}

.coupons form {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  padding: 10px;
}

.input_field {
  width: auto;
  height: 36px;
  padding: 0 0 0 12px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.coupons form button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 18px;
  gap: 10px;
  width: 100%;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 5px;
  border: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
}

/* Checkout */
.checkout {
  border-radius: 9px 9px 19px 19px;
}

.checkout .details {
  display: grid;
  grid-template-columns: 3fr 1fr;
  padding: 10px;
  gap: 5px;
}

.checkout .details span {
  font-size: 13px;
  font-weight: 600;
}

.checkout .details span:nth-child(odd) {
  font-size: 11px;
  font-weight: 700;
  color: #707175;
  margin: auto auto auto 0;
}

.checkout .details span:nth-child(even) {
  font-size: 13px;
  font-weight: 600;
  color: #47484b;
  margin: auto 0 auto auto;
}

.checkout .checkout--footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 20px;
  background-color: #efeff3;
}

.price {
  position: relative;
  font-size: 22px;
  color: #2B2B2F;
  font-weight: 900;
}

.price sup {
  font-size: 13px;
}

.price sub {
  width: fit-content;
  position: absolute;
  font-size: 11px;
  color: #5F5D6B;
  bottom: 5px;
  display: inline-block;
}

.checkout .checkout-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 36px;
  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 7px;
  border: 0;
  outline: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

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.