Skip to content

Enhanced the footer #25 #30

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

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

Enhanced the footer #25 #30

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
192 changes: 111 additions & 81 deletions _footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,120 @@
<div class="bg-yellow mt-3" >
<div class="container overflow-x-hidden ">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 pt-5 mt-1 d-flex justify-content-md-between justify-content-center">
<div class="col mb-3 ">
<!-- <a href="./" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<img src="./assets/images/logo.png" class="w-100" alt="Gurukul Dream Foundation logo">
</a> -->

<div class="col mb-3 text-center text-md-start">
<h5 class="text-success h1 my-3 pt-1 libre-baskerville-regular">Contact Us</h5>
<ul class="nav flex-column p-0">
<li class=" mb-2"><a href="tel:+918269250197" class="nav-link p-0 text-dark ">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
</svg>
</span>
<span class="text-black ">+918269250197</span></a>
</li>
<li class=" mb-2"><a href="mailto:info@gurukuldreamfoundation.org" class="nav-link p-0 text-dark">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
</svg>
</span>
<span class="text-black small">info@gurukuldreamfoundation.org</span></a>
</li>

</ul>
</div>
<div class="all-social-links pt-1 text-center text-md-start my-3 pt-0">
<div class="py-md-3"></div>
<!-- <h3 class="h4 mt-2 mb-3 text-success">
Social Media
</h3> -->
<div class="social-media-links d-flex align-items-center justify-content-enenly gap-3 justify-self-start justify-content-center w-100 px-4 px-md-0">
<a href="https://twitter.com/DreamGurukul?s=08" target="_blank" title="Twitter (X)" class=" border rounded-circle p-1 border-black text-white text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/twitter.webp" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
<a href="https://www.facebook.com/Gurukul-Dream-Foundation-106034151488777/" target="_blank" title="Facebook" class="text-white border rounded-circle p-1 border-black text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/facebook.png" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
<a href="https://instagram.com/gurukuldreamfoundation?utm_medium=copy_link" target="_blank" title="Instagram" class="text-white border rounded-circle p-1 border-black text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/instagram.avif" class="rounded-circle " width="30px" alt="Social Media Logoes">
</a>
<a href="https://www.linkedin.com/company/gurukul-dream-foundation" target="_blank" title="LinkedIn" class=" border rounded-circle p-1 border-black text-black bg-white text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/linkedin.png" class="rounded-circle " width="30px" alt="Social Media Logoes">
<!-- Improved Footer HTML with Embedded CSS -->
<div class="footer-wrapper bg-light mt-5">
<style>
.footer-wrapper {
background-color: #f3f3cd;
color: #1e1e1e;
font-family: 'Segoe UI', sans-serif;
}
.footer-wrapper a {
color: #333;
text-decoration: none;
}
.footer-wrapper a:hover {
color: #007bff;
}
.footer-wrapper h5,
.footer-wrapper h3 {
font-weight: 700;
}
.social-media-links a img {
transition: transform 0.3s ease;
}
.social-media-links a:hover img {
transform: scale(1.1);
}
.social-media-links a {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.form-control {
border-radius: 0.5rem;
}
.btn-primary {
background-color: #198754;
border: none;
}
.btn-primary:hover {
background-color: #157347;
}
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
color: #f0ad4e;
background: #fff;
border-radius: 50%;
padding: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>

<div class="container py-5">
<footer class="row row-cols-1 row-cols-md-3 g-4">
<!-- Contact Section -->
<div class="col">
<h5>Contact Us</h5>
<ul class="list-unstyled">
<li class="mb-2">
<a href="tel:+918269250197">
📞 +91 82692 50197
</a>
<a href="https://youtu.be/M2y2MtGPANQ" target="_blank" title="YouTube" class="text-white border rounded-circle p-1 border-black text-center d-flex align-items-center justify-content-center social-media-logoes">
<img src="./assets/images/logoes/youtube.jpg" class="rounded-circle " width="30px" alt="Social Media Logoes">
</li>
<li>
<a href="mailto:info@gurukuldreamfoundation.org">
✉️ info@gurukuldreamfoundation.org
</a>
</li>
</ul>

<!-- Social Media Links -->
<div class="social-media-links d-flex gap-2 mt-3">
<a href="https://twitter.com/DreamGurukul?s=08" target="_blank">
<img src="./assets/images/logoes/twitter.webp" width="30" alt="Twitter">
</a>
<a href="https://www.facebook.com/Gurukul-Dream-Foundation-106034151488777/" target="_blank">
<img src="./assets/images/logoes/facebook.png" width="30" alt="Facebook">
</a>
<a href="https://instagram.com/gurukuldreamfoundation?utm_medium=copy_link" target="_blank">
<img src="./assets/images/logoes/instagram.avif" width="30" alt="Instagram">
</a>
<a href="https://www.linkedin.com/company/gurukul-dream-foundation" target="_blank">
<img src="./assets/images/logoes/linkedin.png" width="30" alt="LinkedIn">
</a>
<a href="https://youtu.be/M2y2MtGPANQ" target="_blank">
<img src="./assets/images/logoes/youtube.jpg" width="30" alt="YouTube">
</a>
</div>
</div>

</div>

<a href="./" class="d-flex fs-5 mt-2 align-items-center footer-logo-responsive flex-column mb-3 link-body-emphasis text-decoration-none w-25">
<img src="./assets/images/gdf-logo.png" class="w-100" alt="">
<!-- <img src="./assets/images/logo.png" class="w-100" alt="Gurukul Dream Foundation logo"> -->
<!-- Gurukul Dream Foundation -->
</a>
<!-- <div class="col my-3">
</div> -->

<div class="justify-self-end my-3 " id="Contact" style="width: 400px !important;">
<h3 class="h1 text-success libre-baskerville-regular">Get in Touch</h3>
<form action="./assets/email.php" method="POST">
<input type="text" name="name" class="form-control my-3" required placeholder="Name">
<input type="number" name="mobile" class="form-control my-3" required placeholder="Phone No.">
<input type="email" name="email" class="form-control my-3" required placeholder="Email">
<textarea type="text" name="message" class="form-control my-3" required placeholder="Drop a message..." style="height: 100px;"></textarea>
<button class="btn btn-primary mt-2" type="submit" >Send</button>
</form>
</div>
<!-- Logo -->
<div class="col text-center">
<img src="./assets/images/gdf-logo.png" alt="GDF Logo" class="img-fluid" style="max-width: 150px;">
</div>


<!-- Contact Form -->
<div class="col">
<h3>Get in Touch</h3>
<form action="./assets/email.php" method="POST">
<input type="text" name="name" class="form-control my-2" required placeholder="Name">
<input type="number" name="mobile" class="form-control my-2" required placeholder="Phone No.">
<input type="email" name="email" class="form-control my-2" required placeholder="Email">
<textarea name="message" class="form-control my-2" required placeholder="Drop a message..." style="height: 100px;"></textarea>
<button class="btn btn-primary mt-2" type="submit">Send</button>
</form>
</div>
</footer>

<hr>
<p class="text-center fw-bold">Copyright &copy; 2024 | Gurukul Dream Foundation. All Rights Reserved.</p>
</div>

</footer>
<hr class="text-dark w-100">
<p class="text-body-secondary text-center fw-bold">Copyright &copy; 2024 | Gurukul Dream Foundation. All Rights Reserved.</p>
<!-- Scroll to Top -->
<a class="scroll-to-top" href="#" title="Go to Top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-caret-up-square-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11"/>
</svg>
</a>
</div>
</div>


<a class="position-fixed text-orange shadow-yellow rounded shadow" href="#" title="Go to Top" style="bottom: 30px; right: 30px;">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-up-square-fill" viewBox="0 0 16 16">
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11"/>
</svg>
</a>
Loading