-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (139 loc) · 7.65 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quran Player</title>
<!-- Required Social Preview MetaTags -->
<!-- Primary Meta Tags -->
<meta name="title" content="Quran Player" />
<meta name="description" content="Quran player is a large number of Quran tilawat by Omar Hisham Al Arabi.Designed & developed with love by Meherab Samir." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://quran-player.netlify.app" />
<meta property="og:title" content="Quran Player" />
<meta property="og:description" content="Quran player is a large set of Quran tilawat by Omar Hisham Al Arabi.Designed & developed with love by Meherab Samir." />
<meta property="og:image" content="assets/img/Thumb-FB.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://quran-player.netlify.app" />
<meta property="twitter:title" content="Quran Player" />
<meta property="twitter:description" content="Quran player is a large set of Quran tilawat by Omar Hisham Al Arabi.Designed & developed with love by Meherab Samir." />
<meta property="twitter:image" content="assets/img/Thumb-Twitter.jpg" />
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="modal__overlay">
<div class="modal__container">
<p>Use Spacebar to play/pause.Use ⬆/⬅ to go to previous one.Use ⬇/➡ to go to next one.
</p>
<button type="submit" id="modal__btn">Close</button>
</div>
<header id="header">
<div class="container">
<div class="logo">
<img src="assets/img/quran-logo.png" alt="Logo">
<h2>কোরআন তিলাওয়াত</h2>
</div>
<div class="menu">
<button type="submit" id="btn__open">
<i class="fas fa-bars"></i>
</button>
<aside>
<div class="aside__header">
<div class="close__btn">
<button type="button" id="btn__close">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="aside__list">
<ul>
<li>
<div class="list__info__container">
<div class="list__info">
<i class="fas fa-play"></i>
<span>সুরা ফাতিহা<span>(সুরা-১•আয়াত-৭•মক্কায় অবতীর্ণ)</span></span>
</div>
</div>
</li>
<li>
<div class="list__info__container">
<div class="list__info">
<i class="fas fa-play"></i>
<span>আয়াতুল কুরসি<span>(সুরা-বাকারাহ ২৫৫ নং আয়াত)</span></span>
</div>
</div>
</li>
<li>
<div class="list__info__container">
<div class="list__info">
<i class="fas fa-play"></i>
<span>সুরা রহমান<span>(সুরা-৫৫•আয়াত-৭৮•মদিনায় অবতীর্ণ)</span></span>
</div>
</div>
</li>
<li>
<div class="list__info__container">
<div class="list__info">
<i class="fas fa-play"></i>
<span>সুরা মুলক<span>(সুরা-৬৭•আয়াত-৩০•মক্কায় অবতীর্ণ)</span></span>
</div>
</div>
</li>
<li>
<div class="list__info__container">
<div class="list__info">
<i class="fas fa-play"></i>
<span>সুরা ত্বীন<span>(সুরা-৯৫•আয়াত-৮•মক্কায় অবতীর্ণ)</span></span>
</div>
</div>
</li>
</ul>
</div>
</div>
</aside>
</div>
</div>
</header>
<section>
<div class="audio__container">
<div class="audio__info">
<h2 id="audio__title">সুরা ফাতিহা</h2>
<span>ওমার হিশাম আল আরাবি</span>
</div>
<div class="audio__controls">
<button class="control__btn prev__btn">
<i class="fas fa-step-backward"></i>
</button>
<button class="control__btn play__btn">
<i class="fas fa-play"></i>
</button>
<button class="control__btn next__btn">
<i class="fas fa-step-forward"></i>
</button>
<div class="audio__progress">
<div class="progress"></div>
</div>
</div>
<audio src="assets/audio/সুরা ফাতিহা.mp3"></audio>
</div>
</section>
<footer>
<p>‘যখন কোরআন পাঠ করা হয় তখন তোমরা মনোযোগ সহকারে উহা শ্রবণ করবে এবং নিশ্চুপ হয়ে থাকবে, যাতে তোমরা রহমত প্রাপ্ত হও।’</p>
<span>আল আরাফ-২০৪</span>
<p>Designed & Developed by <span>Meherab Samir</span></p>
</footer>
<!-- JS SCRIPT -->
<script src="assets/js/script.js"></script>
</body>
</html>