Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

test cases failed. The inputs in the code is correct

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 class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="WELCOME">
     <p class="full-name"> Uday Reddy</p>
<p class="designation">Software Developer</p>
<p class="company">@freeCodeCamp</p>
<hr>
<p>Email :nalimelaudayreddy@gmail.com</p>
<p>Phone Number:+91 8688860094</p>
<a href="https://chatgpt.com/" target="_blank">Portfolio</a>
  </div>
  <!-- <hr> 
<div class="social-media">
  <h2>Connect with me</h2> -->
   <hr>
<div 
class="social-media"><h2>Connect with me</h2>
  <a href="https://twitter.com/yourusername" target="_blank">Twitter</a><br>
  <a href="https://linkedin.com/in/yourusername" target="_blank">LinkedIn</a><br>
  <a href="https://github.com/yourusername" target="_blank">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 20px 20px 20px;
  margin-top:100px;
  text-align:center;
  font-size:16px;
  margin-right:auto;
  margin-left:auto;
  background-color:pink;

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

}
.social-media{
  color:black;
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

Hi,
The tests that you’re failing are about the hr element. The hr element should be exactly after your Portfolio anchor element.

3

Howdy @udayreddy0948

The <link> tag on line 7 is missing > (Greater than sign) character.

If the code doesn’t cooperate with you, look here for a working example

Working example 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Digital Business Card</title>
<style>
body {
  background-color: rosybrown;
  font-family: Arial, sans-serif;
}

.business-card {
  background-color: lavenderblush;
  border: 3px solid darkslategray;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  width: 300px;
  margin: 100px auto 0;
}

.profile-image {
  max-width: 100%;
  width: 150px;
  height: 150px;
  margin-bottom: 10px;
  border: 2px solid lightgray;
}

.full-name {
  font-size: 24px;
  color: darkslategray;
}

.designation {
  font-size: 18px;
  color: gray;
}

.company {
  font-size: 16px;
  color: darkgray;
}

p {
  margin: 5px 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.social-media {
  margin-top: 10px;
  font-size: 14px;
}

.social-media a {
  margin: 10px;
  color: maroon;
}

hr {
  margin: 20px 0;
}
</style>
</head>
<body>

<div class="business-card">
  <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" class="profile-image" alt="Welcome">
  <p class="full-name">Uday Reddy</p>
  <p class="designation">Software Developer</p>
  <p class="company">@freeCodeCamp</p>
  <hr>
  <p>Email: <a href="mailto:nalimelaudayreddy@gmail.com" target="_blank">nalimelaudayreddy@gmail.com</a></p>
  <p>Phone number: <a href="tel:+918688860094">+91 86888 60094</a></p>
  <p><a href="https://chatgpt.com/" target="_blank">Portfolio</a></p>
  <hr>
  <div class="social-media">
    <h2>Connect with me</h2>
    <a href="https://x.com/" target="_blank">X (Twitter)</a>
    <a href="https://www.linkedin.com/" target="_blank">LinkedIn</a>
    <a href="https://github.com/" target="_blank">GitHub</a>
  </div>
</div>

</body>
</html>

  • Margin Shorthand

    • The margin property for the .business-card element has been simplified using the shorthand notation margin: 100px auto 0; (top | left and right | bottom)

  • Added mailto: scheme for the Email

  • Added tel: scheme for the Phone number

  • Separated the country code, city code and the phone number so it’s easier to read

Helpful links

Happy coding :upside_down_face: