Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

I have tried my best but seems I fall short. My code fails on a number of points which I cannot pin out. Help me please

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">
    <style>
        body{
        background-color: rosybrown;
        font-family: Arial,  sans-serif;
}
        p{
         margin-top: 5px;
         margin-bottom: 5px;
        }
        .business-card{
        width: 300px;
        background-color: green;
        padding: 20px;
        margin-top: 100px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 16px;
        }
        a{
        text-decoration: none;
        }
        a:hover{
        text-decoration: underline;
        }
    </style>

</head>

<body>
    <div class="business-card">
        <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" class="profile-image" alt="beautiful flower as logo" height="200" width="200">
    <p class="full-name">Addmore Tsamwisi</p>
    <p class="designation">President</p>
    <p class="company">Marksons Corporation Inc.</p>
        <hr>
    <p>addietsar@gmail.com</p>
    <p>0753556514</p>
    <a href="github.com/Tsar777/tsar777.github.io">Portfolio</a>
    <hr>
    </div>
    <div class="social-media">
        <h2>Connect with me</h2>
        <a href="https://x.com/i/flows/">Twitter</a>
        <a href="https://www.linkedin.com/feed/">LinkedIn</a>
        <a href="github.com/tsar777.github.io">GitHub</a>

    </div>

</body>

</html>

/* file: styles.css */

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

Your CSS code should be in the separate CSS file, rather than in a style element in your HTML doc. You have already linked to the CSS file, so copy/paste all of the code to it.

You should find that you then pass all but one of the required user stories. The final one should be easy enough to figure out, but let us know if you have any further issues!

3

Thank you so much . I have rectified the css part, but still the code cannot sail through. I have tried numerous ways but I seem not to have the slightest clue about what I am missing.

4

Hey there,
could you share your updated code so we can better understand the problem?

5

You can use a style element if you want.

After the second hr element, there should be a div element with the class social-media.

If you read the location and order requirements of all the elements, you can tell the social-media element should be inside the business-card element, after all the rest of the sibling elements.

6

Tell us what’s happening:

Here’s the updated code.Thank you so much guys for the help. That final jigsaw is still elusive, once I crack it I will be the happiest man. Thank you once more.

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="beautiful flower as logo" height="200" width="200">
    <p class="full-name">Addmore Tsamwisi</p>
    <p class="designation">President</p>
    <p class="company">Marksons Corporation Inc.</p>
        <hr>
    <p>addietsar@gmail.com</p>
    <p>0753556514</p>
    <a href="github.com/Tsar777/tsar777.github.io">Portfolio</a>
    <hr>
    </div>
    <div class="social-media">       
        <h2>Connect with me</h2>
        <a href="https://www.x.com/i/flows/">Twitter</a>
        <a href="https://www.linkedin.com/feed/">LinkedIn</a>
        <a href="github.com/tsar777.github.io">GitHub</a>
    </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: green;
  padding: 20px;
  margin-top: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 16px;

}
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

7

what do you find confusing?

lasjorg has left you a comment on a failing test, did you miss it?

8

Thank you guys for your help. Now I understand the concept. And indeed it passed. Thank you wholeheartedly.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.