je wajuwa
calendar_today August 1, 2018 |
visibility 802 views
<p><strong> <p> </p><br>
<p>
</head>
<body><div w3-include-html="../nav.html"></div>
<script>
includeHTML();
</script>
<div id="disc">
<div w3-include-html="../disc.html"></div>
<script>
includeHTML();
</script>
</div><div id="justify">
(i) Wana yakini kuwa Allah (s.w) yupo
Waumini wa kweli huwa na yakini nyoyoni mwao juu ya kuwepo Allah (s.w) na Mtume wake. Yaani wanashuhudia kwa
dhati nyoyoni mwao kuwa Allah (s.w) ni Mola wao pekee na
53
Muhammad (s.a.w) ni Mtume wake wa mwisho na katika matendo yao yote huishi kwa kufuata mwongozo wa Mwenyezi Mungu na Mtume wake na daima hukumbuka msisitizo wa aya ifuatazo:
“Haiwi kwa mwanamume aliyeamini wala kwa mwanamke aliyeamini,Mwenyezi Mungu na Mtume wake wanapokata shauri wawe na hiari katika shauri lao. Na mwenye kumuasi Mwenyezi Mungu na Mtume wake, hakika amepotea upotofu ulio wazi (kabisa).” (33:36)
<br>
</div>
<div id="justify2"><p>
<br><a href="index.html" class="previous round">‹ Nyuma</a>
<a href="index.html" class="next round">› Endelea</a>
<a href="../Book.html" class="next round">‹ Books</a>
<a href="https://play.google.com/store/search?q=pub%3ABONGOCLASS&c=apps" class="next round">‹ Apps ››</a>
</p><br></div>
<div w3-include-html="../under.html"></div>
<script>
includeHTML();
</script>
<div id="footer">
<div w3-include-html="../footer.html"></div>
<script>
includeHTML();
</script>
</div></body>
</html></div>
<section class="related-posts">
<h2 class="related-title">Posti Zilizohusiana</h2>
<div class="related-grid">
<div class="related-card">
<img src="https://bongoclass.com/upload/sampo.webp" alt="mchango" loading="lazy">
<div class="related-card-content">
<div class="related-card-title">mchango</div>
<div class="related-card-summary"></div>
<a href="4c366756-c2cb-11ee-8d02-901b0ed52fcf" class="read-more">
Soma zaidi <i class="material-icons">arrow_forward</i>
</a>
</div>
</div>
<div class="related-card">
<img src="https://bongoclass.com/upload/sampo.webp" alt="makataba" loading="lazy">
<div class="related-card-content">
<div class="related-card-title">makataba</div>
<div class="related-card-summary"></div>
<a href="4c361acf-c2cb-11ee-8d02-901b0ed52fcf" class="read-more">
Soma zaidi <i class="material-icons">arrow_forward</i>
</a>
</div>
</div>
<div class="related-card">
<img src="https://bongoclass.com/upload/sampo.webp" alt="sayansi" loading="lazy">
<div class="related-card-content">
<div class="related-card-title">sayansi</div>
<div class="related-card-summary">YALIYOMO1.</div>
<a href="sayansi" class="read-more">
Soma zaidi <i class="material-icons">arrow_forward</i>
</a>
</div>
</div>
<div class="related-card">
<img src="https://bongoclass.com/upload/sampo.webp" alt="The fastest (anakwenda mbio zaidi)" loading="lazy">
<div class="related-card-content">
<div class="related-card-title">The fastest (anakwenda mbio zaidi)</div>
<div class="related-card-summary">Posti hii inakwenda kukuletea sifa za mnyama anayekwenda mbio zaidi</div>
<a href="the-fastest-anakwenda-mbio-zaidi-727" class="read-more">
Soma zaidi <i class="material-icons">arrow_forward</i>
</a>
</div>
</div>
<div class="related-card">
<img src="https://bongoclass.com/upload/sampo.webp" alt="maktaba" loading="lazy">
<div class="related-card-content">
<div class="related-card-title">maktaba</div>
<div class="related-card-summary"></div>
<a href="4c367dc4-c2cb-11ee-8d02-901b0ed52fcf" class="read-more">
Soma zaidi <i class="material-icons">arrow_forward</i>
</a>
</div>
</div>
<div class="related-card">
<img src="https://bongoclass.com/upload/sampo.webp" alt="MAAJABU NA UWEZO WA CHEETAH" loading="lazy">
<div class="related-card-content">
<div class="related-card-title">MAAJABU NA UWEZO WA CHEETAH</div>
<div class="related-card-summary"> 5.</div>
<a href="maajabu-na-uwezo-wa-cheetah" class="read-more">
Soma zaidi <i class="material-icons">arrow_forward</i>
</a>
</div>
</div>
</div>
</section>
</main>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Material Design Resources -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--mdc-theme-primary: #ffffff; /* White background */
--mdc-theme-secondary: #6200ee; /* Purple accent color */
--mdc-theme-on-primary: rgba(0, 0, 0, 0.6); /* Inactive icon color */
--mdc-theme-on-secondary: #ffffff; /* Active icon color */
--footer-height: 56px;
--footer-elevation: 8px;
}
html, body {
height: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
}
.page-container {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content-wrap {
flex: 1;
padding-bottom: var(--footer-height); /* Must match footer height */
}
.bottom-navigation {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--footer-height);
background-color: var(--mdc-theme-primary);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 -2px 4px -1px rgba(0,0,0,0.2),
0 -4px 5px 0 rgba(0,0,0,0.14),
0 -1px 10px 0 rgba(0,0,0,0.12);
z-index: 100;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--mdc-theme-on-primary);
height: 100%;
flex: 1;
max-width: 168px;
min-width: 80px;
padding: 8px 12px 10px;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item.active {
color: var(--mdc-theme-secondary);
}
.nav-icon {
font-size: 24px;
margin-bottom: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-label {
font-size: 12px;
font-weight: 400;
line-height: 1;
opacity: 1;
transform: scale(1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Active state indicator */
.nav-item.active::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 32px;
border-radius: 16px;
background-color: rgba(98, 0, 238, 0.1);
}
/* Ripple effect */
.nav-item {
position: relative;
overflow: hidden;
outline: none;
}
.nav-item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
background: rgba(98, 0, 238, 0.2);
opacity: 0;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.3s, opacity 0.3s;
}
.nav-item:focus::before,
.nav-item:active::before {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.nav-item:active::before {
background: rgba(98, 0, 238, 0.3);
}
/* Responsive adjustments */
@media (max-width: 600px) {
.nav-label {
font-size: 11px;
}
.nav-icon {
font-size: 22px;
}
}
@media (max-width: 400px) {
.nav-item {
padding: 8px 8px 10px;
min-width: 72px;
}
}
</style>
</head>
<body>
<div class="page-container">
<!-- Your page content goes here -->
<div class="content-wrap">
<!-- This ensures content doesn't hide behind footer -->
</div>
<nav class="bottom-navigation">
<a href="/" class="nav-item active">
<span class="material-icons nav-icon">home</span>
<span class="nav-label">Home</span>
</a>
<a href="https://app.bongoclass.com/recent.php" class="nav-item">
<span class="material-icons nav-icon">history</span>
<span class="nav-label">Recent</span>
</a>
<a href="https://app.bongoclass.com/category.php" class="nav-item">
<span class="material-icons nav-icon">category</span>
<span class="nav-label">Categories</span>
</a>
</nav>
</div>
<script>
// Set active nav item based on current page
document.addEventListener('DOMContentLoaded', function() {
const currentPage = window.location.pathname.split('/').pop();
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.classList.remove('active');
const itemHref = item.getAttribute('href');
// Check if current page matches the nav item's href
if (window.location.href === itemHref ||
(currentPage === '' && itemHref === '/') ||
(currentPage && itemHref.includes(currentPage))) {
item.classList.add('active');
}
});
// Add click effect
navItems.forEach(item => {
item.addEventListener('click', function(e) {
// Remove active class from all items
navItems.forEach(navItem => navItem.classList.remove('active'));
// Add to clicked item
this.classList.add('active');
});
});
});
</script>
</body>
</html>
</body>
</html>