Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fork, Commit, Merge - Medium Issue (CSS) #355

Closed
nikohoffren opened this issue Aug 29, 2023 · 0 comments
Closed

Fork, Commit, Merge - Medium Issue (CSS) #355

nikohoffren opened this issue Aug 29, 2023 · 0 comments

Comments

@nikohoffren
Copy link
Member

Fork, Commit, Merge - Medium Issue (CSS)

Design a Simple Card Using CSS

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

Navigate to the tasks/css/medium directory from the root of the project.

In this directory, there are two files: index.html and styles.css. The index.html file contains a div with the class card. Your task is to implement this class in the styles.css file to style the div as a card.

Here are the specifications for the card:

  • Width and height: The card should have a width of 300px and a height of 400px.
  • Background color: The card's background color should be #f8f9fa.
  • Border: The card should have a 1px solid border with the color #dee2e6.
  • Border Radius: The card should have a border radius of 5px.
  • Shadow: The card should have a box shadow of 0px 2px 5px rgba(0,0,0,0.15).
  • Padding: The card should have a padding of 20px.

So, open the styles.css file to start implementing the design!

Note: You are only required to modify the styles.css file.

If you are using VS Code and have for example Live Server extension, you can simply open index.html with the server and check how the card looks. After the card is done, you are ready to make a pull request!
If you do not have Live Server extension, you'll find information about installing and how to use it here.


Check out README.md for more instructions and how to make a pull request.

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant