fork-commit-merge / fork-commit-merge

Fork, Commit, Merge. A project designed to help you familiarize yourself with the open source contribution workflow on GitHub!

Home Page:https://forkcommitmerge.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fork, Commit, Merge - Medium Issue 1 (CSS)

nikohoffren opened this issue · comments

Fork, Commit, Merge - Medium Issue 1 (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/card 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!