Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

I’ve completed all steps of the Design a Business Card project, but step 30 (After the phone number p element, there should be an a element with the text Portfolio) will not verify. Please help! I have no idea what I’m doing wrong.
I’ve tried refreshing the page with ctrl+F5 and I also switched from Microsoft Edge to Google Chrome as I saw that another user had this same problem, and that was the fix for his, but it didn’t work for me. I’m wondering if there is something wrong with my code that I’m not seeing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Business Card</title>
    <link rel="stylesheet" href="styles.css"/>
</head>

<body>
        <div class="business-card">
        <main>
        <img class="profile-image" src="https://i.etsystatic.com/17627860/r/il/08ffc4/2120014112/il_570xN.2120014112_hj88.jpg" alt="bigfoot doing a rock 'n' roll sign"/>
        <p class="full-name">Shannon Gallu</p>
        <p class="designation">Coder In Training</p>
        <p class="company">Tiggy With the WooWoos</p>
        <hr>
        </hr>
        <p>Email: shannongallu147@gmail.com</p>
        <p>Phone: (208)617-0146</p>
        <a href="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg">Portfolio</a>
        <hr>
        </hr>
        <div class="social-media"/>
</body>

</html>

/* file: styles.css */
body {
  background-color: rosybrown;
  font-family: Arial, sans-serif;
}
p {
  margin-top: 5px;
  margin-bottom: 5px;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.business-card {
  width: 300px;
  background-color: white;
  padding: 20px;
  margin-top: 100px;
  text-align: center;
  font-size: 16px;
  margin-right: auto;
  margin-left: auto;
}
.profile-image {
  max-width: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Challenge Information:

Design a Business Card - Design a Business Card

2

Hi,
Your .business-card div and main elements are missing their closing tags.
Also, the hr element doesn’t need a closing tag.
Make sure your .business-card div is inside the main element.
Good luck!

3

the test expects the a element to be direct child of .business-card

4

For some reason, all of my a elements after the second hr were deleted as well. I’ll work on it with your tips and come back. Thank you!

5

I added closing tags, got rid of the hr closing tag, moved my main up, and made the a element a direct child. It worked. Thank you!

1 Like
6

Why is this needed? or is it something that’s just like that and is unavoidable?

7

it’s how the tests are written, it could be possible that the tests could be changed to allow for more solutions, but for that an issue needs to be created on github