Mybabe

Valentine’s Day Interactive Website (CodeKage)

Thank you to @mewtru for the video idea!

This code was completely created from scratch! utilising Tailwind CSS!

Make this Valentine’s Day unforgettable with a charming and interactive web experience. This website allows you to ask the big question, “Will you be my Valentine?” in a unique and playful manner. With cute GIFs that change with responses and dynamic “Yes” and “No” buttons, it’s designed to bring a smile and possibly a “Yes!” to someone special.

Features

• Interactive Buttons: Engage with “Yes” and “No” buttons that dynamically respond to user input.
• Cute GIFs: Enjoy a selection of heartwarming GIFs that change based on the user’s interaction.
• Tailwind CSS: Stylish design and responsive layout powered by Tailwind CSS for a modern and mobile-friendly interface.
• JavaScript Magic: Experience the joy of interaction with JavaScript that brings the website to life.

How It Works

• The user is greeted with a cute GIF and the question “Will you be my Valentine?”.
• Responding “No” changes the GIF and modifies the size and text of the buttons, adding a playful element to convince the user to reconsider.
• A “Yes” click celebrates the moment with a special GIF and triggers a confetti animation, hiding the response buttons.

Setup

1. Clone the repository:

   git clone https://github.com/CodeKageHQ/Ask-out-your-Valentine
   

2. Open index.html in your browser to view the website.

No additional setup is required, as Tailwind CSS is included via CDN and JavaScript is embedded within the HTML.

Technologies Used

• HTML5
• Tailwind CSS
• JavaScript
• canvas-confetti for the confetti effect

Contributions

Feel the love? Contributions are welcome! Whether it’s a new GIF suggestion, design improvements, or code optimisation, feel free to fork the repository and submit a pull request.

License

This project is open source and available under MIT License.

Happy Valentine’s Day! Let’s spread the love ❤️.

This site is open source. Improve this page.