Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

Test 18 is not working, despite the fact that every subsiquent test that relies on it passes. I have properly set up the div and the class for it after the second hr. I have checked the syntax externally to no avail. I will note I’ve used placeholder text for the sake of privacy.

Your code so far

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

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

<body>
    <div class="business-card">
        <img class="profile-image"
        src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg " alt="some kinda flower"
        >
        <p class="full-name">My Name</p>
        <p class="designation">Very Employed</p>
        <p class="company">Business</p>
        <hr>
        <p>Example@email.com</p>
        <p>555-555-5555</p>
        <a class="portfolio-link" href="www.youtube.com">Portfolio</a>
    <hr>
    </div>
    <div class="social-media">
        <h2>Connect with me</h2>
        <a href="www.youtube.com">Twitter</a>
        <a href="www.youtube.com">LinkedIn</a>
        <a href="www.youtube.com">GitHub</a>
    </div>
</body>

</html>

/* file: styles.css */
.business-card {
  width: 300px;
  background-color: red;
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 16px;
}

.portfolio-link {
  text-decoration: none;
}

body {
  background-color: rosybrown;
  font-family: Arial, sans-serif;
}

.profile-image {
  max-width: 100%;
}

a {
  text-decoration: none;
}

p {
  margin-top: 5px;
  margin-bottom: 5px;
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

is the .social-media element after hr or after div?

3

I removed the closing div and it worked, but isn’t this necessary? Shouldn’t removing it cause a syntax error?

4

What error are you facing right now , Can You Show us !!

5

you can write broken HTML syntax and the browser does its best to understand what you want to write, and generate the page. If you want something to test your HTML you need to use an HTML validator (for example this one Ready to check - Nu Html Checker)

consider user story 1

  1. You should have a div with a class attribute with a value of business-card that will contain all the other elements.

and consider where the closing tag of .business-card would need to go