Change in Pack.html

[Aditya620321]

Title and Issue number

Title : fix: resolve input overflow issue and improve form styling

Issue No. : 1447

Code Stack : CSS

Close #1447

Description

I addressed a layout issue where the line for the 'Duration' field was extending beyond its container, fixing it to ensure the input field now fits perfectly within the div. Additionally, the page design was not very visually appealing, so I improved its overall attractiveness by enhancing the CSS with hover effects, smooth transitions, and better styling to provide a more modern and engaging user experience.

Video/Screenshots (mandatory)

Type of PR

• [X] Bug fix
• [X] Feature enhancement
• [X] Documentation update
• [X] Other (specify): fix: resolve input overflow and improve form styling

Checklist:

• [X] I have performed a self-review of my code.
• [X] I have commented my code, particularly in hard-to-understand areas.
• [X] I have tested the changes thoroughly before submitting this pull request.
• [X] I have provided relevant issue numbers, screenshots, and videos after making the changes.
• [X] I have gone through the contributing.md file before contributing

Additional context:

Are you contributing under any Open-source programme?

• [X] I am contributing under GSSOC'24
• [ ] I am contributing under VSOC'24

[netlify[bot]]

✅ Deploy Preview for taupe-cendol-f7e2bb ready!

Name	Link
🔨 Latest commit	4453c026aa86e401ae9b8a37cf4b2d0bbba3588d
🔍 Latest deploy log	https://app.netlify.com/sites/taupe-cendol-f7e2bb/deploys/6702fc77bc130d0008751d06
😎 Deploy Preview	https://deploy-preview-1449--taupe-cendol-f7e2bb.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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