├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── about-img-1.svg │ ├── about-img-2.svg │ ├── about-img-3.svg │ ├── about-img-4.svg │ ├── app-banner.png │ ├── apple-store.svg │ ├── check-circle.svg │ ├── contact-icon-1.svg │ ├── contact-icon-2.svg │ ├── contact-icon-3.svg │ ├── features-banner-1.gif │ ├── features-banner-2.png │ ├── features-icon-1.svg │ ├── features-icon-2.svg │ ├── features-icon-3.svg │ ├── features-icon-4.svg │ ├── footer-img.png │ ├── hero-banner.png │ ├── play-store.svg │ ├── service-1.gif │ ├── service-2.gif │ ├── service-3.gif │ └── stats-banner.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images └── desktop.png └── style-guide.md /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/techx) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/techx?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/techx?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/6snv-yu2_c4?style=social)](https://youtu.be/6snv-yu2_c4) 8 | 9 |
10 |
11 | 12 |

Techx - Landing page website

13 | 14 | Techx is a fully responsive landing page website,
Responsive for all devices, build using HTML, CSS, and JavaScript. 15 | 16 | ➥ Live Demo 17 | 18 |
19 | 20 |
21 | 22 | ### Demo Screeshots 23 | 24 | ![Techx Desktop Demo](./readme-images/desktop.png "Desktop Demo") 25 | 26 | ### Prerequisites 27 | 28 | Before you begin, ensure you have met the following requirements: 29 | 30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 31 | 32 | ### Run Locally 33 | 34 | To run **Techx** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/techx.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/techx.git 46 | ``` 47 | 48 | ### Contact 49 | 50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 51 | 52 | ### License 53 | 54 | This project is **free to use** and does not contains any license. 55 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --gold-web-golden: hsl(50, 95%, 56%); 24 | --spanish-orange: hsl(24, 100%, 45%); 25 | --persian-green: hsl(175, 80%, 33%); 26 | --granite-gray: hsl(0, 0%, 40%); 27 | --spring-green: hsl(143, 85%, 58%); 28 | --ultramarine: hsl(260, 100%, 44%); 29 | --blue-violet: hsl(272, 76%, 53%); 30 | --smoky-black: hsl(0, 0%, 7%); 31 | --dark-orange: hsl(33, 100%, 50%); 32 | --winter-sky: hsl(332, 100%, 51%); 33 | --cultured-1: hsl(0, 0%, 98%); 34 | --cultured-2: hsl(0, 0%, 95%); 35 | --cultured-3: hsl(0, 0%, 94%); 36 | --light-gray: hsl(0, 0%, 80%); 37 | --alice-blue: hsl(206, 89%, 93%); 38 | --white_50: hsla(0, 0%, 100%, 0.5); 39 | --white-1: hsl(0, 0%, 100%); 40 | --white-2: hsl(0, 0%, 99%); 41 | --black: hsl(0, 0%, 0%); 42 | 43 | /** 44 | * typography 45 | */ 46 | 47 | --ff-spartan: 'League Spartan', sans-serif; 48 | 49 | --fs-1: 3rem; 50 | --fs-2: 2.7rem; 51 | --fs-3: 2.2rem; 52 | --fs-4: 1.8rem; 53 | --fs-5: 1.6rem; 54 | 55 | --fw-400: 400; 56 | --fw-500: 500; 57 | --fw-600: 600; 58 | --fw-700: 700; 59 | --fw-900: 900; 60 | 61 | /** 62 | * spacing 63 | */ 64 | 65 | --section-padding: 60px; 66 | 67 | /** 68 | * box shadow 69 | */ 70 | 71 | --shadow-1: 0 2px 25px hsla(0, 0%, 0%, 0.1); 72 | --shadow-2: 0 8px 14px hsla(0, 0%, 0%, 0.1); 73 | --shadow-3: 0 14px 30px hsla(0, 0%, 0%, 0.05); 74 | 75 | /** 76 | * border radius 77 | */ 78 | 79 | --radius-6: 6px; 80 | --radius-12: 12px; 81 | 82 | /** 83 | * gradient 84 | */ 85 | 86 | --gradient-1: linear-gradient(to right, var(--winter-sky), var(--dark-orange)); 87 | --gradient-2: linear-gradient(to right, var(--ultramarine), var(--blue-violet)); 88 | --gradient-3: linear-gradient(to right, var(--winter-sky), var(--dark-orange)); 89 | --gradient-4: linear-gradient(to right, var(--ultramarine), var(--blue-violet)); 90 | --gradient-5: linear-gradient(to right, var(--persian-green), var(--spring-green)); 91 | --gradient-6: linear-gradient(to right, var(--spanish-orange), var(--gold-web-golden)); 92 | 93 | /** 94 | * transition 95 | */ 96 | 97 | --transition-1: 0.25s ease; 98 | --transition-2: 0.5s ease; 99 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 100 | 101 | } 102 | 103 | 104 | 105 | 106 | 107 | /*-----------------------------------*\ 108 | #RESET 109 | \*-----------------------------------*/ 110 | 111 | *, 112 | *::before, 113 | *::after { 114 | margin: 0; 115 | padding: 0; 116 | box-sizing: border-box; 117 | } 118 | 119 | li { list-style: none; } 120 | 121 | a { 122 | text-decoration: none; 123 | color: inherit; 124 | } 125 | 126 | a, 127 | img, 128 | svg, 129 | span, 130 | input, 131 | button, 132 | strong, 133 | ion-icon { display: block; } 134 | 135 | img { height: auto; } 136 | 137 | input, 138 | button { 139 | background: none; 140 | border: none; 141 | font: inherit; 142 | } 143 | 144 | input { width: 100%; } 145 | 146 | button { cursor: pointer; } 147 | 148 | ion-icon { pointer-events: none; } 149 | 150 | html { 151 | font-family: var(--ff-spartan); 152 | font-size: 10px; 153 | scroll-behavior: smooth; 154 | } 155 | 156 | body { 157 | background-color: var(--white-1); 158 | color: var(--granite-gray); 159 | font-size: 1.6rem; 160 | } 161 | 162 | :focus-visible { outline-offset: 4px; } 163 | 164 | 165 | 166 | 167 | 168 | /*-----------------------------------*\ 169 | #REUSED STYLE 170 | \*-----------------------------------*/ 171 | 172 | .container { padding-inline: 15px; } 173 | 174 | .section { padding-block: var(--section-padding); } 175 | 176 | .w-100 { width: 100%; } 177 | 178 | .h1, 179 | .h2, 180 | .h3 { 181 | color: var(--black); 182 | font-weight: var(--fw-900); 183 | line-height: 1.3; 184 | } 185 | 186 | .h1 { font-size: var(--fs-1); } 187 | 188 | .h2 { font-size: var(--fs-2); } 189 | 190 | .h3 { 191 | font-size: var(--fs-3); 192 | font-weight: var(--fw-600); 193 | } 194 | 195 | .section-text { line-height: 1.7; } 196 | 197 | .btn { 198 | min-height: 50px; 199 | color: var(--white-1); 200 | padding-inline: 25px; 201 | border-radius: var(--radius-6); 202 | } 203 | 204 | .btn-primary { background-image: var(--gradient-1); } 205 | 206 | .btn-secondary { background-image: var(--gradient-2); } 207 | 208 | .btn-link { 209 | display: flex; 210 | align-items: center; 211 | gap: 5px; 212 | transition: var(--transition-1); 213 | } 214 | 215 | .btn-link:is(:hover, :focus) { letter-spacing: 0.3px; } 216 | 217 | 218 | 219 | 220 | 221 | /*-----------------------------------*\ 222 | #HEADER 223 | \*-----------------------------------*/ 224 | 225 | .header .btn { display: none; } 226 | 227 | .header { 228 | background-color: var(--white-1); 229 | position: absolute; 230 | top: 0; 231 | left: 0; 232 | width: 100%; 233 | padding-block: 20px; 234 | z-index: 4; 235 | } 236 | 237 | .header.active { 238 | position: fixed; 239 | top: -75px; 240 | box-shadow: var(--shadow-1); 241 | animation: slide-in 0.5s var(--cubic-out) forwards; 242 | } 243 | 244 | @keyframes slide-in { 245 | 0% { transform: translateY(0); } 246 | 100% { transform: translateY(75px); } 247 | } 248 | 249 | .header > .container { 250 | display: flex; 251 | justify-content: space-between; 252 | align-items: center; 253 | gap: 20px; 254 | } 255 | 256 | .logo { 257 | color: var(--smoky-black); 258 | font-size: 3.5rem; 259 | font-weight: var(--fw-700); 260 | line-height: 1; 261 | } 262 | 263 | .nav-toggle-btn { font-size: 30px; } 264 | 265 | .nav-toggle-btn.active .menu-icon, 266 | .nav-toggle-btn .close-icon { display: none; } 267 | 268 | .nav-toggle-btn .menu-icon, 269 | .nav-toggle-btn.active .close-icon { display: block; } 270 | 271 | .navbar { 272 | position: absolute; 273 | top: 100%; 274 | left: 50%; 275 | width: calc(100% - 30px); 276 | transform: translateX(-50%); 277 | background-color: var(--white-1); 278 | box-shadow: var(--shadow-2); 279 | overflow: hidden; 280 | visibility: hidden; 281 | max-height: 0; 282 | transition: 0.25s var(--cubic-out); 283 | } 284 | 285 | .navbar.active { 286 | visibility: visible; 287 | max-height: 300px; 288 | transition-duration: 0.35s; 289 | } 290 | 291 | .navbar-item:not(:last-child) { border-block-end: 1px solid var(--alice-blue); } 292 | 293 | .navbar-link { 294 | color: var(--black); 295 | font-size: var(--fs-4); 296 | font-weight: var(--fw-500); 297 | padding: 16px; 298 | transition: var(--transition-1); 299 | } 300 | 301 | .navbar-link:is(:hover, :focus) { color: var(--winter-sky); } 302 | 303 | 304 | 305 | 306 | 307 | /*-----------------------------------*\ 308 | #HERO 309 | \*-----------------------------------*/ 310 | 311 | .hero { 312 | padding-block-start: calc(73px + var(--section-padding)); 313 | background-color: var(--cultured-1); 314 | } 315 | 316 | .hero-banner { 317 | background-color: var(--light-gray); 318 | aspect-ratio: 1 / 0.8; 319 | } 320 | 321 | .hero-title { margin-block: 30px 15px; } 322 | 323 | .hero-form { margin-block: 20px 30px; } 324 | 325 | .input-field { 326 | background-color: var(--cultured-3); 327 | padding: 20px 15px; 328 | border-radius: var(--radius-6); 329 | margin-block-end: 15px; 330 | } 331 | 332 | .input-field::placeholder { transition: var(--transition-1); } 333 | 334 | .input-field:focus::placeholder { opacity: 0; } 335 | 336 | .hero-list { 337 | display: flex; 338 | flex-wrap: wrap; 339 | align-items: center; 340 | gap: 20px; 341 | } 342 | 343 | .hero-item { 344 | display: flex; 345 | align-items: center; 346 | gap: 5px; 347 | } 348 | 349 | 350 | 351 | 352 | 353 | /*-----------------------------------*\ 354 | #SERVICE 355 | \*-----------------------------------*/ 356 | 357 | .service { background-color: var(--white-1); } 358 | 359 | .service :is(.section-title, .section-text) { text-align: center; } 360 | 361 | .service .section-text { margin-block: 10px 35px; } 362 | 363 | .service-list { 364 | display: grid; 365 | gap: 25px; 366 | } 367 | 368 | .service-card { 369 | border-radius: var(--radius-6); 370 | overflow: hidden; 371 | box-shadow: var(--shadow-1); 372 | } 373 | 374 | .service-card .card-banner { 375 | background-color: var(--light-gray); 376 | aspect-ratio: 1 / 0.47; 377 | } 378 | 379 | .service-card .card-content { padding: 20px; } 380 | 381 | .service-card .card-title { transition: var(--transition-1); } 382 | 383 | .service-card .card-title:is(:hover, :focus) { color: var(--winter-sky); } 384 | 385 | .service-card .card-text { 386 | margin-block: 10px 20px; 387 | line-height: 1.8; 388 | } 389 | 390 | .service-card .btn-link { color: var(--ultramarine); } 391 | 392 | 393 | 394 | 395 | 396 | /*-----------------------------------*\ 397 | #FEATURES 398 | \*-----------------------------------*/ 399 | 400 | .features { background-color: var(--white-2); } 401 | 402 | .features .section-text { margin-block: 10px 15px; } 403 | 404 | .features-content { margin-block-end: 25px; } 405 | 406 | .features-item { 407 | display: flex; 408 | align-items: center; 409 | gap: 10px; 410 | background-color: var(--white-1); 411 | padding: 15px; 412 | box-shadow: var(--shadow-3); 413 | border-radius: var(--radius-6); 414 | } 415 | 416 | .features-item:not(:last-child) { margin-block-end: 15px; } 417 | 418 | .features-item .item-title { 419 | color: var(--black); 420 | font-size: var(--fs-5); 421 | font-weight: var(--fw-600); 422 | } 423 | 424 | .features-banner { 425 | max-width: max-content; 426 | background-color: var(--light-gray); 427 | border-radius: var(--radius-12); 428 | overflow: hidden; 429 | } 430 | 431 | .features-banner.one { 432 | aspect-ratio: 1 / 0.83; 433 | margin-block-end: 25px; 434 | } 435 | 436 | .features-banner.two { 437 | margin-inline: auto; 438 | aspect-ratio: 1 / 0.71; 439 | } 440 | 441 | 442 | 443 | 444 | 445 | /*-----------------------------------*\ 446 | #ABOUT 447 | \*-----------------------------------*/ 448 | 449 | .about { text-align: center; } 450 | 451 | .about .section-text:first-of-type { margin-block: 5px 30px; } 452 | 453 | .about-list { 454 | display: grid; 455 | gap: 25px; 456 | } 457 | 458 | .about-card { 459 | color: var(--white-1); 460 | padding: 20px; 461 | border-radius: var(--radius-12); 462 | } 463 | 464 | .about-card-1 { background-image: var(--gradient-3); } 465 | 466 | .about-card-2 { background-image: var(--gradient-4); } 467 | 468 | .about-card-3 { background-image: var(--gradient-5); } 469 | 470 | .about-card-4 { background-image: var(--gradient-6); } 471 | 472 | .about-card .card-banner { 473 | min-width: 150px; 474 | height: 150px; 475 | aspect-ratio: 1 / 1; 476 | background-color: var(--white_50); 477 | border-radius: 50%; 478 | display: grid; 479 | place-items: center; 480 | margin-inline: auto; 481 | transition: var(--transition-2); 482 | } 483 | 484 | .about-card:is(:hover, :focus-within) .card-banner { background-color: var(--white-1); } 485 | 486 | .about-card .card-title { 487 | color: var(--white-1); 488 | margin-block: 20px 10px; 489 | } 490 | 491 | .about-card .card-text { 492 | line-height: 1.8; 493 | margin-block-end: 15px; 494 | } 495 | 496 | .about .btn-link { justify-content: center; } 497 | 498 | .about .section-text:last-of-type { 499 | max-width: 50ch; 500 | margin-inline: auto; 501 | margin-block-start: 25px; 502 | } 503 | 504 | .about .section-text:last-of-type .btn-link { 505 | color: var(--blue-violet); 506 | display: inline-flex; 507 | } 508 | 509 | .about .section-text:last-of-type .btn-link:is(:hover, :focus) { 510 | color: var(--winter-sky); 511 | letter-spacing: 0; 512 | } 513 | 514 | 515 | 516 | 517 | 518 | /*-----------------------------------*\ 519 | #STATS 520 | \*-----------------------------------*/ 521 | 522 | .stats { background-color: var(--cultured-2); } 523 | 524 | .stats-banner { 525 | max-width: max-content; 526 | margin-inline: auto; 527 | aspect-ratio: 1 / 0.78; 528 | margin-block-end: 25px; 529 | } 530 | 531 | .stats-list { 532 | display: grid; 533 | gap: 25px; 534 | } 535 | 536 | .stats-item { 537 | position: relative; 538 | padding-block: 5px; 539 | padding-inline-start: 15px; 540 | } 541 | 542 | .stats-item::before { 543 | content: ""; 544 | position: absolute; 545 | top: 0; 546 | left: 0; 547 | width: 3px; 548 | height: 100%; 549 | border-radius: 5px; 550 | } 551 | 552 | .stats-item.purple::before { background-color: var(--ultramarine); } 553 | 554 | .stats-item.red::before { background-color: var(--winter-sky); } 555 | 556 | .stats-item.green::before { background-color: var(--spring-green); } 557 | 558 | .stats-item.yellow::before { background-color: var(--dark-orange); } 559 | 560 | .stats-item .item-title { 561 | color: var(--black); 562 | font-size: 3.5rem; 563 | font-weight: var(--fw-900); 564 | margin-block-end: 5px; 565 | } 566 | 567 | .stats-item .item-title .span { 568 | color: var(--granite-gray); 569 | font-weight: var(--fw-400); 570 | display: inline-block; 571 | font-size: var(--fs-4); 572 | } 573 | 574 | 575 | 576 | 577 | 578 | /*-----------------------------------*\ 579 | #APP 580 | \*-----------------------------------*/ 581 | 582 | .app-content { margin-block-end: 25px; } 583 | 584 | .app .section-text { margin-block: 5px 10px; } 585 | 586 | .app .btn-group { 587 | display: flex; 588 | gap: 15px; 589 | } 590 | 591 | .app .btn { 592 | min-height: auto; 593 | padding: 15px; 594 | } 595 | 596 | .app .btn img { margin-block-end: 10px; } 597 | 598 | .app .btn .strong { 599 | margin-block-start: 5px; 600 | font-weight: var(--fw-600); 601 | } 602 | 603 | .app-banner { 604 | max-width: max-content; 605 | margin-inline: auto; 606 | aspect-ratio: 1 / 0.72; 607 | } 608 | 609 | 610 | 611 | 612 | 613 | /*-----------------------------------*\ 614 | #SUPPORT 615 | \*-----------------------------------*/ 616 | 617 | .support { 618 | background-image: var(--gradient-2); 619 | color: var(--white-1); 620 | } 621 | 622 | .support .section-title { color: var(--white-1); } 623 | 624 | .support .section-text { margin-block: 10px 15px; } 625 | 626 | .support .btn { 627 | max-width: max-content; 628 | display: grid; 629 | place-items: center; 630 | } 631 | 632 | 633 | 634 | 635 | 636 | /*-----------------------------------*\ 637 | #FOOTER 638 | \*-----------------------------------*/ 639 | 640 | .footer-top { background-color: var(--cultured-1); } 641 | 642 | .footer-top .container { 643 | display: grid; 644 | gap: 25px; 645 | } 646 | 647 | .footer .logo { margin-block-end: 25px; } 648 | 649 | .footer-img { max-width: max-content; } 650 | 651 | .footer-list-title { 652 | color: var(--black); 653 | font-size: var(--fs-3); 654 | font-weight: var(--fw-600); 655 | margin-block-end: 20px; 656 | } 657 | 658 | .footer-list > li:not(:last-child) { margin-block-end: 15px; } 659 | 660 | .footer-link { 661 | position: relative; 662 | max-width: max-content; 663 | transition: var(--transition-1); 664 | } 665 | 666 | .footer-link::after { 667 | content: ""; 668 | position: absolute; 669 | top: 6px; 670 | left: calc(100% + 10px); 671 | background-color: var(--ultramarine); 672 | width: 20px; 673 | height: 2px; 674 | transition: var(--transition-1); 675 | opacity: 0; 676 | } 677 | 678 | .footer-link:is(:hover, :focus) { color: var(--ultramarine); } 679 | 680 | .footer-link:is(:hover, :focus)::after { opacity: 1; } 681 | 682 | .footer-item { 683 | display: flex; 684 | align-items: baseline; 685 | gap: 5px; 686 | } 687 | 688 | .footer-item .span { color: var(--black); } 689 | 690 | .footer-item-link { 691 | display: inline-block; 692 | color: var(--granite-gray); 693 | transition: var(--transition-1); 694 | } 695 | 696 | .footer-item-link:is(:hover, :focus) { color: var(--ultramarine); } 697 | 698 | .footer-bottom { 699 | padding-block: 25px; 700 | text-align: center; 701 | line-height: 1.3; 702 | } 703 | 704 | .copyright { margin-block-end: 15px; } 705 | 706 | .copyright .span { 707 | display: inline-block; 708 | color: var(--winter-sky); 709 | font-weight: var(--fw-500); 710 | } 711 | 712 | .copyright-link { 713 | display: inline-block; 714 | font-weight: var(--fw-600); 715 | background-image: var(--gradient-3); 716 | -webkit-text-fill-color: transparent; 717 | background-clip: text; 718 | -webkit-background-clip: text; 719 | } 720 | 721 | .footer-bottom-list { 722 | display: flex; 723 | flex-wrap: wrap; 724 | justify-content: center; 725 | align-items: center; 726 | gap: 5px 20px; 727 | } 728 | 729 | .footer-bottom-link { transition: var(--transition-1); } 730 | 731 | .footer-bottom-link:is(:hover, :focus) { color: var(--ultramarine); } 732 | 733 | 734 | 735 | 736 | 737 | /*-----------------------------------*\ 738 | #BACK TO TOP 739 | \*-----------------------------------*/ 740 | 741 | .back-top-btn { 742 | background-color: var(--white-1); 743 | color: var(--black); 744 | position: fixed; 745 | bottom: 10px; 746 | right: 20px; 747 | border: 1px solid var(--light-gray); 748 | font-size: 2.2rem; 749 | padding: 12px; 750 | border-radius: 50%; 751 | opacity: 0; 752 | visibility: hidden; 753 | transition: var(--transition-1); 754 | z-index: 4; 755 | } 756 | 757 | .back-top-btn.active { 758 | opacity: 1; 759 | visibility: visible; 760 | transform: translateY(-10px); 761 | } 762 | 763 | 764 | 765 | 766 | 767 | /*-----------------------------------*\ 768 | #MEDIA QUERIES 769 | \*-----------------------------------*/ 770 | 771 | /** 772 | * responsive for large than 480px screen 773 | */ 774 | 775 | @media (min-width: 480px) { 776 | 777 | /** 778 | * REUSED STYLE 779 | */ 780 | 781 | .header .btn { 782 | display: block; 783 | margin-inline-start: auto; 784 | min-height: 40px; 785 | padding-inline: 15px; 786 | } 787 | 788 | } 789 | 790 | 791 | 792 | 793 | 794 | /** 795 | * responsive for large than 575px screen 796 | */ 797 | 798 | @media (min-width: 575px) { 799 | 800 | /** 801 | * REUSED STYLE 802 | */ 803 | 804 | .container { 805 | max-width: 540px; 806 | margin-inline: auto; 807 | } 808 | 809 | 810 | 811 | /** 812 | * HERO 813 | */ 814 | 815 | .hero-form { position: relative; } 816 | 817 | .hero-form .btn { 818 | position: absolute; 819 | top: 0; 820 | right: 0; 821 | bottom: 0; 822 | } 823 | 824 | 825 | 826 | /** 827 | * SERVICE, ABOUT, STATS, FOOTER 828 | */ 829 | 830 | .service-list, 831 | .about-list, 832 | .stats-list, 833 | .footer-top .container { grid-template-columns: 1fr 1fr; } 834 | 835 | 836 | 837 | /** 838 | * ABOUT 839 | */ 840 | 841 | .about-card { min-height: 100%; } 842 | 843 | 844 | 845 | /** 846 | * APP 847 | */ 848 | 849 | .app .btn { 850 | display: flex; 851 | align-items: center; 852 | gap: 15px; 853 | padding-inline: 25px; 854 | } 855 | 856 | .app .btn img { margin-block-end: 0; } 857 | 858 | } 859 | 860 | 861 | 862 | 863 | 864 | /** 865 | * responsive for large than 768px screen 866 | */ 867 | 868 | @media (min-width: 768px) { 869 | 870 | /** 871 | * RESET 872 | */ 873 | 874 | body { font-size: 2rem; } 875 | 876 | 877 | 878 | /** 879 | * CUSTOM PROPERTY 880 | */ 881 | 882 | :root { 883 | 884 | /** 885 | * typography 886 | */ 887 | 888 | --fs-1: 5rem; 889 | --fs-2: 3.5rem; 890 | --fs-3: 2.5rem; 891 | 892 | } 893 | 894 | 895 | 896 | /** 897 | * REUSED STYLE 898 | */ 899 | 900 | .container { max-width: 720px; } 901 | 902 | 903 | 904 | /** 905 | * HEADER 906 | */ 907 | 908 | .header .btn { 909 | font-size: 1.7rem; 910 | font-weight: var(--fw-500); 911 | min-height: 45px; 912 | padding-inline: 25px; 913 | } 914 | 915 | 916 | 917 | /** 918 | * SERVICE 919 | */ 920 | 921 | .service-card { --radius-6: 16px; } 922 | 923 | .service-card .card-content { padding: 30px; } 924 | 925 | 926 | 927 | /** 928 | * FEATURES 929 | */ 930 | 931 | .features-item .item-title { --fs-5: 2rem; } 932 | 933 | .features-banner.two { 934 | margin-inline: auto 0; 935 | margin-block-start: -180px; 936 | } 937 | 938 | 939 | 940 | /** 941 | * STATS 942 | */ 943 | 944 | .stats-list { padding-inline: 60px; } 945 | 946 | .stats-item { padding-inline-start: 20px; } 947 | 948 | .stats-item .item-title { font-size: 4rem; } 949 | 950 | 951 | 952 | /** 953 | * APP 954 | */ 955 | 956 | .app .btn { padding: 20px 30px; } 957 | 958 | .app-content .span { font-size: 1.5rem; } 959 | 960 | .app-content .strong { font-size: 2rem; } 961 | 962 | } 963 | 964 | 965 | 966 | 967 | 968 | /** 969 | * responsive for large than 992px screen 970 | */ 971 | 972 | @media (min-width: 992px) { 973 | 974 | /** 975 | * CUSTOM PROPERTY 976 | */ 977 | 978 | :root { 979 | 980 | /** 981 | * typography 982 | */ 983 | 984 | --fs-2: 4rem; 985 | --fs-3: 2.9rem; 986 | 987 | /** 988 | * spacing 989 | */ 990 | 991 | --section-padding: 100px; 992 | 993 | } 994 | 995 | 996 | 997 | /** 998 | * REUSED STYLE 999 | */ 1000 | 1001 | .container { max-width: 960px; } 1002 | 1003 | :is(.service, .about, .app) .section-text { 1004 | max-width: 55ch; 1005 | margin-inline: auto; 1006 | } 1007 | 1008 | 1009 | 1010 | /** 1011 | * HEADER 1012 | */ 1013 | 1014 | .nav-toggle-btn { display: none; } 1015 | 1016 | .navbar, 1017 | .navbar.active { all: unset; } 1018 | 1019 | .navbar-list { 1020 | display: flex; 1021 | gap: 5px; 1022 | } 1023 | 1024 | .navbar-item:not(:last-child) { border-block-end: none; } 1025 | 1026 | .navbar-link { --fs-4: 2rem; } 1027 | 1028 | .header .btn { 1029 | margin-inline-start: 0; 1030 | min-height: 50px; 1031 | padding-inline: 40px; 1032 | } 1033 | 1034 | 1035 | 1036 | /** 1037 | * HERO 1038 | */ 1039 | 1040 | .hero .container { 1041 | display: grid; 1042 | grid-template-columns: 1fr 1fr; 1043 | align-items: center; 1044 | gap: 50px; 1045 | } 1046 | 1047 | .hero-title { margin-block-start: 0; } 1048 | 1049 | 1050 | 1051 | /** 1052 | * SERVICE 1053 | */ 1054 | 1055 | .service-list { 1056 | grid-template-columns: repeat(3, 1fr); 1057 | gap: 30px; 1058 | } 1059 | 1060 | 1061 | 1062 | /** 1063 | * FEATURES 1064 | */ 1065 | 1066 | .features .container { 1067 | display: grid; 1068 | grid-template-columns: 1fr 1fr; 1069 | align-items: center; 1070 | gap: 25px; 1071 | } 1072 | 1073 | .features-content { margin-block-end: 0; } 1074 | 1075 | .features-item { padding: 20px; } 1076 | 1077 | .features-item:not(:last-child) { margin-block-end: 20px; } 1078 | 1079 | .features-item .item-title { --fs-5: 2.4rem; } 1080 | 1081 | 1082 | 1083 | /** 1084 | * ABOUT 1085 | */ 1086 | 1087 | .about-list { gap: 30px; } 1088 | 1089 | .about-card { padding: 40px; } 1090 | 1091 | 1092 | 1093 | /** 1094 | * STATS 1095 | */ 1096 | 1097 | .stats .container { 1098 | display: grid; 1099 | grid-template-columns: 1fr 1fr; 1100 | align-items: flex-start; 1101 | } 1102 | 1103 | .stats-banner { margin-block-end: 0; } 1104 | 1105 | .stats-list { grid-template-columns: 1fr; } 1106 | 1107 | .stats-item:nth-child(even) { margin-inline-start: auto; } 1108 | 1109 | .stats-item .item-title { font-size: 4.5rem; } 1110 | 1111 | .stats-text { font-size: 2.2rem; } 1112 | 1113 | 1114 | 1115 | /** 1116 | * APP 1117 | */ 1118 | 1119 | .app :is(.section-title, .section-text) { text-align: center; } 1120 | 1121 | .app .btn-group { justify-content: center; } 1122 | 1123 | 1124 | 1125 | /** 1126 | * SUPPORT 1127 | */ 1128 | 1129 | .support .container { 1130 | display: grid; 1131 | grid-template-columns: 1fr 0.5fr; 1132 | justify-items: self-end; 1133 | align-items: center; 1134 | } 1135 | 1136 | 1137 | 1138 | /** 1139 | * FOOTER 1140 | */ 1141 | 1142 | .footer .container { grid-template-columns: 1fr 0.8fr 0.8fr 1fr; } 1143 | 1144 | .footer-list-title { margin-block-end: 30px; } 1145 | 1146 | .footer-list > li:not(:last-child) { margin-block-end: 25px;} 1147 | 1148 | .footer-bottom { padding-block: 30px; } 1149 | 1150 | .footer-bottom .container { 1151 | display: flex; 1152 | justify-content: space-between; 1153 | align-items: center; 1154 | } 1155 | 1156 | .copyright { margin-block-end: 0; } 1157 | 1158 | } 1159 | 1160 | 1161 | 1162 | 1163 | 1164 | /** 1165 | * responsive for large than 1200px screen 1166 | */ 1167 | 1168 | @media (min-width: 1200px) { 1169 | 1170 | /** 1171 | * CUSTOM PROPERTY 1172 | */ 1173 | 1174 | :root { 1175 | 1176 | /** 1177 | * typography 1178 | */ 1179 | 1180 | --fs-1: 6rem; 1181 | --fs-2: 5rem; 1182 | 1183 | } 1184 | 1185 | 1186 | 1187 | /** 1188 | * REUSED STYLE 1189 | */ 1190 | 1191 | .container { max-width: 1140px; } 1192 | 1193 | 1194 | 1195 | /** 1196 | * FEATURES 1197 | */ 1198 | 1199 | .features .container { 1200 | grid-template-columns: 1fr max-content; 1201 | gap: 70px; 1202 | } 1203 | 1204 | 1205 | 1206 | /** 1207 | * ABOUT 1208 | */ 1209 | 1210 | .about-card { 1211 | display: flex; 1212 | align-items: center; 1213 | gap: 30px; 1214 | text-align: left; 1215 | } 1216 | 1217 | .about-card .card-title { margin-block-start: 0; } 1218 | 1219 | .about .btn-link { justify-content: flex-start; } 1220 | 1221 | 1222 | 1223 | /** 1224 | * APP 1225 | */ 1226 | 1227 | .app .container { 1228 | display: grid; 1229 | grid-template-columns: 0.7fr 1fr; 1230 | align-items: center; 1231 | gap: 25px; 1232 | } 1233 | 1234 | .app-content { margin-block-end: 0; } 1235 | 1236 | .app :is(.section-title, .section-text) { text-align: left; } 1237 | 1238 | .app .section-title { --fs-2: 4rem; } 1239 | 1240 | .app .btn-group { justify-content: flex-start; } 1241 | 1242 | } -------------------------------------------------------------------------------- /assets/images/about-img-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/app-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/app-banner.png -------------------------------------------------------------------------------- /assets/images/apple-store.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/images/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/contact-icon-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /assets/images/contact-icon-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/images/contact-icon-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/images/features-banner-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/features-banner-1.gif -------------------------------------------------------------------------------- /assets/images/features-banner-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/features-banner-2.png -------------------------------------------------------------------------------- /assets/images/features-icon-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /assets/images/features-icon-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/features-icon-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/features-icon-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/footer-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/footer-img.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/play-store.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/images/service-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/service-1.gif -------------------------------------------------------------------------------- /assets/images/service-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/service-2.gif -------------------------------------------------------------------------------- /assets/images/service-3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/service-3.gif -------------------------------------------------------------------------------- /assets/images/stats-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/assets/images/stats-banner.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * navbar toggle 7 | */ 8 | 9 | const navbar = document.querySelector("[data-navbar]"); 10 | const navToggleBtn = document.querySelector("[data-nav-toggle-btn]"); 11 | const navbarLinks = document.querySelectorAll("[data-nav-link]"); 12 | 13 | navToggleBtn.addEventListener("click", function () { 14 | navbar.classList.toggle("active"); 15 | this.classList.toggle("active"); 16 | }); 17 | 18 | for (let i = 0; i < navbarLinks.length; i++) { 19 | navbarLinks[i].addEventListener("click", function () { 20 | navbar.classList.toggle("active"); 21 | navToggleBtn.classList.toggle("active"); 22 | }); 23 | } 24 | 25 | 26 | 27 | /** 28 | * header 29 | */ 30 | 31 | const header = document.querySelector("[data-header]"); 32 | const backTopBtn = document.querySelector("[data-back-top-btn]"); 33 | 34 | window.addEventListener("scroll", function () { 35 | if (window.scrollY >= 100) { 36 | header.classList.add("active"); 37 | backTopBtn.classList.add("active"); 38 | } else { 39 | header.classList.remove("active"); 40 | backTopBtn.classList.remove("active"); 41 | } 42 | }); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Techx - Make Chat Easy 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 36 | 39 | 40 |
41 |
42 | 43 |

44 | 45 |

46 | 47 | 76 | 77 | 78 | 79 | 83 | 84 |
85 |
86 | 87 | 88 | 89 | 90 | 91 |
92 |
93 | 94 | 97 | 98 |
99 |
100 | 101 |
102 | hero banner 104 |
105 | 106 |
107 | 108 |

Make Chat Easy For Today's Digital Customers

109 | 110 |

111 | Techx is the ecommerce helpdesk center that turns your customer service into a profit center without any 112 | delay and 113 | increase your sale. 114 |

115 | 116 |
117 | 119 | 120 | 121 |
122 | 123 |
    124 | 125 |
  • 126 | Checkmark icon 127 | 128 | Live Chat 129 |
    • 130 | 131 |
  • 132 | Checkmark icon 133 | 134 | Ticketing 135 |
    • 136 | 137 |
  • 138 | Checkmark icon 139 | 140 | Knowledge Base 141 |
    • 142 | 143 |
  • 144 | Checkmark icon 145 | 146 | Chat pages 147 |
    • 148 | 149 |
  • 150 | Checkmark icon 151 | 152 | Team chat 153 |
    • 154 | 155 |
156 | 157 |
158 | 159 |
160 |
161 | 162 | 163 | 164 | 165 | 166 | 169 | 170 |
171 |
172 | 173 |

Our Solutions For You

174 | 175 |

176 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis ac. Id massa scelerisque 177 | venenatis, 178 | massa gravida donec orci. 179 |

180 | 181 |
    182 | 183 |
  • 184 |
    185 | 186 |
    187 | support 189 |
    190 | 191 |
    192 | 193 |

    194 | Support 195 |

    196 | 197 |

    198 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis consectetur 199 | adipiscing elit. 200 |

    201 | 202 | 203 | Learn More 204 | 205 | 206 | 207 | 208 |
    209 | 210 |
    211 |
    • 212 | 213 |
  • 214 |
    215 | 216 |
    217 | Engagement 219 |
    220 | 221 |
    222 | 223 |

    224 | Engagement 225 |

    226 | 227 |

    228 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis consectetur 229 | adipiscing elit. 230 |

    231 | 232 | 233 | Learn More 234 | 235 | 236 | 237 | 238 |
    239 | 240 |
    241 |
    • 242 | 243 |
  • 244 |
    245 | 246 |
    247 | Marketing 249 |
    250 | 251 |
    252 | 253 |

    254 | Marketing 255 |

    256 | 257 |

    258 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis consectetur 259 | adipiscing elit. 260 |

    261 | 262 | 263 | Learn More 264 | 265 | 266 | 267 | 268 |
    269 | 270 |
    271 |
    • 272 | 273 |
274 | 275 |
276 |
277 | 278 | 279 | 280 | 281 | 282 | 285 | 286 |
287 |
288 | 289 |
290 | 291 |

Our Awesome Features To Serve You

292 | 293 |

294 | Planning, tracking and delivering your team’s best work has never been easier. We make it easiest for you 295 | through the 296 | software. 297 |

298 | 299 |
    300 | 301 |
  • 302 | 304 | 305 |

    Automate Instagram

    306 |
    • 307 | 308 |
  • 309 | 311 | 312 |

    Drive Sale

    313 |
    • 314 | 315 |
  • 316 | 318 | 319 |

    Get More Leads

    320 |
    • 321 | 322 |
  • 323 | 325 | 326 |

    Engage Prospects

    327 |
    • 328 | 329 |
330 | 331 |
332 | 333 | 346 | 347 |
348 |
349 | 350 | 351 | 352 | 353 | 354 | 357 | 358 |
359 |
360 | 361 |

What We Do

362 | 363 |

364 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis ac. Id massa scelerisque 365 | venenatis, 366 | massa gravida donec orci. 367 |

368 | 369 | 488 | 489 |

490 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eget gravida facilisis maecenas vitae. 491 | 492 | View All Features 493 | 494 | 495 | 496 |

497 | 498 |
499 |
500 | 501 | 502 | 503 | 504 | 505 | 508 | 509 |
510 |
511 | 512 |
513 | stats 515 |
516 | 517 |
    518 | 519 |
  • 520 |

    521 | 386 522 | million 523 |

    524 | 525 |

    Human Actions Saved On Techx

    526 |
    • 527 | 528 |
  • 529 |

    530 | 999 531 | million 532 |

    533 | 534 |

    Users Throughout The World

    535 |
    • 536 | 537 |
  • 538 |

    539 | 200 540 | percent 541 |

    542 | 543 |

    Revenue Growth

    544 |
    • 545 | 546 |
  • 547 |

    548 | 50 549 | software 550 |

    551 | 552 |

    Integration Support In Techx

    553 |
    • 554 | 555 |
556 | 557 |
558 |
559 | 560 | 561 | 562 | 563 | 564 | 567 | 568 |
569 |
570 | 571 |
572 | 573 |

Download Mobile App To Stay Connected

574 | 575 |

576 | Techx Projects gives you the added advantage of several other Techx apps and third party apps through 577 | seamless 578 | integrations. 579 |

580 | 581 |
582 | 583 | 584 | play store icon 585 | 586 | 587 | GET IT ON 588 | Google Play 589 | 590 | 591 | 592 | 593 | apple store icon 594 | 595 | 596 | GET IT ON 597 | Apple Store 598 | 599 | 600 | 601 |
602 | 603 |
604 | 605 |
606 | app screenshot 608 |
609 | 610 |
611 |
612 | 613 | 614 | 615 | 616 | 617 | 620 | 621 |
622 |
623 | 624 |
625 |

24/7 Customer Support

626 | 627 |

628 | Our team is here to provide you with personalized and outstanding service. We also offer a range of 629 | self-learning tools 630 | in our support center: 631 |

632 |
633 | 634 | Contact Us Now 635 | 636 |
637 |
638 | 639 |
640 |
641 | 642 | 643 | 644 | 645 | 646 | 649 | 650 | 786 | 787 | 788 | 789 | 790 | 791 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 806 | 807 | 808 | 811 | 812 | 813 | 814 | 815 | 816 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Techx - Make Chat Easy 2 | 3 | 4 | 5 | #---------- HEADER ----------# 6 | 7 | Techx 8 | 9 | Home 10 | Services 11 | Features 12 | About 13 | Blog 14 | Contact Us 15 | 16 | Get Started 17 | 18 | aria-label = Toggle menu 19 | 20 | 21 | 22 | 23 | 24 | 25 | #---------- HERO ----------# 26 | 27 | alt = hero banner 28 | 29 | Make Chat Easy For Today's Digital Customers 30 | 31 | Techx is the ecommerce helpdesk center that turns your customer service into a profit center without any delay and increase your sale. 32 | 33 | placeholder = Enter Your Email 34 | 35 | Start Free Trial 36 | 37 | alt = Checkmark icon 38 | Live Chat 39 | Ticketing 40 | Knowledge Base 41 | Chat pages 42 | Team chat 43 | 44 | 45 | 46 | #---------- SERVICE ----------# 47 | 48 | Our Solutions For You 49 | 50 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis ac. Id massa scelerisque venenatis, massa gravida donec orci. 51 | 52 | alt = support 53 | Support 54 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis consectetur adipiscing elit. 55 | 56 | Learn More 57 | 58 | 59 | 60 | alt = engagement 61 | Engagement 62 | 63 | alt = marketing 64 | Marketing 65 | 66 | 67 | 68 | 69 | #---------- FEATURES ----------# 70 | 71 | Our Awesome Features To Serve You 72 | 73 | Planning, tracking and delivering your team’s best work has never been easier. We make it easiest for you through the software. 74 | 75 | Automate Instagram 76 | 77 | Drive Sale 78 | 79 | Get More Leads 80 | 81 | Engage Prospects 82 | 83 | alt = features image 84 | 85 | 86 | 87 | #---------- ABOUT ----------# 88 | 89 | What We Do 90 | 91 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet nulla duis ac. Id massa scelerisque venenatis, massa gravida donec orci. 92 | 93 | alt = Automated Ticket Routing 94 | 95 | Automated Ticket Routing 96 | 97 | Lorem ipsum dolor sit amet, consect etur adipiscing elit. 98 | 99 | Learn More 100 | 101 | 102 | Workflow Automation 103 | 104 | Automated Callback 105 | 106 | Customer Feedback Surveys 107 | 108 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eget gravida facilisis maecenas vitae. 109 | 110 | View All Features 111 | 112 | 113 | 114 | 115 | #---------- STATS ----------# 116 | 117 | alt = stats 118 | 119 | 386 120 | million 121 | Human Actions Saved On Techx 122 | 123 | 999 124 | million 125 | Users Throughout The World 126 | 127 | 200 128 | percent 129 | Revenue Growth 130 | 131 | 50 132 | software 133 | Integration Support In Techx 134 | 135 | 136 | 137 | #---------- APP ----------# 138 | 139 | Download Mobile App To Stay Connected 140 | 141 | Techx Projects gives you the added advantage of several other Techx apps and third party apps through seamless integrations. 142 | 143 | alt = play store icon 144 | GET IT ON 145 | Google Play 146 | 147 | alt = apple store icon 148 | Apple Store 149 | 150 | alt = app screenshot 151 | 152 | 153 | 154 | #---------- SUPPORT ----------# 155 | 156 | 24/7 Customer Support 157 | 158 | Our team is here to provide you with personalized and outstanding service. We also offer a range of self-learning tools in our support center: 159 | 160 | Contact Us Now 161 | 162 | 163 | 164 | #---------- FOOTER ----------# 165 | 166 | Techx 167 | 168 | Services 169 | 170 | Web Design 171 | Web Development 172 | Social Marketing 173 | WordPress 174 | Content Writing 175 | 176 | Quick Links 177 | 178 | About Us 179 | Portfolio 180 | Pricing Plan 181 | FAQ 182 | Download Apps 183 | 184 | Contact Us 185 | 186 | Call Us: 187 | +(323) 750-1234 188 | Address: 189 | Vermont Ave, Los Angeles, CA 90044 190 | Mail Us: 191 | hello@Techx.com 192 | 193 | 194 | © 2022 Techx. All rights reserved by codewithsadee 195 | 196 | Privacy Policy 197 | Security 198 | Terms & Conditions 199 | 200 | 201 | 202 | #---------- BACK TO TOP ----------# 203 | 204 | aria-labe = Back to top 205 | 206 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/techx/abcdf38c3f00cc64fa4cc8bfd8c66b996a4b6def/readme-images/desktop.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 12 | ``` 13 | 14 | Ionicon 15 | 16 | ``` html 17 | 18 | 19 | ``` 20 | 21 | --- 22 | 23 | ## Colors 24 | 25 | ``` css 26 | --gold-web-golden: hsl(50, 95%, 56%); 27 | --spanish-orange: hsl(24, 100%, 45%); 28 | --persian-green: hsl(175, 80%, 33%); 29 | --granite-gray: hsl(0, 0%, 40%); 30 | --spring-green: hsl(143, 85%, 58%); 31 | --ultramarine: hsl(260, 100%, 44%); 32 | --blue-violet: hsl(272, 76%, 53%); 33 | --smoky-black: hsl(0, 0%, 7%); 34 | --dark-orange: hsl(33, 100%, 50%); 35 | --winter-sky: hsl(332, 100%, 51%); 36 | --cultured-1: hsl(0, 0%, 98%); 37 | --cultured-2: hsl(0, 0%, 95%); 38 | --cultured-3: hsl(0, 0%, 94%); 39 | --light-gray: hsl(0, 0%, 80%); 40 | --alice-blue: hsl(206, 89%, 93%); 41 | --white_50: hsla(0, 0%, 100%, 0.5); 42 | --white-1: hsl(0, 0%, 100%); 43 | --white-2: hsl(0, 0%, 99%); 44 | --black: hsl(0, 0%, 0%); 45 | ``` 46 | 47 | ## Typography 48 | 49 | ``` css 50 | --ff-spartan: 'League Spartan', sans-serif; 51 | 52 | --fs-1: 3rem; 53 | --fs-2: 2.7rem; 54 | --fs-3: 2.2rem; 55 | --fs-4: 1.8rem; 56 | --fs-5: 1.6rem; 57 | 58 | --fw-400: 400; 59 | --fw-500: 500; 60 | --fw-600: 600; 61 | --fw-700: 700; 62 | --fw-900: 900; 63 | ``` 64 | 65 | ## Spacing 66 | 67 | ``` css 68 | --section-padding: 60px; 69 | ``` 70 | 71 | ## Shadow 72 | 73 | ``` css 74 | --shadow-1: 0 2px 25px hsla(0, 0%, 0%, 0.1); 75 | --shadow-2: 0 8px 14px hsla(0, 0%, 0%, 0.1); 76 | --shadow-3: 0 14px 30px hsla(0, 0%, 0%, 0.05); 77 | ``` 78 | 79 | ## Border Radius 80 | 81 | ``` css 82 | --radius-6: 6px; 83 | --radius-12: 12px; 84 | ``` 85 | 86 | ## Gradient 87 | 88 | ``` css 89 | --gradient-1: linear-gradient(to right, var(--winter-sky), var(--dark-orange)); 90 | --gradient-2: linear-gradient(to right, var(--ultramarine), var(--blue-violet)); 91 | --gradient-3: linear-gradient(to right, var(--winter-sky), var(--dark-orange)); 92 | --gradient-4: linear-gradient(to right, var(--ultramarine), var(--blue-violet)); 93 | --gradient-5: linear-gradient(to right, var(--persian-green), var(--spring-green)); 94 | --gradient-6: linear-gradient(to right, var(--spanish-orange), var(--gold-web-golden)); 95 | ``` 96 | 97 | ## Transition 98 | 99 | ``` css 100 | --transition-1: 0.25s ease; 101 | --transition-2: 0.5s ease; 102 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 103 | ``` 104 | --------------------------------------------------------------------------------