Skip to content

Commit

Permalink
Merge pull request #853 from Sujal1201/main
Browse files Browse the repository at this point in the history 
To adding the animation effect to social media icons
  • Loading branch information
@ankit071105
ankit071105 authored Nov 10, 2024
2 parents e00968d + ecd0b63 commit 87034c4
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 42 deletions.
19 changes: 11 additions & 8 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="why-us.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">


<script src="chatbot.js"></script>
</head>
<style>
Expand Down Expand Up @@ -544,14 +547,14 @@ <h1>About Us 🚀</h1>
<a href="#"> <img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
<p style="color: #b5fdf4;" >Affordable adventures, unforgettable memories—explore with ease.</p>
<p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
<div class="social-icons">
<a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
<a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
<a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
</div>
<div class="social-links">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>

</div>


Expand Down
12 changes: 6 additions & 6 deletions buy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,12 +725,12 @@ <h3>${type === 'bus' ? ticket.busName : 'Train Number: ' + ticket.trainNumber}</
<p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
<!-- Social Media Icons -->
<div class="social-icons">
<a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
<a href="https://www.twitter.com" ><i class="fab fa-x-twitter"></i></a>
<a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
<a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
</div>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>

<!-- Links Sections -->
Expand Down
29 changes: 15 additions & 14 deletions contactus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Trainline</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<style>

/* cursor animation */
Expand Down Expand Up @@ -444,20 +446,19 @@ <h1>Contact Us</h1>
<footer class="footer-container">
<div class="footer-top">
<footer>

<div class="footer-container">
<div class="footer-logo-section">
<a href="#"><img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
<p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
<p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
<div class="social-icons">
<a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
<a href="https://www.twitter.com"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
<a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-logo-section">
<a href="#"><img src="./images/3.jpeg" alt="easyJet holidays logo" class="footer-logo"></a>
<p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
<p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>



<div class="footer-links">
Expand Down
12 changes: 6 additions & 6 deletions contributor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,12 +304,12 @@ <h2>Meet Our Contributors</h2>
<p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>

<div class="social-icons">
<a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
<a href="https://www.twitter.com" ><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>

<div class="footer-links">
Expand Down
20 changes: 16 additions & 4 deletions footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,26 @@

/* Social Media Icons */
.social-icons a {
display: inline-block;
margin: 0 10px;
color: #12e9cc;
display: inline-flex;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
background-color: transparent;
border: 0.2rem solid #26c9bb;
font-size: 1.5rem;
border-radius: 50%;
margin: 3rem 1.5rem 3rem 0;
transition: 0.3s ease;
color: #26c9bb;
text-decoration: none;
}

.social-icons a:hover {
color: #76b2ab;
color: black;
transform: scale(1.3) translateY(-5px);
background-color: #26c9bb;
box-shadow: 0 0 25px #26c9bb;
}

/* Footer Link Sections */
Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1291,11 +1291,11 @@ <h2>We Value Your Feedback!</h2>
<p style="color: #b5fdf4;">Affordable adventures, unforgettable memories—explore with ease.</p>
<p style="color: #dcfffa;" class="follow-us">FOLLOW US ON HERE:</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
<button id="visitorCounter" class="btn btn-info text-white rounded">Visitors Count: 1</button>
</div>
Expand Down

0 comments on commit 87034c4

Please sign in to comment.