imhardikdesai / Quiz-App

This quiz web app is built using React JS. It can allow the user to select the criteria for their quiz from a list of options. The user can then proceed to answer the questions in the quiz and their performance will be tracked and shown in the scoreboard
https://ask-quiz.netlify.app/
16 stars 13 forks source link

Update App.css #12

Open rishi457 opened 9 months ago

rishi457 commented 9 months ago

Background Color: The background-color property has been set to #212832, which creates a visually appealing dark background for the entire page. This color choice provides a modern and stylish look.

Text Color: The color property has been set to white, ensuring that text content within the .App container is displayed in a contrasting white color. This improves readability against the dark background.

Padding: Padding of 20px has been added to the .App container. This padding creates space between the content and the container's edges, enhancing the overall layout and making the content more visually appealing.

Border Radius: The border-radius property has been set to 10px, resulting in rounded corners for the container. This subtle design element adds a touch of sophistication to the layout.

Box Shadow: A box shadow with the properties 0 0 10px rgba(0, 0, 0, 0.2) has been applied to create a gentle elevation effect around the .App container. This shadow adds depth and a sense of separation from the background.

Alignment: Flexbox properties have been used to center the .App container both horizontally and vertically within the viewport. This ensures that the content is neatly positioned at the center of the page, regardless of screen size.

Minimum Height: To prevent content from getting cut off on smaller screens, a min-height of 100vh has been set for the .App container. This guarantees that the container occupies at least the full height of the viewport, making all content accessible.

netlify[bot] commented 9 months ago

Deploy Preview for ask-quiz ready!

Name Link
Latest commit 9d4212a0344083b9a934f43d4d39698b04d6277d
Latest deploy log https://app.netlify.com/sites/ask-quiz/deploys/6525a2a4ea949a0007882f2b
Deploy Preview https://deploy-preview-12--ask-quiz.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.

rishi457 commented 9 months ago

what are the header rules?