-
Notifications
You must be signed in to change notification settings - Fork 0
/
text.html
116 lines (98 loc) · 5.05 KB
/
text.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Concept of Prophethood in Ahlussunnah</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Far+Far+Fields&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
body {
font-family: 'Far Far Fields', cursive;
background-color: #333; /* Dark background */
color: #f7f7f7; /* Light text */
transition: background-color 0.5s, color 0.5s; /* Smooth transition */
}
.article {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #444; /* Dark article background */
border: 1px solid #555; /* Dark border */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: background-color 0.5s, border 0.5s; /* Smooth transition */
}
.article h1,
.article h2 {
color: #94ac20; /* Light heading color */
}
/* Light Theme */
body.light-mode {
background-color: #f7f7f7; /* Light background */
color: #333; /* Dark text */
}
.article.light-mode {
background-color: #fff; /* Light article background */
border: 1px solid #ddd; /* Light border */
}
.btn-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background-color: #94ac20; /* Green background */
color: white; /* White text */
border: none; /* Remove border */
transition: background-color 0.3s; /* Smooth transition */
}
.btn-toggle:hover {
background-color: #94ac20; /* Darker green on hover */
}
</style>
</head>
<body>
<button class="btn btn-toggle" id="themeToggle">
<i class="fas fa-moon" id="themeIcon"></i>
</button>
<section class="article">
<h1>The Concept of Prophethood in Ahlussunnah</h1>
<h2>Introduction</h2>
<p>Prophethood (Nubuwwah) is one of the central beliefs in Islam, particularly in the Ahlussunnah tradition. Prophets are divinely appointed by Allah to convey His message and guide humanity toward worship, justice, and ethical behavior.</p>
<h2>Definition and Purpose</h2>
<p>In Ahlussunnah theology, prophethood is defined as the selection of individuals by Allah to deliver divine revelation. These individuals are chosen for their purity, integrity, and unwavering submission to God. The purpose of prophethood is to provide guidance on matters of faith, morality, and the laws governing life (Shariah). Human reason is seen as insufficient for understanding divine commands fully; thus, prophets serve as intermediaries between Allah and mankind.</p>
<h2>Characteristics of Prophets</h2>
<ul>
<li><strong>Infallibility (Ismah):</strong> Prophets are protected from committing major sins and errors in delivering Allah’s message.</li>
<li><strong>Humanity:</strong> Prophets are human beings, not divine, to serve as relatable models for human behavior.</li>
<li><strong>Miracles (Mu'jizat):</strong> Prophets often perform miracles as signs of their authenticity and to affirm their prophethood.</li>
</ul>
<h2>Conclusion</h2>
<p>The institution of prophethood is fundamental in guiding humanity, and for Ahlussunnah, this culminates with the final prophet, Muhammad (PBUH). He represents the completion of divine guidance, making his life and teachings the final reference for Islamic practice.</p>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script>
const toggleButton = document.getElementById('themeToggle');
const themeIcon = document.getElementById('themeIcon');
const body = document.body;
const article = document.querySelector('.article');
toggleButton.addEventListener('click', () => {
body.classList.toggle('light-mode');
article.classList.toggle('light-mode');
// Change the icon based on the theme
if (body.classList.contains('light-mode')) {
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
});
</script>
</body>
</html>