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

fix: improvement of footer section #1642

Merged
merged 1 commit into from
Nov 16, 2024
Merged

fix: improvement of footer section #1642

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
96 changes: 94 additions & 2 deletions footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

.footer__container {
width: 100%;
/* max-width: 1800px; */
Expand All @@ -12,12 +13,27 @@
margin: 0;
padding: 0;
}
.footer__area {
padding: 0 20px; /* Adjust padding as needed for left and right spacing */
}

.d-flex {
margin-bottom: 10px; /* Adjust vertical spacing between contact items */
}
.footer__col {
max-width: 600px; /* Adjust based on your layout */
margin: 0 auto; /* Center the content */
}



.goog-te-combo{
background: #5074cf;


background: #B88BBA;
color: white;
height: 40px;
border-radius: 70px;
border-radius: 40px;
padding: 10px;
border: #1457ff;
backdrop-filter: blur(20px);
Expand All @@ -42,4 +58,80 @@
.footer_text a{
color: white;
/* margin-top: 10px; */

}


.footer__area{
display: flex;
flex-direction: column;
gap: 10px;

}
.footer_link_text a{
color: white;
font-size: 14px;
font-family: Poppins, sans-serif;

}
.gmap_canvas {
position: relative; /* Allows for positioning child elements */
overflow: hidden; /* Prevents overflow of child elements */
background: none !important; /* Ensure no background */
height: 100%; /* Use 100% height of the parent container */
width: 100%; /* Use 100% width of the parent container */
max-height: 400px; /* Set a maximum height for better responsiveness */
max-width: 130%; /* Set a maximum width for better responsiveness */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: Add some shadow for better visibility */
border-radius: 5px; /* Add rounded corners */

}
.gmap_canvas {
overflow: hidden;
background: none !important;
height: 200px;
width: 200px;


}

.language-dropdown-container {
padding: 32px;
margin-top: 20px;
margin-bottom: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #ff9fcf; /* Light background to match theme */
}

.language-label {
display: block;
font-weight: bold;
font-size: 18px;
color: #123456; /* Adjust color to match theme */
margin-bottom: 10px; /* Space between label and dropdown */
}

.language-dropdown {
display: inline-block;
padding: 15px;
border: 1px solid #ff9fcf; /* Border color to match theme */
border-radius: 5px;
background-color: #ff9fcf; /* Background color for dropdown */
transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.language-dropdown:hover {
border-color: #ff6f91; /* Change border color on hover */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slight shadow effect on hover */
}

.language-dropdown select {
border: none; /* Remove default border from select */
outline: none; /* Remove outline */
background: transparent; /* Make background transparent */
font-size: 16px; /* Font size for dropdown options */
color: #123456; /* Text color to match theme */
width: 100%; /* Full width of the dropdown */
}

90 changes: 38 additions & 52 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2246,30 +2246,32 @@ <h3 class="footer-head" class="footer__title">Places You May Want to Visit<span>
</div>
<div class="footer__col">
<div class="footer__area">
<h4 class="footer-head" class="footer__subtitle">Support</h4>
<p><a href="./blog.html" class="footer__link">Our Blogs</a></p>
<p><a href="./faq.html" class="footer__link">FAQs</a></p>
<p><a href="./tnc.html" class="footer__link">Terms & Conditions</a></p>
<p><a href="./privacy.html" class="footer__link">Privacy Policy</a></p>
<p><a href="./Licensing.html" class="footer__link">Licensing</a></p>
<p><a href="#cnt-form" class="footer__link">Contact Us</a></p>
<p><a href="contributors.html" class="footer__link">Our Contributors</a></p>
<p><a href="sitemap.html" class="footer__link">SiteMap</a></p>
<h3 class="footer-head footer__subtitle">Support</h3>
<p class="footer_link_text">
<a href="./blog.html" class="footer__link">Our Blogs</a> <br>
<a href="./faq.html" class="footer__link">FAQs</a> <br>
<a href="./tnc.html" class="footer__link">Terms & Conditions</a> <br>
<a href="./privacy.html" class="footer__link">Privacy Policy</a> <br>
<a href="./Licensing.html" class="footer__link">Licensing</a> <br>
<a href="#cnt-form" class="footer__link">Contact Us</a> <br>
<a href="contributors.html" class="footer__link">Our Contributors</a> <br>
<a href="sitemap.html" class="footer__link">SiteMap</a>
</p>
</div>
</div>
</div>
<div class="footer__col">
<h4 class="footer-head" style="padding-left: 35px; color: #123456;"> Address</h4>
<div class="mapouter">
<div class="gmap_canvas"><iframe width="200" height="200" id="gmap_canvas"
src="https://maps.google.com/maps?q=wellington%20street%20kolkata&t=k&z=11&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a
href="https://embedgooglemap.net/124/">invincible 123movies</a><br>
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>

<style>
.mapouter {
position: relative;
text-align: right;
height: 200px;
width: 200px;
height: 150px;
width: 150px;
}
</style><a href="https://www.embedgooglemap.net">embed google map on website</a>
<style>
Expand All @@ -2285,7 +2287,7 @@ <h4 class="footer-head" style="padding-left: 35px; color: #123456;"> Address</h4
</div>
<div class="footer__col">
<div class="footer__area">
<h4>Contact Us</h4>
<h4 class="contact_us">Contact Us</h4>
<div class="d-flex align-items-center mb-2">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path
Expand All @@ -2300,65 +2302,49 @@ <h4>Contact Us</h4>
</svg>
<a href="tel:8562145852" class="text-nowrap">+91 8562145852</a>
</div>
<div class="icons">
<a
href="https://www.linkedin.com/in/arpan-chowdhury-775294251/?original_referer=https%3A%2F%2Fin%2Esearch%2Eyahoo%2Ecom%2F&originalSubdomain=in">
<div class="icon">
<i class="fab fa-linkedin" title="linkedin" style="cursor: pointer;"></i>
</div>
<div class="icons" style="display: flex; gap: 10px; margin-top: 10px;">
<a href="https://www.linkedin.com/in/arpan-chowdhury-775294251/">
<div class="icon"><i class="fab fa-linkedin" title="LinkedIn" style="cursor: pointer;"></i></div>
</a>

<a href="https://x.com/ArpanCh40193288">
<div class="icon">
<i class="fa-brands fa-x-twitter" title="X" style="cursor: pointer;"></i>
</div>
<div class="icon"><i class="fa-brands fa-x-twitter" title="X" style="cursor: pointer;"></i></div>
</a>

<a href="https://www.instagram.com/anuragbasu1973/">
<div class="icon">
<i class="fab fa-instagram" title="Instagram" style="cursor: pointer;"></i>
</div>
<div class="icon"><i class="fab fa-instagram" title="Instagram" style="cursor: pointer;"></i></div>
</a>


<a href="https://www.youtube.com/@arpanchowdhury53" title="YouTube">
<div class="icon">
<i class="fab fa-youtube" style="cursor: pointer;"></i>
</div>
<a href="https://www.youtube.com/@arpanchowdhury53">
<div class="icon"><i class="fab fa-youtube" title="YouTube" style="cursor: pointer;"></i></div>
</a>

<a href="https://github.com/apu52">
<div class="icon">
<i class="fab fa-github" title="Github"></i>
</div>
<div class="icon"><i class="fab fa-github" title="GitHub"></i></div>
</a>

</div>
<!-- Visitor Widget -->
<div class="visitor-widget mt-3">
<div class="visitor-widget mt-3" style="display: flex; justify-content: center; margin-top: 20px;">
<a>
<img alt="Hits"
src="https://hits.sh/apu52.github.io/Travel_Website.svg?style=for-the-badge&label=Visitors&extraCount=786&color=526180&labelColor=9bbbff" />
<img
alt="Hits"
src="https://hits.sh/apu52.github.io/Travel_Website.svg?style=for-the-badge&label=Visitors&extraCount=786&color=526180&labelColor=9bbbff"
style="transform: scale(1.2);"
/>
</a>
</div>
</div>

</div>
<div
style="padding: 32px; background-color: transparent; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<label for="google_translate_element"
style="display: block; font-weight: bold; margin-bottom: 10px; font-size: 20px; color: #123456;">Select
Language:</label>
<div id="google_translate_element"
style="display: inline-block; margin-top: 10px; padding: 20px; border: 1px solid #ff9fcf; border-radius: 5px; background-color: #fff;">
<div style="padding: 32px; margin-top: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<label for="google_translate_element" style="display: block; font-weight: bold; font-size: 18px; color: #123456;">
Select Language:
</label>
<div id="google_translate_element" style="display: inline-block; padding: 15px; border: 1px solid var(--secondary-color); border-radius: 5px; background-color: #fff;">
</div>
</div>
</div>

<!-- New copyright code to make it dynamic and display current year -->
<div class="footer__bar">
<div class="footer__bar" style="padding: 10px; text-align: center; font-size: 16px; margin-top: 70px;">
<div>
<li>Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </li>
<li>&copy; <span id="year"></span> Arpan Chowdhury. All rights reserved.</li>
</div>
</div>

Expand Down
Loading