diff --git a/Feedback.html b/Feedback.html index a55db0b4..3f762a38 100644 --- a/Feedback.html +++ b/Feedback.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @@ -19,15 +20,17 @@ flex-direction: column; min-height: 100vh; } + footer { - background-color: #C4D7FF; - color: white; - text-align: center; - padding: 10px 0; - position: relative; - bottom: 0; - width: 100%; - } + background-color: #C4D7FF; + color: white; + text-align: center; + padding: 10px 0; + position: relative; + bottom: 0; + width: 100%; + } + .content { margin: 15px; padding: 15px; @@ -48,7 +51,7 @@ } h2 { - + text-align: center; color: #2c3e50; } @@ -61,25 +64,29 @@ } .star-rating input { - display: none; /* Hide radio inputs */ + display: none; + /* Hide radio inputs */ } .star-rating label { - font-size: 3.5rem; /* Increased size for better visibility */ + font-size: 3.5rem; + /* Increased size for better visibility */ color: #ddd; cursor: pointer; transition: color 0.2s; } /* Color the stars based on the selected rating */ - .star-rating input:checked ~ label { - color: #ffdd00; /* Color for selected stars */ + .star-rating input:checked~label { + color: #ffdd00; + /* Color for selected stars */ } /* Color on hover */ .star-rating label:hover, - .star-rating label:hover ~ label { - color: #ffdd00; /* Color on hover */ + .star-rating label:hover~label { + color: #ffdd00; + /* Color on hover */ } button { @@ -89,7 +96,8 @@ border: none; cursor: pointer; font-size: 16px; - transition: background-color 0.3s; /* Smooth transition */ + transition: background-color 0.3s; + /* Smooth transition */ } button:hover { @@ -97,178 +105,253 @@ } textarea { - width: 100%; /* Full width for better usability */ - max-width: 500px; /* Limiting max width */ + width: 100%; + /* Full width for better usability */ + max-width: 500px; + /* Limiting max width */ padding: 10px; margin-top: 10px; border: 1px solid #ccc; border-radius: 4px; + } + /* 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 { + color: blue; + /* Icon color change to blue on hover */ + } + + .fa-x-twitter:hover { + color: black; + /* Icon color change to black on hover */ + } + + .fa-instagram:hover { + color: orangered; + /* Icon color change to orangered on hover */ + } + + .fa-linkedin-in:hover { + color: rgb(16, 13, 195); + /* Icon color change to rgb(16, 13, 195) on hover */ } @keyframes logoAnimation { 0% { - opacity: 0; - transform: translateX(-100px); /* Start from the left */ + opacity: 0; + transform: translateX(-100px); + /* Start from the left */ } + 50% { - transform: translateX(10px); /* Move slightly to the right */ + transform: translateX(10px); + /* Move slightly to the right */ } + 100% { - opacity: 1; - transform: translateX(0); /* End at original position */ + opacity: 1; + transform: translateX(0); + /* End at original position */ } - } + } - /* Letter Drop Animation */ - @keyframes letterDrop { + /* Letter Drop Animation */ + @keyframes letterDrop { 0% { - transform: translateY(-100%); - opacity: 0; + transform: translateY(-100%); + opacity: 0; } + 50% { - transform: translateY(10px); /* Slight bounce */ - opacity: 1; + transform: translateY(10px); + /* Slight bounce */ + opacity: 1; } + 100% { - transform: translateY(0); + transform: translateY(0); } - } + } - .logo { + .logo { display: flex; align-items: center; animation: logoAnimation 1s ease forwards; - } + } - .brand-name { + .brand-name { display: flex; flex-direction: row; align-items: center; - margin-right: 10px; /* Space between the text and the logo image */ - } + margin-right: 10px; + /* Space between the text and the logo image */ + } - .letter { + .letter { display: inline-block; font-size: 2rem; animation: letterDrop 0.5s ease forwards; animation-delay: calc(var(--letter-index) * 0.1s); - } - - .red { - color: red; - } - - - /* feedback form */ - .feedback-box{ - border: 1px solid #939aa1; - width: 40%; - min-width: 400px; - min-height: 350px; - border-radius: 15px; - background-color: #edf6ff; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - } - - .feed-btn{ - text-align: center; - margin-top: 2rem; - margin-bottom: 1rem; - - font-weight: 600; - - } - - .feed-btn:hover{ - transform: scale(1.03); - transition: all 0.3s ease; - } - - .feed-msg{ - border: none; - - } - .feed-msg:focus{ - outline: none; - } - - .circle { - height: 35px; - width: 35px; - border-radius: 24px; - background-color: black; - position: fixed; - top: 0; - left: 0; - pointer-events: none; - z-index: 99999999; - /* Stays on top of all elements */ - } - - - #thank-you-message{ - text-align: center; - display: none; - justify-content: center; - align-items: center; - - border: 1px solid #939aa1; - width: 40%; - min-width: 400px; - min-height: 350px; - border-radius: 15px; - background-color: #edf6ff; - - font-size: 2rem; - font-weight: 500; - color: green; - } + } + + .red { + color: red; + } + + .social-icon { + transition: transform 0.3s ease; + /* Smooth transition effect */ + } + + .social-icon:hover { + transform: scale(1.3); + /* Scale the element to 1.2 times its size */ + } + + .fa-facebook:hover { + color: blue; + /* Scale the element to 1.2 times its size */ + } + + .fa-x-twitter:hover { + color: black; + /* Scale the element to 1.2 times its size */ + } + + .fa-instagram:hover { + color: orangered; + /* Scale the element to 1.2 times its size */ + } + + .fa-linkedin-in:hover { + color: rgb(16, 13, 195); + /* Scale the element to 1.2 times its size */ + } + + /* feedback form */ + .feedback-box { + border: 1px solid #939aa1; + width: 40%; + min-width: 400px; + min-height: 350px; + border-radius: 15px; + background-color: #edf6ff; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .feed-btn { + text-align: center; + margin-top: 2rem; + margin-bottom: 1rem; + font-weight: 600; + + } + + .feed-btn:hover { + transform: scale(1.03); + transition: all 0.3s ease; + } + + .feed-msg { + border: none; + + } + + .feed-msg:focus { + outline: none; + } + + .circle { + height: 35px; + width: 35px; + border-radius: 24px; + background-color: black; + position: fixed; + top: 0; + left: 0; + pointer-events: none; + z-index: 99999999; + /* Stays on top of all elements */ + } + + + #thank-you-message { + text-align: center; + display: none; + justify-content: center; + align-items: center; + + border: 1px solid #939aa1; + width: 40%; + min-width: 400px; + min-height: 350px; + border-radius: 15px; + background-color: #edf6ff; + + font-size: 2rem; + font-weight: 500; + color: green; + } </style> </head> <header> - <div class="container"> - <div class="logo"> - <div class="brand-name"> - <span class="letter red" style="--letter-index: 1;">A</span> - <span class="letter red" style="--letter-index: 2;">m</span> - <span class="letter red" style="--letter-index: 3;">b</span> - <span class="letter red" style="--letter-index: 4;">u</span> - <span class="letter" style="--letter-index: 5;">F</span> - <span class="letter" style="--letter-index: 6;">l</span> - <span class="letter" style="--letter-index: 7;">o</span> - <span class="letter" style="--letter-index: 8;">w</span> - </div> - <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" /> - </div> - <nav class="menu"> - <ul> - <li><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 class="fa-solid fa-file"></i> Features</a></li> - <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a></li> - <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li> - <li><a href="Feedback.html" id="Feedback-link" onclick="changeContent('Feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a></li> - </ul> - </nav> - <div class="buttons"> - <a href="login.html" class="login">Log in</a> - <a href="up.html" class="get-started">Get started</a> - </div> + <div class="container"> + <div class="logo"> + <div class="brand-name"> + <span class="letter red" style="--letter-index: 1;">A</span> + <span class="letter red" style="--letter-index: 2;">m</span> + <span class="letter red" style="--letter-index: 3;">b</span> + <span class="letter red" style="--letter-index: 4;">u</span> + <span class="letter" style="--letter-index: 5;">F</span> + <span class="letter" style="--letter-index: 6;">l</span> + <span class="letter" style="--letter-index: 7;">o</span> + <span class="letter" style="--letter-index: 8;">w</span> + </div> + <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" /> + </div> + <nav class="menu"> + <ul> + <li><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 + class="fa-solid fa-file"></i> Features</a></li> + <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> + Team</a></li> + <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i + class="fa-solid fa-phone"></i> Contact</a></li> + <li><a href="Feedback.html" id="Feedback-link" onclick="changeContent('Feedback')"><i + class="fa-solid fa-clipboard"></i> Feedback</a></li> + </ul> + </nav> + <div class="buttons"> + <a href="login.html" class="login">Log in</a> + <a href="up.html" class="get-started">Get started</a> </div> + </div> </header> <body> <header> - + <h1>AmbuFlow Feedback</h1> </header> @@ -297,13 +380,13 @@ <h3>We Value Your Feedback</h3> Thank you for your response! </div> </div> - - - <footer style= " color: #f3f4f6; text-align: center; width: 100%;"> + + + <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;"> - + <!-- Quick Links Section --> <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3> @@ -315,35 +398,45 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links< <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li> </ul> </div> - + <!-- Contact Information Section --> <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;">emergency@ambulanceservice.in</a></p> - <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a></p> + <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a> + </p> </div> - + + <!-- Modified the looks of the social icons --> <!-- Social Media Links --> - <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> + <div style="text-align: center; min-width: 200px; color: black;"> <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3> - <a href="https://www.facebook.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br> - <a href="https://www.twitter.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br> - <a href="https://www.instagram.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br> - <a href="https://www.linkedin.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a> + <div style="display: flex; justify-content: center; align-items: center; gap: 15px;"> + <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> + <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> + <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> + <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> + </div> </div> - + <!-- Newsletter Subscription --> <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> + <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> - + </div> <hr> <!-- Copyright Section --> @@ -391,7 +484,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to event.preventDefault(); // Prevent the default form submission // Hide the feedback-box div - feedbackBox.style.display = 'none'; + feedbackBox.style.display = 'none'; // Show the thank-you message thankYouMessage.style.display = 'flex'; @@ -406,4 +499,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to }); </script> </body> -</html> + +</html> \ No newline at end of file diff --git a/contact.html b/contact.html index a159e0fd..defde2de 100644 --- a/contact.html +++ b/contact.html @@ -1,12 +1,14 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact</title> <link rel="stylesheet" href="src/css/index.css"> <link rel="shortcut icon" href="ambulance.png" type="image/x-icon"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!--Updated to latest version--> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> + <!--Updated to latest version--> <style> body { font-family: Arial, sans-serif; @@ -58,7 +60,8 @@ padding: 15px; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - width: 250px; /* Adjusted width for a better fit in a row */ + width: 250px; + /* Adjusted width for a better fit in a row */ transition: transform 0.3s, box-shadow 0.3s; } @@ -82,16 +85,35 @@ gap: 20px; } + /* Added the hover animation on the footer social icons */ .social-icon { - font-size: 24px; - color: #000000; - transition: transform 0.9s ease, color 0.9s ease; - /* Smooth transition */ + transition: transform 0.3s ease; + /* Smooth transition effect */ } - #facebook:hover { - color: #1877F2; - transform: scale(1.5); + .social-icon:hover { + transform: scale(1.3); + /* Scale the element to 1.3 times its size */ + } + + .fa-facebook:hover { + color: blue; + /* Icon color change to blue on hover */ + } + + .fa-x-twitter:hover { + color: black; + /* Icon color change to black on hover */ + } + + .fa-instagram:hover { + color: orangered; + /* Icon color change to orangered on hover */ + } + + .fa-linkedin-in:hover { + color: rgb(16, 13, 195); + /* Icon color change to rgb(16, 13, 195) on hover */ } #twitter:hover { @@ -126,75 +148,87 @@ from { opacity: 0; } + to { opacity: 1; } } + /* Logo Animation */ @keyframes logoAnimation { 0% { - opacity: 0; - transform: translateX(-100px); /* Start from the left */ + opacity: 0; + transform: translateX(-100px); + /* Start from the left */ } + 50% { - transform: translateX(10px); /* Move slightly to the right */ + transform: translateX(10px); + /* Move slightly to the right */ } + 100% { - opacity: 1; - transform: translateX(0); /* End at original position */ + opacity: 1; + transform: translateX(0); + /* End at original position */ } } - + /* Letter Drop Animation */ @keyframes letterDrop { 0% { - transform: translateY(-100%); - opacity: 0; + transform: translateY(-100%); + opacity: 0; } + 50% { - transform: translateY(10px); /* Slight bounce */ - opacity: 1; + transform: translateY(10px); + /* Slight bounce */ + opacity: 1; } + 100% { - transform: translateY(0); + transform: translateY(0); } } - + .logo { display: flex; align-items: center; animation: logoAnimation 1s ease forwards; } - + .brand-name { display: flex; flex-direction: row; align-items: center; - margin-right: 10px; /* Space between the text and the logo image */ + margin-right: 10px; + /* Space between the text and the logo image */ } - + .letter { display: inline-block; font-size: 2rem; animation: letterDrop 0.5s ease forwards; animation-delay: calc(var(--letter-index) * 0.1s); } - + .red { - color: red; + color: red; } + .circle { - height: 35px; - width: 35px; - border-radius: 24px; - background-color: black; - position: fixed; - top: 0; - left: 0; - pointer-events: none; - z-index: 99999999; - /* Stays on top of all elements */ - } + height: 35px; + width: 35px; + border-radius: 24px; + background-color: black; + position: fixed; + top: 0; + left: 0; + pointer-events: none; + z-index: 99999999; + /* Stays on top of all elements */ + } </style> </head> <header> @@ -210,105 +244,127 @@ <span class="letter" style="--letter-index: 7;">o</span> <span class="letter" style="--letter-index: 8;">w</span> </div> - <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" /> - </div> - <nav class="menu"> - <ul> - <li><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 class="fa-solid fa-file"></i> Features</a></li> - <li><a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i> Team</a></li> - <li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i class="fa-solid fa-phone"></i> Contact</a></li> - <li><a href="Feedback.html" id="Feedback-link" onclick="changeContent('Feedback')"><i class="fa-solid fa-clipboard"></i> Feedback</a></li> - </ul> - </nav> - <div class="buttons"> - <a href="login.html" class="login">Log in</a> - <a href="up.html" class="get-started">Get started</a> - </div> - </div> -</header> - -<div class="content" id="main-content"> - <h1>Contact Us</h1> - <div class="contact-info"> - <div class="contact-item"> - <img src="images/call1-w.avif" style="border-radius: 50%;" alt="Call Us"> - <h2>Call Us</h2> - <p>For immediate assistance, call our emergency line at <strong>123-456-7890</strong>.</p> - </div> - <div class="contact-item"> - <img src="https://i.postimg.cc/m2bGBGFf/help-w.png" style="border-radius: 50%;" alt="Help"> - <h2>Need Help?</h2> - <p>Our team is available 24/7 to help you with any inquiries.</p> - </div> - <div class="contact-item"> - <img src="images/caremeregency-w.png" style="border-radius: 50%;" alt="Emergency Care"> - <h2>Emergency Care</h2> - <p>In case of an emergency, please do not hesitate to reach out to us immediately.</p> </div> - </div> + </header> - <!-- Social Media Section --> - <div class="social-media"> - <a href="#" class="social-icon"><i class="fab fa-facebook" id="facebook"></i></a> - <a href="#" class="social-icon"><i class="fa-brands fa-x-twitter" id="twitter"></i></a> <!--Updated icon--> - <a href="#" class="social-icon"><i class="fab fa-instagram" id="instagram"></i></a> - <a href="#" class="social-icon"><i class="fab fa-linkedin" id="linkedin"></i></a> - </div> -</div> - -<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;"> - - <!-- Quick Links Section --> - <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> - - <!-- Contact Information Section --> - <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;">emergency@ambulanceservice.in</a></p> - <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a></p> - </div> - - <!-- Social Media Links --> - <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> - <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3> - <a href="https://www.facebook.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br> - <a href="https://www.twitter.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br> - <a href="https://www.instagram.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br> - <a href="https://www.linkedin.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a> + <div class="content" id="main-content"> + <h1>Contact Us</h1> + <div class="contact-info"> + <div class="contact-item"> + <img src="images/call1-w.avif" style="border-radius: 50%;" alt="Call Us"> + <h2>Call Us</h2> + <p>For immediate assistance, call our emergency line at <strong>123-456-7890</strong>.</p> + </div> + <div class="contact-item"> + <img src="https://i.postimg.cc/m2bGBGFf/help-w.png" style="border-radius: 50%;" alt="Help"> + <h2>Need Help?</h2> + <p>Our team is available 24/7 to help you with any inquiries.</p> + </div> + <div class="contact-item"> + <img src="images/caremeregency-w.png" style="border-radius: 50%;" alt="Emergency Care"> + <h2>Emergency Care</h2> + <p>In case of an emergency, please do not hesitate to reach out to us immediately.</p> + </div> </div> - - <!-- Newsletter Subscription --> - <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> + + <!-- 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> - </div> - <hr> - <!-- Copyright Section --> - <div style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;"> - <strong><p>© 2024 AmbuFlow. All rights reserved.</p></strong> - - <!-- Back to Top Button --> - <button id="backToTopBtn" style=" + + <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;"> + + <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;"> + + <!-- Quick Links Section --> + <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> + + <!-- Contact Information Section --> + <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;">emergency@ambulanceservice.in</a></p> + <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" + style="color: #000000;">+91-911-1234567</a></p> + </div> + + <!-- Modified the looks of the social icons --> + <!-- 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;"> + <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> + <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> + <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> + <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> + </div> + </div> + + <!-- Newsletter Subscription --> + <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> + + </div> + <hr> + <!-- Copyright Section --> + <div + style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;"> + <strong> + <p>© 2024 AmbuFlow. All rights reserved.</p> + </strong> + + <!-- Back to Top Button --> + <button id="backToTopBtn" style=" background-color: #e81a1a; color: white; border: none; @@ -317,23 +373,44 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to font-size: 16px; cursor: pointer; ">↑</button> - </div> -</footer> + </div> + </footer> -<script> - function changeContent(page) { - var links = document.querySelectorAll('.menu ul li a'); - links.forEach(link => link.classList.remove('active')); - document.getElementById(page + '-link').classList.add('active'); - } + + </script> + <script> const coords = { x: 0, y: 0 }; + const circles = document.querySelectorAll(".circle"); - window.onload = function() { - document.getElementById('contact-link').classList.add('active'); - }; + const colors = [ + "#ffb56b", + "#fdaf69", + "#f89d63", + "#f59761", + "#ef865e", + "#ec805d", + "#e36e5c", + "#df685c", + "#d5585c", + "#d1525c", + "#c5415d", + "#c03b5d", + "#b22c5e", + "#ac265e", + "#9c155f", + "#950f5f", + "#830060", + "#7c0060", + "#680060", + "#60005f", + "#48005f", + "#3d005e" + ]; - // Back to Top Button functionality - document.addEventListener('DOMContentLoaded', function() { - var backToTopBtn = document.getElementById("backToTopBtn"); + circles.forEach(function (circle, index) { + circle.x = 0; + circle.y = 0; + circle.style.backgroundColor = colors[index % colors.length]; + }); backToTopBtn.addEventListener('click', function() { window.scrollTo({ @@ -344,4 +421,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to }); </script> </body> -</html> + +</html> \ No newline at end of file diff --git a/features.html b/features.html index 54cd66d6..24350bf3 100644 --- a/features.html +++ b/features.html @@ -1,79 +1,178 @@ <!DOCTYPE html> <html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Features</title> - <link rel="stylesheet" href="src/css/index.css" /> - <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" /> - <link - rel="stylesheet" - href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" /> - <!--Updated to latest version--> - <style> - body { - font-family: Arial, sans-serif; - background-color: #f4f4f4; - margin: 0; - padding: 0; - color: #333; - display: flex; - flex-direction: column; - min-height: 100vh; - } - .logo { - display: flex; - align-items: center; - animation: logoAnimation 1s ease forwards; - } - - .brand-name { - display: flex; - flex-direction: row; - align-items: center; - margin-right: 10px; /* Space between the text and the logo image */ - } - - .letter { - display: inline-block; - font-size: 2rem; - animation: letterDrop 0.5s ease forwards; - } - - .red { - color: red; /* Change the color of letters in this class to red */ - } - .menu ul { - list-style-type: none; - padding: 0; + +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Features</title> + <link rel="stylesheet" href="src/css/index.css" /> + <link rel="shortcut icon" href="ambulance.png" type="image/x-icon" /> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" /> + <!--Updated to latest version--> + <style> + body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + color: #333; + display: flex; + flex-direction: column; + min-height: 100vh; + } + + .logo { + display: flex; + align-items: center; + animation: logoAnimation 1s ease forwards; + } + + .brand-name { + display: flex; + flex-direction: row; + align-items: center; + margin-right: 10px; + /* Space between the text and the logo image */ + } + + .letter { + display: inline-block; + font-size: 2rem; + animation: letterDrop 0.5s ease forwards; + } + + .red { + color: red; + /* Change the color of letters in this class to red */ + } + + .menu ul { + list-style-type: none; + padding: 0; + } + + .menu ul li { + display: inline; + margin-right: 10px; + } + + .menu ul li a { + padding: 10px 15px; + color: black; + text-decoration: none; + transition: background-color 0.3s, color 0.3s; + } + + .menu ul li a:hover { + background-color: #000; + color: white; + } + + .menu ul li a.active { + color: white; + background-color: #000; + } + + .content { + margin: 20px; + padding: 20px; + background-color: #e6eef3; + border-radius: 5px; + flex-grow: 1; + } + + h1 { + color: #2c3e50; + text-align: center; + margin-bottom: 20px; + } + + .features-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; + animation: fadeIn 1s ease-in-out; + } + + .feature-card { + background: #abd4fc; + padding: 15px; + border-radius: 5px; + text-align: center; + transition: transform 0.3s; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + .feature-card:hover { + transform: translateY(-5px); + } + + .feature-icon { + font-size: 40px; + color: #0560c2; + /* Bootstrap primary color */ + margin-bottom: 10px; + } + + /* 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 { + color: blue; + /* Icon color change to blue on hover */ + } + + .fa-x-twitter:hover { + color: black; + /* Icon color change to black on hover */ + } + + .fa-instagram:hover { + color: orangered; + /* Icon color change to orangered on hover */ + } + + .fa-linkedin-in:hover { + color: rgb(16, 13, 195); + /* Icon color change to rgb(16, 13, 195) on hover */ + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); } - .menu ul li { - display: inline; - margin-right: 10px; + + to { + opacity: 1; + transform: translateY(0); } - .menu ul li a { - padding: 10px 15px; - color: black; - text-decoration: none; - transition: background-color 0.3s, color 0.3s; + } + + /* Logo Animation */ + @keyframes logoAnimation { + 0% { + opacity: 0; + transform: translateX(-100px); + /* Start from the left */ } - .menu ul li a:hover { - background-color: #000; - color: white; + + 50% { + transform: translateX(10px); + /* Move slightly to the right */ } - .menu ul li a.active { + + footer { + background-color: #C4D7FF; color: white; - background-color: #000; - } - .content { - margin: 20px; - padding: 20px; - background-color: #e6eef3; - border-radius: 5px; - flex-grow: 1; - } - h1 { - color: #2c3e50; text-align: center; margin-bottom: 20px; } @@ -156,128 +255,115 @@ </style> </head> + <body> - <header> - <div class="container"> - - <div class="logo"> - <div class="brand-name"> - <span class="letter red" style="--letter-index: 1">A</span> - <span class="letter red" style="--letter-index: 2">m</span> - <span class="letter red" style="--letter-index: 3">b</span> - <span class="letter red" style="--letter-index: 4">u</span> - <span class="letter" style="--letter-index: 5">F</span> - <span class="letter" style="--letter-index: 6">l</span> - <span class="letter" style="--letter-index: 7">o</span> - <span class="letter" style="--letter-index: 8">w</span> - </div> - <a href="./index.html" - ><img - src="images/logo2-w.webp" - alt="Ambulance Monitoring System Logo" - style="width: 50px; height: auto" - /></a> - </div> + <header> + <div class="container"> - <nav class="menu"> - <ul> - <li> - <a href="index.html" id="home-link" - ><i class="fa-solid fa-house"></i> Home</a - > - </li> - <li> - <a href="features.html" id="features-link" class="active" - ><i class="fa-solid fa-file"></i> Features</a - > - </li> - <li> - <a href="team.html" id="team-link" - ><i class="fa-solid fa-user-group"></i> Team</a - > - </li> - <li> - <a href="contact.html" id="contact-link" - ><i class="fa-solid fa-clipboard"></i> Contact</a - > - </li> - <li> - <a href="Feedback.html" id="team-link" - ><i class="fa-solid fa-user-group"></i> Feedback</a - > - </li> - </ul> - </nav> - <div class="buttons"> - <a href="login.html" class="login">Log in</a> - <a href="up.html" class="get-started">Get started</a> + <div class="logo"> + <div class="brand-name"> + <span class="letter red" style="--letter-index: 1">A</span> + <span class="letter red" style="--letter-index: 2">m</span> + <span class="letter red" style="--letter-index: 3">b</span> + <span class="letter red" style="--letter-index: 4">u</span> + <span class="letter" style="--letter-index: 5">F</span> + <span class="letter" style="--letter-index: 6">l</span> + <span class="letter" style="--letter-index: 7">o</span> + <span class="letter" style="--letter-index: 8">w</span> </div> + <a href="./index.html"><img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" + style="width: 50px; height: auto" /></a> </div> - </header> - - <div class="content" id="main-content"> - <h1>Features</h1> - <p>Here are the features of AmbuFlow:</p> - <div class="features-grid"> - <div class="feature-card"> - <i class="fas fa-ambulance feature-icon"></i> - <h2>Quick Emergency Response</h2> - <p>Immediate notifications to the nearest ambulance service.</p> - </div> - <div class="feature-card"> - <i class="fas fa-map-marked-alt feature-icon"></i> - <h2>Real-Time Tracking</h2> - <p>Track ambulances in real-time for better coordination.</p> - </div> - <div class="feature-card"> - <i class="fas fa-comments feature-icon"></i> - <h2>Enhanced Communication</h2> - <p>Instant communication between dispatch and ambulances.</p> - </div> - <div class="feature-card"> - <i class="fas fa-cogs feature-icon"></i> - <h2>Resource Management</h2> - <p>Efficient allocation of resources for emergencies.</p> - </div> - <div class="feature-card"> - <i class="fas fa-user-friends feature-icon"></i> - <h2>User-Friendly Interface</h2> - <p>Easy-to-navigate system for users and providers.</p> - </div> - <div class="feature-card"> - <i class="fas fa-clock feature-icon"></i> - <h2>24/7 Availability</h2> - <p>Always available support and monitoring services.</p> - </div> - <div class="feature-card"> - <i class="fas fa-heartbeat feature-icon"></i> - <h2>Patient Health Monitoring</h2> - <p>Real-time monitoring of patient vitals during transport.</p> - </div> - <div class="feature-card"> - <i class="fas fa-lock feature-icon"></i> - <h2>Data Security</h2> - <p>Ensuring the security of patient and operational data.</p> - </div> - <div class="feature-card"> - <i class="fas fa-phone-alt feature-icon"></i> - <h2>Emergency Contact Integration</h2> - <p>Seamless integration with emergency contact services.</p> - </div> - <div class="feature-card"> - <i class="fas fa-comments-dollar feature-icon"></i> - <h2>Feedback System</h2> - <p>Collecting feedback to improve service quality.</p> - </div> + + <nav class="menu"> + <ul> + <li> + <a href="index.html" id="home-link"><i class="fa-solid fa-house"></i> Home</a> + </li> + <li> + <a href="features.html" id="features-link" class="active"><i class="fa-solid fa-file"></i> Features</a> + </li> + <li> + <a href="team.html" id="team-link"><i class="fa-solid fa-user-group"></i> Team</a> + </li> + <li> + <a href="contact.html" id="contact-link"><i class="fa-solid fa-clipboard"></i> Contact</a> + </li> + <li> + <a href="Feedback.html" id="team-link"><i class="fa-solid fa-user-group"></i> Feedback</a> + </li> + </ul> + </nav> + <div class="buttons"> + <a href="login.html" class="login">Log in</a> + <a href="up.html" class="get-started">Get started</a> + </div> + </div> + </header> + + <div class="content" id="main-content"> + <h1>Features</h1> + <p>Here are the features of AmbuFlow:</p> + <div class="features-grid"> + <div class="feature-card"> + <i class="fas fa-ambulance feature-icon"></i> + <h2>Quick Emergency Response</h2> + <p>Immediate notifications to the nearest ambulance service.</p> + </div> + <div class="feature-card"> + <i class="fas fa-map-marked-alt feature-icon"></i> + <h2>Real-Time Tracking</h2> + <p>Track ambulances in real-time for better coordination.</p> + </div> + <div class="feature-card"> + <i class="fas fa-comments feature-icon"></i> + <h2>Enhanced Communication</h2> + <p>Instant communication between dispatch and ambulances.</p> + </div> + <div class="feature-card"> + <i class="fas fa-cogs feature-icon"></i> + <h2>Resource Management</h2> + <p>Efficient allocation of resources for emergencies.</p> + </div> + <div class="feature-card"> + <i class="fas fa-user-friends feature-icon"></i> + <h2>User-Friendly Interface</h2> + <p>Easy-to-navigate system for users and providers.</p> + </div> + <div class="feature-card"> + <i class="fas fa-clock feature-icon"></i> + <h2>24/7 Availability</h2> + <p>Always available support and monitoring services.</p> + </div> + <div class="feature-card"> + <i class="fas fa-heartbeat feature-icon"></i> + <h2>Patient Health Monitoring</h2> + <p>Real-time monitoring of patient vitals during transport.</p> + </div> + <div class="feature-card"> + <i class="fas fa-lock feature-icon"></i> + <h2>Data Security</h2> + <p>Ensuring the security of patient and operational data.</p> + </div> + <div class="feature-card"> + <i class="fas fa-phone-alt feature-icon"></i> + <h2>Emergency Contact Integration</h2> + <p>Seamless integration with emergency contact services.</p> + </div> + <div class="feature-card"> + <i class="fas fa-comments-dollar feature-icon"></i> + <h2>Feedback System</h2> + <p>Collecting feedback to improve service quality.</p> </div> </div> + </div> -</div> + </div> -<footer style= " color: #f3f4f6; text-align: center; width: 100%;"> + <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;"> - + <!-- Quick Links Section --> <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links</h3> @@ -289,35 +375,45 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links< <li><a href="sitemap.html" style="color: #000000; text-decoration: none;">Site Map</a></li> </ul> </div> - + <!-- Contact Information Section --> <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;">emergency@ambulanceservice.in</a></p> - <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a></p> + <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;">+91-911-1234567</a> + </p> </div> - + + <!-- Modified the looks of the social icons --> <!-- Social Media Links --> - <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> + <div style="text-align: center; min-width: 200px; color: black;"> <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3> - <a href="https://www.facebook.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-facebook-f"></i> Facebook</a><br> - <a href="https://www.twitter.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br> - <a href="https://www.instagram.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-instagram"></i> Instagram</a><br> - <a href="https://www.linkedin.com" style="color: #000000; text-decoration: none; margin-right: 10px;"><i class="fab fa-linkedin-in"></i> LinkedIn</a> + <div style="display: flex; justify-content: center; align-items: center; gap: 15px;"> + <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> + <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> + <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> + <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> + </div> </div> - + <!-- Newsletter Subscription --> <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> + <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> - + </div> <hr> <!-- Copyright Section --> @@ -354,37 +450,38 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to </footer> -<script> + <script> // Accordion Functionality const accordionHeader = document.querySelector('.accordion__header'); const accordionContent = document.querySelector('.accordion__content'); - accordionHeader.addEventListener('click', function() { - if (accordionContent.style.display === 'block') { - accordionContent.style.display = 'none'; - } else { - accordionContent.style.display = 'block'; - } + accordionHeader.addEventListener('click', function () { + if (accordionContent.style.display === 'block') { + accordionContent.style.display = 'none'; + } else { + accordionContent.style.display = 'block'; + } }); // Form Submission Functionality const form = document.getElementById('subscribeForm'); const thankYouMessage = document.getElementById('thankYouMessage'); - form.addEventListener('submit', function(event) { - event.preventDefault(); // Prevent the default form submission behavior + form.addEventListener('submit', function (event) { + event.preventDefault(); // Prevent the default form submission behavior - // Show the thank you message - thankYouMessage.style.display = 'block'; + // Show the thank you message + thankYouMessage.style.display = 'block'; - // Hide the accordion content after submission - accordionContent.style.display = 'none'; + // Hide the accordion content after submission + accordionContent.style.display = 'none'; - // Clear the input field - document.getElementById('emailInput').value = ''; + // Clear the input field + document.getElementById('emailInput').value = ''; }); -</script> + </script> </body> -</html> + +</html> \ No newline at end of file diff --git a/index.html b/index.html index 65af36ce..2ac1cfa8 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @@ -28,12 +29,14 @@ flex-direction: column; min-height: 100vh; } + nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; } + nav ul li a { display: flex; align-items: center; @@ -51,21 +54,36 @@ nav ul li a:hover { background-color: #f0f0f0; } + nav ul li a:active { background-color: #000; color: white; } + nav ul li a i { margin-right: 8px; } - a.active,a:hover{ - background: #1b9bff ; + + a.active, + a:hover { + background: #1b9bff; transition: .5s; } + + /* Remove hover and active styles for specific links */ + a.no-hover-effect.active, + a.no-hover-effect:hover { + background: inherit; + /* Retains the original background */ + transition: none; + /* No transition effect */ + } + #home-link:active { background-color: black; color: white; } + .content { margin: 20px; padding: 20px; @@ -160,61 +178,104 @@ padding: 15px 0; width: 100%; } - .checkbtn{ + + .checkbtn { font-size: 30px; color: #333; float: right; line-height: 80px; margin-right: 40px; cursor: pointer; - display:none; + display: none; } - #check{ + + #check { display: none; } -@media (max-width:966px){ - label.logo{ - font-size: 30px; - padding-left: 50px; - } -} -@media (max-width:858px){ + /* 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 { + color: blue; + /* Icon color change to blue on hover */ + } + + .fa-x-twitter:hover { + color: black; + /* Icon color change to black on hover */ + } + + .fa-instagram:hover { + color: orangered; + /* Icon color change to orangered on hover */ + } + + .fa-linkedin-in:hover { + color: rgb(16, 13, 195); + /* Icon color change to rgb(16, 13, 195) on hover */ + } + + @media (max-width:966px) { + label.logo { + font-size: 30px; + padding-left: 50px; + } + + } + + @media (max-width:858px) { + + .checkbtn { + display: block; + } + + ul { + position: fixed; + width: 100%; + height: 100vh; + background: #77a1cc; + top: 85px; + left: -200%; + text-align: center; + transition: all .5s; + height: 80px; + } + + nav ul li { + display: block; + } + + nav ul li a { + display: block; + font-size: 10px; + } + + a:hover, + a.active { + background: none; + color: #000000; + } + + #check:checked~ul { + left: 0; + } + } - .checkbtn{ - display: block; - } - ul{ - position: fixed; - width: 100% ; - height: 100vh; - background: #77a1cc; - top: 85px; - left:-200%; - text-align: center; - transition:all .5s ; - height: 80px; - } - nav ul li{ - display: block; - } - nav ul li a { - display: block; - font-size: 10px; - } - a:hover,a.active{ - background: none; - color:#000000 ; - } - #check:checked ~ ul{ - left:0; - } -} @keyframes fadeIn { from { opacity: 0; } + to { opacity: 1; } @@ -224,14 +285,19 @@ @keyframes logoAnimation { 0% { opacity: 0; - transform: translateX(-100px); /* Start from the left */ + transform: translateX(-100px); + /* Start from the left */ } + 50% { - transform: translateX(10px); /* Move slightly to the right */ + transform: translateX(10px); + /* Move slightly to the right */ } + 100% { opacity: 1; - transform: translateX(0); /* End at original position */ + transform: translateX(0); + /* End at original position */ } } @@ -241,10 +307,13 @@ transform: translateY(-100%); opacity: 0; } + 50% { - transform: translateY(10px); /* Slight bounce */ + transform: translateY(10px); + /* Slight bounce */ opacity: 1; } + 100% { transform: translateY(0); } @@ -260,7 +329,8 @@ display: flex; flex-direction: row; align-items: center; - margin-right: 10px; /* Space between the text and the logo image */ + margin-right: 10px; + /* Space between the text and the logo image */ } .letter { @@ -270,88 +340,95 @@ } .red { - color: red; /* Change the color of letters in this class to red */ + color: red; + /* Change the color of letters in this class to red */ } /* faq section styles */ - .faq-section{ + .faq-section { background-color: #e7f3fe; display: flex; flex-direction: column; align-items: center; justify-content: center; - + } - - .faq-h2{ + + .faq-h2 { margin-bottom: 1.5rem; font-size: 2.5rem; font-weight: 600; } - .faqs{ + .faqs { width: 100%; } .faq { - margin-bottom: 15px; - width: 100%; /* Full width by default */ - background-color: #fff; - border: 1px solid #ccc; - border-radius: 10px; - overflow: hidden; - } - - .faq-question { - background-color: #e7ffe7; - color: #333; - padding: 10px; - width: 100%; - text-align: left; - border: none; - outline: none; - cursor: pointer; - font-size: 16px; - font-weight: 600; - - display: flex; - justify-content: space-between; - align-items: center; + margin-bottom: 15px; + width: 100%; + /* Full width by default */ + background-color: #fff; + border: 1px solid #ccc; + border-radius: 10px; + overflow: hidden; + } + + .faq-question { + background-color: #e7ffe7; + color: #333; + padding: 10px; + width: 100%; + text-align: left; + border: none; + outline: none; + cursor: pointer; + font-size: 16px; + font-weight: 600; + + display: flex; + justify-content: space-between; + align-items: center; } .faq-question::after { - content: ''; - display: inline-block; - width: 0; - height: 0; - border-left: 8px solid transparent; - border-right: 8px solid transparent; - border-top: 8px solid #333; /* Downward pointing wide "V" */ - transition: transform 0.3s ease; + content: ''; + display: inline-block; + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #333; + /* Downward pointing wide "V" */ + transition: transform 0.3s ease; - margin-right: 10px; + margin-right: 10px; } .faq.active .faq-question::after { - border-top: none; - border-bottom: 8px solid #333; /* Upward pointing wide "V" */ + border-top: none; + border-bottom: 8px solid #333; + /* Upward pointing wide "V" */ } .faq-answer { - max-height: 0; /* Initially hidden */ - overflow: hidden; /* Hide content when not visible */ - padding: 0 10px; - background-color: #fff; - transition: max-height 0.3s ease; /* Smooth transition */ - border-top: 1px solid #ccc; + max-height: 0; + /* Initially hidden */ + overflow: hidden; + /* Hide content when not visible */ + padding: 0 10px; + background-color: #fff; + transition: max-height 0.3s ease; + /* Smooth transition */ + border-top: 1px solid #ccc; } .faq-answer p { - margin-bottom: 10px; + margin-bottom: 10px; } .faq.active .faq-answer { @@ -537,77 +614,165 @@ <h2>Contact Us</h2> </div> </div> </div> - - <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;"> - - <!-- Quick Links Section --> - <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;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li> - <li><a href="contact.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li> - <li><a href="privacy.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li> - <li><a href="terms.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li> - <li><a href="sitemap.html" style="color: #000000; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li> - </ul> - </div> + <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;"> + + <!-- Quick Links Section --> + <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; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">About Us</a></li> + <li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li> + <li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li> + <li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li> + <li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li> + </ul> + </div> - <!-- Contact Information Section --> - <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> - <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3> - <p style="color: #000000;">123 Emergency Lane, Mumbai, India</p> - <p><a href="mailto:emergency@ambulanceservice.in" style="color: #000000;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">emergency@ambulanceservice.in</a></p> - <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p> - </div> + <!-- Contact Information Section --> + <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> + <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" style="color: #000000; background: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">+91-911-1234567</a></p> + </div> - <!-- Social Media Links --> - <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> - <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3> - <a href="https://www.facebook.com" class="hover-link"><i class="fab fa-facebook-f"></i> Facebook</a><br> - <a href="https://www.twitter.com" class="hover-link"><i class="fab fa-twitter"></i> Twitter</a><br> - <a href="https://www.instagram.com" class="hover-link"><i class="fab fa-instagram"></i> Instagram</a><br> - <a href="https://www.linkedin.com" class="hover-link"><i class="fab fa-linkedin-in"></i> LinkedIn</a> - </div> + <!-- Modified the looks of the social icons --> + <!-- 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;"> + <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> + <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> + <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> + <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> + </div> + </div> + + <!-- Newsletter Subscription --> + <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> + + <style> + .hover-link { + color: #000000; + text-decoration: none; + margin-right: 10px; + background:none; + cursor: pointer; + transition: color 0.3s ease; + } + + .hover-link:hover { + color: blue; + background:none; + } + </style> - <style> - .hover-link { - color: #000000; - text-decoration: none; - margin-right: 10px; - cursor: pointer; - transition: color 0.3s ease; - } - - .hover-link:hover { - color: blue; - } - </style> - - <!-- Newsletter Subscription --> - <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 id="subscribeForm"> - <input id="emailInput" 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> - <p id="thankYouMessage" style="display:none; color: green;">Thank you for subscribing!</p> </div> + </div> - </div> + <hr> + <!-- Copyright Section --> + <div style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;"> + <strong><p>© 2024 AmbuFlow. All rights reserved.</p></strong> + + <!-- Back to Top Button --> + <button id="backToTopBtn" style=" + background-color: #e81a1a; + color: white; + border: none; + border-radius: 5px; + padding: 10px 15px; + font-size: 16px; + cursor: pointer; + ">↑</button> + </div> + </footer> + + <script> + // Back to Top Button functionality + document.addEventListener('DOMContentLoaded', function() { + var backToTopBtn = document.getElementById("backToTopBtn"); + + backToTopBtn.addEventListener('click', function() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); + }); + </script> + <script> + function changeContent(page) { + var links = document.querySelectorAll(".menu ul li a"); + links.forEach((link) => link.classList.remove("active")); + document.getElementById(page + "-link").classList.add("active"); + } - <hr> + window.onload = function () { + document.getElementById("home-link").classList.add("active"); - <!-- Copyright Section --> - <div style="background-color: #C4D7FF; color: #000000; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px;"> - <strong><p>© 2024 AmbuFlow. All rights reserved.</p></strong> - - <!-- Back to Top Button --> - <button id="backToTopBtn" style="background-color: #e81a1a; color: white; border: none; border-radius: 5px; padding: 10px 15px; font-size: 16px; cursor: pointer;">↑</button> - </div> -</footer> + // Add delay to each letter drop + const letters = document.querySelectorAll('.letter'); + letters.forEach((letter, index) => { + letter.style.animationDelay = `${index * 0.1}s`; + }); + }; + + const thankYouMessage = document.getElementById("thankYouMessage"); + const form = document.getElementById("subscribeForm"); + + form.addEventListener("submit", function (event) { + event.preventDefault(); // Prevent form from refreshing the page + + // Show Thank You Message after subscribing + thankYouMessage.style.display = 'block'; + + // Optionally clear the input field after subscribing + document.getElementById("emailInput").value = ''; + }); + + </script> + <script> + document.addEventListener('DOMContentLoaded', function () { + const faqButtons = document.querySelectorAll('.faq-question'); + + + <!-- Copyright Section --> + <div style=" + text-align: center; + margin-top: 20px; + border-top: 1px solid white; + padding-top: 10px; + "> + <p>© 2024 Ambulance Monitoring System. All rights reserved.</p> + </div> + </footer> + + + <!-- Back to Top Button --> + <button id="back-to-top"> + <i class="fas fa-chevron-up" style="font-size: 30px;"></i> + </button> + + <script src="script.js"></script> + + + </script> <script> // Back to Top Button functionality diff --git a/team.html b/team.html index d01d924b..0edcb1f3 100644 --- a/team.html +++ b/team.html @@ -1,12 +1,14 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Team</title> <link rel="stylesheet" href="src/css/index.css"> <link rel="shortcut icon" href="ambulance.png" type="image/x-icon"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> <!--Updated to latest version--> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> + <!--Updated to latest version--> <style> body { font-family: Arial, sans-serif; @@ -24,7 +26,7 @@ color: black; text-decoration: none; } - + .menu ul li a.active { color: white; background-color: #000; @@ -115,87 +117,134 @@ width: 100%; } + /* 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 { + color: blue; + /* Icon color change to blue on hover */ + } + + a .social-icon .twitter:hover{ + color: white; + } + .fa-x-twitter:hover { + color: black; + /* Icon color change to black on hover */ + } + + .fa-instagram:hover { + color: orangered; + /* Icon color change to orangered on hover */ + } + + .fa-linkedin-in:hover { + color: rgb(16, 13, 195); + /* Icon color change to rgb(16, 13, 195) on hover */ + } + @keyframes fadeIn { from { opacity: 0; } + to { opacity: 1; } } + /* Logo Animation */ @keyframes logoAnimation { 0% { - opacity: 0; - transform: translateX(-100px); /* Start from the left */ + opacity: 0; + transform: translateX(-100px); + /* Start from the left */ } + 50% { - transform: translateX(10px); /* Move slightly to the right */ + transform: translateX(10px); + /* Move slightly to the right */ } + 100% { - opacity: 1; - transform: translateX(0); /* End at original position */ + opacity: 1; + transform: translateX(0); + /* End at original position */ } } - + /* Letter Drop Animation */ @keyframes letterDrop { 0% { - transform: translateY(-100%); - opacity: 0; + transform: translateY(-100%); + opacity: 0; } + 50% { - transform: translateY(10px); /* Slight bounce */ - opacity: 1; + transform: translateY(10px); + /* Slight bounce */ + opacity: 1; } + 100% { - transform: translateY(0); + transform: translateY(0); } } - + .logo { display: flex; align-items: center; animation: logoAnimation 1s ease forwards; } - + .brand-name { display: flex; flex-direction: row; align-items: center; - margin-right: 10px; /* Space between the text and the logo image */ + margin-right: 10px; + /* Space between the text and the logo image */ } - + .letter { display: inline-block; font-size: 2rem; animation: letterDrop 0.5s ease forwards; animation-delay: calc(var(--letter-index) * 0.1s); } - + .red { - color: red; + color: red; } </style> </head> + <body> -<header> - <div class="container"> - - <div class="logo"> - <div class="brand-name"> - <span class="letter red" style="--letter-index: 1;">A</span> - <span class="letter red" style="--letter-index: 2;">m</span> - <span class="letter red" style="--letter-index: 3;">b</span> - <span class="letter red" style="--letter-index: 4;">u</span> - <span class="letter" style="--letter-index: 5;">F</span> - <span class="letter" style="--letter-index: 6;">l</span> - <span class="letter" style="--letter-index: 7;">o</span> - <span class="letter" style="--letter-index: 8;">w</span> + <header> + <div class="container"> + + <div class="logo"> + <div class="brand-name"> + <span class="letter red" style="--letter-index: 1;">A</span> + <span class="letter red" style="--letter-index: 2;">m</span> + <span class="letter red" style="--letter-index: 3;">b</span> + <span class="letter red" style="--letter-index: 4;">u</span> + <span class="letter" style="--letter-index: 5;">F</span> + <span class="letter" style="--letter-index: 6;">l</span> + <span class="letter" style="--letter-index: 7;">o</span> + <span class="letter" style="--letter-index: 8;">w</span> + </div> + <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" + style="width: 50px; height: auto" /> </div> - <img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" /> - </div> <nav class="menu"> <ul> @@ -282,14 +331,21 @@ <h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3> <p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" class="footer-link">+91-911-1234567</a></p> </div> - <!-- Social Media Links --> - <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> - <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3> - <a href="https://www.facebook.com" class="hover-link"><i class="fab fa-facebook-f"></i> Facebook</a><br> - <a href="https://www.twitter.com" class="hover-link"><i class="fa-brands fa-x-twitter"></i> Twitter</a><br> - <a href="https://www.instagram.com" class="hover-link"><i class="fab fa-instagram"></i> Instagram</a><br> - <a href="https://www.linkedin.com" class="hover-link"><i class="fab fa-linkedin-in"></i> LinkedIn</a> - </div> + <!-- Modified the looks of the social icons --> + <!-- 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;"> + <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> + <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> + <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> + <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> + </div> + </div> <!-- Newsletter Subscription --> <div style="flex: 1; min-width: 200px; margin-bottom: 20px;"> @@ -351,4 +407,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to </script> </body> -</html> + +</html> \ No newline at end of file