Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

I’m failing the following steps:
7: links should have no underline by default
27 & 32: no HR elements (but there actually are)
30: there should be an a element with the text portfolio (it’s there)

Thanks for your help!

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>

<div class="business-card">
<body>
    <main>
    <header>
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="a pink flower">
        <section class="titles">
        <p class="full-name">Sarah Carr</p>
        <p class="designation">Software engineer</p>
        <p class="company">Scooter Designs</p>
        </section>

    <hr>

    <p>
        <a href="mailto:hicoachcarr@gmail.com>hicoachcarr@gmail.com></a>
        
    </p>

    <hr>

    <p>
        <a href="mailto:hicoachcarr@gmail.com">Email</a></p>
    <p>
        <a href="tel:+55555555">Telephone</a></p>

    <p>
        <a href="https://www.instagram.com/kotshcarr/">Portfolio</a>
    </p>

    <hr>
    
<div class="social-media">
    <h2>Connect with me</h2>
        <a href="www.twitter.com">Twitter</a>
        <a href="www.linkedin.com">LinkedIn</a>
        <a href="www.github.com">GitHub</a>
</div>

    <hr>
    </header>
</body>
    </main>
</div>
</html>

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

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

.titles {
  font-weight: bold;
  background-color: white;
}

.business-card {
width: 300px;
background-color: pink;
padding: 20px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
text-align: center;

}

p {
  margin-top: 5px;
  margin-bottom: 5px;
}

a:link {
  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/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Design a Business Card - Design a Business Card

2

do you think this target the default style of a elements?

the hr elements is not after the .company element

body should contain all html elements that appear in the page

missing quote

missing quote

this a element should be direct child of .business-card

3

Thanks for taking the time to answer.

  • I am following this guide re. the default styling of links.
  • I have moved hr inside section directly underneath .company and am still getting the same error message (also the line is still appearing where it should be appearing)
  • I’m moved main inside body and am still getting the same error
4

you are not following the example, you went directly to pseudoclasses. Do not use pseudoclasses

show your updated code

5

Sorry, maybe I missed it but I don’t know what a pseudoclass is. I’ve googled it and am none the wiser about how to style a link in the way the task demands.

Here is my code:

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

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

<div class="business-card">
    <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="a pink flower">
<body>
    <main>
    <header>
        
        <section class="titles">
        <p class="full-name">Sarah Carr</p>
        <p class="designation">Software engineer</p>
        <p class="company">Scooter Designs</p>
        </section>

    <hr>

    <p>
        <a href="mailto:hicoachcarr@gmail.com">hicoachcarr@gmail.com></a>
        
    </p>

    <hr>

    <p>
        <a href="mailto:hicoachcarr@gmail.com">Email</a></p>
    <p>
        <a href="tel:+55555555">Telephone</a></p>

    <p>
        <a href="https://www.instagram.com/kotshcarr/">Portfolio</a>
    </p>

    <hr>
    
<div class="social-media">
    <h2>Connect with me</h2>
        <a href="www.twitter.com">Twitter</a>
        <a href="www.linkedin.com">LinkedIn</a>
        <a href="www.github.com">GitHub</a>
</div>

    <hr>
    </header>
</body>
    </main>
</div>
</html>

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

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

.titles {
  font-weight: bold;
  background-color: white;
}

.business-card {
width: 300px;
background-color: pink;
padding: 20px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
text-align: center;

}

p {
  margin-top: 5px;
  margin-bottom: 5px;
}

a:link {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
6

the link you shared, the first example, that is styling links with no pseudoclasses, as “default”

a future lecture will go deeper in this

your body element is still not containg all other html elements that go on the page
please review the html boilerplate

7

OK - I have sorted the link styling problem.

The hr error is still showing (and my lines are still displaying correctly in the correct places).

I have moved body:

<!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="a pink flower">

    <main>
    <header>
        
        <section class="titles">
        <p class="full-name">Sarah Carr</p>
        <p class="designation">Software engineer</p>
        <p class="company">Scooter Designs</p>
        </section>

    <hr>

    <p>
        <a href="mailto:hicoachcarr@gmail.com">hicoachcarr@gmail.com></a>
        
    </p>

    <hr>

    <p>
        <a href="mailto:hicoachcarr@gmail.com">Email</a></p>
    <p>
        <a href="tel:+55555555">Telephone</a></p>

    <p>
        <a href="https://www.instagram.com/kotshcarr/">Portfolio</a>
    </p>

    <hr>
    
<div class="social-media">
    <h2>Connect with me</h2>
        <a href="www.twitter.com">Twitter</a>
        <a href="www.linkedin.com">LinkedIn</a>
        <a href="www.github.com">GitHub</a>
</div>

    <hr>
    </header>

    </main>
</div>
</body>
</html>

type or paste code here

8

you have added more elements than what was asked by the tests, that may be an issue

but now body is in the rigth place, good job

9

Thanks.

I’ve removed the extra element and its corresponding css.

I’m still failing steps 30 and 32. Not sure what to do.

10

Hi,
Can you share your updated code?

11 
<!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="a pink flower">

    <main>
    <header>
        
        
        <p class="full-name">Sarah Carr</p>
        <p class="designation">Software engineer</p>
        <p class="company">Scooter Designs</p>
    <hr>

    <p>
        <a href="mailto:hicoachcarr@gmail.com">Email</a></p>
    <p>
        <a href="tel:+55555555">Telephone</a></p>
    <p>
        <a href="https://www.instagram.com/kotshcarr/">Portfolio</a>
    </p>
    <hr>
    
<div class="social-media">
    <h2>Connect with me</h2>
        <a href="www.twitter.com">Twitter</a>
        <a href="www.linkedin.com">LinkedIn</a>
        <a href="www.github.com">GitHub</a>
</div>

    <hr>
    </header>
    </main>
</div>
</body>
</html>

body {

background-color: rosybrown;

font-family: Arial, sans-serif;

margin-top: 50px;

}

.profile-image {

max-width: 100%;

}

.business-card {

width: 300px;

background-color: pink;

padding: 20px;

margin-top: 100px;

margin-left: auto;

margin-right: auto;

font-size: 16px;

text-align: center;

}

p {

margin-top: 5px;

margin-bottom: 5px;

}

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}
12

You don’t need to wrap the Portfolio anchor inside another p element. The header element is unnecessary. Also, if you’re using the main element, make sure the .business-card div is a child of it.

14

Thank you - it’s sorted.

1 Like