Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

the task not detect my anchor with portfolio text.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Business Card</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="styles.css" rel="stylesheet"/>
</head>

<body>
    <div class="business-card">
        <main>
            <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="foto profil" class="profile-image">
            <p class="full-name">Farhan Randy Maulana</p>
            <p class="designation">Pengacara</p>
            <p class="company">@frhnrndy</p>
            <hr>
                <p>Email: farhanmohy@gmail.com</p>
                <p>Phone: (+62)82299028422</p>
                <a href="https://portfolio.com" target="_blank">Portfolio</a>
            <hr>
            <div class="social-media">
                <footer>
                    <h2>Connect with me</h2>
                    <a href="twitter.com" target="blank">Twitter</a><a href="linkedin.com" target="blank">LinkedIn</a><a href="github.com" target="blank">GitHub</a>
                </footer>
            </div>
        </main>
    </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 {
  width: 300px;
  background-color: white;
  margin-top: 100px;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  margin-left: auto;
  margin-right: 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 there and welcome to our community!

It’s not obvious why that test was failing but it appears to be the inclusion of the main element which is throwing the test.
As you have a containing div element anyway, the main element isn’t really needed, so I’d just remove it, and the final test will pass.

1 Like
3

you are right, i deleted the main and the task completed

1 Like