Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

After the first hr element, there should be a p element with an email address as your text.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<head>
    <meta charset="utf-8">
    <title>Business Card</title>
</head>

<body>
<main> 
    <div class="business-card"> 
 <img src ="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt ="a pretty flower" class="profile-image">
 <p class="full-name"> Shabs 38 </p>
 <p class="designation"> Software Developer </p>
 <p class="company"> shabs38brothers.com </p> <hr>
 <div class="lanti"> 
<p>Email: Shabs38brothers@gmail.com </p>
     <p>Phone: 09033560550 </p>
  </div>   <a href="lab.html" class="portfolio-link"> Portfolio</a><hr>
 <div class ="social-media">
 <h2>Connect with me </h2>
 <a href="lab.html">Twitter</a>
 <a href="lab.html">LinkedIn</a>
<a href="lab.html">GitHub</a> </div>
    </div>
</main>
</body>

</html>

/* file: styles.css */
body {
  font-family: Arial,sans-serif; background-color:rosybrown;
}
.business-card {
width:300px;
height:380px;   background-color: rgb(238,227,181);
margin-top: 100px;
margin-right: auto;
margin-left: auto;
align-item: center;
padding:20px;
font-size: 16px;
text-align: center;
}
.profile-image {
max-width:100%;
  height: 100px;
  margin: auto;
  display: block;
  padding-top: 10px;
  padding-bottom: 30px;
}
.full-name,.designation,.company {
  text-align: center;
  line-height: 0.5;
  margin-top: 5px;
  margin-bottom: 5px;
}
.lanti{
  text-align: center;
  line-height: 0.5;
  align-item: center;
}
.portfolio-link{
  display: block;
  text-align: center;
}
h2{
  font-family: sans-serif;
  text-align: center;
}
.maimu{
justify-content: space-between;
text-align: center
}
a {
  display: inline;;
text-decoration: none;
}
hr {
margin-top:10px;
margin-bottom:10px;
}
p{
  margin-bottom: 5px;
  margin-top:5px;
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

What’s after the first hr element?

3

I see the email paragraph is currently nested within the div element named lanti. You must move that p element so it is positioned immediately after the first <hr> tag in your code, which follows the company name. The test requires the email address to be the direct text of the p element, so I suggest removing the “Email: “ prefix as well. This will ensure the structure matches the required criteria exactly.

Good luck!