la-flowerita 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (129) hide show
  1. package/README.md +70 -0
  2. package/package.json +78 -0
  3. package/public/favicon.ico +0 -0
  4. package/public/images/1.jpg +0 -0
  5. package/public/images/2.jpg +0 -0
  6. package/public/images/3.jpg +0 -0
  7. package/public/images/Logo.png +0 -0
  8. package/public/images/add-user.png +0 -0
  9. package/public/images/contact-us.png +0 -0
  10. package/public/images/flower.png +0 -0
  11. package/public/images/flower_shop.png +0 -0
  12. package/public/images/flower_shop1.png +0 -0
  13. package/public/images/flowers/buttercup.png +0 -0
  14. package/public/images/flowers/daffodil.png +0 -0
  15. package/public/images/flowers/daisy.png +0 -0
  16. package/public/images/flowers/jasmine.png +0 -0
  17. package/public/images/flowers/lily.png +0 -0
  18. package/public/images/flowers/marigold.png +0 -0
  19. package/public/images/flowers/orchid.png +0 -0
  20. package/public/images/flowers/rose.png +0 -0
  21. package/public/images/flowers/sunflower.png +0 -0
  22. package/public/images/flowers/tulip.png +0 -0
  23. package/public/images/garbage.png +0 -0
  24. package/public/images/icon1.jpg +0 -0
  25. package/public/images/login.png +0 -0
  26. package/public/images/refresh.png +0 -0
  27. package/public/images/transaction.png +0 -0
  28. package/public/index.html +41 -0
  29. package/public/logo192.png +0 -0
  30. package/public/logo512.png +0 -0
  31. package/public/manifest.json +26 -0
  32. package/public/offline.html +44 -0
  33. package/public/robots.txt +3 -0
  34. package/public/serviceworker.js +44 -0
  35. package/server.js +97 -0
  36. package/src/App.css +38 -0
  37. package/src/App.js +25 -0
  38. package/src/App.test.js +8 -0
  39. package/src/Config/db.js +5 -0
  40. package/src/Config/mail.js +7 -0
  41. package/src/Config/passport.js +34 -0
  42. package/src/Controllers/catalog.controller.js +78 -0
  43. package/src/Controllers/shoppinglist.controller.js +186 -0
  44. package/src/Controllers/user.controller.js +214 -0
  45. package/src/Controllers/wishlist.controller.js +150 -0
  46. package/src/Middleware/sendMail.js +29 -0
  47. package/src/Middleware/uploadImage.js +26 -0
  48. package/src/Models/orderProducts.js +10 -0
  49. package/src/Models/products.js +17 -0
  50. package/src/Models/shoppinglists.js +12 -0
  51. package/src/Models/userShoppinglists.js +9 -0
  52. package/src/Models/users.js +57 -0
  53. package/src/Models/wishlists.js +9 -0
  54. package/src/Routes/auth.js +21 -0
  55. package/src/Routes/indexRouter.js +40 -0
  56. package/src/Services/ProductService.js +76 -0
  57. package/src/Services/ShoppinglistService.js +135 -0
  58. package/src/Services/UserService.js +63 -0
  59. package/src/Services/WishlistService.js +105 -0
  60. package/src/components/About.js +45 -0
  61. package/src/components/Auth.js +15 -0
  62. package/src/components/Catalog.js +118 -0
  63. package/src/components/Chat.js +77 -0
  64. package/src/components/Contact.js +48 -0
  65. package/src/components/Dashboard.js +13 -0
  66. package/src/components/DetailsProductModal.js +362 -0
  67. package/src/components/LoginModal.js +173 -0
  68. package/src/components/NewProductModal.js +271 -0
  69. package/src/components/NoPermission.js +10 -0
  70. package/src/components/OrderedProduct.js +104 -0
  71. package/src/components/PreChat.js +51 -0
  72. package/src/components/Product.js +158 -0
  73. package/src/components/ResetPassword.js +211 -0
  74. package/src/components/ShoppingCart.js +198 -0
  75. package/src/components/SideNav.js +76 -0
  76. package/src/components/SignupModal.js +306 -0
  77. package/src/components/Spinner.js +22 -0
  78. package/src/components/Wishlist.js +195 -0
  79. package/src/components/social-config.js +17 -0
  80. package/src/css/about.css +12 -0
  81. package/src/css/catalog.css +218 -0
  82. package/src/css/chat.css +191 -0
  83. package/src/css/contact.css +404 -0
  84. package/src/css/index.css +129 -0
  85. package/src/css/newProductModal.css +69 -0
  86. package/src/css/noPermission.css +89 -0
  87. package/src/css/orderedProduct.css +0 -0
  88. package/src/css/resetPassword.css +44 -0
  89. package/src/css/shoppingCart.css +10 -0
  90. package/src/css/sideNav.css +68 -0
  91. package/src/css/spinner.css +23 -0
  92. package/src/images/1.jpg +0 -0
  93. package/src/images/2.jpg +0 -0
  94. package/src/images/3.jpg +0 -0
  95. package/src/images/Logo.png +0 -0
  96. package/src/images/add-user.png +0 -0
  97. package/src/images/buttercup.png +0 -0
  98. package/src/images/contact-us.png +0 -0
  99. package/src/images/daffodil.png +0 -0
  100. package/src/images/daisy.png +0 -0
  101. package/src/images/flower.png +0 -0
  102. package/src/images/flower_shop.png +0 -0
  103. package/src/images/flower_shop1.png +0 -0
  104. package/src/images/flowers/buttercup.png +0 -0
  105. package/src/images/flowers/daffodil.png +0 -0
  106. package/src/images/flowers/daisy.png +0 -0
  107. package/src/images/flowers/jasmine.png +0 -0
  108. package/src/images/flowers/lily.png +0 -0
  109. package/src/images/flowers/marigold.png +0 -0
  110. package/src/images/flowers/orchid.png +0 -0
  111. package/src/images/flowers/rose.png +0 -0
  112. package/src/images/flowers/sunflower.png +0 -0
  113. package/src/images/flowers/tulip.png +0 -0
  114. package/src/images/garbage.png +0 -0
  115. package/src/images/icon1.jpg +0 -0
  116. package/src/images/jasmine.png +0 -0
  117. package/src/images/lily.png +0 -0
  118. package/src/images/login.png +0 -0
  119. package/src/images/marigold.png +0 -0
  120. package/src/images/orchid.png +0 -0
  121. package/src/images/refresh.png +0 -0
  122. package/src/images/rose.png +0 -0
  123. package/src/images/sunflower.png +0 -0
  124. package/src/images/transaction.png +0 -0
  125. package/src/images/tulip.png +0 -0
  126. package/src/index.js +371 -0
  127. package/src/logo.svg +1 -0
  128. package/src/reportWebVitals.js +13 -0
  129. package/src/setupTests.js +5 -0
@@ -0,0 +1,404 @@
1
+ input {
2
+ outline: none;
3
+ border: none;
4
+ }
5
+
6
+ textarea {
7
+ outline: none;
8
+ border: none;
9
+ }
10
+
11
+ textarea:focus,
12
+ input:focus {
13
+ border-color: transparent !important;
14
+ }
15
+
16
+ input:focus::-webkit-input-placeholder {
17
+ color: transparent;
18
+ }
19
+
20
+ input:focus:-moz-placeholder {
21
+ color: transparent;
22
+ }
23
+
24
+ input:focus::-moz-placeholder {
25
+ color: transparent;
26
+ }
27
+
28
+ input:focus:-ms-input-placeholder {
29
+ color: transparent;
30
+ }
31
+
32
+ textarea:focus::-webkit-input-placeholder {
33
+ color: transparent;
34
+ }
35
+
36
+ textarea:focus:-moz-placeholder {
37
+ color: transparent;
38
+ }
39
+
40
+ textarea:focus::-moz-placeholder {
41
+ color: transparent;
42
+ }
43
+
44
+ textarea:focus:-ms-input-placeholder {
45
+ color: transparent;
46
+ }
47
+
48
+ input::-webkit-input-placeholder {
49
+ color: #aaaaaa;
50
+ }
51
+
52
+ input:-moz-placeholder {
53
+ color: #aaaaaa;
54
+ }
55
+
56
+ input::-moz-placeholder {
57
+ color: #aaaaaa;
58
+ }
59
+
60
+ input:-ms-input-placeholder {
61
+ color: #aaaaaa;
62
+ }
63
+
64
+ textarea::-webkit-input-placeholder {
65
+ color: #aaaaaa;
66
+ }
67
+
68
+ textarea:-moz-placeholder {
69
+ color: #aaaaaa;
70
+ }
71
+
72
+ textarea::-moz-placeholder {
73
+ color: #aaaaaa;
74
+ }
75
+
76
+ textarea:-ms-input-placeholder {
77
+ color: #aaaaaa;
78
+ }
79
+
80
+ /*---------------------------------------------*/
81
+ button {
82
+ outline: none !important;
83
+ border: none;
84
+ background: transparent;
85
+ }
86
+
87
+ button:hover {
88
+ cursor: pointer;
89
+ }
90
+
91
+ iframe {
92
+ border: none !important;
93
+ }
94
+
95
+
96
+
97
+ .bg-contact100 {
98
+ width: 100%;
99
+ background-repeat: no-repeat;
100
+ background-position: center center;
101
+ background-size: cover;
102
+ }
103
+
104
+ .container-contact100 {
105
+ width: 100%;
106
+ min-height: 100vh;
107
+ display: -webkit-box;
108
+ display: -webkit-flex;
109
+ display: -moz-box;
110
+ display: -ms-flexbox;
111
+ display: flex;
112
+ flex-wrap: wrap;
113
+ justify-content: center;
114
+ align-items: center;
115
+ padding: 15px;
116
+ }
117
+
118
+ .wrap-contact100 {
119
+ width: 1163px;
120
+ background: #fff;
121
+ border-radius: 10px;
122
+ overflow: hidden;
123
+
124
+ display: -webkit-box;
125
+ display: -webkit-flex;
126
+ display: -moz-box;
127
+ display: -ms-flexbox;
128
+ display: flex;
129
+ flex-wrap: wrap;
130
+ justify-content: space-between;
131
+ padding: 110px 130px 157px 148px;
132
+ }
133
+
134
+ /*------------------------------------------------------------------
135
+ [ ]*/
136
+ .contact100-pic {
137
+ width: 310px;
138
+ padding-top: 55px;
139
+ }
140
+
141
+ .contact100-pic img {
142
+ max-width: 100%;
143
+ }
144
+
145
+
146
+ .contact100-form {
147
+ width: 390px;
148
+ }
149
+
150
+ .contact100-form-title {
151
+ display: block;
152
+ font-family: Montserrat-ExtraBold;
153
+ font-size: 48px;
154
+ color: #333333;
155
+ line-height: 1.2;
156
+ text-align: left;
157
+ padding-bottom: 36px;
158
+ }
159
+
160
+ input.input100 {
161
+ height: 50px;
162
+ border-radius: 25px;
163
+ padding: 0 30px 0 50px;
164
+ }
165
+
166
+ input.input100[name="email"] {
167
+ padding: 0 30px 0 54px;
168
+ }
169
+
170
+ textarea.input100 {
171
+ min-height: 150px;
172
+ border-radius: 25px;
173
+ padding: 14px 30px;
174
+ }
175
+
176
+ .wrap-input100 {
177
+ position: relative;
178
+ width: 100%;
179
+ z-index: 1;
180
+ margin-bottom: 10px;
181
+ }
182
+
183
+ .input100 {
184
+ display: block;
185
+ width: 100%;
186
+ background: #e6e6e6;
187
+ font-family: Montserrat-Bold;
188
+ font-size: 15px;
189
+ line-height: 1.5;
190
+ color: #666666;
191
+ }
192
+
193
+
194
+ .focus-input100 {
195
+ display: block;
196
+ position: absolute;
197
+ border-radius: 25px;
198
+ bottom: 0;
199
+ left: 0;
200
+ z-index: -1;
201
+ width: 100%;
202
+ height: 100%;
203
+ box-shadow: 0px 0px 0px 0px;
204
+ color: rgba(132, 106, 221, 0.5);
205
+ }
206
+
207
+ .input100:focus+.focus-input100 {
208
+ -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
209
+ animation: anim-shadow 0.5s ease-in-out forwards;
210
+ }
211
+
212
+ @-webkit-keyframes anim-shadow {
213
+ to {
214
+ box-shadow: 0px 0px 60px 25px;
215
+ opacity: 0;
216
+ }
217
+ }
218
+
219
+ @keyframes anim-shadow {
220
+ to {
221
+ box-shadow: 0px 0px 60px 25px;
222
+ opacity: 0;
223
+ }
224
+ }
225
+
226
+ .symbol-input100 {
227
+ display: -webkit-box;
228
+ display: -webkit-flex;
229
+ display: -moz-box;
230
+ display: -ms-flexbox;
231
+ display: flex;
232
+ align-items: center;
233
+ position: absolute;
234
+ border-radius: 25px;
235
+ bottom: 0;
236
+ left: 0;
237
+ width: 100%;
238
+ height: 100%;
239
+ padding-left: 30px;
240
+ pointer-events: none;
241
+ color: #aaaaaa;
242
+ font-size: 15px;
243
+
244
+ -webkit-transition: all 0.4s;
245
+ -o-transition: all 0.4s;
246
+ -moz-transition: all 0.4s;
247
+ transition: all 0.4s;
248
+ }
249
+
250
+ .input100:focus+.focus-input100+.symbol-input100 {
251
+ color: #846add;
252
+ padding-left: 22px;
253
+ }
254
+
255
+ .container-contact100-form-btn {
256
+ width: 100%;
257
+ display: -webkit-box;
258
+ display: -webkit-flex;
259
+ display: -moz-box;
260
+ display: -ms-flexbox;
261
+ display: flex;
262
+ flex-wrap: wrap;
263
+ justify-content: center;
264
+ padding-top: 20px;
265
+ }
266
+
267
+ .contact100-form-btn {
268
+ width: 100%;
269
+ height: 50px;
270
+ border-radius: 25px;
271
+ background: #000000;
272
+ font-family: Montserrat-Bold;
273
+ font-size: 15px;
274
+ line-height: 1.5;
275
+ color: #fff;
276
+ display: -webkit-box;
277
+ display: -webkit-flex;
278
+ display: -moz-box;
279
+ display: -ms-flexbox;
280
+ display: flex;
281
+ justify-content: center;
282
+ align-items: center;
283
+ padding: 0 25px;
284
+
285
+ -webkit-transition: all 0.4s;
286
+ -o-transition: all 0.4s;
287
+ -moz-transition: all 0.4s;
288
+ transition: all 0.4s;
289
+ }
290
+
291
+ .contact100-form-btn:hover {
292
+ background: #333333;
293
+ }
294
+
295
+
296
+ @media (max-width: 1200px) {
297
+ .contact100-pic {
298
+ width: 33.5%;
299
+ }
300
+
301
+ .contact100-form {
302
+ width: 44%;
303
+ }
304
+ }
305
+
306
+ @media (max-width: 992px) {
307
+ .wrap-contact100 {
308
+ padding: 110px 80px 157px 90px;
309
+ }
310
+
311
+ .contact100-pic {
312
+ width: 35%;
313
+ }
314
+
315
+ .contact100-form {
316
+ width: 55%;
317
+ }
318
+ }
319
+
320
+ @media (max-width: 768px) {
321
+ .wrap-contact100 {
322
+ padding: 110px 80px 157px 80px;
323
+ }
324
+
325
+ .contact100-pic {
326
+ display: none;
327
+ }
328
+
329
+ .contact100-form {
330
+ width: 100%;
331
+ }
332
+ }
333
+
334
+ @media (max-width: 576px) {
335
+ .wrap-contact100 {
336
+ padding: 110px 15px 157px 15px;
337
+ }
338
+ }
339
+
340
+
341
+
342
+ .validate-input {
343
+ position: relative;
344
+ }
345
+
346
+ .alert-validate::before {
347
+ content: attr(data-validate);
348
+ position: absolute;
349
+ max-width: 70%;
350
+ background-color: white;
351
+ border: 1px solid #c80000;
352
+ border-radius: 13px;
353
+ padding: 4px 25px 4px 10px;
354
+ top: 50%;
355
+ -webkit-transform: translateY(-50%);
356
+ -moz-transform: translateY(-50%);
357
+ -ms-transform: translateY(-50%);
358
+ -o-transform: translateY(-50%);
359
+ transform: translateY(-50%);
360
+ right: 8px;
361
+ pointer-events: none;
362
+
363
+ font-family: Montserrat-Medium;
364
+ color: #c80000;
365
+ font-size: 13px;
366
+ line-height: 1.4;
367
+ text-align: left;
368
+
369
+ visibility: hidden;
370
+ opacity: 0;
371
+
372
+ -webkit-transition: opacity 0.4s;
373
+ -o-transition: opacity 0.4s;
374
+ -moz-transition: opacity 0.4s;
375
+ transition: opacity 0.4s;
376
+ }
377
+
378
+ .alert-validate::after {
379
+ content: "\f06a";
380
+ font-family: FontAwesome;
381
+ display: block;
382
+ position: absolute;
383
+ color: #c80000;
384
+ font-size: 15px;
385
+ top: 50%;
386
+ -webkit-transform: translateY(-50%);
387
+ -moz-transform: translateY(-50%);
388
+ -ms-transform: translateY(-50%);
389
+ -o-transform: translateY(-50%);
390
+ transform: translateY(-50%);
391
+ right: 13px;
392
+ }
393
+
394
+ .alert-validate:hover:before {
395
+ visibility: visible;
396
+ opacity: 1;
397
+ }
398
+
399
+ @media (max-width: 992px) {
400
+ .alert-validate::before {
401
+ visibility: visible;
402
+ opacity: 1;
403
+ }
404
+ }
@@ -0,0 +1,129 @@
1
+ .avatar {
2
+ vertical-align: middle;
3
+ width: 50px;
4
+ height: 50px;
5
+ border-radius: 50%;
6
+ }/* Remove the navbar's default margin-bottom and rounded borders */
7
+ .navbar {
8
+ background-color: snow ;
9
+ margin: 30px;
10
+ border-radius: initial;
11
+ height: 70px;
12
+ font-size: xx-large;
13
+ border-bottom-style: solid;
14
+ }
15
+
16
+ /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
17
+ .row.content {
18
+ height: 450px
19
+ }
20
+
21
+ /* Set gray background color and 100% height */
22
+ .sidenav {
23
+ padding-top: 20px;
24
+ background-color: #f1f1f1;
25
+ height: 100%;
26
+ }
27
+
28
+ .center {
29
+ padding-top: 20px;
30
+ text-align: center;
31
+ margin: auto;
32
+ width: 50%;
33
+
34
+ }
35
+
36
+ .notlog {
37
+ display: none;
38
+ }
39
+ /* Set black background color, white text and some padding */
40
+ footer {
41
+ background-color: #dfc2c4;
42
+ border-top-style: solid;
43
+ color: white;
44
+ position: fixed;
45
+ border-radius: initial;
46
+ padding: 10px 10px 0px 10px;
47
+ bottom: 0;
48
+ /* Height of the footer*/
49
+ height: 40px;
50
+ font-size: large;
51
+ }
52
+
53
+ .badge {
54
+ padding-left: 9px;
55
+ padding-right: 9px;
56
+ -webkit-border-radius: 9px;
57
+ -moz-border-radius: 9px;
58
+ border-radius: 9px;
59
+ }
60
+
61
+ .label-warning[href],
62
+ .badge-warning[href] {
63
+ background-color: #c67605;
64
+ }
65
+ #lblCartCount {
66
+ font-size: 12px;
67
+ background: #ff0000;
68
+ color: #fff;
69
+ padding: 0 5px;
70
+ vertical-align: top;
71
+ margin-left: -10px;
72
+ }
73
+
74
+ /* On small screens, set height to 'auto' for sidenav and grid */
75
+ @media screen and (max-width: 767px) {
76
+ .sidenav {
77
+ height: auto;
78
+ padding: 15px;
79
+ }
80
+
81
+ .row.content {
82
+ height: auto;
83
+ }
84
+ }
85
+
86
+ .form-signin {
87
+ width: 100%;
88
+ max-width: 330px;
89
+ padding: 15px;
90
+ margin: auto;
91
+ }
92
+ .form-signin .checkbox {
93
+ font-weight: 400;
94
+ }
95
+ .form-signin .form-control {
96
+ position: relative;
97
+ box-sizing: border-box;
98
+ height: auto;
99
+ padding: 10px;
100
+ font-size: 16px;
101
+ }
102
+ .form-signin .form-control:focus {
103
+ z-index: 2;
104
+ }
105
+ .form-signin input[type="email"] {
106
+ margin-bottom: -1px;
107
+ border-bottom-right-radius: 0;
108
+ border-bottom-left-radius: 0;
109
+ }
110
+ .form-signin input[type="password"] {
111
+ margin-bottom: 10px;
112
+ border-top-left-radius: 0;
113
+ border-top-right-radius: 0;
114
+ }
115
+ .bd-placeholder-img {
116
+ font-size: 1.125rem;
117
+ text-anchor: middle;
118
+ -webkit-user-select: none;
119
+ -moz-user-select: none;
120
+ -ms-user-select: none;
121
+ user-select: none;
122
+ }
123
+
124
+ @media (min-width: 768px) {
125
+ .bd-placeholder-img-lg {
126
+ font-size: 3.5rem;
127
+ }
128
+ }
129
+
@@ -0,0 +1,69 @@
1
+ /* CSS */
2
+ .button-17 {
3
+ align-items: center;
4
+ appearance: none;
5
+ background-color: #fff;
6
+ border-radius: 24px;
7
+ border-style: none;
8
+ box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
9
+ box-sizing: border-box;
10
+ color: #3c4043;
11
+ cursor: pointer;
12
+ display: inline-flex;
13
+ fill: currentcolor;
14
+ font-family: "Google Sans",Roboto,Arial,sans-serif;
15
+ font-size: 14px;
16
+ font-weight: 500;
17
+ height: 48px;
18
+ justify-content: center;
19
+ letter-spacing: .25px;
20
+ line-height: normal;
21
+ max-width: 100%;
22
+ overflow: visible;
23
+ padding: 2px 24px;
24
+ position: relative;
25
+ text-align: center;
26
+ text-transform: none;
27
+ transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
28
+ user-select: none;
29
+ -webkit-user-select: none;
30
+ touch-action: manipulation;
31
+ width: auto;
32
+ will-change: transform,opacity;
33
+ z-index: 0;
34
+ }
35
+
36
+ .button-17:hover {
37
+ background: #F6F9FE;
38
+ color: #174ea6;
39
+ }
40
+
41
+ .button-17:active {
42
+ box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
43
+ outline: none;
44
+ }
45
+
46
+ .button-17:focus {
47
+ outline: none;
48
+ border: 2px solid #4285f4;
49
+ }
50
+
51
+ .button-17:not(:disabled) {
52
+ box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
53
+ }
54
+
55
+ .button-17:not(:disabled):hover {
56
+ box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
57
+ }
58
+
59
+ .button-17:not(:disabled):focus {
60
+ box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
61
+ }
62
+
63
+ .button-17:not(:disabled):active {
64
+ box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
65
+ }
66
+
67
+ .button-17:disabled {
68
+ box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
69
+ }
@@ -0,0 +1,89 @@
1
+ @import url("https://fonts.googleapis.com/css?family=Lato");
2
+ /* * {
3
+ position: relative;
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ font-family: "Lato", sans-serif;
8
+ }
9
+
10
+ body {
11
+ height: 100vh;
12
+ display: flex;
13
+ flex-direction: column;
14
+ justify-content: center;
15
+ align-items: center;
16
+ background: linear-gradient(to bottom right, #EEE, #AAA);
17
+ } */
18
+
19
+ /* .center {
20
+ border: 5px solid #FFFF00;
21
+ text-align: center;
22
+ }
23
+ */
24
+ h1 {
25
+ margin: 40px 0 20px;
26
+ }
27
+
28
+ .lock {
29
+ border-radius: 5px;
30
+ width: 55px;
31
+ height: 45px;
32
+ background-color: #333;
33
+ animation: dip 1s;
34
+ animation-delay: 1.5s;
35
+ }
36
+ .lock::before, .lock::after {
37
+ content: "";
38
+ position: absolute;
39
+ border-left: 5px solid #333;
40
+ height: 20px;
41
+ width: 15px;
42
+ left: calc(50% - 12.5px);
43
+ }
44
+ .lock::before {
45
+ top: -30px;
46
+ border: 5px solid #333;
47
+ border-bottom-color: transparent;
48
+ border-radius: 15px 15px 0 0;
49
+ height: 30px;
50
+ animation: lock 2s, spin 2s;
51
+ }
52
+ .lock::after {
53
+ top: -10px;
54
+ border-right: 5px solid transparent;
55
+ animation: spin 2s;
56
+ }
57
+
58
+ @keyframes lock {
59
+ 0% {
60
+ top: -45px;
61
+ }
62
+ 65% {
63
+ top: -45px;
64
+ }
65
+ 100% {
66
+ top: -30px;
67
+ }
68
+ }
69
+ @keyframes spin {
70
+ 0% {
71
+ transform: scaleX(-1);
72
+ left: calc(50% - 30px);
73
+ }
74
+ 65% {
75
+ transform: scaleX(1);
76
+ left: calc(50% - 12.5px);
77
+ }
78
+ }
79
+ @keyframes dip {
80
+ 0% {
81
+ transform: translateY(0px);
82
+ }
83
+ 50% {
84
+ transform: translateY(10px);
85
+ }
86
+ 100% {
87
+ transform: translateY(0px);
88
+ }
89
+ }
File without changes
@@ -0,0 +1,44 @@
1
+ /* body {
2
+ background-color: #17c0eb;
3
+ font-family: Nunito Sans;
4
+ } */
5
+ .btn {
6
+ background-color: #17c0eb;
7
+ width: 100%;
8
+ color: #fff;
9
+ padding: 10px;
10
+ font-size: 18px;
11
+ }
12
+ /*.btn:hover {
13
+ background-color: #2d3436;
14
+ color: #fff;
15
+ } */
16
+ input {
17
+ height: 50px !important;
18
+ }
19
+ .form-control:focus {
20
+ border-color: #18dcff;
21
+ box-shadow: none;
22
+ }
23
+ h3 {
24
+ color: #17c0eb;
25
+ font-size: 36px;
26
+ }
27
+ .cw {
28
+ width: 35%;
29
+ }
30
+ @media(max-width: 992px) {
31
+ .cw {
32
+ width: 60%;
33
+ }
34
+ }
35
+ @media(max-width: 768px) {
36
+ .cw {
37
+ width: 80%;
38
+ }
39
+ }
40
+ @media(max-width: 492px) {
41
+ .cw {
42
+ width: 90%;
43
+ }
44
+ }