326 | Handcrafted by
327 |
328 | Open Source ♥ |
329 | 2022 All rights reserved
330 |
358 |
361 |
362 |
363 |
364 |
365 |
366 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | // Automatic Slideshow - change image every 3 seconds
2 | var myIndex = 0;
3 | carousel();
4 | function carousel() {
5 | var i;
6 | var x = document.getElementsByClassName("mySlides");
7 | for (i = 0; i < x.length; i++) {
8 | x[i].style.display = "none";
9 | }
10 | myIndex++;
11 | if (myIndex > x.length) { myIndex = 1 }
12 | x[myIndex - 1].style.display = "block";
13 | setTimeout(carousel, 3000);
14 | }
15 | const cursor = document.querySelector(".cursor");
16 | var timeout;
17 |
18 | //follow cursor on mousemove
19 | document.addEventListener("mousemove", (e) => {
20 | let x = e.pageX;
21 | let y = e.pageY;
22 |
23 | cursor.style.top = y + "px";
24 | cursor.style.left = x + "px";
25 | cursor.style.display = "block";
26 |
27 | //cursor effects when mouse stopped
28 | function mouseStopped(){
29 | cursor.style.display = "none";
30 | }
31 | clearTimeout(timeout);
32 | timeout = setTimeout(mouseStopped, 1000);
33 | });
34 |
35 | //cursor effects when mouseout
36 | document.addEventListener("mouseout", () => {
37 | cursor.style.display = "none";
38 | });
39 |
40 | //FAQ accordian effects
41 | var acc = document.getElementsByClassName("accordion");
42 | var i;
43 |
44 | for (i = 0; i < acc.length; i++) {
45 | acc[i].addEventListener("click", function() {
46 | this.classList.toggle("active");
47 | var panel = this.nextElementSibling;
48 | if (panel.style.maxHeight) {
49 | panel.style.maxHeight = null;
50 | } else {
51 | panel.style.maxHeight = panel.scrollHeight + "px";
52 | }
53 | });
54 | }
55 |
56 | const showOnPx = 20;
57 | const backToTopButton = document.querySelector(".back-to-top");
58 | const rootElement = document.documentElement;
59 |
60 | const scrollContainer = () => {
61 | return document.documentElement || document.body;
62 | };
63 |
64 |
65 | if (scrollContainer().scrollTop > showOnPx) {
66 | backToTopButton.classList.remove("hidden");
67 | } else {
68 | backToTopButton.classList.add("hidden");
69 | }
70 |
71 | document.addEventListener("scroll", () => {
72 | if (scrollContainer().scrollTop > showOnPx) {
73 | backToTopButton.classList.remove("hidden")
74 | } else {
75 | backToTopButton.classList.add("hidden")
76 | }
77 | })
78 |
79 | document.addEventListener("touchstart", () => {
80 | if (scrollContainer().scrollTop > showOnPx) {
81 | backToTopButton.classList.remove("hidden")
82 | } else {
83 | backToTopButton.classList.add("hidden")
84 | }
85 | })
86 |
87 | const goToTop = () => {
88 | rootElement.scrollTo({
89 | top: 0,
90 | behavior: "smooth"
91 | })
92 | };
93 |
94 | backToTopButton.addEventListener("click", goToTop);
95 |
96 | (function($) { "use strict";
97 |
98 | $(function() {
99 | var header = $(".start-style");
100 | $(window).scroll(function() {
101 | var scroll = $(window).scrollTop();
102 |
103 | if (scroll >= 10) {
104 | header.removeClass('start-style').addClass("scroll-on");
105 | } else {
106 | header.removeClass("scroll-on").addClass('start-style');
107 | }
108 | });
109 | });
110 |
111 | //Animation
112 |
113 | $(document).ready(function() {
114 | $('body.hero-anime').removeClass('hero-anime');
115 | });
116 |
117 | //Menu On Hover
118 |
119 | $('body').on('mouseenter mouseleave','.nav-item',function(e){
120 | if ($(window).width() > 750) {
121 | var _d=$(e.target).closest('.nav-item');_d.addClass('show');
122 | setTimeout(function(){
123 | _d[_d.is(':hover')?'addClass':'removeClass']('show');
124 | },1);
125 | }
126 | });
127 | })(jQuery);
128 |
129 | $('.navbar-nav>li>a').on('click', function(){
130 | $('.navbar-collapse').collapse('hide');
131 | });
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2 | html {
3 | scroll-behavior: smooth;
4 | }
5 |
6 | * {
7 | box-sizing: border-box;
8 | }
9 |
10 | /* Style the body */
11 | body {
12 | font-family: Arial, Helvetica, sans-serif;
13 | margin: 0;
14 | width:100%;
15 | height:100%;
16 | font-size: 15px;
17 | }
18 |
19 | /* Header/logo Title */
20 | .header {
21 | padding: 80px;
22 | text-align: center;
23 | background: #1abc9c;
24 | color: white;
25 | margin: 0;
26 | }
27 |
28 | /* Increase the font size of the heading */
29 | .header h1 {
30 | font-size: 40px;
31 | }
32 |
33 | /* Style the top navigation bar */
34 | *{
35 | box-sizing:border-box;
36 | margin:0;
37 | padding:0;
38 | list-style:none;
39 | font-family: Helvetica;
40 | }
41 |
42 | @media
43 | (prefers-reduced-motion: no-preference) {
44 | html {
45 | scroll-behavior: smooth;
46 | }
47 | }
48 |
49 |
50 | .mySlides {
51 | object-fit: cover;
52 | margin-top: 60px;
53 | }
54 | /* Change color on hover */
55 |
56 | @keyframes fadeIn {
57 | 0% {
58 | opacity: 100;
59 | }
60 |
61 | 100% {
62 | opacity: 0;
63 | }
64 | }
65 |
66 |
67 |
68 | /* About us */
69 | .aboutus{
70 | font-family: 'Poppins', sans-serif;
71 | margin: 0;
72 | padding: 0;
73 | width: 100vw;
74 | background-image: url(assets/aboutsvg.svg);
75 | background-size: cover;
76 | background-repeat: no-repeat;
77 | overflow: hidden;
78 | font-size: 1rem;
79 | color: black;
80 | }
81 |
82 | .aboutus h1{
83 | font-size: 40px;
84 | font-weight: 600;
85 | }
86 |
87 | .aboutus h5{
88 | color: white;
89 | font-size: 22px;
90 |
91 | }
92 | .clas p{
93 | color: white;
94 | }
95 |
96 | .aboutus .content{
97 | text-align: center;
98 | padding : 15px;
99 | }
100 |
101 | .clas img{
102 | width: 5rem;
103 | }
104 |
105 | .item{
106 | border-radius: 5px;
107 | width: minmax(250px, 500px);
108 | box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
109 | }
110 |
111 | .item1{
112 | background-color: #9c2400;
113 | grid-area: item1;
114 | }
115 |
116 | .item2{
117 | background-color: #0078a3;
118 | grid-area: item2;
119 | }
120 |
121 | .item3{
122 | grid-area: item3;
123 | align-content: center;
124 | }
125 |
126 | .item4{
127 | background-color: #009270;
128 | grid-area: item4;
129 | }
130 |
131 | .clas{
132 | display: grid;
133 | grid-template-columns: 1fr 1fr 1fr;
134 | grid-template-rows: repeat(3, 1fr);
135 | grid-template-areas: "item1 item1 item1"
136 | "item2 item2 item3"
137 | "item4 item4 item4";
138 | gap: 1rem;
139 | position: relative;
140 | padding-left: 10vw;
141 | padding-right: 10vw;
142 | margin-top: 15px;
143 | align-items: center;
144 | margin-bottom: 15px;
145 | }
146 |
147 |
148 |
149 | /* Teams */
150 | #team {
151 | width: 100vw;
152 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
153 | background-size: 400% 400%;
154 | animation: gradient 10s ease infinite;
155 | }
156 |
157 | @keyframes gradient {
158 | 0% {
159 | background-position: 0% 50%;
160 | }
161 |
162 | 50% {
163 | background-position: 100% 50%;
164 | }
165 |
166 | 100% {
167 | background-position: 0% 50%;
168 | }
169 | }
170 |
171 |
172 | /* Column container */
173 | .row {
174 | display: -ms-flexbox;
175 | /* IE10 */
176 | display: flex;
177 | -ms-flex-wrap: wrap;
178 | /* IE10 */
179 | flex-wrap: wrap;
180 | }
181 |
182 | /* Create two unequal columns that sits next to each other */
183 | /* Sidebar/left column */
184 | .side {
185 | -ms-flex: 30%;
186 | /* IE10 */
187 | flex: 30%;
188 | background-color: #f1f1f1;
189 | padding: 20px;
190 | }
191 |
192 | /* Main column */
193 | .main {
194 | -ms-flex: 70%;
195 | /* IE10 */
196 | flex: 70%;
197 | background-color: white;
198 | padding: 20px;
199 | }
200 |
201 | /* Fake image, just for this example */
202 | .fakeimg {
203 | background-color: #aaa;
204 | width: 100%;
205 | padding: 20px;
206 | }
207 |
208 | .team img {
209 | /* width: 100px; */
210 | height: 50vh;
211 | }
212 |
213 |
214 | /* Footer */
215 | .footer {
216 | padding: 20px;
217 | text-align: center;
218 | background: #ddd;
219 | }
220 |
221 | footer {
222 | background-color: rgb(0, 0, 0);
223 | position: relative;
224 | width: 100%;
225 | /* background-color: #111827; */
226 | color: rgb(255, 255, 255);
227 | box-shadow: rgb(0 0 0 / 15%) 0px 0px 16px 9px;
228 | padding: 15px 0px;
229 | align-items: center;
230 | justify-content: center;
231 | text-align: center;
232 | }
233 |
234 | footer a {
235 | color: var(--light-color);
236 | font-size: 22px;
237 | text-decoration: none;
238 | }
239 |
240 | footer a:hover {
241 | text-decoration: underline;
242 | }
243 |
244 | footer p {
245 | margin: 0;
246 |
247 | }
248 |
249 | .back-to-top {
250 | position: fixed;
251 | right: 2rem;
252 | bottom: 2.5rem;
253 | border-radius: 0.75rem;
254 | background: #87052c;
255 | padding: 1.1rem;
256 | border: none;
257 | cursor: pointer;
258 | z-index: 1;
259 | transition: opacity 0.5s;
260 | opacity: 100%;
261 | color: #ffffff;
262 | }
263 |
264 | .hidden {
265 | opacity: 0%;
266 | }
267 |
268 | .footer-wrapper {
269 | display: flex;
270 | flex-direction: column;
271 | align-items: center;
272 | margin: 0.2rem 0;
273 | gap: 0.3rem;
274 | }
275 |
276 | .icons ul {
277 | display: flex;
278 | margin: 0;
279 | padding: 0;
280 | }
281 |
282 | .icons ul li {
283 | list-style: none;
284 | }
285 |
286 | .icons ul li a {
287 | display: block;
288 | position: relative;
289 | width: 25px;
290 | height: 25px;
291 | background-color: #fff;
292 | text-align: center;
293 | line-height: 20px;
294 | font-size: 15px;
295 | margin: 0 0 0 20px;
296 | border-radius: 50%;
297 | overflow: hidden;
298 | z-index: 1;
299 | border: 3px solid #fff;
300 | }
301 |
302 | .icons ul li a .icon {
303 | position: relative;
304 | color: #262626;
305 | transition: 0.5s;
306 | z-index: 3;
307 | }
308 |
309 | .icons ul li a:hover .icon {
310 | color: #fff;
311 | transform: rotateY(360deg);
312 | }
313 |
314 | .icons ul li a:before {
315 | content: "";
316 | position: absolute;
317 | top: 100%;
318 | left: 0;
319 | width: 100%;
320 | height: 100%;
321 | background: #55acee;
322 | transition: 0.5s;
323 | z-index: 2;
324 | }
325 |
326 | .icons ul li a:hover:before {
327 | top: 0;
328 | }
329 |
330 | .icons ul li:nth-child(2) a:before {
331 | background: black;
332 | }
333 |
334 | .icons ul li:nth-child(4) a:before {
335 | background: rgb(197, 24, 111);
336 | }
337 |
338 | /* */
339 | /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
340 | @media screen and (max-width: 700px) {
341 | .row {
342 | flex-direction: column;
343 | }
344 | }
345 |
346 | /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
347 | @media screen and (max-width: 400px) {
348 | .navbar a {
349 | float: none;
350 | width: 100%;
351 | }
352 | }
353 |
354 | /* Testimonials */
355 | .testimonials {
356 | padding: 40px 0;
357 | text-align: center;
358 | background-color: #8BC6EC;
359 | background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
360 | }
361 |
362 | .testimonials .inner {
363 | max-width: 1200px;
364 | margin: auto;
365 | overflow: hidden;
366 | padding: 0 20px;
367 | }
368 |
369 | .testimonials .inner h1 {
370 | font-size: 30px;
371 | line-height: 45px;
372 | margin-bottom: 20px;
373 | }
374 |
375 | .testimonials .border {
376 | width: 160px;
377 | height: 2px;
378 | background: #d8b913;
379 | margin: 10px auto;
380 | }
381 |
382 | .testimonials .row {
383 | display: flex;
384 | flex-wrap: wrap;
385 | justify-content: center;
386 | }
387 |
388 | .testimonials .row .col {
389 | flex: 33.33%;
390 | max-width: 33.33%;
391 | box-sizing: border-box;
392 | padding: 15px;
393 | }
394 |
395 | .testimonials .row .col .testimonial {
396 | background: #ffffff;
397 | height: 100%;
398 | padding: 50px 30px;
399 | -webkit-border-radius: 20px;
400 | -moz-border-radius: 20px;
401 | border-radius: 20px;
402 | -webkit-box-shadow: rgba(130, 121, 121, 0.5) 0px 0 10px;
403 | -moz-box-shadow: rgba(130, 121, 121, 0.5) 0 0 10px;
404 | box-shadow: rgba(130, 121, 121, 0.5) 0 0 10px;
405 | }
406 |
407 | .testimonials .row .col .testimonial img {
408 | width: 100px;
409 | height: 100px;
410 | border-radius: 50%;
411 | margin-bottom: 20px;
412 | }
413 |
414 | .testimonials .row .col .testimonial .name {
415 | font-size: 20px;
416 | text-transform: uppercase;
417 | margin: 0 0 20px;
418 | }
419 |
420 | .testimonials .row .col .testimonial .stars {
421 | color: #d8b913;
422 | margin-bottom: 20px;
423 | }
424 |
425 | .testimonials .row .col .testimonial .text {
426 | margin: 0;
427 | }
428 |
429 | @media screen and (max-width: 960px) {
430 | .testimonials .row .col {
431 | flex: 100%;
432 | width: 100%;
433 | max-width: 80%;
434 | margin: auto;
435 | }
436 | }
437 |
438 | /* FAQ's accoridan styling */
439 | #faqs {
440 | margin: 20px;
441 | text-align: center;
442 | color: white;
443 | }
444 |
445 | .accordion {
446 | border-radius: 5px;
447 | background-color:white;
448 | color: black;
449 | cursor: pointer;
450 | padding: 18px;
451 | width: 100%;
452 | text-align: left;
453 | outline: none;
454 | transition: 0.5s;
455 | }
456 |
457 | /*Plus and minus sign*/
458 | .accordion:after {
459 | content: '\02795';
460 | font-size: 13px;
461 | color: black;
462 | float: right;
463 | margin-left: 5px;
464 | }
465 |
466 | .active:after {
467 | content: "\2796";
468 | }
469 |
470 | /* Add background color to the button when hovered and clicked on */
471 | .active, .accordion:hover {
472 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
473 |
474 | }
475 |
476 | /* Answer panel styling */
477 | .panel {
478 | padding: 0 18px;
479 | color: black;
480 | text-align: left;
481 | background-color: white;
482 | max-height: 0;
483 | overflow: hidden;
484 | transition: max-height 0.3s ease-out;
485 | }
486 |
487 |
488 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
489 |
490 | *{
491 | margin: 0;
492 | padding: 0;
493 | box-sizing: border-box;
494 | font-family: "Poppins", sans-serif;
495 | }
496 |
497 | body{
498 | height: 100vh;
499 | background: #000115;
500 | cursor: none;
501 | z-index: -10;
502 | }
503 |
504 | .main{
505 | height: 100vh;
506 | display: flex;
507 | justify-content: center;
508 | align-items: center;
509 | }
510 |
511 | .main h1{
512 | color: rgba(255, 255, 255, 0.8);
513 | font-size: 65px;
514 | }
515 |
516 | .cursor{
517 | z-index: 9999999 !important;
518 | position: absolute;
519 | background: #01192a;
520 | width: 20px;
521 | height: 20px;
522 | border-radius: 50%;
523 | pointer-events: none;
524 | box-shadow: 0 0 20px #2696E8,
525 | 0 0 60px #2696E8,
526 | 0 0 100px #2696E8;
527 | animation: colors 5s infinite;
528 | transform: all;
529 | display: inline-block;
530 | }
531 |
532 | @keyframes colors{
533 | 0%{
534 | filter: hue-rotate(0deg);
535 | }
536 | 100%{
537 | filter: hue-rotate(360deg);
538 | }
539 | }
540 |
541 | .cursor:before{
542 | content: '';
543 | position: absolute;
544 | background: #2696E8;
545 | width: 50px;
546 | height: 50px;
547 | opacity: 0.2;
548 | transform: translate(-30%, -30%);
549 | border-radius: 50%;
550 | }
551 |
552 | /* contributors CSS */
553 | .contributors{
554 | display: flex;
555 | flex-wrap:wrap;
556 | }
557 | .contributors a,
558 | .contributors a img{
559 | max-width: 100%;
560 | margin-bottom:.2rem;
561 | }
562 |
563 | .start-header {
564 | opacity: 1;
565 | transform: translateY(0);
566 | padding: 20px 0;
567 | box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
568 | -webkit-transition : all 0.3s ease-out;
569 | transition : all 0.3s ease-out;
570 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
571 | }
572 | .start-header.scroll-on {
573 | box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
574 | padding: 10px 0;
575 | -webkit-transition : all 0.3s ease-out;
576 | transition : all 0.3s ease-out;
577 | }
578 | .start-header.scroll-on .navbar-brand img{
579 | height: 24px;
580 | -webkit-transition : all 0.3s ease-out;
581 | transition : all 0.3s ease-out;
582 | }
583 | .navigation-wrap{
584 | position: absolute;
585 | width: 100%;
586 | top: 0;
587 | left: 0;
588 | z-index: 1000;
589 | -webkit-transition : all 0.3s ease-out;
590 | transition : all 0.3s ease-out;
591 | }
592 | .navbar{
593 | padding: 0;
594 | }
595 | .navbar-brand img{
596 | height: 28px;
597 | width: auto;
598 | display: block;
599 | filter: brightness(10%);
600 | -webkit-transition : all 0.3s ease-out;
601 | transition : all 0.3s ease-out;
602 | }
603 | .navbar-toggler {
604 | float: right;
605 | border: none;
606 | padding-right: 0;
607 | }
608 | .navbar-toggler:active,
609 | .navbar-toggler:focus {
610 | outline: none;
611 | }
612 | .navbar-light .navbar-toggler-icon {
613 | width: 24px;
614 | height: 17px;
615 | background-image: none;
616 | position: relative;
617 | border-bottom: 1px solid #000;
618 | transition: all 300ms linear;
619 | }
620 | .navbar-light .navbar-toggler-icon:after,
621 | .navbar-light .navbar-toggler-icon:before{
622 | width: 24px;
623 | position: absolute;
624 | height: 1px;
625 | background-color: #000;
626 | top: 0;
627 | left: 0;
628 | content: '';
629 | z-index: 2;
630 | transition: all 300ms linear;
631 | }
632 | .navbar-light .navbar-toggler-icon:after{
633 | top: 8px;
634 | }
635 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
636 | transform: rotate(45deg);
637 | }
638 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
639 | transform: translateY(8px) rotate(-45deg);
640 | }
641 | .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
642 | border-color: transparent;
643 | }
644 | .nav-link{
645 | color: #212121 !important;
646 | transition: all 200ms linear;
647 | }
648 | .nav-item:hover{
649 | box-shadow: inset 0 0 0 3px #ffffff;
650 | }
651 |
652 | .nav-link {
653 | position: relative;
654 | padding: 5px 0 !important;
655 | display: inline-block;
656 | color: #ffffff !important;
657 | font-weight: bold;
658 | }
659 | .nav-item:after{
660 | position: absolute;
661 | bottom: -5px;
662 | left: 0;
663 | width: 100%;
664 | height: 2px;
665 | content: '';
666 | background-color: #8167a9;
667 | opacity: 0;
668 | transition: all 200ms linear;
669 | }
670 |
671 | .nav-item{
672 | position: relative;
673 | transition: all 200ms linear;
674 | padding-right: 60px; /*change according to item */
675 | padding-left: 60px;
676 | }
677 | .full-height {
678 | height: 100vh;
679 | }
680 | .over-hide {
681 | overflow: hidden;
682 | }
683 | .absolute-center {
684 | position: absolute;
685 | top: 50%;
686 | left: 0;
687 | width: 100%;
688 | margin-top: 40px;
689 | transform: translateY(-50%);
690 | z-index: 20;
691 | }
692 |
693 | /* Works on Firefox */
694 | * {
695 | scrollbar-width: thin;
696 | scrollbar-color: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) black;
697 | }
698 |
699 | /* Works on Chrome, Edge, and Safari */
700 | *::-webkit-scrollbar {
701 | width: 8px;
702 | }
703 |
704 | *::-webkit-scrollbar-track {
705 | background: black;
706 | -webkit-border-radius: 10px !important;
707 | border-radius: 10px !important;
708 | }
709 |
710 | *::-webkit-scrollbar-thumb {
711 | opacity: 1;
712 | transform: translateY(0);
713 | padding: 20px 0;
714 | box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
715 | -webkit-transition : all 0.3s ease-out;
716 | transition : all 0.3s ease-out;
717 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
718 | border-radius: 20px;
719 | border: 1px solid black;
720 | }
721 |
722 |
--------------------------------------------------------------------------------
21 | 
70 | 
73 | 
75 | 
77 | 
79 |
80 |
82 |
86 |
87 | 
171 | 
110 | 
177 | 
183 | 
199 | 
220 | 
239 |