Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug&Feature] Added About Contact File Fixed Navbar #551

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Bug&Feature] Added About Contact File Fixed Navbar #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
828 changes: 828 additions & 0 deletions About.html
View file
Open in desktop

Large diffs are not rendered by default.

152 changes: 128 additions & 24 deletions DIgital.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Krishna Audio & Video Resources</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
Expand All @@ -12,29 +13,47 @@
padding: 20px;
}

/* Navigation bar styles */
.navbar {
display: flex;
justify-content: flex-end; /* Align items to the right */
margin-bottom: 20px;
}

.navbar a {
text-decoration: none;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
transition: background-color 0.3s;
margin-left: 10px; /* Space between buttons */
}

.navbar a:hover {
background-color: #45a049; /* Darker green on hover */
}
text-align: center;
background-image: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0px 6px 10px #ccc;
}
.nav-link{
color:white;
border:10px solid 2px;
}
.nav-link:hover, .nav-link:active {
color: goldenrod;
}
.scroll-top-btn {
position: fixed; /* Fixed position */
bottom: 30px;
right: 30px;
background-color: #330867;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
display: none; /* Initially hidden */
z-index: 1000; /* Ensure it appears above other content */
}

.scroll-top-btn:hover {
background-color: #330867;
}
p::selection,
h2::selection {
background-color: rgb(237, 204, 133);
color: #000;
}

h1, h2 {
color: #4CAF50;
color: linear-gradient(to right, #30cfd0 20%, #330867 100%);;
text-align: center;
margin-bottom: 20px;
}
Expand Down Expand Up @@ -201,10 +220,57 @@
</script>
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<a href="index.html">Home</a> <!-- Update the href to your home page URL -->
<button id="scrollTopBtn" class="scroll-top-btn">
<i class="fas fa-arrow-up"></i>
</button>
<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="About.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="scriptures.html">Scriptures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="showLoginForm()">Discussion Forum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Feedback.html">Feedback</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Devotional Resources
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="quiz.html">Quiz</a></li>
<li><a class="dropdown-item" href="partner.html">Partner</a></li>
<li><a class="dropdown-item" href="avatars.html">Avatars</a></li>
<li><a class="dropdown-item" href="Personalized.html">ToDoList</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="devotional-resources.html">Resources</a></li>
<li><a class="dropdown-item" href="DIgital.html">DigitalResources</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button type="submit" class="btn"><span style=" color: white;"><i class="fa-solid fa-magnifying-glass "></i></span></button>
</form>
</div>
</div>
</nav>

<h1>Krishna Audio & Video Resources</h1>

Expand Down Expand Up @@ -273,6 +339,44 @@ <h3>Lecture on Krishna's Teachings</h3>
</div>
</div>
</section>

<script>
window.onscroll = function () {
toggleScrollTopButton();
};

const scrollTopBtn = document.getElementById("scrollTopBtn");

function toggleScrollTopButton() {
if (
document.body.scrollTop > 100 ||
document.documentElement.scrollTop > 100
) {
scrollTopBtn.style.display = "block"; // Show button after scrolling down
} else {
scrollTopBtn.style.display = "none"; // Hide button when at the top
}
}

scrollTopBtn.onclick = function () {
window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
};

// Function to filter resources by search input
function searchResources() {
const input = document.getElementById('searchInput').value.toLowerCase();
const resourceCards = document.querySelectorAll('.resource-card');

resourceCards.forEach(function(card) {
const title = card.querySelector('h2').textContent.toLowerCase();
if (title.includes(input)) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script
</body>
</html>
134 changes: 131 additions & 3 deletions Feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Feedback</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
/* CSS Styles */
body {
Expand Down Expand Up @@ -39,7 +40,7 @@
text-align: center;
color: #3f51b5; /* Krishna's blue */
font-size: 2.5em; /* Increased font size */
margin-bottom: 20px;
margin: 20px;
text-transform: uppercase; /* Uppercase letters */
letter-spacing: 1px; /* Spacing between letters */
}
Expand Down Expand Up @@ -116,11 +117,99 @@
background-color: #303f9f; /* Darker blue on hover */
transform: translateY(-2px); /* Hover lift effect */
}

.navbar {
text-align: center;
background-image: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0px 6px 10px #ccc;
}
.nav-link{
color:white;
border:10px solid 2px;
}
.nav-link:hover, .nav-link:active {
color: goldenrod;
}
.scroll-top-btn {
position: fixed; /* Fixed position */
bottom: 30px;
right: 30px;
background-color: #330867;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
display: none; /* Initially hidden */
z-index: 1000; /* Ensure it appears above other content */
}

.scroll-top-btn:hover {
background-color: #330867;
}
p::selection,
h2::selection {
background-color: rgb(237, 204, 133);
color: #000;
}
</style>
</head>
<body>
<button class="home-button" onclick="location.href='index.html';">Home</button> <!-- Home Button -->
<div class="container">
<button id="scrollTopBtn" class="scroll-top-btn">
<i class="fas fa-arrow-up"></i>
</button>
<nav class="navbar navbar-expand-lg bg-body-tertiary navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="About.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="scriptures.html">Scriptures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="showLoginForm()">Discussion Forum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Feedback.html">Feedback</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Devotional Resources
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="quiz.html">Quiz</a></li>
<li><a class="dropdown-item" href="partner.html">Partner</a></li>
<li><a class="dropdown-item" href="avatars.html">Avatars</a></li>
<li><a class="dropdown-item" href="Personalized.html">ToDoList</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="devotional-resources.html">Resources</a></li>
<li><a class="dropdown-item" href="DIgital.html">DigitalResources</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button type="submit" class="btn"><span style=" color: white;"><i class="fa-solid fa-magnifying-glass "></i></span></button>
</form>
</div>
</div>
</nav>
<h1>User Feedback</h1>
<form action="https://api.web3forms.com/submit" method="POST">
<!-- Replace with your Access Key -->
Expand All @@ -145,5 +234,44 @@ <h1>User Feedback</h1>
<footer>
<p>&copy; Shree Krishna - My Strength. All rights reserved.</p>
</footer>
<script>
window.onscroll = function () {
toggleScrollTopButton();
};

const scrollTopBtn = document.getElementById("scrollTopBtn");

function toggleScrollTopButton() {
if (
document.body.scrollTop > 100 ||
document.documentElement.scrollTop > 100
) {
scrollTopBtn.style.display = "block"; // Show button after scrolling down
} else {
scrollTopBtn.style.display = "none"; // Hide button when at the top
}
}

scrollTopBtn.onclick = function () {
window.scrollTo({ top: 0, behavior: "smooth" }); // Smooth scroll to top
};

// Function to filter resources by search input
function searchResources() {
const input = document.getElementById('searchInput').value.toLowerCase();
const resourceCards = document.querySelectorAll('.resource-card');

resourceCards.forEach(function(card) {
const title = card.querySelector('h2').textContent.toLowerCase();
if (title.includes(input)) {
card.style.display = '';
} else {
card.style.display = 'none';
}
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script
</body>
</html>
Loading