├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── features-icon-1.png │ ├── features-icon-2.png │ ├── features-icon-3.png │ ├── features-icon-4.png │ ├── hero-banner.png │ ├── logo.svg │ ├── newsletter.png │ ├── service-1.png │ ├── service-2.png │ ├── shape1.png │ ├── shape2.png │ └── shape3.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images ├── desktop.png └── project-logo.png └── style-guide.md /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/solutry) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/solutry?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/solutry?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/e-XVD_8zA20?style=social)](https://youtu.be/e-XVD_8zA20) 8 | 9 |
10 |
11 | 12 | 13 | 14 |

Solutry - IT agency website

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

Secure IT solutions for a more secure environment

110 | 111 |

112 | Velit hendrerit sit auctor tempor sem. Congue mi tempor condimentum felis arcu, non cursus. Nulla pharetra 113 | porttitor sed 114 | platea arcu et leo odio. 115 |

116 | 117 | 122 | 123 |
124 | 125 |
126 | 127 |
128 | 129 | 130 | 131 | 132 | 133 | 136 | 137 |
138 |
139 | 140 |

How Can Help You

141 | 142 |

We’re helping teams do their best work

143 | 144 |
    145 | 146 |
  • 147 |
    148 | 149 |
    150 | Illustration icon 151 |
    152 | 153 |

    Zero Configuration

    154 | 155 |

    156 | Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis. 157 |

    158 | 159 | 160 | Learn More 161 | 162 | 163 | 164 | 165 |
    166 |
    • 167 | 168 |
  • 169 |
    170 | 171 |
    172 | Illustration icon 173 |
    174 | 175 |

    Code Security

    176 | 177 |

    178 | Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis. 179 |

    180 | 181 | 182 | Learn More 183 | 184 | 185 | 186 | 187 |
    188 |
    • 189 | 190 |
  • 191 |
    192 | 193 |
    194 | Illustration icon 195 |
    196 | 197 |

    Team Management

    198 | 199 |

    200 | Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis. 201 |

    202 | 203 | 204 | Learn More 205 | 206 | 207 | 208 | 209 |
    210 |
    • 211 | 212 |
  • 213 |
    214 | 215 |
    216 | Illustration icon 217 |
    218 | 219 |

    Access Controlled

    220 | 221 |

    222 | Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis. 223 |

    224 | 225 | 226 | Learn More 227 | 228 | 229 | 230 | 231 |
    232 |
    • 233 | 234 |
235 | 236 |
237 |
238 | 239 | 240 | 241 | 242 | 243 | 246 | 247 |
248 |
249 | 250 |
251 | Illustration art 252 |
253 | 254 |
255 | 256 |

Services We Offer

257 | 258 |

We are here, to help your startup business

259 | 260 |
    261 | 262 |
  • 263 | 264 |
    265 | 266 |
    267 | 268 |

    Cloud Databases

    269 | 270 |
    • 271 | 272 |
  • 273 | 274 |
    275 | 276 |
    277 | 278 |

    Website Hosting

    279 | 280 |
    • 281 | 282 |
  • 283 | 284 |
    285 | 286 |
    287 | 288 |

    Remote Desktop

    289 | 290 |
    • 291 | 292 |
  • 293 | 294 |
    295 | 296 |
    297 | 298 |

    File Backup

    299 | 300 |
    • 301 | 302 |
303 | 304 |
305 | 306 |
307 | Illustration art 308 |
309 | 310 |
311 | 312 |

Our Services

313 | 314 |

Best IT & technology service in your area

315 | 316 |
    317 | 318 |
  • 319 | 320 |
    321 | 322 |
    323 | 324 |

    Design & Development

    325 | 326 |
    • 327 | 328 |
  • 329 | 330 |
    331 | 332 |
    333 | 334 |

    Android Apps Development

    335 | 336 |
    • 337 | 338 |
  • 339 | 340 |
    341 | 342 |
    343 | 344 |

    Laravel Web Development

    345 | 346 |
    • 347 | 348 |
  • 349 | 350 |
    351 | 352 |
    353 | 354 |

    React Web Development

    355 | 356 |
    • 357 | 358 |
359 | 360 |
361 | 362 |
363 |
364 | 365 | 366 | 367 | 368 | 369 | 372 | 373 |
374 |
375 | 376 |

Latest News

377 | 378 |

Our latest articles & resources

379 | 380 | 494 | 495 |
496 |
497 | 498 | 499 | 500 | 501 | 502 | 505 | 506 | 533 | 534 |
535 |
536 | 537 | 538 | 539 | 540 | 541 | 544 | 545 | 687 | 688 | 689 | 690 | 691 | 692 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 707 | 708 | 709 | 712 | 713 | 714 | 715 | 716 | 717 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Solutry - Secure IT solutions 2 | 3 | 4 | 5 | # HEADER 6 | 7 | alt = Solutry logo 8 | 9 | 10 | 11 | 12 | Home 13 | Features 14 | Service 15 | Blog 16 | Newsletter 17 | 18 | Get Started 19 | 20 | 21 | 22 | 23 | # HERO 24 | 25 | alt = Illustration art 26 | 27 | Secure IT solutions for a more secure environment 28 | 29 | Velit hendrerit sit auctor tempor sem. Congue mi tempor condimentum felis arcu, non cursus. Nulla pharetra porttitor sed platea arcu et leo odio. 30 | 31 | Get Started Now 32 | 33 | 34 | 35 | 36 | # FEATURES 37 | 38 | How Can Help You 39 | 40 | We’re helping teams do their best work 41 | 42 | alt = Illustration icon 43 | 44 | Zero Configuration 45 | 46 | Lorem ipsum dolor sit amet, conse ctetur adipiscing elit. Sed est non feugiat sagittis. 47 | 48 | Learn More 49 | 50 | 51 | 52 | Code Security 53 | 54 | Team Management 55 | 56 | Access Controlled 57 | 58 | 59 | 60 | # SERVICE 61 | 62 | alt = Illustration art 63 | 64 | Services We Offer 65 | 66 | We are here, to help your startup business 67 | 68 | 69 | 70 | Cloud Databases 71 | Website Hosting 72 | Remote Desktop 73 | File Backup 74 | 75 | 76 | Our Services 77 | 78 | Best IT & technology service in your area 79 | 80 | Design & Development 81 | Android Apps Development 82 | Laravel Web Development 83 | React Web Development 84 | 85 | 86 | 87 | # BLOG 88 | 89 | Latest News 90 | 91 | Our latest articles & resources 92 | 93 | alt = How is technology working with new things? 94 | 95 | 96 | Technology 97 | 98 | 99 | 25 Feb, 2022 100 | 101 | How is technology working with new things? 102 | 103 | alt = Top 10 important tips on IT services & design 104 | 105 | Design 106 | 107 | Top 10 important tips on IT services & design 108 | 109 | alt = How our company works in different ways 110 | 111 | Startup 112 | 113 | How our company works in different ways 114 | 115 | 116 | 117 | # NEWSLETTER 118 | 119 | alt = Illustration art 120 | 121 | Subscribe Our Newsletter 122 | 123 | The latest resources, sent to your inbox weekly 124 | 125 | placeholder = Enter your email address 126 | 127 | Subscribe Now 128 | 129 | 130 | 131 | 132 | # FOOTER 133 | 134 | alt = Solutry logo 135 | 136 | Lorem ipsum dolor sit amet, consectetur, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua minim. 137 | 138 | 139 | 140 | 2750 Quadra Street Victoria, Canada. 141 | 142 | Quick links 143 | 144 | IT Startup 145 | Software 146 | Business 147 | App 148 | Insurance 149 | Property 150 | Big Data 151 | Distance Learning 152 | Chatbot 153 | Medical 154 | 155 | Contact with us 156 | 157 | 158 | hello@solutry.com 159 | 160 | 161 | +1-485-456-0102 162 | 163 | © 2022 codewithsadee. All Rights Reserved 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | # GO TO TOP 173 | 174 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/solutry/c993ebb7a0b6e46676b5e177627ca7933d77182e/readme-images/desktop.png -------------------------------------------------------------------------------- /readme-images/project-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/solutry/c993ebb7a0b6e46676b5e177627ca7933d77182e/readme-images/project-logo.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 | --space-cadet: hsl(224, 48%, 22%); 27 | --red-crayola: hsl(342, 100%, 50%); 28 | --black-coral: hsl(219, 13%, 44%); 29 | --blue-ryb: hsl(244, 86%, 59%); 30 | --cultured: hsl(0, 0%, 96%); 31 | --white: hsl(0, 0%, 100%); 32 | ``` 33 | 34 | ## Typography 35 | 36 | ``` css 37 | --ff-be-vietnam-pro: 'Be Vietnam Pro', sans-serif; 38 | 39 | --fs-1: 1.875rem; 40 | --fs-2: 1.5rem; 41 | --fs-3: 1.063rem; 42 | --fs-4: 0.875rem; 43 | --fs-5: 0.813rem; 44 | 45 | --fw-500: 500; 46 | --fw-600: 600; 47 | --fw-700: 700; 48 | ``` 49 | 50 | ## Transition 51 | 52 | ``` css 53 | --transition: 0.25s ease; 54 | --transition-2: 0.5s ease; 55 | ``` 56 | 57 | ## Spacing 58 | 59 | ``` css 60 | --section-padding: 60px; 61 | ``` 62 | 63 | ## Border radius 64 | 65 | ``` css 66 | --radius-4: 4px; 67 | --radius-8: 8px; 68 | --radius-12: 12px; 69 | ``` 70 | --------------------------------------------------------------------------------