Created Smooth Transition Hover Effects in Book a Cab/Auto Section #913
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our contributing.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
✅ Deploy Preview for buddytrail ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@ShaikHafiza |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#850 Issue is fixed.
Description :
The changes I made involve enhancing the visual experience for a form with hover effects on both the form and the input fields. Here’s a detailed breakdown of the updates:
.review-form:hover Styling:
Transition on Hover: I added transition: background-color 0.3s ease, transform 0.3s ease;, which smoothly changes the background color and transform properties over 0.3 seconds. This provides a nice visual feedback when the form is hovered over.
Box Shadow: The box shadow I applied (box-shadow: 0 4px 8px 0 rgba(13, 71, 216, 0.2), 0 6px 20px 0 rgba(14, 14, 219, 0.19);) gives the form a subtle elevation effect. It creates a feeling of depth with two layers of shadow, one closer and one further, in shades of blue.
Input Fields (#name, #destination, #rating, #review, #complaint):
Initial Border: The input fields are given a base border style with border: 2px solid rgb(187, 124, 202);. This sets a solid purple border around the fields, making them stand out on the form.
Hover Border Effect: When hovered, the border color changes to a slightly darker purple (border: 2px solid rgb(180, 104, 175);). This adds an interactive visual for the user when they focus on or hover over the input fields, making the form more dynamic and engaging.
Here is the Video which shows you the change clearly.
Uploading Untitled video - Made with Clipchamp (5).mp4…
Please review this and merge it.
Thankyou..