Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

The build a business card is not passing due to step 29. I have tried refreshing and resetting but it still does not let me pass.

Your code so far

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

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

<body>
    <div class="business-card">
    <main>
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="Profile image of Alves Gonzalez">
        <p class="full-name">Alves Gonzalez</p>
        <p class="designation">Software Developer</p>
        <p class="company">@freecodecamp</p>
        <hr>
        <p>Email: alvesdgonzalez3@gmail.com </p>
        <p>Phone: 407-572-7023</p> 
        <a href="https://github.com/alves-gonzalez?tab=repositories">Portfolio</a>
        <hr>
        <div class="social-media">
  <h2>Connect with me</h2>
  <a href="https://twitter.com/">Twitter</a>
  <a href="https://www.linkedin.com/in/alves-gonzalez-qa">LinkedIn</a>
  <a href="https://github.com/alves-gonzalez?tab=repositories">GitHub</a>
</div>
    </main>
    </div>

</body>

</html>


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

p {
  margin: 5px 0;                     /* requirement #6: top/bottom 5px only */
}

a {
  text-decoration: none;             /* requirement #7: no underline */
}

.business-card {
  width: 300px;                      /* requirement #9 */
  background-color: lightblue;       /* requirement #10 (your choice of color) */
  padding: 20px;                     /* requirement #11 */
  margin-top: 100px;                 /* requirement #12 */
  margin-left: auto;                 /* requirement #15 */
  margin-right: auto;                /* requirement #15 */
  text-align: center;                /* requirement #13 */
  font-size: 16px;                   /* requirement #14 */
}

.profile-image {
  max-width: 100%;                   /* requirement #19 */
}

.social-media {
  margin-top: 15px;                  /* optional: spacing above social links */
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Design a Business Card - Design a Business Card
https://www.freecodecamp.org/learn/full-stack-developer/lab-business-card/design-a-business-card

1 Like
2

Which part of the instructions lead you to use a main element?

3

I thought it was required based on previous lesson. Assuming we were to apply what we have learned. Continously building upon it.

2 Likes
4

Interesting thanks. The previous workshop does use a main element in the same way.

You just need to follow the instructions of the current lab. A business card and a cafe menu probably won’t be designed in the same way.

In any case don’t use instructions from the previous project on the new project. Just read the instructions and implement them.

1 Like
6

I did the exact same thing and was about to pull my hair out coz I couldn’t fault anything + no spelling errors, wth? Finally came across this post after reading others & boom! “Which part of the instructions lead you to use a main element?” :sweat_smile:
So I went back & deleted those elements, then it worked lol Thanks code fam! I’ll be sure to follow instructions on the current lesson & not from the previous lol

7

So, you put a main element because the previous workshop used a main element?