From a74146d5e6a0f9c239a7daada873e4b16730bb1f Mon Sep 17 00:00:00 2001 From: Shariq Date: Wed, 16 Oct 2024 00:55:27 +0530 Subject: [PATCH 01/29] Newsletter Validation Addition, Taost Addition, SignIn and SignUp Toast Addition --- index.html | 62 +++++++++++++++++++++++++++++++++++++++++++++++------- up.html | 42 +++++++++++++++++++++++++++++++++++- 2 files changed, 95 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 77306126..4127ec71 100644 --- a/index.html +++ b/index.html @@ -637,12 +637,11 @@ -
+ +
+ + + Get started + + + + +
+
+ + + + +
+ +

AmbuFlow Feedback

+ +
+ +

Feedback

+ + + +
+
+
+ + + + + +
+

Contact Info

+

123 Emergency Lane, Mumbai, India

+ emergency@ambulanceservice.in

+

Phone: +91-911-1234567 +

+
+ + + +
+

Follow Us

+
+ + + + +

Your Comments:

@@ -349,6 +552,37 @@

Your Comments:

+ + + + + + + + + + + + + +

@@ -431,5 +465,4 @@

Subscribe to - \ No newline at end of file diff --git a/features.html b/features.html index 249b0b14..1bb9ec84 100644 --- a/features.html +++ b/features.html @@ -38,6 +38,108 @@ } + /* dark mode hove effect on logo */ + body.dark-mode #logo img:hover { + filter: brightness(0) invert(1); + /* Change black logo to white */ + filter: brightness(0.8); + /* Change the brightness to light grey on hover */ + } + + .navbar.dark-mode .logo-img { + filter: brightness(0) invert(1); + /* Change logo color in dark mode */ + } + + .menu ul { + list-style-type: none; + padding: 0; + display: flex; + } + + + .menu a { + color: black; + /* Light mode link color */ + border: 2px solid black; + border-radius:7px; + padding: 3px 7px; + text-decoration: none; + transition: all 0.3s; + } + + .menu ul li a:hover { + background-color: rgb(255, 255, 255); + /* Blue background on hover */ + color: white; + /* White text on hover */ + } + a:hover { + color: blue !important; + } + + .dark-mode .menu a { + color: white; + /* Dark mode link color */ + border: 1px solid lightgrey; + /* Light grey border in dark mode */ + } + + .dark-mode { + background-color: rgba(50, 50, 50, 0.95); + /* Slightly gray background with high opacity */ + } + + .dark-mode .menu a:hover { + background-color: white; + /* White background on hover in dark mode */ + color: black; + /* Black text on hover in dark mode */ + } + + .light-dark-btn { + + background-color: transparent; + border: 1px solid black; + /* Black border */ + cursor: pointer; + color: black; + /* Default button color */ + width: 50px; + } + + .light-dark-btn { + background-color: transparent; + border: 1px solid black; + cursor: pointer; + color: black; + border-radius: 50px; + } + + .light-dark-btn:hover { + color: blue; + /* Change color on hover */ + } + + .dark-mode .light-dark-btn { + color: white; + /* Button color in dark mode */ + border: 1px solid lightgrey; + /* Light grey border */ + } + + .dark-mode .light-dark-btn:hover { + background-color: white; + /* Background on hover in dark mode */ + color: black; + /* Text color on hover in dark mode */ + } + + .buttons { + display: flex; + align-items: center; + } + /* end */ /* adding dark mode for contact info */ @@ -58,6 +160,71 @@ } /* end */ + + + + .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; + animation-delay: calc(var(--letter-index)* 0.1s); + + } + + .letter { + display: inline-block; + font-size: 2rem; + } + + .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: 7px; + } + + .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: blue; + color: white; + } + + .menu ul li a.active { + color: white; + background-color: #000; + } + + + .content { margin: 20px; padding: 20px; @@ -219,6 +386,52 @@ +