Design a Business Card - Design a Business Card

HTML-CSS
1

Tell us what’s happening:

My Github Anchor is fine but the Twitter and Linkedin Ones are being rejected even though they are identical and are all working. please help

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>
    <div class="business-card">
        <img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="A light pink flower with a red center">
        <p class="full-name">Samuel Cole</p>
        <p class="designation">Full Stack Developer</p>
        <p class="company">@Coco Creates</p>
        <hr>
        <p>scole-22@hsmse.org</p>
        <p>3474155864</p>
        <a href="www.linkedin.com/in/samuel-cole-334a50189">Portfolio</a>
        <hr>
   
            <div class="social-media">
                <h2>Connect with me</h2>
                <a href="www.linkedin.com/in/samuel-cole-334a50189">LinkedIn</a>
                <a href="www.linkedin.com/in/samuel-cole-334a50189">Twitter</a>
                <a href="www.linkedin.com/in/samuel-cole-334a50189">GitHub</a>
            </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;
    }
  
    a:hover {
      text-decoration: underline;
    }
  
    .business-card {
      background-color: white;
      width: 300px;
      padding: 20px;
      margin-top:100px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-size: 16px
    }
  
    .profile-image {
      width: 200px
    }
    
    img + p {
      font-size: 20px;
    }
  
  .social-media a {
    display: inline-block;
    width: 33%;
  }
  
  .company {
    color: grey
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Design a Business Card - Design a Business Card

2

Welcome to the forum @SCOLE-22

Try placing the Twitter link above LinkedIn.

Happy coding

3

Thank you so much. I didnt know the order mattered

1 Like