Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

I have been on the second task for a long time. My background color code is not working

Business Card { background-color: rosybrown; font-family: Arial,sans-serif;} <p {margin-top:5px;}

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> <style>{
  background-color: rosybrown;
  font-family: Arial,sans-serif;}
  <p {margin-top:5px;}
  </style>
</body>
</html>

/* file: styles.css */

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
https://www.freecodecamp.org/learn/full-stack-developer/lab-business-card/design-a-business-card

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

<head>
    <meta charset="utf-8">
    <title>Business Card</title>
     <link rel="stylesheet" href="styles.css">
    <style> 
        body {
            background-color: rosybrown;
            font-family: Arial, sans-serif;
            text-align: center;
        }

        p {
            margin: 5px 5px;
        }

        a {
            text-decoration: none;
            color: blue;
        }

        a:hover {
            text-decoration: underline;
        }

        .business-card {
            width: 300px;
            background-color: white;
            padding: 20px;
            margin: 100px auto;
            text-align: center;
            font-size: 16px;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        }

        .profile-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .social-media {
            margin-top: 20px;
        }

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

        .social-media a {
            display: block;
            margin: 5px 0;
            font-weight: bold;
        }
    </style>
</head>

<body>
     <div class="business-card">
        <img class="profile-image" alt="Profile picture" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg">
        
        <p class="full-name">Favor Muoneke</p> 
        <p class="designation">COO</p>
        <p class="company">Greenera Technologies</p>

        <hr>

        <p>favorchidi@gmail.com</p>
        <p>08166212005</p>

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

        <hr>

        <div class="social-media">
            <h2>Connect with me</h2>
            <a href="https://mobile.x.com/FavorChidiebere/status/1663041432217681920">Twitter</a>
            <a href="https://www.linkedin.com/in/your-profile">LinkedIn</a>
            <a href="https://github.com/your-username">GitHub</a>
        </div>
    </div>

</body>

</html>
3

I’ve edited your code for readability. 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 (').

4

Welcome to the forum :wave:

It looks ok to me? Did you already solve this problem? It looks like you’ve udpated your code.

Screenshot 2025-03-13 112226
Screenshot 2025-03-13 112226488×612 23.9 KB

5

I observed that I did not paste the entire code initially. The recent I shared is the same code that is not working

6

Alright. Thank you :blue_heart:

7

You’ve linked to an external stylesheet, but you’ve added internal styles.

Please review this video (or the transcript):

https://www.freecodecamp.org/learn/full-stack-developer/lecture-what-is-css/what-are-inline-internal-and-external-css

8

Screenshot (26)
Screenshot (26)1366×768 185 KB

This is what happens when I remove the internal CSS style element.

9

You removed the style elements inside the head element. If you are linking to the external styles.css file, why aren’t you using it? Please review the video I suggested to get clear about the difference between internal styles and external styles and why the latter is almost always best practice.

10

I have reviewed the video

11

Great! Did that help you understand where your CSS rules should go?

12

I am to style within the head element.

13

What exactly am I missing here?

14

Where in the instructions does it ask you to set up CSS rules inside a style element? Instead, the very first instruction says:

  1. You should link the style sheet styles.css using the link tag in the head section of the HTML file.

Which you did. Why do you think you would do that? Is that link element pointing to styles written internally or is it pointing to an external file?

UPDATE: Here’s a quote from the video transcript:

External CSS is written in a separate .css file and linked to the HTML document using the link element in the head section.

15

You can use these buttons to access different files to edit.

Screenshot 2025-03-13 123239
Screenshot 2025-03-13 123239675×351 54.6 KB

1 Like
16

Wow!
This screenshot gave me all the answer. I did not know that I could click on it and style on that page.

Thanks so much. This is so reliving. God bless you :smiling_face_with_three_hearts:

1 Like
17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.