-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvalues.html
More file actions
187 lines (159 loc) · 7.82 KB
/
Copy pathvalues.html
File metadata and controls
187 lines (159 loc) · 7.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Values & Principles - Islam Rwanda</title>
<meta name="description" content="Explore the core ethical values of Islam in Rwanda, including Peace (Salaam), Integrity, and the Rwandan value of Ubumuntu (Humanity).">
<meta property="og:site_name" content="Islam Rwanda">
<meta property="og:title" content="Ethical Values & Principles - Islam Rwanda">
<meta property="og:url" content="https://halalvibers.github.io/islam-Rwanda./values.html">
<meta property="og:type" content="website">
<meta property="og:description" content="Guiding principles of compassion, honesty, and social harmony within the Rwandan Muslim community.">
<meta name="google-site-verification" content="xW2dfAzjDEvTBF7K8veShiMS1npXoScRmTG1kKFBIoc" />
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-green: #003314;
--deep-green: #001f0c;
--gold: #d4af37;
--gold-light: #f9e27b;
--text-white: #ffffff;
}
body {
margin: 0;
background-color: var(--primary-green);
color: var(--text-white);
font-family: 'Lato', sans-serif;
line-height: 1.8;
}
/* --- NAVIGATION --- */
nav {
display: flex; justify-content: space-between; align-items: center;
padding: 15px 5%; background: rgba(0, 31, 12, 0.95);
border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 1000;
}
.logo { font-family: 'Cinzel', serif; color: var(--gold); font-weight: bold; font-size: 1.4rem; }
.nav-links { display: flex; list-style: none; gap: 20px; margin: 0; }
.nav-links a { color: var(--gold-light); text-decoration: none; font-size: 0.85rem; transition: 0.3s; }
.nav-links a:hover { color: #fff; }
/* --- HERO --- */
.values-hero {
height: 35vh;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,31,12,0.9)),
url('image/openquran.jpg'); /* Changed from bible to match context */
background-size: cover; background-position: center;
display: flex; justify-content: center; align-items: center; text-align: center;
border-bottom: 3px solid var(--gold);
}
.values-hero h1 { font-family: 'Cinzel', serif; color: var(--gold-light); font-size: 2.8rem; margin: 0; letter-spacing: 2px; }
.container { max-width: 1100px; margin: 60px auto; padding: 0 20px; }
.intro-text {
text-align: center; font-size: 1.15rem; max-width: 800px; margin: 0 auto 60px auto; color: #ccc;
}
/* --- VALUES GRID --- */
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.value-card {
background: var(--deep-green);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 20px;
padding: 45px 30px;
text-align: center;
transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.value-card:hover {
border-color: var(--gold);
transform: translateY(-12px);
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.icon-circle {
width: 85px; height: 85px;
background: rgba(212, 175, 55, 0.08);
border: 2px solid var(--gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 25px;
font-size: 2.2rem; color: var(--gold-light);
transition: 0.3s;
}
.value-card:hover .icon-circle {
background: var(--gold);
color: var(--deep-green);
}
.value-card h2 { font-family: 'Cinzel', serif; color: var(--gold); margin-bottom: 15px; font-size: 1.5rem; }
.value-card p { font-size: 0.95rem; color: #ddd; text-align: center; margin: 0; }
/* --- SUMMARY FOOTER --- */
.summary-footer {
margin-top: 80px;
text-align: center;
padding: 50px 20px;
background: rgba(212, 175, 55, 0.05);
border-radius: 15px;
border: 1px solid rgba(212, 175, 55, 0.2);
font-family: 'Cinzel', serif;
color: var(--gold-light);
letter-spacing: 1.5px;
font-size: 1.1rem;
}
footer { text-align: center; padding: 40px; color: #888; font-size: 0.8rem; border-top: 1px solid var(--gold); background: var(--deep-green); }
/* Mobile */
@media (max-width: 600px) {
.values-hero h1 { font-size: 1.8rem; }
.intro-text { font-size: 1rem; }
}
</style>
</head>
<body>
<nav>
<div class="logo">☪ ISLAM IN RWANDA</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="history.html">History</a></li>
<li><a href="leaders&community.html">Leaders</a></li>
<li><a href="infrastructure.html">Infrastructures</a></li>
<li><a href="values.html" style="color: #fff; font-weight: bold;">Values</a></li>
<li><a href="literature.html">Literature</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<header class="values-hero">
<h1>Values & Principles</h1>
</header>
<main class="container">
<div class="intro-text">
Islam teaches a set of core values and ethical principles that guide Muslims in how they live, behave, and interact with others, promoting peace, justice, and social harmony.
</div>
<div class="values-grid">
<div class="value-card">
<div class="icon-circle"><i class="fas fa-dove"></i></div>
<h2>Peace (Salaam)</h2>
<p>Rooted in the Arabic word <em>s-l-m</em>, peace in Islam means more than the absence of conflict. It is living in harmony with oneself and society through justice, compassion, and respect for human dignity.</p>
</div>
<div class="value-card">
<div class="icon-circle"><i class="fas fa-shield-halved"></i></div>
<h2>Integrity</h2>
<p>Including honesty, trustworthiness, and accountability. Muslims are encouraged to speak the truth, fulfill trusts, and act fairly, building strong families and supporting ethical leadership.</p>
</div>
<div class="value-card">
<div class="icon-circle"><i class="fas fa-heart-pulse"></i></div>
<h2>Ubumuntu</h2>
<p>A Kinyarwanda value meaning humanity and kindness. It reflects empathy and recognizing shared dignity, aligning perfectly with Islamic principles of compassion and service to others.</p>
</div>
</div>
<div class="summary-footer">
"Helping Muslims live in ways that benefit their families, communities, and the wider world."
</div>
</main>
<footer>© 2026 Islam in Rwanda. All Rights Reserved.</footer>
</body>
</html>