Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

I’ve got the same issue as others with this Business card task on this certain step about Portfolio. I’ve completed every single advice from comments to previous posts but i’m till on it.
I even consulted with my frontend developers colleagues.
Are there any extra hacks?

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">
    <section>
      <figure>
    <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="blooming rose flower">
    </figure>
      <p class="full-name">ANASTASYA KORENIUGINA</p>
      <p class="designation">Frontend Developer</p>
      <p class="company">@korenariya</p>
      <hr>
      <p>Email: <a href="mailto:korenbir@gmail.com" class="contacts-link">korenbir@gmail.com</a></p>
<p>Phone number: <a href="tel:+79263203739" class="contacts-link">8(926)320-37-39</a></p>
<a href="https://hh.ru/applicant/resumes?hhtmFrom=main&hhtmFromLabel=header" class="social-media-link">Portfolio</a>
      <hr>
      <div class="social-media">
        <h2>Connect with me</h2>
        <a href="https://x.com/" class="social-media-link">Twitter</a>
        <a href="https://ru.linkedin.com/" class="social-media-link">LinkedIn</a>
        <a href="https://github.com/" class="social-media-link">GitHub</a>
        </div>
          </section>
    </div>
  </body>
</html>

/* file: styles.css */
p {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

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

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

.business-card {
  text-align: center;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  padding: 20px;
  width: 300px;
  background-color: DarkSeaGreen;
  border: 4px solid darkslategray;
}

.full-name,
.designation,
.company {
  color: darkolivegreen;
}

a {
  text-decoration: none;
   margin-right: 15px;
}

h2 {
  color: darkslategray;
}

.contacts-link {
color: darkslategray; /* Ссылка, на которую ещё не кликали */
}

.contacts-link:visited {
  text-decoration: none;
  color: Indigo; /* Ссылка, на которую уже кликали */
}

.contacts-link:hover {
  text-decoration: none;
  color: Tomato; /* Когда наводишь курсор */
}

.social-media-link:active {
  text-decoration: none;
  color: green; /* Когда нажимаешь (кликаешь) на ссылку */
}

.social-media-link {
color: crimson; /* Ссылка, на которую ещё не кликали */
}

.social-media-link:visited {
  text-decoration: none;
  color: Indigo; /* Ссылка, на которую уже кликали */
}

.social-media-link:hover {
  text-decoration: none;
  color: Tomato; /* Когда наводишь курсор */
}

.social-media-link:active {
  text-decoration: none;
  color: green; /* Когда нажимаешь (кликаешь) на ссылку */
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

you have added some extra elements, the p and a element need to be direct children of .business-card

3

Thanks, i deleted main, figure and section tags and it worked!