Skip to content

Commit

Permalink
Merge pull request #1642 from ssyy21/sneha_yadav
Browse files Browse the repository at this point in the history 
fix: improvement of footer section
  • Loading branch information
@apu52
apu52 authored Nov 16, 2024
2 parents 1e66441 + c358083 commit 5efe4a6
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 54 deletions.
96 changes: 94 additions & 2 deletions footer.css
View file
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
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

0 comments on commit 5efe4a6

Please sign in to comment.