The Amazing Spider-Guy Invite Card

This repository contains the source code for a downloadable invite card for theamazingspiderguy.com. The invite card is designed to be customizable and user-friendly, providing an easy way to create personalized invites.

Features

• Customizable Background Image: Choose your own background to personalize the invite.
• Dynamic Text Update: Automatically update the input fields as they are being filled in.
• Text Positioning: Center the birthday kid's name over the background image.
• Responsive Design: Scale the image to fit on one side of the page, leaving space for input fields.
• CSS Styling: Enhanced styles for a polished look (Work in Progress).
• Image Preview: Enlarge the image preview to full screen (Work in Progress).
• Contact Information Textbox: Add a separate selection for the contact information textbox (Work in Progress).

Installation

1. Clone the repository:

   git clone https://github.com/JacobMckenna/theamazingspiderguy.invitecard.com.git

2. Open index.html in your browser to view and interact with the invite card.

Usage

• Customize the background image and text by editing the respective fields.
• See the image preview on the right to view your changes in real time.
• Once satisfied, download the invite card for printing or sharing.

Future Additions

• Additional customization options.
• Improved CSS styling.
• Enhanced responsiveness for various devices.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Resources

• Markdown Features - Overview of markdown capabilities, including syntax, embedding, and custom components.
• Javascript Info - In-depth JavaScript tutorials and references for all levels.
• HTML Canvas Download - Guide on saving HTML Canvas content as an image.
• w3schools CSS - A comprehensive resource for learning and referencing CSS properties and techniques.
• Learn Flexbox CSS in 8 minutes - A quick video tutorial on mastering Flexbox layout techniques.

Upcoming Additions

• [] automatic 's appened to the name
  • [] account for case where name field is empty
• [] add a background with all 3 characters
• [] only images from amazingspiderguy
• [] change enter name to enter 'birthday persons name'
• [] change enter contact to enter 'your contact information'
• [] select background as visible instead of as list
• [] include check in time and end time for date
• [] instead of download, open pdf in a new tab as a pdf