diff --git a/Contactus.html b/Contactus.html index 87cc55c..6496b2f 100644 --- a/Contactus.html +++ b/Contactus.html @@ -1,321 +1,414 @@ - - - + + + Contact Us - - - + + + + - - + .chatbot-container { + position: fixed; + transition: right 0.3s ease; + bottom: 20px; + right: 7rem; + z-index: 1000; + } -
-
+ .chatbot-button { + background-color: #007bff; + border: none; + border-radius: 50%; + padding: 10px; + /* Smaller padding */ + cursor: pointer; + position: relative; + width: 50px; + /* Adjusted size */ + height: 50px; + /* Adjusted size */ + right: -60px; + } + + .chatbot-button img { + width: 30px; + /* Adjusted image size */ + height: 30px; + /* Adjusted image size */ + } + + .tooltip-text { + display: none; + /* Hide by default */ + position: absolute; + bottom: 100%; + /* Position above the button */ + right: 50%; + transform: translateX(50%); + background-color: #333; + /* Background color for tooltip */ + color: #fff; + /* Tooltip text color */ + padding: 5px; + border-radius: 5px; + white-space: nowrap; + /* Prevent text from wrapping */ + } + + .chatbot-button:hover .tooltip-text { + display: block; + /* Show on hover */ + } + + /* Navbar Styles */ + .menu { + display: flex; + justify-content: center; + margin: 20px 0; + } + + .nav-links { + list-style: none; + display: flex; + padding: 10px; + background-color: #f0f0f0; /* Light background color */ + border-radius: 25px; /* Rounded corners */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */ + } + + .nav-links li { + margin: 0 15px; /* Space between links */ + } + + .nav-links a { + text-decoration: none; + color: #333; /* Dark text color */ + font-weight: 500; /* Medium font weight */ + transition: color 0.3s; /* Smooth color transition */ + } + + .nav-links a:hover { + color: #007bff; /* Change color on hover */ + } + + + +
+
- - Get started + + Get started
-
-
+
+
-
-

Contact Us

-
+
+

Contact Us

+
- - - - - + + + + +
-
+
-
+

Our Location

123 Emergency Lane, Mumbai, India

-

Email: emergency@ambulanceservice.in

-

Phone: +91-911-1234567

-
-
- -
+

+ © 2024 Nursing Tomorrow's Smile. All rights reserved. +

+ - + +
+ +
+ + diff --git a/contact.html b/contact.html index 3bb12f6..f0fcaed 100644 --- a/contact.html +++ b/contact.html @@ -103,38 +103,59 @@ transition: transform 0.3s ease; /* Smooth transition effect */ } - + .social-icon:hover { - transform: scale(1.3); - /* Scale the element to 1.3 times its size */ + animation-name: spin; /*animation added*/ + animation-duration: 2500ms; + animation-iteration-count: infinite; + animation-timing-function: linear; } + /*key framed added*/ + @keyframes spin { + from { + transform: rotate(0deg) scale(1.3); + } + to { + transform: rotate(360deg) scale(1.3); + } +} + + .fa-facebook:hover { - color: blue; + color: #316ff6; + border: 4px solid #316ff6; + border-radius: 50%; + padding: 5px; /* Icon color change to blue on hover */ } .fa-x-twitter:hover { - color: black; + color: #1da1f2; + border: 4px solid #1da1f2; + border-radius: 50%; + padding: 5px; /* Icon color change to black on hover */ } .fa-instagram:hover { - color: orangered; + color: #e1306c; + border: 4px solid #e1306c; + border-radius: 50%; + padding: 5px; /* Icon color change to orangered on hover */ } .fa-linkedin-in:hover { - color: rgb(16, 13, 195); + color: #0072b1; + border: 4px solid #0072b1; + padding: 5px; + border-radius: 50%; /* Icon color change to rgb(16, 13, 195) on hover */ } - #twitter:hover { - color: #1da1f2; - transform: scale(1.5); - } - #instagram:hover { + /* #instagram:hover { background: linear-gradient(45deg, #FF0080, #FF8C00, #FFD700); color: transparent; background-clip: text; @@ -145,7 +166,7 @@ #linkedin:hover { color: #0077B5; transform: scale(1.5); - } + } */ ul li a:hover{ color: blue !important;