Help, Please Design a Business Card

Curriculum Help
1

Tell us what’s happening:

Design a Business Card
Stuck after 29. I think my format is wrong

Your code so far


```Preformatted text
<!DOCTYPE html>
<html lang="en">

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


<style>

 .business-card {
    width:300px;
    back-ground-color:blue;
    padding:20px;
    top-margin:100px;
    bottom-margin:5px;
    font-size:16px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    
} 
</style>

<style>
p{
    margin-top:5px;
    margin-bottom:5px;
}
</style>

<style>
 body{
    background-color: rosybrown;
    font-family: Arial,sans-serif;
   }
</style>
    <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="Pink flower">
<p class="full-name">Tyler</p>
<p class="designation">Mercenary</p>
<p class="company">RogueRepublic</p>
<hr>
<p>removed by moderator</p>
<p>removed by moderator</p>

<a class="portfolio-link"href="https://github.com" target="_blank">Portfolio</a>
<hr>.Porfolio-link</hr>
<div class="social-media">

<h2>Connect with me</h2>
.social-media{
    <a href="twitter.com">Twitter</a>
    <a href="linkedin.com">LinkedIn</a>
    <a href="https://github.com">GitHub</a>
}
}


</body>

</html>
## 
Lesson URL (copy - paste from your browser's address bar)
2

Hi @Rone1

You have linked to your stylesheet. Why aren’t you using it? Also, there should be a space between attribute/value pairs in your element tag.

Happy coding

3

I’m looking over this and just to remember I didn’t know css is seperate, thanks amigo

4

if you want to use your style element you will want to make sure it is correctly working, that div is eating the opening style tag

5

what do you mean you don’t know? have you not completed the cafe menu workshop?

7

:rofl: I have it just didn’t sink in

8

Please don’t share your personal information like your phone number, email, legal name and exact location online. It’s unsafe.

It can be scraped by malicious actors to use against you, so please think carefully about what information you share.

9

I didn’t even think about that, thank you

10

I’ll go ahead and remove that from the posts here so it’s no longer available.

13

Tell us what’s happening:

The links of the page should have no underline.

Your code so far

Business Card <div class="business-card" 
<img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="Pink flower">

Tyler

Mercenary

RogueRepublic

email@gmail.com

123-123-1234

<a class=“portfolio-link"href=“https://github.com” target=”_blank"style=“text-decoration:none”>Portfolio

.Porfolio-link

Connect with me

.social-media{

<a href="twitter.com" style:="\_blank"style="text-decoration:none">Twitter</a>

<a href="linkedin.com" style:="\_blank"style="text-decoration:none">LinkedIn</a>

<a href="https://github.com" style:= "\_blank"style="text-decoration:none;">GitHub</a>

}

}

.profile-image{

max-width:100%

}

body{

background-color: rosybrown;

font-family: Arial,sans-serif;

}

.business-card {

width:300px;

background-color:#fff0f5;

padding:20px;

margin-top:100px;

margin-bottom:5px;

font-size:16px;

text-align:center;

margin-left:auto;

margin-right:auto;

}

p{

margin-top:5px;

margin-bottom:5px;

}

body{

background-color: rosybrown;

font-family: Arial,sans-serif;

}

a{text-direction:none;}

a{style=“text-decoration:none;”}

Lesson URL (copy - paste from your browser’s address bar)

15

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

Also, please re-post your code formatted as follows so we can test it:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

Thank you.

18 
<!DOCTYPE html>
<html lang="en">

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





<style>
 
</style>
    <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="Pink flower">
<p class="full-name">Tyler</p>
<p class="designation">Mercenary</p>
<p class="company">RogueRepublic</p>
<hr>
<p>email@gmail.com</p>
<p>123-123-1234</p>

<a class="portfolio-link"href="https://github.com" target="_blank"style="text-decoration:none">Portfolio</a>
<hr>.Porfolio-link</hr>
<div class="social-media">

<h2>Connect with me</h2>
.social-media{
    <a href="twitter.com" style:="_blank"style="text-decoration:none">Twitter</a>
    <a href="linkedin.com" style:="_blank"style="text-decoration:none">LinkedIn</a>
    <a href="https://github.com" style:= "_blank"style="text-decoration:none;">GitHub</a>
}
}


</body>

</html>

.profile-image{

max-width:100%

}

body{

background-color: rosybrown;

font-family: Arial,sans-serif;

}

.business-card {

width:300px;

background-color:#fff0f5;

padding:20px;

margin-top:100px;

margin-bottom:5px;

font-size:16px;

text-align:center;

margin-left:auto;

margin-right:auto;

}

p{

margin-top:5px;

margin-bottom:5px;

}

body{

background-color: rosybrown;

font-family: Arial,sans-serif;

}

a{text-direction:none;}

a{style=“text-decoration:none;”}

19

Remember that all HTML elements, except void elements, require both an opening tag and a closing tag.

Can you spot the HTML elements in your code that do not have closing tags?

21

please use backticks to format your code

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

23

I looked over my code and wasn’t able to see where I was missing a closing tag

24

void element, should not have closing

broken tag, missing part, it’s eating out the style element after it

I am not sure what you are trying to do here

for more help please post your formatted code

25

maybe “div”? I thought maybe <a> but I’m missing something

26

you can use this https://validator.w3.org/#validate_by_input , you paste your html file in there and it will tell you if it’s valid code or not

ask here if you don’t know how to solve things, or why something is not valid

27

The validator is awesome, ty

28

A couple of things stand out in the code. Your .business-card div is missing the closing >, and properties like back-ground-color, top-margin, and bottom-margin aren’t valid CSS syntax. You’ll want background-color and regular margin declarations instead. Also, make sure the <style> block is placed properly inside the <head>. If you’re learning by fixing small errors like these, looking at practical Business Funding Case Studies can be a good example of how structured information is organized clearly.