Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

Design a Business Card - Step 29

  1. After the phone number p element, there should be an a element with the text Portfolio

I’ve changing things repeatedly, but nothing is working. I tried researching as well, but to no avail. Maybe there’s an issue that I can’t see after looking at this project for a little while. Please help me.

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" alt="round rainbow sprinkles" class="profile-image" height="200" width="200">

    <div class="main">
        <p class="full-name">Jack Sparrow</p>
        <p class="designation">Software Developer</p>
        <p class="company">@freeCodeCamp</p>
<hr>
    <p class="email" id="email">Email: your-email@example.com</p>
    <p>Phone:<a href="tel:1235467890" class="phone-number">(123)456-7890</a></p>  
        <a href="https://www.w3schools.com/tags/tag_article.asp" class="portfolio">Portfolio</a>
    <hr class="hr2">
</div>

<div class="social-media">
    <h2>Connect with me</h2>
    <article class="twitter">
    <p id="twitter"><a href="https://x.com/">Twitter</a></p>
    </article >
    <article class="linkedin">
    <p id="linkedin"><a href="https://www.linkedin.com/">LinkedIn</a></p>
    </article>
    <article class="github">
    <p id="github"><a href="https://github.com/">GitHub</a></p>
    </article>
</div>
</div>

</body>


</html>

/* file: styles.css */
body {
  background-color: rosybrown;
  font-family: Arial, sans-serif;
}

p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.business-card {
  width: 300px;
  background-color: white;
  padding: 20px;
  margin-top: 100px;
  font-size: 16px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.profile-image {
  max-width: 100%;
}

a:hover {
  color: orange;
}

a:visited {
  color: purple;

}

.phone-number {
  color: black
}

.portfolio {
  color: blue;
}

a {
  text-decoration: none;
  color: brown;
}


.full-name {
  font-size: 28px;
  color: navy;
}

.designation {
  font-size: 18px;
  color: grey;
}

.company {
  color: darkgrey;
}

.email {
  margin-top: 20px;
}

.hr2 {
  margin-top: 20px
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

So the problem is the unit test is exactly looking for things in a certain way. You have the code down and you would think it would pass but to fix the error so you can move on would be the following…

Remove the main element that you put on there.

image
image1260×806 92 KB

The reason it is looking for an anchor tag that is a direct child of the class business-card:


assert.equal(document.querySelector('.business-card > a')?.textContent, 'Portfolio');

And the way you would be trying to pass the test is .business > .main > a

That is why it is failing.

3

Jack Sparrow

Software Developer

@freeCodeCamp

Email: your-email@example.com

Phone:(123)456-7890

Portfolio
4

I have deleted the main element, but there is still an issue

5

I just took your code that you had on the original and deleted the divwith the class of main. Don’t forget to delete the closing div tag as well and it worked.

1 Like
6

Thank you so much! That one was the death of me!