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] Social Icon Jittering Fix on Every Page #548

Merged
merged 3 commits into from
Oct 11, 2024
Merged

[FIX] Social Icon Jittering Fix on Every Page #548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60005dc
home link 404 solved & dark button style added
4F24L Oct 9, 2024
f2fc883
home link 404 solved & dark button style added
4F24L Oct 9, 2024
49c055e
Social Icon Jitter Fix on Every Page
4F24L 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
10 changes: 5 additions & 5 deletions Feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,15 +434,15 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<!-- Social Media Links -->
<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;">
<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: 24px;"><i class="fab fa-facebook"></i></a>
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: 24px;"><i class="fa-brands fa-x-twitter"></i></a>
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: 24px;"><i class="fab fa-instagram"></i></a>
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: 24px;"><i class="fab fa-linkedin-in"></i></a>
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>

Expand Down
21 changes: 5 additions & 16 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,17 +269,6 @@ <h2>Emergency Care</h2>

<!-- Added responsiveness: Link redirect to respective sites -->
<!-- Social Media Section -->
<div class="social-media">
<a style=font-size:24px; href="https://www.facebook.com/" class="social-icon facebook"><i
class="fab fa-facebook"></i></a>
<a style=font-size:24px; href="https://x.com/" class="social-icon twitter"><i
class="fa-brands fa-x-twitter"></i></a>
<!--Updated icon-->
<a style=font-size:24px; href="https://www.instagram.com/" class="social-icon instagram"><i
class="fab fa-instagram"></i></a>
<a style=font-size:24px; href="https://www.linkedin.com/" class="social-icon linkedin"><i
class="fab fa-linkedin"></i></a>
</div>
</div>

<footer style=" color: #f3f4f6; text-align: center; width: 100%;">
Expand Down Expand Up @@ -323,18 +312,18 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<!-- Social Media Links -->
<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;">
<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: 24px;"><i
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: 24px;"><i
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: 24px;"><i
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: 24px;"><i
style="color: black; text-decoration: none; font-size: 1.5rem;"><i
class="fab fa-linkedin-in"></i></a>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,15 +453,15 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<!-- Social Media Links -->
<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;">
<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: 24px;"><i class="fab fa-facebook"></i></a>
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: 24px;"><i class="fa-brands fa-x-twitter"></i></a>
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: 24px;"><i class="fab fa-instagram"></i></a>
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: 24px;"><i class="fab fa-linkedin-in"></i></a>
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>

Expand Down
46 changes: 36 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,23 @@
#backToTopBtn:hover {
background-color: #c91515;
}

.light-dark-btn{
/* border: 1px solid black; */
display: flex;
justify-content: center;
align-items: center;
padding:10px 13px;
border-radius: 50%;
margin-left: 5px;

box-shadow: 0 0 5px rgb(0, 0, 0);
font-size: 1.1rem;
}

#logo img:hover{
background-color: #c4d7ff;
}
</style>

</head>
Expand All @@ -454,7 +471,7 @@
<header class="sticky">
<div class="container">

<div class="logo">
<div id="logo" class="logo">
<div class="brand-name">
<span class="ambu">Ambu</span>Flow
</div>
Expand All @@ -463,7 +480,7 @@
<nav class="menu">
<ul>
<li>
<a href="/" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
<a href="/index.html" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li>
<a href="features.html" id="features-link" onclick="changeContent('features')"><i
Expand All @@ -480,7 +497,7 @@
</ul>
</nav>
<div class="buttons">
<button class="dark-mode-toggle" id="dark-mode-button">
<button class="light-dark-btn dark-mode-toggle" id="dark-mode-button">
<i class="fa-solid fa-moon"></i>
</button>
<a href="login.html" class="login">Log in</a>
Expand Down Expand Up @@ -570,7 +587,13 @@ <h2>Contact Us</h2>
<div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;">

<!-- Quick Links Section -->
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<div
style="flex: 1;
display: flex;
flex-direction: column;
align-items: start;
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; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li>
Expand All @@ -584,7 +607,10 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links<
</div>

<!-- Contact Information Section -->
<div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
<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:emergency@ambulanceservice.in" style="color: #000000; background:none; cursor: pointer;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a></p>
Expand All @@ -595,15 +621,15 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<!-- Social Media Links -->
<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;">
<div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
<a href="https://www.facebook.com" class="social-icon facebook no-hover-effect"
style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-facebook"></i></a>
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 no-hover-effect"
style="color: black; text-decoration: none; font-size: 24px;"><i class="fa-brands fa-x-twitter"></i></a>
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 no-hover-effect"
style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-instagram"></i></a>
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 no-hover-effect"
style="color: black; text-decoration: none; font-size: 24px;"><i class="fab fa-linkedin-in"></i></a>
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>

Expand Down
10 changes: 5 additions & 5 deletions team.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,15 +335,15 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<!-- Social Media Links -->
<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;">
<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: 24px;"><i class="fab fa-facebook"></i></a>
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: 24px;"><i class="fa-brands fa-x-twitter"></i></a>
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: 24px;"><i class="fab fa-instagram"></i></a>
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: 24px;"><i class="fab fa-linkedin-in"></i></a>
style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>

Expand Down