Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

So my code is now complete but when I run the test it keeps showing an error on step 33 which says “After the second hr element, there should be a div element with a class attribute with a value of social-media”. Can you please tell me what am I missing? I tried to copy it, reset it and paste it and still the same error message.

Your code so far

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

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

<body>
<div class="business-card">
    <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="pink flower" class="profile-image">
    <p class="full-name">Felipe Valdez</p>
    <p class="designation">Designation</p>
    <p class="company">Felipe's Cannabis</p>
    <hr>
    <p>kvjdkdlc@gkvl.com</p>
    <p>(614)141-9270</p>
    <a class="portfolio-link" href="http://www.freecodecamp.com">Portfolio</a>
<hr>
</div>
<div class="social-media">
    <h2>Connect with me</h2>
    <a href="http://www.twitter.<com">Twitter</a>
    <a href="http://www.linkedin.com">LinkedIn</a>
    <a href="http://www.github.com">GitHub</a>
</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;
  padding: 20px;
  margin-top: 100px;
  font-size: 16px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  background-color: teal;
}

hr {
    height: 2px;
  border-color: slategray;
  border-style: dashed; 
  border-width: 1px;
}
.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/142.0.0.0 Safari/537.36

Challenge Information:

Design a Business Card - Design a Business Card

3

Your .social-media div should be nested inside the .business-card div.

4

Tried that but didnt made any difference, still an error message displayed on the same step

5

So that was it, huh… Thanks for your support mate, this was about to make me nuts

6

You can just copy paste the above one that I sent to you. Kindly

7

hi @Lyuba

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.