-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
979 lines (971 loc) · 43 KB
/
Copy pathindex.html
File metadata and controls
979 lines (971 loc) · 43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="shortcut icon"
href="./Assets/Images/favicon.ico"
type="image/x-icon"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/global.css" />
<link rel="stylesheet" href="./css/style.css" />
<title>Podcast|Landing</title>
</head>
<body>
<!-- header -->
<div class="header" id="header">
<div class="header-left">
<a class="logo" href="/">
<img src="../Assets/Images/logo.png" alt="logo" />
</a>
<ul class="nav-links" id="nav-links">
<li><a href="/">Episodes</a></li>
<li><a href="../pages/about.html">About</a></li>
<li class="mobile-only"><a href="../pages/blog.html">Blog</a></li>
<li class="mobile-only">
<a href="../pages/single-blog.html">Single Blog</a>
</li>
<li class="mobile-only">
<a href="../pages/podcast-details.html">Podcast Detail</a>
</li>
<li class="dropdown">
<a href="#">More</a>
<ul class="dropdown-content">
<li>
<a href="../pages/podcast-details.html">Podcast Detail</a>
</li>
<li><a href="../pages/blog.html">Blog</a></li>
<li><a href="../pages/single-blog.html">Single Blog</a></li>
</ul>
</li>
</ul>
</div>
<button class="hamburger" id="hamburger">
☰
<!-- This is the hamburger icon -->
</button>
<div class="cta">
<button class="btn secondary-btn">BECOME SPONSOR</button>
<button class="btn primary-btn">SUBSCRIBE</button>
</div>
</div>
<!-- header end -->
<!-- hero-section -->
<main class="hero-section">
<div class="hero-wrapper">
<h1 class="hero-title" data-aos="fade-up">
Your Daily <span>Podcast</span>
</h1>
<p class="hero-desc" data-aos="fade-up" data-aos-delay="50">
We cover all kinds of categories and a weekly special guest.
</p>
<div data-aos="fade-up" data-aos-delay="100">
<button class="btn primary-btn primary-lg">SUBSCRIBE</button>
</div>
</div>
<div class="hero-slider" data-aos="fade-up" data-aos-delay="100">
<div class="slider">
<div class="slide">
<img src="./Assets/Images/cover1.png" alt="Image 1" />
</div>
<div class="slide">
<img src="./Assets/Images/cover2.png" alt="Image 2" />
</div>
<div class="slide">
<img src="./Assets/Images/cover3.png" alt="Image 3" />
</div>
<div class="slide">
<img src="./Assets/Images/cover4.png" alt="Image 4" />
</div>
<div class="slide">
<img src="./Assets/Images/cover5.png" alt="Image 5" />
</div>
<div class="slide">
<img src="./Assets/Images/cover6.png" alt="Image 6" />
</div>
</div>
</div>
<div class="platform container">
<h3 class="title" data-aos="fade-up">Supported by:</h3>
<img
src="./Assets/Svgs/Spotify.svg"
alt="..."
data-aos="fade-up"
data-aos-delay="100"
/>
<img
src="./Assets/Svgs/GooglePodcast.svg"
alt="..."
data-aos="fade-up"
data-aos-delay="200"
/>
<img
src="./Assets/Svgs/Youtube.svg"
alt="..."
data-aos="fade-up"
data-aos-delay="300"
/>
</div>
<img
src="./Assets/Svgs/Scribble2.svg"
alt="..."
class="scribble"
data-aos="flip-left"
/>
</main>
<!-- hero-section-end -->
<!-- about-section -->
<section class="about-section container">
<div class="title-wrapper">
<h2 class="section-title" data-aos="fade-up">
Talk. Listen. Get inspired by every minute of it.
</h2>
</div>
<div class="box-wrapper">
<div class="about-box">
<img src="./Assets/Svgs/Think.svg" alt="..." data-aos="fade-up" />
<p class="about-boxa-desc" data-aos="fade-up" data-aos-delay="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ac ultrices odio.
</p>
</div>
<div class="about-box">
<img src="./Assets/Svgs/Bulb.svg" alt="..." data-aos="fade-up" />
<p class="about-boxa-desc" data-aos="fade-up" data-aos-delay="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ac ultrices odio.
</p>
</div>
</div>
<div class="about-quote" data-aos="flip-up">
<img src="./Assets/Svgs//quote.svg" alt="..." />
<h4 class="quote">
One of the best daily podcasts that covers every topic on Spotify.
</h4>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">John Smith,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Social Community Manager</p>
</div>
</div>
</div>
<img
src="./Assets/Svgs/Scribble4.svg"
alt="..."
class="scribble"
data-aos="flip-left"
/>
</section>
<!-- about-section-end -->
<!-- testimonials-section -->
<section class="testimonials-section">
<div class="title-wrapper">
<h2 class="section-title" data-aos="fade-up">
<img src="./Assets/Svgs/Sparkle2.svg" alt="..." class="left-hl" />What
our listeners say
</h2>
<p class="section-desc" data-aos="fade-up" data-aos-delay="100">
Their experience throughout every platform
</p>
</div>
<!-- slider -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="slider-with-btn" data-slider>
<ul class="slider__track" data-slider-track>
<li>
<div class="slide">
<img src="./assets/svgs/quote.svg" alt="..." class="quote" />
<p class="slide-text">
Lorem ipsum dolor sit amet consectet piscing elit, sed do
eiusmod tempor incidi ut labore et dolore magna aliqua.
</p>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">Luna lovegood,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Spotify</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="./assets/svgs/quote.svg" alt="..." class="quote" />
<p class="slide-text">
Lorem ipsum dolor sit amet consectet piscing elit, sed do
eiusmod tempor incidi ut labore et dolore magna aliqua.
</p>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">Luna lovegood,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Spotify</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="./assets/svgs/quote.svg" alt="..." class="quote" />
<p class="slide-text">
Lorem ipsum dolor sit amet consectet piscing elit, sed do
eiusmod tempor incidi ut labore et dolore magna aliqua.
</p>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">Luna lovegood,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Spotify</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="./assets/svgs/quote.svg" alt="..." class="quote" />
<p class="slide-text">
Lorem ipsum dolor sit amet consectet piscing elit, sed do
eiusmod tempor incidi ut labore et dolore magna aliqua.
</p>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">Luna lovegood,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Spotify</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="./assets/svgs/quote.svg" alt="..." class="quote" />
<p class="slide-text">
Lorem ipsum dolor sit amet consectet piscing elit, sed do
eiusmod tempor incidi ut labore et dolore magna aliqua.
</p>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">Luna lovegood,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Spotify</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="./assets/svgs/quote.svg" alt="..." class="quote" />
<p class="slide-text">
Lorem ipsum dolor sit amet consectet piscing elit, sed do
eiusmod tempor incidi ut labore et dolore magna aliqua.
</p>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">Luna lovegood,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Spotify</p>
</div>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="./assets/svgs/quote.svg" alt="..." class="quote" />
<p class="slide-text">
Lorem ipsum dolor sit amet consectet piscing elit, sed do
eiusmod tempor incidi ut labore et dolore magna aliqua.
</p>
<div class="writer">
<div class="avtar">
<img src="./Assets/Images/Avatar.png" alt="..." />
</div>
<div class="writer-name">Luna lovegood,</div>
<div class="platform">
<img
src="./Assets/Svgs/SpotifySm.svg"
alt="..."
class="platform-logo"
/>
<p class="post">Spotify</p>
</div>
</div>
</div>
</li>
</ul>
<div class="slider__buttons">
<button class="slider__button" data-slider-prev disabled>
<img src="./assets/svgs/ArrowLeftCircle.svg" alt="..." />
</button>
<button class="slider__button" data-slider-next>
<img src="./assets/svgs/ArrowRightCircle.svg" alt="..." />
</button>
</div>
</div>
</div>
<!-- slider end -->
<img
src="./Assets/Svgs/Scribble4.svg"
alt="..."
class="scribble"
data-aos="flip-left"
/>
</section>
<!-- testimonials-section-end -->
<!-- features-section -->
<section class="features-section container">
<div class="title-wrapper">
<h2 class="section-title" data-aos="fade-up">
<img
src="./Assets/Svgs/Sparkle2.svg"
alt="..."
class="right-hl"
/>Membership benefits
</h2>
<p class="section-desc" data-aos="fade-up" data-aos-delay="50">
Become our sponsor and get all benefits
</p>
</div>
<div class="feature-wrapper">
<div class="feature" data-aos="flip-left" data-aos-delay="100">
<img src="./assets/svgs/Scribble.svg" alt="..." />
<h3 class="feature-title">Topic by Request</h3>
<p class="feature-desc">
Lorem ipsum dolor sit amet consectet pis cing elit, sed do eiusmod
tempor.
</p>
</div>
<div class="feature" data-aos="flip-left" data-aos-delay="200">
<img src="./assets/svgs/ShiningStars.svg" alt="..." />
<h3 class="feature-title">Exclusive Content</h3>
<p class="feature-desc">
Lorem ipsum dolor sit amet consectet pis cing elit, sed do eiusmod
tempor.
</p>
</div>
<div class="feature" data-aos="flip-left" data-aos-delay="300">
<img src="./assets/svgs/Face 1.svg" alt="..." />
<h3 class="feature-title">Join the Community</h3>
<p class="feature-desc">
Lorem ipsum dolor sit amet consectet pis cing elit, sed do eiusmod
tempor.
</p>
</div>
<div class="feature" data-aos="flip-left" data-aos-delay="400">
<img src="./assets/svgs/Face 5.svg" alt="..." />
<h3 class="feature-title">Livestreaming Access</h3>
<p class="feature-desc">
Lorem ipsum dolor sit amet consectet pis cing elit, sed do eiusmod
tempor.
</p>
</div>
<div class="feature" data-aos="flip-left" data-aos-delay="500">
<img src="./assets/svgs/Fire.svg" alt="..." />
<h3 class="feature-title">Exclusive Episodes & Merch</h3>
<p class="feature-desc">
Lorem ipsum dolor sit amet consectet pis cing elit, sed do eiusmod
tempor.
</p>
</div>
<div class="feature" data-aos="flip-left" data-aos-delay="600">
<img src="./assets/svgs/Star.svg" alt="..." />
<h3 class="feature-title">And much more!</h3>
<p class="feature-desc">
Lorem ipsum dolor sit amet consectet pis cing elit, sed do eiusmod
tempor.
</p>
</div>
</div>
<div class="btn-wrapper">
<button class="btn primary-btn primary-lg" data-aos="fade-up">
SEE PRICING
</button>
</div>
<img
src="./Assets/Svgs/Scribble4.svg"
alt="..."
class="scribble"
data-aos="flip-left"
/>
</section>
<!-- features-section-end -->
<!-- content-section -->
<section class="content-section">
<div class="container">
<div class="title-wrapper">
<h2 class="section-title" data-aos="fade-up">Recent Episodes</h2>
<p class="section-desc" data-aos="fade-up" data-aos-delay="100">
Available on your favorite platform
</p>
</div>
<div
class="content-card-wrapper"
data-aos="fade-up"
data-aos-delay="100"
>
<div class="content-card">
<div class="episode-info">
<img src="./assets/images/Ep6.png" alt="..." />
<div class="episode-content">
<h4 class="episode-no">Eps. 6</h4>
<h3 class="episode-title red">Pandemic Becoming Endemic</h3>
<p class="episode-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac ultrices odio.
</p>
</div>
</div>
<div class="other-details">
<div class="tags">
<span class="tag">covid-19</span>
<span class="tag">health</span>
</div>
<div class="host">
<h4 class="title">Hosted by:</h4>
<div class="host-wrapper">
<img src="./assets/images/Avatar1.png" alt="avtar1" />
<img src="./assets/images/Avatar2.png" alt="avtar2" />
</div>
</div>
</div>
</div>
<div class="content-card">
<div class="episode-info">
<img src="./assets/images/Ep6.png" alt="..." />
<div class="episode-content">
<h4 class="episode-no">Eps. 5</h4>
<h3 class="episode-title">Tesla Autopilot Controversy</h3>
<p class="episode-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac ultrices odio.
</p>
</div>
</div>
<div class="other-details">
<div class="tags">
<span class="tag">automation</span>
<span class="tag">tech</span>
</div>
<div class="host">
<h4 class="title">Hosted by:</h4>
<div class="host-wrapper">
<img src="./assets/images/Avatar1.png" alt="avtar1" />
<img src="./assets/images/Avatar2.png" alt="avtar2" />
</div>
</div>
</div>
</div>
<div class="content-card">
<div class="episode-info">
<img src="./assets/images/Ep6.png" alt="..." />
<div class="episode-content">
<h4 class="episode-no">Eps. 4</h4>
<h3 class="episode-title">Women's Rights? Is it alright?</h3>
<p class="episode-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac ultrices odio.
</p>
</div>
</div>
<div class="other-details">
<div class="tags">
<span class="tag">women's rights</span>
</div>
<div class="host">
<h4 class="title">Hosted by:</h4>
<div class="host-wrapper">
<img src="./assets/images/Avatar1.png" alt="avtar1" />
<img src="./assets/images/Avatar2.png" alt="avtar2" />
</div>
</div>
</div>
</div>
<div class="content-card">
<div class="episode-info">
<img src="./assets/images/Ep6.png" alt="..." />
<div class="episode-content">
<h4 class="episode-no">Eps. 3</h4>
<h3 class="episode-title red">
How to Deal with Self-Confidence
</h3>
<p class="episode-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac ultrices odio.
</p>
</div>
</div>
<div class="other-details">
<div class="tags">
<span class="tag">self-esteem</span>
<span class="tag">health</span>
</div>
<div class="host">
<h4 class="title">Hosted by:</h4>
<div class="host-wrapper">
<img src="./assets/images/Avatar1.png" alt="avtar1" />
<img src="./assets/images/Avatar2.png" alt="avtar2" />
</div>
</div>
</div>
</div>
<div class="content-card">
<div class="episode-info">
<img src="./assets/images/Ep6.png" alt="..." />
<div class="episode-content">
<h4 class="episode-no">Eps. 2</h4>
<h3 class="episode-title red">
Type of Social Classes of People
</h3>
<p class="episode-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac ultrices odio.
</p>
</div>
</div>
<div class="other-details">
<div class="tags">
<span class="tag">social class</span>
<span class="tag">wealth</span>
</div>
<div class="host">
<h4 class="title">Hosted by:</h4>
<div class="host-wrapper">
<img src="./assets/images/Avatar1.png" alt="avtar1" />
<img src="./assets/images/Avatar2.png" alt="avtar2" />
</div>
</div>
</div>
</div>
<div class="content-card">
<div class="episode-info">
<img src="./assets/images/Ep6.png" alt="..." />
<div class="episode-content">
<h4 class="episode-no">Eps. 1</h4>
<h3 class="episode-title">Are you a Perplexed Mind Person?</h3>
<p class="episode-desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ac ultrices odio.
</p>
</div>
</div>
<div class="other-details">
<div class="tags">
<span class="tag">mind-behaviour</span>
<span class="tag">health</span>
</div>
<div class="host">
<h4 class="title">Hosted by:</h4>
<div class="host-wrapper">
<img src="./assets/images/Avatar1.png" alt="avtar1" />
<img src="./assets/images/Avatar2.png" alt="avtar2" />
</div>
</div>
</div>
</div>
<img src="./assets/svgs/Sparkle.svg" alt="..." class="sparkle" />
</div>
</div>
<div class="btn-wrapper">
<button class="btn primary-btn primary-lg" data-aos="fade-up">
SEE PRICING
</button>
</div>
<img
src="./Assets/Svgs/Scribble4.svg"
alt="..."
class="scribble"
data-aos="flip-left"
/>
</section>
<!-- pricing-section-end -->
<section class="pricing-section container">
<div class="title-wrapper">
<h2 class="section-title" data-aos="fade-up">
<img
src="./Assets/Svgs/Sparkle3.svg"
alt="..."
class="left-hl"
/>Become our sponsor
</h2>
<p class="section-desc" data-aos="fade-up" data-aos-delay="100">
Their experience throughout every platform
</p>
</div>
<div class="pricing-card-wrapper">
<div class="pricing-card" data-aos="flip-left" data-aos-delay="200">
<h3 class="card-title">Member</h3>
<p class="card-desc">
Lorem ipsum dolor sit amet consectet cing elit, sed do eiusmod
tempor.
</p>
<div class="card-cta">
<button class="btn primary-btn">SUBSCRIBE</button>
<h4 class="price">$9.99 <span>/month</span></h4>
</div>
</div>
<div
class="pricing-card primary-card"
data-aos="flip-left"
data-aos-delay="300"
>
<h3 class="card-title">
Family <span class="tag">MOST POPULAR</span>
</h3>
<p class="card-desc">
Lorem ipsum dolor sit amet consectet cing elit, sed do eiusmod
tempor.
</p>
<div class="card-cta">
<button class="btn primary-btn">SUBSCRIBE</button>
<h4 class="price">$14.99 <span>/month</span></h4>
</div>
</div>
<div class="pricing-card" data-aos="flip-left" data-aos-delay="400">
<h3 class="card-title">Official</h3>
<p class="card-desc">
Lorem ipsum dolor sit amet consectet cing elit, sed do eiusmod
tempor.
</p>
<div class="card-cta">
<button class="btn primary-btn">SUBSCRIBE</button>
<h4 class="price">$29.99 <span>/month</span></h4>
</div>
</div>
<div class="pricing-card" data-aos="flip-left" data-aos-delay="500">
<h3 class="card-title-sm">What's included:</h3>
<ul class="list">
<li class="list-item">Exclusive Content</li>
<li class="list-item">5% Discount on Merch</li>
<li class="list-item">Join the Community</li>
<li class="list-item">Livestreaming Access</li>
</ul>
</div>
<div
class="pricing-card primary-card"
data-aos="flip-left"
data-aos-delay="600"
>
<h3 class="card-title-sm">What's included:</h3>
<ul class="list">
<li class="list-item bold">Exclusive Content</li>
<li class="list-item">5% Discount on Merch</li>
<li class="list-item">Join the Community</li>
<li class="list-item">Livestreaming Access</li>
</ul>
</div>
<div class="pricing-card" data-aos="flip-left" data-aos-delay="700">
<h3 class="card-title-sm">What's included:</h3>
<ul class="list">
<li class="list-item bold">Exclusive Content</li>
<li class="list-item">5% Discount on Merch</li>
<li class="list-item">Join the Community</li>
<li class="list-item">Livestreaming Access</li>
</ul>
</div>
</div>
<img src="./Assets/Svgs/Scribble4.svg" alt="..." class="scribble" />
</section>
<!-- pricing-section-end -->
<!-- blog-section -->
<section class="blog-section container">
<div class="title-wrapper">
<h2 class="section-title" data-aos="fade-up">Article and News</h2>
<p class="section-desc" data-aos="fade-up" data-aos-delay="100">
News, tips, tricks and more
</p>
</div>
<div class="blog-wrapper" data-aos="fade-up" data-aos-delay="200">
<div class="blog">
<img src="./assets/images/Blog1.jpg" alt=".." />
<div class="blog-title-wrapper">
<h5 class="title-sm">PODCAST</h5>
<h3 class="title red">Setup your own podcast</h3>
<p class="desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minimvel iam, quis nostrud exercitation ullamco laboris...
</p>
</div>
<div class="blog-bottom">
<div class="tags">
<span class="tag">business</span>
<span class="tag">startup</span>
</div>
<span class="blog-date">Sep 14, 2021</span>
</div>
</div>
<div class="blog">
<img src="./assets/images/Blog2.jpg" alt=".." />
<div class="blog-title-wrapper">
<h5 class="title-sm">TIPS & TRICK</h5>
<h3 class="title">Doodle artwork 101</h3>
<p class="desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minimvel iam, quis nostrud exercitation ullamco laboris...
</p>
</div>
<div class="blog-bottom">
<div class="tags">
<span class="tag">art</span>
<span class="tag">creative</span>
<span class="tag">tips and trick</span>
</div>
<span class="blog-date">Sep 12, 2021</span>
</div>
</div>
<img src="./assets/svgs/Star.svg" alt="..." class="left-hl" />
<img src="./assets/svgs/Scribble3.svg" alt="..." class="right-hl" />
</div>
<div class="btn-wrapper">
<button class="btn primary-btn primary-lg" data-aos="fade-up">
BROWSE ALL
</button>
</div>
<img src="./Assets/Svgs/Scribble2.svg" alt="..." class="scribble" />
</section>
<!-- blog-section-end -->
<!-- cta-section -->
<section class="cta-section">
<div class="container">
<div class="title-wrapper" data-aos="fade-up">
<p class="tag">BETA</p>
<h2 class="section-title">Available now Pod of Cast App</h2>
<p class="section-desc">We just launched our podcast app!</p>
</div>
<div class="btn-wrapper" data-aos="fade-up" data-aos-delay="100">
<button class="btn primary-btn primary-lg">
BROWSE ALL <img src="./assets/svgs/Sparkle.svg" alt="..." />
</button>
</div>
<div class="extra" data-aos="fade-up" data-aos-delay="200">
<p class="desc">Content also available on:</p>
<div class="socials">
<img src="./assets/svgs/GooglePodcastDark.svg" alt="..." />
<img src="./assets/svgs/SpotifyDark.svg" alt="..." />
<img src="./assets/svgs/YoutubeDark.svg" alt="..." />
</div>
</div>
</div>
<img
src="./assets/images/CtaVector1.png"
alt="..."
class="cta-vector-left"
/>
<img
src="./assets/images/CtaVector2.png"
alt="..."
class="cta-vector-right"
/>
</section>
<!-- cta-section-end -->
<!-- footer-section -->
<footer class="footer-section">
<div class="container" data-aos="fade-up">
<div class="footer-content">
<div class="footer-column with-logo">
<div class="logo">
<a href="#">
<img src="../assets/images/logo.png" alt="..." />
</a>
<span class="year">©2021.</span>
</div>
<p class="desc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div class="socials">
<a href="#">
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.5775 56C17.1075 56 11.0763 54.1182 6 50.8712C10.31 51.1501 17.9161 50.4822 22.6472 45.9696C15.5302 45.643 12.3205 40.1846 11.9019 37.8519C12.5066 38.0852 15.3906 38.3651 17.0187 37.712C8.8318 35.6592 7.57586 28.4746 7.85495 26.2819C9.38999 27.355 11.9949 27.7282 13.0183 27.6349C5.38959 22.1765 8.13405 13.9655 9.48303 12.1927C14.9576 19.7773 23.1624 24.0371 33.3128 24.2741C33.1214 23.4347 33.0203 22.5608 33.0203 21.6633C33.0203 15.2218 38.2268 10 44.6494 10C48.0051 10 51.0288 11.4255 53.1514 13.7057C55.3938 13.1802 58.7686 11.9501 60.4184 10.8864C59.5868 13.8722 56.9979 16.363 55.4318 17.2862C55.4191 17.2546 55.4448 17.3176 55.4318 17.2862C56.8074 17.0781 60.5296 16.3627 62 15.3651C61.2728 17.0425 58.528 19.8315 56.2754 21.3928C56.6945 39.8761 42.553 56 23.5775 56Z"
fill="currentColor"
/>
</svg>
</a>
<a href="#">
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M49.4228 18.3111C49.4228 20.3729 47.7513 22.0444 45.6895 22.0444C43.6276 22.0444 41.9561 20.3729 41.9561 18.3111C41.9561 16.2492 43.6276 14.5778 45.6895 14.5778C47.7513 14.5778 49.4228 16.2492 49.4228 18.3111Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M32.0006 44.4444C38.8735 44.4444 44.445 38.8729 44.445 32C44.445 25.1271 38.8735 19.5555 32.0006 19.5555C25.1277 19.5555 19.5561 25.1271 19.5561 32C19.5561 38.8729 25.1277 44.4444 32.0006 44.4444ZM32.0006 39.4666C36.1243 39.4666 39.4673 36.1237 39.4673 32C39.4673 27.8762 36.1243 24.5333 32.0006 24.5333C27.8769 24.5333 24.5339 27.8762 24.5339 32C24.5339 36.1237 27.8769 39.4666 32.0006 39.4666Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.11169 31.0044C7.11169 22.641 7.11169 18.4592 8.73933 15.2648C10.171 12.4549 12.4555 10.1704 15.2654 8.73872C18.4599 7.11108 22.6416 7.11108 31.005 7.11108H32.9961C41.3596 7.11108 45.5413 7.11108 48.7357 8.73872C51.5456 10.1704 53.8301 12.4549 55.2618 15.2648C56.8895 18.4592 56.8895 22.641 56.8895 31.0044V32.9955C56.8895 41.359 56.8895 45.5407 55.2618 48.7351C53.8301 51.545 51.5456 53.8295 48.7357 55.2612C45.5413 56.8889 41.3596 56.8889 32.9961 56.8889H31.005C22.6416 56.8889 18.4599 56.8889 15.2654 55.2612C12.4555 53.8295 10.171 51.545 8.73933 48.7351C7.11169 45.5407 7.11169 41.359 7.11169 32.9955V31.0044ZM31.005 12.0889H32.9961C37.26 12.0889 40.1585 12.0927 42.399 12.2758C44.5813 12.4541 45.6973 12.7773 46.4759 13.174C48.3491 14.1284 49.8721 15.6514 50.8266 17.5247C51.2233 18.3032 51.5465 19.4193 51.7248 21.6016C51.9078 23.842 51.9117 26.7406 51.9117 31.0044V32.9955C51.9117 37.2594 51.9078 40.1579 51.7248 42.3984C51.5465 44.5807 51.2233 45.6967 50.8266 46.4753C49.8721 48.3485 48.3491 49.8715 46.4759 50.826C45.6973 51.2227 44.5813 51.5459 42.399 51.7242C40.1585 51.9072 37.26 51.9111 32.9961 51.9111H31.005C26.7412 51.9111 23.8426 51.9072 21.6022 51.7242C19.4199 51.5459 18.3038 51.2227 17.5253 50.826C15.652 49.8715 14.129 48.3485 13.1746 46.4753C12.7779 45.6967 12.4547 44.5807 12.2764 42.3984C12.0933 40.1579 12.0895 37.2594 12.0895 32.9955V31.0044C12.0895 26.7406 12.0933 23.842 12.2764 21.6016C12.4547 19.4193 12.7779 18.3032 13.1746 17.5247C14.129 15.6514 15.652 14.1284 17.5253 13.174C18.3038 12.7773 19.4199 12.4541 21.6022 12.2758C23.8426 12.0927 26.7412 12.0889 31.005 12.0889Z"
fill="currentColor"
/>
</svg>
</a>
<a href="#">
<svg
width="64"
height="64"
viewBox="0 0 64 64"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.9011 39.5853C17.2136 36.9975 18.2749 35.5486 20.275 34.0633C23.1367 32.0517 26.7114 33.1896 26.7114 33.1896V26.4393C27.5805 26.4171 28.4498 26.4686 29.3094 26.5932V35.2803C29.3094 35.2803 25.7358 34.1424 22.8741 36.155C20.8751 37.6392 19.8116 39.0891 19.5001 41.6769C19.4904 43.0821 19.7541 44.919 20.9684 46.5072C20.6682 46.3533 20.3622 46.1779 20.0504 45.9809C17.3753 44.1847 16.888 41.4897 16.9011 39.5853ZM44.0695 13.958C42.1009 11.8008 41.3564 9.62278 41.0873 8.09277H43.5637C43.5637 8.09277 43.07 12.1045 46.6686 16.0496L46.7185 16.1027C45.7486 15.4926 44.8591 14.7725 44.0695 13.958ZM55.9992 20.0738V28.5861C55.9992 28.5861 52.8391 28.4623 50.5005 27.8674C47.235 27.0353 45.1362 25.7591 45.1362 25.7591C45.1362 25.7591 43.6864 24.849 43.5692 24.7855V42.3634C43.5692 43.3422 43.3011 45.7864 42.484 47.825C41.4172 50.4919 39.7709 52.2424 39.4681 52.6002C39.4681 52.6002 37.4659 54.9665 33.9335 56.5599C30.7495 57.9973 27.954 57.9609 27.1184 57.9973C27.1184 57.9973 22.2859 58.1887 17.9374 55.3627C16.9971 54.7399 16.1194 54.0344 15.3156 53.2555L15.3373 53.2711C19.6868 56.097 24.5182 55.9057 24.5182 55.9057C25.3549 55.8693 28.1504 55.9057 31.3334 54.4682C34.8625 52.8748 36.868 50.5085 36.868 50.5085C37.1675 50.1507 38.8213 48.4002 39.8838 45.7323C40.6988 43.6948 40.969 41.2495 40.969 40.2707V22.6949C41.0862 22.7594 42.535 23.6695 42.535 23.6695C42.535 23.6695 44.6349 24.9467 47.9003 25.7778C50.24 26.3727 53.3991 26.4965 53.3991 26.4965V19.8263C54.4799 20.0686 55.4013 20.1341 55.9992 20.0738Z"
fill="currentColor"
/>
<path
d="M53.4014 19.8263V26.4944C53.4014 26.4944 50.2423 26.3707 47.9026 25.7757C44.6371 24.9436 42.5372 23.6674 42.5372 23.6674C42.5372 23.6674 41.0885 22.7573 40.9713 22.6928V40.2728C40.9713 41.2515 40.7032 43.6968 39.8861 45.7344C38.8193 48.4023 37.173 50.1528 36.8702 50.5106C36.8702 50.5106 34.8669 52.8769 31.3356 54.4703C28.1527 55.9078 25.3572 55.8714 24.5205 55.9078C24.5205 55.9078 19.6891 56.0991 15.3395 53.2732L15.3178 53.2576C14.8586 52.8129 14.4264 52.3434 14.0232 51.8513C12.6352 50.1591 11.7844 48.1579 11.5706 47.5869C11.5702 47.5844 11.5702 47.582 11.5706 47.5796C11.2266 46.5873 10.5038 44.2044 10.6026 41.8964C10.7773 37.8244 12.2098 35.325 12.5885 34.6988C13.5916 32.9914 14.8962 31.4636 16.4443 30.1837C17.8104 29.0792 19.3588 28.2005 21.0261 27.5834C22.8284 26.859 24.7584 26.4706 26.7126 26.4393V33.1896C26.7126 33.1896 23.1379 32.0559 20.2773 34.0633C18.2772 35.5486 17.2159 36.9975 16.9033 39.5853C16.8903 41.4897 17.3776 44.1847 20.0505 45.982C20.3623 46.1796 20.6683 46.355 20.9686 46.5083C21.4355 47.1153 22.0039 47.6442 22.6506 48.0736C25.2617 49.7264 27.4495 49.8418 30.2472 48.7684C32.1127 48.0508 33.5169 46.4334 34.1681 44.6413C34.5772 43.5221 34.5718 42.3957 34.5718 41.2307V8.09277H41.0831C41.3522 9.62278 42.0967 11.8008 44.0652 13.958C44.8549 14.7725 45.7444 15.4926 46.7142 16.1027C47.0007 16.3991 48.4658 17.8646 50.3465 18.7643C51.3189 19.2294 52.344 19.5857 53.4014 19.8263Z"
fill="currentColor"
/>
<path
d="M8.97888 45.5139V45.5191L9.14045 45.957C9.12189 45.906 9.06185 45.7511 8.97888 45.5139Z"
fill="currentColor"
/>
<path
d="M21.0256 27.5833C19.3584 28.2003 17.81 29.0791 16.4438 30.1836C14.8953 31.4664 13.591 32.9973 12.5892 34.7081C12.2104 35.3321 10.7779 37.8336 10.6032 41.9056C10.5045 44.2136 11.2272 46.5965 11.5712 47.5888C11.5709 47.5912 11.5709 47.5937 11.5712 47.5961C11.7883 48.1619 12.6358 50.1631 14.0238 51.8605C14.427 52.3526 14.8593 52.8221 15.3185 53.2668C13.8471 52.2915 12.5349 51.1123 11.4247 49.7678C10.0487 48.0901 9.20003 46.1098 8.97864 45.5252C8.97838 45.5211 8.97838 45.5169 8.97864 45.5127V45.5055C8.63354 44.5142 7.90862 42.1303 8.00955 39.8192C8.18427 35.7471 9.61675 33.2477 9.99549 32.6216C10.997 30.9107 12.3013 29.3797 13.8502 28.0971C15.216 26.9923 16.7645 26.1134 18.432 25.4968C19.472 25.0832 20.5555 24.7781 21.6637 24.5867C23.3338 24.3073 25.0396 24.2831 26.7176 24.515V26.4392C24.7616 26.4698 22.8297 26.8582 21.0256 27.5833Z"
fill="currentColor"
/>
<path
d="M41.0877 8.09271H34.5764V41.2317C34.5764 42.3966 34.5764 43.52 34.1727 44.6422C33.5151 46.4333 32.1162 48.0507 30.2518 48.7684C27.453 49.8459 25.2652 49.7263 22.6553 48.0736C22.0074 47.646 21.4376 47.1189 20.9689 46.5134C23.1925 47.6502 25.1828 47.6305 27.6484 46.6819C29.5117 45.9642 30.9127 44.3468 31.5682 42.5547C31.9784 41.4356 31.973 40.3091 31.973 39.1452V6H40.964C40.964 6 40.8631 6.82377 41.0877 8.09271ZM53.4006 17.9821V19.8262C52.345 19.5853 51.3218 19.2289 50.3511 18.7643C48.4704 17.8646 47.0054 16.399 46.7189 16.1026C47.0513 16.3118 47.3963 16.5021 47.752 16.6726C50.0386 17.7668 52.2904 18.0934 53.4006 17.9821Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
<div class="footer-column">
<ul class="footer-links">
<li>
<a href="#" class="footer-link">About</a>
</li>
<li>
<a href="#" class="footer-link">Testimonials</a>
</li>
<li>
<a href="#" class="footer-link">Features</a>
</li>
</ul>
</div>
<div class="footer-column">
<ul class="footer-links">
<li>
<a href="#" class="footer-link">Episodes</a>
</li>
<li>
<a href="#" class="footer-link">Pricing</a>
</li>
<li>
<a href="#" class="footer-link">Blog</a>
</li>
</ul>
</div>
<div class="footer-column-platform">
<div class="platform-wrapper">
<h5 class="footer-title">
Listen to episodes on your fav platform:
</h5>
<div class="socials">
<img src="../assets/svgs/GooglePodcast.svg" alt="..." />
<img src="../assets/svgs/Spotify.svg" alt="..." />
<img src="../assets/svgs/Youtube.svg" alt="..." />
</div>
<h5 class="footer-title">App available on:</h5>
<div class="socials">
<img src="../assets/svgs/AppStore.svg" alt="..." />
<img src="../assets/svgs/GooglePlay.svg" alt="..." />
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="copyright">
©2022. All Rights Reserved.
<a href="#" class="red"> Pod of Cast </a>
</div>
<div class="right">
<a href="#">Terms</a>
<img src="../assets/svgs/Dot.svg" alt="..." />
<a href="#">Privacy</a>
</div>
</div>
</div>
</footer>
<!-- footer-section-end -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="./js/script.js"></script>
</body>
</html>