Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

Says im missing the body selector when im not… says im missing margins… and im not.

Your code so far

body { background-color: rosybrown; font-family: Arial, sans-serif; } 
    p   {
    margin-top: 5px;
    margin-bottom: 5px;
    }

    a {
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

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

    .profile-image {
    max-width: 100%;
    height: 120px;
    border: solid;
    border-color: darkgrey;
    }

    .full-name {
    margin: 15px auto 5px;
    font-size: 25px;
    }

    .designation {
    color: red;
    }

    .company {
    color: burgandy;
    }

    .linkedin {
    margin-left: 12px;
    margin-right: 10px;
    }
</style>
Business Card
Beautiful flower

TheFunkeeDude

Software Developer

@ThaFunkeeDude

Email: thaFunkeedude@gmail.com

Phone: (333)-555-4543

Portfolio

Connect with me

Twitter LinkedIn GitHub 
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <style>
        body {
        background-color: rosybrown;
        font-family: Arial, sans-serif;
        }

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

        a {
        text-decoration: none;
        }

        a:hover {
        text-decoration: underline;
        }

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

        .profile-image {
        max-width: 100%;
        height: 120px;
        border: solid;
        border-color: darkgrey;
        }

        .full-name {
        margin: 15px auto 5px;
        font-size: 25px;
        }

        .designation {
        color: red;
        }

        .company {
        color: burgandy;
        }

        .linkedin {
        margin-left: 12px;
        margin-right: 10px;
        }
    </style>

<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="Beautiful flower">
        <p class="full-name">TheFunkeeDude</p>
        <p class="designation">Software Developer</p>
        <p class="company">@ThaFunkeeDude</p>
    <hr>
        <p>Email: thaFunkeedude@gmail.com</p>
        <p>Phone: (333)-555-4543</p>
        <a href="#" target="_blank">Portfolio</a>
    <hr>
        <div class="social-media">
            <h2>Connect with me</h2>
                <a class="twitter" href="#" target="_blank">Twitter</a>
                <a class="linkedin" href="#" target="_blank">LinkedIn</a>
                <a class="github" href="#" target="_blank">GitHub</a>
        </div>
    </div>
</body>
</html>

/* file: styles.css */

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

Welcome to the forum @TheFunkeeDude

Instead of using a style element, try placing all the CSS in the styles.css file.

Happy coding

1 Like
3

Thank you!! I love you lmaoo this was driving me nuts. I didn’t even see we had 2 files. Great call.
:saluting_face: