Design a Business Card - Design a Business Cardbusiness card lab issue

HTML-CSS
1

Tell us what’s happening:

hi, doing the business card lab. now not liking a couple of the elements. how to fix.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="styles.css" />
        <meta charset="UTF-8">
        <title>Digital Business Card</title>
    </head>
    <body>
        <div class="business-card">
            <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="A vibrant flower in full bloom">
            <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="A vibrant flower in full bloom />"
        <p class="full-name">Marvin Hunkin</p>
        <p class="designation">SoftwEare Developer</p>
        <p class="company">@freeCodeCamp</p>
        <hr>
        <p>Email: hunkinmarvin5@gmail.com</p>
<p>Phone: (123) 456-789</p>
<hr>
<a href="">Portfolio</a>
<hr> 
<div class="social-media">
    <a href="https://www.twitter.com">Twitter</a>
    <a href="https://www.linkedin.com">LinkedIn</a>
    <a href="https://www.github.com">GitHub</a>
<h2>Connect with me</h2>
</div>
</div>
</body>
</html>

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

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

        a {
            text-decoration: none;
        }

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

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

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
https://www.freecodecamp.org/learn/full-stack-developer/lab-business-card/design-a-business-card`hi. okay well was able to then get the two editors. the css is fine. the couple of parts in the html, complaining about the p tags class element for full name and something else. so will paste the list of the test. did copy from the editor to visual studio code, and then copied from visual studio code back to the editor. so, what am i doing wrong. is there any extra characters or or any other things that jaws is not picking up. so will paste the error test list and my html. so only two errors in the html, no errors in the css. any help.
marvin.
ps: pasting below.

Skip to content

Menu
Profile

  1. Certified Full Stack Developer Curriculum
  2. Design a Business Card

Instructions

index.htmlEditorstyles.cssEditor

ConsoleHide the previewPreviewMove the preview to a new window and focus it

Design a Business Card

Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

  1. You should link the style sheet styles.css using the link tag in the head section of the HTML file.
  2. Your page background should be rosybrown. The overall font should be Arial, with a fallback of sans-serif.
  3. All of the p elements should have a top and bottom margin of 5px.
  4. All links on the page should not be underlined.
  5. You should have a div with a class attribute with a value of business-card that will contain all the other elements.
  6. The .business-card selector should have properties to set the element as 300px wide and a background color of your choice. Also you should set a padding of 20px all around and a top margin of 100px. The text should be center aligned and the font size should be 16px. The left and right margins should be set to auto.
  7. Inside the .business-card element, there should be an img element with a class attribute with a value of profile-image. You can set the image source to https://cdn.freecodecamp.org/curriculum/labs/flower.jpg if you like. There should be an alt with a meaningful description.
  8. The .profile-image selector should have a max-width property with a value of 100%.
  9. Inside the .business-card element, after the img element, you should have three p elements with a class attribute that has, respectively, a value of full-name, designation, and company.
  10. The first p element should contain your name.
  11. The second p element should contain your designation.
  12. The third p element should have your company name.
  13. There should be an hr element below the third p element.
  14. After the hr element, there should be two p elements. In the first p element, you should have an email address as the text. In the second p element, the text should be a phone number. After the two p elements, there should be an a element with the text Portfolio linking to a valid URL. Add an hr element after the a element containing the portfolio link.
  15. You should have another div element with a class attribute with a value of social-media. Within this element, there should be an h2 element with the text Connect with me.
  16. Inside the .social-media elements, there should be three a elements. The a elements should have the text Twitter, LinkedIn and GitHub respectively with links to valid websites.

Run the Tests (Ctrl + Enter)Reset this lesson

Get Help

Tests

  • Passed:1. Your link element should be within your head element.

  • Passed:2. Your link element should have a rel attribute with the value stylesheet.

  • Passed:3. Your link element should have an href attribute with the value styles.css.

  • Passed:4. You should set the page background color in the body selector to rosybrown.

  • Passed:5. You should set the page font to Arial in the body element with a fallback of sans-serif.

  • Passed:6. Your p elements should have a top and bottom margin of 5px.

  • Passed:7. The links of the page should have no underline.

  • Passed:8. You should have one main div with a class attribute with a value of business-card.

  • Passed:9. Your .business-card selector should have a width property with a value of 300px.

  • Passed:10. Your .business-card selector should have a background-color property with a valid color value.

  • Passed:11. Your .business-card selector should have a padding property with a value of 20px.

  • Passed:12. Your .business-card selector should have a top margin of 100px.

  • Passed:13. The text inside the .business-card element should be center-aligned.

  • Passed:14. The font size of the text inside the .business-card element should be 16px.

  • Passed:15. The left and right margins of the .business-card element should be set to auto.

  • Passed:16. Inside the .business-card element, there should be an img element with a class attribute with a value ofprofile-image.

  • Passed:17. The image source should be set to a valid image.

  • Passed:18. The alt attribute of the image should be set to a meaningful description.

  • Passed:19. Your .profile-image selector should have a max-width property with a value of 100%.

  • Failed:20. Inside the .business-card element, after the img element, there should be a p element with a class attribute with a value of full-name.

  • Passed:21. After the .full-name element, there should be a p element with a class attribute with a value ofdesignation.

  • Passed:22. After the .designation element, there should be a p element with a class attribute with a value of company.

  • Failed:23. The first p element, the one with class of full-name, should contain your name.

  • Passed:24. The second p element, the one with a class attribute of designation, should contain your designation.

  • Passed:25. The third p element, the one with the class attribute with a value ofcompany, should contain your company name.

  • Passed:26. After the third p element, the one with the class attribute with a value of company, there should be an hr element.

  • Passed:27. After the first hr element, there should be a p element with an email address as your text.

  • Passed:28. After the email p element, there should be another p element with a phone number as your text.

  • Passed:29. After the phone number p element, there should be an a element with the text Portfolio

  • Passed:30. Your portfolio a element should have a valid href.

  • Passed:31. After the a element containing your portfolio, there should be another hr element as a divider.

  • Passed:32. After the second hr element, there should be a div element with a class attribute with a value of social-media.

  • Passed:33. Inside the .social-media element, there should be an h2 element with the text Connect with me.

  • Passed:34. Inside the .social-media element there should be three a elements.

  • Passed:35. The first a element should have the text Twitter.

  • Passed:36. The href of the first a element should point to a valid link.

  • Passed:37. The second a element should have the text LinkedIn.

  • Passed:38. The href of the second a element should point to a valid link.

  • Passed:39. The third a element should have the text GitHub.

  • Passed:40. The href of the third a element should point to a valid link.

24

25

26

27

28

29

com">LinkedIn

<a href="https:/

/www.github.

com">GitHub

Connect with

me

22

23

24

25

26

27

28

29

margin-left: auto;

margin-right: auto;

}

.

profile-image {

max-width: 100%;

}

// running tests 20. Inside the

.business-card

element, after the

img

element, there should be a

p

element with a

class

attribute with a value of

full-name

. 23. The first

p

element, the one with class of

full-name

, should contain your name. // tests completed

Navigated to Design a Business Card

Digital Business Card
A vibrant flower in full bloom <img src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="A vibrant flower in full bloom />"

Marvin Hunkin

SoftwEare Developer

@freeCodeCamp

Email: hunkinmarvin5@gmail.com

Phone: (123) 456-789

Portfolio
Twitter LinkedIn GitHub

Connect with me

`
2

check the alt of your second img element, the closing quote is after the angular bracket, making that an incomplete tag

3

hi, got it. thanks for that. a second eyeball is handy.
thanks.
marvin.