Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

im stuck on design a business card step:14 16 and 17

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0

Challenge Information:

Design a Business Card - Design a Business Card

1 Like
2
  1. After the two p elements, there should be an a element with a class of portfolio-link, the text Portfolio, and it should link to a valid URL.

When you stuck, try to read slow and loud the task or test descriptions.
Most of the time, the instructions are clear, just have to pay very close attention.

If you feel, you can´t really focus, than you may need a 5-15 minutes pause from coding and doing something non-coding thing, not even thinking about your code, just when you sit back.

2 Likes
3

sorry i havent been responing i reviewed your message and it really helped me i also passed the test so Thank you

3 Likes