Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

It keeps saying your link element should be within your head element. Im confused and i dont know what to do because im 100% pretty sure its already in the head element.
I already put a closing tag on the link so its not that either

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<div class="business-card">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Business Card</title>
    <link rel="stylesheet" href="styles.css"

</head> 
<body>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" class="profile-image" alt="a pretty flower">
<p class="full-name">B Dubs</p>
<p class="designation">HTML Text Editor</p>
<p class="company">Brit's Desktop</p>
    <hr>
    <p>example@gmail.com</p>
    <p>724-555-3333</p>
    <a href="https://portfolio.adobe.com/">Portfolio</a>
    <hr> 
    <div class="social-media">
        <h2>Connect with me</h2><a href="https://x.com/">Twitter</a>
     <a href="https://www.linkedin.com/">LinkedIn</a> 
     <a href="https://www.github.com">GitHub</a> 
        </div> 
</body>
</div>
</html>

/* file: styles.css */
body { background-color:rosybrown;
font-family:Arial, sans-serif;
} 
p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.business-card {
  width: 300px;
background-color:lightpink;
padding: 20px;
margin-top: 100px;
font-size: 16px;
text-align:center;
margin-right:auto;
margin-left:auto;
}
.profile-image {
  max-width: 100%;
}
a{
  text-decoration:none;
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

2

This link element is not properly closed off. It should be closed in the same way as the meta element above it.
All element tags require a pair of angle brackets (< and >). In the case of self-closing elements (e.g. meta and link), which don’t require a separate closing tag, it’s also conventional to close the tag with /> instead of simply >.

3

i already edited my post saying i closed it off, it didnt work

4

Can you share the code which has a closed off link element please?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

Tell us what’s happening:

It keeps saying i need the link element in the head element but its in there.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<div class="business-card">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Business Card</title>
    <link rel="stylesheet" href="styles.css"/>

</head> 
<body>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" class="profile-image" alt="a pretty flower">
<p class="full-name">B Dubs</p>
<p class="designation">HTML Text Editor</p>
<p class="company">Brit's Desktop</p>
    <hr>
    <p>example@gmail.com</p>
    <p>724-555-3333</p>
    <a href="https://portfolio.adobe.com/">Portfolio</a>
    <hr> 
    <div class="social-media">
        <h2>Connect with me</h2><a href="https://x.com/">Twitter</a>
     <a href="https://www.linkedin.com/">LinkedIn</a> 
     <a href="https://www.github.com">GitHub</a> 
        </div> 
</body>
</div>
</html>

/* file: styles.css */
body { background-color:rosybrown;
font-family:Arial, sans-serif;
} 
p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.business-card {
  width: 300px;
background-color:lightpink;
padding: 20px;
margin-top: 100px;
font-size: 16px;
text-align:center;
margin-right:auto;
margin-left:auto;
}
.profile-image {
  max-width: 100%;
}
a{
  text-decoration:none;
}

Your browser information:

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

Challenge Information:

Design a Business Card - Design a Business Card

7

Please review the following HTML Boilerplate video/transcript:

Does your code have that basic structure?

1 Like
8

Yes, I hadn’t spotted that you had a div element above the opening head tag.
All code which form the body of the document (i.e. that which forms the content of the page), should be inside the body element.