Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

Im failing on these 2 but i cant see whats wrong with them

  1. After the second hr element, there should be a div element with the class social-media.
  2. The links of the page should have no underline by default.

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'></link>
</head>

<body>
    <div class='business-card'>
        <main>
          <img class='profile-image' src='https://cf-images.us-east-1.prod.boltdns.net/v1/static/6057949425001/24b65f93-398a-4c76-9e51-c2aa7df3451a/f67b5560-c5e3-454d-8385-3460cef797fa/1280x720/match/image.jpg' alt='profile-img'></img>
     <p class='full-name'>Andrew Kemp</p>
     <p class='designation'>Decipticon</p>
     <p class='company'>Star Fleet</p>
     <hr>
       <p class='phone'>080080085</p>
       <p class='email'>arealemail@emails.com</p>
       <a class= 'portfolio' href='https://www.freecodecamp.org/BumHoleOfDoom'  >Portfolio</a>
     
     <hr>
   </div>
   <div class='social-media'>
       <h2>Connect with me</h2>
       <a class='twitter' href='https://x.com/?lang=en'>Twitter</a>
       <a  class='linkedin' href='https://www.linkedin.com/'>LinkedIn</a>
       <a class='github' href='https://github.com/' >GitHub</a>
    </div>  
    </div>
        </main>
        
    

</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;
  padding:20px;
  margin-top:100px;
  font-size:16px;
margin-left:auto;
margin-right:auto;
background-color:magenta;
text-align:center;
}
a:link{
  text-decoration:none;
}
a:hover {
text-decoration:underline!important;}
h2 {
  font-family: Arial;
  font-size: 20px;
}
img {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
.social-media{
  text-align:center;
}

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
  1. Notice that after your second hr, you close <div class='business-card'> before the opening tag <div class='social-media'>. The test probably expects <div class='social-media'> to come directly after the hr, and the project as a whole looks like it doesn’t want <div class='business-card'> to be closed until the end of the page (since the whole page is just a business card anyway).
  2. Although setting text-decoration to none does remove the underline from a elements, the selector a:link only targets a elements that have not yet been visited, not all a elements by default as the test wants. See this if you’re curious (although I don’t think it’s what you need).