search

iamrahulmahato / master-web-development

Learn to code by building projects.
https://masterwebdevelopment.netlify.app/
MIT License
167 stars 440 forks source link

Enhancing the Quiz page !! #2284

Closed SrijaVuppala295 closed 2 weeks ago

SrijaVuppala295 commented 2 weeks ago

Web Development Challenges Page Enhancement

Closes : #2136

Description:

The page was enhanced with improved styling, interactivity, and responsiveness. Key changes include dynamic animations, hover effects on cards and buttons, and a more engaging layout for quiz challenges.

Changes Made:

  1. Styling Improvements:

    • Updated background color to vibrant red (#db1939).
    • Added text-stroke and sliding animation to the title.
    • Darker background for .container and better spacing.

  2. Quiz Card Design:

    • Added hover effects and shadow for quiz cards.
    • Images now fill the card width with object-fit: cover.
    • Titles have borders and inner shadows for emphasis.

  3. Button Enhancements:

    • Buttons now have hover effects (background-color change, translateY).
    • Consistent modern design with rounded corners and padding.

  4. Responsiveness:

    • Used flexbox for responsive layout in .quiz-container.
    • Cards now wrap correctly on smaller screens.

  5. JavaScript:

    • Redirect buttons to appropriate quiz pages.
    • Alert for unimplemented quizzes (e.g., JavaScript challenges).

  6. Animations:

    • Title text uses a sliding animation (@keyframes).
    • Cards and buttons have hover animations for better interactivity.

Result:

The page now offers a more dynamic, visually appealing, and user-friendly experience, with smooth animations, responsive layout, and improved interactions.

BEFORE:

image

AFTER:

image

image

github-actions[bot] commented 2 weeks ago

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

netlify[bot] commented 2 weeks ago

Deploy Preview for masterwebdevelopment ready!

Name Link
Latest commit 995f0211ff41dc4efd6875fca23e9cc75e7f2b44
Latest deploy log https://app.netlify.com/sites/masterwebdevelopment/deploys/672e1522802e0d000831249b
Deploy Preview https://deploy-preview-2284--masterwebdevelopment.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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