Skip to content

Commit 1454907

Browse files
IcyDraeIcyDrae
committed
first commit
0 parents  commit 1454907

File tree

8 files changed

+3893
-0
lines changed

8 files changed

+3893
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.vscode

‎LICENSE

Lines changed: 674 additions & 0 deletions
Large diffs are not rendered by default.

‎README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
![GitHub](https://img.shields.io/github/license/IcyDrae/99-Names-of-Allah?style=flat-square)
2+
![GitHub](https://img.shields.io/github/v/release/IcyDrae/99-Names-of-Allah?style=flat-square)
3+
![GitHub](https://img.shields.io/github/last-commit/IcyDrae/99-Names-of-Allah/main?style=flat-square)
4+
5+
# The 99 Names of Allah
6+
7+
A presentation of The 99 Beautiful Names of Allah, containing the Name in the arabic language, the roman transliteration, the translation and references where they are mentioned in the Holy Qur'an.
8+
9+
## License
10+
[GPLv3](LICENSE)

‎images/favicon.ico

15 KB
Binary file not shown.

‎index.html

Lines changed: 1984 additions & 0 deletions
Large diffs are not rendered by default.

‎js/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var date = new Date();
2+
document.querySelector('.copyright-year').innerHTML = date.getFullYear();

‎privacy-policy.html

Lines changed: 907 additions & 0 deletions
Large diffs are not rendered by default.

‎style/style.css

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html, body {
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
body {
11+
background-image: linear-gradient(to right, #ece9e6, #fff);
12+
font-family: 'Dosis', sans-serif;
13+
}
14+
15+
.app-wrapper {
16+
text-align: center;
17+
max-width: 1680px;
18+
height: 100%;
19+
margin: 0 auto;
20+
overflow-wrap: break-word;
21+
}
22+
23+
.introduction-container {
24+
padding: 50px 0;
25+
text-align: left;
26+
}
27+
28+
.introduction-content-container {
29+
margin: auto;
30+
text-align: center;
31+
}
32+
33+
.basmala-arabic {
34+
margin-bottom: 0;
35+
}
36+
37+
.basmala-arabic, .name {
38+
font-family: 'Reem Kufi', sans-serif;
39+
}
40+
41+
.introduction-container .introduction-content-container .basmala-english {
42+
margin-top: 0;
43+
}
44+
45+
.introduction-container .introduction-content-container .basmala-transliteration {
46+
margin-top: 0;
47+
}
48+
49+
.introduction-text {
50+
text-align: left;
51+
}
52+
53+
blockquote {
54+
margin: 50px auto;
55+
color: #2e2e2e;
56+
border-left: 5px solid #787878;
57+
border-radius: 7px;
58+
position: relative;
59+
background: #EDEDED;
60+
}
61+
62+
blockquote::before {
63+
content: "\201C";
64+
color: #787878;
65+
font-size: 94px;
66+
position: absolute;
67+
left: 10px;
68+
top: -10px;
69+
}
70+
71+
blockquote::after {
72+
content: '';
73+
}
74+
75+
blockquote span {
76+
display: block;
77+
color: #333333;
78+
font-style: normal;
79+
font-weight: 500;
80+
margin-top: 1em;
81+
}
82+
83+
.names-container {
84+
padding: 50px 0;
85+
86+
display: flex;
87+
flex-wrap: wrap;
88+
flex-direction: row;
89+
gap: 30px;
90+
}
91+
92+
.number-container {
93+
z-index: 10;
94+
position: absolute;
95+
left: 10px;
96+
top: 10px;
97+
padding: 10px;
98+
}
99+
100+
.name-container {
101+
position: relative;
102+
color: white;
103+
text-shadow: 1px 1px 2px black;
104+
105+
display: flex;
106+
flex-direction: column;
107+
align-items: center;
108+
justify-content: center;
109+
}
110+
111+
.content {
112+
z-index: 10;
113+
text-align: center;
114+
padding: 10px;
115+
}
116+
117+
.name-container .background-image {
118+
border-radius: 10px;
119+
background-size: cover;
120+
background-position: center;
121+
122+
position: absolute;
123+
z-index: 1;
124+
display: block;
125+
width: inherit;
126+
height: inherit;
127+
-webkit-filter: brightness(65%);
128+
-moz-filter: brightness(65%);
129+
-o-filter: brightness(65%);
130+
-ms-filter: brightness(65%);
131+
filter: brightness(65%);
132+
}
133+
134+
.name {
135+
margin: 0;
136+
}
137+
138+
.transliteration {
139+
margin: 5px;
140+
font-weight: 500;
141+
}
142+
143+
.appears-in-container .tooltip-container {
144+
position: relative;
145+
bottom: 10px;
146+
cursor: help;
147+
}
148+
149+
.appears-in-container .tooltip-container .tooltip-text {
150+
visibility: hidden;
151+
width: 180px;
152+
background-color: black;
153+
text-align: center;
154+
border-radius: 6px;
155+
padding: 10px;
156+
position: absolute;
157+
z-index: 1;
158+
}
159+
160+
.appears-in-container .tooltip-container:hover .tooltip-text {
161+
visibility: visible;
162+
}
163+
164+
.appears-in-container a {
165+
color: white;
166+
}
167+
168+
.end-ayah-container .end-ayah {
169+
font-size: 24px;
170+
}
171+
172+
.end-ayah-container .end-ayah-reference {
173+
font-size: 18px;
174+
}
175+
176+
.footer-content {
177+
display: flex;
178+
align-items: center;
179+
flex-direction: column;
180+
}
181+
182+
footer {
183+
display: flex;
184+
justify-content: center;
185+
font-size: 20px;
186+
}
187+
188+
footer a {
189+
text-decoration: none;
190+
}
191+
192+
footer .footer-content > a {
193+
color: black;
194+
padding: 1rem;
195+
}
196+
197+
.copyright-element a, .privacy-policy-content-container a {
198+
color: blue;
199+
}
200+
201+
@media only screen and (min-width: 320px) {
202+
.main-container, footer {
203+
padding: 1rem 2rem;
204+
}
205+
206+
.introduction-content-container {
207+
width: 100%;
208+
}
209+
210+
.introduction-container .introduction-content-container .basmala-arabic {
211+
font-size: 34px;
212+
}
213+
214+
.introduction-container .introduction-content-container .basmala-transliteration {
215+
font-size: 20px;
216+
}
217+
218+
.introduction-container .introduction-content-container .basmala-english {
219+
font-size: 24px;
220+
}
221+
222+
.introduction-text {
223+
font-size: 20px;
224+
}
225+
226+
blockquote {
227+
padding: 1em 25px 1em 35px;
228+
line-height: 1.2;
229+
}
230+
231+
.names-container {
232+
justify-content: center;
233+
}
234+
235+
.name-container {
236+
width: 250px;
237+
height: 250px;
238+
}
239+
240+
.number-container {
241+
font-size: 24px;
242+
}
243+
244+
.name {
245+
font-size: 32px;
246+
}
247+
248+
.transliteration {
249+
font-size: 18px;
250+
}
251+
252+
.translation {
253+
font-size: 18px;
254+
}
255+
256+
.appears-in-container .tooltip-container {
257+
display: none;
258+
}
259+
}
260+
261+
@media only screen and (min-width: 1200px) {
262+
.main-container, footer {
263+
padding: 3rem 5rem;
264+
}
265+
266+
.introduction-container .introduction-content-container .basmala-arabic {
267+
font-size: 64px;
268+
}
269+
270+
.introduction-container .introduction-content-container .basmala-transliteration {
271+
font-size: 28px;
272+
}
273+
274+
.introduction-container .introduction-content-container .basmala-english {
275+
font-size: 34px;
276+
}
277+
278+
.introduction-text {
279+
font-size: 24px;
280+
}
281+
282+
blockquote {
283+
padding: 1.2em 30px 1.2em 75px;
284+
line-height: 1.6;
285+
}
286+
287+
.names-container {
288+
justify-content: space-between;
289+
}
290+
291+
.name-container {
292+
width: 350px;
293+
height: 350px;
294+
}
295+
296+
.number-container {
297+
font-size: 38px;
298+
}
299+
300+
.name {
301+
font-size: 52px;
302+
}
303+
304+
.transliteration {
305+
font-size: 22px;
306+
}
307+
308+
.translation {
309+
font-size: 24px;
310+
}
311+
312+
.appears-in-container .tooltip-container {
313+
display: inline-block;
314+
}
315+
}

0 commit comments

Comments
 (0)