apu52 / Travel_Website

πŸš€ Welcome🌈 , This repo is officially accepted for IEEE-IGDTUW Open Source Week 2024🌟This repo contains my project on Travel Website ✈️ using HTML,CSS . It contains the landing page of a travel tour company website. If you have any front end project on this or you can add new features in the project or in this repos.
https://apu52.github.io/Travel_Website/
MIT License
302 stars 591 forks source link

Added uniform hover effect in topdeals.html #1616

Closed shivam8112005 closed 2 weeks ago

shivam8112005 commented 2 weeks ago

Title and Issue number

Title: Consistent New Hover Effect on "Book Now" Buttons

Issue No. : Fixes #1611

Code Stack : html, css

Close #1611

Description

The "Book Now" button has a smooth 3D flip hover effect:

Initial State: The button is styled with a bold red background (#ff5a5f) and white text, with padding and rounded corners. Hover Effect: On hover, a secondary color layer (#ff787d or #ffa3a6) flips up from below, replacing the original text with a new label. Smooth Transition: The flip effect is achieved with a rotation animation, giving a dynamic yet subtle 3D appearance that draws attention without being distracting.

Video/Screenshots (mandatory)

https://github.com/user-attachments/assets/dadc9922-f1fb-4fcb-b5ab-4f3e47cd95af

Type of PR

Checklist:

Additional context:

Are you contributing under any Open-source programme?

github-actions[bot] commented 2 weeks ago

Thank you for submitting your pull request! πŸ™Œ We'll review it as soon as possible. In the meantime, If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

netlify[bot] commented 2 weeks ago

Deploy Preview for taupe-cendol-f7e2bb ready!

Name Link
Latest commit cc6dc4102fb9520aa71c1aaba437533be1756d73
Latest deploy log https://app.netlify.com/sites/taupe-cendol-f7e2bb/deploys/67275a31a683650008ce6224
Deploy Preview https://deploy-preview-1616--taupe-cendol-f7e2bb.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

shivam8112005 commented 2 weeks ago

@apu52 can you please review this?