Design a Business Card

HTML-CSS
1

Hey guys, this is my first post! I need help with requirement n27. Ive tried many approaches but to no end. If anyone can discover where my mistake is Ill be extremely greateful! I`ll leave the HTML and CSS here.

[CSS]

.business-card {
    width: 300px;
    background-color: #ffe7f2;
    border: 2px solid black;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    margin: 100px auto 0;
}

.business-card hr {
    border: none; 
    border-top: 1px dashed slategray; 
    height: 1px; 
    margin: 10px 0; 
}

.profile-image {
    width: 100px;
    height: 100px;
    border: 2px solid lightgrey; 
}

[HTML]

    <div class="business-card">
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="flower">
        <p class="full-name">Your Name</p>
        <p class="designation">Software Developer</p>
        <p class="company">@YourCompany</p>
        <hr>
        <p class="email">Email: example@gmail.com</p>
        <p class="phone"> Phone: 07366263481</p>
        <a href="link">Portfolio</a>
        <hr>
        <div class="social-media">
          <h2>Connect with me</h2>
          <a href="link">Twitter</a>
          <a href="link">LinkedIn</a>
          <a href="link">GitHub</a>
    </div>
2

can you share a link to the project please?

3

Tell us what’s happening:

Requirement n27 keeps failing altough i´ve tried many other ways and have asked chat gpt too.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Business Card</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="business-card">
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="flower">
        <p class="full-name">Your Name</p>
        <p class="designation">Software Developer</p>
        <p class="company">@YourCompany</p>
        <hr>
        <p class="email">Email: antoniomartinho567@gmail.com</p>
        <p class="phone"> Phone: 07366263481</p>
        <a href="www.google.com">Portfolio</a>
        <hr>
        <div class="social-media">
          <h2>Connect with me</h2>
          <a href="https://twitter.com">Twitter</a>
          <a href="https://www.linkedin.com">LinkedIn</a>
          <a href="https://github.com">GitHub</a>
    </div>
    </div>
</body>

</html>

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: rosybrown;
  }
  
  p {
    margin: 5px 0;
  }

.business-card {
    width: 300px;
    background-color: #ffe7f2;
    border: 2px solid black;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    margin: 100px auto 0;
}

.business-card hr {
    border: none; 
    border-top: 1px dashed slategray; 
    height: 1px; 
    margin: 10px 0; 
}

.profile-image {
    width: 100px;
    height: 100px;
    border: 2px solid lightgrey; 
}

.full-name {
    font-size: 22px;
    margin-top: 15px;
    color: Black;
}

.designation {
    color: grey;
}

.company {
    margin-bottom: 15px;
    color: lightgrey;
    font-size: 14px;
}

.email {
    margin-top: 15px;
}

.business-card > a {
    display: inline-block;
    margin-bottom: 10px;
}

a:hover {
    text-decoration: underline;
}

a {
    text-decoration: none;
}

.connect {
    font-size: 20px;
}

.social-media a {
    text-decoration: none;
    color: darkred;
    display: inline-block;
    margin-bottom: 10px;
} 

.social-media a:hover {
    text-decoration:underline;
} 

.social-media h2 {
    font-size: 20px;
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

4

Hey, I created a new post with the link to the project there, I thought it would be easier: Design a Business Card - Design a Business Card

5

I have merged your two topics, please do not create multiple topics for the same challenge

1 Like
6

What issue are you having? the only test i see not passing is

Failed:27. The hr elements should have a 1px dashed top border in slategray color.

7

That´s the one im having trouble with

8

And where is the css for that? You do not target that element anywhere, I thought you still had to try anything there

1 Like
9

Thank you, I don´t know why I wrote .business-card before hr. I´ve deleted it and it passed the test. Thank you for the help!