Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

Hi all,

I am stuck on step 30 of “Design a Business Card”, where I should have “a phone number as text”. I have already checked the forum and other online sources. No matter if I add an href or not, if I wrap it in a p element or not, I always get the same result or even worse. With this code, every step is fine but step no. 30. Does anyone see what I do not see?

Thank you

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">
        <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" class="profile-image" alt="Profile Image">
        <p class="full-name">John Doe</p>
        <p class="designation">The Best of all</p>
        <p class="company">John Doe Inc.</p>
        <hr>
        <p>
        <a href="mailto:me@fakemail.com">me@fakemail.com</a>
        </p>
        <p>
        <a href="tel:0123-4567-890">0123-4567-890</a>
        </p>
        <a href="https://portfolio.com" taget="_blank">Portfolio</a>
        <hr>
    <div class="social-media">
        <h2>Connect with me</h2>
        <a href="https://x.com">Twitter</a>
        <a href="https://facebook.com">LinkedIn</a>
        <a href="https:/github.com">GitHub</a>
    </div>
    </div>
</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 {
  background-color: grey;
  width: 300px;
  padding: 20px 20px 20px 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  text-align: center;
}
.profile-image {
  max-width: 100%;
}
.social-media {
  background-color: grey;
  width: 300px;
  padding: 20px 20px 20px 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  text-align: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Safari/605.1.15

Challenge Information:

Design a Business Card - Design a Business Card

2

that doesn’t look like the text for the 30th test, are you sure on what you are reading?

now that you have reread the test, it is asking for an a element with that text, whcih you did, but as there are other a elements descendant of .business-card that were not requested, the tests are not seeing it, you will need to remove the other a elements

3

@ILM Yes, I’m sorry it is indeed step 30 but the task is " 30. After the phone number p element, there should be an a element with the text Portfolio". I have closed the div element of .business-card, so no unrequested elements are descendants of it. This doesn’t fix it and adds an additional error on step 33. " Failed:33. After the second hr element, there should be a div element with a class attribute with a value of social-media." Maybe I just got your answer wrong?

Bildschirmfoto 2025-04-22 um 23.03.14
Bildschirmfoto 2025-04-22 um 23.03.141920×1216 213 KB

4

do you need an explanation in Italian?

the issue was not the closing tag of the div element, the issue is that there are multiple .business-card a elements, most of them were not part of the requirements, so the tests can’t find the one that is part of the requirements

now that you have closed the .business-card element too early, you are also failing 33

5

Hi @ILM, I had to check another couple of times but then I got your hint. I had to remove the an elements for email and phone number, as they were not required. Now all tests were successful. Thank you!

6

we are working on allowing those, in future your solution will pass, the tests did not account for adding those two a elements