Skip to content

Commit

Permalink
Merge pull request #1243 from SumitThakur1600/main
Browse files Browse the repository at this point in the history 
Fixed Responsiveness
  • Loading branch information
@vimistify
vimistify authored Jan 3, 2025
2 parents 183afdc + 8a81067 commit 7ff1a3a
Showing 1 changed file with 170 additions and 74 deletions.
244 changes: 170 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,21 +138,7 @@
z-index: 1000;
} */

footer {
background-color: #C4D7FF;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

.social-icon {
transition: transform 0.3s ease;
/* Smooth transition effect */
}



.checkbtn {
font-size: 30px;
Expand All @@ -169,18 +155,7 @@
display: none;
}

/* Added the hover animation on the footer social icons */
.social-icon {
transition: transform 0.3s ease;
/* Smooth transition effect */
}

.social-icon:hover {
transform: scale(1.3);
/* Scale the element to 1.3 times its size */
}

.fa-facebook:hover {
.fa-facebook:hover {
color: blue;
/* Icon color change to blue on hover */
}
Expand Down Expand Up @@ -901,59 +876,180 @@ <h2>Contact Us</h2>
</div>

<!-- FAQ section ends here ... -->
<!-- footer start here -->
<!-- footer start here -->
<!-- footer start here -->
<footer style="color: #f3f4f6; text-align: center; width: 100%; height: 100%;">
<style>
/* Base styles for footer container */
.new-footer-container {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Ensures content is centered horizontally */
align-items: center; /* Ensures content is centered vertically */
padding: 20px 0;
background-color: #C4D7FF;
color: #f3f4f6;
box-sizing: border-box;
}

/* Styling for each footer section */
.new-footer-section {
flex: 1;
min-width: 250px;
background-color: black;
margin-bottom: 20px;
text-align: center;
align-self: center;
}

<!-- footer start here -->

<footer style=" color: #f3f4f6; text-align: center; width: 100%;">
<div style="background-color: #C4D7FF; color: #f3f4f6; ">
<div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3>
<ul style="list-style-type: none; padding: 0;">
<li><a href="about.html" style="color: #000000; text-decoration: none;">About Us</a></li>
<li><a href="contact.html" style="color: #000000; text-decoration: none;">Contact Us</a></li>
<li><a href="privacy.html" style="color: #000000; text-decoration: none;">Privacy Policy</a></li>
<li><a href="terms.html" style="color: #000000; text-decoration: none;">Terms of Service</a></li>
<li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li>
</ul>
</div>
<div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
<h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
<a href="mailto:[email protected]" style="color: #000000;">[email protected]</a></p>
<p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a>
</p>
</div>
<div style="text-align: center; min-width: 200px; color: black;">
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
<div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
<a href="https://www.facebook.com" class="social-icon facebook"
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
<a href="https://www.twitter.com" class="social-icon twitter"
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.instagram.com" class="social-icon instagram"
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com" class="social-icon linkedin"
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to Our Newsletter</h3>
<form action="#">
<input type="email" placeholder="Your Email"
style="padding: 10px; width: 80%; border: none; border-radius: 5px;" required><br><br>
<button type="submit"
style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
</form>
</div>
</div>
</footer>
.new-footer-section h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #2980b9;
}

.new-footer-section a {
color: #000000;
text-decoration: none;
}

.new-footer-section a:hover {
text-decoration: underline;
}

.new-social-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
height: auto;
}

.new-newsletter-input {
padding: 10px;
width: 80%;
border: none;
border-radius: 5px;
margin-bottom: 10px;
}

<style>
.new-newsletter-button {
background-color: #e81a1a;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
}

/* Media query for large screens (Desktop) */
@media (max-width: 1250px) {
.new-footer-container {
flex-direction: column; /* Stack sections vertically */
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
}

.new-footer-section {
margin-bottom: 20px; /* Space between sections */
width: 100%; /* Full width in column layout */
}

.new-newsletter-input {
width: 90%; /* Slightly reduce width of input field */
}
}

/* Media query for medium screens (Tablets) */
@media (max-width: 768px) {
.new-footer-container {
flex-direction: column;
align-items: center;
text-align: center; /* Ensures text is centered */
}

.new-footer-section {
margin-bottom: 20px;
text-align: center;
}

.new-newsletter-input {
width: 90%; /* Full width for smaller screens */
}
}

/* Media query for small screens (Mobile) */
@media (max-width: 400px) {
.new-footer-container {
flex-direction: column;
align-items: center;
text-align: center;
}

.new-footer-section {
margin-bottom: 15px;
width: 100%;
}

.new-newsletter-input {
width: 90%; /* Full width for smaller screens */
}

.new-social-icons {
gap: 10px; /* Reduce gap between social icons */
}

.new-newsletter-input {
padding: 8px;
font-size: 14px; /* Slightly smaller input on mobile */
}

.new-newsletter-button {
font-size: 14px; /* Smaller button text */
padding: 8px 16px; /* Adjust button size */
}
}

</style>

<div class="new-footer-container">
<div class="new-footer-section">
<h3>Quick Links</h3>
<ul style="list-style-type: none; padding: 0;">
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms of Service</a></li>
<li><a href="sitemap.html">Site Map</a></li>
</ul>
</div>
<div class="new-footer-section">
<h3>Contact Info</h3>
<p style="color: #000;">123 Emergency Lane, Mumbai, India</p>
<a href="mailto:[email protected]" style="color: #000000;">[email protected]</a>
<p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a></p>
</div>
<div class="new-footer-section">
<h3>Follow Us</h3>
<div class="new-social-icons">
<a href="https://www.facebook.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
<a href="https://www.twitter.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com" style="color: black; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="new-footer-section">
<h3>Subscribe to Our Newsletter</h3>
<form action="#">
<input class="new-newsletter-input" type="email" placeholder="Your Email" required>
<button class="new-newsletter-button" type="submit">Subscribe</button>
</form>
</div>
</div>
</footer>

<style>
.fot {
display: flex;
height: 40vh;
Expand Down

0 comments on commit 7ff1a3a

Please sign in to comment.