A two-page web application featuring a dynamic video background, an image upload and preview functionality, and a user review form. The uploaded image is persisted and displayed on the review page.
- Video Background: A seamless video loop enhances the landing page aesthetic.
- Circular Image Preview: Uploaded images are displayed in a stylish circular frame.
- Glow Animation: The image preview features a subtle glow effect on upload for a dynamic user experience.
- Navigation: A button to proceed to the review form (
second.html), carrying the uploaded image data.
- Persisted Image: The image uploaded on the first page is retrieved via
sessionStorageand displayed. - Review Form: A form to collect user data: Name, Mobile Number, Review, and Rating (likely using stars).
- Responsive Design: The layout is optimized using CSS media queries to ensure proper display across various screen sizes.
- Console Logging: Submitting the form logs the collected user data to the browser's console (for development/testing).
- HTML5: Structure and content.
- CSS3: Styling, animations, and responsive layout.
- JavaScript (ES6): Handling image file upload,
sessionStoragefor data persistence, and form submission logic.
Follow these steps to get a local copy up and running.
You need a modern web browser to run this application (e.g., Chrome, Firefox, Edge). No server-side setup is required.
-
Clone the repository:
git clone [YOUR_REPO_URL] cd [your-repo-name] -
Open the files:
- To start the application, simply open the
index.htmlfile in your web browser.
# Example: Open in a browser (command may vary by OS) open index.html - To start the application, simply open the