Prev Next

06h padding: mini-project-id-card

Mini-Project: Fix the school ID card using padding.

1. Use your browser's Inspect tool to fix the card and button padding until it looks neat.
2. Once the card looks good, create a new folder called school_id in your public folder.
3. Inside that folder, create a file called index.html.
4. Build your own version of the school ID card in VS Code.
5. Use padding to space the card, text, badge, and button just like you fixed it in the browser.
6. Open your index.html in the browser and check that it looks neat and complete.

.card {
  padding: 0px;
  background: white;
  border: 2px solid black;
  border-radius: 12px;
}

.card h2 {
  padding: 0px;
}

.card p {
  padding: 0px;
}

.badge {
  padding: 0px;
}
STUDENT ID

Mirera Primary

Name: Aniso Kilas

Grade: 6

Admission No: 218603