Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

  1. You should set the page font to Arial in the body element with a fallback of sans-serif.
  2. The links of the page should have no underline.
  3. The image source should be set to a valid image.
  4. Your .portfolio-link element should have a valid href

Your code so far

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Business Card</title>
    <link href="styles.css" rel="stylesheet">
</head>


<body>
<div class="business-card">
    <main>
        <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="the growth of our company"/> 
        <img class="profile-image">
     <p class="full-name">Abdu Re</p>
     <p class="designation">Mechatronics Enginer</p>
     <p class="company">@A<sup>2</sup>Soln</p> 
        <hr>
         <p>Email:- abdubest02@gmail.com</p>
         <p>Phone no:- +251921406917</p>
         <a class="portfolio-link">Portfolio</a>
         <a href="https://www.mechatrolink.org/common/" target="_blank">A<sup>2</sup>Soln</a>
        <hr> 
  <div class="social-media">
      <h2>Connect with me</h2>
      <a href="https://www.yaskawa.com.sg/product-info/mechatrolink-1">Twitter</a>
      <a href="https://www.yaskawa.com.sg/product-info/mechatrolink-1">LinkedIn</a>
      <a href="https://www.yaskawa.com.sg/product-info/mechatrolink-1">GitHub</a> 
  </div>      
    </main>
</div>
</body>
</html>

/* file: styles.css */
body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/labs/flower.jpg);
  background-color: rosybrown;
  font-family: sans-serif;
  font: Arial;
}
.business-card {
  width: 300px;
  background-color: silver;
  padding: 20px;
  margin-top: 100px;
  text-align: center;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
}
 .profile-image {
  max-width: 100%; 
}
img {
  display: block;
  width: 70%;
  margin-top: -25px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.social-media {
  margin-left: auto;
  margin-right: auto;
}
hr {
  height: 2.75px;
  background-color: rgb(37, 37, 146);
  border-color: rgb(500, 50, 100);
}
.portfolio-link {
 a: url(https://www.mechatrolink.org/common/);
}

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

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

Which line of code implements this?