├── 1.css
├── carousel.html
└── front.html


/1.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   padding: 0;
  3 |   margin: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 |   display: grid;
  9 |   place-items: center;
 10 |   position: relative;
 11 |   /* height: 100vh; */
 12 |   /* background-color: #9a99f2; */
 13 |   background: #212534;
 14 | }
 15 | 
 16 | .swiper-container {
 17 |   border-radius: 5px;
 18 |   width: 70vw;
 19 |   overflow: hidden;
 20 |   height: fit-content;
 21 |   height: fit-content;
 22 |   font-size: 50px;
 23 |   position: relative;
 24 |   padding-bottom: 50px;
 25 |   font-family: sans-serif;
 26 | }
 27 | 
 28 | .swiper-slide {
 29 |   width: auto;
 30 |   height: fit-content;
 31 |   display: flex;
 32 |   height: auto;
 33 |   border-radius: 5px;
 34 |   overflow: hidden;
 35 |   align-items: flex-start;
 36 |   flex-direction: column;
 37 |   padding: 0px;
 38 |   font-family: Nunito;
 39 |   /* background-color: white; */
 40 | }
 41 | 
 42 | .swiper-slide .ImgHolder {
 43 |   /* background-color: #4361ee; */
 44 |   display: flex;
 45 |   width: 100%;
 46 |   height: auto;
 47 |   padding: 30px;
 48 |   border-bottom-left-radius: 20px;
 49 | }
 50 | 
 51 | .ContentHolder::before {
 52 |   /* background-color: #4361ee; */
 53 |   content: "";
 54 |   width: 50px;
 55 |   height: 50px;
 56 |   position: absolute;
 57 |   top: -5px;
 58 |   z-index: -1;
 59 |   right: 0px;
 60 | }
 61 | 
 62 | .ContentHolder {
 63 |   position: relative;
 64 |   padding: 10px;
 65 |   background-color: white;
 66 |   /* border-top-right-radius: 20px; */
 67 |   border-radius: 20px;
 68 |   margin: 10px;
 69 |   width: 90%;
 70 | }
 71 | 
 72 | .swiper-pagination-bullet {
 73 |   background-color: white;
 74 |   opacity: 1;
 75 |   border: 1px solid #4361ee;
 76 | }
 77 | 
 78 | .swiper-pagination-bullet-active {
 79 |   background-color: #4361ee;
 80 | }
 81 | 
 82 | .swiper-button {
 83 |   border: 1px solid white;
 84 | }
 85 | 
 86 | .swiper-slide img {
 87 |   width: 100px;
 88 |   height: 100px;
 89 |   /* border-radius: 50%; */
 90 |   margin: auto;
 91 |   object-fit: cover;
 92 |   /* border: 3px solid #4361ee; */
 93 |   /* outline: 2px solid white; */
 94 | }
 95 | 
 96 | .swiper-slide h3 {
 97 |   font-size: 1.1rem;
 98 |   text-align: center;
 99 |   font-weight: bold;
100 | }
101 | 
102 | .swiper-slide p {
103 |   font-size: 0.9rem;
104 |   padding: 5px;
105 | }
106 | 
107 | @media (max-width: 638px) {
108 |   .swiper-container {
109 |     width: 100%;
110 |   }
111 | }
112 | 
113 | @media (max-width: 500px) {
114 |   .swiper-container {
115 |     width: 90vw;
116 |   }
117 | }
118 | 
119 | @media (max-width: 300px) {
120 |   .swiper-container {
121 |     width: 100%;
122 |   }
123 | 
124 |   .swiper-slide {
125 |     border-radius: 0px;
126 |   }
127 | 
128 |   .swiper-container .ImgHolder {
129 |     border-radius: 0px;
130 |   }
131 |   .ContentHolder {
132 |     border-radius: 0px;
133 |   }
134 | }
135 | 
136 | .header {
137 |   margin: 0px 0px 40px;
138 |   text-align: center;
139 | }
140 | .title {
141 |   color: white;
142 |   font-size: 40px;
143 | }
144 | .logo-img {
145 |   width: 150px;
146 |   height: 150px;
147 | }
148 | 
149 | @property --rotate {
150 |   syntax: "<angle>";
151 |   initial-value: 132deg;
152 |   inherits: false;
153 | }
154 | 
155 | .card {
156 |   width: var(--card-width);
157 |   height: var(--card-height);
158 |   padding: 3px;
159 |   position: relative;
160 |   border-radius: 20px;
161 |   justify-content: center;
162 |   align-items: center;
163 |   text-align: center;
164 |   display: flex;
165 |   font-size: 1.5em;
166 |   color: rgb(88 199 250 / 100%);
167 |   /* color: rgb(88 199 250 / 0%); */
168 |   cursor: pointer;
169 |   font-family: cursive;
170 | }
171 | 
172 | .card:hover {
173 |   color: rgb(88 199 250 / 100%);
174 |   transition: color 1s;
175 |   border: 2px solid white;
176 | }
177 | .card:hover:before,
178 | .card:hover:after {
179 |   animation: none;
180 |   /* opacity: 0; */
181 | }
182 | 
183 | .card::before {
184 |   content: "";
185 |   width: 104%;
186 |   height: 102%;
187 |   border-radius: 8px;
188 |   background-image: linear-gradient(
189 |     var(--rotate),
190 |     #5ddcff,
191 |     #3c67e3 43%,
192 |     #4e00c2
193 |   );
194 |   position: absolute;
195 |   z-index: -1;
196 |   top: -1%;
197 |   left: -2%;
198 |   animation: spin 3s linear infinite;
199 | }
200 | 
201 | .card::after {
202 |   position: absolute;
203 |   content: "";
204 |   top: calc(var(--card-height) / 6);
205 |   left: 0;
206 |   right: 0;
207 |   z-index: -1;
208 |   height: 100%;
209 |   width: 100%;
210 |   margin: 0 auto;
211 |   transform: scale(0.8);
212 |   filter: blur(calc(var(--card-height) / 6));
213 |   /* background-image: linear-gradient(
214 |           var(--rotate),
215 |           #5ddcff,
216 |           #3c67e3 43%,
217 |           #4e00c2
218 |         ); */
219 |   opacity: 1;
220 |   transition: opacity 0.5s;
221 |   animation: spin 5s linear infinite;
222 | }
223 | 
224 | @keyframes spin {
225 |   0% {
226 |     --rotate: 0deg;
227 |   }
228 |   100% {
229 |     --rotate: 360deg;
230 |   }
231 | }
232 | 
233 | a {
234 |   color: #212534;
235 |   text-decoration: none;
236 |   font-family: sans-serif;
237 |   font-weight: bold;
238 |   margin-top: 2rem;
239 | }
240 | 
241 | html {
242 |   width: 100%;
243 |   height: 100%;
244 | }
245 | body {
246 |   /* background: aqua; */
247 |   text-align: center;
248 |   transition: background 5s ease-in-out;
249 | }
250 | button:focus,
251 | input:focus {
252 |   outline: none;
253 | }
254 | .main-app {
255 |   /* top: 50%; */
256 |   /* transform: translateY(50vh); */
257 |   display: flex;
258 |   justify-content: center;
259 |   margin: 10px;
260 | }
261 | .submit {
262 |   background: transparent;
263 |   border: none;
264 |   font-size: 30px;
265 |   transition: 0.5s ease-in-out;
266 |   margin-left: 5px;
267 |   color: cadetblue;
268 | }
269 | .search-bar {
270 |   background: transparent;
271 |   width: 0%;
272 |   height: 30px;
273 |   border: none;
274 |   font-size: 15px;
275 |   color: cadetblue;
276 |   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
277 |   border-bottom: 2px solid cadetblue;
278 |   transition: width 0.5s ease-in-out, padding 0.2s ease-in-out;
279 |   font-weight: 800;
280 |   text-align: center;
281 | }
282 | .icon-img {
283 |   border: 0px !important;
284 |   width: 30px !important;
285 |   height: 30px !important;
286 |   border-radius: 0px !important;
287 | }
288 | .submit-btn {
289 |   background: none;
290 |   border: none;
291 |   margin: 20px 0px;
292 |   padding: 10px;
293 | }
294 | .submit-btn:hover {
295 |   cursor: pointer;
296 | }
297 | .send-img {
298 |   width: 50px !important;
299 |   height: 50px !important;
300 |   opacity: 0.7;
301 | }
302 | .send-img:hover {
303 |   opacity: 1;
304 | }
305 | 


--------------------------------------------------------------------------------
/carousel.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <title>Document</title>
  9 |     <style>
 10 |         html,
 11 |         body {
 12 |             margin: 0px;
 13 |             padding: 0px;
 14 | 
 15 |         }
 16 | 
 17 |         .carousel {
 18 |             position: relative;
 19 |             box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
 20 |             /* margin-top: 26px; */
 21 |         }
 22 | 
 23 |         .carousel-inner {
 24 |             position: relative;
 25 |             overflow: hidden;
 26 |             width: 100%;
 27 |         }
 28 | 
 29 |         .carousel-open:checked+.carousel-item {
 30 |             position: static;
 31 |             opacity: 100;
 32 |         }
 33 | 
 34 |         .carousel-item {
 35 |             position: absolute;
 36 |             opacity: 0;
 37 |             -webkit-transition: opacity 0.6s ease-out;
 38 |             transition: opacity 0.6s ease-out;
 39 |         }
 40 | 
 41 |         .carousel-item img {
 42 |             display: block;
 43 |             height: auto;
 44 |             max-width: 100%;
 45 |         }
 46 | 
 47 |         .carousel-control {
 48 |             background: rgba(0, 0, 0, 0.28);
 49 |             border-radius: 50%;
 50 |             color: #fff;
 51 |             cursor: pointer;
 52 |             display: none;
 53 |             font-size: 40px;
 54 |             height: 40px;
 55 |             line-height: 35px;
 56 |             position: absolute;
 57 |             top: 50%;
 58 |             -webkit-transform: translate(0, -50%);
 59 |             cursor: pointer;
 60 |             -ms-transform: translate(0, -50%);
 61 |             transform: translate(0, -50%);
 62 |             text-align: center;
 63 |             width: 40px;
 64 |             z-index: 10;
 65 |         }
 66 | 
 67 |         .carousel-control.prev {
 68 |             left: 2%;
 69 |         }
 70 | 
 71 |         .carousel-control.next {
 72 |             right: 2%;
 73 |         }
 74 | 
 75 |         .carousel-control:hover {
 76 |             background: rgba(0, 0, 0, 0.8);
 77 |             color: #aaaaaa;
 78 |         }
 79 | 
 80 |         #carousel-1:checked~.control-1,
 81 |         #carousel-2:checked~.control-2,
 82 |         #carousel-3:checked~.control-3 {
 83 |             display: block;
 84 |         }
 85 | 
 86 |         .carousel-indicators {
 87 |             list-style: none;
 88 |             margin: 0;
 89 |             padding: 0;
 90 |             position: absolute;
 91 |             bottom: 2%;
 92 |             left: 0;
 93 |             right: 0;
 94 |             text-align: center;
 95 |             z-index: 10;
 96 |         }
 97 | 
 98 |         .carousel-indicators li {
 99 |             display: inline-block;
100 |             margin: 0 5px;
101 |         }
102 | 
103 |         .carousel-bullet {
104 |             color: #fff;
105 |             cursor: pointer;
106 |             display: block;
107 |             font-size: 35px;
108 |         }
109 | 
110 |         .carousel-bullet:hover {
111 |             color: #aaaaaa;
112 |         }
113 | 
114 |         #carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
115 |         #carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
116 |         #carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
117 |             color: #428bca;
118 |         }
119 | 
120 |         #title {
121 |             width: 100%;
122 |             position: absolute;
123 |             padding: 0px;
124 |             margin: 0px auto;
125 |             text-align: center;
126 |             font-size: 27px;
127 |             color: rgba(255, 255, 255, 1);
128 |             font-family: 'Open Sans', sans-serif;
129 |             z-index: 9999;
130 |             text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
131 |         }
132 | 
133 | 
134 | 
135 | 
136 |         h1 {
137 |             position: absolute;
138 |             margin: 0;
139 |             font-size: 50px;
140 |             color: #fff;
141 |             z-index: 2;
142 |             line-height: 50px;
143 |         }
144 | 
145 |         legend {
146 |             padding: 10px;
147 |             font-family: Roboto, Arial, sans-serif;
148 |             font-size: 18px;
149 |             color: #fff;
150 |             background-color: #006622;
151 |         }
152 | 
153 |         textarea {
154 |             width: calc(100% - 12px);
155 |             padding: 5px;
156 |         }
157 | 
158 |         .testbox {
159 |             display: flex;
160 |             justify-content: center;
161 |             align-items: center;
162 |             height: inherit;
163 |             padding: 20px;
164 |         }
165 | 
166 |         form {
167 |             width: 80%;
168 |             padding: 20px;
169 |             border-radius: 6px;
170 |             background: #fff;
171 |             box-shadow: 0 0 8px #006622;
172 |         }
173 | 
174 |         .banner {
175 |             position: relative;
176 |             height: 250px;
177 |             background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk8nI5qLtiiNNm618kGV1Txf29luSvA5OVtA&usqp=CAU");
178 |             background-size: cover;
179 |             display: flex;
180 |             justify-content: center;
181 |             align-items: center;
182 |             text-align: center;
183 |         }
184 | 
185 |         .banner::after {
186 |             content: "";
187 |             background-color: rgba(0, 0, 0, 0.4);
188 |             position: absolute;
189 |             width: 100%;
190 |             height: 100%;
191 |         }
192 | 
193 |         input,
194 |         select,
195 |         textarea {
196 |             margin-bottom: 10px;
197 |             border: 1px solid #ccc;
198 |             border-radius: 3px;
199 |         }
200 | 
201 |         input {
202 |             width: calc(100% - 10px);
203 |             padding: 5px;
204 |         }
205 | 
206 |         input[type="date"] {
207 |             padding: 4px 5px;
208 |         }
209 | 
210 |         textarea {
211 |             width: calc(100% - 12px);
212 |             padding: 5px;
213 |         }
214 | 
215 |         .item:hover p,
216 |         .item:hover i,
217 |         .question:hover p,
218 |         .question label:hover,
219 |         input:hover::placeholder {
220 |             color: #006622;
221 |         }
222 | 
223 |         .item input:hover,
224 |         .item select:hover,
225 |         .item textarea:hover {
226 |             border: 1px solid transparent;
227 |             box-shadow: 0 0 3px 0 #006622;
228 |             color: #006622;
229 |         }
230 | 
231 |         .item {
232 |             position: relative;
233 |             margin: 10px 0;
234 |         }
235 | 
236 |         .item span {
237 |             color: red;
238 |         }
239 | 
240 |         input[type="date"]::-webkit-inner-spin-button {
241 |             display: none;
242 |         }
243 | 
244 |         .item i,
245 |         input[type="date"]::-webkit-calendar-picker-indicator {
246 |             position: absolute;
247 |             font-size: 20px;
248 |             color: #00b33c;
249 |         }
250 | 
251 |         .item i {
252 |             right: 1%;
253 |             top: 30px;
254 |             z-index: 1;
255 |         }
256 | 
257 |         .week {
258 |             display: flex;
259 |             justify-content: space-between;
260 |         }
261 | 
262 |         .columns {
263 |             display: flex;
264 |             justify-content: space-between;
265 |             flex-direction: row;
266 |             flex-wrap: wrap;
267 |         }
268 | 
269 |         .columns div {
270 |             width: 48%;
271 |         }
272 | 
273 |         [type="date"]::-webkit-calendar-picker-indicator {
274 |             right: 1%;
275 |             z-index: 2;
276 |             opacity: 0;
277 |             cursor: pointer;
278 |         }
279 | 
280 |         input[type=radio],
281 |         input[type=checkbox] {
282 |             display: none;
283 |         }
284 | 
285 |         label.radio {
286 |             position: relative;
287 |             display: inline-block;
288 |             margin: 5px 20px 15px 0;
289 |             cursor: pointer;
290 |         }
291 | 
292 |         .question span {
293 |             margin-left: 30px;
294 |         }
295 | 
296 |         .question-answer label {
297 |             display: block;
298 |         }
299 | 
300 |         label.radio:before {
301 |             content: "";
302 |             position: absolute;
303 |             left: 0;
304 |             width: 17px;
305 |             height: 17px;
306 |             border-radius: 50%;
307 |             border: 2px solid #ccc;
308 |         }
309 | 
310 |         input[type=radio]:checked+label:before,
311 |         label.radio:hover:before {
312 |             border: 2px solid #006622;
313 |         }
314 | 
315 |         label.radio:after {
316 |             content: "";
317 |             position: absolute;
318 |             top: 6px;
319 |             left: 5px;
320 |             width: 8px;
321 |             height: 4px;
322 |             border: 3px solid #006622;
323 |             border-top: none;
324 |             border-right: none;
325 |             transform: rotate(-45deg);
326 |             opacity: 0;
327 |         }
328 | 
329 |         input[type=radio]:checked+label:after {
330 |             opacity: 1;
331 |         }
332 | 
333 |         .flax {
334 |             display: flex;
335 |             justify-content: space-around;
336 |         }
337 | 
338 |         .btn-block {
339 |             margin-top: 10px;
340 |             text-align: center;
341 |         }
342 | 
343 |         button {
344 |             width: 150px;
345 |             padding: 10px;
346 |             border: none;
347 |             border-radius: 5px;
348 |             background: #006622;
349 |             font-size: 16px;
350 |             color: #fff;
351 |             cursor: pointer;
352 |         }
353 | 
354 |         button:hover {
355 |             background: #00b33c;
356 |         }
357 | 
358 |         @media (min-width: 568px) {
359 | 
360 |             .name-item,
361 |             .city-item {
362 |                 display: flex;
363 |                 flex-wrap: wrap;
364 |                 justify-content: space-between;
365 |             }
366 | 
367 |             .name-item input,
368 |             .name-item div {
369 |                 width: calc(50% - 20px);
370 |             }
371 | 
372 |             .name-item div input {
373 |                 width: 97%;
374 |             }
375 | 
376 |             .name-item div label {
377 |                 display: block;
378 |                 padding-bottom: 5px;
379 |             }
380 |         }
381 | 
382 |         @media (max-width: 768px) {
383 |             h1 {
384 |                 font-size: 30px;
385 |             }
386 |         }
387 | 
388 | 
389 |         @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap");
390 | 
391 |         :root {
392 |             --yellow: #ffdd40;
393 |             --dark: #2f313a;
394 |             --deg: -86deg;
395 |             --trans: all 0.4s ease 0s;
396 |         }
397 | 
398 |         body {
399 |             margin: 0;
400 |             padding: 0;
401 |             overflow-x: hidden;
402 |             display: flex;
403 |             justify-content: center;
404 |             font-family: "Lato", Arial, Helvetica, serif;
405 |             background: linear-gradient(90deg, #131417, var(--dark) 35% 65%, #131417);
406 |             font-size: 1em;
407 |         }
408 | 
409 |         body *,
410 |         body *:before,
411 |         body *:after {
412 |             box-sizing: border-box;
413 |         }
414 | 
415 |         .content {
416 |             width: 90vmin;
417 |         }
418 | 
419 |         h2 {
420 |             text-align: center;
421 |         }
422 | 
423 |         .team {
424 |             padding: 2em 0 2em 2.5em;
425 |             margin: 0;
426 |         }
427 | 
428 |         .member {
429 |             display: inline-block;
430 |             width: 100%;
431 |             margin: 1.5em 0 0.5em;
432 |             padding: 0.73em;
433 |             background: linear-gradient(83deg,
434 |                     var(--yellow) 0 97%,
435 |                     #fff0 calc(97% + 1px) 100%);
436 |             position: relative;
437 |             list-style: none;
438 |             display: inline-block;
439 |             transform: scale(0.85);
440 |             transition: var(--trans);
441 |         }
442 | 
443 |         .member:nth-of-type(even) {
444 |             text-align: right;
445 |             background: linear-gradient(-83deg,
446 |                     var(--yellow) 0 97%,
447 |                     #fff0 calc(97% + 1px) 100%);
448 |         }
449 | 
450 |         .thumb {
451 |             width: 13vmin;
452 |             height: 13vmin;
453 |             float: left;
454 |             margin-right: 1.25em;
455 |             background: linear-gradient(var(--deg),
456 |                     var(--dark) 0 70%,
457 |                     var(--yellow) 0% 100%);
458 |             transform: rotate(-4deg);
459 |             transition: var(--trans);
460 |             border-radius: 0.25em;
461 |             overflow: hidden;
462 |             margin-left: -3em;
463 |             padding: 0.5em;
464 |         }
465 | 
466 |         .member:nth-of-type(even) .thumb {
467 |             --deg: 86deg;
468 |             float: right;
469 |             margin-left: 2em;
470 |             margin-right: -3em;
471 |             transform: rotate(4deg);
472 |         }
473 | 
474 |         .thumb img {
475 |             width: 100%;
476 |             height: 100%;
477 |             border-radius: 0.25em;
478 |             filter: grayscale(1);
479 |             background: var(--dark);
480 |         }
481 | 
482 |         .member:hover {
483 |             transform: scale(1);
484 |             transition: var(--trans);
485 |             filter: drop-shadow(0px 20px 10px #0008);
486 |         }
487 | 
488 |         .member:hover .thumb {
489 |             padding: 0.1em;
490 |             transition: var(--trans);
491 |             transform: rotate(-1deg);
492 |             --deg: -89deg;
493 |         }
494 | 
495 |         .member:nth-of-type(even):hover .thumb {
496 |             --deg: 91deg;
497 |         }
498 | 
499 |         .member:hover .thumb img {
500 |             filter: none;
501 |             transition: var(--trans);
502 |         }
503 | 
504 |         .description {
505 |             padding-top: 1vmin;
506 |         }
507 | 
508 |         .description p {
509 |             padding: 0 2em;
510 |             margin-bottom: 1em;
511 |         }
512 | 
513 |         h3 {
514 |             background: linear-gradient(182deg, #fff0 60%, var(--dark) 0 100%);
515 |             display: inline;
516 |             transform: rotate(-2deg);
517 |             position: absolute;
518 |             margin: 0;
519 |             margin-top: -2.25em;
520 |             left: 9vmin;
521 |             padding: 0.5em 0.75em;
522 |             color: var(--yellow);
523 |             border-radius: 0.25em;
524 |             font-size: 1.35em;
525 |             transform-origin: left bottom;
526 |         }
527 | 
528 |         .member:nth-of-type(even) h3 {
529 |             left: inherit;
530 |             right: 9vmin;
531 |             transform: rotate(2deg);
532 |             transform-origin: right bottom;
533 |             background: linear-gradient(-182deg, #fff0 60%, var(--dark) 0 100%);
534 |         }
535 | 
536 |         .member:hover h3 {
537 |             transition: var(--trans);
538 |             transform: rotate(0deg);
539 |             background: linear-gradient(180deg, #fff0 59%, var(--dark) 0 100%);
540 |         }
541 | 
542 |         .co-funder:after {
543 |             content: "SOS";
544 |             font-size: 0.75em;
545 |             position: absolute;
546 |             top: -1.5em;
547 |             background: var(--yellow);
548 |             right: 4em;
549 |             transform: rotate(3deg);
550 |             padding: 0.35em 0.75em 0.5em;
551 |             border-radius: 0.25em;
552 |             color: var(--dark);
553 |             font-weight: bold;
554 |         }
555 | 
556 |         .co-funder:nth-of-type(even):after {
557 |             right: inherit;
558 |             left: 4em;
559 |             transform: rotate(-3deg);
560 |         }
561 | 
562 |         .description p a {
563 |             display: inline-block;
564 |             margin: 0.5em 0 0 0;
565 |             background: var(--dark);
566 |             color: var(--yellow);
567 |             padding: 0.1em 0.5em 0.35em;
568 |             border-radius: 0.5em;
569 |             text-decoration: none;
570 |             transition: var(--trans);
571 |         }
572 | 
573 |         .description p a:hover {
574 |             transition: var(--trans);
575 |             color: var(--dark);
576 |             background: var(--yellow);
577 |             font-weight: bold;
578 |         }
579 | 
580 |         .description p a img {
581 |             float: left;
582 |             width: 22px;
583 |             filter: invert(1);
584 |             border-radius: 0.15em;
585 |             padding: 2px;
586 |             background: #fff;
587 |             margin-right: 2px;
588 |         }
589 |     </style>
590 | </head>
591 | 
592 | <body>
593 |     <div class="carousel">
594 |         <div class="carousel-inner">
595 |             <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden=""
596 |                 checked="checked">
597 |             <div class="carousel-item"
598 |                 style="background-size: cover; background-image:url('data:image/jpeg;base64,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'); width: 100vw; height : 100vh">
599 |                 <div class="testbox">
600 |                     <form>
601 |                         <div class="banner">
602 |                             <h1>Traveler's Emergency Info</h1>
603 |                         </div>
604 |                         <br />
605 |                         <fieldset>
606 |                             <legend>Details Info</legend>
607 |                             <div class="columns">
608 |                                 <div class="item">
609 |                                     <label for="fname">Country<span>*</span></label>
610 |                                     <input id="fname" type="text" name="fname" />
611 |                                 </div>
612 |                                 <div class="item">
613 |                                     <label for="lname"> City<span>*</span></label>
614 |                                     <input id="lname" type="text" name="lname" />
615 |                                 </div>
616 |                                 <div class="item">
617 |                                     <label for="checkindate">Start Date <span>*</span></label>
618 |                                     <input id="checkindate" type="date" name="checkindate" />
619 |                                     <i class="fas fa-calendar-alt"></i>
620 |                                 </div>
621 |                                 <div class="item">
622 |                                     <label for="checkoutdate">End Date <span>*</span></label>
623 |                                     <input id="checkoutdate" type="date" name="checkoutdate" />
624 |                                     <i class="fas fa-calendar-alt"></i>
625 |                                 </div>
626 |                                 <div class="item">
627 |                                     <label for="address">Accommodation Address<span>*</span></label>
628 |                                     <input id="address" type="text" name="address" />
629 |                                 </div>
630 |                                 <div class="item">
631 |                                     <label for="contact">Emergency Contact<span>*</span></label>
632 |                                     <input id="contact" type="text" name="contact" required />
633 |                                 </div>
634 |                                 <div class="item">
635 |                                     <label for="health">medical condition,allergies<span>*</span></label>
636 |                                     <input id="health" type="text" name="health" />
637 |                                 </div>
638 |                                 <div class="item">
639 |                                     <label for="Passport number ">Passport number <span>*</span></label>
640 |                                     <input id="Passport number " type="text" name="Passport number " />
641 |                                 </div>
642 | 
643 | 
644 |                         </fieldset>
645 |                         <div style="display:flex; justify-content: center; width:100%">
646 |                             <button>Submit</button>
647 |                         </div>
648 |                         <br />
649 | 
650 |                     </form>
651 |                 </div>
652 |             </div>
653 |             <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
654 |             <div class="carousel-item"
655 |                 style="background-color: rgb(65, 192, 139); width: 100vw; height : 100vh; display: flex; justify-content: center;">
656 |                 <div class="content">
657 |                     <ul class="team">
658 |                         <li class="member">
659 |                             <div class="thumb"><img
660 |                                     src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkGMpScQddGaPT2B9SJGlxTeh-cwuAlkpXOJsbk5k&s">
661 |                             </div>
662 |                             <div class="description">
663 |                                 <h3>Police</h3>
664 |                                 <p>Call the police, the safest backers<br><a href="#">+16184621220<image
665 |                                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuPh70alpTRkIVEVjE5dlDdWqmL_CdnXRcEA&usqp=CAU">
666 |                                         </image></a></p>
667 |                             </div>
668 |                         </li>
669 |                         <li class="member co-funder">
670 |                             <div class="thumb"><img
671 |                                     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAulBMVEX////r7e+vvcPzUB7lShgotfXN19tEWmSPo60CmePzThnyXTlUbnqyub7iUSjs5ebkVjPyWC7P0tXE1NwsneM8uPTf6e+gsLg6U13V3+IyTFf0+v5OaXW1w8iAlJ7y8/TL3+VLvvbyaUnya1Ds3t5ug41fd4LmQQB3i5TP7PzB3/J2x/Or2PIkpukAleNVq+KNwOBssuGhxt7vhG766uf1ycDkLQDroJTzrqHfeWTRxcU+S1SZo6gkQ0+2tKCDAAAEu0lEQVR4nO2Za3ejNhCGMbERjknSdexIsBKuuwvxXuy2272X/P+/VSQuFkICCfDxOV29H5z4hJn30Yw0ENtxrKysrKysrKysrKysrKysrKz+N3pd6zr+7/aLbal3VwHYL2ptr1GD11sLYAGuDbDf1tobAuxmU+iJ02y22+20/Sexl0qPYZr1j0C4pL8WwoUB+gkuDdBLcHGAPgKdFA+l+q98EqRBoOP/x4rpTQ/B7j03jYqR9KGfQAfg1S3Tqq8E3DNBPZZZEcYD3OTqBXjatgEW+z6CSwMsPtBR19GEiwMsPu46S3B5gMWsswQmAD3XqQDoUQiVNeh0LvS2AnjbPQ9UAIuPs9DzVDXoAijP/+qm1Kp7HigBjo+e54UDAG6K839bAdx2zwMFwHF5+jOvgKdoQjfAjUSGAMtcp78owVUANkumk7oJFwU4Lkud/vZUTbgkwPKsDQWQNqEbYMwm3Cx5MQBZE7oAxhzD43LZBpA1oQtg+CAS7SsASRO6ACoO41Hc9q8A2k0wAdC8GUnsa4B2EyYHkNqfAVpNmBpgI/c/A4hNmBZAsXweQGyCHoDeQ+nxpPTnADxzAM3H8vDTRqlPHEBoCqD3jwm93z0q5XkqAh0ADT15JuIf0KbxN7JvFuFhAq2H6KEEWI3Xb4N0/89nBnA7VvOhep5/oQCyRw4DDban+vptNMAo/5zg+ziAkfZUn0cATGA/f/42eBNO4j9/fuO8Gqb7qeQMGiLkbjI5xkPU84g7ocwBHqe0zwFYSX9v3SvC8+vQ5RNyflVdQYjDdsKPn4KLn6S5Ep8MtScujIscMXSlUSRk91GnOA33PAFMMA6YME4gX3395ftcjtSX+Zc3cqc8jz/OXTiUkWV84oXmy0+EHO1rwibA/LkCcBk5pq+4/NUNDZsPq7VXOQIMxfCZAsBlnsEBQteF/iFgb2FocvSIH3A5YJED+EKGnRyAsNgDrNeS9wMA1LWV22LLP1RrJvmWCjAAsHmRAoD1P+bsiA9yBSb+tP+YXzCJJTnkAJDGxs3lHvJgFOtvQF/0z/sQ8zmKH/UeAIX+ZRstpfVv5IO+n+Z/xrr+rstyNP2LHKB8lwJeFUBEAQiFh0KsT5uAMl1/WsRAnoONAwiQGiDDAjyLZfiJZg9ILM+R5AC0tiRt+jcB8i2Is1asH+cxgS4A7QA/+aocoMhBAOgASJvVK2NZ/bQ3QUcOtgmEAuAGAG2fJNYUIFXkkAEkaoBzLAuGLSsNACFHGwBBHiBMOQAudnALhBwygJmDOQC6Cf12rNEmTAJpDjrOUiICRJnjZOjcAr8+QnwsPYboYH4MGzmqY9gAiGL6+UAxGBiAW22CRux5iOioHkTtHFkTAEWw+IQiBgihF68exUSIHTCKEzFHQg3ZnyNUCKSZ5IPjNbuRNGNp9yLSvlYlliMWcuTrRnc60XkHA3AQ/VGq7+849JaO2zkSreAZff4AabP+IOr89lmSA7dzINW3ZoLCqBhQbAVxceeM1ib+juMVmyyNuRwv2jnWSBiWCBj6y3JEiq/MZArTqDErUs3a8ZqNy0FwVCwhPy1Ya++2dYdRlSPCrnH4OkvRS4SSzLj6zRzRS5RkBtW3srL6JfUfUYPeF7KCF58AAAAASUVORK5CYII=">
672 |                             </div>
673 |                             <div class="description">
674 |                                 <h3>ambulance</h3>
675 |                                 <p>Have you ever had a patient? Ambulance in 10 minutes!<br><a href="#">+16184621220
676 |                                         <image
677 |                                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuPh70alpTRkIVEVjE5dlDdWqmL_CdnXRcEA&usqp=CAU">
678 |                                         </image></a></p>
679 |                             </div>
680 |                         </li>
681 |                         <li class="member co-funder">
682 |                             <div class="thumb"><img
683 |                                     src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVbhYqT6OwGrP_q81S8HACXDlOGB83RbQqlw&usqp=CAU">
684 |                             </div>
685 |                             <div class="description">
686 |                                 <h3> fire department</h3>
687 |                                 <p>If there is a fire, call the fire engine as soon as possible<br><a
688 |                                         href="#">+16184621220<image
689 |                                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuPh70alpTRkIVEVjE5dlDdWqmL_CdnXRcEA&usqp=CAU">
690 |                                         </image></a></p>
691 |                             </div>
692 |                         </li>
693 |                         <li class="member co-funder">
694 |                             <div class="thumb"><img
695 |                                     src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBIVFRgVFRUZGRgYGBoYGBgVGRgYGBgYHBUZGRgYGhocIy4lHB4rIRoaJjgmKy8xNjU1GiQ7QDs0Py40NTEBDAwMEA8PHxIRHDslJCE6NjQ0NTExMTQ0PTE0NDQ0NDQ7MTE/Pzg0MTQ3NDE0MTQ0PzExNDE0NDQ0NDQ0MTE0NP/AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAQUBAAAAAAAAAAAAAAAABgECBAUHA//EAEkQAAIBAgIEBg8ECAUFAAAAAAABAgMRBBIGIVFSBTFBYXKRExUWIjIzNHGBkqGxsrPRFHPS8CMkNWKCwcLhB1NjoqNCQ4OT8f/EABoBAQEBAQEBAQAAAAAAAAAAAAABAgMEBgX/xAAnEQEBAAEDAwMEAwEAAAAAAAAAAQIDETESIUEEUVIUFZGhE0KxBf/aAAwDAQACEQMRAD8A7MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3MUuWt8xTP+6wPUqURUAAABYXnm3r4gK3K5jzcnusrfmAubLkzyzczL4PmsBeAAAKFQLZFBJ8xbm5gLsxXMWJvYHL91gXJl55J83pPUAAABRlSjAsKp/nrLbvYUzPdAv1/n/6Club89QA9AAAAAAAAAAAAAAAADyryajJrjSbXoR6njifAl0Ze5gcyhptjWk709a3H9SvdrjdtP1f7kYpvvV5l7i66PBlqZ9V7vq9H0mhdPG3Cd5El7tsbtp+r/clGhvDNbEqo6uXvXHLlVuNO99fMcyuief4aPVX88PdI1o55XOS15v8Aoem0cPT3LDGSzb/U6KgHtfOgAAAAAAAAAAAAAAAAKNlMwFwKXKgAUTKgAAABQ12K4WhHVHvnzeCvO/oBsjV4/hOmoyjF5m01q4ldW1v6GpxeMqT8KSUddop2Tt7/AEmJJ2V3qVr3fFbaBm8Bxw0KUKU4RvGKjmcY2lblez0m7jgaD1qnC3Rj9CH0MbSm3GFSE2uNQnGTXoTM/DYqcNcZar609afo9BNo115e6Rdr6P8Alw9WP0PWjhoRvljGN+PKkr+exgYThiEtUu9e3jj/AGNnGSaunfzDaJcreavABUAC3MBcClwBUFGwmBUAAAAAAAFsiliso3LXT52AsVsUVMdj52BVeYvMVVqe/H0yiYmK4apR1RkpPmat6X9ANoa7FcLQjqj3z5uL0v6GjxXCcp+FNW3U0l/f0mL2SO8utAZmKx85+E7LdWpf39Jjo8+yR3l1odkjvLrQGRmWu71XeqzvzWIVpzwo1OlSc7QyuU4623JuShNr/qjG3FtfMS3skd5daNJpJwPHExjKE4KcE0sz72UXryvZrXHr5duqxKgdPGKMovsn6SMZZasU+8bay8l3y6+S51PgfGdkownJpynGLbS1ZrNOST5LkAwOiWIlJRqSpQguOSkpya/dS/nYn9CNOEYwi4qMUoxV1qSVkWpGQz2w+LnB97L0PWn6DF7JHeXWh2SO8utGWkiwvDEJapLK9vHH+xs4yTV07raiFdkjvLrR74fHyh4M0ua6afoAmJYzVYXh2nLVJqL23Tj/AGM916b154+tH6ge1ilimRPXcrk5wK2KxLex87KxjYC8AAAAAAAAAADTdvY7j60bghaA0FTgCTbeeOtt+C+Vlvc/Lfj1M0nDWl+KpV6lOEaTjCeVZozbtZcbU17jC7u8XuUfUn+MuydUSjuflvx6mO5+W/HqZj8LaQV6WDoYiMYZ6koqalGTgrwnJ5UpXWuK5WR/u7xe5R9Sf4xsbpR3Py349THc/Lfj1MxNE9I6+JqThUjBRjByWSMk75orlk9WskHC+KlSoVKkLZoQlKOa7V1FtXSa1DY3aruflvx6mO5+W/HqZF+7vF7lH1J/jMzgbS/FVa9OnKNLLOajLLGadnsbmxsnVG87n5b8epjuflvx6mavSXSrEYfESpQjTcVGLTnGblrim9akvcavu7xe5R9Sf4xsvVEo7n5b8epjuflvx6mZujmPqV8PCpNRUpOV1BNR1TaWptviS5T24bxcqNCpUgk5QhmWZNq91xpNe8i7tZ3Py349THc/Lfj1Mi/d3i9yj6k/xmfwFpbiq2IhTnGmoybUnGM07ZW9Tc3y25C7J1Rue5+W/HqYej0t+Pqs1OkOluJoYidKEabjDLZzjNy1wjJ3amlxvYa3u7xe5R9Sf4xsdUdgwvC8YQhDK3ljGN7rXaKVzc0amaMZcWZJ286uc+4Axs62HhUmoqc1K6gmo6pyirJtviS5SfYHxcOhH4URWQAAAAAAAAC3MMwFwKFQKELRNCFoDkWlHldfpv3I11GN5LrNjpR5XX6b9yL8BhqeWMpJXlFuKc2lNqdtbt3vmNxzreaS/s3C9OHyqpCye6SYdPg6hdqGWcNUm3bvKis2lr4yHx4Pne14uSs5QT75LVxq1uXaSLUl/wAP42rS+7b/AN8CXaR+S1/up/CyOaEYXLiJJyi3kkmou7TzRevUSTSWNsLX+6n6O9YvK48OPG50Xj+s0n/qR95pjf6PRtiKK/fj7ysrtOfLJ9Gn8CNBCN2kb/TnyyfRp/AjTYaPG/QItdP0O8lh0qnxyPXSnySv0H70eWhi/VYeep8x9Zm6R0VLDVY8SlG173v3y5tTM3lZw42b3RGP6zSe2f8ATI1v2F3ffwyqWVSbdm9nFx7Tf6N4OUMTSzOMbTaSb1yai72NMsDTLyyr54fLiaelG7SJFpthf1mpO6Sahxt3lLItUV5rGiw0eN+gQrqWifklL+P5kzouB8XDoR+FHOtE/JKX8fzJnRcD4uHQj8KM3lucMgAoyKqCy7KqQFwLM351/QAWuaKZ0exSwBFQAKELRNCFoDkek/ldf7z+SL6c2oRThCUYxa76/FmbvfbfZzDSCN8bW5pt+xGMbjleUv0hnJ4CgnGLzTgmndJWp1LWtr1aiL4erUeZ2ipNRTmr5mnrXNyI3mkv7NwvTh8qqRqEbJCLkmWhlSXZ5ycIp5JXavdvNHn5+QkOksr4Wv8AdT17e9fGRPQXx8/u38cCV6R+S1/up/CyXlrHhyTDxvLzazd8AeU0enH3mpw0dV9ptuAPKaPTj7zXhjyrpz5ZPo0/gRrKcbJI22mcb42fRp/AjVki5cuj6GSthYc7qfMZlaR1JfZquVJNRuvOmrXMTQ7yWn0qnxyPbSrySv8Adv3ozeWpw5xRqPNrhBxbUsvfNKb1X4769fNqN3o/Vm8TTzqMu/bTd7xbi72tyecjWGjaPn1m40a8qo9P+mRrwxv3emmNSf2mqmouFoJXvqeSNpK3E9Zp4RskjYaWQvjqvM4P/jgYAi3l0rRPySl/H8yZ0XA+Lh0I/CjnWifklL+P5kzouB8XDoR+FGby3OGQUZUEV5ZlzlM6PYAedvzr+oPQAAAAAAFCFomhC0By/h+lL7TXdnrm+R7Ea/sct19TJNwzpjiKNepTjCm4wllTkp3tZcdpGF3d4rcperP8ZuWsWRncPU2+D8KrPVODat/p1CMdjluvqZOeFdIK1LCUcRGMHOpKKkmpZVeE5OyTvxxXKR/u8xW5S9Wf4xKWRl6DQarzumv0b409+BK9IYt4WulxulNf7WaXRXSStiakoTjBRjByTgpJ3zRXLJ7SWJGM8pO97NYzttHHY0pLVlfUzYcAwl9po6n4ceR7TqVmLMx9Tp/KfmL/ABZe36c30upv7XN2fgwWpPcRpuxy3X1M7DZizE9Tp/KfkullfH6aPQ9NYWF96fH05HtpPFvC1kuWH80bZowOGsXKjQqVYJOUI5kpXte647Gscpl3xu5ZtNq5aqct19TNno3CX2mlqfh7HuyPbu8xW5S9Wf4zYcB6XYivXhSlCmozdm4qd7ZW9V5HS2uck3avSek/tdZ2etw5H/lxNV2OW6+pkr4f0txFDETpQhBxhls5KTeuEZa7SW01vd5ityl6s/xiVbJul+iithad/wB/5kzouB8XDoR+FEB4Bxs6+HhVmkpTUrqN0tU5R1Xb5ET7A+Lh0I/CjNanDIABFAAAAAAAAUbFykiiAuIWiYkSsrarcvHx8wHINKotYutdcc7rzNKxrKMbyXWSLS1RdetlyuaazXtdRyrwP58posNHVfabjnUr0l/ZuF6cPlVSFk00l/ZuF6cPlVSG043aQi1MP8P42rS+7b/3wJxLhKhCbhOrCMtSyykk9fFq9KIVoL4+f3b+OBr9Lp2xstjlTv6kDlraM1sbhlxfZrDO42WOgTxdFuTVWHhXvmWpxiuPVyNbTw7ZYdNP7RS2q81rett8W1s545uTkpZMilPLJSSlDvm7W5U3yc5fVrKTp3UMuWz4laffWi+VR4j877Po/KvV9dqcbR0GPCmFVl9opO19bmuJ2uvPe+s9KfCeG1SdenaOp2nG37t+LX4XWc3ptOUVNQU8su8Vsjd1lvbVe19RdColnU8i76FoxtlvllbNbkvxj7Po/K/k+u1PaOl9t8NJqMa0G27JKau29SSMPSnySv0H70c64HnP7VTUrX7JDUrW8OPFbkOi6VeSV/u370e7Q0Jo4TDG7ye7z5alzttcjN7ojH9ZpPbP+mRokiRaMxtiaK/e/okehy8vDTLyyr54fLiazD4Wc3G0W1K9ue3GbPTLyyr54fLiW8HR7yLiottVIyUmlmWZavP9BFroei8HHC01JWaz3X/kmdDwPi4dCPwogejMVHDQjFLilqupWfZJXjflsTrBeLhbcj8KM3lqcMkqedysSKvAAAAAAABZJPkZRxe09AB55XtIaiakLQHJtJ5R+1Vko68/Hx8i5DFhGySMrSGN8ZW5pt+xGMdI5VJNJf2bhenD5VUieGjxv0Es0l/ZuF6cPlVSM042SRIuST6C+Pn92/jga3TOSWLneN/A+CBstBfHz+7fxwNbpnFPFzu7eB8uA8r/AFafs9O6apr3+bj9J6Va1NPXC+rjvr/P1MZQhvewvrRi3rlb0FZX0q1PUsmvbfmLp1qV/F3169Z4U4RurS9gnCN333LsAz+A5xeJpWjb9JT+OJ0bSrySv92/ejnHAUYrEUrO/wCkp/HE6PpV5JX+7fvRMm8eHKcNG78xvdGvKqXT/pkafDRsr7TcaNeVUun/AEyL4Y8sfTLyyr54fLiYtLKopOOu3HzmdpZG+Oq+eD/44GAScGXLpeir/VadtXh/MmdCwMX2OGv/AKI/CjnmifklL+P5kzouB8XDoR+FGby6Th6ZZbSsIvldy8EUAAAAAAAAAAFCFomhFFwdW3H7PqByXh+m/tVd2eub9yNfkex9R2vtdW3H7PqU7XVtx+z6mupm4uecPQb4PwqtxTg3/wCqqRjI9j6jtfa6tuP2fUp2urbj9n1EyLju51oNF9nnq/7b+OBrNM6UpYqdlfwflwOs9rq24/Z9R2urbj9n1HV3Nu2zhKw091npXoTbuos7l2urbj9n1Ha6tuP2fUbp0uF08PNNPKyk8PNtvK+M7r2urbj9n1Ha6tuP2fUbr0uM8BUZLEUm0/GQ+OJ0fSeN8LWW2H80b/tdW3H7PqO11bcfs+pLSTZxRQex9Rs9G4v7TS1Pw/6ZHV+11bcfs+pXtdW3H7PqXqTpcp0opv7XWdnrcPlxNVkex9R2vtdW3H7PqO11bcfs+omS3FHdE1+q0/4/mTOi4HxcOhH4URztdW3H7PqSPCRahFPU1GKa50kZajIAAAAAAABS5TMW3W0ZltAvKlEyoAAAC3MXHm3zgXZitzzcltK3W0C5yKplmZbSsWBeAAAAAtkxmEmW5ltAuzFbnmmtpW62gXKRceebnPQAAABRlSjAtzFVItzLaUzLaBfmBbf8/lAC7KtgyLYa2FTFcsF6Mv1LuyYjd9kfqBsgYuEdR5s6trVuLitr4jKAAAAW5UXAC3KtgyrYXAC3ItgSSLgAAAAAAUaKZVsLgBblQyLYXAC1RWwuAAAAAAALcq2DKthcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/9k=">
696 |                             </div>
697 |                             <div class="description">
698 |                                 <h3>embassy</h3>
699 |                                 <p>One of the safest places in case of an emergency is the consulate.<br><a
700 |                                         href="#">+16184621220<image
701 |                                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRuPh70alpTRkIVEVjE5dlDdWqmL_CdnXRcEA&usqp=CAU">
702 |                                         </image></a></p>
703 |                             </div>
704 |                         </li>
705 |                     </ul>
706 | 
707 |                 </div>
708 |             </div>
709 |             <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
710 |             <div class="carousel-item"
711 |                 style="background-color: rgb(255, 0, 234); background-repeat: no-repeat; width: 100vw; height : 100vh">
712 |             </div>
713 |             <label for="carousel-3" class="carousel-control prev control-1">‹</label>
714 |             <label for="carousel-2" class="carousel-control next control-1">›</label>
715 |             <label for="carousel-1" class="carousel-control prev control-2">‹</label>
716 |             <label for="carousel-3" class="carousel-control next control-2">›</label>
717 |             <label for="carousel-2" class="carousel-control prev control-3">‹</label>
718 |             <label for="carousel-1" class="carousel-control next control-3">›</label>
719 |             <ol class="carousel-indicators">
720 |                 <li>
721 |                     <label for="carousel-1" class="carousel-bullet">•</label>
722 |                 </li>
723 |                 <li>
724 |                     <label for="carousel-2" class="carousel-bullet">•</label>
725 |                 </li>
726 |                 <li>
727 |                     <label for="carousel-3" class="carousel-bullet">•</label>
728 |                 </li>
729 |             </ol>
730 |         </div>
731 |     </div>
732 | 
733 | </body>
734 | 
735 | </html>


--------------------------------------------------------------------------------
/front.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Document</title>
  7 |     <link
  8 |       rel="stylesheet"
  9 |       href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
 10 |     />
 11 |     <link
 12 |       rel="stylesheet"
 13 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
 14 |     />
 15 | 
 16 |     <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
 17 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 18 |     <style>
 19 |       * {
 20 |         padding: 0;
 21 |         margin: 0;
 22 |         box-sizing: border-box;
 23 |       }
 24 | 
 25 |       body {
 26 |         display: grid;
 27 |         place-items: center;
 28 |         position: relative;
 29 |         /* height: 100vh; */
 30 |         /* background-color: #9a99f2; */
 31 |         background: #212534;
 32 |       }
 33 | 
 34 |       .swiper-container {
 35 |         border-radius: 5px;
 36 |         width: 70vw;
 37 |         overflow: hidden;
 38 |         height: fit-content;
 39 |         height: fit-content;
 40 |         font-size: 50px;
 41 |         position: relative;
 42 |         padding-bottom: 50px;
 43 |         font-family: sans-serif;
 44 |       }
 45 | 
 46 |       .swiper-slide {
 47 |         width: auto;
 48 |         height: fit-content;
 49 |         display: flex;
 50 |         height: auto;
 51 |         border-radius: 5px;
 52 |         overflow: hidden;
 53 |         align-items: flex-start;
 54 |         flex-direction: column;
 55 |         padding: 0px;
 56 |         font-family: Nunito;
 57 |         /* background-color: white; */
 58 |       }
 59 | 
 60 |       .swiper-slide .ImgHolder {
 61 |         /* background-color: #4361ee; */
 62 |         display: flex;
 63 |         width: 100%;
 64 |         height: auto;
 65 |         padding: 30px;
 66 |         border-bottom-left-radius: 20px;
 67 |       }
 68 | 
 69 |       .ContentHolder::before {
 70 |         /* background-color: #4361ee; */
 71 |         content: "";
 72 |         width: 50px;
 73 |         height: 50px;
 74 |         position: absolute;
 75 |         top: -5px;
 76 |         z-index: -1;
 77 |         right: 0px;
 78 |       }
 79 | 
 80 |       .ContentHolder {
 81 |         position: relative;
 82 |         padding: 10px;
 83 |         background-color: white;
 84 |         /* border-top-right-radius: 20px; */
 85 |         border-radius: 20px;
 86 |         margin: 10px;
 87 |         width: 90%;
 88 |       }
 89 | 
 90 |       .swiper-pagination-bullet {
 91 |         background-color: white;
 92 |         opacity: 1;
 93 |         border: 1px solid #4361ee;
 94 |       }
 95 | 
 96 |       .swiper-pagination-bullet-active {
 97 |         background-color: #4361ee;
 98 |       }
 99 | 
100 |       .swiper-button {
101 |         border: 1px solid white;
102 |       }
103 | 
104 |       .swiper-slide img {
105 |         width: 100px;
106 |         height: 100px;
107 |         /* border-radius: 50%; */
108 |         margin: auto;
109 |         object-fit: cover;
110 |         /* border: 3px solid #4361ee; */
111 |         /* outline: 2px solid white; */
112 |       }
113 | 
114 |       .swiper-slide h3 {
115 |         font-size: 1.1rem;
116 |         text-align: center;
117 |         font-weight: bold;
118 |       }
119 | 
120 |       .swiper-slide p {
121 |         font-size: 0.9rem;
122 |         padding: 5px;
123 |       }
124 | 
125 |       @media (max-width: 638px) {
126 |         .swiper-container {
127 |           width: 100%;
128 |         }
129 |       }
130 | 
131 |       @media (max-width: 500px) {
132 |         .swiper-container {
133 |           width: 90vw;
134 |         }
135 |       }
136 | 
137 |       @media (max-width: 300px) {
138 |         .swiper-container {
139 |           width: 100%;
140 |         }
141 | 
142 |         .swiper-slide {
143 |           border-radius: 0px;
144 |         }
145 | 
146 |         .swiper-container .ImgHolder {
147 |           border-radius: 0px;
148 |         }
149 |         .ContentHolder {
150 |           border-radius: 0px;
151 |         }
152 |       }
153 | 
154 |       .header {
155 |         margin: 0px 0px 40px;
156 |         text-align: center;
157 |       }
158 |       .title {
159 |         color: white;
160 |         font-size: 40px;
161 |       }
162 |       .logo-img {
163 |         width: 150px;
164 |         height: 150px;
165 |       }
166 | 
167 |       @property --rotate {
168 |         syntax: "<angle>";
169 |         initial-value: 132deg;
170 |         inherits: false;
171 |       }
172 | 
173 |       .card {
174 |         width: var(--card-width);
175 |         height: var(--card-height);
176 |         padding: 3px;
177 |         position: relative;
178 |         border-radius: 20px;
179 |         justify-content: center;
180 |         align-items: center;
181 |         text-align: center;
182 |         display: flex;
183 |         font-size: 1.5em;
184 |         color: rgb(88 199 250 / 100%);
185 |         /* color: rgb(88 199 250 / 0%); */
186 |         cursor: pointer;
187 |         font-family: cursive;
188 |       }
189 | 
190 |       .card:hover {
191 |         color: rgb(88 199 250 / 100%);
192 |         transition: color 1s;
193 |         border: 2px solid white;
194 |       }
195 |       .card:hover:before,
196 |       .card:hover:after {
197 |         animation: none;
198 |         /* opacity: 0; */
199 |       }
200 | 
201 |       .card::before {
202 |         content: "";
203 |         width: 104%;
204 |         height: 102%;
205 |         border-radius: 8px;
206 |         background-image: linear-gradient(
207 |           var(--rotate),
208 |           #5ddcff,
209 |           #3c67e3 43%,
210 |           #4e00c2
211 |         );
212 |         position: absolute;
213 |         z-index: -1;
214 |         top: -1%;
215 |         left: -2%;
216 |         animation: spin 3s linear infinite;
217 |       }
218 | 
219 |       .card::after {
220 |         position: absolute;
221 |         content: "";
222 |         top: calc(var(--card-height) / 6);
223 |         left: 0;
224 |         right: 0;
225 |         z-index: -1;
226 |         height: 100%;
227 |         width: 100%;
228 |         margin: 0 auto;
229 |         transform: scale(0.8);
230 |         filter: blur(calc(var(--card-height) / 6));
231 |         /* background-image: linear-gradient(
232 |           var(--rotate),
233 |           #5ddcff,
234 |           #3c67e3 43%,
235 |           #4e00c2
236 |         ); */
237 |         opacity: 1;
238 |         transition: opacity 0.5s;
239 |         animation: spin 5s linear infinite;
240 |       }
241 | 
242 |       @keyframes spin {
243 |         0% {
244 |           --rotate: 0deg;
245 |         }
246 |         100% {
247 |           --rotate: 360deg;
248 |         }
249 |       }
250 | 
251 |       a {
252 |         color: #212534;
253 |         text-decoration: none;
254 |         font-family: sans-serif;
255 |         font-weight: bold;
256 |         margin-top: 2rem;
257 |       }
258 | 
259 |       html {
260 |         width: 100%;
261 |         height: 100%;
262 |       }
263 |       body {
264 |         /* background: aqua; */
265 |         text-align: center;
266 |         transition: background 5s ease-in-out;
267 |       }
268 |       button:focus,
269 |       input:focus {
270 |         outline: none;
271 |       }
272 |       .main-app {
273 |         /* top: 50%; */
274 |         /* transform: translateY(50vh); */
275 |         display: flex;
276 |         justify-content: center;
277 |         margin: 10px;
278 |       }
279 |       .submit {
280 |         background: transparent;
281 |         border: none;
282 |         font-size: 30px;
283 |         transition: 0.5s ease-in-out;
284 |         margin-left: 5px;
285 |         color: cadetblue;
286 |       }
287 |       .search-bar {
288 |         background: transparent;
289 |         width: 0%;
290 |         height: 30px;
291 |         border: none;
292 |         font-size: 15px;
293 |         color: cadetblue;
294 |         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
295 |         border-bottom: 2px solid cadetblue;
296 |         transition: width 0.5s ease-in-out, padding 0.2s ease-in-out;
297 |         font-weight: 800;
298 |         text-align: center;
299 |       }
300 |       .icon-img {
301 |         border: 0px !important;
302 |         width: 30px !important;
303 |         height: 30px !important;
304 |         border-radius: 0px !important;
305 |       }
306 |       .submit-btn {
307 |         background: none;
308 |         border: none;
309 |         margin: 20px 0px;
310 |         padding: 10px;
311 |       }
312 |       .submit-btn:hover {
313 |         cursor: pointer;
314 |       }
315 |       .send-img {
316 |         width: 50px !important;
317 |         height: 50px !important;
318 |         opacity: 0.7;
319 |       }
320 |       .send-img:hover {
321 |         opacity: 1;
322 |       }
323 |     </style>
324 |   </head>
325 |   <body>
326 |     <div
327 |       id="craouselContainer"
328 |       class="swiper-container"
329 |       style="margin-top: 20px"
330 |     >
331 |       <div class="header">
332 |         <img
333 |           src="https://i.ibb.co/TYQGW58/itty-page-logos-white.png"
334 |           alt="logo"
335 |           srcset=""
336 |           class="logo-img"
337 |         />
338 |         <h1 class="title">Traveler's Emergency</h1>
339 |       </div>
340 |       <div class="swiper-wrapper" id="slideHolder">
341 |         <!-- Slides -->
342 |       </div>
343 |       <div class="swiper-pagination"></div>
344 |       <button class="submit-btn">
345 |         <img
346 |           class="icon-img send-img"
347 |           src="https://cdn-icons-png.flaticon.com/128/3033/3033057.png"
348 |           alt="submit"
349 |         />
350 |       </button>
351 |     </div>
352 |     <script>
353 |       var testiomnialData = [
354 |         {
355 |           avatar: "https://cdn-icons-png.flaticon.com/128/2200/2200326.png",
356 |           name: "Country / City / Address",
357 |           review: `
358 |                 <div class='main-app'>
359 |               <input type='text' class='search-bar' placeholder="Country" />
360 |               <button class='submit'>
361 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/1842/1842150.png" alt="address"  /></button></div>
362 |             <div class='main-app'>
363 |               <input type='text' class='search-bar' placeholder="City" />
364 |               <button class='submit'>
365 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/10490/10490225.png" alt="address"  /></button></div>
366 |                 <div class='main-app'>
367 |               <input type='text' class='search-bar' placeholder="Accommodation Address" />
368 |               <button class='submit'>
369 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/10913/10913508.png" alt="address"  />
370 |                 </button></div>`,
371 |         },
372 |         {
373 |           avatar: "https://cdn-icons-png.flaticon.com/128/2965/2965293.png",
374 |           name: "Start & End Date",
375 |           review: `
376 |             <div class='main-app'>
377 |               <input type='date' class='search-bar' placeholder="Start date" />
378 |               <button class='submit'>
379 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/10473/10473587.png" alt="start date"  /></button></div>
380 |             <div class='main-app'>
381 |               <input type='date' class='search-bar' placeholder="End date" />
382 |               <button class='submit'>
383 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/7933/7933336.png" alt="end date"  /></button></div>`,
384 |         },
385 |         {
386 |           avatar: "https://cdn-icons-png.flaticon.com/128/9211/9211930.png",
387 |           name: "Emergency",
388 |           review: `
389 |                 <div class='main-app'>
390 |               <input type='text' class='search-bar' placeholder="Contact" />
391 |               <button class='submit'>
392 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/3192/3192750.png" alt="contact"  /></button></div>
393 |             <div class='main-app'>
394 |               <input type='text' class='search-bar' placeholder="Medical status" />
395 |               <button class='submit'>
396 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/2448/2448439.png" alt="medical"  /></button></div>
397 |                 <div class='main-app'>
398 |               <input type='text' class='search-bar' placeholder="Passport Number" />
399 |               <button class='submit'>
400 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/5908/5908853.png" alt="passport"  />
401 |                 </button></div>`,
402 |         },
403 |         {
404 |           avatar: "https://cdn-icons-png.flaticon.com/128/7693/7693116.png",
405 |           name: "Police",
406 |           review: `
407 |                 <div class='main-app'>
408 |               <input type='text' class='search-bar' placeholder="Contact" />
409 |               <button class='submit'>
410 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/3192/3192750.png" alt="contact"  /></button></div>
411 |             <div class='main-app'>
412 |               <input type='text' class='search-bar' placeholder="Medical status" />
413 |               <button class='submit'>
414 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/2448/2448439.png" alt="medical"  /></button></div>
415 |                 <div class='main-app'>
416 |               <input type='text' class='search-bar' placeholder="Passport Number" />
417 |               <button class='submit'>
418 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/5908/5908853.png" alt="passport"  />
419 |                 </button></div>`,
420 |         },
421 |         {
422 |           avatar: "https://cdn-icons-png.flaticon.com/128/4325/4325959.png",
423 |           name: "Fire Department",
424 |           review: `
425 |                 <div class='main-app'>
426 |               <input type='text' class='search-bar' placeholder="Contact" />
427 |               <button class='submit'>
428 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/3192/3192750.png" alt="contact"  /></button></div>
429 |             <div class='main-app'>
430 |               <input type='text' class='search-bar' placeholder="Medical status" />
431 |               <button class='submit'>
432 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/2448/2448439.png" alt="medical"  /></button></div>
433 |                 <div class='main-app'>
434 |               <input type='text' class='search-bar' placeholder="Passport Number" />
435 |               <button class='submit'>
436 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/5908/5908853.png" alt="passport"  />
437 |                 </button></div>`,
438 |         },
439 |         {
440 |           avatar: "https://cdn-icons-png.flaticon.com/128/9746/9746996.png",
441 |           name: "Embassy",
442 |           review: `
443 |                 <div class='main-app'>
444 |               <input type='text' class='search-bar' placeholder="Contact" />
445 |               <button class='submit'>
446 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/3192/3192750.png" alt="contact"  /></button></div>
447 |             <div class='main-app'>
448 |               <input type='text' class='search-bar' placeholder="Medical status" />
449 |               <button class='submit'>
450 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/2448/2448439.png" alt="medical"  /></button></div>
451 |                 <div class='main-app'>
452 |               <input type='text' class='search-bar' placeholder="Passport Number" />
453 |               <button class='submit'>
454 |                 <img class='icon-img' src="https://cdn-icons-png.flaticon.com/128/5908/5908853.png" alt="passport"  />
455 |                 </button></div>`,
456 |         },
457 |       ];
458 |       var slideHolder = document.querySelector("#slideHolder");
459 |       for (let i of testiomnialData)
460 |         slideHolder.innerHTML += `
461 |           <div class="swiper-slide card">
462 |             <div class="ImgHolder">
463 |               <img src="${i.avatar}">
464 |             </div>
465 |             <div class="ContentHolder">
466 |               <h3>${i.name}</h3>
467 |               <p>${i.review}</p>
468 |             </div>
469 |           </div>`;
470 | 
471 |       const swiper = new Swiper("#craouselContainer", {
472 |         grabCursor: true,
473 |         centeredSlides: true,
474 |         slidesPerView: 2.3,
475 |         loop: true,
476 |         spaceBetween: 30,
477 |         effect: "coverflow",
478 |         coverflowEffect: {
479 |           rotate: 0,
480 |           depth: 800,
481 |           slideShadows: true,
482 |         },
483 |         pagination: {
484 |           el: ".swiper-pagination",
485 |           clickable: true,
486 |         },
487 |         autoplay: { delay: 50000 },
488 |       });
489 |       window.onresize = queryResizer;
490 |       queryResizer();
491 |       function queryResizer() {
492 |         if (window.innerWidth < 724) swiper.params.slidesPerView = 2;
493 |         if (window.innerWidth > 501) swiper.params.slidesPerView = 2;
494 |         if (window.innerWidth > 724) swiper.params.slidesPerView = 2.3;
495 |         if (window.innerWidth < 501) swiper.params.slidesPerView = 1;
496 |         swiper.update();
497 |       }
498 | 
499 |       const bgcols = [
500 |         "rgb(210, 90, 90)",
501 |         "rgb(6, 179, 219)",
502 |         "rgb(99, 211, 134)",
503 |         "#7FD1B9",
504 |         "#7A6563",
505 |       ];
506 |       const changeBG = () => {
507 |         const index = Math.floor(Math.random() * 5);
508 |         document.body.style.cssText = "background-color: " + bgcols[index];
509 |       };
510 |       setInterval(changeBG, 5000);
511 |       $(".main-app").mouseover((item) => {
512 |         const temp = item.currentTarget;
513 |         const sb = item.currentTarget.firstElementChild;
514 |         sb.style.width = "70%";
515 |         sb.style.padding = "0px";
516 |       });
517 |       $(".main-app").mouseout(() => {
518 |         $(".search-bar").css("width", "0%", "padding", "0px");
519 |         $(".search-bar").css("padding", "0px");
520 |       });
521 |     </script>
522 |   </body>
523 | </html>
524 | 


--------------------------------------------------------------------------------