Design a Business Card - Design a Business Card

Tell us what’s happening:

Meu elemento div abiaxo do hr sempre esta dando erro ja tentei de tudo porem nada da certo não sei onde esta o erro ja revisei varias vezes.

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="Margarida cor de Rosa"/>
    <p class="full-name">Patrícia Sousa</p>
    <p class="designation">Doida</p>
    <p class="company">Fazendo doidura</p>
    <hr>
    <p class="company">phatybaista@gmail.com</p>
    <p class="company">
        (38) 998440706
    </p>
    </div>
    <a class="portfolio-link" href="https://univirtus.uninter.com/ava/web/">Portfolio</a>
<hr> 
    <div class="social-media">
    <h2>Connect with me</h2>
    <a class="link" href="https://x.com/?lang=pt">Twitter</a>
    <a class="link"href="https://www.linkedin.com/home?originalSubdomain=br">LinkedIn</a>
    <a class="link"href="https://github.com/?locale=pt-BR">GitHub</a>
</div>
</body>

</html>
/* file: styles.css */
.business-card {
  background-color: pink; 
  width: 300px;
  padding: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
  font-size: 16px;

  }
 body {background-image: url (https://cdn.freecodecamp.org/curriculum/labs/flower.jpg); 
 font-family: Arial,sans-serif; 
 background-color: rosybrown;}
 .profile-image{max-width:100%;}
p { margin-top: 5px; 
margin-bottom: 5px;}
a {text-decoration: none;
color: black}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Design a Business Card - Design a Business Card

If you look at the example, you can clearly see that every info should be on the card and not some of them under it.
You have to reorganise your <div> elements correctly.

Se você observar o exemplo, verá claramente que todas as informações devem estar no cartão e algumas delas não devem estar abaixo dele.
Você precisa reorganizar seus elementos <div> corretamente.

1 Like

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