├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── feature-banner-bg.png │ ├── feature-banner.png │ ├── footer-1.png │ ├── footer-2.png │ ├── hero.png │ ├── logo.png │ ├── music.png │ └── overview-banner.png └── js │ └── script.js ├── favicon.ico ├── index.html ├── index.txt └── website-demo-image └── desktop.png /README.md: -------------------------------------------------------------------------------- 1 | # Pod - Audio streaming app landing page 2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/pod-audio_sreaming-app-landing_page) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/pod-audio_sreaming-app-landing_page) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/vcard-personal-portfolio?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/2VN-O7lZX0E?style=social)](https://youtu.be/2VN-O7lZX0E) 8 | 9 | Pod is a fully responsive audio streaming app landing page, responsive for all devices, built using HTML, CSS, and JavaScript. 10 | 11 | ## Demo 12 | 13 | ![Pod Desktop Demo](./website-demo-image/desktop.png "Desktop Demo") 14 | 15 | ## Prerequisites 16 | 17 | Before you begin, ensure you have met the following requirements: 18 | 19 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 20 | 21 | ## Installing Pod 22 | 23 | To install **Pod**, follow these steps: 24 | 25 | Linux and macOS: 26 | 27 | ```bash 28 | sudo git clone https://github.com/codewithsadee/pod-audio_sreaming-app-landing_page.git 29 | ``` 30 | 31 | Windows: 32 | 33 | ```bash 34 | git clone https://github.com/codewithsadee/pod-audio_sreaming-app-landing_page.git 35 | ``` 36 | 37 | ## Contact 38 | 39 | If you want to contact me you can reach me on [Twitter](https://www.twitter.com/codewithsadee). 40 | 41 | ## License 42 | 43 | This project is **free to use** and does not contains any license. 44 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | * #style.css 3 | \*-----------------------------------*/ 4 | 5 | 6 | /** 7 | * copyright 2022 @codewithsadee 8 | */ 9 | 10 | 11 | 12 | 13 | 14 | /*-----------------------------------*\ 15 | * #CUSTOM PROPERTY 16 | \*-----------------------------------*/ 17 | 18 | :root { 19 | 20 | /** 21 | * colors 22 | */ 23 | 24 | --white: hsl(0, 0%, 100%); 25 | --black: hsl(0, 0%, 0%); 26 | --amaranth: hsl(349, 69%, 53%); 27 | --xiketic-1: hsl(272, 55%, 6%); 28 | --xiketic-2: hsl(256, 100%, 3%); 29 | --nsu-purple: hsl(270, 55%, 31%); 30 | --silver-sand: hsl(220, 10%, 76%); 31 | --purple-violet: hsl(266, 55%, 15%); 32 | --battleship-gray: hsl(0, 0%, 70%); 33 | --light-periwinkle: hsl(240, 30%, 83%); 34 | --maximum-blue-perple: hsl(231, 50%, 77%); 35 | 36 | /** 37 | * typography 38 | */ 39 | 40 | --ff-poppins: "Poppins", sans-serif; 41 | 42 | --fs-1: 36px; 43 | --fs-2: 30px; 44 | --fs-3: 22px; 45 | --fs-4: 18px; 46 | --fs-5: 16px; 47 | --fs-6: 14px; 48 | 49 | --fw-500: 500; 50 | --fw-600: 600; 51 | 52 | /** 53 | * transition 54 | */ 55 | 56 | --transition: 0.15s ease-in-out; 57 | 58 | } 59 | 60 | 61 | 62 | 63 | 64 | /*-----------------------------------*\ 65 | * #RESET 66 | \*-----------------------------------*/ 67 | 68 | *, *::before, *::after { 69 | margin: 0; 70 | padding: 0; 71 | box-sizing: border-box; 72 | } 73 | 74 | li { list-style: none; } 75 | 76 | a { text-decoration: none; } 77 | 78 | img, span, button, a, ion-icon { display: block; } 79 | 80 | button { 81 | background: none; 82 | border: none; 83 | font: inherit; 84 | cursor: pointer; 85 | } 86 | 87 | html { 88 | font-family: var(--ff-poppins); 89 | color: var(--white); 90 | scroll-behavior: smooth; 91 | } 92 | 93 | body { overflow-x: hidden; } 94 | 95 | ::-webkit-scrollbar { width: 10px; } 96 | 97 | ::-webkit-scrollbar-track { background: var(--xiketic-1); } 98 | 99 | ::-webkit-scrollbar-thumb { 100 | background: var(--nsu-purple); 101 | border-radius: 10px; 102 | } 103 | 104 | ::-webkit-scrollbar-button { 105 | height: 10px; 106 | background: var(--xiketic-1); 107 | } 108 | 109 | 110 | 111 | 112 | 113 | /*-----------------------------------*\ 114 | * #REUSED STYLE 115 | \*-----------------------------------*/ 116 | 117 | .container { 118 | padding: 30px 15px; 119 | padding-right: 8px; 120 | } 121 | 122 | .btn-primary { 123 | background: var(--amaranth); 124 | color: var(--white); 125 | font-size: var(--fs-6); 126 | font-weight: var(--fw-500); 127 | text-transform: capitalize; 128 | padding: 12px 40px; 129 | border-radius: 25px; 130 | } 131 | 132 | .btn-primary:hover { --amaranth: hsl(349, 69%, 43%); } 133 | 134 | .h1, 135 | .h2, 136 | .h3, 137 | .h5 { 138 | font-weight: var(--fw-500); 139 | line-height: 1.3; 140 | } 141 | 142 | .h1 { font-size: var(--fs-1); } 143 | 144 | .h2 { font-size: var(--fs-2); } 145 | 146 | .h3 { font-size: var(--fs-3); } 147 | 148 | .h5 { 149 | font-size: var(--fs-5); 150 | font-weight: var(--fw-600); 151 | } 152 | 153 | 154 | 155 | 156 | 157 | /*-----------------------------------*\ 158 | * #HEADER 159 | \*-----------------------------------*/ 160 | 161 | header { 162 | position: relative; 163 | background: var(--xiketic-1); 164 | } 165 | 166 | header .container { 167 | display: flex; 168 | justify-content: space-between; 169 | align-items: center; 170 | } 171 | 172 | .navbar { 173 | background: var(--purple-violet); 174 | position: fixed; 175 | bottom: 100%; 176 | left: 0; 177 | width: 100%; 178 | padding: 20px 10px; 179 | box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.5); 180 | visibility: hidden; 181 | transition: var(--transition); 182 | z-index: 1; 183 | } 184 | 185 | .navbar.active { 186 | transform: translateY(100%); 187 | visibility: visible; 188 | } 189 | 190 | .navbar-link { 191 | width: max-content; 192 | color: var(--white); 193 | font-size: var(--fs-6); 194 | font-weight: var(--fw-500); 195 | padding: 10px 20px; 196 | border-radius: 8px; 197 | } 198 | 199 | .navbar-link:hover { background: var(--nsu-purple); } 200 | 201 | .navbar .btn-primary { display: none; } 202 | 203 | .nav-open-btn, 204 | .nav-close-btn { 205 | background: var(--white); 206 | color: var(--black); 207 | font-size: 30px; 208 | padding: 3px; 209 | border-radius: 8px; 210 | } 211 | 212 | .nav-close-btn { 213 | position: absolute; 214 | top: 20px; 215 | right: 15px; 216 | } 217 | 218 | 219 | 220 | 221 | 222 | /*-----------------------------------*\ 223 | * #MAIN 224 | \*-----------------------------------*/ 225 | 226 | main { background: var(--xiketic-1); } 227 | 228 | 229 | 230 | 231 | 232 | /*-----------------------------------*\ 233 | * #HERO 234 | \*-----------------------------------*/ 235 | 236 | .hero { 237 | min-height: 80vh; 238 | display: flex; 239 | justify-content: flex-start; 240 | align-items: center; 241 | padding: 100px 0 130px; 242 | } 243 | 244 | .hero-title { margin-bottom: 50px; } 245 | 246 | 247 | 248 | 249 | 250 | /*-----------------------------------*\ 251 | * #DOWNLOAD 252 | \*-----------------------------------*/ 253 | 254 | .download { padding: 80px 0; } 255 | 256 | .download-list { 257 | display: grid; 258 | grid-template-columns: 1fr; 259 | place-items: center; 260 | gap: 40px; 261 | } 262 | 263 | .download-link { 264 | max-width: 150px; 265 | color: var(--white); 266 | font-size: var(--fs-4); 267 | text-align: center; 268 | } 269 | 270 | .download-link ion-icon { 271 | margin: auto; 272 | font-size: 65px; 273 | margin-bottom: 15px; 274 | } 275 | 276 | 277 | 278 | 279 | 280 | /*-----------------------------------*\ 281 | * #FEATURES 282 | \*-----------------------------------*/ 283 | 284 | .features { 285 | padding: 80px 0; 286 | display: grid; 287 | grid-template-columns: 1fr; 288 | place-items: center; 289 | gap: 60px; 290 | } 291 | 292 | .features-item:not(:last-child) { margin-bottom: 50px; } 293 | 294 | .features-item-title { margin-bottom: 20px; } 295 | 296 | .features-item-text { color: var(--light-periwinkle); } 297 | 298 | .feature-banner { position: relative; } 299 | 300 | .feature-banner-bg { 301 | position: absolute; 302 | top: 5%; 303 | left: 50%; 304 | transform: translateX(calc(-50% - 3px)); 305 | width: 125%; 306 | } 307 | 308 | .banner-img { 309 | position: relative; 310 | left: 5px; 311 | width: 100%; 312 | margin: auto; 313 | } 314 | 315 | 316 | 317 | 318 | 319 | /*-----------------------------------*\ 320 | * #OVERVIEW 321 | \*-----------------------------------*/ 322 | 323 | .overview { padding: 80px 0; } 324 | 325 | .overview-card { 326 | background: var(--xiketic-2); 327 | border-radius: 12px; 328 | box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.5); 329 | } 330 | 331 | .overview-banner { padding: 40px 0; } 332 | 333 | .overview-banner img { 334 | width: 100%; 335 | max-width: 320px; 336 | margin: auto; 337 | } 338 | 339 | .overview-content { padding: 0 25px 40px; } 340 | 341 | .overview-title { margin-bottom: 20px; } 342 | 343 | .overview-text { 344 | margin-bottom: 40px; 345 | color: var(--light-periwinkle); 346 | } 347 | 348 | .overview-item { 349 | display: flex; 350 | align-items: flex-start; 351 | gap: 10px; 352 | } 353 | 354 | .overview-item:not(:last-child) { margin-bottom: 20px; } 355 | 356 | .overview-item ion-icon { 357 | color: var(--amaranth); 358 | font-size: 20px; 359 | } 360 | 361 | .overview-item span { 362 | font-size: var(--fs-6); 363 | width: calc(100% - 30px); 364 | } 365 | 366 | 367 | 368 | 369 | 370 | /*-----------------------------------*\ 371 | * #BLOG 372 | \*-----------------------------------*/ 373 | 374 | .blog { padding: 80px 0; } 375 | 376 | .blog-title { 377 | text-align: center; 378 | margin-bottom: 60px; 379 | } 380 | 381 | .blog-list { 382 | display: grid; 383 | grid-template-columns: 1fr; 384 | gap: 60px; 385 | } 386 | 387 | .blog-banner { 388 | position: relative; 389 | height: 250px; 390 | margin-bottom: 40px; 391 | } 392 | 393 | .blog-banner img { 394 | width: 100%; 395 | height: 100%; 396 | object-fit: cover; 397 | border-radius: 10px; 398 | } 399 | 400 | .blog-banner time { 401 | position: absolute; 402 | bottom: -15px; 403 | left: 50%; 404 | transform: translateX(-50%); 405 | background: var(--amaranth); 406 | color: var(--white); 407 | font-size: var(--fs-6); 408 | font-weight: var(--fw-600); 409 | text-align: center; 410 | min-width: 130px; 411 | padding: 8px 0; 412 | border-radius: 20px; 413 | } 414 | 415 | .blog-post-title { 416 | color: var(--white); 417 | margin-bottom: 10px; 418 | } 419 | 420 | .blog-post:hover .blog-post-title { text-decoration: underline; } 421 | 422 | .blog-post-text { 423 | color: var(--silver-sand); 424 | font-size: var(--fs-6); 425 | padding-right: 50px; 426 | } 427 | 428 | 429 | 430 | 431 | 432 | /*-----------------------------------*\ 433 | * #FOOTER 434 | \*-----------------------------------*/ 435 | 436 | footer { background: var(--xiketic-2); } 437 | 438 | footer .container { padding: 80px 15px; } 439 | 440 | .footer-brand { margin-bottom: 40px; } 441 | 442 | .footer-logo { margin-bottom: 30px; } 443 | 444 | .footer-brand p { 445 | font-size: var(--fs-6); 446 | font-weight: 400; 447 | margin-bottom: 20px; 448 | } 449 | 450 | .social-list { 451 | display: flex; 452 | align-items: center; 453 | gap: 10px; 454 | } 455 | 456 | .social-link { 457 | color: var(--maximum-blue-perple); 458 | font-size: 20px; 459 | } 460 | 461 | .social-link:hover { color: var(--white); } 462 | 463 | .footer-link-box { 464 | display: grid; 465 | grid-template-columns: 1fr; 466 | gap: 30px; 467 | } 468 | 469 | .footer-item-title { margin-bottom: 20px; } 470 | 471 | .footer-link { 472 | width: max-content; 473 | color: var(--maximum-blue-perple); 474 | font-size: var(--fs-6); 475 | margin-bottom: 8px; 476 | } 477 | 478 | .footer-link:hover { text-decoration: underline; } 479 | 480 | .footer-btn-group > a { width: max-content; } 481 | 482 | .footer-btn-group img:first-of-type { margin-bottom: 20px; } 483 | 484 | .copyright { 485 | color: var(--maximum-blue-perple); 486 | padding: 20px 15px; 487 | text-align: center; 488 | font-size: var(--fs-6); 489 | border-top: 1px solid hsla(240, 30%, 83%, 0.1); 490 | } 491 | 492 | 493 | 494 | 495 | 496 | /*-----------------------------------*\ 497 | * #GO TO TOP 498 | \*-----------------------------------*/ 499 | 500 | .go-top { 501 | position: fixed; 502 | bottom: 20px; 503 | right: 20px; 504 | background: var(--amaranth); 505 | color: var(--white); 506 | font-size: 20px; 507 | width: 40px; 508 | height: 40px; 509 | display: grid; 510 | place-items: center; 511 | border-radius: 50%; 512 | box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.5); 513 | opacity: 0; 514 | visibility: hidden; 515 | pointer-events: none; 516 | transition: opacity 0.25s ease-in; 517 | } 518 | 519 | .go-top:hover { --amaranth: hsl(349, 69%, 43%); } 520 | 521 | .go-top.active { 522 | opacity: 1; 523 | visibility: visible; 524 | pointer-events: all; 525 | } 526 | 527 | 528 | 529 | 530 | 531 | /*-----------------------------------*\ 532 | * #RESPONSIVE 533 | \*-----------------------------------*/ 534 | 535 | /** 536 | * responsive larger than 360px screen 537 | */ 538 | 539 | @media (min-width: 360px) { 540 | 541 | /** 542 | * CUSTOM PROPERTY 543 | */ 544 | 545 | :root { 546 | 547 | /** 548 | * typography 549 | */ 550 | 551 | --fs-1: 42px; 552 | --fs-2: 32px; 553 | 554 | } 555 | 556 | } 557 | 558 | 559 | 560 | 561 | 562 | /** 563 | * responsive larger than 450px screen 564 | */ 565 | 566 | @media (min-width: 450px) { 567 | 568 | /** 569 | * CUSTOM PROPERTY 570 | */ 571 | 572 | :root { 573 | 574 | /** 575 | * typography 576 | */ 577 | 578 | --fs-1: 48px; 579 | --fs-2: 36px; 580 | --fs-3: 24px; 581 | 582 | } 583 | 584 | 585 | 586 | /** 587 | * FEATURES 588 | */ 589 | 590 | .feature-banner-bg { width: 150%; } 591 | 592 | 593 | 594 | /** 595 | * OVERVIEW 596 | */ 597 | 598 | .overview-content { padding: 0 40px 50px; } 599 | 600 | 601 | 602 | /** 603 | * BLOG 604 | */ 605 | 606 | .blog-title { --fs-2: 32px; } 607 | 608 | .blog-post-title { --fs-3: 22px; } 609 | 610 | } 611 | 612 | 613 | 614 | 615 | 616 | /** 617 | * responsive larger than 600px screen 618 | */ 619 | 620 | @media (min-width: 600px) { 621 | 622 | /** 623 | * CUSTOM PROPERTY 624 | */ 625 | 626 | :root { 627 | 628 | /** 629 | * typography 630 | */ 631 | 632 | --fs-1: 52px; 633 | 634 | } 635 | 636 | 637 | 638 | /** 639 | * REUSED STYLE 640 | */ 641 | 642 | .container { 643 | max-width: 520px; 644 | margin: auto; 645 | } 646 | 647 | 648 | 649 | /** 650 | * BLOG 651 | */ 652 | 653 | .blog-banner { height: 300px; } 654 | 655 | .blog-title { --fs-2: 42px; } 656 | 657 | 658 | 659 | /** 660 | * FOOTER 661 | */ 662 | 663 | .footer-brand { margin-bottom: 40px; } 664 | 665 | .footer-link-box { grid-template-columns: 1fr 1fr; } 666 | 667 | } 668 | 669 | 670 | 671 | 672 | 673 | /** 674 | * responsive larger than 768px screen 675 | */ 676 | 677 | @media (min-width: 768px) { 678 | 679 | /** 680 | * REUSED STYLE 681 | */ 682 | 683 | .container { max-width: 700px; } 684 | 685 | 686 | 687 | /** 688 | * DOWNLOAD 689 | */ 690 | 691 | .download-list { 692 | grid-template-columns: repeat(3, 1fr); 693 | max-width: fit-content; 694 | margin: auto; 695 | gap: 80px; 696 | } 697 | 698 | 699 | 700 | /** 701 | * FEATURES 702 | */ 703 | 704 | .features-item { 705 | max-width: 450px; 706 | margin-inline: auto; 707 | text-align: center; 708 | } 709 | 710 | .feature-banner-bg { width: 170%; } 711 | 712 | 713 | 714 | /** 715 | * BLOG 716 | */ 717 | 718 | .blog-list { grid-template-columns: 1fr 1fr; } 719 | 720 | } 721 | 722 | 723 | 724 | 725 | 726 | /** 727 | * responsive larger than 1024px screen 728 | */ 729 | 730 | @media (min-width: 1024px) { 731 | 732 | /** 733 | * REUSED STYLE 734 | */ 735 | 736 | .container { max-width: 970px; } 737 | 738 | 739 | 740 | /** 741 | * HEADER 742 | */ 743 | 744 | .navbar { 745 | position: static; 746 | visibility: visible; 747 | background: none; 748 | padding: 0; 749 | box-shadow: none; 750 | } 751 | 752 | .nav-open-btn, 753 | .nav-close-btn { display: none; } 754 | 755 | .navbar-list { 756 | display: flex; 757 | justify-content: flex-end; 758 | align-items: center; 759 | } 760 | 761 | .navbar-link { position: relative; } 762 | 763 | .navbar-link:hover { background: none; } 764 | 765 | .navbar-link::before { 766 | content: ""; 767 | position: absolute; 768 | bottom: 0; 769 | left: 25%; 770 | background: transparent; 771 | width: 50%; 772 | height: 2px; 773 | } 774 | 775 | .navbar-link:hover::before { background: var(--white); } 776 | 777 | .navbar .btn-primary { 778 | display: block; 779 | margin-left: 15px; 780 | } 781 | 782 | 783 | 784 | /** 785 | * HERO 786 | */ 787 | 788 | .hero { position: relative; } 789 | 790 | .hero-content { width: 50%; } 791 | 792 | .hero-banner { 793 | position: absolute; 794 | top: 50%; 795 | right: -100px; 796 | transform: translateY(-50%); 797 | background: url("../images/hero.png") no-repeat; 798 | background-size: contain; 799 | width: 70%; 800 | padding-bottom: 50%; 801 | } 802 | 803 | 804 | 805 | /** 806 | * FEATURES 807 | */ 808 | 809 | .features { 810 | grid-template-columns: repeat(3, 1fr); 811 | gap: 100px; 812 | } 813 | 814 | .features-list:first-child li { text-align: right; } 815 | 816 | .features-list:last-child li { text-align: left; } 817 | 818 | 819 | 820 | /** 821 | * OVERVIEW 822 | */ 823 | 824 | .overview-card { 825 | display: flex; 826 | justify-content: space-between; 827 | align-items: center; 828 | } 829 | 830 | .overview-banner img { max-width: 380px; } 831 | 832 | .overview-content { 833 | width: 55%; 834 | padding: 40px; 835 | } 836 | 837 | 838 | 839 | /** 840 | * BLOG 841 | */ 842 | 843 | .blog-list { grid-template-columns: repeat(3, 1fr); } 844 | 845 | .blog-banner { height: 200px; } 846 | 847 | 848 | 849 | /** 850 | * FOOTER 851 | */ 852 | 853 | footer .container { 854 | display: flex; 855 | justify-content: space-between; 856 | align-items: flex-start; 857 | } 858 | 859 | .footer-link-box { grid-template-columns: repeat(4, 1fr); } 860 | 861 | .footer-btn-group { margin-left: 20px; } 862 | 863 | } 864 | 865 | 866 | 867 | 868 | 869 | /** 870 | * responsive larger than 1200px screen 871 | */ 872 | 873 | @media (min-width: 1200px) { 874 | 875 | /** 876 | * CUSTOM PROPERTY 877 | */ 878 | 879 | :root { 880 | 881 | /** 882 | * typography 883 | */ 884 | 885 | --fs-1: 60px; 886 | 887 | } 888 | 889 | 890 | 891 | /** 892 | * REUSED STYLE 893 | */ 894 | 895 | .container { max-width: 1140px; } 896 | 897 | 898 | 899 | /** 900 | * HERO 901 | */ 902 | 903 | .hero { 904 | padding-top: 120px; 905 | padding-bottom: 150px; 906 | } 907 | 908 | .hero-banner { 909 | top: 55%; 910 | right: -50px; 911 | } 912 | 913 | 914 | 915 | /** 916 | * BLOG 917 | */ 918 | 919 | .blog { padding-bottom: 150px; } 920 | 921 | 922 | 923 | /** 924 | * FOOTER 925 | */ 926 | 927 | footer .container { padding: 100px 15px; } 928 | 929 | } -------------------------------------------------------------------------------- /assets/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/blog-1.jpg -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/blog-3.jpg -------------------------------------------------------------------------------- /assets/images/feature-banner-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/feature-banner-bg.png -------------------------------------------------------------------------------- /assets/images/feature-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/feature-banner.png -------------------------------------------------------------------------------- /assets/images/footer-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/footer-1.png -------------------------------------------------------------------------------- /assets/images/footer-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/footer-2.png -------------------------------------------------------------------------------- /assets/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/hero.png -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/music.png -------------------------------------------------------------------------------- /assets/images/overview-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/assets/images/overview-banner.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // element toggle function 4 | const elemToggleFunc = function (elem) { elem.classList.toggle("active"); } 5 | 6 | 7 | 8 | // navbar variables 9 | const navbar = document.querySelector("[data-navbar]"); 10 | const navbarOpenBtn = document.querySelector("[data-nav-open-btn]"); 11 | const navbarCloseBtn = document.querySelector("[data-nav-close-btn]"); 12 | 13 | navbarOpenBtn.addEventListener("click", function () { 14 | elemToggleFunc(navbar); 15 | }); 16 | 17 | navbarCloseBtn.addEventListener("click", function () { 18 | elemToggleFunc(navbar); 19 | }); 20 | 21 | 22 | 23 | // go top variable 24 | const goTopBtn = document.querySelector("[data-go-top]"); 25 | 26 | // window scroll event for go top button 27 | window.addEventListener("scroll", function () { 28 | 29 | if (this.window.scrollY >= 500) { 30 | goTopBtn.classList.add("active"); 31 | } else { 32 | goTopBtn.classList.remove("active"); 33 | } 34 | 35 | }); -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pod - Live podcast app landing page 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 |
36 | 37 |
38 | 39 | 42 | 43 | 82 | 83 | 86 | 87 |
88 | 89 |
90 | 91 | 92 | 93 | 94 | 95 |
96 | 97 |
98 | 99 | 102 | 103 |
104 | 105 |
106 |

The most powerful audio streamer for devices

107 | 108 | 109 |
110 | 111 |
112 | 113 |
114 | 115 | 116 | 117 | 118 | 119 | 122 | 123 |
124 | 125 | 148 | 149 |
150 | 151 | 152 | 153 | 154 | 155 | 158 | 159 |
160 | 161 |
    162 | 163 |
  • 164 |

    Apple AirPlay

    165 | 166 |

    167 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 168 |

    169 |
    • 170 | 171 |
  • 172 |

    SONOS Wireless HiFi

    173 | 174 |

    175 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 176 |

    177 |
    • 178 | 179 |
180 | 181 |
182 | circle audio waveform 183 | 184 | 185 |
186 | 187 |
    188 | 189 |
  • 190 |

    Samsung Multiroom

    191 | 192 |

    193 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 194 |

    195 |
    • 196 | 197 |
  • 198 |

    Strategy & Design

    199 | 200 |

    201 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 202 |

    203 |
    • 204 | 205 |
206 | 207 |
208 | 209 | 210 | 211 | 212 | 213 | 216 | 217 |
218 | 219 |
220 | 221 |
222 | overview banner 223 |
224 | 225 |
226 | 227 |

Enjoy your music everywhere!

228 | 229 |

230 | Each time a digital asset is purchased or sold, Sequoir donates a percentage of the fees back into the 231 | development 232 |

233 | 234 |
    235 | 236 |
  • 237 | 238 | 239 | Works exactly like original Apple AirPlay 240 |
    • 241 | 242 |
  • 243 | 244 | 245 | AirAudio recognizes if you are listening to your music 246 |
    • 247 | 248 |
  • 249 | 250 | 251 | Create shortcuts for your favorite receivers 252 |
    • 253 | 254 |
255 | 256 |
257 | 258 |
259 | 260 |
261 | 262 | 263 | 264 | 265 | 266 | 269 | 270 |
271 | 272 |

Latest Blog & Stories

273 | 274 | 337 | 338 |
339 | 340 |
341 | 342 |
343 | 344 | 345 | 346 | 347 | 348 | 351 | 352 | 473 | 474 | 475 | 476 | 477 | 478 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 493 | 494 | 495 | 498 | 499 | 500 | 501 | 502 | 503 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Pod - Live podcast app landing page 2 | 3 | 4 | # header 5 | 6 | alt = Pod logo 7 | 8 | 9 | 10 | Home 11 | Features 12 | Overview 13 | Blog 14 | Pricing 15 | FAQ's 16 | 17 | Get started 18 | 19 | 20 | 21 | 22 | # hero 23 | 24 | The most powerful audio streamer for devices 25 | Download now 26 | 27 | 28 | # download 29 | 30 | 31 | Free downoad for iPhone 32 | 33 | alt = divider image 34 | 35 | 36 | Free downoad for Android 37 | 38 | 39 | # features 40 | 41 | Apple AirPlay 42 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 43 | 44 | SONOS Wireless HiFi 45 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 46 | 47 | alt = circle audio waveform 48 | alt = pod app 49 | 50 | Samsung Multiroom 51 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 52 | 53 | Strategy & Design 54 | Each time a digital asset is purchased or sold, Sequoir is donates a percentage 55 | 56 | 57 | # overview 58 | 59 | alt = overview banner 60 | 61 | Enjoy your music everywhere! 62 | Each time a digital asset is purchased or sold, Sequoir donates a percentage of the fees back into the development 63 | 64 | 65 | Works exactly like original Apple AirPlay 66 | 67 | 68 | AirAudio recognizes if you are listening to your music 69 | 70 | 71 | Create shortcuts for your favorite receivers 72 | 73 | 74 | # blog 75 | 76 | Latest Blog & Stories 77 | 78 | alt = See How People Are Using Your Website With Hotjar 79 | 05 Fab, 2022 80 | See How People Are Using Your Website With Hotjar 81 | Each time a digital asset is purchased or sold, Sequoir donates a percentage 82 | 83 | alt = 5 Tips to Write Your Own Website Copy 84 | 06 Fab, 2022 85 | 5 Tips to Write Your Own Website Copy 86 | Each time a digital asset is purchased or sold, Sequoir donates a percentage 87 | 88 | alt = 5 Brilliant Apps That Will Make Your Life Better 89 | 10 Fab, 2022 90 | 5 Brilliant Apps That Will Make Your Life Better 91 | Each time a digital asset is purchased or sold, Sequoir donates a percentage 92 | 93 | 94 | # footer 95 | 96 | alt = pod logo 97 | 98 | Follow us on 99 | 100 | href = https://youtube.com/c/codewithsadee 101 | 102 | 103 | href = https://github.com/codewithsadee 104 | 105 | 106 | href = https://twitter.com/codewithsadee 107 | 108 | 109 | href = https://instagram.com/codewithsadee 110 | 111 | 112 | Company 113 | About Us 114 | Features 115 | Pricing 116 | 117 | Products 118 | Blog 119 | Help Center 120 | Contact 121 | 122 | Resources 123 | FAQ’S 124 | Testimonial 125 | Terms & Conditions 126 | 127 | alt = apple store 128 | alt = google play store 129 | 130 | © Copyrights 2022 codewithsadee All rights reserved. 131 | 132 | -------------------------------------------------------------------------------- /website-demo-image/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pod-audio_sreaming-app-landing_page/7927620a2b4a6cd209a3035a80ced00761b84878/website-demo-image/desktop.png --------------------------------------------------------------------------------