Help with "Design a Business Card #29 Failing

HTML-CSS
1

I keep failing #29 29. After the phone number p element, there should be an a element with the text Portfolio

I have tried this a million times and it’s still not working. I even switched browsers (from Safari to Chrome) and still no avail.
Other people have had the coding like mine and it passed for them, so I’m not sure why I keep getting hung up on this one!

Here’s my coding. I did add a grid in CSS but that is unrelated.

index.html

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

<body>
    <div class="business-card">
    <section>
        <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="profile image" class="profile-image">
<p class="full-name">Dora Chaney</p>
<p class="designation">SHE-EO</p>
<p class="company">G&G App Development</p>
<hr>
<p class="email-address">dorachaney@email.com</p>
<p class="phone-number">Phone number: 123-456-7890</p>
<a href="https://gmail.com" class="portfolio">Portfolio</a>
<hr>
<div class="social-media">
    <h2 class="social-header">Connect with me</h2>
  <section class="social-grid">
    <a href="x.com" class="Ta">Twitter</a>
    <img src="https://freepnglogo.com/images/all_img/1729449055_twitter-logo-square%20shape-png.png" alt="Twitter" width="30px" class="Tb">
   
    <a href="www.linkedin.com" class="La">LinkedIn</a>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/LinkedIn_icon.svg/1024px-LinkedIn_icon.svg.png" alt="LinkedIn" width="30px" class="Lb">
    <a href="www.github.com" class="Ga">GitHub</a>
    <img id="fixed-width-element" src="https://cdn.freebiesupply.com/logos/large/2x/github-icon-logo-png-transparent.png" alt="GitHub" width="30px" class="Gb">
    </div>
    </div>
</section>
</body>
</html>

styles.css

body {
  background-color: rosybrown;
  font-family: Arial, sans-serif;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

p {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 16px;
}

h2 {
  font-size:20px;
}

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

.business-card img {
width:50px;
max-width: 100%;
 border: 1px solid white;
 border-radius: 10px;
 margin-top: 4px;
}

.business-card {
background-color:gray;
width: 300px;
margin-left: auto;
margin-right: auto;
border: 1px solid brown;
border-radius: 14px;
padding: 20px;
font-size: 16px;
margin-top: 100px;
text-align: center;
  }

.full-name{
  font-size: 20px;
  font-weight: bold;
}
.profile-image {
  max-width: 100%;
}

.social-grid
{
display:grid;
justify-content: space-evenly;
font-size: 10px;
}


.Ta {
  grid-column:1;
  grid-row:2;
}
.Tb {
  grid-column:1;
  grid-row:1;
}
.La {
  grid-column:2;
  grid-row:2;
}
.Lb {
  grid-column:2;
  grid-row:1;
}
.Ga {
  grid-column:3;
  grid-row:2;
}
.Gb {
  grid-column:3;
  grid-row:1;
}

Thanks in advance for any help!

2

Can you provide a link to the challenge

3

Etc.

You have added several elements that you were not asked to add in the instructions. Just follow the instructions. Do exactly what is asked and no more.

1 Like