Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

According to instruction, I managed to create links with underlines only when hovered over. But when I run the test it fails step 7 and 8.

Your code so far

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

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

<body>
 <div class="business-card">
    <main>
<img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="random image" class="profile-image">
        <p class="full-name">Jimmy Reece</p>
        <p class="designation">Software Developer</p>
        <p class="company">Code Academy</p>
        <hr>
        <p>614-655-988</p>
        <p>blackhat@gmaol.com</p>
        <a href="https://www.keybr.com" target="_blank">Portfolio</a>
        <hr>
<div class="social-media">
    <h2>Connect with me</h2>
    <a href="https://x.com" target="_blank">Twitter</a>
    <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
    <a href="https://github.com" target="_blank">GitHub</a>
    </div>
    

    </main>

</body>

</html>

/* file: styles.css */
body {
  width: 300px;
  background-color: rosybrown;
  padding: 20px;
  font-family:Arial,sans-serif;
}
.business-card {
  background-color: beige;
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 16px;
  width: 300px;
}
p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.profile-image {
  width: 250px;
}
a {
  color: blue;
}
a:link {
  color: red;
}
a:active{
  color: yellow;
}
a:hover{
  color: orange;
}
a:link, a:active {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Safari/605.1.15

Challenge Information:

Design a Business Card - Design a Business Card

2

Welcome to the forum @Coder59

  1. You need to style the anchor element directly, without using pseudo classes.
  2. Try combining the a:hover selectors.

Happy coding

1 Like
3

It worked! Thankyou for the input.

1 Like