Giter VIP home page Giter VIP logo

codekagehq / ask-out-your-valentine Goto Github PK

View Code? Open in Web Editor NEW
10.0 1.0 25.0 2.74 MB

A playful and interactive web experience for asking someone to be your Valentine, featuring charming GIFs and dynamic responses to 'Yes' and 'No' answers. Built with HTML, Tailwind CSS, and a sprinkle of JavaScript for interactivity.

Home Page: https://codekagehq.github.io/Ask-out-your-Valentine/

License: MIT License

HTML 100.00%
canvas-confetti css3 html5 interactive-web javascript love romantic tailwindcss valentines-day web-animation

ask-out-your-valentine's Introduction

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

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 ❤️.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.