Skip to content

Improve navbar position #95

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

Closed
wants to merge 12 commits into from
Closed

Improve navbar position #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c1f998d
Improved About Us and Contact Us sections
Web-Dev-Learner Oct 2, 2024
2181881
Improved navbar position
Web-Dev-Learner Oct 3, 2024
14cfedf
Merge branch 'main' into improve-navbar
Web-Dev-Learner Oct 3, 2024
8309ebe
Merge branch 'main' into improve-aboutus-contactus
Web-Dev-Learner Oct 3, 2024
dd88602
Merge branch 'main' into improve-aboutus-contactus
Web-Dev-Learner Oct 5, 2024
ff84582
Merge branch 'main' into improve-navbar
Web-Dev-Learner Oct 5, 2024
0f78828
Merge branch 'main' into improve-navbar
Web-Dev-Learner Oct 9, 2024
781ccc3
Merge branch 'main' into improve-aboutus-contactus
Web-Dev-Learner Oct 9, 2024
752042f
Merge branch 'main' into improve-navbar
Web-Dev-Learner Oct 10, 2024
a7cb18c
Merge branch 'main' into improve-aboutus-contactus
Web-Dev-Learner Oct 10, 2024
8d6ab8f
Merge pull request #56 from Web-Dev-Learner/improve-aboutus-contactus
vishal02527 Oct 10, 2024
74e332d
Merge branch 'main' into improve-navbar
Web-Dev-Learner Oct 10, 2024
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
282 changes: 282 additions & 0 deletions aboutus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Us</title>
<script
src="https://kit.fontawesome.com/d74f12bccc.js"
crossorigin="anonymous"
></script>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-image: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
padding: 0;
margin: 0;
color: #333;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
padding: 20px;
flex-grow: 1;
}
h1 {
text-align: center;
font-size: 36px;
font-weight: 900;
background: linear-gradient(to right, #30cfd0 20%, #330867 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.about-section {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.about-section h2 {
font-size: 28px;
margin-bottom: 10px;
}

.about-section p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 20px;
}

/* Navbar Styles */
.galleryMain {
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;
}

.navigation {
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}

.navigation .homeDiv #homeBtn {
background-image: linear-gradient(
144deg,
#af40ff,
#5b42f3 50%,
#00ddeb
);
border: 0;
border-radius: 8px;
color: #fff;
display: flex;
justify-content: center;
line-height: 0.8em;
min-width: 110px;
padding: 3px;
cursor: pointer;
}

.navigation .homeDiv #homeBtn a {
background-color: rgb(5, 6, 45);
color: #fff;
font-size: 16px;
padding: 16px 24px;
border-radius: 6px;
text-decoration: none;
transition: 300ms;
}

.navigation .navbar a {
color: #fff;
text-decoration: none;
margin: 0 8px;
font-size: 16px;
font-weight: 500;
border: 2px solid #fff;
padding: 10px 15px;
border-radius: 20px;
}

.navigation .navbar a:hover {
color: rgb(250, 219, 153);
border-color: rgb(250, 219, 153);
}
#active {
color: rgb(250, 219, 153);
border-color: rgb(250, 219, 153);
}

/* Footer Styles
footer {
background-color: #2c3e50;
color: #ecf0f1;
padding: 20px;
text-align: center;
width: 100%;
margin-top: auto;
}

.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1200px;
margin: 0 auto;
}

.footer-section {
margin-bottom: 20px;
}

.footer-section h3 {
margin-bottom: 10px;
color: #f39c12;
}

.footer-section p {
font-size: 16px;
margin: 0;
}

.social-icons a i {
color: #ecf0f1;
margin: 0 8px;
font-size: 30px;
}

.creatorDiv {
margin-top: 10px;
}

.creatorDiv p {
font-size: 14px;
} */

/* Responsive Styles */
@media (max-width: 768px) {
h1 {
font-size: 22px;
}
.about-section h2 {
font-size: 22px;
}
.about-section p {
font-size: 16px;
}
.navigation {
flex-direction: column;
align-items: center;
}
.navigation .navbar {
flex-direction: column;
margin-top: 20px;
}
.navigation .navbar a {
margin: 10px 0;
font-size: 14px;
}
.footer-content {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="galleryMain">
<div class="navigation">
<div class="homeDiv">
<button id="homeBtn"><a href="./index.html">Home</a></button>
</div>

<div class="navbar">
<a href="aboutus.html">About Us</a>
<a href="scriptures.html">Scriptures</a>
<a href="gallery.html">Gallery</a>


<a href="signup.html">Discussion Forum</a>
<a href="devotional-resources.html">Devotional Resources</a>
<a href="contactus.html" id="active">Contact Us</a>
</div>
</div>
</div>

<div class="content">
<h1>About Us</h1>
<div class="about-section">
<h2>Welcome to Our Spiritual Hub</h2>
<p>
We are a community dedicated to sharing the timeless teachings of
Lord Krishna and the richness of Hindu scriptures. Our mission is to
spread devotion, knowledge, and the values of spirituality through
engaging content, discussions, and devotional resources.
</p>
<p>
Our platform provides access to sacred scriptures, divine images,
insightful articles, and a supportive discussion forum where you can
connect with like-minded individuals. Whether you are seeking
knowledge, inspiration, or spiritual growth, we are here to guide you
on this sacred journey.
</p>
</div>
</div>

<footer style="background-color: #2c3e50; color: white; padding: 20px 0;">
<div class="footer-content" style="display: flex; justify-content: center; flex-wrap: wrap; text-align: center;">
<div class="footer-section" style="flex: 1; margin: 10px;">
<h3 style="color: #f39c12;"><a href="aboutus.html" style="color: #f39c12; text-decoration: none;">About Us</a></h3>
<p>We are dedicated to providing a reliable ambulance monitoring system to ensure timely medical assistance.</p>
<a href="aboutus.html" style="color: #f39c12; text-decoration: underline;">Learn More</a>
</div>
<div class="footer-section" style="flex: 1; margin: 10px;">
<h3 style="color: #f39c12;"><a href="contactus.html" style="color: #f39c12; text-decoration: none;">Contact Us</a></h3>
<p>Email: <a href="mailto:[email protected]" style="color: white; text-decoration: underline;">[email protected]</a></p>
<p>Phone: <a href="contactus.html" style="color: white; text-decoration: underline;">+1 234 567 890</a></p>
<p>Feel free to reach out for any inquiries or support.</p>
</div>
<div class="footer-section" style="flex: 1; margin: 10px;">
<h3 style="color: #f39c12;">Follow Us</h3>


<div class="social-icons" style="display: flex; justify-content: center; gap: 10px;">
<a href="#" target="_blank" title="Github" style="color: white; transition: transform 0.3s; display: inline-block;"
onmouseover="this.style.transform='scale(1.2)';" onmouseout="this.style.transform='scale(1)';">
<i class="fa-brands fa-github"></i>
</a>
<a href="#" target="_blank" title="Codepen" style="color: white; transition: transform 0.3s; display: inline-block;"
onmouseover="this.style.transform='scale(1.2)';" onmouseout="this.style.transform='scale(1)';">
<i class="fa-brands fa-codepen"></i>
</a>
<a href="#" target="_blank" title="LinkedIn" style="color: white; transition: transform 0.3s; display: inline-block;"
onmouseover="this.style.transform='scale(1.2)';" onmouseout="this.style.transform='scale(1)';">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
<div class="creatorDiv" style="text-align: center; margin-top: 20px;">
<p>&copy; All rights reserved 2023, Created by Vishal.</p>
</div>
</footer>



</body>
</html>


Loading